/* The fictional game's entrance. All styles stay scoped to the title screen. */
.title-screen{--entry-bg:#101722;--entry-gold:#ead096;--entry-ink:#f4eddb;background:var(--entry-bg)}
.title-screen[data-theme=night]{--entry-bg:#080e18}
.title-screen #header{position:absolute;inset:0 0 auto auto;width:auto;height:88px;min-height:0;padding:0 32px;background:none;border:0;color:var(--entry-ink);justify-content:flex-end;gap:0}
.title-screen #header .brand,.title-screen #header nav{display:none}
.title-screen .header-tools{gap:12px;margin-left:auto}
.title-screen .language select{color:var(--entry-ink)}
.title-screen .language option{background:#101722;color:var(--entry-ink)}
.title-screen .header-tools>.icon-button:hover{background:#ffffff12}
.title-screen .home.pixel-home{display:grid;place-items:center;min-height:100svh;height:100svh;padding:90px 24px 64px;isolation:isolate;background:var(--entry-bg);color:var(--entry-ink);overflow:hidden}
.title-screen .pixel-home:before,.title-screen .pixel-home:after{display:none}
.pixel-collage,.pixel-shade{position:absolute;inset:0;pointer-events:none}
.pixel-collage{z-index:0}
.pixel-shade{z-index:1;background:radial-gradient(ellipse 34% 70% at 50% 49%,#090f1bf2 0%,#090f1b9e 43%,#090f1b10 100%),linear-gradient(0deg,#080e189c,transparent 22%,transparent 78%,#080e1840)}
.dot-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(calc(-50% + var(--drag-x,0px)),calc(-50% + var(--drag-y,0px))) rotate(var(--r));opacity:var(--o,.8);transition:transform 1.65s cubic-bezier(.68,0,.25,1),opacity 1.65s ease;transition-delay:calc(var(--order) * 20ms)}
.dot-tile img{display:block;width:100%;height:auto;image-rendering:pixelated;--float-x:12px;--float-y:20px;--float-r:1.3deg;animation:dot-drift calc(9s + var(--order) * 1.3s) ease-in-out infinite alternate;animation-delay:calc(var(--order) * -2.7s)}
.dot-tile:nth-child(even) img{--float-x:-16px;--float-y:14px;--float-r:-1.5deg}
.dot-tile:nth-child(3n) img{--float-x:9px;--float-y:-23px;--float-r:.7deg}
.pixel-home:not([data-phase=idle]) .dot-tile img{animation-play-state:paused}
.pixel-motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;transition:opacity .35s}
.pixel-motes i{position:absolute;left:var(--mx);top:var(--my);width:3px;height:3px;background:#8faecf;opacity:0;animation:pixel-rise calc(7s + var(--n) * .45s) linear infinite;animation-delay:calc(var(--n) * -1.9s)}
.pixel-motes i:nth-child(3n){background:#e4c789;width:2px;height:2px}
.pixel-home:not([data-phase=idle]) .pixel-motes{opacity:0}
.pixel-home:not([data-phase=idle]) .pixel-motes i{animation-play-state:paused}
html[data-reduced-motion=true] .pixel-motes{display:none}
@keyframes dot-drift{from{transform:translate3d(calc(var(--float-x) * -1),calc(var(--float-y) * -1),0) rotate(calc(var(--float-r) * -1))}to{transform:translate3d(var(--float-x),var(--float-y),0) rotate(var(--float-r))}}
@keyframes pixel-rise{0%{opacity:0;transform:translate3d(0,30px,0)}20%,65%{opacity:.65}100%{opacity:0;transform:translate3d(12px,-65px,0)}}
.dot-tile--laila{--x:12%;--y:31%;--w:clamp(210px,24vw,360px);--r:-8deg}
.dot-tile--game-1{--x:34%;--y:6%;--w:clamp(200px,22vw,340px);--r:7deg;--o:.65}
.dot-tile--leonard{--x:90%;--y:24%;--w:clamp(160px,17vw,260px);--r:7deg}
.dot-tile--elara{--x:11%;--y:83%;--w:clamp(260px,29vw,430px);--r:6deg}
.dot-tile--marguerite{--x:70%;--y:8%;--w:clamp(160px,20vw,300px);--r:-7deg;--o:.72}
.dot-tile--neria{--x:102%;--y:64%;--w:clamp(190px,21vw,315px);--r:-7deg}
.dot-tile--game-2{--x:35%;--y:97%;--w:clamp(200px,22vw,330px);--r:-5deg;--o:.7}
.dot-tile--tasha{--x:78%;--y:94%;--w:clamp(260px,31vw,460px);--r:5deg}
.dot-tile--eliza{--x:75%;--y:54%;--w:clamp(170px,17vw,260px);--r:-7deg}
.pixel-edition{position:absolute;z-index:3;top:38px;left:35px;display:flex;gap:13px;align-items:center;color:#acb8cd;font:500 .65rem/1.5 var(--sans);letter-spacing:.17em}
.pixel-edition i{display:block;width:4px;height:4px;background:var(--entry-gold)}
.entry-idle{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;transition:opacity .5s,transform .65s cubic-bezier(.5,0,.5,1)}
.pixel-game-sprite{position:relative;width:min(480px,80vw,55svh)}
.pixel-title-visual{position:relative}
.pixel-game-title{display:grid;margin:0;width:100%;font-size:1rem;line-height:1;transform-origin:50% 83%;transition:transform .28s cubic-bezier(.22,.68,.25,1)}
.pixel-title-art{display:block;width:100%;height:auto;image-rendering:pixelated}
.pixel-connect{position:absolute;z-index:1;left:50%;bottom:17%;transform:translateX(-50%);width:76%;display:flex;align-items:center;justify-content:center;gap:20px;min-width:0;min-height:58px;margin:0;padding:13px 28px;border:0;background:var(--entry-gold);color:#24202a;box-shadow:0 -4px 0 -1px #f5e9c5,4px 0 #b7a075,0 4px #8c754e,-4px 0 #b7a075,inset 0 -3px #c3a771;font-size:1rem;line-height:1.5;font-weight:700;letter-spacing:.12em;transition:background .18s,transform .18s}
.pixel-connect>span{font-size:.75rem;line-height:1}
.pixel-connect:hover{background:#fff0c8;transform:translate(-50%,-3px)}
.pixel-connect:active{transform:translate(-50%,1px)}
.pixel-connect:focus-visible,.entry-skip:focus-visible{outline:2px solid #eff8ff;outline-offset:9px}
.pixel-prompt{margin:2px 0 0;color:#b0b9c9;font-size:.7rem;line-height:1.6;letter-spacing:.16em}
.pixel-game-translation{max-width:350px;font-family:var(--serif);font-size:1.05rem;line-height:1.5;text-wrap:balance;margin:5px auto 12px;color:#f0dbb4}
.entry-connecting{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;opacity:0;visibility:hidden;color:#b6d7e4;text-align:center;transition:opacity .35s}
.entry-connecting>span{font:500 .67rem/1.5 monospace;letter-spacing:.22em}
.entry-connecting>div{margin-top:17px;padding:3px;border:1px solid #718e9e66;height:10px}
.entry-connecting i{display:block;height:2px;background:#b4d7df;transform:scaleX(0);transform-origin:left}
.entry-signal{position:absolute;inset:0;z-index:7;visibility:hidden;pointer-events:none;overflow:hidden}
.entry-signal:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#739aba15 5px 6px)}
.entry-signal i{position:absolute;width:100%;height:3px;left:0;top:31%;background:#a1edec80;box-shadow:13vw 7px #cf527a66,-24vw -8px #3b6b9380}
.entry-signal i:nth-child(2){top:64%;height:16px;width:47%;left:38%;opacity:.5}
.entry-signal i:nth-child(3){top:81%;height:6px;width:68%;left:4%;background:#e0d09a66}
.pixel-home:not([data-phase=idle]) .entry-idle{opacity:0;transform:scale(.9);pointer-events:none}
.pixel-home:not([data-phase=idle]) .pixel-edition{opacity:0}
.pixel-home:not([data-phase=idle]) .dot-tile{transform:translate(calc(-50% + var(--drag-x,0px) + var(--dx,0px)),calc(-50% + var(--drag-y,0px) + var(--dy,0px))) rotate(0deg) scale(.035);opacity:0}
.pixel-home[data-phase=gather] .entry-connecting{visibility:visible;opacity:1;transition-delay:.45s}
.pixel-home[data-phase=gather] .entry-connecting i{animation:entry-load 1.7s steps(12,end) both}
.pixel-home[data-phase=glitch] .entry-signal{visibility:visible;animation:entry-interference .8s steps(1,end) both}
.pixel-home[data-phase=glitch] .entry-connecting{visibility:visible;opacity:1;transform:translate(calc(-50% + 4px),-50%);color:#d490a2;text-shadow:-4px 0 #58becaaa;clip-path:polygon(0 0,100% 0,100% 33%,20% 33%,20% 42%,100% 42%,100% 100%,0 100%)}
.entry-reveal{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 30px 75px;background:#090d16;opacity:0;visibility:hidden;transition:opacity .55s;pointer-events:none}
.entry-reveal-label{font-size:.63rem;line-height:1.5;letter-spacing:.4em;color:#ab8d78;margin-bottom:28px}
.entry-reveal h1{width:min(740px,78vw,76svh);margin:0;line-height:1}
.entry-true-logo{display:block;position:relative;width:100%;aspect-ratio:1253/779;overflow:hidden;transform:translateY(12px);transition:transform .7s}
.entry-true-logo>img{position:absolute;left:-11.253%;top:-13.7356%;width:122.5858%;max-width:none;height:auto}
.entry-reveal-copy{margin:35px 0 0;font:400 .9rem/1.9 var(--serif);color:#aeb8c8;word-break:keep-all;text-align:center;text-wrap:balance}
.entry-true-translation{margin:24px 0 0;max-width:550px;font:400 clamp(1rem,2vw,1.5rem)/1.7 var(--serif);text-align:center;text-wrap:balance;color:#ede6db}
.pixel-home[data-phase=reveal] .entry-reveal,.pixel-home[data-phase=exit] .entry-reveal{visibility:visible;opacity:1}
.pixel-home[data-phase=reveal] .entry-true-logo,.pixel-home[data-phase=exit] .entry-true-logo{transform:translateY(0)}
.pixel-home[data-phase=exit] .entry-reveal>*{opacity:0;transition:opacity .5s}
.entry-skip{position:absolute;z-index:12;top:30px;right:32px;padding:10px 13px;min-height:42px;border:1px solid #909eaf45;background:#0d1422;color:#ced6e0;font-size:.76rem;line-height:1.5;letter-spacing:.02em}
.entry-skip[hidden]{display:none}
.entry-skip:hover{border-color:#d8c39a;color:#f2e6cd}
.entry-active #header,.entry-active #player{opacity:0;pointer-events:none}
.title-screen #player.is-collapsed .player-fold-toggle{background:#111a29;color:#deded8;border-color:#65728a66;box-shadow:none}
.pixel-home.entry-minimal .dot-tile,.pixel-home.entry-minimal .entry-idle,.pixel-home.entry-minimal .entry-true-logo{transition:none;transform:none}
.pixel-home.entry-minimal .entry-signal{display:none}
@keyframes entry-load{to{transform:scaleX(1)}}
@keyframes entry-interference{0%,100%{opacity:0;transform:translateX(0)}10%,50%{opacity:.75;transform:translateX(-12px)}25%,65%{opacity:.4;transform:translateX(15px)}40%,80%{opacity:.6;transform:translateX(-3px)}}
@media(min-width:1700px){.pixel-game-sprite{width:min(540px,55svh)}.pixel-connect{min-height:62px}}
@media(max-width:700px){
 .title-screen #header{height:74px;padding:0 18px}.title-screen .header-tools{gap:5px}.title-screen .language select{font-size:.75rem}.title-screen .header-tools>.icon-button{width:32px;height:36px;padding:7px}
 .title-screen .home.pixel-home{padding:92px 20px 80px;min-height:620px;height:100svh}
 .pixel-edition{left:20px;top:31px;gap:8px;font-size:.48rem;letter-spacing:.1em}.pixel-edition i{width:3px;height:3px}
 .pixel-shade{background:radial-gradient(ellipse 51% 57% at 50% 49%,#090f1bf5 0%,#090f1bc0 53%,#090f1b25 100%),linear-gradient(0deg,#080e18aa,transparent 30%,transparent 76%,#080e1899)}
 .pixel-game-sprite{width:min(380px,90vw,53svh)}.pixel-connect{width:78%;min-height:52px;font-size:.9rem;padding:11px 16px;gap:13px}.pixel-prompt{font-size:.63rem;margin-top:0}.pixel-game-translation{font-size:.95rem;margin-top:6px;max-width:270px}
 .dot-tile--laila{--x:3%;--y:28%;--w:54vw;--r:-10deg}.dot-tile--game-1{--x:19%;--y:7%;--w:51vw}.dot-tile--leonard{--x:96%;--y:27%;--w:36vw}
 .dot-tile--elara{--x:5%;--y:85%;--w:73vw}.dot-tile--marguerite{--x:54%;--y:103%;--w:49vw}.dot-tile--neria{--x:-8%;--y:61%;--w:39vw}
 .dot-tile--game-2{--x:90%;--y:5%;--w:48vw}.dot-tile--tasha{--x:100%;--y:86%;--w:72vw}.dot-tile--eliza{--x:103%;--y:61%;--w:42vw}
 .entry-reveal{padding:80px 22px}.entry-reveal h1{width:100%;max-width:500px}.entry-reveal-label{font-size:.55rem;letter-spacing:.3em;margin-bottom:25px}.entry-reveal-copy{font-size:.83rem;max-width:290px;margin-top:30px}
 .entry-skip{top:22px;right:20px;font-size:.72rem}.entry-true-translation{font-size:1.1rem}
}
@media(max-height:650px) and (min-width:701px){.title-screen .home.pixel-home{padding:55px 24px 25px}.pixel-game-sprite{width:50svh}.pixel-connect{min-height:43px;padding:9px 12px;font-size:.82rem;gap:12px}.pixel-prompt{margin-top:0}.pixel-game-translation{font-size:.85rem;margin:0 auto 7px}.entry-reveal-label{margin-bottom:16px}.entry-reveal-copy{margin-top:20px}.entry-true-translation{font-size:1rem;margin-top:15px}}
@media(prefers-reduced-motion:reduce){.pixel-motes{display:none}.pixel-home *{animation:none!important;transition:none!important}.pixel-home:not([data-phase=idle]) .dot-tile{transform:translate(-50%,-50%) rotate(var(--r))}}

/* Drag offsets stay separate from the inner floating animation. */
.entry-idle{pointer-events:none}
.pixel-game-sprite{pointer-events:auto;transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0)}
.dot-tile{pointer-events:auto}
.pixel-home[data-phase=idle] .dot-tile{transition:none}
[data-pixel-drag]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
[data-pixel-drag] img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
[data-pixel-drag]:focus-visible{outline:1px dashed #dfd1aa;outline-offset:7px}
[data-pixel-drag].is-dragging{cursor:grabbing}
.dot-tile.is-dragging{z-index:2}
.dot-tile.is-dragging img{animation-play-state:paused}
.pixel-layout-reset{position:absolute;left:32px;bottom:30px;z-index:5;min-height:40px;padding:7px 12px;border:1px solid #8c9bad55;color:#c4cfdf;background:#101928d9;font-size:.72rem;line-height:1.5}
.pixel-layout-reset[hidden]{display:none}
.pixel-layout-reset:hover{border-color:#dfd1aa;color:#eee1c4}
.pixel-home:not([data-phase=idle]) [data-pixel-drag]{pointer-events:none}
.pixel-home:not([data-phase=idle]) .pixel-layout-reset{visibility:hidden}
@media(max-width:700px){.pixel-layout-reset{left:18px;bottom:18px;max-width:calc(100% - 155px);font-size:.68rem}.pixel-prompt{letter-spacing:.05em}}

/* Two decoded originals share a discrete clock; no crossfade or ghost frame. */
.pixel-title-frame{grid-area:1/1;opacity:1}
.title-frame-two{opacity:0}
.title-frames-ready .pixel-title-frame{animation-duration:2s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.title-frames-ready .title-frame-one{animation-name:title-eyes-open}
.title-frames-ready .title-frame-two{animation-name:title-eyes-closed}
.pixel-home:not([data-phase=idle]) .pixel-title-frame,.pixel-game-sprite.is-dragging .pixel-title-frame{animation-play-state:paused}
@keyframes title-eyes-open{0%{opacity:1}80%,100%{opacity:0}}
@keyframes title-eyes-closed{0%{opacity:0}80%,100%{opacity:1}}
@media(hover:hover) and (pointer:fine){
 .pixel-home[data-phase=idle] .pixel-game-sprite:not(.is-dragging):has(.pixel-connect:hover) .pixel-game-title{transform:scale(1.04)}
}
.pixel-home[data-phase=idle] .pixel-game-sprite:not(.is-dragging):has(.pixel-connect:focus-visible) .pixel-game-title{transform:scale(1.04)}
html[data-reduced-motion=true] .pixel-game-title{transform:none!important}
@media(prefers-reduced-motion:reduce){.pixel-game-title{transform:none!important}}

/* The entrance uses its own local multilingual pixel typography. */
@font-face{font-family:Entry Pixel Latin;src:url('assets/fonts/fusion-pixel-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Entry Pixel Korean;src:url('assets/fonts/fusion-pixel-ko.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Entry Pixel Japanese;src:url('assets/fonts/fusion-pixel-ja.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Entry Pixel Taiwan;src:url('assets/fonts/fusion-pixel-zh_tw.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.title-screen{--pixel:'Entry Pixel Latin',monospace;--sans:var(--pixel);--serif:var(--pixel)}
:lang(ko) .title-screen{--pixel:'Entry Pixel Korean','Entry Pixel Latin',monospace}
:lang(ja) .title-screen{--pixel:'Entry Pixel Japanese','Entry Pixel Latin',monospace}
:lang(zh-Hant) .title-screen{--pixel:'Entry Pixel Taiwan','Entry Pixel Latin',monospace}
.title-screen,.title-screen *{font-family:var(--pixel)!important;font-weight:400;font-synthesis:none}
.title-screen [data-pixel-drag].pointer-grabbed:focus{outline:none}
.title-screen .pixel-connect{font-size:24px;letter-spacing:1px;line-height:1.25}
.title-screen .pixel-connect>span{font-size:18px}
.title-screen .pixel-prompt{font-size:12px;letter-spacing:0;line-height:1.5}
.title-screen .pixel-edition{font-size:12px;letter-spacing:1px}
.title-screen .language select{font-size:16px;line-height:1.5}
.title-screen .pixel-game-translation{font-size:24px;line-height:1.5}
.title-screen .pixel-layout-reset,.title-screen .player-fold-toggle{font-size:12px}
.title-screen .pixel-icon{width:24px;height:24px;stroke:none;shape-rendering:crispEdges}
.title-screen .language{gap:8px}
.title-screen .language select{appearance:none;-webkit-appearance:none;padding-right:20px;background:transparent}
.title-screen .language:after{content:'';width:10px;height:6px;margin-left:-18px;pointer-events:none;background:currentColor;clip-path:polygon(0 0,100% 0,100% 33%,80% 33%,80% 66%,60% 66%,60% 100%,40% 100%,40% 66%,20% 66%,20% 33%,0 33%)}
.title-screen .settings-dialog h2{font-size:24px}
.title-screen .settings-dialog h3{font-size:18px}
.title-screen .settings-dialog p{font-size:14px;line-height:1.8}
.title-screen .setting-switch .switch-track,.title-screen .setting-switch .switch-track i{border-radius:0}
@media(max-width:700px){
 .title-screen .pixel-edition{font-size:9px;letter-spacing:0;gap:7px}
 .title-screen .language select{font-size:12px}
 .title-screen .header-tools>.icon-button{padding:4px}
 .title-screen .pixel-game-translation{font-size:18px}
 .title-screen .pixel-connect{font-size:24px}
 .title-screen .pixel-prompt{font-size:12px}
}

/* The real title reveal returns to the site's original literary type. */
.title-screen .entry-reveal-copy{font-family:'Noto Serif KR','Hiragino Mincho ProN','Songti TC',serif!important}
