:root{
  --night:#0e1720; --text:#f1ead6; --muted:#a9b6b0;
  --veil:rgba(10,16,22,.78); --veil-solid:#0b1016; --panel:#16212a; --panel-line:#3b4a4a;
  --fu:#ecd27a; --fu-ink:#3a1a10; --cinnabar:#c8402f; --jade:#4fbf95; --gold:#e3b850;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --veil:rgba(236,226,200,.86); --veil-solid:#ece2c8; --panel:#f3ead2; --panel-line:#b9a77a;
    --text:#2a1d14; --muted:#6b5a45; color-scheme: light;
  }
}
:root[data-theme="light"]{--veil:rgba(236,226,200,.86);--veil-solid:#ece2c8;--panel:#f3ead2;--panel-line:#b9a77a;--text:#2a1d14;--muted:#6b5a45;color-scheme:light}
:root[data-theme="dark"]{--veil:rgba(10,16,22,.78);--veil-solid:#0b1016;--panel:#16212a;--panel-line:#3b4a4a;--text:#f1ead6;--muted:#a9b6b0;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--night);
  font-family:"DotGothic16","Noto Sans TC","PingFang TC","Microsoft JhengHei",monospace;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas#game{position:fixed;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;display:block}

#hud{position:fixed;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 0;pointer-events:none;color:#f1ead6;
  text-shadow:2px 2px 0 #000;font-size:15px}
.xp{height:10px;background:#1a1410;border:2px solid #000;box-shadow:inset 0 0 0 1px #5a4a2a}
.xp i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--jade) 0 6px,#7fe0bb 6px 8px)}
.row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:6px}
.who{display:flex;flex-wrap:wrap;column-gap:10px;min-width:0;white-space:nowrap}
.acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
#hud.off,#stBtn.off{display:none}
#realm{color:var(--gold)}
#floor{color:#c9a6ff}
#time{font-size:20px}
#pauseBtn,#bagBtn{pointer-events:auto;font:inherit;color:#f1ead6;background:#000a;border:2px solid #f1ead6;min-width:44px;min-height:44px;cursor:pointer}
#pauseBtn:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#skills{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
#skills span{display:inline-flex;align-items:center;gap:4px;background:#000a;border:1px solid #f1ead655;padding:2px 6px;font-size:13px}
#skills span b{font-weight:normal;color:var(--gold)}
#skills span i{display:block;width:26px;height:4px;background:linear-gradient(90deg,var(--jade) calc(var(--p)*100%),#ffffff26 0)}
#skills span.ready{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
#skills span.ready i{background:var(--gold)}
.hp{position:relative;width:min(240px,48vw);height:12px;margin-top:6px;background:#3a1414;border:2px solid #000}
.hp i{display:block;height:100%;width:100%;background:#d9483b}
.hp span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1}

#banner{position:fixed;left:0;right:0;top:32%;text-align:center;font-size:clamp(28px,7vw,56px);color:var(--gold);
  text-shadow:3px 3px 0 var(--cinnabar),6px 6px 0 #000;pointer-events:none;opacity:0}
#banner.go{animation:ban 2.2s steps(12) forwards}
@keyframes ban{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}

.ov{position:fixed;inset:0;display:none;align-items:center;justify-content:flex-start;flex-direction:column;
  background:var(--veil);color:var(--text);padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;overflow-y:auto}
.ov.show{display:flex}
.ov>:first-child{margin-top:auto}.ov>:last-child{margin-bottom:auto}   /* 內容比畫面高時從頂端開始，不會被切掉 */
h3.pick{margin:14px 0 6px;font-size:16px;font-weight:normal;color:var(--gold);letter-spacing:.1em}
h3.pick small{font-size:12px;letter-spacing:0}
.gobar{position:sticky;bottom:calc(-1 * (env(safe-area-inset-bottom,0px) + 20px));z-index:2;align-self:stretch;margin-inline:-20px;
  padding:28px 20px calc(env(safe-area-inset-bottom,0px) + 20px);background:linear-gradient(transparent,var(--veil-solid) 40%)}
.btn.go{margin-top:0;font-size:22px;padding:12px 40px}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--panel-line)}
.on-touch{display:none}
@media (pointer:coarse){.on-touch{display:inline}.on-key{display:none}#stBtn .kbd{display:none}}
@media (max-width:600px){.title{font-size:clamp(48px,14vw,72px)}.ov p{font-size:15px}}
.title{font-size:clamp(56px,16vw,120px);line-height:1;margin:0;color:var(--gold);
  text-shadow:4px 4px 0 var(--cinnabar),8px 8px 0 #000;letter-spacing:.06em}
.ov p{max-width:30em;line-height:1.7;margin:.6em 0;font-size:16px}
.muted{color:var(--muted)}
.btn{font:inherit;font-size:20px;margin-top:18px;padding:10px 28px;color:var(--fu-ink);background:var(--fu);
  border:3px solid var(--cinnabar);box-shadow:4px 4px 0 #000;cursor:pointer}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
h2{font-size:clamp(30px,7vw,48px);margin:0 0 6px;color:var(--gold);text-shadow:3px 3px 0 #000;font-weight:normal}

#cards,#rcards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.card{width:170px;min-height:250px;padding:12px 10px;background:var(--fu);color:var(--fu-ink);font:inherit;cursor:pointer;
  border:3px solid var(--cinnabar);outline:3px solid var(--fu);box-shadow:6px 6px 0 #000;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative}
.card:hover{transform:translateY(-4px)}
.card.hot{outline-color:var(--gold);box-shadow:0 0 0 3px var(--gold),6px 6px 0 #000}
.card .seal{width:64px;height:64px;display:grid;place-items:center;font-size:40px;color:var(--fu);background:var(--cinnabar);border:3px double var(--fu)}
.card .nm{font-size:20px}
.card .lv{font-size:14px;color:var(--cinnabar)}
.card .ds{font-size:14px;line-height:1.5}
.card .key{position:absolute;top:4px;left:6px;font-size:12px;opacity:.6}
@media (max-width:600px){
  #cards,#rcards{gap:10px}
  .card{width:100%;max-width:360px;min-height:0;flex-direction:row;text-align:left;align-items:center}
  .card .seal{flex:none;width:52px;height:52px;font-size:30px}
  .card .key{display:none}
}
.stats{font-size:18px;line-height:1.9}
.lgroll{display:flex;flex-direction:column;gap:2px;margin:10px 0;padding:10px 22px;border:2px solid var(--panel-line);background:var(--panel)}
.lgroll b{font-weight:normal;font-size:22px;color:var(--gold)}

#grid{--cell:min(64px,calc((100vw - 64px)/var(--cols,5)));display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));
  gap:3px;padding:6px;margin:10px auto;background:rgba(0,0,0,.45);border:3px solid var(--panel-line)}
.cell{padding:0;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18);cursor:pointer}
.bi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;font:inherit;cursor:pointer;z-index:1;
  border:3px solid #000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.bi b{font-weight:normal;font-size:calc(var(--cell) * .42);line-height:1}
.bi small{font-size:12px}
/* 兵器品級：凡、法、靈、寶、道、神 */
.t0{background:#cfc6ae;color:#2a1d14}.t1{background:#8fc4ff;color:#0e2240}.t2{background:#4fbf95;color:#0e2a1f}
.t3{background:#c9a6ff;color:#2a1440}.t4{background:#ff9a5a;color:#3a1408}.t5{background:#ffd36b;color:#3a1a10;box-shadow:inset 0 0 0 2px #fff8,0 0 10px #ffd36b}
.pv{z-index:2;pointer-events:none;border:3px solid}
.pv.ok{background:rgba(79,191,149,.35);border-color:#7fe0bb}
.pv.bad{background:rgba(200,64,47,.35);border-color:var(--cinnabar)}
.bi[aria-hidden]{cursor:pointer}
.mini{display:inline-grid;grid-template-columns:repeat(var(--w),8px);gap:1px;vertical-align:middle;margin-right:4px}
.mini i{width:8px;height:8px}.mini i.on{outline:1px solid #0006}
.mini[data-t="0"] i.on{background:#cfc6ae}.mini[data-t="1"] i.on{background:#8fc4ff}.mini[data-t="2"] i.on{background:#4fbf95}
.mini[data-t="3"] i.on{background:#c9a6ff}.mini[data-t="4"] i.on{background:#ff9a5a}.mini[data-t="5"] i.on{background:#ffd36b}
#hand{display:flex;gap:12px;align-items:center;justify-content:center;min-height:72px;text-align:left;line-height:1.5}
#hand .bi{--cell:56px;width:56px;height:56px;flex:none;cursor:default}
.bagbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn.sm{font-size:16px;padding:6px 16px;margin-top:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.skins{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.skin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;font:inherit;font-size:13px;color:var(--text);
  background:var(--panel);border:2px solid var(--panel-line);cursor:pointer}
.skin canvas{width:36px;height:60px;image-rendering:pixelated;image-rendering:crisp-edges}
.skin[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
#stBtn{position:fixed;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:64px;height:64px;
  border-radius:50%;font:inherit;color:var(--fu-ink);background:var(--fu);border:3px solid var(--cinnabar);box-shadow:4px 4px 0 #000;cursor:pointer;display:grid;place-items:center}
#stBtn{background:conic-gradient(#0009 calc(var(--p,0)*360deg),transparent 0),var(--fu)}
#stBtn b{font-size:28px;font-weight:normal;grid-area:1/1}
#stBtn .kbd{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:11px;color:#f1ead6;text-shadow:1px 1px 0 #000;white-space:nowrap}
#stBtn span{grid-area:1/1;font-size:22px;color:#fff;text-shadow:2px 2px 0 #000}
#stBtn.cool{filter:grayscale(.8) brightness(.6)}
#stBtn.off{display:none}
.st{width:88px}
.st b{font-weight:normal;font-size:22px;color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  #banner.go{animation:banfade 2.2s forwards}
  @keyframes banfade{0%,100%{opacity:0}10%,80%{opacity:1}}
  .card:hover{transform:none}
}
#planner{padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 8px);gap:8px;z-index:20;background:var(--veil-solid)}
#planner>:first-child,#planner>:last-child{margin:0}
.planbar{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:12px}
.planbar b{font-weight:normal;font-size:20px;color:var(--gold)}
.planbar .btn{margin-top:0}
#planFrame{flex:1;align-self:stretch;width:100%;border:2px solid var(--panel-line);background:#fff}
#planBtn{font-size:16px;padding:6px 20px}
.title span{display:inline-block}
.lgroll.crack{animation:crack .5s steps(6)}
@keyframes crack{0%,100%{transform:none}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,1px)}}
.zzhint{font-size:12px;color:var(--gold);opacity:.8}
#zz{display:flex;flex-direction:column;align-items:center}#zz[hidden]{display:none}
.zzrow{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:15px}
.zzrow select{font:inherit;font-size:14px;padding:4px 6px;background:var(--panel);color:var(--text);border:2px solid var(--gold)}
.zznote{font-size:13px}
.linkbtn{font:inherit;font-size:13px;background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;padding:4px}
.digits{display:flex;gap:10px;margin:14px 0}
.digits i{width:48px;height:56px;display:grid;place-items:center;font-style:normal;font-size:24px;color:var(--gold);background:var(--panel);border:3px solid var(--panel-line)}
.digits.bad{animation:crack .4s steps(6)}
.digits.bad i{border-color:var(--cinnabar)}
.pad{display:grid;grid-template-columns:repeat(3,64px);gap:10px}
.pad button{font:inherit;font-size:22px;height:56px;color:var(--fu-ink);background:var(--fu);border:3px solid var(--cinnabar);box-shadow:3px 3px 0 #000;cursor:pointer}
.pad button[data-k="0"]{grid-column:2}
.pad button[data-k="del"]{grid-column:3;grid-row:4}
@media (prefers-reduced-motion:reduce){.lgroll.crack,.digits.bad{animation:none}}