:root{color-scheme:dark;--gold:#ffd479;--mint:#a9e4d3;--line:#ffffff26;--serif:"Noto Serif SC","Songti SC",STSong,serif;--sans:"PingFang SC",sans-serif;--mono:"DM Mono",monospace}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#0c0c10;color:#f2f2f2;font-family:var(--serif);overflow:hidden}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}[hidden]{display:none!important}h2,h3,p{margin:0}
#app{height:100dvh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 42%,#26302f 0,#171c1d 43%,#0c0c10 83%)}
#app:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff04 40px);pointer-events:none}
#game-header{position:absolute;z-index:10;top:max(12px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}
#main{position:absolute;top:76px;bottom:max(24px,env(safe-area-inset-bottom));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));min-height:0}
.eyebrow{font:9px/1.2 var(--mono);letter-spacing:.16em;color:#d6bf8c}h2{font-size:20px;line-height:1.2}h3{font-size:16px;line-height:1.4}
.primary,.secondary,.text-button,.danger,.link-button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:0 16px;text-decoration:none;white-space:nowrap;font-size:14px;line-height:1}
.primary{background:var(--gold);border:1px solid var(--gold);color:#211b10;font-weight:600}
.secondary{background:#14151bcc;border:1px solid var(--line);color:#f2f2f2}
.text-button{background:transparent;border:1px solid transparent;color:#e7e1d5}
.danger{background:#2b1b23;border:1px solid #ff8e9c88;color:#ff9aaa}
.primary:disabled{background:#24252b;border-color:#ffffff3b;color:#babac2}.secondary:hover,.text-button:hover{border-color:#e2ca95}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home{height:100%;display:grid;grid-template-columns:188px minmax(0,1fr) minmax(260px,22vw);gap:24px;min-height:0}
.category-rail{border-right:1px solid #d7be7840;padding:12px 16px 12px 0;display:flex;flex-direction:column;gap:8px;min-height:0}
.category-button{border:1px solid transparent;background:transparent;color:#a8a8a8;text-align:left;padding:12px;min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.category-button strong{font-size:16px;line-height:1.4}.category-button small{font:10px/1.2 var(--mono)}
.category-button.active{color:#f2f2f2;border-color:#c9ae715b;background:linear-gradient(90deg,#b99b6033,#ffffff05)}
.rail-links{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px}.rail-links button{justify-content:flex-start;padding:0 8px;font-size:13px}
.stage-center{min-width:0;min-height:0;display:flex;flex-direction:column}
.stage-heading{min-height:72px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 16px;gap:12px}
.stage-heading h2{margin-top:8px}.stage-heading>span{font:11px/1.2 var(--mono);color:#c8c2b5}
.stage-route{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px;position:relative}
.stage-route:before{content:"";position:absolute;left:8%;right:8%;top:43%;height:1px;background:linear-gradient(90deg,#c9ac6d,#c9ac6d55);pointer-events:none}
.stage-card{height:min(86%,490px);min-height:260px;position:relative;overflow:hidden;padding:0;border:1px solid #ffffff2d;background:linear-gradient(150deg,#202928,#111617);color:#f2f2f2;text-align:left;display:flex;flex-direction:column}
.stage-card:nth-child(2){transform:translateY(-24px)}.stage-card:nth-child(3){transform:translateY(22px)}
.stage-card.selected{border-color:#e6c47e;box-shadow:0 0 0 1px #e6c47e44,0 20px 46px #0008}
.stage-card.locked{filter:saturate(.55)}.stage-card:hover:not(.selected){border-color:#d6be8a88}
.stage-card:before{content:"";position:absolute;inset:0;background:var(--card-art) center/cover no-repeat;opacity:.2;filter:blur(8px) saturate(.8);transform:scale(1.08);pointer-events:none}
.stage-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#090d0df0 0%,transparent 66%);pointer-events:none}
.stage-card img{position:relative;z-index:1;width:100%;height:100%;min-height:0;object-fit:contain;padding:8% 4% 22%;filter:drop-shadow(0 14px 18px #0009)}
.stage-state{position:absolute;z-index:2;left:12px;top:12px;border:1px solid #d8c18470;background:#101517c9;padding:5px 8px;font:10px/1.2 var(--mono);color:#e6c47e}
.stage-card.locked .stage-state{border-color:#ffffff30;color:#d2cfca}.stage-card.locked img{opacity:.42}
.stage-copy{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:5px}
.stage-copy small{font:10px/1.2 var(--mono);color:#dfc787}.stage-copy strong{font-size:16px;line-height:1.4}.stage-copy em{font:11px/1.4 var(--sans);font-style:normal;color:#d4d1c8}
.stage-detail{border-left:1px solid #d7be7840;padding:16px 0 12px 24px;display:flex;flex-direction:column;gap:12px;min-height:0}
.stage-number{font:56px/1 var(--mono);color:#e6c47e88}.stage-detail h3{font-size:20px;line-height:1.2}.stage-intro{font:14px/1.7 var(--sans);color:#ddd8cb}
.stage-tags{display:flex;gap:8px;flex-wrap:wrap}.stage-tags span{border:1px solid #ffffff2a;padding:5px 8px;font:10px/1.2 var(--mono);color:#ddd8cb}
.stage-detail-spacer{flex:1}.stage-cost,.unfinished{font:11px/1.5 var(--sans);color:#c5c1b9}.unfinished{color:#a9e4d3}.stage-start{width:100%;height:48px}.stage-detail>.text-button{align-self:flex-start}
.play{height:100%;min-height:0;display:grid;grid-template-rows:60px minmax(0,1fr) 52px;gap:12px}
.play-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.play-identity{display:flex;align-items:baseline;gap:16px}.play-identity h2{font-size:20px}
.counter{display:flex;align-items:baseline;gap:8px;white-space:nowrap}.counter span{font:11px/1.5 var(--sans);color:#ccc6bc}.counter b{font:600 22px/1.2 var(--mono);color:var(--gold)}.counter small{font-size:14px;color:#cbc7bc}
.work-area{min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:16px}
.board-wrap,.tray-wrap{min-height:0;display:flex;align-items:center;justify-content:center}.board-wrap{background:#ffffff05}.board{position:relative;aspect-ratio:1000/667;height:min(100%,480px);max-width:100%;flex:none;background:#1a1b1b;border:1px solid #b7a77b55;box-shadow:0 16px 36px #0008;overflow:hidden}
.board-guide,.board-lines,.board-piece{position:absolute;inset:0;width:100%;height:100%}.board-guide{object-fit:fill;opacity:.24;filter:grayscale(.55)}
.board-lines{fill:transparent;stroke:#d8c998aa;stroke-width:2;stroke-dasharray:10 7;pointer-events:none;z-index:2}.board-piece{pointer-events:none;z-index:1}.board-piece svg{width:100%;height:100%}
.target{position:absolute;z-index:3;border:0;background:transparent;padding:0;cursor:pointer}.target:hover,.target.drop-focus{background:#ffd4792c}.target.filled:hover{background:#0c0c1050}.target.hint-target{background:#ffd47960;animation:hintpulse 1.5s ease-in-out infinite}.target:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tray-wrap{border-left:1px solid #ffffff21;padding-left:16px;flex-direction:column;align-items:stretch;gap:8px}
.tray-label{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;font:11px/1.5 var(--sans);color:#d8d2c7}
.hint-button{font-size:11px;min-height:44px}.tray{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
.tray-piece{position:relative;min-width:44px;min-height:44px;overflow:hidden;border:1px solid #ffffff38;border-radius:6px;background:#ffffff0b;color:#e9e3d4;padding:3px;touch-action:none;transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease,transform 160ms ease}
.tray-piece.pending{border-color:#d9c38c9e;background:linear-gradient(145deg,#e8d49b1d,#ffffff09 52%,#8fcfbf12);box-shadow:inset 0 0 0 1px #fff3c21c,0 0 0 1px #090b0ca8,0 7px 16px #0005}
.tray-piece.pending::after{content:"待放";position:absolute;z-index:2;right:4px;bottom:4px;padding:3px 5px;border-radius:3px;background:#e7ce8f;color:#211b10;box-shadow:0 2px 7px #000a;font:600 9px/1 var(--sans);letter-spacing:.06em;pointer-events:none}
.tray-piece.pending:hover,.tray-piece.pending.selected{border-color:var(--gold);background:linear-gradient(145deg,#ffd47931,#ffffff12 52%,#a9e4d31c);box-shadow:inset 0 0 0 1px #fff4ce4d,0 0 0 1px #ffd47936,0 8px 18px #0008;transform:translateY(-1px)}
.tray-piece.pending.selected::after{content:"已选";background:var(--mint);color:#10201c}.tray-piece.reject{animation:reject 340ms ease-out}
.tray-piece.placed{border-color:#ffffff18;background:#080b0cc4;opacity:.2;box-shadow:none}
.tray-piece.placed::after{content:"✓";position:absolute;z-index:2;right:5px;bottom:4px;color:#b7d9cf;font:600 12px/1 var(--sans)}
.tray-piece svg{width:100%;height:100%;filter:drop-shadow(0 2px 5px #000b)}.tray-piece.pending svg{filter:brightness(1.28) saturate(1.16) contrast(1.06) drop-shadow(0 3px 8px #000d)}.tray-piece.placed svg{filter:grayscale(.72) brightness(.58)}
.piece-clue{min-height:17px;flex:none;font:11px/1.5 var(--sans);color:#d4d0c6}
.play-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.play-actions>div{display:flex;gap:8px}.midline{min-width:0;font:11px/1.5 var(--sans);color:var(--mint)}
.drag-ghost{position:fixed;z-index:1000;width:105px;height:82px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 8px 16px #000b)}.drag-ghost svg{width:100%;height:100%}
.result{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:center}
.result-art,.detail-art{height:100%;min-height:0;display:grid;place-items:center;background:#ffffff07;border:1px solid var(--line)}
.result-art img,.detail-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 15px 22px #000a)}
.result-copy{min-height:0;overflow:auto;padding-right:8px;display:flex;flex-direction:column;gap:16px}.result-copy h2{font-size:26px}.result-copy p,.detail-copy p{font-size:14px;line-height:1.7}
.story{color:#e4e0d7}.xie-line{color:#ffe0b1}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.collection,.old{height:100%;min-height:0;display:flex;flex-direction:column;gap:16px}.view-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}.view-head h2{margin-top:8px}.view-head h2 span{font:14px var(--mono);color:var(--gold)}
.collection-tabs{display:flex;gap:8px;flex:none}.collection-tabs button{min-height:44px;border:1px solid #ffffff26;border-radius:6px;background:#ffffff08;color:#d4d0c8;padding:0 16px;font:13px var(--serif)}.collection-tabs button.active{color:#211b10;background:var(--gold);border-color:var(--gold)}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0;flex:1}.archive-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:0;overflow:hidden;padding:12px;border:1px solid var(--line);background:#ffffff0a;color:#f2f2f2}.archive-card:disabled{opacity:.45}.archive-card img{width:100%;height:70%;min-height:0;object-fit:contain}.archive-card strong{font-size:16px}.archive-card small{font:11px/1.4 var(--sans)}
.detail{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:12px}.detail-back{grid-column:1/-1;justify-self:start}.detail-copy{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px 8px 16px}.detail-copy blockquote{margin:0;color:#ffe0b1;font-size:14px}.detail-copy small,.source-link{font:11px/1.5 var(--sans);color:#c6c1bb}.source-link{align-self:flex-start;color:#dfc787;text-underline-offset:3px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.facts p{border:1px solid var(--line);background:#ffffff08;padding:12px;font:11px/1.6 var(--sans)}.facts strong{display:block;color:#ebd69f;font-size:12px}
.old{max-width:950px;margin:auto;overflow:auto}.old>p{font:14px/1.7 var(--sans);color:#d5d1c9}.old>h3{font-size:16px}.old-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:none}.old-list div{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:8px}.old-list span{font:11px/1.5 var(--sans);color:var(--mint)}.old-actions{margin-top:auto}.old-error{color:#ff9aaa!important}
.error-screen{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px}.error-screen p{font:14px/1.7 var(--sans)}
#status{position:absolute;z-index:20;top:70px;left:50%;transform:translateX(-50%);max-width:min(600px,calc(100vw - 32px));padding:8px 14px;background:#1b1b20ee;color:#f2f2f2;font:11px/1.5 var(--sans);text-align:center;pointer-events:none}#status:empty{display:none}
dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;background:#17171d;color:#f2f2f2;border:1px solid var(--line);overflow:auto}dialog::backdrop{background:#000b}dialog h2{text-align:center;font-size:18px}dialog p{font-size:14px;line-height:1.7;margin:20px 0}.dialog-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;color:inherit;font-size:28px}.dialog-actions{display:flex;justify-content:center;gap:8px}.dialog-actions button{min-height:44px;padding:0 16px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit}.dialog-actions .danger{background:#2b1b23;color:#ff9aaa;border-color:#ff8e9c88}
.rotate{display:none}@keyframes hintpulse{50%{background:#ffd47931}}@keyframes snap{0%{transform:scale(.965);filter:brightness(1.3)}65%{transform:scale(1.012)}100%{transform:scale(1)}}@keyframes reject{20%{transform:translateX(-5px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@media(max-width:1000px),(max-height:560px){
#game-header{top:max(8px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
#main{top:58px;bottom:max(8px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
.primary,.secondary,.text-button,.danger,.link-button{font-size:13px;padding:0 10px}
.home{grid-template-columns:clamp(100px,13.3vw,124px) minmax(0,1fr) clamp(164px,22vw,204px);gap:8px}
.category-rail{padding:0 8px 0 0;gap:4px}.category-rail>.eyebrow{display:none}.category-button{padding:4px 6px;min-height:48px;gap:0}.category-button strong{font-size:13px}.category-button small{font-size:10px}
.rail-links{gap:0}.rail-links button{font-size:11px;padding:0 4px}
.stage-heading{min-height:42px;padding:0 0 8px}.stage-heading h2{font-size:17px;margin-top:4px}.stage-heading>span{font-size:10px}
.stage-route{gap:8px}.stage-card{height:90%;min-height:0}.stage-card:nth-child(2){transform:translateY(-10px)}.stage-card:nth-child(3){transform:translateY(9px)}
.stage-card img{padding:8% 2% 30%}.stage-state{top:4px;left:4px;padding:3px 4px;font-size:10px}
.stage-copy{left:6px;right:6px;bottom:6px;gap:2px}.stage-copy small{font-size:10px}.stage-copy strong{font-size:13px}.stage-copy em{font-size:10px;max-height:28px;overflow:hidden}
.stage-detail{padding:2px 0 2px 8px;gap:4px}.stage-number{font-size:28px}.stage-detail h3{font-size:17px}.stage-intro{font-size:12px;line-height:1.5}.stage-tags{gap:4px}.stage-tags span{padding:2px 4px;font-size:10px}.stage-cost,.unfinished{font-size:10px}.stage-start{height:44px}
.play{grid-template-rows:32px minmax(0,1fr) 44px;gap:4px}.play-identity{gap:8px}.play-identity h2{font-size:17px}.counter span{font-size:10px}.counter b{font-size:17px}.counter small{font-size:13px}
.work-area{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:8px}.board{max-height:234px}.tray-wrap{padding-left:8px;gap:4px}.tray-label{height:44px;font-size:10px}.tray{gap:8px}.piece-clue{font-size:10px}.midline{font-size:10px;max-height:30px;overflow:hidden}
.result{gap:12px}.result-copy{gap:6px}.result-copy h2{font-size:18px}.result-copy p,.detail-copy p{font-size:12px}.archive-card{padding:8px}.archive-card strong{font-size:13px}.archive-card small{font-size:10px}.detail-copy{gap:6px}.detail-copy blockquote{font-size:12px}.facts p{padding:6px;font-size:10px}.facts strong{font-size:11px}.old{gap:8px}.old>p{font-size:12px}.old-list div{padding:8px}#status{top:54px}dialog{padding:16px}dialog h2{font-size:16px}dialog p{font-size:13px}
}
@media(max-width:770px) and (max-height:380px){
.stage-intro,.stage-tags{display:none}.stage-card img{padding-bottom:32%}.stage-card .stage-copy em{display:none}.stage-detail .unfinished{max-height:32px;overflow:hidden}
.board{max-height:184px}.piece-clue{display:none}.tray-wrap{gap:4px}.tray{min-height:0}.tray-label{height:44px}.tray-piece{min-height:44px}.play-actions .midline{max-width:200px;white-space:nowrap;text-overflow:ellipsis}
.result-copy .story{max-height:44px;overflow:auto}.result-art img{max-height:95%}.archive-card img{height:62%}
}
@media(max-height:430px){.collection{gap:8px}.collection-tabs button{font-size:12px;padding:0 8px}.archive-card img{height:58%}.old-list div{padding:6px}.old>p{display:none}}
@media(orientation:portrait) and (max-width:700px){.rotate{display:flex;position:fixed;inset:0;z-index:999;background:#0c0c10;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:18px}.rotate span{font:13px/1.5 var(--sans)}#app{visibility:hidden}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}