:root{--night:#20283f;--slate:#3c5670;--gold:#e6ba72;--paper:#ead9b6;--red:#b94e55;--ink:#101a2b;--muted:#aab4bd}*{box-sizing:border-box}body{margin:0;color:var(--paper);background:var(--night);font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border-radius:0}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:5px}button:disabled{cursor:default;opacity:.5}#court{position:fixed;width:100%;height:100%;inset:0;image-rendering:pixelated;z-index:-3}.vignette{position:fixed;inset:0;box-shadow:inset 0 0 170px 60px #11182790;pointer-events:none;z-index:-1;background:#141d2e55}.app{max-width:1600px;margin:auto;padding:0 48px;min-height:100vh;display:flex;flex-direction:column}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #e6ba722a}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--paper);font-size:17px;font-weight:700;letter-spacing:2px}.brand small{font-size:8px;font-family:monospace;display:block;letter-spacing:2px;color:var(--gold);margin-top:6px}.icon{display:inline-flex;width:32px;height:32px;vertical-align:middle}.icon svg{width:100%;height:100%;shape-rendering:crispEdges}.header-right{display:flex;align-items:center;gap:16px}.online{font-size:11px;letter-spacing:1px;color:var(--gold);margin-right:12px}.mini{background:#20283fd9;border:2px solid #566078;padding:8px 12px;font-size:12px;box-shadow:3px 3px #111827}.mini:hover{border-color:var(--gold)}button:active:not(:disabled){transform:translate(2px,3px);box-shadow:0 0 transparent}.screen{flex:1}.hidden{display:none!important}.welcome{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:590px;gap:50px}.eyebrow{font:11px monospace;letter-spacing:3px;color:var(--gold)}.eyebrow span{margin:0 12px}.pixel-tag{display:inline-block;margin-top:28px;padding:7px 11px;border:1px solid #8c795a;background:#e6ba7212;font-size:12px;letter-spacing:2px}h1{font-size:clamp(46px,4.6vw,76px);line-height:1.25;letter-spacing:5px;margin:20px 0;color:var(--paper);text-shadow:4px 4px #101a2b;font-weight:900}h1 em{font-style:normal;color:var(--gold)}h1 em span{color:var(--red)}.intro{color:#c6c9c6;line-height:2;font-size:15px;margin:20px 0 28px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:3px solid var(--ink);box-shadow:4px 4px var(--ink),inset 0 3px #fff3;padding:14px 23px;font-weight:700;letter-spacing:2px}.primary{color:#253044;background:var(--gold)}.primary:hover{background:#f5d49b}.primary .icon{width:24px;height:24px}.primary>span:last-child{margin-left:35px;font-size:12px}.secondary{background:#3c5670;color:var(--paper)}.secondary:hover{background:#4f6d85;border-color:var(--gold)}.hero-meta{display:flex;align-items:center;gap:13px;font-size:11px;color:#a3aebc;margin-top:28px}.hero-meta i{width:3px;height:3px;background:var(--gold)}.hero-art{height:460px;position:relative;border:3px solid #647086;background:#20283f65;box-shadow:8px 8px #101a2b80,inset 0 0 0 5px #20283f;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-art:before,.hero-art:after{position:absolute;content:'✦';color:var(--gold);top:65px;font-size:24px}.hero-art:before{left:35px}.hero-art:after{right:35px;top:170px}.scene-label{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:2px;color:#aab4bd}.scene-label span{color:var(--gold)}.hero-judge{height:280px;width:280px;margin-top:10px}.hero-judge canvas{width:100%;height:100%;image-rendering:pixelated}.rpg{background:#20283ff2;border:3px solid #83919d;box-shadow:0 0 0 3px #101a2b,inset 0 0 0 3px #313e54;padding:17px 18px;position:relative}.rpg small{font-size:9px;color:var(--gold);letter-spacing:2px;font-family:monospace}.rpg p{font-size:14px;line-height:1.8;margin:8px 0 0;min-height:48px}.rpg b{position:absolute;bottom:8px;right:12px;color:var(--gold);font-size:9px;animation:blink 1.3s steps(2,end) infinite}.hero-dialog{width:84%;margin-top:-14px}.hero-dialog p{min-height:25px;font-size:16px}.hero-caption{margin-top:20px;font-size:10px;letter-spacing:2px;color:#b2babd}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#9fa8b6;border-top:2px solid #e6ba722a;min-height:51px;font-size:10px}footer>span:first-child{color:var(--gold);letter-spacing:1px}footer>span:last-child{font:9px monospace;letter-spacing:2px}.game{padding:22px 0}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h2{margin:8px 0 0;font-size:25px;letter-spacing:2px}.game-top .eyebrow{font-size:9px;letter-spacing:2px}.progress{width:240px;font-size:11px}.progress>span{display:flex;justify-content:space-between;letter-spacing:2px}.progress b{color:var(--gold);font-family:monospace}.progress>div{height:8px;background:#111a2b;border:1px solid #6c7484;margin-top:10px;position:relative}.progress>div:before{content:'';display:block;height:100%;width:var(--progress,0%);background:var(--gold);transition:width .3s}.game-layout{display:grid;grid-template-columns:236px 1fr;gap:25px}.npc-frame{height:175px;position:relative;overflow:hidden;background:#27364b99;border:2px solid #526176}.npc-tag{position:absolute;top:10px;left:12px;color:#adbbc8;font-size:10px;letter-spacing:1px}.npc-frame canvas{position:absolute;width:190px;height:190px;left:20px;bottom:-14px;image-rendering:pixelated}.sidebar .rpg{margin-top:12px;padding:12px 14px}.sidebar .rpg p{font-size:13px;min-height:46px}.stats{display:grid;grid-template-columns:1fr 1fr;margin:18px 0;gap:10px}.stats>div{border-bottom:2px solid #526176;padding:0 0 12px}.stats span,.result-stats span{display:block;font-size:11px;color:#aab6c1;letter-spacing:2px}.stats strong{display:block;font:28px monospace;color:var(--gold);margin-top:8px}.sidebar .secondary{width:100%;font-size:12px;padding:10px 8px;gap:8px;letter-spacing:1px}.secondary small{font:11px monospace;white-space:nowrap}.sidebar .icon{width:22px;height:22px}.text-button{border:0;background:none;color:#aeb9c6;font-size:11px;display:block;margin:16px auto 0}.text-button:hover{color:var(--gold)}.aside-tip{font-size:10px;line-height:1.9;color:#99a4b2;margin:15px 0 0}.board-panel{min-width:0;background:#152035c9;border:2px solid #59677c;box-shadow:6px 6px #101a2b80;padding:14px 16px 12px}.board-heading{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:11px;letter-spacing:2px;margin-bottom:12px}.board-heading span:last-child{font:9px monospace;letter-spacing:2px;color:#9daab8}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,1fr);gap:12px;height:438px;perspective:1200px}.card{position:relative;padding:0;background:none;border:0;box-shadow:none;min-width:0;transform-style:preserve-3d;perspective:900px;opacity:1!important}.card:hover:not(.flipped):not(.matched){filter:brightness(1.16);translate:0 -2px}.card:active:not(:disabled){transform:none}.card-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d;transition:transform .35s}.flipped .card-inner,.matched .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;border:3px solid #101a2b;box-shadow:3px 3px #0c1425;display:flex;align-items:center;justify-content:center}.back{background:#2a3e58;box-shadow:inset 0 0 0 2px #8e886f,inset 0 0 0 6px #26364d,3px 3px #0c1425;flex-direction:column;gap:6px}.back:before,.back:after{position:absolute;content:'◆';font-size:7px;color:#a68b60;top:9px}.back:before{left:9px}.back:after{right:9px}.back .icon{width:34px;height:34px;color:var(--gold)}.back small{font:7px monospace;letter-spacing:2px;color:#b9a37c}.front{transform:rotateY(180deg);background:var(--paper);color:#293344;flex-direction:column;padding:16px 8px 9px;box-shadow:inset 0 0 0 2px #b6a27e,3px 3px #0c1425}.front.charge{background:#b7c9ce;box-shadow:inset 0 0 0 2px #829fa9,3px 3px #0c1425}.card-type{position:absolute;top:7px;left:8px;font-size:8px;color:#6b6658;letter-spacing:1px}.front.charge .card-type{color:#456372}.card-text{font-size:clamp(12px,1.05vw,17px);font-weight:700;line-height:1.55;overflow-wrap:anywhere}.stamp{display:none;position:absolute;border:3px solid var(--red);color:var(--red);font-size:16px;font-weight:900;letter-spacing:3px;padding:2px 5px;transform:rotate(-12deg);background:#ead9b6e8;text-shadow:none}.matched .stamp{display:block;animation:stamp .3s ease-out}.matched .face{border-color:#b6995d}.matched.recent .front{animation:goldFlash .7s steps(2) 2}.mismatch .front{animation:redFlash .2s steps(2) 4}.hinted .face{outline:3px solid var(--gold)}.board-footer{display:flex;gap:20px;font-size:9px;color:#aab5c2;letter-spacing:1px;margin-top:13px}.board-footer span:last-child{margin-left:auto;color:var(--gold)}.result{text-align:center;padding:38px 0 30px}.result>.eyebrow{font-size:18px;letter-spacing:5px}.result h1{font-size:38px;margin:22px 0 12px}.result-sub{color:#aebbc7;font-size:13px}.result canvas{width:220px;height:220px;image-rendering:pixelated;margin:-10px auto -15px}.rank{color:var(--gold);font-size:24px;letter-spacing:5px;font-weight:800}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:650px;margin:25px auto;border:2px solid #6e7a8d;background:#20283fe8;padding:18px}.result-stats>div+div{border-left:2px solid #536176}.result-stats strong{display:block;color:var(--gold);font:24px monospace;margin-top:10px}.result-actions{display:flex;gap:20px;justify-content:center}.result-actions button{font-size:13px}#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}dialog{max-width:560px;background:var(--night);color:var(--paper);border:4px solid var(--gold);box-shadow:8px 8px #101a2b;padding:30px}dialog::backdrop{background:#0d1428cc}dialog h2{font-size:22px;margin:16px 0}dialog ol{padding-left:22px;line-height:2;font-size:13px}dialog p{font-size:11px;line-height:1.8;color:#aab6c1}dialog .primary{font-size:12px;margin-top:12px}.close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:26px}@keyframes blink{50%{opacity:0}}@keyframes stamp{0%{scale:2;opacity:0}80%{scale:.9}100%{scale:1;opacity:1}}@keyframes goldFlash{50%{outline:3px solid var(--gold)}}@keyframes redFlash{50%{background:#d47e7b}}
@media(min-width:1600px){.app{padding:0 72px}header{height:108px}.welcome{min-height:740px}.hero-art{height:550px}.hero-judge{width:340px;height:340px}.game{padding-top:30px}.game-layout{grid-template-columns:270px 1fr;gap:30px}.board{height:600px;gap:16px}.npc-frame{height:230px}.npc-frame canvas{width:245px;height:245px;left:10px}.sidebar .rpg{padding:18px}.stats{margin:25px 0}.stats strong{font-size:34px}.board-panel{padding:20px}.board-heading{margin-bottom:18px}.board-footer{margin-top:18px}.card-text{font-size:18px}.back .icon{width:44px;height:44px}.result{padding-top:60px}.result canvas{width:300px;height:300px}.result h1{font-size:48px}}@media(max-height:780px) and (min-width:1000px){header{height:72px}.welcome{min-height:560px}.game{padding:16px 0}.game-top{margin-bottom:14px}.board{height:410px}.npc-frame{height:155px}footer{min-height:43px}.result{padding:24px 0}.result canvas{width:180px;height:180px}.result-stats{margin:20px auto}.result h1{font-size:32px}}@media(max-width:1000px){.app{padding:0 22px}.header-right{gap:8px}.online{display:none}.game-layout{grid-template-columns:190px 1fr;gap:16px}.board{gap:8px}.board-panel{padding:12px 10px}.card-text{font-size:12px}.board-footer{gap:8px;font-size:8px}.npc-frame canvas{left:0}.welcome{gap:25px}footer span:last-child{display:none}footer span:nth-child(2){max-width:65%;font-size:8px}.hero-meta{gap:8px;font-size:9px}.hero-art{height:420px}}@media(max-width:700px){header{height:80px}.brand{font-size:12px;letter-spacing:1px}.brand small{font-size:6px}.brand .icon{width:25px}.mini{font-size:10px;padding:6px}.welcome{grid-template-columns:1fr;padding:35px 0;gap:30px}.hero-copy{text-align:center}h1{font-size:52px}.hero-meta{justify-content:center}.hero-art{height:400px}.hero-judge{height:260px;width:260px}.game-top h2{font-size:19px}.progress{width:120px}.progress>span{font-size:9px;letter-spacing:0}.game-layout{display:block}.sidebar{display:grid;grid-template-columns:100px 1fr;gap:12px;margin-bottom:18px}.npc-frame{height:120px;grid-row:span 2}.npc-frame canvas{width:130px;height:130px;left:-15px}.npc-tag{display:none}.sidebar .rpg{margin:0;padding:8px}.rpg small{font-size:8px}.sidebar .rpg p{font-size:11px;min-height:35px;margin-top:3px}.stats{margin:0;gap:15px}.stats>div{padding-bottom:5px}.stats strong{font-size:22px;margin-top:4px}.stats span{font-size:9px}.sidebar .secondary{grid-column:1/-1}.text-button{grid-column:1/-1;margin:0}.aside-tip{display:none}.board{height:480px;gap:6px}.board-panel{padding:10px 6px}.board-heading{font-size:9px;letter-spacing:1px}.board-heading span:last-child{font-size:7px}.front{padding:20px 4px 7px}.card-text{font-size:11px}.back .icon{width:26px;height:26px}.back small{font-size:5px;letter-spacing:0}.stamp{font-size:10px;letter-spacing:0;padding:2px}.board-footer span:last-child{display:none}footer{padding:12px 0;font-size:9px}.result h1{font-size:28px}.result>.eyebrow{font-size:13px}.result-actions{flex-direction:column;max-width:280px;margin:auto}.result-stats{padding:15px 5px}.result-stats strong{font-size:20px}.result-stats span{font-size:9px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.card-inner{display:block}.back small{white-space:nowrap}.card .icon{flex-shrink:0}
#court{z-index:0}.vignette{z-index:1}.app{position:relative;z-index:2}
@media(max-height:800px) and (min-width:1000px){.npc-frame{height:142px}.sidebar .rpg{margin-top:10px;padding:10px 12px}.sidebar .rpg p{min-height:42px;font-size:12px}.stats{margin:13px 0}.stats>div{padding-bottom:9px}.stats strong{font-size:25px;margin-top:5px}.sidebar .secondary{padding:8px}.text-button{margin-top:12px}.aside-tip{font-size:9px;margin-top:10px}.game-layout{align-items:start}}
/* Shared creator signature across the welcome, game and result screens. */
footer{padding:8px 0;min-height:74px}
.creator-signature{display:flex;align-items:center;gap:10px;flex-shrink:0}
footer .creator-signature>span{display:inline;font-size:9px;letter-spacing:2px;color:var(--muted)}
.creator-signature img{display:block;width:112px;height:56px;object-fit:contain}
@media(max-width:700px){footer{flex-wrap:wrap;gap:10px 12px}.app footer>.footer-note{order:3;flex-basis:100%;max-width:none;font-size:8px;line-height:1.8}.creator-signature{margin-left:auto;gap:6px}.creator-signature img{width:96px;height:48px}}