:root{color-scheme:dark;--night:#102c37;--night-deep:#0b222c;--sea:#173b45;--sea-light:#214a50;--paper:#eee9dd;--muted:#a8bdba;--faint:#78949a;--gold:#efd49a;--gold-bright:#ffe9b7;--rule:rgba(237,232,216,.18)}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;background:var(--night);color:var(--paper);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(rgba(246,233,197,.17) .5px,transparent .5px);background-size:6px 6px;mask-image:linear-gradient(130deg,transparent 10%,#000 80%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:5px}
a{color:inherit;text-decoration:none}
.shell{position:relative;max-width:1540px;margin:auto;padding:0 clamp(24px,5.2vw,82px)}
.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);gap:24px}
.brand{display:inline-flex;align-items:center;gap:13px;font-size:11px;font-weight:700;letter-spacing:.16em;white-space:nowrap;transition:color .2s}
.brand:hover{color:var(--gold)}
.brand-mark{position:relative;width:25px;height:25px;display:block;transform:rotate(-34deg)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;height:1px;background:var(--gold);transform-origin:left center;top:12px;left:4px;width:19px}
.brand-mark::after{transform:rotate(59deg)}
.brand-mark::before{transform:rotate(-59deg)}
.brand-mark i{position:absolute;width:5px;height:5px;border:1px solid var(--gold);border-radius:50%;background:var(--night)}
.brand-mark i:nth-child(1){left:1px;top:10px}.brand-mark i:nth-child(2){right:0;top:0}.brand-mark i:nth-child(3){right:0;bottom:0}
.brand-divider{color:var(--faint);padding:0 4px;font-weight:400}
.edition{font-family:Georgia,serif;font-size:11px;letter-spacing:.17em;color:var(--muted);white-space:nowrap}
.edition-number{margin-left:20px;color:var(--gold)}
.main{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(450px,1.2fr);gap:clamp(32px,6.5vw,110px);align-items:center;padding:clamp(44px,5.5vw,78px) 0 62px}
.intro{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 22px;color:var(--gold);font:11px Georgia,serif;letter-spacing:.26em}
.eyebrow-line{width:28px;height:1px;background:var(--gold)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.075em;font-size:clamp(82px,10.5vw,160px);line-height:.88;margin:0 0 28px}
.title-period{color:var(--gold);letter-spacing:0}
.japanese-title{font-size:clamp(17px,1.8vw,23px);letter-spacing:.16em;margin:0 0 28px;font-weight:500}
.description{font-size:14px;line-height:2.35;letter-spacing:.055em;color:var(--muted);margin:0}
.stage-copy{margin-top:clamp(40px,6vw,82px);padding:23px 0 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stage-copy-head{display:flex;justify-content:space-between;gap:16px;color:var(--gold);font-size:10px;letter-spacing:.16em;margin-bottom:18px}
.stage-copy-head span:last-child{font-family:Georgia,serif;font-size:13px;letter-spacing:.08em}
h2{font-size:24px;letter-spacing:.08em;font-weight:500;margin:0 0 8px}
.stage-copy p{font-size:12px;color:var(--muted);line-height:1.8;letter-spacing:.07em;margin:0}
.controls{display:flex;gap:24px;margin-top:23px;flex-wrap:wrap}
.text-button{padding:4px 0;background:none;border:0;color:var(--paper);font-size:12px;letter-spacing:.05em;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.text-button:hover:not(:disabled){color:var(--gold)}
.text-button:disabled{color:var(--faint);cursor:default}
.button-icon{font-family:Georgia,serif;font-size:20px;line-height:1;color:var(--gold)}
.text-button:disabled .button-icon{color:var(--faint)}
.keycap{font:10px Georgia,serif;border:1px solid var(--rule);border-radius:2px;min-width:18px;height:18px;padding:2px 4px;text-align:center;color:var(--faint);margin-left:3px}
.play-area{min-width:0}
.board{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 41%,#244c50 0%,#1a3c44 46%,#112f3b 100%);border:1px solid rgba(239,212,154,.22);box-shadow:0 30px 95px rgba(0,12,17,.22),inset 0 0 95px rgba(5,27,35,.4);overflow:hidden}
.board::before,.board::after{content:"";position:absolute;z-index:1;width:25px;height:25px;border-color:rgba(239,212,154,.57);pointer-events:none}
.board::before{top:18px;left:18px;border-top:1px solid;border-left:1px solid}
.board::after{bottom:18px;right:18px;border-bottom:1px solid;border-right:1px solid}
.board-top,.board-bottom{position:absolute;z-index:2;left:clamp(24px,3vw,42px);right:clamp(24px,3vw,42px);display:flex;justify-content:space-between;align-items:center;color:rgba(231,221,195,.58);font:10px Georgia,serif;letter-spacing:.19em;pointer-events:none}
.board-top{top:clamp(26px,3.3vw,48px)}.board-bottom{bottom:clamp(25px,3vw,43px)}
.board-symbol{font-size:19px;color:var(--gold);line-height:1}
.board.invalid{animation:invalid .28s ease-out}
@keyframes invalid{50%{box-shadow:0 30px 95px rgba(0,12,17,.22),inset 0 0 0 3px rgba(232,161,128,.48)}}
.board-caption{display:flex;justify-content:space-between;gap:16px;margin-top:17px;min-height:22px;color:var(--muted);font-size:11px;letter-spacing:.05em}
.caption-mark{color:var(--faint);font:10px Georgia,serif;letter-spacing:.1em;text-align:right;white-space:nowrap}
.complete{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center;background:rgba(9,33,42,.83);backdrop-filter:blur(11px);animation:appear .38s ease-out}
.complete[hidden]{display:none}
.complete-symbol{color:var(--gold);font-size:40px;line-height:1;margin-bottom:34px}
.complete-kicker{color:var(--gold)!important;font:11px Georgia,serif!important;letter-spacing:.27em!important;margin:0 0 19px!important}
.complete h3{font-size:clamp(20px,2.5vw,31px);letter-spacing:.1em;font-weight:500;margin:0 0 14px}
.complete p{color:var(--muted);font-size:12px;letter-spacing:.06em;margin:0}
.complete button{display:inline-flex;align-items:center;gap:42px;margin-top:36px;padding:16px 21px;border:1px solid var(--gold);background:var(--gold);color:var(--night-deep);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background .2s,transform .2s}
.complete button:hover{background:var(--gold-bright);transform:translateY(-2px)}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.stage-nav{border-top:1px solid var(--rule);padding:25px 0 34px}
.stage-nav-heading{display:flex;justify-content:space-between;color:var(--gold);font:11px Georgia,serif;letter-spacing:.18em;margin-bottom:19px}
.stage-nav-heading span:last-child{color:var(--muted);font-size:10px}
.stage-list{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.stage-button{height:67px;min-width:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(9px,1.2vw,17px);border:1px solid var(--rule);background:rgba(255,255,255,.025);color:var(--muted);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.stage-button:hover{background:rgba(239,212,154,.08);border-color:rgba(239,212,154,.47);color:var(--paper)}
.stage-button.is-current{border-color:var(--gold);background:rgba(239,212,154,.1);color:var(--gold)}
.stage-button-number{font:20px Georgia,serif;letter-spacing:-.06em}
.stage-button-mark{font-size:13px;opacity:0;color:var(--gold)}
.stage-button.is-done .stage-button-mark{opacity:1}
.footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding:21px 0 28px;color:var(--faint);font-size:10px;letter-spacing:.09em}
@media(max-width:1050px){.main{grid-template-columns:minmax(250px,.8fr) minmax(400px,1.2fr);gap:35px}.stage-list{gap:5px}.stage-button{padding:0 9px}.stage-button-number{font-size:17px}.stage-button-mark{font-size:11px}}
@media(max-width:760px){.shell{padding:0 22px}.topbar{height:72px}.edition{display:none}.main{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding:43px 0 38px}.intro{display:block}.eyebrow{margin-bottom:19px}h1{font-size:clamp(79px,17vw,120px);margin-bottom:20px}.japanese-title{font-size:17px;margin-bottom:16px}.description{font-size:12px;line-height:2;max-width:none}.description br{display:none}.stage-copy{margin-top:28px;padding:17px 0}.stage-copy-head{margin-bottom:10px}h2{font-size:20px}.controls{margin-top:15px}.board{max-width:630px;margin:auto;width:100%}.board-caption{max-width:630px;margin:13px auto 0}.stage-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.stage-button{height:54px;padding:0 12px}.stage-button-number{font-size:18px}}
@media(max-width:450px){.brand{font-size:10px}.board-top,.board-bottom{font-size:8px}.board-caption{font-size:10px}.caption-mark{display:none}.stage-nav{padding-top:20px}.stage-button{height:49px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* LIMEN: the same editorial frame as TRACE, with a quieter architectural board. */
:root{--sea:#173d45;--gold:#e9d49f;--gold-bright:#fff0c4}
.board{background:radial-gradient(circle at 50% 45%,#214852 0%,#173943 43%,#0d2a35 100%)}
.board::before,.board::after{width:31px;height:31px}
.maze{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;cursor:crosshair}
.board-aura{fill:none;stroke:rgba(231,220,183,.075);stroke-width:1;pointer-events:none}
.floor-cell{fill:rgba(193,219,210,.035);pointer-events:none}
.maze-walls{fill:none;stroke:rgba(221,226,205,.52);stroke-linecap:square;stroke-linejoin:miter;pointer-events:none;filter:drop-shadow(0 0 5px rgba(209,231,211,.12))}
.route-line{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(245,215,151,.53));pointer-events:none;transition:points .16s ease-out}
.goal-halo{fill:rgba(237,212,154,.06);stroke:rgba(239,220,168,.3);stroke-width:1;pointer-events:none}
.goal-ring{fill:none;stroke:var(--gold-bright);stroke-width:3;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,236,178,.6))}
.goal-core{fill:var(--gold-bright);pointer-events:none}
.traveler{pointer-events:none;filter:drop-shadow(0 0 11px rgba(255,231,172,.67));transition:transform .16s ease-out}
.traveler-halo{fill:rgba(241,221,163,.14)}
.traveler-ring{fill:var(--gold-bright);stroke:#fff6dd;stroke-width:2}
.traveler-core{fill:var(--night)}
.board-symbol{font-size:22px;line-height:.8}
.complete-symbol{font-size:47px;font-weight:100}
.stage-button-mark{font-size:17px}
.board.invalid{animation:invalid .28s ease-out}
@media(max-width:760px){.description br{display:none}}
