@font-face{font-family:Pixel;src:url('fonts/pixel.woff2') format('woff2');font-display:swap}
@font-face{font-family:Letter;src:url('fonts/thai.woff2') format('woff2');font-display:swap;unicode-range:U+0E00-0E7F,U+200C-200D,U+25CC}
@font-face{font-family:Letter;src:url('fonts/latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
:root{color-scheme:dark;--ink:#fff0f6;--muted:#ccabc1;--pink:#f7adc9;--rose:#bf3c79;--line:#bc779f;--panel:#201124;--paper:#fff1f4;--shadow:#080611}
html body{font-family:Letter,Tahoma,'Segoe UI',sans-serif}
.jewel-sprite{display:block;width:100%;aspect-ratio:1;background:url('jewel-sprites.png') 0 0/200% 200% no-repeat;image-rendering:pixelated}
.jewel[data-look=left] .jewel-sprite{background-position:100% 0}.jewel[data-look=right] .jewel-sprite{background-position:0 100%}.jewel.blink .jewel-sprite{background-position:100% 100%}.jewel.hello .jewel-sprite{animation:hello .9s ease-in-out}
*{box-sizing:border-box}html{min-height:100%;font-size:16px}body{margin:0;min-height:100svh;color:var(--ink);font-family:Tahoma,'Segoe UI',sans-serif;line-height:1.65;background:#100c1b;isolation:isolate}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffe6ad;outline-offset:5px}button:disabled{opacity:.65}h1,h2,p{margin-top:0}h1{font-size:clamp(1.45rem,3vw,2rem);line-height:1.55;letter-spacing:.015em;margin-bottom:1rem}h2{font-size:1.25rem;line-height:1.5}img{max-width:100%}.scene{position:fixed;inset:0;z-index:-3;background:linear-gradient(#100b1e42,#0c081523),url('fancon-bg.jpg') center center/cover no-repeat;image-rendering:auto}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#09051444,transparent 35%,transparent 65%,#09051444)}.starlight{pointer-events:none;position:fixed;inset:0;z-index:-2;background-image:radial-gradient(1.5px 1.5px at 17% 29%,#ffc0de 50%,transparent),radial-gradient(2px 2px at 76% 12%,#fff0ff 50%,transparent),radial-gradient(1px 1px at 86% 65%,#f2a9d5 50%,transparent);animation:glimmer 5s ease-in-out infinite alternate}
.topbar{height:86px;max-width:1380px;margin:auto;padding:22px 5%;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:Pixel,monospace;font-size:1.05rem;text-shadow:2px 2px #53263e}.tiny-star{font-family:serif;color:var(--pink);margin-left:15px}.topbar nav{display:flex;align-items:center;gap:8px;padding:3px;border:1px solid #ac668052;background:#130c20cc;box-shadow:3px 3px #08061070}.lang{border:0;background:transparent;min-width:44px;min-height:38px;font-size:.875rem;font-weight:bold}.lang.active{background:#a92c65;box-shadow:inset 0 0 0 1px #f0a1bf}.topbar nav>span{opacity:.4}
main{max-width:1280px;margin:0 auto;min-height:calc(100svh - 155px);padding:34px 24px 140px;display:flex;justify-content:center;align-items:center}main:focus{outline:none}.home-wrap{width:100%;display:flex;justify-content:center;padding:30px 0}.panel{position:relative;background:linear-gradient(135deg,#2b182fef,#170f22f5);border:1px solid var(--line);box-shadow:0 0 0 4px #211025,0 0 0 5px #bc779f88,8px 10px 0 #07061170,0 24px 70px #08051470;padding:36px}.panel:before,.panel:after{content:'';position:absolute;width:7px;height:7px;background:var(--pink);pointer-events:none}.panel:before{left:-4px;top:-4px}.panel:after{right:-4px;bottom:-4px}.home-panel{width:470px;max-width:100%;padding:42px 40px 26px;text-align:center}.eyebrow{font-size:.75rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:12px}.brand{font-family:Pixel,monospace;font-size:clamp(2.25rem,5vw,3.4rem);line-height:1.6;font-weight:400;letter-spacing:-.09em;color:#ffd2e3;text-shadow:3px 4px #783357;margin:8px 0 0}.ornament{color:var(--pink);font-size:1rem;letter-spacing:.14em;margin:0 auto 27px;opacity:.85}.home-menu{display:grid;gap:17px}.menu-button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;background:linear-gradient(100deg,#85305d,#712146 70%);border:1px solid #f3b1ce;box-shadow:inset 0 0 0 3px #8d476c,3px 4px #0e0918;padding:10px 20px;font-size:1.1rem;transition:transform .18s,background .18s}.menu-button:hover{transform:translateY(-2px);background:linear-gradient(100deg,#ac3974,#902856)}.menu-icon{font-size:1.55rem;font-family:serif;color:#ffd4e6}.menu-button>span:last-child{color:#ffd0e6;font-size:1.5rem}.game-link{background:linear-gradient(100deg,#57334e,#40213e)}.home-note{margin:24px 0 0;font-size:.875rem}.quiet{color:var(--muted);font-size:.95rem}.footer{max-width:1380px;margin:0 auto;min-height:69px;padding:18px 5%;display:flex;align-items:center;justify-content:center;gap:16px;font-family:monospace;font-size:.75rem;letter-spacing:.2em;color:#dfb1cd}.footer-heart{font-size:1.4rem;color:var(--pink)}
.jewel{position:fixed;z-index:5;bottom:46px;right:max(25px,calc((100vw - 1200px)/2));width:130px;padding:0;background:none;border:0;filter:drop-shadow(0 7px 9px #06031388);transform:translate(var(--jx,0px),var(--jy,0px));transition:transform .7s ease;transform-origin:bottom center}.jewel img{width:100%;display:block;pointer-events:none;image-rendering:pixelated}.jewel-heart{position:absolute;top:10%;right:0;color:#ffadd0;opacity:0;pointer-events:none;font-size:1.5rem}.jewel.hello img{animation:hello .9s ease-in-out}.jewel.hello .jewel-heart{animation:heart .95s ease-out}.back{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--muted);margin-bottom:14px}.back:hover,.text-link:hover{color:#fff}.compact{width:440px;max-width:100%;text-align:center;padding:32px}.compact .back{display:flex;align-self:flex-start;text-align:left}.envelope{font-size:4.5rem;line-height:1.3;color:var(--pink);font-family:serif;text-shadow:0 0 28px #f268a66b;margin-bottom:20px}.unlock form{text-align:left;margin-top:24px}.unlock label{display:block;font-size:.875rem;color:var(--muted);margin-bottom:8px}.unlock input{width:100%;border:1px solid var(--pink);background:#fff0f6;color:#36162f;min-height:52px;padding:10px 14px;border-radius:0}.form-error{color:#ffd09c;font-size:.875rem;min-height:1.2em;margin:10px 0}.primary,.secondary{min-height:48px;padding:12px 22px;border:1px solid #e99bbc;background:#922555;box-shadow:inset 0 0 0 2px #ffffff17;font-weight:600}.primary:hover{background:#b53570}.compact .primary{width:100%}.secondary{background:#342136}.text-link{display:block;margin-top:20px}.text-button{min-height:44px;border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;color:var(--muted);font-size:.875rem}.text-button:hover{color:#fff}.loading-dots{display:block;letter-spacing:8px;color:#f69cc5;animation:glimmer .8s infinite alternate}.loading h1{font-size:1.3rem}.initial-loading{font-family:Pixel,monospace;color:var(--pink)}
.archive{width:620px;max-width:100%;padding:30px 38px}.archive h1{text-align:center;margin-top:12px}.archive>.eyebrow{text-align:center}.archive>.ornament{text-align:center}.letter-list{display:grid;gap:13px;margin-bottom:12px}.letter-entry{display:flex;align-items:center;gap:18px;padding:20px 16px;border:1px solid #a1618377;background:#ffffff04;transition:background .15s}.letter-entry:hover{background:#a64a7e26}.letter-number{font-family:Pixel,monospace;font-size:.8rem;color:#d899b6}.letter-entry strong{display:block;font-size:1rem;font-weight:400}.letter-entry small{display:block;color:var(--muted);margin-top:4px;font-size:.8rem}.letter-state{margin-left:auto;color:var(--pink);font-size:1.4rem}
body[data-page=letters] main{align-items:flex-start}.reading{width:760px;max-width:100%}.reading-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#130d1bbf;padding:0 12px}.reading-toolbar .back{margin:0}.letter-paper{background:var(--paper);color:#49283c;border:1px solid #dda1b7;box-shadow:0 0 0 4px #412435,0 0 0 5px #ecb3cc,8px 10px 0 #08051460;padding:42px 48px}.letter-paper header{text-align:center;border-bottom:1px solid #dcb7c7;padding-bottom:25px;margin-bottom:28px}.letter-paper .eyebrow{color:#95637a;font-size:.75rem;letter-spacing:.22em}.letter-paper h1{color:#632145;font-size:1.5rem;margin-bottom:6px}.paper-flourish{color:#b95d83;font-size:1.5rem}.letter-date{font-size:.85rem;color:#92667a;margin:8px 0 0}.letter-body{font-size:1.125rem;line-height:2;overflow-wrap:anywhere}.letter-body p{white-space:normal;margin-bottom:1.35em}.letter-body.size-0{font-size:1rem}.letter-body.size-2{font-size:1.3rem}.letter-body.size-3{font-size:1.5rem}.draft-note{text-align:center;padding:35px 0 40px;color:#976a7e}.draft-note>span{font-size:2rem}.draft-note h2{font-size:1.15rem;margin:18px 0 10px;font-weight:400}.draft-note p{font-size:1rem}.paper-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dcb7c7;padding-top:18px;gap:12px;color:#9b617a;font-family:Georgia,serif;font-style:italic}.text-controls{display:flex;gap:4px}.text-controls button{font:1rem Tahoma,sans-serif;color:#68254b;background:transparent;border:1px solid #d9adbe;min-width:44px;min-height:44px}.music-panel{margin-top:30px;padding:23px 26px;display:grid;grid-template-columns:1fr auto;gap:8px 18px}.music-panel h2{font-size:1.05rem;margin-bottom:5px}.music-panel .eyebrow{font-size:.7rem;margin:0 0 7px}.music-panel .quiet{font-size:.85rem;margin:0}.music-play{align-self:center;width:52px;height:52px;border:1px solid #d996b6;background:#903156;color:#fff1f7;font-size:1.3rem}.youtube-link{grid-column:1/-1;font-size:.8rem;color:#cca0b8;margin-top:5px}.youtube-link:hover{text-decoration:underline}#video-area{grid-column:1/-1}#video-area:empty{display:none}#video-area iframe{border:0;width:100%;aspect-ratio:16/9;min-height:200px;margin-top:12px;background:#0c0811;display:block}
.game-panel{width:650px;max-width:100%;padding:24px 30px}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.game-heading h1{margin-bottom:0;font-size:1.4rem}.game-heading .eyebrow{margin:0 0 6px;font-size:.7rem}.pair-counter{white-space:nowrap;color:var(--pink);font-family:monospace;font-size:1.2rem}.pair-counter small{font-family:Tahoma,sans-serif;font-size:.875rem;display:block;text-align:right;color:var(--muted)}.game-instruction{margin:15px 0 22px;font-size:.875rem}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.card{aspect-ratio:1/1.08;perspective:800px;border:0;padding:0;background:transparent;opacity:1!important}.card-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .38s}.card.flipped .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #c989a8;box-shadow:inset 0 0 0 3px #2c1428,3px 4px #0c0714;overflow:hidden}.card-back{background:linear-gradient(145deg,#49273f,#27182e)}.card-back>span{font-size:2.7rem;line-height:1.2;color:#d992b8;text-shadow:0 0 18px #c33f8130}.card-back small{font-family:Georgia,serif;font-size:.8rem;color:#bb7d9d;margin-top:5px;letter-spacing:.08em}.card-front{transform:rotateY(180deg);background:#311b35}.card-front img{width:100%;height:100%;object-fit:cover}.card.matched .card-front{border:2px solid #ffd1e3;box-shadow:0 0 12px #ffb6d14d}.card:not(.flipped):hover .card-back{background:#583049}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px}.game-bottom .quiet{font-size:.8rem}.victory h1{font-size:1.5rem}.victory-heart{display:block;color:#f9a5c9;font-size:4rem;line-height:1.4}.pairs{font-family:monospace;color:var(--pink);font-size:1.2rem}.victory .quiet{margin-bottom:30px}dialog{background:#26152c;color:var(--ink);border:1px solid var(--pink);max-width:min(90vw,440px);padding:28px;box-shadow:0 12px 70px #0008}dialog::backdrop{background:#080611b3}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.noscript{position:fixed;bottom:10px;left:10px;right:10px;background:#291324;padding:20px}
@keyframes glimmer{from{opacity:.5}to{opacity:1}}@keyframes hello{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) translateY(-5px)}55%{transform:rotate(7deg) translateY(-8px)}80%{transform:rotate(-4deg)}}@keyframes heart{0%{opacity:0;transform:translateY(8px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-35px) scale(1.2)}}
@media(min-width:1200px){body[data-page=home] .jewel{width:170px;right:calc(50% - 400px);bottom:18vh}.home-wrap{padding-bottom:50px}.home-panel{padding-top:44px;padding-bottom:30px}}
@media(max-width:700px){.topbar{height:74px;padding:15px 6%}.wordmark{font-size:.9rem}.tiny-star{margin-left:10px}main{min-height:calc(100svh - 135px);padding:25px 20px 130px;align-items:center}.scene{background-position:center center}.home-wrap{padding:12px 0 0}.home-panel{width:410px;padding:29px 25px 23px}.home-panel>.eyebrow{font-size:.65rem;letter-spacing:.16em}.brand{font-size:2.4rem}.ornament{margin-bottom:23px}.menu-button{min-height:61px;padding:10px 15px;font-size:1rem}.home-menu{gap:15px}.home-note{font-size:.8rem;margin-top:22px}.jewel{width:86px;right:22px;bottom:28px}.footer{min-height:61px;font-size:.6rem;letter-spacing:.12em;gap:10px;padding-bottom:22px;padding-right:100px}.compact{padding:25px 22px}.archive{padding:23px 22px}.letter-entry{padding:16px 12px;gap:12px}.letter-number{font-size:.65rem}.letter-entry strong{font-size:.95rem}.reading-toolbar{padding:0 7px;margin-bottom:20px}.letter-paper{padding:27px 23px}.letter-paper h1{font-size:1.3rem}.letter-body{font-size:1.0625rem}.letter-paper header{padding-bottom:18px;margin-bottom:20px}.music-panel{padding:21px 20px}.draft-note{padding:24px 0}.game-panel{padding:20px 18px}.game-heading h1{font-size:1.15rem}.game-heading{gap:9px}.pair-counter{font-size:1rem}.game-instruction{font-size:.85rem;line-height:1.7}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.card{aspect-ratio:1/1.05}.card-back>span{font-size:2.3rem}.game-bottom{align-items:flex-start}.game-bottom .quiet{max-width:55%;font-size:.75rem}.footer-heart{font-size:1.1rem}}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.brand{font-size:2rem}.home-panel{padding-left:20px;padding-right:20px}.menu-button{font-size:.9rem}.game-heading{display:block}.pair-counter{display:block;margin-top:8px}.pair-counter small{display:inline;margin-left:6px}.letter-paper{padding:25px 18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card-inner{transition:none}.jewel{transform:none!important}.starlight{opacity:.7}}

/* Reserve an actual place for Jewel so touch controls and letter text stay clear. */
body:not([data-page=home]) main{min-height:0;padding-bottom:38px}body:not([data-page=home]) .jewel{position:relative;display:block;right:auto;bottom:auto;margin:0 max(24px,calc((100vw - 900px)/2)) 12px auto}body:not([data-page=home]) .footer{padding-right:5%}
@media(max-width:1199px){body[data-page=home] main{min-height:calc(100svh - 250px);padding-bottom:30px}body[data-page=home] .jewel{position:relative;display:block;right:auto;bottom:auto;margin:0 28px 0 auto}.footer{padding-right:5%}}

/* Actual page-mascot React island, sized by the existing safe mascot dock. */
.menu-icon,.music-state{display:inline-flex;align-items:center;justify-content:center}.menu-icon img{display:block;width:23px;height:23px}.music-state img{display:block;width:19px;height:19px}.menu-chevron{display:block;width:16px;height:16px}
.access-code-field{position:relative}.unlock .access-code-field input{padding-right:6rem}.code-visibility{position:absolute;right:4px;top:4px;bottom:4px;min-width:4.75rem;min-height:44px;padding:0 10px;border:0;border-left:1px solid #92255540;background:#fff0f6;color:#73304b;font-size:.85rem;font-weight:600}.code-visibility:hover{background:#f6dce7}.code-visibility:focus-visible{outline:2px solid #922555;outline-offset:-3px}
.jewel{aspect-ratio:1}.jewel-mascot{width:100%!important;height:100%!important;image-rendering:pixelated}
/* Soften only the lower body; keep the face, tracking layers and focus ring crisp. */
.jewel-mascot>span{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,#000c 88%,#0005 96%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 80%,#000c 88%,#0005 96%,transparent 100%)}

@media(max-width:700px){.jewel{width:116px}}

/* Home requests autoplay; removing its iframe stops playback on navigation. */


.music-dock{position:relative;z-index:6;width:360px;max-width:calc(100% - 40px);margin:20px auto 28px;background:#211326;border:1px solid #e8a1bf;box-shadow:0 0 0 3px #45263e,4px 5px #080510;padding:0;color:#ffdaea}.music-dock [hidden]{display:none!important}#bgm-video{margin:0}#bgm-video iframe{display:block;width:100%;height:200px;border:0}@media(min-width:1200px){.music-dock{position:fixed;bottom:22px;left:22px;margin:0}}

#bgm-video:not([hidden]){min-height:200px}

.header-actions{display:flex;align-items:center;gap:12px}.header-music{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;min-width:145px;padding:8px 12px;border:1px solid #c77c9f;background:#712146;color:#ffe5f0;box-shadow:inset 0 0 0 2px #8d476c,3px 3px #08061070;font:inherit;font-size:.875rem}.header-music:hover{background:#90315f}.music-state{width:18px;text-align:center}.music-label{text-align:center}.header-actions .lang{min-height:40px}@media(max-width:600px){.topbar{height:auto;min-height:100px;flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px}.header-actions{width:100%;justify-content:flex-end;gap:10px}.header-music{min-width:138px}}
/* Jewel perches on the home panel; its existing React root moves with the page. */
body[data-page=home] .home-wrap{padding-top:170px;padding-bottom:30px}
body[data-page=home] .home-panel>.jewel{position:absolute;display:block;width:160px;left:calc(50% - 80px);right:auto;bottom:calc(100% + 3px);margin:0;transform:none;transition:none;z-index:5}
@media(max-width:700px){body[data-page=home] .home-wrap{padding-top:148px}body[data-page=home] .home-panel>.jewel{width:140px;left:calc(50% - 70px)}}
.letter-paper .paper-bottom{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:10px 16px;align-items:center}
.paper-bottom>span{grid-column:1;grid-row:1;align-self:end}
.paper-bottom .text-controls{grid-column:1;grid-row:2;align-self:start}
body[data-page=letters] .paper-bottom>.jewel{position:relative;grid-column:2;grid-row:1 / 3;width:140px;right:auto;bottom:auto;margin:0;transform:none;filter:none;align-self:end}
@media(max-width:700px){.letter-paper .paper-bottom{grid-template-columns:minmax(0,1fr) 108px;gap:10px}body[data-page=letters] .paper-bottom>.jewel{width:108px}}
body:not([data-page=home]) .jewel-perch{margin-top:170px}
body:not([data-page=home]) .jewel-perch>.jewel{position:absolute;display:block;width:160px;left:calc(50% - 80px);right:auto;bottom:calc(100% + 3px);margin:0;transform:none;transition:none;z-index:5}
@media(max-width:700px){body:not([data-page=home]) .jewel-perch{margin-top:148px}body:not([data-page=home]) .jewel-perch>.jewel{width:140px;left:calc(50% - 70px)}}
/* Center the combined mascot + panel bounds, with room to scroll on short screens. */
body{--header-space:86px;--perch-space:163px}
body[data-page=home] main#app,body main#app:has(>.jewel-perch){min-height:calc(100svh - 2 * var(--header-space));padding-top:24px;padding-bottom:24px;align-items:center}
body[data-page=home] .home-wrap{padding-top:var(--perch-space);padding-bottom:0}
body:not([data-page=home]) .jewel-perch{margin-top:var(--perch-space);margin-bottom:0}
@media(max-width:700px){body{--header-space:74px;--perch-space:143px}}
@media(max-width:600px){body{--header-space:114px}.topbar{min-height:114px}}
#sakura{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){#sakura{display:none}}

/* Jewel occasional greeting, matching approved compact translucent mockup. */

.jewel-bubble{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:230px;padding:9px 14px;background:linear-gradient(135deg,#ffeaf2c9,#f4cedfc2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#62263f;border:1px solid #ffe4ee99;border-radius:14px;box-shadow:0 5px 18px #190a182e,inset 0 1px 0 #ffffff66;text-align:center;font-size:13px;font-weight:600;line-height:1.65;white-space:normal;pointer-events:none;filter:none}
.jewel-bubble:before{content:'';position:absolute;bottom:-8px;left:calc(50% - 8px);width:16px;height:8px;background:#f4cedfc2;clip-path:polygon(0 0,100% 0,50% 100%)}
.jewel-bubble .heart{color:#ae426b;margin-left:5px}

.jewel-bubble{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:6}.jewel-bubble[data-visible=true]{opacity:1;visibility:visible}.paper-bottom .jewel-bubble{left:auto;right:0;transform:none}.paper-bottom .jewel-bubble:before{left:auto;right:42px}