/* 游乐场：只用 shared-nav.css 的颜色与字体变量，深浅两种主题都生效。量子化学计算器（iframe）那一页另有规则。 */
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:calc(var(--cr-nav-height,64px) + 16px)}
body.qchem-page{margin:0;background:var(--paper);color:var(--ink);font:14px/1.75 var(--font-sans)}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent-text)}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:fixed;top:-100px;left:16px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:1000}
.skip:focus{top:calc(var(--cr-nav-height,64px) + 8px)}

/* 计算器页：整页不滚动，计算器占满顶栏和标签条以下 */
body.qchem-page[data-view=lab]{display:flex;flex-direction:column;height:100%;overflow:hidden}
body.qchem-page[data-view=lab] main{display:none}
.qchem-box{position:relative;flex:1;min-height:0;overflow:hidden}
.qchem-frame{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:0;background:#0d1117}

/* 标签条 */
.play-tabs{position:relative;display:flex;gap:2px;overflow-x:auto;padding:0 max(16px,calc((100% - 1200px)/2));border-bottom:1px solid var(--line);background:var(--surface);scrollbar-width:thin;flex:none}
.play-tabs a{flex:0 0 auto;display:flex;align-items:center;min-height:44px;padding:0 13px;border-bottom:2px solid transparent;color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}
.play-tabs a:hover{color:var(--ink)}
.play-tabs a[aria-current=page]{color:var(--ink);font-weight:600;border-bottom-color:var(--gold)}
.play-tabs a.play-tab-lab{color:var(--accent-text)}

main.play-main{max-width:1200px;margin:0 auto;padding:0 32px 56px}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--muted);margin:0 0 10px}
.muted{color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;font-size:13px;font-weight:500}
.button:hover{border-color:var(--accent-2)}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.button.primary:hover{background:var(--accent-hover)}
.button:disabled{opacity:.5;cursor:default}

/* 总览 */
.play-hero{padding:36px 0 22px}
.play-hero h1{margin:0 0 10px;font:600 clamp(28px,4vw,40px)/1.2 var(--font-serif);letter-spacing:.02em}
.play-hero h1 span{display:block;margin-top:6px;font:italic 500 clamp(15px,1.6vw,18px)/1.3 var(--font-num);color:var(--muted);letter-spacing:0}
:root[lang=en] .play-hero h1 span{display:none}
.play-lead{max-width:80ch;margin:0;font-size:15px;line-height:1.9;color:var(--ink-2)}
.play-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.play-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.play-card:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.play-card h2{margin:0;font-size:17px;line-height:1.4}
.play-card p{margin:0;flex:1;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.play-card-n{font:600 22px/1 var(--font-num);color:var(--gold)}
.play-card-lab{grid-column:1/-1;background:linear-gradient(120deg,color-mix(in srgb,#0d1117 92%,var(--accent)),#0d1117);border-color:color-mix(in srgb,var(--accent-2) 40%,#30363d);color:#e6edf3}
.play-card-lab p{color:#b7c2cc;max-width:90ch}
.play-card-lab .play-card-n{font-size:12px;letter-spacing:2px;color:#d9b65c}
.play-card-lab .play-go{color:#e6edf3}
.play-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-text)}
.play-best{font-size:12px;color:var(--muted)}
.play-honest{margin:18px 0 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent-2) 35%,transparent);border-radius:6px;background:var(--accent-soft);font-size:13px;color:var(--ink-2);max-width:100ch}

/* 游戏 */
.play-head{padding:28px 0 14px}
.play-head h2{margin:0 0 6px;font:600 clamp(22px,3vw,28px)/1.3 var(--font-serif)}
.play-stage{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px;align-items:start}
.play-ctl{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}
.play-ctl label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.play-ctl label>span{display:flex;align-items:center;gap:10px}
.play-ctl input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.play-ctl output{min-width:72px;font:600 13px/1.3 var(--font-num);color:var(--ink);text-align:right}
.play-ctl input[type=range]:disabled{opacity:.45}
.play-btns{display:flex;flex-wrap:wrap;gap:8px}
.play-fig{margin:0;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.play-fig canvas{display:block;width:100%;height:auto;border-radius:4px}
#orb-cv{max-width:560px;margin:0 auto}
.play-fig figcaption{margin:6px 2px 0;font-size:12.5px;color:var(--muted)}
.play-task{margin:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:6px;background:var(--gold-soft);font-size:13.5px;line-height:1.7;color:var(--ink)}
.play-msg{min-height:1.7em;margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.play-msg[data-tone=ok]{color:color-mix(in srgb,var(--ok) 80%,var(--ink));font-weight:600}
.play-msg[data-tone=bad]{color:color-mix(in srgb,var(--warn) 80%,var(--ink))}
.play-score{margin:0;font:600 12.5px/1.4 var(--font-num);color:var(--muted)}
.play-read{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.play-read dt{color:var(--muted)}
.play-read dd{margin:0;font:600 13px/1.5 var(--font-num);color:var(--ink);overflow-wrap:anywhere}
.play-swatches{display:flex;gap:10px;flex-wrap:wrap}
.play-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted);text-align:center;min-width:84px}
.play-swatch i{display:block;width:64px;height:40px;border-radius:6px;border:1px solid var(--line-strong);background:var(--paper)}
.play-swatch b{font:600 12px/1.2 var(--font-num);color:var(--ink)}
.play-how{margin:16px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.play-how summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14px}
.play-how>div{padding:0 16px 14px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.play-how p{margin:0 0 8px}
.play-formula{display:block;margin:6px 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:14px/1.6 var(--font-num);color:var(--ink);overflow-x:auto;white-space:nowrap}

/* 选择题按钮 */
.play-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.play-choice{min-height:44px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);cursor:pointer;font:600 14px/1.3 var(--font-num);color:var(--ink)}
.play-choice:hover:not(:disabled){border-color:var(--accent-2)}
.play-choice[data-mark=right]{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--paper))}
.play-choice[data-mark=wrong]{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--paper))}
.play-choice:disabled{cursor:default}
.play-choices.wide{grid-template-columns:minmax(0,1fr)}
.play-choices.wide .play-choice{font-family:var(--font-sans);font-weight:500;text-align:left;padding:10px 12px}

/* 电子排布 */
.cfg-el{display:flex;align-items:baseline;gap:10px;margin:0}
.cfg-el b{font:600 34px/1 var(--font-num);color:var(--ink)}
.cfg-el sub{font:500 13px/1 var(--font-num);color:var(--muted);vertical-align:baseline}
.cfg-el span{font-size:15px;color:var(--ink-2)}
.cfg-grid{display:flex;flex-direction:column-reverse;gap:8px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cfg-row{display:flex;align-items:center;gap:10px;min-width:0}
.cfg-row>b{width:34px;flex:none;font:600 14px/1 var(--font-num);color:var(--ink-2);text-align:right}
.cfg-boxes{display:flex;flex-wrap:wrap;gap:4px}
.cfg-box{width:42px;height:42px;padding:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px}
.cfg-box:hover{border-color:var(--accent-2)}
.cfg-box i{display:block;width:8px;height:26px;-webkit-mask:var(--cfg-arrow) center/contain no-repeat;mask:var(--cfg-arrow) center/contain no-repeat;background:var(--metal,var(--gold))}
.cfg-box i.down{transform:rotate(180deg)}
:root{--cfg-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 26'%3E%3Cpath d='M4 0 8 8H5v18H3V8H0z'/%3E%3C/svg%3E")}
.cfg-hint{margin:0;font-size:12.5px;color:var(--muted)}
.cfg-count{font:600 13px/1.4 var(--font-num);color:var(--ink)}

/* 隧穿关卡 */
.tun-missions{display:flex;flex-wrap:wrap;gap:6px}
.tun-missions button{min-height:36px;padding:4px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.tun-missions button[aria-pressed=true]{border-color:var(--gold);color:var(--ink);font-weight:600;background:var(--gold-soft)}
.tun-missions button[data-done]::after{content:"";display:inline-block;width:10px;height:6px;margin-left:6px;border:solid var(--ok);border-width:0 0 2px 2px;transform:translateY(-3px) rotate(-45deg)}
.tun-particle{display:flex;gap:6px;flex-wrap:wrap}
.tun-particle button{min-height:36px;padding:4px 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);cursor:pointer;font-size:12.5px}
.tun-particle button[aria-pressed=true]{border-color:var(--accent-2);background:var(--accent-soft);font-weight:600}
.tun-particle button:disabled{opacity:.5;cursor:default}

/* 谱线 */
.ln-pick{display:flex;flex-direction:column;gap:6px}
.ln-pick>span{font-size:12.5px;color:var(--ink-2)}
.ln-pick>div{display:flex;flex-wrap:wrap;gap:5px}
.ln-pick button{min-width:44px;min-height:40px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);cursor:pointer;font:600 14px/1 var(--font-num)}
.ln-pick button[aria-pressed=true]{border-color:var(--gold);background:var(--gold-soft)}
.ln-pick button:disabled{opacity:.4;cursor:default}

@media (max-width:860px){
  main.play-main{padding:0 16px 48px}
  .play-stage{grid-template-columns:minmax(0,1fr)}
  .play-hero{padding:26px 0 18px}
}
@media (max-width:430px){.play-choices{grid-template-columns:minmax(0,1fr)}.cfg-box{width:38px;height:38px}}

/* 07–14：量子嘉年华分会场与物理疆界（play-quantum.js） */
.play-tabs a.play-tab-zone{margin-left:10px;border-left:1px solid var(--line);padding-left:16px}
.play-zones{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.play-zones a{display:flex;flex-direction:column;gap:2px;min-width:180px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none}
.play-zones a:hover{border-color:var(--accent-2)}
.play-zones b{font-size:14px}
.play-zones span{font-size:12px;color:var(--muted)}
.play-zone-h{display:flex;align-items:baseline;gap:12px;margin:34px 0 4px;font:600 22px/1.3 var(--font-serif);scroll-margin-top:calc(var(--cr-nav-height,64px) + 16px)}
.play-zone-h:first-of-type{margin-top:8px}
.play-zone-h span{font:700 11px/1 var(--font-sans);letter-spacing:2px;color:var(--gold)}
.play-zone-lead{max-width:90ch;margin:0 0 14px;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.play-zone-links{margin:10px 0 0;font-size:13px;color:var(--muted)}
.play-card-tag{position:absolute;top:18px;right:18px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted)}
.play-card-q .play-card-n{color:var(--accent-text)}
.play-card-r .play-card-n{color:var(--info)}
.play-sliders{display:flex;flex-direction:column;gap:12px}
.play-sliders label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.play-sliders label>span{display:flex;align-items:center;gap:10px}
.play-goals{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.play-goals li{position:relative;padding-left:24px}
.play-goals li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border:1.5px solid var(--line-strong);border-radius:50%}
.play-goals li[data-done]{color:var(--ink);font-weight:600}
.play-goals li[data-done]::before{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 22%,transparent)}
.play-goals li[data-done]::after{content:"";position:absolute;left:4px;top:7px;width:6px;height:3.5px;border:solid var(--ok);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.bell-table{display:flex;flex-direction:column;gap:8px}
.bell-row{display:grid;grid-template-columns:auto 44px auto 44px;align-items:center;gap:6px 8px;font-size:13px;color:var(--ink-2)}
.bell-row button{min-height:36px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);cursor:pointer;font:700 15px/1 var(--font-num)}
.bell-row button:hover{border-color:var(--accent-2)}
.cir-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.cir-gate{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:38px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);cursor:pointer;font:500 12.5px/1 var(--font-num);color:var(--ink);white-space:nowrap}
.cir-gate b{font-size:14px;color:var(--gold)}
.cir-gate[data-g=CNOT]{grid-column:span 2}
.cir-gate:hover:not(:disabled){border-color:var(--accent-2)}
.cir-gate:disabled{opacity:.45;cursor:default}
.qec-board{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.qec-qubits{display:flex;gap:10px;justify-content:center}
.qec-q{display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface)}
.qec-q small{font:500 10.5px/1 var(--font-num);color:var(--muted)}
.qec-q b{font:700 20px/1.2 var(--font-num);color:var(--ink)}
.qec-q[data-flip]{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--surface))}
.qec-q[data-fix]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 45%,transparent)}
.qec-lamps{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.qec-lamp{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-num);color:var(--ink-2)}
.qec-lamp i{display:block;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface)}
.qec-lamp[data-on] i{border-color:var(--gold);background:var(--gold);box-shadow:0 0 10px var(--gold)}
.pl-steps{display:flex;flex-direction:column;gap:8px}
.pl-step{display:grid;grid-template-columns:22px 1fr 40px 54px 40px;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.pl-step b{font:700 18px/1 var(--font-num);color:var(--ink);text-align:center}
.pl-step .button{min-height:36px;padding:0;font:700 17px/1 var(--font-num)}
.pl-step output{font:700 15px/1 var(--font-num);color:var(--ink);text-align:center}
.cube-case{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:6px;background:var(--gold-soft)}
.cube-case small{font-size:11px;letter-spacing:1px;color:var(--muted)}
.cube-case b{font-size:15px;line-height:1.6;color:var(--ink)}
.cube-switches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cube-switches button{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--paper);cursor:pointer}
.cube-switches button b{font:700 18px/1.1 var(--font-num)}
.cube-switches button span{font-size:11.5px;color:var(--muted)}
.cube-switches button[aria-pressed=true]{border-color:var(--gold);background:var(--gold-soft)}
.cube-switches button[aria-pressed=true] span{color:var(--ink-2)}
.cube-switches button:disabled{cursor:default;opacity:.75}
@media (max-width:430px){.cir-pal{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.play-card-tag{position:static;align-self:flex-start}}

/* 15：二维波包画墙（play-wave2d.js）。画布上拖动是画墙，所以不让它滚动页面 */
.wv-cv{touch-action:none;cursor:crosshair}
.wv-cv:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#wv-phase[aria-pressed=true]{border-color:var(--gold);background:var(--gold-soft)}

/* 16–19：立体馆（play-3d.js）。画布上拖动是转视角或拖电子对，所以不让它滚动页面 */
.play-card-3d .play-card-n{color:var(--violet,var(--accent-text))}
.p3-cv{touch-action:none;cursor:move;user-select:none;-webkit-user-select:none}
.p3-cv[data-dragging=handle]{cursor:grabbing}
.p3-cv:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.play-ask{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
#vs-choices{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
#vs-choices .play-choice{font:500 13px/1.3 var(--font-sans)}
#ch-case span{font-size:13px;line-height:1.7;color:var(--ink-2)}
#ch-case span.muted{font-size:12.5px;color:var(--muted)}
#ch-rank[aria-pressed=true]{border-color:var(--gold);background:var(--gold-soft)}
#mi-steps .pl-step{grid-template-columns:22px 1fr 40px 54px 40px}
#mi-steps .pl-step span{font-size:12.5px;color:var(--muted)}

/* 20：量子世界（world/ 的 iframe）。框和计算器一样标 data-display-frame，所以放在 position:relative 的盒子里绝对定位 */
.play-card-world{background:linear-gradient(135deg,var(--surface) 55%,color-mix(in srgb,var(--info) 12%,var(--surface)))}
.qw-box{position:relative;height:clamp(460px,74vh,760px);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#02030a}
:root[data-theme="light"] .qw-box{background:#f6f5ee}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .qw-box{background:#f6f5ee}}
.qw-frame{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:0}
.qw-links{margin:8px 0 0;font-size:13px}
.qw-links a{color:var(--accent-text)}
@media (max-width:640px){.qw-box{height:clamp(440px,72vh,640px);border-radius:10px}}