@font-face {
    font-family: 'Patrick Hand';
    src: url('assets/fonts/patrick-hand.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --app-w: 100vw;
    --app-h: 100vh;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f7f2e8;
    -webkit-tap-highlight-color: transparent;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

#app-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Audio-only YouTube embed used by the headphone interaction. */
.headphone-music {
    position: fixed;
    width: 1px;
    height: 1px;
    left: -9999px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Hold one stable canvas until the layered scene is fully ready. */
body.page-loading .scene-container {
    opacity: 0;
}

/* Seiji Bicycle Loading Screen */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.45s;
}

body.page-loading .loading-screen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: none;
}

.loading-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.loading-art-card {
    position: relative;
    width: min(265px, 68vw, 44vh);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.16s ease-out;
}

.loading-art-card.is-ready {
    opacity: 1;
}

.loading-sky-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.loading-rider-bob {
    position: absolute;
    left: 22%;
    bottom: 8.5%;
    width: 56%;
    z-index: 3;
    animation: seiji-pedal-bob 0.68s ease-in-out infinite;
    will-change: transform;
}

.loading-rider-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 482;
    overflow: hidden;
    filter: drop-shadow(0 6px 14px rgba(14, 16, 26, 0.42));
}

.loading-rider-sheet {
    display: block;
    width: 600%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    animation: seiji-wave-sheet 0.72s steps(6) infinite;
    will-change: transform;
}

.loading-road {
    position: absolute;
    left: 18%;
    width: 64%;
    bottom: 7.2%;
    height: 18px;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.loading-bike-shadow {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 3px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(10, 10, 14, 0.55) 0%, rgba(10, 10, 14, 0.22) 55%, transparent 80%);
    animation: seiji-shadow-pulse 0.68s ease-in-out infinite;
}

.road-dash {
    position: absolute;
    height: 1.5px;
    border-radius: 2px;
    background: rgba(255, 214, 153, 0.38);
    animation: seiji-road-pass 0.85s linear infinite;
}

.road-dash-1 {
    top: 7px;
    width: 34px;
    left: -40px;
    animation-delay: 0s;
}

.road-dash-2 {
    top: 12px;
    width: 22px;
    left: -30px;
    animation-delay: -0.32s;
}

.road-dash-3 {
    top: 5px;
    width: 28px;
    left: -35px;
    animation-delay: -0.61s;
}

.loading-wind {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 36%;
    bottom: 14%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.wind-streak {
    position: absolute;
    height: 1.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 218, 0.42), transparent);
    animation: seiji-breeze 1.05s linear infinite;
}

.wind-streak-1 {
    top: 22%;
    width: 48px;
    left: -56px;
    animation-delay: -0.15s;
}

.wind-streak-2 {
    top: 54%;
    width: 36px;
    left: -44px;
    animation-delay: -0.55s;
}

.wind-streak-3 {
    top: 76%;
    width: 42px;
    left: -50px;
    animation-delay: -0.82s;
}

.loading-meta {
    margin-top: 2px;
    width: min(245px, 66vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loading-quote {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: rgba(45, 42, 36, 0.78);
    text-align: center;
}

.loading-progress-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loading-progress-track {
    position: relative;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: rgba(58, 53, 45, 0.14);
    overflow: hidden;
}

.loading-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3c5482 0%, #c85232 65%, #e59a52 100%);
    transition: width 0.12s ease-out;
}

.loading-progress-status {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'Patrick Hand', Georgia, 'Times New Roman', serif;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    color: rgba(58, 53, 45, 0.62);
}

.loading-status-pct {
    font-variant-numeric: tabular-nums;
    color: rgba(45, 42, 36, 0.78);
}

@keyframes seiji-wave-sheet {
    from { transform: translate3d(0%, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

@keyframes seiji-pedal-bob {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
    50% { transform: translate3d(0, -4.5px, 0) rotate(0.45deg); }
}

@keyframes seiji-shadow-pulse {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.95; }
    50% { transform: scaleX(0.93) scaleY(0.82); opacity: 0.72; }
}

@keyframes seiji-road-pass {
    0% { transform: translate3d(-20px, 0, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate3d(320px, 0, 0); opacity: 0; }
}

@keyframes seiji-breeze {
    0% { transform: translate3d(-30px, 0, 0); opacity: 0; }
    25% { opacity: 0.85; }
    75% { opacity: 0.85; }
    100% { transform: translate3d(380px, 0, 0); opacity: 0; }
}

@keyframes seiji-dot-hop {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-rider-bob,
    .loading-rider-sheet,
    .loading-bike-shadow,
    .road-dash,
    .wind-streak,
    .loading-dots span {
        animation: none;
    }
}


.scene-container {
    position: relative;
    width: min(var(--app-w), calc(var(--app-h) * (1080 / 723)));
    aspect-ratio: 1080 / 723;
    max-height: var(--app-h);
    max-width: var(--app-w);
    box-shadow: none;
    border-radius: 0;
    z-index: 1; /* Establish stacking context */
    overflow: visible;
    container-type: inline-size;
    container-name: scene;
    opacity: 1;
    transition: opacity .28s ease-out;
}

/* Background fills the entire viewport seamlessly with zero black bars */
.scene-container::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/a/park_pavement_sunlight.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: filter 1.5s ease;
}

body.winter-boy-active .interactive-item,
body.winter-boy-active .interactive-item.is-hovered,
body.winter-boy-active .surface-snow { filter: none; }

.interactive-item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    filter: drop-shadow(6px 6px 10px rgba(0,0,0,.18));
    
    /* Smooth cinematic opacity, movement, and filter changes. */
    transition: opacity 0.5s ease, transform 0.35s ease, filter 1.5s ease;
    
    pointer-events: none; 
}

/* We use a class instead of :hover so JS can trigger it from the hitboxes */
.interactive-item.is-hovered {
    transform: translateY(-8px) scale(1.03);
    filter:
        brightness(1.08)
        drop-shadow(0 18px 22px rgba(0,0,0,.25))
        drop-shadow(0 0 20px rgba(148,163,255,.35));
    
    z-index: 10;
}

/* ============================================
   PHONE SOCIAL LINKS — FLOOR TO UPPER-RIGHT
   ============================================ */
#phone,
#phone-surface-snow {
    transition: opacity .5s ease,
        transform .9s cubic-bezier(.2,.78,.2,1),
        filter .9s ease;
}

body.phone-socials-active #phone,
body.phone-socials-active #phone-surface-snow {
    transform-origin: 57% 50%;
    transform: translate(29%, -25%) rotate(-12deg) !important;
}

body.phone-socials-active #phone {
    opacity: 1 !important;
    z-index: 85;
    filter: brightness(1.05) drop-shadow(12px 18px 18px rgba(36, 28, 26, .28));
}

body.phone-socials-active #phone-surface-snow {
    z-index: 86;
}

body.phone-socials-active.winter-boy-active .winter-boy {
    z-index: 86;
}

body.phone-socials-active #phone.is-hovered,
body.phone-socials-active #phone-surface-snow.is-hovered {
    transform: translate(29%, -25%) rotate(-12deg) scale(1.02) !important;
}

body.phone-socials-active .headphone-connect {
    opacity: 0 !important;
}

.phone-social-links {
    position: absolute;
    z-index: 90;
    left: 90%;
    top: 20.5%;
    display: grid;
    gap: .18em;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px) rotate(-2deg);
    transition: opacity .45s ease .62s, transform .55s cubic-bezier(.2,.8,.2,1) .62s;
}

.phone-social-links span,
.phone-social-links a {
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    font-size: clamp(10px, 1.3cqw, 16px);
}

.phone-social-links span {
    margin-bottom: .2em;
    color: #222222;
}

.phone-social-links a {
    width: max-content;
    color: #111111;
    line-height: 1.05;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-9px);
    transition: color .2s ease, opacity .35s ease, transform .35s ease;
}

.phone-social-links a:nth-of-type(1) { transition-delay: 0s, .78s, .78s; }
.phone-social-links a:nth-of-type(2) { transition-delay: 0s, .9s, .9s; }
.phone-social-links a:nth-of-type(3) { transition-delay: 0s, 1.02s, 1.02s; }

body.phone-socials-active .phone-social-links {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
}

body.phone-socials-active .phone-social-links a {
    opacity: 1;
    transform: translateX(0);
}

.phone-social-links a:hover,
.phone-social-links a:focus-visible {
    color: #4a1010;
    text-decoration: underline;
    outline: none;
    transform: translateX(4px);
}

/* Follow the phone's visible destination so it can be clicked again to close. */
body.phone-socials-active .hitbox[data-target="phone"] {
    left: 82.5% !important;
    top: 18% !important;
    width: 8.5% !important;
    height: 17% !important;
    z-index: 92 !important;
}


@media (prefers-reduced-motion: reduce) {
    body.phone-socials-active #phone,
    body.phone-socials-active #phone-surface-snow { transition-duration: .01ms; }
    .phone-social-links,
    .phone-social-links a { transition-duration: .01ms; transition-delay: 0s; }
}

/* One reusable current-book asset placed over the shared seated lap area. */
.lap-book-cover {
    position: absolute;
    z-index: 72;
    left: 39.7%;
    top: 43.9%;
    width: 3.7%;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px) rotate(81deg) scale(.88);
    transform-origin: center;
    filter: drop-shadow(0 5px 5px rgba(35,25,25,.24));
    transition: opacity .35s ease, transform .48s cubic-bezier(.2,.78,.22,1);
}

body.lap-book-active .lap-book-cover {
    opacity: 1;
    transform: translateY(0) rotate(81deg) scale(1);
}

body.lap-book-active:has(#boy.is-hovered) .lap-book-cover,
body.lap-book-active:has(.winter-boy.is-hovered) .lap-book-cover,
body.lap-book-active.winter-boy-active .lap-book-cover {
    transform: translateY(-8px) rotate(81deg) scale(1.03);
}

/* ============================================
   SAPPORO WINTER BOY
   ============================================ */
.winter-boy {
    position: absolute;
    inset: 0;
    /* Live snowfall must pass in front of every desk asset and animation.
       Ground accumulation is a separate canvas at z-index 0. */
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out;
}

.winter-boy.is-active { opacity: 1; }
.winter-boy.is-active.is-handing-off { opacity: 0; }
body.winter-boy-active #boy { opacity: 0 !important; }

.winter-boy > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.winter-boy #winter-boy-animator {
    transform-origin: center;
    transition: transform .35s ease, filter .35s ease;
}

body.winter-boy-active .winter-boy #winter-boy-animator,
body.winter-boy-active #boy-surface-snow,
.winter-boy.is-hovered #winter-boy-animator {
    transform: translateY(-8px) scale(1.03);
    filter: brightness(1.08) drop-shadow(0 18px 22px rgba(0,0,0,.25));
}

.winter-boy.is-handing-off #winter-boy-animator,
.winter-boy.is-handing-off #boy-surface-snow {
    transform: translateY(0) scale(1);
    filter: none;
}

.sapporo-note {
    position: absolute;
    top: 7%;
    left: 41%;
    margin: 0;
    color: #111111;
    font-family: 'Patrick Hand', cursive;
    font-size: clamp(9px, 1.7cqw, 21px);
    line-height: 1.15;
    letter-spacing: .02em;
    opacity: 0;
    white-space: nowrap;
    transform: translateY(8px) rotate(-2deg);
    transition: opacity .55s ease, transform .55s ease;
    z-index: 4;
}

.sapporo-note strong {
    color: #4a1010;
    font-size: clamp(11px, 2.15cqw, 26px);
    font-weight: 400;
}

.winter-boy.is-settled .sapporo-note {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
}

.sapporo-note.intro-note {
    top: 6%;
    left: 68%;
    width: 27%;
    white-space: normal;
    font-size: clamp(8px, 1.35cqw, 16px);
    line-height: 1.25;
}

.winter-snow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.winter-snow-back { z-index: 0; }
.aurora-light {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    display: none;
}
body.aurora-active .aurora-light { display: block; }
body.aurora-active.winter-boy-active .scene-container::before {
    filter: brightness(.72) saturate(.65);
}
.aurora-curtain {
    position: absolute;
    left: -12%;
    top: -25%;
    width: 125%;
    height: 60%;
    border-radius: 0 0 48% 60%;
    background:
        repeating-linear-gradient(96deg, transparent 0 2%, rgba(128,255,214,.22) 2.7%, transparent 4.3%),
        linear-gradient(180deg, transparent 15%, rgba(52,187,161,.12) 43%, rgba(73,244,197,.58) 76%, rgba(96,151,255,.22) 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent, #000 18% 80%, transparent);
    filter: blur(8px);
    transform-origin: 50% 0;
    animation: aurora-wave 16s ease-in-out infinite alternate;
    opacity: .65;
}
.aurora-curtain-two {
    top: -30%;
    left: -25%;
    height: 64%;
    filter: blur(13px) hue-rotate(36deg);
    animation-duration: 23s;
    animation-delay: -9s;
    opacity: .4;
}
.aurora-curtain-three {
    left: 20%;
    width: 85%;
    top: -27%;
    height: 53%;
    filter: blur(11px) hue-rotate(95deg);
    animation-duration: 19s;
    animation-delay: -5s;
    opacity: .25;
}
.aurora-reflection {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 72%, rgba(87,220,191,.12), transparent 48%),
        radial-gradient(ellipse at 80% 80%, rgba(142,122,220,.1), transparent 45%);
}
@keyframes aurora-wave {
    0% { transform: translate(-3%, -2%) skewX(-12deg) rotate(-5deg) scaleY(.82); }
    50% { transform: translate(2%, 3%) skewX(5deg) rotate(2deg) scaleY(1.07); }
    100% { transform: translate(5%, -1%) skewX(13deg) rotate(-2deg) scaleY(.94); }
}
@media (prefers-reduced-motion: reduce) {
    .aurora-curtain { animation: none; }
}
.winter-snow-front { z-index: 80; }
body.winter-boy-active .winter-snow,
.winter-boy.is-active .winter-snow {
    opacity: 1;
}
.winter-snow i {
    position: absolute;
    top: -5vh;
    left: var(--snow-x);
    width: clamp(1px, var(--snow-size-cqw, var(--snow-size)), 6.5px);
    height: clamp(1px, var(--snow-size-cqw, var(--snow-size)), 6.5px);
    border-radius: 50%;
    background: #fff;
    opacity: var(--snow-alpha);
    filter: blur(clamp(0px, var(--snow-blur, 0.4px), 1px));
    box-shadow: 0 0 clamp(1px, 0.22cqw, 3.5px) rgba(255,255,255,.7);
    animation: sapporo-snow var(--snow-speed) linear var(--snow-delay) infinite;
}

.surface-snow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(112,132,143,.16));
    transition: opacity .2s linear, transform .35s ease;
}
.surface-snow.is-hovered { transform: translateY(-8px) scale(1.03); }
.bag-surface-snow { top: -3%; bottom: auto; }
.books-surface-snow { left: 6%; right: auto; }

.snow-piles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    filter: none;
    pointer-events: none;
    transition: opacity .35s ease;
}
body.winter-boy-active .snow-piles { opacity: 1; }

@keyframes sapporo-snow {
    from { transform: translate3d(0, -6vh, 0) rotate(0); }
    22% { transform: translate3d(var(--snow-sway-a), 26vh, 0) rotate(78deg); }
    47% { transform: translate3d(var(--snow-sway-b), 52vh, 0) rotate(172deg); }
    73% { transform: translate3d(var(--snow-sway-c), 78vh, 0) rotate(268deg); }
    to { transform: translate3d(var(--snow-end), 108vh, 0) rotate(360deg); }
}


/* Invisible Hitbox Overlay System */
.hitbox-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.hitbox {
    position: absolute;
    cursor: pointer;
}

.hitbox[data-static] {
    cursor: default;
    pointer-events: auto;
}

#bag.is-hovered,
#paper.is-hovered {
    transform: none !important;
    filter: drop-shadow(6px 6px 10px rgba(0,0,0,.18)) !important;
}



/* Transparent Overlay Modal */
.info-panels-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* No dark background, just pure transparency! */
    background-color: transparent; 
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.info-panels-modal.modal-active {
    opacity: 1;
    pointer-events: auto;
}

/* Hide about scene elements by default */
.about-scene-item {
    opacity: 0;
    pointer-events: none;
}





/* Hide bike scene elements by default */
.bike-scene-item {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Hide laptop animation elements by default */
.laptop-scene-item {
    position: absolute;
    top: 61.8%; /* Match hitbox roughly */
    left: 39.4%;
    width: 25%; /* Adjust size */
    opacity: 0;
    pointer-events: none;
    transform: translate(-20%, -30%); /* Center over the original laptop */
    z-index: 50; /* Bring above other desk items */
}

/* When laptop opening animation is active */
body.laptop-opening .laptop-scene-item {
    opacity: 1 !important;
}
body.laptop-opening #laptop {
    opacity: 0 !important;
}

/* ============================================
   LOFI ROOM BUILD-UP SCENE
   ============================================ */
.lofi-table-container {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 45%; /* Shifted down again */
    z-index: 45; /* Under the laptop */
    opacity: 0;
    pointer-events: none;
    transform: translateY(100vh); /* Start off-screen */
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

body.table-active .lofi-table-container {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Enable clicking the drawer */
}

.lofi-table {
    width: 100%;
    display: block;
}

/* ============================================
   LOFI GLASS WINDOW
   ============================================ */

.lofi-window {
    position: absolute;
    top: 21%;
    left: 21%;
    width: 58%;
    aspect-ratio: 1774 / 887;
    z-index: 30;
    overflow: hidden;
    filter: drop-shadow(0 12px 16px rgba(68, 52, 36, 0.28));
}

.window-view-container,
.window-glass-glow {
    position: absolute;
    top: 15.3%;
    left: 10.3%;
    width: 79.5%;
    height: 67.2%;
    overflow: hidden;
}

.window-view-container {
    z-index: 1;
    background: #10152a;
}

#window-view-img {
    display: block;
    width: 2000%;
    height: 100%;
    object-fit: fill;
    max-width: none;
    transform-origin: left top;
    animation: play-window 2.8s steps(20, end) infinite;
}

.window-glass-glow {
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 9%, rgba(255, 211, 120, .23) 0 1.2%, transparent 4%),
        radial-gradient(circle at 88% 13%, rgba(255, 205, 105, .18) 0 1%, transparent 3.5%),
        linear-gradient(116deg, transparent 4%, rgba(255,255,255,.18) 8%, rgba(255,255,255,.04) 14%, transparent 21%),
        linear-gradient(116deg, transparent 56%, rgba(255,244,224,.12) 61%, transparent 68%),
        linear-gradient(to bottom, rgba(154, 183, 218, .13), transparent 42%, rgba(255, 190, 121, .05));
    box-shadow:
        inset 0 0 0 1px rgba(232, 242, 255, .28),
        inset 0 0 26px rgba(126, 159, 196, .13),
        inset 0 -12px 20px rgba(255, 190, 111, .06);
    opacity: .9;
}

.lofi-window-frame {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Hide table scene items by default, then show and slide them up when the table is active */
.table-scene-item {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100vh);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

body.table-active .table-scene-item {
    opacity: 1;
    transform: translateY(0);
}

/* Move the open laptop to the CENTER when the table slides in */
body.table-active .laptop-scene-item {
    top: 64%; /* Reverted to the perfect position, shifted down again */
    left: 50%; /* Centered on the desk */
    width: 25%;
    transform: translate(-50%, -50%);
    transition: top 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                left 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Suppress all winter scene elements and snow when table or full-screen modes are open */
body.table-active .winter-boy,
body.table-active .surface-snow,
body.table-active .sapporo-note,
body.table-active .snow-piles,
body.table-active .winter-snow,
body.table-active .aurora-light,
body.laptop-opening .winter-boy,
body.laptop-opening .surface-snow,
body.laptop-opening .sapporo-note,
body.laptop-opening .snow-piles,
body.laptop-opening .winter-snow,
body.laptop-opening .aurora-light,
body.bike-active .winter-boy,
body.bike-active .surface-snow,
body.bike-active .sapporo-note,
body.bike-active .snow-piles,
body.bike-active .winter-snow,
body.bike-active .aurora-light,
body.about-active .winter-boy,
body.about-active .surface-snow,
body.about-active .sapporo-note,
body.about-active .snow-piles,
body.about-active .winter-snow,
body.about-active .aurora-light,
body.table-active .grass-relax,
body.table-active .sakura-layer,
body.table-active .headphone-connect,
body.laptop-opening .grass-relax,
body.laptop-opening .sakura-layer,
body.laptop-opening .headphone-connect,
body.bike-active .grass-relax,
body.bike-active .sakura-layer,
body.bike-active .headphone-connect,
body.about-active .grass-relax,
body.about-active .sakura-layer,
body.about-active .headphone-connect {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   FAIRY LIGHTS ASSET
   ============================================ */
.lofi-fairy-lights {
    position: fixed;
    top: -5vw; /* Positioned cleanly above the blackboard while draping edge-to-edge */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100vh);
    transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease;
    transition-delay: 0.2s; /* Drops in slightly after the table starts sliding */
}

body.table-active .lofi-fairy-lights {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   HEADPHONE CABLE CONNECTION
   ============================================ */
.headphone-connect {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 14;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.45s ease;
}

.headphone-connect.is-active {
    opacity: 1;
}

body.headphone-connected #headphone {
    opacity: 0 !important;
}

body.headphone-connected:not(.grass-relax-active):not(.phone-socials-active) #phone {
    opacity: 0 !important;
}

.headphone-connect-animator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   IN-SCENE RELAXATION — unlocked by headphones
   ============================================ */
.sakura-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.sakura-ground { z-index: 0; }
.sakura-air { z-index: 69; }

.grass-relax {
    position: absolute;
    inset: 0;
    z-index: 13;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility 0s linear .45s;
}

.grass-relax.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto;
    cursor: pointer;
}

/* The relaxed pose exposes more of the books than the default desk hitbox.
   Keep the whole visible book clickable instead of letting the boy hitbox
   underneath intercept its right-hand side. */
body.grass-relax-active .hitbox[data-target="books"] {
    left: 15.5% !important;
    top: 52.5% !important;
    width: 7.9% !important;
    height: 23.5% !important;
    z-index: 3;
}

.grass-boy-animator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.grass-boy-animator {
    z-index: 3;
    object-fit: contain;
    opacity: 1;
    transition: transform 1.1s cubic-bezier(.16,.8,.24,1), opacity .72s ease;
    filter: drop-shadow(0 12px 10px rgba(29,56,29,.2));
}

.current-book-card {
    position: absolute;
    z-index: 2;
    left: 31.5%;
    top: 27%;
    width: 5.25%;
    aspect-ratio: 800 / 1205;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(10px, 8px) rotate(-9deg) scale(.82);
    transform-origin: center;
    transition: opacity .3s ease, left .56s cubic-bezier(.2,.75,.22,1), top .56s cubic-bezier(.2,.75,.22,1), width .56s cubic-bezier(.2,.75,.22,1), height .56s cubic-bezier(.2,.75,.22,1), transform .56s cubic-bezier(.2,.75,.22,1);
}

.current-book-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
}

.grass-relax.book-ready .current-book-card {
    opacity: 1;
    transform: rotate(-6deg) scale(1);
}

.grass-relax.is-picking-book .current-book-card,
.grass-relax.reading-complete .current-book-card {
    left: 40.1%;
    top: 29.75%;
    width: 5.55%;
    height: 10.85%;
    aspect-ratio: auto;
    transform: rotate(0) scale(1);
}

.current-book-pickup {
    position: absolute;
    left: 31%;
    top: 26.5%;
    width: 6.2%;
    height: 13%;
    z-index: 2;
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

body:has(.grass-relax.book-ready:not(.is-picking-book):not(.reading-complete)) .current-book-pickup {
    display: block;
}

.grass-relax.is-relaxed .grass-boy-animator {
    transform: translateY(2px) scale(1.01);
}

.grass-note {
    position: absolute;
    z-index: 3;
    left: 7%;
    bottom: 8%;
    margin: 0;
    color: rgba(245,239,210,.94);
    font-family: 'Patrick Hand', cursive;
    font-size: clamp(10px, 2.1cqw, 24px);
    line-height: 1.15;
    letter-spacing: .02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .8s ease 1.5s, transform .8s ease 1.5s;
    text-shadow: 0 2px 7px rgba(24,54,30,.45);
}

.grass-relax.is-relaxed .grass-note {
    opacity: 1;
    transform: translateY(0);
}

.grass-relax.is-reading .grass-note {
    opacity: 0;
    transition-delay: 0s;
}

.current-read {
    position: absolute;
    z-index: 4;
    left: 7%;
    bottom: 8%;
    max-width: 27%;
    color: rgba(255,246,229,.97);
    font-family: 'Patrick Hand', cursive;
    text-shadow: 0 2px 8px rgba(48,25,30,.55);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s ease .35s, transform .7s ease .35s;
}

.current-read span,
.current-read strong,
.current-read em { display: block; }
.current-read span { font-size: clamp(9px, 1.35cqw, 16px); letter-spacing: .09em; text-transform: lowercase; }
.current-read strong { margin-top: .2em; font-size: clamp(13px, 2.25cqw, 27px); line-height: 1.02; }
.current-read em { margin-top: .35em; font-size: clamp(10px, 1.55cqw, 19px); font-style: normal; }

.grass-relax.is-reading .current-read {
    opacity: 1;
    transform: translateY(0);
}

body.grass-relax-active #boy,
body.from-grass-relax #boy,
body.laptop-opening #boy {
    opacity: 0 !important;
}

/* Clear the relaxed boy's feet without changing the normal desk layout. */
body.grass-relax-active #laptop,
body.from-grass-relax #laptop {
    transform: translateX(-16%);
}

body.grass-relax-active #laptop.is-hovered {
    transform: translateX(-16%) translateY(-8px) scale(1.03);
}

body.grass-relax-active .hitbox[data-target="laptop"] {
    left: 23.4% !important;
    top: 61.8% !important;
    width: 13.2% !important;
    height: 15.8% !important;
    z-index: 25 !important;
}

body.from-grass-relax:not(.table-active) .laptop-scene-item,
body.grass-relax-active:not(.table-active) .laptop-scene-item {
    left: 23.4%;
}

/* Synchronize phone shifting above and right at the exact same time as laptop */
body.grass-relax-active .headphone-connect {
    opacity: 0 !important;
    transform: translate(calc(100% * 35 / 1080), calc(100% * -50 / 723));
}

body.grass-relax-active #phone {
    opacity: 1 !important;
    transform: translate(calc(100% * 35 / 1080), calc(100% * -50 / 723));
}

body.grass-relax-active #phone.is-hovered {
    transform: translate(calc(100% * 35 / 1080), calc(100% * -50 / 723)) translateY(-8px) scale(1.03);
}

body.grass-relax-active:not(.phone-socials-active) .hitbox[data-target="phone"] {
    top: 38.5% !important;
    left: 56.5% !important;
}

@media (prefers-reduced-motion: reduce) {
    .grass-boy-animator,
    .current-book-card,
    .current-read,
    .grass-note { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Room 3 — the window is replaced entirely by a cafe menu blackboard. */
body[data-room="room3"] .lofi-window {
    top: 19%;
    left: 24%;
    width: 52%;
    aspect-ratio: 1659 / 948;
    overflow: visible;
    z-index: 48;
    filter: drop-shadow(0 13px 18px rgba(65, 44, 25, .3));
}

/* Let Room 3's board controls receive clicks through the otherwise transparent
   modal while keeping its Back button available. */
body[data-room="room3"] .info-panels-modal.modal-active {
    pointer-events: none;
}

body[data-room="room3"] .info-panels-modal.modal-active .close-btn {
    pointer-events: auto;
}

body[data-room="room3"] .window-view-container,
body[data-room="room3"] .window-glass-glow {
    display: none;
}

.blackboard-project-layer {
    display: none;
}

body[data-room="room3"] .blackboard-project-layer {
    position: absolute;
    z-index: 5;
    top: 13%;
    left: 13%;
    width: 74%;
    height: 69%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgba(246, 231, 190, .94);
    font-family: 'Patrick Hand', 'Segoe Print', cursive;
    text-shadow: 0 0 1px rgba(255,255,255,.35);
    pointer-events: auto;
}

.chalk-kicker {
    min-height: 1.1em;
    margin-top: 1%;
    font: 400 clamp(7px, 0.95cqw, 14px)/1.2 'Patrick Hand', cursive;
    letter-spacing: .12em;
    opacity: .85;
}

.blackboard-project-layer h2 {
    min-height: 1.15em;
    margin: 1% 0;
    font-size: clamp(13px, 2.7cqw, 42px);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.blackboard-project-layer p {
    white-space: pre-line;
}

#chalk-description {
    min-height: 2.8em;
    max-width: 84%;
    margin: 1% 0;
    font-size: clamp(8px, 1.2cqw, 17px);
    line-height: 1.38;
}

.chalk-stack {
    min-height: 1.2em;
    max-width: 84%;
    margin: 1% 0 0;
    color: rgba(218, 232, 205, .9);
    font: clamp(7.5px, 0.98cqw, 14px)/1.3 'Patrick Hand', cursive;
}

#chalk-project-link {
    margin-top: auto;
    color: #f2d79f;
    font-size: clamp(8px, 1.05cqw, 14px);
    text-decoration: underline wavy rgba(242, 215, 159, .55);
    text-underline-offset: 3px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .35s ease;
}

#chalk-project-link.is-visible {
    opacity: .92;
    transform: translateY(0);
}

.blackboard-project-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(246, 231, 190, .82);
    font: 400 clamp(7.5px, 0.95cqw, 13px)/1 'Patrick Hand', cursive;
}

.blackboard-project-controls button {
    min-width: clamp(14px, 1.6cqw, 22px);
    padding: 0 2px;
    color: rgba(246, 231, 190, .92);
    font: 400 clamp(11px, 1.6cqw, 24px)/1 'Patrick Hand', cursive;
    text-shadow: 0 0 1px rgba(255,255,255,.45);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}

.blackboard-project-controls button:hover {
    color: #fff1c8;
    transform: scale(1.12);
}

.animated-chalk {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    width: clamp(8px, 1.3cqw, 22px);
    height: clamp(2.5px, .32cqw, 5px);
    border-radius: 4px;
    background: #f1dfb5;
    box-shadow: 0 0 4px rgba(255,245,210,.5);
    opacity: 0;
    transform: rotate(-12deg);
    transition: left .13s ease-out, top .13s ease-out, opacity .18s ease;
}

.is-writing .animated-chalk {
    opacity: 1;
}

.chalk-word {
    display: inline-block;
    opacity: 0;
    filter: blur(1.5px);
    transform-origin: left bottom;
}

.chalk-word.is-visible {
    opacity: 1;
    filter: blur(0);
    animation: chalk-word-appears .28s ease-out both;
}

.chalk-word.is-erased {
    animation: chalk-word-erases .2s ease-in forwards;
}

.animated-duster {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: clamp(28px, 5.2cqw, 92px);
    aspect-ratio: 2020 / 778;
    height: auto;
    background: url('assets/rooms/room3/duster.png') center / contain no-repeat;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
    opacity: 0;
    transform-origin: center;
}

.is-erasing .animated-duster {
    opacity: 1;
}

.chalk-dust-puff {
    position: absolute;
    z-index: 7;
    width: clamp(10px, 1.8cqw, 34px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(226, 222, 205, .26), rgba(204, 207, 198, .08) 45%, transparent 72%);
    transform: translate(-50%, -50%);
    animation: chalk-dust-drift .6s ease-out forwards;
}

@keyframes chalk-word-appears {
    0% { opacity: 0; filter: blur(2px); clip-path: inset(0 100% 0 0); }
    55% { opacity: .72; }
    100% { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); }
}

@keyframes chalk-word-erases {
    0% { opacity: 1; filter: blur(0); }
    45% { opacity: .45; filter: blur(1px); transform: scaleX(.92); }
    100% { opacity: 0; filter: blur(3px); transform: scaleX(.75); }
}

@keyframes chalk-dust-drift {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    28% { opacity: .75; }
    100% { opacity: 0; transform: translate(-38%, -85%) scale(1.65); }
}




/* Specific position for the bicycle frames so they sit on the road */
#bike-animator {
    position: absolute;
    top: 10%;
    /* initial off-screen start */
    left: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.1);
    pointer-events: none;
}

@keyframes cycleAcross {
    0% { left: 100%; }
    100% { left: -100%; }
}

body.bike-active #bike-animator {
    animation: cycleAcross 12s linear infinite;
}

/* Make sure the hitboxes in the about scene are clickable! */
body.about-active .hitbox.about-scene-item {
    pointer-events: auto;
}

/* When the About scene is active, hide ALL items */
body.about-active .interactive-item,
body.about-active .hitbox {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show the about scene items */
body.about-active .about-scene-item {
    opacity: 1 !important;
}


/* When the Bike scene is active, hide ALL desk and about items */
body.bike-active .interactive-item,
body.bike-active .hitbox {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show the bike scene items */
body.bike-active .bike-scene-item {
    opacity: 1 !important;
}

.close-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 20px;
    border-radius: 30px;
    color: #333;
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.modal-content-container {
    width: 90%;
    max-width: 800px;
    /* No more popup card! Text goes directly on the canvas */
    color: #222;
    font-family: 'Inter', sans-serif;
    
    /* This CSS trick blends the dark text directly into the watercolor background like real ink! */
    mix-blend-mode: multiply;
    opacity: 0.9;
}

.panel {
    display: none;
    text-align: center;
    /* Gentle fade in instead of popup slide */
    animation: fadeInText 0.8s ease forwards;
}

.panel.active {
    display: block;
}

.panel h2 {
    margin-top: 0;
    font-size: clamp(2.2rem, 4.5vw, 4.2rem);
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.04em;
    color: #111;
}

.panel p {
    line-height: 1.6;
    font-size: clamp(1.05rem, 1.8vw, 1.55rem);
    color: #222;
    margin: 0;
    font-weight: 400;
}

@keyframes fadeInText {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Swap background when the boy (About section) is clicked */
body.about-active .scene-container::before {
    background-image: url('assets/a/about_background.png');
}

/* Swap background when the bike scene is active */
body.bike-active .scene-container::before {
    background-image: url('assets/scene2/road\ _background.png');
}

/* -------------------------------------
   SCENE TRANSITION LOGIC
---------------------------------------- */

/* Dedicated Back Button for About Scene */
.about-back-btn {
    display: none;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 2000;
}
body.about-active .about-back-btn {
    display: block;
}

/* Dedicated Back Button for Bike Scene */
.bike-back-btn, .bookshelf-back-btn {
    display: none;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1.1rem;
    color: #333;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: all 0.5s ease;
}
body.bike-active .bike-back-btn {
    display: block;
}
body.bookshelf-active .bookshelf-back-btn {
    display: block;
}

/* ============================================
   POMODORO TIMER SCENE
   ============================================ */
.pomodoro-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 80vh;
    max-width: 1200px;
    transform: translate(-50%, -40%);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 25px 40px rgba(0,0,0,0.5));
    overflow: hidden;
    border-radius: 20px;
}

body.bookshelf-active .pomodoro-container {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

body.bookshelf-active .hitbox-container {
    pointer-events: none;
}

/* Layering the scene */
.pomodoro-bg,
.pomodoro-char,
.pomodoro-window {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.pomodoro-bg { z-index: 1; }
.pomodoro-char { z-index: 2; object-fit: contain; transform-origin: bottom center; }
.pomodoro-window { z-index: 3; }

/* Glassmorphism UI */
.pomodoro-ui {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px 30px;
    text-align: center;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

#timer-display {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.timer-controls button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.timer-controls button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Character Animations */
.char-dip {
    animation: dip-swap 1s ease-in-out;
}

@keyframes dip-swap {
    0% { transform: translateY(0); }
    40% { transform: translateY(100%); opacity: 0; }
    60% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.char-jump {
    animation: happy-jump 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
}

@keyframes happy-jump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15%); }
}

/* ============================================
   REALISTIC COFFEE STEAM ANIMATION
   ============================================ */
.smoke-puff {
    animation: drift-up 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    opacity: 0;
}
.puff-1 { animation-delay: 0s; animation-duration: 4s; }
.puff-2 { animation-delay: 1.2s; animation-duration: 3.5s; }
.puff-3 { animation-delay: 2.5s; animation-duration: 4.5s; }

@keyframes drift-up {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    30% { opacity: 0.8; }
    70% { opacity: 0.6; }
    100% { transform: translateY(-80px) translateX(15px) scale(2.5); opacity: 0; }
}

/* ============================================
   WINDOW VIEW ANIMATION
   ============================================ */
@keyframes play-window {
    0% { transform: translateX(0); }
    100% { transform: translateX(-95%); }
}

/* ============================================
   MOBILE & TABLET LANDSCAPE-MODE FORCING SYSTEM
   ============================================ */

/* Responsive adjustments for landscape mobile or short viewports */
@media screen and (max-height: 600px), screen and (max-width: 900px) {
    .panel h2 {
        font-size: clamp(1.8rem, 8vh, 2.8rem);
        margin-bottom: 8px;
    }
    .panel p {
        font-size: clamp(0.95rem, 3.8vh, 1.25rem);
        line-height: 1.4;
    }
    .sapporo-note {
        top: 6%;
        left: 39%;
        font-size: clamp(8px, 1.6cqw, 14px);
    }
    .sapporo-note strong {
        font-size: clamp(10px, 2.0cqw, 17px);
    }
    .sapporo-note.intro-note {
        top: 5%;
        left: 66%;
        width: 29%;
        font-size: clamp(7.5px, 1.25cqw, 12px);
        line-height: 1.2;
    }
    .grass-note {
        font-size: clamp(9px, 1.7cqw, 16px);
    }
    body[data-room="room3"] .blackboard-project-layer {
        top: 10%;
        left: 10%;
        width: 80%;
        height: 75%;
    }
    .chalk-kicker {
        font-size: clamp(6.5px, 0.9cqw, 10px);
    }
    .blackboard-project-layer h2 {
        font-size: clamp(10.5px, 2.2cqw, 18px);
        margin: 0.5% 0;
    }
    #chalk-description {
        font-size: clamp(6.5px, 1.05cqw, 11px);
        line-height: 1.25;
        max-width: 88%;
        min-height: auto;
    }
    .chalk-stack {
        font-size: clamp(6px, 0.9cqw, 9.5px);
        max-width: 88%;
        margin: 0.5% 0 0;
    }
    #chalk-project-link {
        font-size: clamp(6.5px, 0.95cqw, 10.5px);
    }
    .blackboard-project-controls {
        font-size: clamp(6.5px, 0.9cqw, 10.5px);
    }
    .blackboard-project-controls button {
        font-size: clamp(8px, 1.3cqw, 13px);
    }
    .close-btn {
        top: max(12px, env(safe-area-inset-top));
        left: max(14px, env(safe-area-inset-left));
        padding: 6px 14px;
    }
}

/* Force landscape view on mobile & tablet when held in portrait */
@media screen and (orientation: portrait) and ((hover: none) or (max-width: 1024px)) {
    :root {
        --app-w: 100vh;
        --app-w: 100dvh;
        --app-h: 100vw;
        --app-h: 100dvw;
    }

    #app-wrapper {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vh;
        width: 100dvh;
        height: 100vw;
        height: 100dvw;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
        overflow: hidden;
    }

    .lofi-fairy-lights {
        top: calc(-0.07 * var(--app-w));
    }
}

/* Subtle, animated rotate reminder hint for portrait users */
.rotate-hint {
    display: none;
}

@media screen and (orientation: portrait) and ((hover: none) or (max-width: 1024px)) {
    .rotate-hint {
        display: flex;
        position: fixed;
        bottom: max(20px, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        z-index: 99999;
        pointer-events: auto;
        animation: rotateHintPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .rotate-hint.is-dismissed {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 15px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .rotate-hint-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(36, 30, 26, 0.88);
        color: #fff;
        padding: 9px 15px;
        border-radius: 24px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.01em;
        border: 1px solid rgba(255, 255, 255, 0.15);
        cursor: pointer;
        user-select: none;
    }

    .rotate-hint-svg {
        flex-shrink: 0;
        animation: rotatePhoneIcon 2.4s ease-in-out infinite;
    }

    .rotate-hint-badge button {
        background: none;
        border: 0;
        color: rgba(255, 255, 255, 0.65);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        padding: 0 0 0 6px;
    }

    @keyframes rotatePhoneIcon {
        0%, 20% { transform: rotate(0deg); }
        50%, 70% { transform: rotate(90deg); }
        90%, 100% { transform: rotate(0deg); }
    }

    @keyframes rotateHintPop {
        from { opacity: 0; transform: translate(-50%, 20px) scale(0.92); }
        to { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
}

/* Original laptop-room background. */
body.laptop-opening .scene-container::before,
body.table-active .scene-container::before {
    background-image: url('assets/a/black%20_background.png');
}


.phone-social-links a:nth-of-type(5) { transition-delay: 0s, 1.22s, 1.22s; }

#digital-card {
    width: min(328px, calc(100vw - 32px), calc(100dvh - 32px));
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
#digital-card::backdrop {
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#digital-card form { margin: 0; }
#digital-card button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
#digital-card img { display: block; width: 100%; height: auto; background: transparent; image-rendering: pixelated; }
#digital-card button:focus { outline: none; }
#digital-card button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.snow-about-link {
    color: inherit;
    text-decoration: underline wavy;
    text-underline-offset: 4px;
    visibility: hidden;
    pointer-events: none;
}
body.winter-boy-active:not(.table-active):not(.laptop-opening):not(.bike-active):not(.about-active):not(.bookshelf-active) .winter-boy.is-active.is-settled:not(.is-handing-off) .snow-about-link {
    visibility: visible;
    pointer-events: auto;
}
.snow-about-link:hover { color: #4a1010; }
.snow-about-link:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }