/* 最小限の骨組みだけ。装飾は入れていない。
   色は難易度の色分け（ルール上必要）の3色のみ。ほかは白黒グレー。
   明暗はここのトークンだけを入れ替える。data-theme が付いていなければ端末の設定に従う。 */
:root{
  --bg:#fff;
  --ink:#111;
  --dim:#777;
  --line:#ddd;
  --sub:#f5f5f5;
  --on-ink:#fff;      /* ink を背景にしたときの文字 */
  --on-dim:#bbb;
  --veil:rgba(0,0,0,.3);
  --lv1:#2f7d5d;
  --lv2:#9a7b12;
  --lv3:#b3402f;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111417;
    --ink:#e8ebee;
    --dim:#8b95a1;
    --line:#333a42;
    --sub:#1a1e23;
    --on-ink:#111417;
    --on-dim:#5a636d;
    --veil:rgba(0,0,0,.6);
    --lv1:#5cbd98;
    --lv2:#cfab4c;
    --lv3:#e0715c;
  }
}
:root[data-theme="dark"]{
  --bg:#111417;
  --ink:#e8ebee;
  --dim:#8b95a1;
  --line:#333a42;
  --sub:#1a1e23;
  --on-ink:#111417;
  --on-dim:#5a636d;
  --veil:rgba(0,0,0,.6);
  --lv1:#5cbd98;
  --lv2:#cfab4c;
  --lv3:#e0715c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:system-ui,sans-serif;font-size:16px;line-height:1.4;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
[hidden]{display:none!important}

#stage{display:flex;flex-direction:column;height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ---------- HUD ---------- */
.hud{display:flex;align-items:center;gap:8px;padding:6px 10px;flex:none;border-bottom:1px solid var(--line)}
.hud.me{border-bottom:0;border-top:1px solid var(--line)}
.who{flex:1;min-width:0}
.nm{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--dim)}
.cards{font-variant-numeric:tabular-nums}
.hpbar{height:4px;background:var(--sub);margin-top:3px}
.hpbar i{display:block;height:100%;width:100%;background:var(--ink)}
.hpnum{font-size:22px;font-variant-numeric:tabular-nums;min-width:2.1em;text-align:right}
button.icon{border:1px solid var(--line);width:36px;height:36px;font-size:19px;line-height:1;flex:none;cursor:pointer}

/* ---------- 戦場 ---------- */
.field{position:relative;flex:1 1 auto;min-height:140px;overflow:hidden}
.field::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
.fieldnote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--dim);font-size:14px;text-align:center;pointer-events:none;padding:0 20px;z-index:1}

/* 砲弾。自分は枠だけ、相手は塗り。色は使わない */
.shot{position:absolute;transform:translate(-50%,-50%);z-index:2;
  min-width:66px;max-width:150px;padding:6px 9px;border:1px solid var(--ink);
  font-size:15px;text-align:center;cursor:pointer;background:var(--bg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot.foe{background:var(--ink);color:var(--on-ink)}
.shot .pw{display:block;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
/* 自分の砲弾に出るのは答えなので、読める大きさにする */
.shot.mine .pw{font-size:13px;color:var(--ink);font-variant-numeric:normal}
.shot.foe .pw{color:var(--on-dim)}
.shot.aim{outline:2px solid var(--ink);outline-offset:2px}

.boom{position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;animation:boom .4s ease-out forwards}
@keyframes boom{from{transform:translate(-50%,-50%) scale(.3);opacity:1}
  to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
/* 重なった1枚が出射位置まで移動し、そこから砲弾になって飛び出す */
.merged{position:fixed;z-index:70;pointer-events:none;white-space:nowrap;
  border:2px solid var(--ink);background:var(--bg);padding:6px 11px;font-size:14px;
  animation:merged .5s cubic-bezier(.4,0,.2,1) .18s both}
@keyframes merged{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  60%{opacity:1;transform:translate(calc(-50% + var(--tx) * .62),calc(-50% + var(--ty) * .62)) scale(.94)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.55)}}
/* 移動が終わるまで砲弾は出さない */
.shot.hold{opacity:0}
.shot.fresh{animation:shotin .28s ease-out}
@keyframes shotin{from{transform:translate(-50%,-50%) scale(.5);opacity:.25}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}}

.float{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;
  font-size:13px;font-weight:600;animation:rise .9s ease-out forwards}
@keyframes rise{from{opacity:1}to{opacity:0;transform:translate(-50%,-170%)}}
/* 被弾した場所に、防げなかった単語の正解をしばらく残す */
.answer{position:absolute;transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  border:1px solid var(--ink);background:var(--bg);padding:6px 10px;font-size:14px;white-space:nowrap;
  animation:hold 3s ease-out forwards}
@keyframes hold{0%,78%{opacity:1}100%{opacity:0}}

/* テストプレイの案内 */
/* 盤面を隠しすぎないよう左半分に寄せる。飛んでくる砲弾は右寄りに出す */
.tutor{position:absolute;left:6px;top:6px;z-index:8;
  width:56%;max-width:340px;min-width:168px;
  border:1px solid var(--ink);background:var(--bg);padding:11px 13px;font-size:14px;line-height:1.5}
.tutor .n{display:block;font-size:11.5px;color:var(--dim);margin-bottom:4px}
.tutor .go{margin-top:10px}
.tutor.shake{animation:shake .34s}
/* テストプレイで「これが砲弾」と指す注記 */
.shot.noted{overflow:visible}
.shotnote{position:absolute;top:50%;left:calc(100% + 6px);transform:translateY(-50%);
  white-space:nowrap;font-size:12.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--ink);padding:3px 7px}
.shotnote.flip{left:auto;right:calc(100% + 6px)}

/* いま押すべき場所 */
.spot{outline:3px solid var(--ink);outline-offset:2px;animation:spot 1.1s ease-in-out infinite}
.card.spot{opacity:1!important}
.rack.spot{outline-offset:4px}
.btn.spot{outline-offset:3px}
@keyframes spot{0%,100%{outline-color:var(--ink)}55%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.spot{animation:none}}

/* ---------- 手札 ---------- */
.tip{flex:none;padding:6px 10px;font-size:13px;color:var(--dim);border-top:1px solid var(--line);min-height:26px}
.hand{flex:none;padding:7px 8px 10px;display:flex;flex-direction:column;gap:6px;max-height:52dvh;overflow-y:auto}
.rack{display:flex;flex-wrap:wrap;gap:4px}

/* 幅と文字の大きさは ui.js の fitCards が1枚ずつ決める。
   ここでは折り返しの作法だけを決めておく */
.card{min-height:44px;padding:7px 10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:15px;line-height:1.25;overflow:hidden;touch-action:none;
  overflow-wrap:break-word;word-break:normal}
/* 収まりの判定は文字そのものの箱で行うので、中身を1枚かませる */
.card .t{display:block;width:100%;overflow:hidden}
.hand[data-lines="1"] .card .t{white-space:nowrap}
/* 下段（英単語）だけ難易度で色分けする */
.rack.lv .card[data-lv="1"]{border-color:var(--lv1);color:var(--lv1)}
.rack.lv .card[data-lv="2"]{border-color:var(--lv2);color:var(--lv2)}
.rack.lv .card[data-lv="3"]{border-color:var(--lv3);color:var(--lv3)}
.card.sel{outline:2px solid var(--ink);outline-offset:-1px}
/* 次に押すべきでない札は薄くする。押せなくはしない */
.card.dim{opacity:.3}
/* 2枚そろうと互いに寄って重なる */
.card.merge{animation:merge .2s ease-in forwards;pointer-events:none}
@keyframes merge{to{transform:translate(var(--dx),var(--dy)) scale(.9);opacity:0}}
.card.shake{animation:shake .34s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.card.shake{animation:none;outline:2px solid var(--lv3)}}

/* 決着した組の控え。自分の側（下）に薄く積む */
.used{position:absolute;left:6px;right:6px;bottom:4px;z-index:1;pointer-events:none;
  display:flex;flex-wrap:wrap;align-content:flex-end;gap:2px 10px;
  max-height:46%;overflow:hidden;opacity:.34;font-size:12.5px;line-height:1.35}

/* 迎撃。撃たれた札は手元に無いので選択肢から選ぶ */
.choices{position:absolute;left:6px;right:6px;bottom:6px;z-index:6;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:5px}
.choice{border:1px solid var(--ink);background:var(--bg);padding:13px 7px;font-size:15px;
  cursor:pointer;text-align:center;overflow-wrap:break-word}
.choice.shake{animation:shake .34s}

.ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
  padding:6px 10px;border:1px solid var(--ink);background:var(--bg);font-size:15px}

/* ---------- ページ（待機室など。盤面と入れ替わる） ---------- */
.page{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pagehead{padding:12px 14px;border-bottom:1px solid var(--line);flex:none}
.pagehead h1{margin:0;font-size:17px;font-weight:600}
.pagebody{flex:1;overflow-y:auto;padding:14px;max-width:660px;width:100%;margin:0 auto}
.banner{border:1px solid var(--ink);padding:10px 12px;margin-bottom:13px;font-size:14px}

/* ---------- シート ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:var(--veil);display:flex;align-items:flex-end;justify-content:center}
.sheetbox{background:var(--bg);border-top:1px solid var(--line);width:100%;max-width:660px;max-height:92dvh;
  display:flex;flex-direction:column}
.sheethead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.sheethead h2{margin:0;font-size:15px;font-weight:600;flex:1}
.sheetbody{overflow-y:auto;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}

.menu{display:flex;flex-direction:column;gap:6px}
.btn{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);
  padding:10px 12px;cursor:pointer;font-size:14px}
.btn.go{background:var(--ink);color:var(--on-ink);border-color:var(--ink);text-align:center}
.btn.sm{padding:6px 10px;font-size:12.5px;width:auto;display:inline-block}
.btn.danger{color:var(--lv3)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}

h3.sec{font-size:12px;color:var(--dim);margin:15px 0 6px;font-weight:500}
h3.sec:first-child{margin-top:0}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);margin-bottom:10px}
input,select,textarea{border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:7px;font:inherit;font-size:13.5px;width:100%}
textarea{height:190px;resize:vertical;font-size:12.5px;line-height:1.5;font-family:ui-monospace,monospace}
.hint{font-size:11.5px;color:var(--dim);margin:-5px 0 10px}

/* ツリー */
.tree{font-size:13.5px}
.node{display:flex;align-items:center;gap:6px;padding:5px 3px}
.node .tw{width:16px;text-align:center;color:var(--dim);cursor:pointer;flex:none;user-select:none}
.node .nmz{flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .cnt{font-size:11px;color:var(--dim);flex:none}
.node.cur{background:var(--sub)}
.node.cur .nmz{font-weight:600}
.node .act{color:var(--dim);cursor:pointer;padding:0 4px;flex:none;font-size:12px}
.kids{margin-left:14px;border-left:1px solid var(--line);padding-left:5px}

/* 成績 */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--dim);font-size:11.5px;font-weight:500;position:sticky;top:0;background:var(--bg)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--dim);font-size:13px;padding:18px 0;text-align:center}

.big{text-align:center;padding:6px 0 4px}
.big .r{font-size:21px;font-weight:600;margin-bottom:3px}
.big .s{color:var(--dim);font-size:13px}