/* 版面照 版面規格.md（Master 2026-10-15 點頭）。桌機以 2K 設計尺寸 × --px 縮放；手機（≤700px）用 px。
   色票沿用華語城堡佔位，藝術是第 4 步。 */
:root{--bg:#1B3A2F;--panel:#183329;--well:#0F2A20;--card:#1F4236;--chip:#2B4A3E;--ghost:#223F34;--ink:#F1EFE6;--sub:#B7C9BF;
  --accent:#F5D66B;--on-accent:#1B3A2F;--s-mastered:#9BE3A8;--s-learning:#F5D66B;--s-weak:#E8836B;
  --gold:var(--accent);--ok:var(--s-mastered);--weak:var(--s-weak);   /* 舊名保留一版 alias */
  --rf:1;--px:1px;--bg-art:none;
  --font-body:"Noto Sans TC","Noto Sans JP","Yu Gothic UI","Microsoft JhengHei",system-ui,sans-serif;
  --font-display:"Noto Serif TC","Noto Serif JP",serif;--font-target:"Noto Serif JP","Noto Serif TC","Yu Mincho",serif;
  --font-gloss:"Noto Serif TC",serif;--font-ruby:"Noto Sans JP",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg) var(--bg-art) center/cover no-repeat;color:var(--ink);overflow:hidden;
  font-family:var(--font-body)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
#app{position:fixed;inset:0}
.jp{font-family:var(--font-target);font-weight:900}
ruby{ruby-position:over}
rt{font-size:.42em;font-weight:500;font-family:var(--font-ruby)}
body.nofuri rt{visibility:hidden}   /* 只藏不拿掉：版面高度不變 */
.jpbox{display:inline-flex;align-items:flex-end;min-height:2.3em;line-height:1.1}

/* ── 桌機（2K 設計尺寸）── */
#top{position:absolute;left:calc(24*var(--px));top:calc(16*var(--px));right:calc(24*var(--px));height:calc(80*var(--px))}
#title{margin:0;position:absolute;left:0;top:0;width:calc(640*var(--px));height:100%;background:var(--panel);border-radius:calc(12*var(--px)*var(--rf));
  font-size:calc(46*var(--px));line-height:calc(80*var(--px));padding:0 calc(24*var(--px));color:var(--gold);font-family:var(--font-display);font-weight:900;white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:calc(16*var(--px))}
#furi{position:absolute;top:calc(8*var(--px));right:calc(144*var(--px));width:calc(248*var(--px));height:calc(64*var(--px));border-radius:calc(32*var(--px)*var(--rf));background:var(--card);font-size:calc(32*var(--px))}
#sound{position:absolute;top:calc(8*var(--px));right:0;width:calc(112*var(--px));height:calc(64*var(--px));border-radius:calc(32*var(--px)*var(--rf));background:var(--card);font-size:calc(32*var(--px))}
#mapview{position:absolute;inset:0}
#map{position:absolute;left:calc(24*var(--px));top:calc(120*var(--px));width:calc(1848*var(--px));height:calc(1160*var(--px));background:var(--well);border-radius:calc(16*var(--px)*var(--rf));padding:calc(24*var(--px))}
.floor{position:relative;height:calc(544*var(--px));background:var(--panel);border-radius:calc(12*var(--px)*var(--rf));margin-bottom:calc(24*var(--px));display:grid;
  grid-template-columns:calc(160*var(--px)) repeat(3,calc(512*var(--px)));column-gap:calc(24*var(--px));padding-right:calc(32*var(--px));align-items:center}
.floor:last-of-type{margin-bottom:0}
.flabel{height:100%;background:var(--card);border-radius:calc(12*var(--px)*var(--rf));display:flex;align-items:center;justify-content:flex-start;padding-left:calc(18*var(--px));font-size:calc(38*var(--px));font-weight:700;writing-mode:horizontal-tb;position:relative}
.flabel .cursor{position:absolute;left:calc(60*var(--px));top:50%;width:calc(40*var(--px));height:calc(40*var(--px));margin-top:calc(-20*var(--px));border-radius:50%;background:var(--gold);visibility:hidden}
.flabel.on .cursor{visibility:visible}
.flabel span{position:absolute;left:calc(16*var(--px));top:calc(16*var(--px))}
.room,.ghost{height:calc(400*var(--px));border-radius:calc(16*var(--px)*var(--rf));position:relative;padding:calc(24*var(--px));text-align:left;background:var(--card);display:flex;flex-direction:column;justify-content:space-between}
.room.sel{box-shadow:0 0 0 calc(5*var(--px)) var(--gold)}
.room.next::after{content:attr(data-next);position:absolute;right:calc(20*var(--px));top:calc(20*var(--px));background:var(--gold);color:var(--on-accent);font-weight:700;font-size:calc(26*var(--px));padding:calc(4*var(--px)) calc(14*var(--px));border-radius:calc(18*var(--px)*var(--rf))}
.ghost{background:var(--ghost);color:var(--sub);align-items:center;justify-content:center;font-size:calc(32*var(--px));border:calc(3*var(--px)) dashed var(--chip)}
.rname{font-size:calc(64*var(--px));line-height:1.2}
.rname small{display:block;font-size:calc(34*var(--px));font-weight:500;color:var(--sub);font-family:inherit}
.rpre{font-size:calc(28*var(--px));color:var(--gold);min-height:calc(36*var(--px))}
.bars{display:flex;gap:calc(16*var(--px));height:calc(32*var(--px))}
.bar{flex:1;border-radius:calc(6*var(--px)*var(--rf));background:var(--chip)}
.s-mastered{background:var(--ok)!important}.s-learning{background:var(--gold)!important}.s-weak{background:var(--weak)!important}
.s-locked{background:repeating-linear-gradient(135deg,var(--chip) 0 6px,var(--ghost) 6px 12px)!important}
#links{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
#links line{stroke:var(--gold);stroke-width:calc(8*var(--px));stroke-linecap:round}

#side{position:absolute;left:calc(1896*var(--px));top:calc(120*var(--px));width:calc(640*var(--px));height:calc(1296*var(--px));background:var(--panel);border-radius:calc(16*var(--px)*var(--rf));padding:calc(24*var(--px));display:flex;flex-direction:column;gap:calc(24*var(--px))}
#roomT{height:calc(104*var(--px));background:var(--well);border-radius:calc(12*var(--px)*var(--rf));padding:0 calc(24*var(--px));font-size:calc(56*var(--px));display:flex;align-items:center;gap:calc(16*var(--px))}
#roomT small{font-size:calc(32*var(--px));color:var(--sub);font-family:inherit;font-weight:500}
.door{position:relative;height:calc(208*var(--px));background:var(--card);border-radius:calc(14*var(--px)*var(--rf));padding:calc(24*var(--px)) calc(24*var(--px)) calc(24*var(--px)) calc(40*var(--px));display:flex;align-items:center;justify-content:space-between;overflow:hidden}
.door .st{position:absolute;left:0;top:0;bottom:0;width:calc(16*var(--px));background:var(--chip)}
.door h3{margin:0 0 calc(6*var(--px));font-size:calc(40*var(--px))}
.door p{margin:0;font-size:calc(26*var(--px));color:var(--sub);line-height:1.3}
.go{width:calc(152*var(--px));height:calc(120*var(--px));border-radius:calc(16*var(--px)*var(--rf));background:var(--gold);color:var(--on-accent);font-size:calc(36*var(--px));font-weight:700;flex:none}
.go:disabled{background:var(--chip);color:var(--sub);cursor:default}
#doors{display:flex;flex-direction:column;gap:calc(24*var(--px))}
#rule{flex:1;min-height:0;overflow:auto;background:var(--well);border-radius:calc(12*var(--px)*var(--rf));padding:calc(20*var(--px)) calc(24*var(--px))}
#rule h4{margin:0 0 calc(8*var(--px));font-size:calc(32*var(--px));color:var(--gold)}
#rule ul{margin:0;padding-left:calc(24*var(--px));font-size:calc(24*var(--px));line-height:1.45;color:var(--ink)}

#dock{position:absolute;left:calc(528*var(--px));top:calc(1304*var(--px));width:calc(1344*var(--px));height:calc(112*var(--px));background:var(--panel);border-radius:calc(16*var(--px)*var(--rf));padding:calc(24*var(--px));display:flex;gap:calc(24*var(--px));align-items:center}
#campaign{width:calc(240*var(--px));height:calc(64*var(--px));border-radius:calc(12*var(--px)*var(--rf));background:var(--gold);color:var(--on-accent);font-size:calc(38*var(--px));font-weight:700;flex:none}
#legend{flex:1;min-width:0;height:calc(64*var(--px));background:var(--well);border-radius:calc(12*var(--px)*var(--rf));display:flex;align-items:center;gap:calc(20*var(--px));padding:0 calc(20*var(--px));font-size:calc(26*var(--px));white-space:nowrap;overflow:hidden}
#legend i{display:inline-block;width:calc(24*var(--px));height:calc(24*var(--px));border-radius:calc(4px*var(--rf));margin-right:calc(8*var(--px));vertical-align:-3px;background:var(--chip)}
#aboutLink{flex:none;width:calc(260*var(--px));height:calc(64*var(--px));background:var(--chip);border-radius:calc(12*var(--px)*var(--rf));color:var(--ink);text-decoration:none;font-size:calc(28*var(--px));display:flex;align-items:center;justify-content:center;white-space:nowrap}

/* ── 關卡畫面與關於 ──（題目畫面＝十字形：W 上、A 左、D 右、S 下，題目在正中央）*/
#quiz,#about{position:absolute;left:calc(24*var(--px));top:calc(120*var(--px));right:calc(24*var(--px));bottom:calc(24*var(--px));background:var(--panel);border-radius:calc(16*var(--px)*var(--rf));padding:calc(32*var(--px));overflow:auto;z-index:5}
#quiz{display:flex;flex-direction:column}
.qbar{display:flex;gap:calc(24*var(--px));align-items:center;font-size:calc(34*var(--px));margin-bottom:calc(16*var(--px))}
.qbar span,.qbar button{white-space:nowrap}.qbar .sp{flex:1}.qbar button,.qbtn{height:calc(80*var(--px));min-height:44px;padding:0 calc(36*var(--px));border-radius:calc(14*var(--px)*var(--rf));background:var(--card);font-size:calc(34*var(--px))}
.qbtn.gold{background:var(--gold);color:var(--on-accent);font-weight:700}
.prog{height:calc(12*var(--px));background:var(--well);border-radius:calc(6px*var(--rf));margin-bottom:calc(16*var(--px));overflow:hidden;flex:none}.prog i{display:block;height:100%;background:var(--gold);width:0;transition:width .25s}
.qask{text-align:center;color:var(--sub);font-size:calc(44*var(--px));margin-bottom:calc(12*var(--px))}
.cross{flex:1;min-height:0;display:grid;grid-template-columns:1fr 2.4fr 1fr;grid-template-rows:1fr 2fr 1fr;gap:calc(24*var(--px));
  grid-template-areas:". w ." "a p d" ". s ."}
.qprompt{grid-area:p;--mx:240;--w:1260;font-size:calc(min(var(--mx),var(--w)/var(--n,1))*var(--px));line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;min-width:0}
.qprompt.zh{--mx:200;font-family:var(--font-gloss)}
.k-w{grid-area:w}.k-a{grid-area:a}.k-d{grid-area:d}.k-s{grid-area:s}
.qopt{position:relative;min-width:0;border-radius:calc(20*var(--px)*var(--rf));background:var(--card);font-size:calc(56*var(--px));padding:calc(12*var(--px));display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.qopt.zhopt{font-size:calc(50*var(--px))}
.qopt.big{font-size:calc(120*var(--px))}.qopt.zhopt.big{font-size:calc(96*var(--px))}   /* 短選項（≤3 字）放大 */
.cap{position:absolute;left:calc(14*var(--px));top:calc(14*var(--px));width:calc(64*var(--px));height:calc(64*var(--px));border-radius:calc(14*var(--px)*var(--rf));background:var(--chip);color:var(--gold);font:700 calc(38*var(--px))/calc(64*var(--px)) system-ui,sans-serif;text-align:center;box-shadow:0 calc(5*var(--px)) 0 var(--well)}
.qopt:disabled{opacity:.18;cursor:default}
.qopt.right{background:var(--gold);color:var(--on-accent)}.qopt.right .cap{background:var(--on-accent)}
.qopt.shake{animation:sh .25s}
@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.qmsg{flex:none;text-align:center;height:calc(72*var(--px));margin-top:calc(12*var(--px));font-size:calc(46*var(--px));line-height:calc(72*var(--px))}
.qdone{text-align:center;padding-top:calc(160*var(--px));font-size:calc(64*var(--px))}
.qdone p{margin:calc(24*var(--px)) 0 calc(56*var(--px))}
.qdone .qbtn{margin:0 calc(12*var(--px))}
#about h2{margin:0 0 calc(16*var(--px));font-size:calc(60*var(--px));color:var(--gold);font-family:var(--font-display);font-weight:900}
#about p,#about li{font-size:calc(32*var(--px));line-height:1.6}
#about a{color:var(--ok)}
#about ul{padding-left:calc(32*var(--px))}

/* ── 皮膚圖示與裝飾層（skin 提供圖示才會出現）── */
.ic{display:block;flex:none;width:1em;height:1em}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.logo{width:calc(56*var(--px));height:calc(56*var(--px))}
.rart{flex:1;min-height:0;margin:calc(10*var(--px)) 0}.rart .ic{width:100%;height:100%}
.ficon{position:absolute;left:calc(48*var(--px));bottom:calc(24*var(--px));width:calc(64*var(--px));height:calc(64*var(--px))}
.flabel .cursor:has(.ic){background:none;border-radius:0}.cursor .ic{width:100%;height:100%}
.ghost{flex-direction:column;gap:calc(8*var(--px))}.ghost .ic{width:90%;height:auto;aspect-ratio:2.4/1}
.door h3{display:flex;align-items:center}.dic{width:1.05em;height:1.05em;margin-right:calc(10*var(--px))}
.sti{display:inline-block;width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.15em}
.st-mastered{color:var(--s-mastered)}.st-learning{color:var(--s-learning)}.st-weak{color:var(--s-weak)}.st-none,.st-locked{color:var(--sub)}
.fox{display:inline-block;width:calc(60*var(--px));height:calc(60*var(--px));vertical-align:middle;margin-right:calc(12*var(--px))}
.fox.big{display:block;width:calc(220*var(--px));height:calc(220*var(--px));margin:0 auto calc(16*var(--px))}

/* ── 手機（390×844 直式；safe-area 上 12／下 28）── */
@media (max-width:700px){
  :root{--px:1px}
  #top{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));height:48px}
  #title{width:auto;right:150px;font-size:18px;line-height:48px;padding:0 12px;border-radius:calc(10px*var(--rf))}
  #furi{top:0;right:56px;width:84px;height:48px;border-radius:calc(24px*var(--rf));font-size:14px;padding:0}
  #sound{top:0;right:0;width:48px;height:48px;border-radius:calc(24px*var(--rf));font-size:14px;padding:0}
  #map{left:12px;right:12px;top:calc(68px + env(safe-area-inset-top));width:auto;height:372px;padding:8px;border-radius:calc(12px*var(--rf))}
  .floor{height:172px;margin-bottom:8px;grid-template-columns:44px repeat(3,minmax(0,1fr));column-gap:8px;padding-right:8px;border-radius:calc(8px*var(--rf))}
  .flabel{border-radius:calc(8px*var(--rf));font-size:14px;padding:0}.flabel span{left:4px;top:8px;writing-mode:vertical-rl}
  .flabel .cursor{left:12px;width:20px;height:20px;margin-top:-10px}
  .room,.ghost{height:124px;padding:6px;border-radius:calc(10px*var(--rf))}
  .room.sel{box-shadow:0 0 0 3px var(--gold)}
  .room.next::after{display:none}
  .rname{font-size:16px}.rname small{font-size:14px}.rpre{display:none}
  .bars{height:10px;gap:4px}.bar{border-radius:calc(3px*var(--rf))}
  .ghost{font-size:14px;border-width:2px}
  #links line{stroke-width:5px}
  #side{left:12px;right:12px;top:calc(452px + env(safe-area-inset-top));width:auto;height:auto;padding:0;background:none;gap:12px;border-radius:0}
  #roomT{height:72px;border-radius:calc(10px*var(--rf));font-size:24px;padding:0 12px;background:var(--panel)}
  #roomT small{font-size:14px}
  #doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .door{height:152px;padding:16px 8px 8px;flex-direction:column;align-items:stretch;justify-content:space-between;border-radius:calc(12px*var(--rf))}
  .door .st{width:auto;right:0;bottom:auto;height:8px}
  .dsub,.rec{display:none}
  .door h3{font-size:16px;margin:0 0 4px}.door p{font-size:14px;line-height:1.25}
  .go{width:100%;height:48px;font-size:16px;border-radius:calc(10px*var(--rf))}
  #rule{display:none}
  #doors{display:grid}
  #dock{left:12px;right:12px;top:calc(700px + env(safe-area-inset-top));width:auto;height:56px;padding:0;background:none;gap:8px;border-radius:0}
  #campaign{width:104px;height:56px;font-size:20px;border-radius:calc(10px*var(--rf))}
  #legend{height:56px;font-size:14px;gap:6px;padding:0 8px;flex-wrap:wrap;white-space:normal;align-content:center;line-height:1.35}
  #legend i{width:12px;height:12px;margin-right:3px;vertical-align:-1px}
  #aboutLink{position:absolute;right:0;top:72px;width:138px;height:44px;font-size:14px;border-radius:calc(8px*var(--rf))}
  .cap{display:none}
  #quiz,#about{left:12px;right:12px;top:calc(68px + env(safe-area-inset-top));bottom:calc(28px + env(safe-area-inset-bottom));padding:16px;border-radius:calc(12px*var(--rf))}
  .qbar .mid{display:none}.qbar{gap:12px;font-size:15px;margin-bottom:12px}.qbar button,.qbtn{height:44px;padding:0 16px;font-size:16px;border-radius:calc(10px*var(--rf))}
  .prog{height:8px;margin-bottom:12px}
  .qask{font-size:18px}
  .cross{grid-template-columns:1fr 1fr;grid-template-rows:minmax(150px,1fr) 1fr 1fr;gap:12px;grid-template-areas:"p p" "w a" "d s"}
  .qprompt{--mx:84;--w:300;font-size:calc(min(var(--mx),var(--w)/var(--n,1))*1px)}.qprompt.zh{--mx:44}
  .qopt{font-size:26px;border-radius:calc(12px*var(--rf));min-height:84px}.qopt.zhopt{font-size:20px}.qopt.big{font-size:42px}.qopt.zhopt.big{font-size:30px}
  .qmsg{font-size:20px;height:36px;line-height:36px;margin-top:8px}
  .qdone{padding-top:40px;font-size:24px}.qdone p{margin:12px 0 24px}
  #about h2{font-size:26px}#about p,#about li{font-size:15px;line-height:1.6}
  .logo{width:32px;height:32px}.ficon{left:8px;bottom:8px;width:28px;height:28px}.rart{margin:4px 0}.fox{width:40px;height:40px}.fox.big{width:120px;height:120px}
}