/* 名字バトル — 見た目。色はすべて :root のトークンで定義し、ダークモードは2つのブロックで上書きする
   場(canvas)の色も app.js がここから読む */
:root{
  --bg:#EFE8DA; --surface:#FAF6EC; --sunk:#E3D9C6; --ink:#2A231D; --muted:#6C6156; --line:#D2C5AE;
  --accent:#B3332A; --accent-soft:#F3D9D2; --on-accent:#FFFFFF; --good:#2F7A45; --bad:#B3332A;
  --mat:#D9C49B; --mat-line:#B79C6C; --card-me:#FFF9EC; --card-cpu:#DCE6EC; --card-ink:#231D18;
  --card-back:#7C2F27; --card-back-line:#A8493E; --shadow:rgba(40,25,10,.28); --aim:#2A231D;
  --e-wood:#3E7D3A; --e-fire:#C9412F; --e-earth:#A2741F; --e-metal:#6F7C86; --e-water:#2C67A0; --e-none:#8C8174;
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16130F; --surface:#211C17; --sunk:#2C2620; --ink:#EEE6D8; --muted:#A99D8E; --line:#3B342C;
  --accent:#E8695D; --accent-soft:#45211C; --on-accent:#1C0D0A; --good:#6DBB82; --bad:#E8695D;
  --mat:#3B3125; --mat-line:#5C4B35; --card-me:#EFE5D0; --card-cpu:#C3CFD8; --card-ink:#231D18;
  --card-back:#8E3A31; --card-back-line:#B85A4E; --shadow:rgba(0,0,0,.5); --aim:#EEE6D8;
  --e-wood:#5AA654; --e-fire:#E0533F; --e-earth:#C08A2B; --e-metal:#8C99A3; --e-water:#4A8BCB; --e-none:#9C9284;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16130F; --surface:#211C17; --sunk:#2C2620; --ink:#EEE6D8; --muted:#A99D8E; --line:#3B342C;
  --accent:#E8695D; --accent-soft:#45211C; --on-accent:#1C0D0A; --good:#6DBB82; --bad:#E8695D;
  --mat:#3B3125; --mat-line:#5C4B35; --card-me:#EFE5D0; --card-cpu:#C3CFD8; --card-ink:#231D18;
  --card-back:#8E3A31; --card-back-line:#B85A4E; --shadow:rgba(0,0,0,.5); --aim:#EEE6D8;
  --e-wood:#5AA654; --e-fire:#E0533F; --e-earth:#C08A2B; --e-metal:#8C99A3; --e-water:#4A8BCB; --e-none:#9C9284;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

.screen{max-width:560px;margin:0 auto;min-height:100dvh;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* ===== はじめ ===== */
.brand h1{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,11vw,52px);line-height:1.1;margin:8px 0 0;letter-spacing:.06em}
.brand p{margin:6px 0 22px;color:var(--muted)}
.label{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 8px;letter-spacing:.08em}
.prefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pref{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pref b{font-family:var(--f-display);font-size:19px}
.pref span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pref:active{background:var(--sunk)}
.rules{margin-top:22px;border-top:1px solid var(--line);padding-top:10px}
.rules summary{font-weight:700;cursor:pointer}
.rules ul{padding-left:1.2em;margin:8px 0;font-size:14px}
.rules li{margin:4px 0}
.fine{font-size:12px;color:var(--muted);margin-top:18px}

/* ===== 引いた札 ===== */
.sub h2{font-family:var(--f-display);font-size:24px;margin:6px 0 2px}
.note{margin:0 0 12px;font-size:13px;color:var(--muted)}
.link{border:0;background:none;padding:4px 0;color:var(--muted);font-size:14px}
.hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:130px}
.tile{--e:var(--e-none);position:relative;text-align:left;border:1px solid var(--line);border-top:5px solid var(--e);
  background:var(--surface);border-radius:12px;padding:10px 12px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tile[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:-1px;background:var(--accent-soft)}
.tile.e-wood{--e:var(--e-wood)} .tile.e-fire{--e:var(--e-fire)} .tile.e-earth{--e:var(--e-earth)}
.tile.e-metal{--e:var(--e-metal)} .tile.e-water{--e:var(--e-water)}
.tel{position:absolute;top:8px;right:10px;font-size:12px;font-weight:700;color:var(--e);border:1.5px solid var(--e);border-radius:999px;padding:0 7px}
.tname{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.2;margin-top:4px}
.tread{font-size:12px;color:var(--muted);margin-bottom:4px}
.trow{display:grid;grid-template-columns:3.2em 1fr 2em;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.trow i{height:6px;border-radius:3px;background:var(--sunk);position:relative;overflow:hidden}
.trow i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--ink);border-radius:3px}
.trow b{font-family:var(--f-num);font-weight:500;color:var(--ink);text-align:right}
.trow em{font-style:normal;color:var(--ink);grid-column:2 / 4}
.tfoot{display:flex;justify-content:space-between;gap:6px;margin-top:6px;font-size:12px;color:var(--muted)}
.tcost{color:var(--accent);letter-spacing:-.5px}
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:10px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.dock>*{max-width:528px;margin-inline:auto}
.cost{margin:0 auto 8px;font-size:14px}
.cost .over{color:var(--bad)}
.row{display:flex;gap:8px}
.row .btn{flex:1}
.col{display:flex;flex-direction:column;gap:8px}
.btn{border:1px solid var(--line);background:var(--surface);padding:12px 16px;border-radius:10px;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.45}

/* ===== 対戦 ===== */
#battle{height:100dvh;min-height:0;display:flex;flex-direction:column;gap:6px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;min-height:24px}
.hud .dots{color:var(--accent);letter-spacing:1px}
.hud .turn{font-weight:700}
.hud .turn::before{content:"▶ ";color:var(--accent)}
.round{color:var(--muted);font-size:13px}
.field{flex:1;min-height:0;display:grid;place-items:center}
#cv{display:block;touch-action:none;border-radius:14px;user-select:none;-webkit-user-select:none}
.gauge{width:42%;height:10px;border-radius:5px;background:var(--sunk);overflow:hidden;position:relative}
.gauge::after{content:"";position:absolute;inset:0 0 0 90%;border-left:2px solid var(--accent);opacity:.7}
.gauge i{display:block;height:100%;width:0;background:var(--ink)}
.gauge.peak i{background:var(--accent)}
.log{margin:0;font-size:14px;font-weight:700;min-height:1.6em}
.msg{margin:0;font-size:13px;color:var(--muted);min-height:3.2em}

/* ===== 結果 ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.overlay .card{background:var(--surface);border-radius:16px;padding:22px 20px;width:min(100%,360px);text-align:center}
.overlay h2{font-family:var(--f-display);font-size:34px;margin:0}
.overlay p{color:var(--muted);margin:6px 0 18px}