@font-face {
  font-family: 'Dot';
  src: url('./assets/fonts/DotGothic16-Regular.ttf') format('truetype');
  font-display: block;
}

:root {
  --bg: #0d1220;
  --panel: #151c30;
  --panel2: #1d2640;
  --line: #3a4668;
  --gold: #f2c14e;
  --gold-dim: #a8842f;
  --blue: #3d8bff;
  --red: #ff5148;
  --green: #5fd068;
  --text: #eef1f8;
  --dim: #9aa6c4;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  background: #05070d;
  color: var(--text);
  font-family: 'Dot', 'Hiragino Sans', system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; color: inherit; }
.hidden { display: none !important; }

#app {
  position: relative;
  height: 100%;
  max-width: min(520px, calc(100dvh * 9 / 16));
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- buttons ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #29322f;
  border-radius: 1px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: inset 0 1px #ffffff15, 0 2px #0d1413;
  cursor: pointer;
  min-height: 44px;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0e19; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.primary { border-color: #8fc0ff; background: #3e6571; }
.btn.danger { border-color: #ff9d95; background: #87483e; }
.btn.gold { border-color: #ffe39a; background: #c2ab74; color: #1a1204; }
.btn.big { font-size: 20px; padding: 14px 18px; }
.btn small { display: block; font-size: 11px; opacity: .8; margin-top: 3px; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }
.row.end { margin-top: auto; }
.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel2);
  border-radius: 1px; width: 38px; height: 38px; font-size: 14px; flex: none; cursor: pointer;
}

/* ---------- title ---------- */
#title { justify-content: flex-end; }
.title-art {
  position: absolute; inset: 0;
  background: #1a2b1c url('./assets/art/title.webp') center / cover no-repeat;
  image-rendering: pixelated;
}
.title-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(5,8,16,.85) 75%); }
.logo {
  position: absolute; top: 19%; left: 0; right: 0; text-align: center; padding: 10px 0 14px;
  text-shadow: 0 4px 0 #0b1020, 0 0 18px rgba(0,0,0,.6);
  background: radial-gradient(ellipse at center, rgba(8,12,26,.72), rgba(8,12,26,0) 70%);
}
.logo b { display: block; font-size: 30px; letter-spacing: 8px; color: var(--gold); font-weight: normal; }
.logo span { display: block; font-size: 76px; line-height: .95; letter-spacing: 6px; color: #fff; text-shadow: 3px 0 #1b2a4a, -3px 0 #1b2a4a, 0 3px #1b2a4a, 0 -3px #1b2a4a, 0 7px 0 #0b1020; }
.logo small { display: inline-block; margin-top: 10px; font-size: 14px; padding: 4px 12px; background: rgba(10,14,28,.7); border: 1px solid var(--gold-dim); border-radius: 1px; }
.title-menu { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 22px calc(22px + env(safe-area-inset-bottom)); }
.records { text-align: center; font-size: 12px; color: var(--dim); min-height: 1em; }

/* ---------- select ---------- */
#select { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); gap: 10px; background: #171f20; overflow-y: auto; }
#select h2, #select h3 { margin: 4px 0 0; font-weight: normal; color: var(--gold); font-size: 18px; }
#select h3 { font-size: 15px; }
.hero-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hero-card {
  position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 1px; background: var(--panel);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.hero-card img { width: 90%; image-rendering: pixelated; }
.hero-card.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,193,78,.35); background: #2a2a1c; }
.hero-card.locked img { filter: brightness(0) opacity(.5); }
.hero-card.locked::after { content: '?'; position: absolute; font-size: 22px; color: var(--dim); }
.hero-detail { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 1px; padding: 10px; }
.hero-detail img { width: 96px; height: 96px; image-rendering: pixelated; flex: none; background: radial-gradient(circle, #2c3b63, transparent 70%); }
.hero-detail h4 { margin: 0 0 4px; font-size: 18px; font-weight: normal; }
.hero-detail .stats { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 10px; font-size: 13px; color: var(--dim); }
.hero-detail .stats b { color: var(--text); font-weight: normal; }
.hero-detail .skill { margin-top: 6px; font-size: 13px; }
.hero-detail .skill b { color: var(--gold); font-weight: normal; }
.hero-detail .lock { color: var(--dim); font-size: 13px; }
.dice-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dice-card { border: 1px solid var(--line); background: var(--panel); border-radius: 1px; padding: 8px 4px; text-align: center; font-size: 13px; cursor: pointer; }
.dice-card b { display: block; font-size: 17px; font-weight: normal; margin-top: 2px; letter-spacing: 2px; }
.dice-card.on { border-color: var(--gold); background: #2a2a1c; }
.dice-card.locked { opacity: .45; }

/* ---------- game ---------- */
#game { background: #0a0f1a; }
.top {
  display: flex; align-items: center; gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 8px 4px;
  background: #191f20; border-bottom: 2px solid #26304d;
}
.stage-chip { flex: none; display: flex; flex-direction: column; line-height: 1.05; min-width: 58px; }
.stage-chip b { font-weight: normal; color: var(--gold); font-size: 15px; }
.stage-chip span { font-size: 11px; color: var(--dim); }
.cores { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.core-bar { position: relative; height: 15px; border-radius: 1px; background: #0a0d18; border: 1px solid #333d5c; overflow: hidden; }
.core-bar i { position: absolute; inset: 0; transform-origin: left; transition: transform .25s; }
.core-bar.red i { background: #9f5e4c; }
.core-bar.blue i { background: #628e9e; }
.core-bar span { position: relative; display: block; font-size: 10px; line-height: 14px; padding-left: 5px; text-shadow: 0 1px 0 #000; }
.order { display: flex; gap: 4px; padding: 5px 8px; background: #0f1526; align-items: center; }
.order .o { position: relative; width: 36px; height: 36px; border-radius: 1px; border: 2px solid #444f70; background: #1a2238; flex: none; overflow: hidden; }
.order .o img { width: 100%; height: 100%; image-rendering: pixelated; }
.order .o.blue { border-color: var(--blue); background: #1b2c55; }
.order .o.red { border-color: var(--red); background: #4a1c22; }
.order .o.boss { border-color: #c47cff; }
.order .o:first-child { width: 44px; height: 44px; box-shadow: none; border-color: var(--gold); }
.order .o em { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 9px; text-shadow: 0 1px 0 #000; }
.order .lbl { font-size: 10px; color: var(--dim); writing-mode: vertical-rl; margin-right: 2px; }

.board-wrap { position: relative; flex: 1; min-height: 0; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute; transform: translate(-50%, -50%); font-size: 20px; white-space: nowrap;
  text-shadow: 0 2px 0 #000, 0 0 4px #000; animation: float 0.9s ease-out forwards;
}
.floater.dmg { color: #fff; }
.floater.big { font-size: 28px; color: #ffd84a; }
.floater.heal { color: #7dff8a; }
.floater.gold { color: var(--gold); font-size: 16px; }
.floater.exp { color: #9fd0ff; font-size: 15px; }
.floater.info { color: #fff; font-size: 15px; }
@keyframes float { 0% { opacity: 0; margin-top: 6px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -42px; } }

/* Ivory dice: recessed pips, a raised lip, and a short physical tumble. */
.dice-pop { position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:5;perspective:500px; }
.dice-pop::before { content:'';position:absolute;width:104px;height:22px;left:50%;top:98px;transform:translateX(-50%);border-radius:50%;background:#111a16aa;filter:blur(3px); }
.die { width:96px;height:96px;margin:0 auto;position:relative;transform:rotate(-6deg);border:2px solid #514a35;border-radius:12px;background:#dad1ac;box-shadow:0 7px 0 #998565,0 9px 0 #34382b,0 15px 18px #101a1680;will-change:transform; }
.dice-face { display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:12%;padding:18%;width:100%;height:100%;aspect-ratio:1;border-radius:inherit;background:linear-gradient(145deg,#fffbed 0%,#f1ecd5 55%,#d6c8a0 100%);box-shadow:inset 2px 2px #fffef3,inset -3px -3px #bbaa7a; }
.pip { display:block;aspect-ratio:1;border-radius:35%;background:#294048;box-shadow:inset 1px 2px #111e25,0 1px #fffdf0;opacity:0; }
.pip.on { opacity:1; }
.die::after { content:'';position:absolute;inset:6px;border:1px solid #b1a07166;border-radius:7px;pointer-events:none; }
.die.spin { animation:dice-tumble var(--roll-duration,240ms) linear infinite; }
.die.landed { animation:dice-land .16s ease-out; }
@keyframes dice-tumble { 0%{transform:translateY(-18px) rotate(-28deg) rotateX(20deg) scale(.88)} 40%{transform:translateY(-30px) rotate(10deg) rotateY(-25deg)} 75%{transform:translateY(-9px) rotate(32deg) rotateX(-20deg)} 100%{transform:translateY(-18px) rotate(62deg) scale(.88)} }
@keyframes dice-land { 0%{transform:translateY(-12px) rotate(9deg)} 55%{transform:translateY(2px) rotate(-8deg) scale(1.06,.94)} 100%{transform:rotate(-6deg)} }
.dice-note { margin-top:23px;min-width:150px;white-space:nowrap;color:#f5efd7;text-shadow:0 2px #142019; }
.dice-note b { display:block;background:#18231df2;border:1px solid #a29468;padding:6px 14px;font-size:15px;font-weight:normal; }
.dice-note small { display:block;margin-top:4px;color:#d8cfac;font-size:11px; }
.rival-roll .pip { background:#773e34;box-shadow:inset 1px 2px #452c28,0 1px #fffdf0; }
.dice-faces { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:110px;margin:9px auto 3px;padding-inline:2px; }
.dice-faces .dice-face { border-radius:3px;border:1px solid #928562;box-shadow:0 2px #75664c,inset 1px 1px #fffbec; }
.dice-faces .pip { box-shadow:none; }
@media(prefers-reduced-motion:reduce) { .die.spin,.die.landed { animation:none; } }

.banner {
  position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: 30px; padding: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(8,12,24,.9) 20%, rgba(8,12,24,.9) 80%, transparent);
  text-shadow: 0 3px 0 #000; pointer-events: none; animation: banner 1.4s ease-out forwards;
}
.banner small { display: block; font-size: 14px; color: var(--dim); margin-top: 4px; }
@keyframes banner { 0% { opacity: 0; transform: scaleY(.2); } 12% { opacity: 1; transform: scaleY(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.panel {
  background: #202827; border-top: 2px solid #2d3960;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.me { display: flex; gap: 8px; align-items: center; }
.portrait { width: 52px; height: 52px; border: 2px solid var(--blue); border-radius: 1px; background: #1b2c55; flex: none; }
.portrait img { width: 100%; height: 100%; image-rendering: pixelated; }
.me-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-line { display: flex; gap: 8px; align-items: baseline; font-size: 14px; white-space: nowrap; }
.me-line .lv { color: var(--gold); font-weight: normal; }
.me-line .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.me-line .gold { color: var(--gold); }
.me-line.small { font-size: 11px; color: var(--dim); gap: 10px; }
.bar { position: relative; height: 12px; background: #0a0d18; border: 1px solid #333d5c; border-radius: 1px; overflow: hidden; }
.bar i { position: absolute; inset: 0; transform-origin: left; transition: transform .25s; }
.bar.hp i { background: #83a269; }
.bar.hp span { position: relative; font-size: 9px; line-height: 11px; padding-left: 4px; text-shadow: 0 1px 0 #000; }
.bar.exp { height: 5px; }
.bar.exp i { background: #6fb4ff; }
.hint { height: 36px; overflow: hidden; font-size: 13px; color: #d6dcf0; padding: 5px 2px 3px; line-height: 1.3; }
.hint b { color: var(--gold); font-weight: normal; }
.hint .warn { color: #ff9a8f; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; min-height: 50px; }
.actions .btn { padding: 6px 4px; font-size: 13px; min-height: 50px; }
.actions .btn.wide { grid-column: span 2; font-size: 17px; }
.actions .btn.full { grid-column: 1 / -1; font-size: 17px; }
.actions .btn .n { display: block; font-size: 10px; opacity: .8; }
.forecast { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; gap: 8px; align-items: center; background: rgba(12,17,34,.94); border: 1px solid #36406a; border-radius: 1px; padding: 6px 8px; font-size: 13px; pointer-events: none; }
.forecast.top { bottom: auto; top: 6px; }
.forecast img { width: 40px; height: 40px; image-rendering: pixelated; }
.forecast .f-main { flex: 1; }
.forecast .f-main b { font-weight: normal; color: #ffd84a; font-size: 16px; }
.forecast .kill { color: #ff7b6e; }

/* ---------- modal ---------- */
.modal { position: absolute; inset: 0; background: rgba(4,6,14,.72); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.modal.center { align-items: center; }
.sheet {
  width: 100%; max-height: 92%; overflow-y: auto; background: #242d2b;
  border-top: 1px solid var(--gold-dim); border-radius: 1px; padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  animation: up .2s ease-out;
}
.modal.center .sheet { width: calc(100% - 28px); border: 1px solid var(--gold-dim); border-radius: 1px; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.sheet h2 { margin: 0 0 4px; font-weight: normal; color: var(--gold); font-size: 22px; text-align: center; }
.sheet .sub { text-align: center; color: var(--dim); font-size: 13px; margin-bottom: 12px; }
.sheet p { font-size: 14px; line-height: 1.6; margin: 6px 0; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.card {
  display: flex; gap: 10px; align-items: center; text-align: left; width: 100%;
  border: 1px solid var(--line); background: var(--panel2); border-radius: 1px; padding: 10px; cursor: pointer; font-size: 14px;
}
.card:active { border-color: var(--gold); }
.card img { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.card b { display: block; font-size: 17px; font-weight: normal; color: var(--gold); }
.card span { color: #d6dcf0; }
.card .cost { margin-left: auto; color: var(--gold); white-space: nowrap; }
.card.off { opacity: .45; }
.stats-list { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; margin: 10px 0 14px; }
.stats-list span:nth-child(even) { text-align: right; color: var(--gold); }
.howto li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
.setting { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #2b3556; }

.toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 30;
  background: rgba(10,14,28,.92); border: 1px solid var(--gold-dim); border-radius: 1px; padding: 8px 14px; font-size: 14px;
  pointer-events: none; white-space: nowrap;
}

@media (max-height: 700px) {
  .actions { min-height: 44px; }
  .order .o { width: 30px; height: 30px; }
  .order .o:first-child { width: 36px; height: 36px; }
  .portrait { width: 44px; height: 44px; }
  .actions .btn { min-height: 44px; }
  .hint { height: 32px; font-size: 12px; }
}

/* Tactical edition: restrained brass, readable objectives, desktop command panel. */
:root { --gold:#f3d18b; --gold-dim:#9c814d; --panel:#131e2a; --panel2:#1c2b3b; --line:#3b4d61; --dim:#b1bdca; }
body { background:#101615; }
#app { box-shadow:0 0 90px #0008; border-inline:1px solid #8d764b44; }
button:focus-visible,canvas:focus-visible { outline:3px solid #ffdc83; outline-offset:-3px; }
.btn,.card,.hero-card,.difficulty-card { transition: border-color .15s,background .15s; }
.btn:hover:not(:disabled),.card:hover { border-color:var(--gold); }
.objective { display:flex;justify-content:space-between;gap:8px;padding:6px 10px;font-size:11px;color:#e3cea6;background:#19212b;border-block:1px solid #9c814d55; }
.objective b { color:#8dd9ff; }
.skill-status { display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center;font-size:12px;padding:6px 0;color:var(--gold); }
.skill-status span { margin-left:auto;color:#93dfc0; }
.skill-status small { width:100%;color:var(--dim);font-size:10px; }
.build-strip { display:flex;gap:3px;overflow-x:auto; }
.build-strip:empty { display:none; }
.build-strip img { width:25px;height:25px;border:1px solid #746341; background:#19212b;image-rendering:pixelated; }
.battle-log { display:none; }
.difficulty-list { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.difficulty-card { cursor:pointer;background:#142332;border:1px solid var(--line);border-radius: 1px;padding:10px 5px; }
.difficulty-card.on { border-color:var(--gold);background:#353225; }
.difficulty-card b { display:block;font-weight:normal;color:var(--gold); }
.difficulty-card small { display:block;color:var(--dim);font-size:10px;line-height:1.5;margin-top:6px; }
.forecast { box-shadow:0 8px 35px #0009;border-color:var(--gold-dim); }
.forecast small { color:var(--dim);font-size:11px; }
.toast { max-width:94%;white-space:normal;text-align:center; }
.sheet { max-width:640px; }
@media(max-height:740px) {
 .skill-status small { display:none; }.skill-status { padding:3px 0; }.build-strip img { width:20px;height:20px; }
 .objective { font-size:10px;padding:4px 8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; } }
.strategy-notes { display:none; }

/* Field manual: one-pixel rules, material colors, emphasis reserved for commands. */
:root { --bg:#171f20; --panel:#202827; --panel2:#29332e; --line:#526052; --gold:#d4bc81; --gold-dim:#857756; --dim:#abb4a5; --text:#eeeede; --blue:#79aabb; --red:#cb806e; }
#app { border-inline:1px solid #3e493f;box-shadow:none; }
.top,.order { background:#191f20;border-color:#485246; }
.objective { background:#293229;border-color:#4e594a;color:#d1cfb6; }
.panel { background:#202827; }
.btn { border-color:#687160;letter-spacing:.03em; }
.btn.primary { border-color:#8aadb0; }
.btn.danger { border-color:#b17d69; }
.btn.gold { border-color:#e0cd9b; }
.icon-btn { border:1px solid #586353;background:#29332e; }
.hero-card,.dice-card,.difficulty-card { background:#202827; }
.hero-card.on,.dice-card.on,.difficulty-card.on { background:#394334;box-shadow:inset 0 -3px #c6b77d; }
.hero-detail img { background:none; }
.order .o { border-width:1px;background:#283329; }
.order .o.blue,.portrait { background:#263d3f;border-color:#79aabb; }
.order .o.red { background:#432e28;border-color:#b17d69; }
.order .o:first-child { border-color:#e1cf98;box-shadow:inset 0 -2px #d4bc81; }
.bar,.core-bar { background:#141b19;border-color:#536052; }
.forecast { background:#1b2523f5;border-color:#a49c73;box-shadow:0 3px #0005; }
.forecast .f-main { min-width:0;overflow-wrap:anywhere; }
.strategy-notes { background:none;border-left:0;border-top:1px solid #526052;padding:12px 0; }
.skill-status { border-color:#526052; }
.sheet { box-shadow:0 12px 0 #0003; }
.card span,.hint { color:#d4dbcb; }

.logo small { border:0;background:#16221cde;letter-spacing:.12em; }

.floater.skill-name { color:#fff1c7;font-size:22px;letter-spacing:.12em;background:#17201dd9;border-block:1px solid #ccba81;padding:5px 16px;z-index:2; }

/* v0.4: quiet HUD, visible commands and direct-action HP forecasts. */
.hint,.strategy-notes,.battle-log { display:none; }
.core-meter { display:flex;align-items:center;gap:5px;min-width:0; }
.core-meter>img { width:25px;height:25px;object-fit:contain;image-rendering:pixelated; }
.core-meter .core-bar { flex:1;height:10px; }
.core-bar span { display:none; }
.objective>span { display:flex;align-items:center;gap:7px; }
.tower-icon { width:22px;height:22px;flex:none;color:#c9bc8d; }
.objective .blue-count { color:#93cede; }.objective .red-count { color:#e8a28a; }
.tower-divider { color:#a2ac98;margin-right:8px; }
.skill-status small { display:none; }.skill-status { padding:4px 0; }
.actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
.actions .roll-button { min-height:72px;padding:10px; }
.roll-button .dice-face { width:46px;height:46px;margin:auto; }
.forecast,.forecast.top { position:static;display:block;pointer-events:auto;padding:8px;background:#202c27;border:1px solid #647363;box-shadow:none;margin-bottom:8px; }
.forecast-heading { display:flex;align-items:center;gap:8px;margin-bottom:7px;min-height:24px; }
.forecast-heading img { width:28px;height:28px; }
.forecast-heading b { font-size:13px;font-weight:normal; }
.forecast-heading>small { margin-left:auto;color:#b7c4ad;font-size:10px; }
.forecast-options { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.forecast-choice { display:flex;flex-direction:column;gap:9px;text-align:left;min-height:62px;padding:9px 10px;font-size:12px;background:#303d34;border-color:#627460; }
.forecast-choice.skill { background:#3b3c2d;border-color:#9a895b; }
.forecast-choice>span:first-child { display:flex;justify-content:space-between;gap:4px;align-items:center;width:100%; }
.forecast-choice small { font-size:10px;color:#ecd6a3; }
.prediction { position:relative;display:block;width:100%;height:10px;background:#101a15;overflow:hidden; }
.prediction i { position:absolute;height:100%;top:0; }
.prediction .remaining { left:0;background:#9dc48d; }
.prediction .loss { background:repeating-linear-gradient(135deg,#c27a5f 0px,#c27a5f 3px,#925a49 3px,#925a49 6px); }
@media(max-height:720px) { .actions .btn { min-height:44px; }.actions .roll-button { min-height:60px; }.forecast { padding:5px;margin-bottom:5px; }.forecast-choice { min-height:54px;padding:7px; }.forecast-heading { margin-bottom:4px; }.skill-status { display:none; } }
.roll-button .dice-face { padding:8px;border-radius:5px;flex:none; }
.forecast-legend { display:flex;align-items:center;gap:4px; }
.forecast-legend i { width:7px;height:7px;background:#9dc48d;display:inline-block; }
.forecast-legend .loss-key { background:repeating-linear-gradient(135deg,#c27a5f 0px,#c27a5f 2px,#925a49 2px,#925a49 4px);margin-left:4px; }

.relay-status { display:inline-flex; }.relay-status.blue .tower-icon { color:#93cede; }.relay-status.red .tower-icon { color:#e8a28a; }.relay-status.neutral .tower-icon { color:#99a08a; }

/* v0.4.1: combat previews live on the board; commands never resize it. */
.forecast { display:none!important; }
.actions { height:120px;min-height:120px;grid-template-rows:repeat(2,57px);align-content:start;flex:none; }
.actions .btn,.actions .roll-button { min-height:0;height:100%;padding:6px 4px; }
.actions .selected-action { outline:2px solid #fff1bf;outline-offset:-4px; }
@media all {
 .panel { height:calc(242px + env(safe-area-inset-bottom));min-height:calc(242px + env(safe-area-inset-bottom));max-height:calc(242px + env(safe-area-inset-bottom));flex:none;display:flex;flex-direction:column;gap:0;box-sizing:border-box;padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
 .panel .me { height:52px;min-height:52px; }
 .skill-status { height:24px;min-height:24px;padding:3px 0;flex:none; }
 .build-strip { height:20px;min-height:20px;padding:0;margin:0;overflow:hidden;flex:none; }
 .actions { margin-top:auto; }
}
@media(max-height:720px) {
 .panel { height:calc(218px + env(safe-area-inset-bottom));min-height:calc(218px + env(safe-area-inset-bottom));max-height:calc(218px + env(safe-area-inset-bottom)); }.skill-status { display:none; }
}

/* v0.4.2 — quiet command tray. Fixed geometry; emphasis comes from selection. */
.panel { background:#161e1e;border-color:#575e51;box-shadow:0 -1px 0 #111a18; }
.panel .me { align-items:center;gap:10px; }
.panel .portrait { border:1px solid #69796b;background:#222d29;box-shadow:none; }
.panel .me-line { font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;font-size:12px;letter-spacing:.015em; }
.panel .me-line.small { font-size:10px;color:#a4b0a4;gap:10px; }
.panel .me .lv { color:#d9c490;font-size:10px; }.panel .me .name { color:#eeeadc; }
.panel .me .gold { color:#d9c490;font-size:11px;font-variant-numeric:tabular-nums; }
.panel .bar.hp { height:7px;border:0;background:#303a31; }
.panel .bar.hp i { background:#9caf7f; }.panel .bar.hp span { display:none; }
.panel .bar.exp { height:2px;margin-top:4px;border:0;background:#343e36; }
.panel .bar.exp i { background:#b9a370; }
.panel .skill-status { font:10px/1.2 system-ui,-apple-system,sans-serif;color:#c9c6ac;border:0; }
.panel .skill-status span { color:#96ab98;font-size:10px; }
.panel .actions { gap:6px;grid-template-rows:repeat(2,57px);border-top:1px solid #37423b;padding-top:6px;height:126px;min-height:126px; }
.panel .actions .btn { background:#202a27;color:#dadfd0;border:1px solid #39473f;border-radius:4px;box-shadow:none;text-shadow:none;font:12px/1.2 system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;letter-spacing:.035em;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;transition:background .12s,border-color .12s,color .12s; }
.panel .actions .btn::before,.panel .actions .btn::after { display:none; }
.panel .actions .btn:hover:not(:disabled) { background:#303c32;border-color:#8f9a7e; }
.panel .actions .btn:active:not(:disabled) { transform:none;background:#3d4a3a; }
.panel .actions .btn:disabled { opacity:1;color:#647268;border-color:#2c3731;background:#1b2421; }
.panel .actions .btn.primary { background:#344338;border-color:#657c60;color:#eef2dc; }
.panel .actions .selected-action { outline:0;background:#ddd4b9;color:#26342d;border-color:#eee4c9;box-shadow:inset 3px 0 #9c8657; }
.command-icon { width:21px;height:21px;flex:none;color:#b5c1a6; }
.btn:disabled .command-icon { color:#556258; }.selected-action .command-icon { color:#344337; }
.command-label { display:flex;align-items:center;justify-content:center;gap:4px; }
.panel .actions .btn .n { font-size:10px;opacity:.75; }
.panel .actions .btn.wide,.panel .actions .btn.full { font-size:12px; }
.panel .actions .btn[data-cmd="wait"] { background:transparent;border-color:transparent;color:#a9b4a4;font-size:10px; }
.panel .actions .btn[data-cmd="wait"] .command-icon { width:17px;height:17px; }
.panel .actions:has(.roll-button) .roll-button { grid-column:1;grid-row:1 / 3;background:#29372f;border:1px solid #8f9470; }
.panel .actions:has(.roll-button) [data-cmd="attack"] { grid-column:2;grid-row:1; }
.panel .actions:has(.roll-button) [data-cmd="skill"] { grid-column:3;grid-row:1; }
.panel .actions:has(.roll-button) [data-cmd="defend"] { grid-column:2;grid-row:2; }
.panel .actions:has(.roll-button) [data-cmd="wait"] { grid-column:3;grid-row:2; }
.panel .actions:has(.roll-button) [data-cmd="shop"],.panel .actions:has(.roll-button) [data-cmd="recall"] { grid-column:4;grid-row:1; }
.panel .actions:has(.roll-button) [data-cmd="potion"] { grid-column:4;grid-row:2; }
/* Transparent dice art; the shared renderer supplies the current pips. */
.dice-face,.dice-faces .dice-face,.roll-button .dice-face { display:block;background:none;padding:0;border:0;border-radius:0;box-shadow:none;aspect-ratio:1; }
.dice-face svg { display:block;width:100%;height:100%;overflow:visible; }
.roll-button .dice-face { width:70px;height:66px;margin:0; }
.die { width:108px;height:102px;transform:rotate(-6deg);border:0;border-radius:0;background:none;box-shadow:none; }
.die::after { display:none; }.dice-pop::before { display:none; }
.dice-faces { max-width:155px;gap:5px; }.dice-faces .dice-face { height:auto; }
@media all { .panel .actions .btn { flex-direction:column;gap:4px;padding:5px 2px; }.panel .actions .btn.full,.panel .actions .btn.wide { flex-direction:row; }.panel .actions .roll-button { flex-direction:column; }.panel .actions .btn[data-cmd="wait"] { gap:3px; } }

/* Approved pattern 2: unboxed die / utility rail / three combat cards. */
.panel { background:radial-gradient(ellipse at 10% 80%,#26312b66,transparent 48%),linear-gradient(125deg,#172423,#111c1b);border-top:1px solid #85826a; }
.panel .me { border:1px solid #777961;padding:6px;position:relative;gap:10px; }
.panel .me::after { content:'';position:absolute;inset:3px;border:1px solid #99947733;pointer-events:none; }
.panel .portrait { border-color:#b5a779;background:#152321;border-radius:2px; }
.panel .me-line { font-family:'Dot','Hiragino Sans',system-ui,sans-serif;font-size:14px;color:#e7e2cb; }
.panel .me-line.small { font-size:11px;letter-spacing:.055em;color:#c6c9b7;gap:13px; }
.panel .me .lv { font-size:12px;color:#ece6cc; }.panel .me .gold { font-size:13px; }
.panel .bar.hp { height:8px;border:1px solid #a7a582;background:#0e1816; }
.panel .bar.hp i { background:linear-gradient(90deg,#95b987,#a7c896); }
.panel .bar.exp { height:1px;margin-top:2px; }
.panel .me .pots { display:none; }
.panel .skill-status { height:18px;min-height:18px;padding:3px 2px;font-size:9px; }
.panel .build-strip { height:14px;min-height:14px; }.panel .build-strip img { width:14px;height:14px; }
.panel .actions.pattern-two { grid-template-columns:31% repeat(3,minmax(0,1fr));grid-template-rows:44px 76px;grid-template-areas:'die context potion wait' 'die attack skill defend';height:128px;min-height:128px;gap:6px;padding:0;border:0;align-content:center; }
.panel .actions.pattern-two.has-commit { grid-template-areas:'die context commit commit' 'die attack skill defend'; }
.panel .actions.pattern-two .btn { position:relative;font-family:'Dot','Hiragino Sans',system-ui,sans-serif;color:#e0ddc7;background:transparent;box-shadow:none;border-radius:3px;letter-spacing:.035em;padding:5px; }
.panel .actions.pattern-two .btn.combat-command { flex-direction:column;gap:5px;border:1px solid #767d68;background:linear-gradient(145deg,#26332b55,#111d1900);font-size:13px; }
.panel .actions.pattern-two .combat-command .command-icon { width:32px;height:32px;color:#dbd7be; }
.panel .actions.pattern-two .combat-command::before { display:block;content:'';position:absolute;inset:4px;pointer-events:none;background:linear-gradient(#a8aa8a,#a8aa8a) left top/6px 1px no-repeat,linear-gradient(#a8aa8a,#a8aa8a) left top/1px 6px no-repeat,linear-gradient(#a8aa8a,#a8aa8a) right bottom/6px 1px no-repeat,linear-gradient(#a8aa8a,#a8aa8a) right bottom/1px 6px no-repeat;opacity:.55; }
.panel .actions.pattern-two .combat-command.selected-action { outline:0;border-color:#f0e6b6;background:#3a42302b;box-shadow:0 0 0 1px #e8ddb144; }
.panel .actions.pattern-two .combat-command.selected-action::after { display:block;content:'';position:absolute;bottom:-6px;left:calc(50% - 3px);width:6px;height:6px;background:#ecdfad;transform:rotate(45deg); }
.panel .actions.pattern-two .utility-command { flex-direction:row;gap:5px;border:0;border-bottom:1px solid #626d5666;border-radius:0;background:none;font-size:11px;color:#d2d4bd; }
.panel .actions.pattern-two .utility-command .command-icon { width:19px;height:19px;color:#d5ceb0; }
.panel .actions.pattern-two .utility-command .command-label { white-space:normal;gap:2px; }
.panel .actions.pattern-two .utility-command .n { font-size:10px; }
.panel .actions.pattern-two .commit-command { color:#f5e7b5;border-bottom-color:#c5b681; }
.panel .actions.pattern-two .btn:disabled { opacity:.42;color:#c5c6af; }
.panel .actions.pattern-two .btn:disabled .command-icon { color:#c5c6af; }
.panel .actions.pattern-two .btn:hover:not(:disabled) { background:#515b382e;border-color:#dfd3a2; }
.panel .actions.pattern-two .btn.roll-button { border:0;background:transparent;box-shadow:none;padding:0;overflow:visible;isolation:isolate; }
.panel .actions.pattern-two .roll-button::before { display:block;content:'';position:absolute;width:92%;aspect-ratio:1;border:1px solid #afa87530;border-radius:50%;transform:scaleY(.63);bottom:0;z-index:-1; }
.panel .actions.pattern-two .roll-button .dice-face { width:108px;height:108px;max-width:100%;filter:drop-shadow(0 6px 3px #0006); }
.panel .actions.pattern-two .roll-button:disabled { opacity:.65; }
@media all { .panel .me { height:64px;min-height:64px; }.panel .portrait { width:45px;height:45px;flex:none; }.panel .me-stats { min-width:0; } }
@media(max-height:720px) { .panel .skill-status,.panel .build-strip { display:none; }.panel .me { height:64px;min-height:64px; } }
.panel .actions.pattern-two .utility-command { font-size:10px;gap:4px; }
.panel .actions.pattern-two .utility-command .command-icon { width:16px;height:16px; }
.panel .actions.pattern-two .utility-command .command-label { white-space:nowrap; }
.panel .actions.pattern-two .commit-command .command-label { white-space:normal; }

/* v0.4.7 — Gilded navy. Decorative nine-slice art never changes hitboxes. */
:root { --gold:#edd59b;--gold-dim:#b0945d;--dim:#a4b3bd;--line:#667986;--panel:#0a1c30;--panel2:#102a42; }
.top,.order,.objective,.panel,.sheet { background:radial-gradient(ellipse at 35% 0%,#193c5455,transparent 72%),linear-gradient(115deg,#102239,#051321); }
.top,.objective,.panel .me,.sheet { border:1px solid #a88c56;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 16px / 0 stretch;box-shadow:inset 0 0 18px #0008,0 1px 3px #000b; }
.top { position:relative;z-index:2;padding-left:10px;padding-right:10px; }
.stage-chip b { color:#f4dc9e;text-shadow:0 2px #000; }
.stage-chip span { color:#ddd5b8; }
.icon-btn { border:1px solid #a88c56;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 10px / 0 stretch;background:linear-gradient(145deg,#1c3951,#071425);color:#edd59b;box-shadow:inset 0 0 8px #000a,0 2px 2px #0008; }
.core-bar { border:1px solid #b7a47d;border-radius:3px;box-shadow:0 0 0 1px #020914,inset 0 1px 3px #000;background:#050e1b; }
.core-bar i { box-shadow:inset 0 1px #ffffff70,inset 0 -2px #0005; }
.core-bar.red i { background:linear-gradient(#e86856,#bc302f 45%,#801d29); }
.core-bar.blue i { background:linear-gradient(#55c7ff,#2589dd 45%,#175295); }
.order { border-block:1px solid #89774a;box-shadow:inset 0 3px 8px #0008; }
.order .o { border-width:1px;border-radius:3px;box-shadow:inset 0 0 6px #000,0 2px 2px #0008;background:linear-gradient(145deg,#21344a,#0a1526); }
.order .o.blue { border-color:#729cbd;background:linear-gradient(145deg,#244257,#0a1526); }.order .o.red { border-color:#ad7b66;background:linear-gradient(145deg,#50322e,#181522); }
.order .o:first-child { border-color:#ffe1a0;box-shadow:0 0 0 1px #a4864e,inset 0 0 9px #efce6860,0 0 7px #dec47845; }
.objective { color:#e7d5a4;position:relative; }
.board-wrap { box-shadow:inset 0 0 0 1px #c2a363; }
.board-wrap::after { content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #887449;box-shadow:inset 0 0 14px #03132565;z-index:1; }
.panel { border-top:2px solid #ba9a62;box-shadow:0 -3px 9px #0008,inset 0 1px #f7e3a644; }
.panel .me { background:linear-gradient(105deg,#152b3e,#071829); }
.panel .me::after { border:0; }
.panel .portrait { border-color:#d8ba7e;box-shadow:inset 0 0 7px #000,0 0 0 1px #594b34;background:radial-gradient(ellipse,#335164,#0a1828); }
.panel .me-line { color:#f0e4c6;text-shadow:0 1px 2px #000; }.panel .me-line.small { color:#bdccd5; }
.panel .me .gold { color:#f6d589; }.panel .me .gold::before { content:'◆';font-size:10px;margin-right:5px;color:#e7b95a;text-shadow:1px 1px #77522b; }
.panel .bar.hp { border-color:#c4c7ad;border-radius:2px;background:#05100e;box-shadow:0 0 0 1px #000; }
.panel .bar.hp i { background:linear-gradient(#a3e59f,#59b86d 48%,#318954);box-shadow:inset 0 1px #d1ffc499,inset 0 -1px #195036; }
.panel .bar.exp i { background:#70b8d6; }.panel .skill-status { color:#b5c5d0; }
.panel .actions.pattern-two .btn { border:1px solid #aa8d58;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 11px / 0 stretch;border-radius:0;background:linear-gradient(140deg,#1c3b54,#09182b);box-shadow:inset 0 0 12px #0008,0 2px 3px #0009;color:#f3e7c7;text-shadow:0 2px 2px #000; }
.panel .actions.pattern-two .btn.combat-command { border-color:#ceb37a;background:radial-gradient(ellipse at 50% 0%,#e4846333,transparent 85%),linear-gradient(135deg,#752d32,#3c1421);font-size:14px; }
.panel .actions.pattern-two .btn[data-cmd='skill'] { background:radial-gradient(ellipse at 50% 0%,#ffe39622,transparent 85%),linear-gradient(135deg,#635332,#2d251b); }
.panel .actions.pattern-two .btn[data-cmd='defend'] { background:radial-gradient(ellipse at 50% 0%,#7dd3ff33,transparent 85%),linear-gradient(135deg,#205780,#102640); }
.panel .actions.pattern-two .combat-command::before { display:none; }
.panel .actions.pattern-two .combat-command .command-icon { color:#efd8a0;filter:drop-shadow(0 2px 1px #000a); }
.panel .actions.pattern-two .utility-command { border-bottom:1px solid #aa8d58; }
.panel .actions.pattern-two .utility-command .command-icon { color:#d9e2d8;filter:drop-shadow(0 1px 1px #000); }
.panel .actions.pattern-two [data-cmd='potion'] .command-icon { color:#f59a92; }
.panel .actions.pattern-two .btn.roll-button { border:1px solid #aa8d58;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 18px / 0 stretch;background:radial-gradient(ellipse,#28506966,#081a2d 74%);box-shadow:inset 0 0 15px #0008,0 2px 3px #0009; }
.panel .actions.pattern-two .roll-button::before { width:86%;bottom:17px;border:1px solid #b9a67765;box-shadow:0 0 0 6px #c6ab6520;transform:scaleY(.8); }
.panel .actions.pattern-two .roll-button .dice-face { width:100px;height:100px;filter:drop-shadow(0 5px 3px #0009); }
.panel .actions.pattern-two .btn:hover:not(:disabled) { filter:brightness(1.12);background-color:#26445c; }
.panel .actions.pattern-two .btn:active:not(:disabled) { transform:none;filter:brightness(1.25); }
.panel .actions.pattern-two .combat-command.selected-action { border-color:#ffedb0;box-shadow:inset 0 0 14px #ffdf7040,0 0 0 1px #ecd08c,0 0 9px #eacd7955;filter:brightness(1.15); }
.panel .actions.pattern-two .combat-command.selected-action::after { background:#ffe5a4; }
.panel .actions.pattern-two .btn:disabled { opacity:1;filter:saturate(.22) brightness(.60);color:#a2adb4; }
.panel .actions.pattern-two .roll-button:disabled { filter:saturate(.65) brightness(.78); }
.sheet { color:#e9e2cb; }.sheet .btn,.title-menu .btn { border-color:#b59a63;background:linear-gradient(135deg,#24425a,#0a192c);color:#ecdfba;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 12px / 0 stretch;box-shadow:inset 0 0 12px #0008,0 2px 4px #0007; }
#select { background:radial-gradient(ellipse at top,#1d3851,#061321); }.hero-detail,.dice-card,.hero-card { background:linear-gradient(135deg,#1d364c,#081728);border-color:#6c7b83; }.hero-card.on,.dice-card.on { border-color:#e2c483;background:linear-gradient(135deg,#4f4630,#172235); }

/* Selection screen uses the same gilded frame vocabulary as the battle HUD. */
#select .hero-card,#select .hero-detail,#select .dice-card,#select .difficulty-card,#select .row .btn {
 border:1px solid #a88c56;border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 12px / 0 stretch;
 background:linear-gradient(135deg,#18334b,#071728);color:#eee3c8;
 box-shadow:inset 0 0 12px #0008,0 2px 3px #0007;
}
#select .hero-card { border-image-width:9px; }
#select .hero-card.on,#select .dice-card.on,#select .difficulty-card.on {
 background:linear-gradient(135deg,#534932,#17283a);box-shadow:inset 0 0 12px #e5c47833,0 0 0 1px #e5c58a;
}
#select .hero-detail { border-image-width:16px;padding:12px; }
#select .dice-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
#select .dice-card { padding:12px 9px; }
#select .dice-faces { max-width:156px;gap:7px;margin:12px auto 3px;padding:0; }
#select .dice-faces .flat { aspect-ratio:1; }
#select .difficulty-card { padding:12px 7px; }
#select .row .btn.primary { background:linear-gradient(135deg,#31576c,#122b42);color:#ffe9b7; }
#select button:focus-visible { outline:2px solid #ffe7a8;outline-offset:2px; }

/* Reward, level-up, route and shop choices share the gilded modal treatment. */
.sheet .card {
 border:1px solid #b49a64;
 border-image:url('./assets/art/ui-gilded-frame.svg') 24 / 13px / 0 stretch;
 background:radial-gradient(ellipse at 0 0,#33536b55,transparent 75%),linear-gradient(135deg,#142d43,#071728);
 box-shadow:inset 0 0 12px #0008,0 2px 3px #0007;
 padding:12px;gap:12px;color:#ede2c9;
}
.sheet .card b { color:#f1d99d;text-shadow:0 1px 2px #000; }
.sheet .card span { color:#c9d4dc;line-height:1.5; }
.sheet .card img { background:radial-gradient(ellipse,#b89a4930,transparent 72%);filter:drop-shadow(0 2px 1px #0008); }
.sheet .card .cost { color:#f1d99d; }
.sheet .card:hover:not(.off),.sheet .card:focus-visible { background:linear-gradient(135deg,#39453e,#11263b);box-shadow:inset 0 0 12px #e6c27425,0 0 0 1px #e5c58a; }
.sheet .card:focus-visible { outline:2px solid #ffe7a8;outline-offset:2px; }
.sheet .card:active:not(.off) { background:linear-gradient(135deg,#594b2f,#243444); }

/* FE-style hero sheet */
.hero-detail h4 .role { display: block; font-size: 12px; color: var(--gold); margin-top: 2px; }
.hero-detail .growth { margin-top: 6px; font-size: 12px; color: var(--dim); }
.hero-detail .learn { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; display: grid; gap: 3px; }
.hero-detail .learn b { color: var(--gold); font-weight: normal; margin-right: 4px; }
.hero-detail .learn small { display: block; color: var(--dim); font-size: 11px; }
.hero-detail .cleared { margin-top: 6px; font-size: 12px; color: #9fe39f; }
.stats-list em { font-style: normal; color: #7dff8a; margin-left: 4px; }
.unlock-note { text-align: center; color: var(--gold); }

/* Territory gauge (objective strip) */
.objective .territory { appearance:none; border:0; background:none; color:inherit; font:inherit; padding:0; display:flex; align-items:center; gap:6px; flex:1; min-width:0; cursor:pointer; }
.territory b { font-weight:normal; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.territory .t-blue { color:#93cede; } .territory .t-red { color:#e8a28a; }
.territory .t-bar { position:relative; flex:1; min-width:60px; height:8px; background:#0a0f18; border:1px solid #9c814d66; border-radius:2px; overflow:hidden; }
.territory .t-bar i { position:absolute; top:0; bottom:0; }
.territory .t-bar .b { left:0; background:linear-gradient(#7fb5ff,#2a62c9); }
.territory .t-bar .r { right:0; background:linear-gradient(#ff7b6e,#c4302a); }
.territory .t-bar em { position:absolute; top:-1px; bottom:-1px; width:1px; background:#f2d58a; opacity:.8; }
.territory .pips { display:inline-flex; gap:2px; }
.territory .pip { width:5px; height:5px; border:1px solid currentColor; transform:rotate(45deg); opacity:.5; }
.territory .pip.on { background:currentColor; opacity:1; }
.tier-list { list-style:none; padding:0; margin:8px 0; display:grid; gap:6px; }
.tier-list li { padding:6px 10px; border:1px solid #3a4668; border-radius:8px; opacity:.7; }
.tier-list li.lit { border-color:#93cede; opacity:1; box-shadow:0 0 8px #3d8bff55; }
.tier-list b { color:var(--gold); font-weight:normal; margin-right:6px; }
.terr-note { color:#93cede; }

.territory .t-name { font-size:10px; color:var(--gold); white-space:nowrap; }
.footing-list { margin:6px 0; padding-left:18px; font-size:14px; line-height:1.6; }
.next-rule { margin:4px 0 12px; padding:8px 10px; border:1px solid #9c814d66; border-radius:8px; font-size:12px; }
.next-rule b { color:var(--gold); font-weight:normal; }
.next-rule ul { margin:4px 0 0; padding-left:16px; line-height:1.5; }

/* Build command joins the utility row (12-column grid keeps both rows even). */
.panel .actions.pattern-two.has-build { grid-template-columns:31% repeat(12,minmax(0,1fr));grid-template-areas:'die context context context build build build potion potion potion wait wait wait' 'die attack attack attack attack skill skill skill skill defend defend defend defend'; }
.panel .actions.pattern-two.has-build.has-commit { grid-template-areas:'die context context context commit commit commit commit commit commit commit commit commit' 'die attack attack attack attack skill skill skill skill defend defend defend defend'; }
.card.off { pointer-events:none; }

/* Always-on goal line at the top of the board. */
.goal { flex:none; text-align:center; font-size:12px; line-height:1.3; color:#f4ecd0; padding:4px 8px; background:#0b1422; border-bottom:1px solid #9c814d55; text-shadow:0 1px 0 #000; }
.goal:empty { display:none; }

.growth-title { font-size:12px; color:var(--dim); margin-top:8px; }
.clear-bonus { text-align:center; color:#9fd0ff; margin:6px 0; }

/* Toast may carry two lines (core info). */
.toast { white-space: pre-line; text-align: center; }
/* Objective strip: gauge + relay icons only. */
.objective .relays { display:flex; gap:4px; flex:none; }
/* Utility row labels must fit their frame. */
.panel .actions.pattern-two .utility-command { font-size:10px; gap:3px; padding:3px 2px; overflow:hidden; }
.panel .actions.pattern-two .utility-command .command-icon { width:15px; height:15px; flex:none; }
.panel .actions.pattern-two .utility-command .command-label { white-space:nowrap; overflow:hidden; text-overflow:clip; }
/* Plain die, no backdrop ring. */
.panel .actions.pattern-two .roll-button::before { display:none !important; }
.me-line.small { flex-wrap: nowrap; overflow: hidden; }
/* Four utility buttons in one row: drop icons so every label fits. */
.panel .actions.pattern-two.has-build .utility-command .command-icon { display:none; }
.panel .actions.pattern-two.has-build .utility-command { font-size:11px; }
/* Keep the territory numbers clear of the gilded corner ornaments. */
.objective { padding-left: 22px !important; padding-right: 16px !important; }

/* Skill cut-in */
.cutin { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.cutin-band { position:absolute; left:-10%; right:-10%; top:30%; height:34%; transform:skewY(-8deg); background:linear-gradient(90deg, rgba(20,60,140,.0), rgba(30,90,200,.92) 18%, rgba(20,50,120,.92) 82%, rgba(20,60,140,0)); border-block:2px solid #cfe3ff; box-shadow:0 0 24px rgba(80,150,255,.6); overflow:hidden; }
.cutin.red .cutin-band { background:linear-gradient(90deg, rgba(140,30,20,0), rgba(200,50,40,.92) 18%, rgba(130,25,20,.92) 82%, rgba(140,30,20,0)); border-color:#ffd0c8; box-shadow:0 0 24px rgba(255,90,70,.6); }
.cutin-art { position:absolute; left:12%; top:-6%; height:175%; transform:skewY(8deg); filter:drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.cutin-art.pixel { image-rendering:pixelated; height:150%; top:-22%; left:10%; }
.cutin.red .cutin-art { left:auto; right:14%; transform:skewY(8deg) scaleX(-1); }
.cutin-text { position:absolute; right:12%; top:50%; transform:translateY(-50%) skewY(8deg); text-align:right; color:#fff; text-shadow:0 3px 0 #000, 0 0 10px rgba(0,0,0,.7); }
.cutin.red .cutin-text { right:auto; left:12%; text-align:left; }
.cutin-text small { display:block; font-size:13px; opacity:.9; }
.cutin-text b { display:block; font-weight:normal; font-size:30px; letter-spacing:2px; }
.cutin.play .cutin-band { animation: cutin-band .82s ease-out both; }
.cutin.play .cutin-art { animation: cutin-art .82s cubic-bezier(.2,.8,.2,1) both; }
.cutin.red.play .cutin-art { animation-name: cutin-art-red; }
.cutin.play .cutin-text { animation: cutin-text .82s ease-out both; }
@keyframes cutin-band { 0% { opacity:0; transform:skewY(-8deg) scaleY(.1); } 12% { opacity:1; transform:skewY(-8deg) scaleY(1); } 82% { opacity:1; } 100% { opacity:0; transform:skewY(-8deg) scaleY(1.05); } }
@keyframes cutin-art { 0% { opacity:1; transform:skewY(8deg) translateX(-120%); } 22% { opacity:1; transform:skewY(8deg) translateX(0); } 78% { opacity:1; transform:skewY(8deg) translateX(8%); } 100% { transform:skewY(8deg) translateX(40%); opacity:0; } }
@keyframes cutin-art-red { 0% { opacity:1; transform:skewY(8deg) scaleX(-1) translateX(-120%); } 22% { opacity:1; transform:skewY(8deg) scaleX(-1) translateX(0); } 78% { opacity:1; transform:skewY(8deg) scaleX(-1) translateX(8%); } 100% { transform:skewY(8deg) scaleX(-1) translateX(40%); opacity:0; } }
@keyframes cutin-text { 0%,15% { opacity:0; margin-right:-40px; } 30% { opacity:1; margin-right:0; } 85% { opacity:1; } 100% { opacity:0; } }

/* Tap info card */
.unit-card { position:absolute; left:8px; right:8px; bottom:8px; z-index:5; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:linear-gradient(160deg,#16243a,#0b1424); border:1px solid #b99a5c; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,236,190,.08); color:#eef1f8; font-size:12px; pointer-events:none; animation:uc-in .15s ease-out; }
.unit-card.top { bottom:auto; top:8px; }
@keyframes uc-in { from { opacity:0; transform:translateY(6px); } }
.uc-art { width:60px; height:60px; object-fit:contain; flex:none; background:radial-gradient(circle,#2b3d63,transparent 70%); }
.uc-art.pixel { image-rendering:pixelated; }
.uc-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.uc-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.uc-head b { font-weight:normal; font-size:15px; color:#f5e6be; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uc-head small { font-size:11px; color:#c9d4ee; margin-left:4px; }
.uc-chip { flex:none; font-size:10px; padding:1px 7px; border-radius:10px; border:1px solid currentColor; }
.uc-chip.blue { color:#8fc3ff; } .uc-chip.red { color:#ff9a8f; } .uc-chip.neutral { color:#e8c877; } .uc-chip.state { color:#b8e6c0; }
.uc-bar { position:relative; height:12px; background:#070b14; border:1px solid #3a4668; border-radius:3px; overflow:hidden; }
.uc-bar i { position:absolute; inset:0 auto 0 0; }
.uc-bar.blue i { background:linear-gradient(#8ff08f,#35a743); } .uc-bar.red i { background:linear-gradient(#ff8a7e,#c4302a); } .uc-bar.neutral i { background:linear-gradient(#ffd07a,#c78a22); }
.uc-bar span { position:relative; display:block; font-size:10px; line-height:11px; padding-left:5px; text-shadow:0 1px 0 #000; }
.uc-stats { display:grid; grid-template-columns:repeat(4,auto); gap:2px 10px; color:#a9b4cf; }
.uc-stats b { font-weight:normal; color:#fff; }
.uc-stats small { margin-left:3px; color:#9fd0ff; }
.uc-desc { margin:0; color:#d6dcf0; line-height:1.4; }
.uc-desc b { font-weight:normal; color:var(--gold); }
.uc-desc em { font-style:normal; margin-left:6px; color:#9fd0ff; }
.uc-techs { display:flex; gap:3px; }
.uc-techs img { width:18px; height:18px; image-rendering:pixelated; }
.uc-state { display:flex; gap:4px; flex-wrap:wrap; }
.uc-rate { display:flex; justify-content:space-between; align-items:baseline; }
.uc-rate b { font-weight:normal; font-size:20px; color:#ffd84a; }
.uc-rows { display:grid; grid-template-columns:1fr auto; gap:2px 10px; color:#a9b4cf; }
.uc-rows span:nth-child(even) { color:#fff; text-align:right; }
/* Keep Gold (and the HP bar end) clear of the gilded corner ornaments. */
.panel .me { padding-right: 20px !important; padding-left: 10px; }
.panel .me .gold { margin-right: 2px; }

.clear-level { text-align:center; font-size:22px; margin:6px 0 2px; color:#dfe6f7; }
.clear-level b { font-weight:normal; color:var(--gold); }
.clear-learned { text-align:center; color:#9fe39f; margin:2px 0 12px; }
.sheet .row { margin-top:14px; }

/* Rollable die glows so it reads as the next action. */
.panel .actions .roll-button.ready .dice-face { animation: die-ready 1.3s ease-in-out infinite; }
@keyframes die-ready { 0%,100% { filter: drop-shadow(0 0 4px rgba(255,220,120,.35)) drop-shadow(0 5px 3px #0009); } 50% { filter: drop-shadow(0 0 16px rgba(255,220,120,.95)) drop-shadow(0 5px 3px #0009); } }
.panel .actions .roll-button.ready { border-color:#f2d58a !important; }

/* Tutorial coach bubble (bottom of the board, above the controls). */
.coach { position:absolute; left:10px; right:10px; bottom:10px; z-index:7; pointer-events:none; animation:uc-in .2s ease-out; }
.coach p { margin:0; padding:10px 12px; background:linear-gradient(160deg,#2b3b1c,#1b2612); border:1px solid #d8c07a; border-radius:8px; color:#fff7dc; font-size:13px; line-height:1.45; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.coach p::before { content:'ヒント'; display:block; font-size:10px; color:#e8cf86; margin-bottom:3px; letter-spacing:1px; }
:root:not([lang="ja"]) .coach p::before { content:'Tip'; }

/* Paged how-to */
.howto-page h2 { margin-bottom:8px; }
.howto-count { text-align:right; font-size:11px; color:var(--dim); }
.howto-shot { border:1px solid #9c814d88; border-radius:6px; overflow:hidden; background:#070b14; display:flex; justify-content:center; }
.howto-shot img { display:block; width:100%; max-height:42vh; object-fit:contain; }
.howto-lines { margin:10px 0 6px; padding-left:18px; font-size:13px; line-height:1.55; }
.howto-lines li { margin-bottom:4px; }
.howto-dots { display:flex; justify-content:center; gap:6px; margin:6px 0 10px; }
.howto-dots i { width:7px; height:7px; border-radius:50%; background:#3a4668; }
.howto-dots i.on { background:var(--gold); }
.coach { top:10px; bottom:auto; }

.me-line .mat { color:#c9b58a; font-size:12px; }
/* 建築 card: its own earthy green so it never reads as another attack. */
.panel .actions.pattern-two .btn.combat-command[data-cmd="build"] { background:radial-gradient(ellipse at 50% 0%,#9fd08a33,transparent 85%),linear-gradient(135deg,#2f5a36,#15301f); }

/* Shared timber symbol for inventory and construction costs. */
.me-line .mat,.material-cost { display:inline-flex;align-items:center;gap:3px;white-space:nowrap; }
.me-line .mat .command-icon,.material-cost .command-icon,.material-summary .command-icon { width:19px;height:19px;vertical-align:middle;filter:drop-shadow(0 1px 1px #0008);flex:none; }
.material-summary .command-icon { margin-right:4px; }
/* Materials and Gold sit on one line at the same height. */
.me-line .mat,.me-line .gold { align-self:center;line-height:20px;font-size:13px; }
.me-line .gold { display:inline-flex;align-items:center; }

/* Red dot on the shop button while something is affordable. */
.btn.has-dot { position:relative; }
.actions .btn.has-dot::after,.btn.has-dot::after { display:block !important;z-index:2; content:'';position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:#e2382c;box-shadow:0 0 0 1.5px #2a0c08,0 0 6px #ff5a3d; }
.icon-btn[data-act=pause] { display:grid;place-items:center; }

/* How-to: back arrow always at the top left. */
.howto-page { position:relative; }
.howto-back { position:absolute;top:-4px;left:-4px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #a88c56;border-radius:4px;background:linear-gradient(145deg,#1c3951,#071425);color:#edd59b;cursor:pointer;z-index:2; }
.howto-back:active { transform:translateY(1px); }

/* Tutorial stage bubble, marked buttons, title language switch. */
.tutor { position:absolute;left:10px;right:10px;top:10px;z-index:8;pointer-events:none;animation:uc-in .2s ease-out; }
.tutor > * { pointer-events:auto; }
.tutor { padding:10px 12px;background:linear-gradient(160deg,#1f3550,#0d1a2b);border:1px solid #e5c979;border-radius:8px;color:#fff7dc;box-shadow:0 6px 18px rgba(0,0,0,.55); }
.tutor p { margin:0;font-size:13px;line-height:1.5; }
.tutor-head { font-size:10px;color:#e8cf86;letter-spacing:1px;margin-bottom:3px; }
.tutor-next { display:block;margin:8px 0 0 auto;min-width:96px;padding:6px 14px; }
.tutor-next.hidden { display:none; }
.tutor.nudge { animation:tut-nudge .35s; }
@keyframes tut-nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.tut-focus { box-shadow:0 0 0 2px #fff3b0,0 0 14px 4px rgba(255,214,90,.8) !important;animation:tut-pulse 1s ease-in-out infinite; }
@keyframes tut-pulse { 50% { box-shadow:0 0 0 2px #fff3b0,0 0 4px 1px rgba(255,214,90,.4); } }
.objective.tut-focus { border-radius:6px; }
.tut-dim { opacity:.35 !important;filter:grayscale(.7); }
.lang-switch { position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;display:flex;gap:0;z-index:3; }
.lang-switch .btn { min-width:44px;padding:6px 8px;font-size:12px;border-radius:0;opacity:.6; }
.lang-switch .btn.on { opacity:1;background:linear-gradient(145deg,#3a5d7c,#132a44);color:#fff1c2; }
.tutor.low { top:auto;bottom:10px; }
/* Jeanne hosts the tutorial: her portrait (head and shoulders) beside the text. */
.tutor { display:flex;gap:10px;align-items:stretch;padding-left:8px; }
.tutor-face { flex:none;width:68px;min-height:84px;border:1px solid #c9a95c;border-radius:6px;background:url('./assets/guide/jeanne.webp') 52% 16% / 300% auto no-repeat,radial-gradient(circle at 50% 35%,#4b6d93,#172a42); }
.tutor-body { flex:1;min-width:0; }
.tutor-head { display:flex;justify-content:space-between;gap:8px; }
.tutor-head b { color:#f3d98a;font-weight:normal;font-size:12px;letter-spacing:.05em; }

/* Phones held sideways: the board needs portrait, so ask to rotate. */
.rotate-hint { display:none; }
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse) {
  .rotate-hint { display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#07101c;color:#ecdfba;text-align:center;padding:20px; }
  .rotate-hint svg { animation:rotate-hint 2.4s ease-in-out infinite; }
  .rotate-hint p { margin:0;font-size:16px; }
}
@keyframes rotate-hint { 0%,30% { transform:rotate(90deg); } 60%,100% { transform:rotate(0deg); } }
/* Short screens: keep the how-to buttons on screen. */
@media (max-height:640px) {
  .howto-shot img { max-height:30vh; }
  .howto-lines li { font-size:12px; }
}
/* Narrow phones: the three title buttons stay on one line each. */
@media (max-width:360px) {
  .title-menu .row .btn { font-size:13px;white-space:nowrap;padding-left:4px;padding-right:4px; }
}
/* Wide screens show the same portrait screen as phones; the margins get a dim, blurred title art. */
body::before { content:'';position:fixed;inset:-40px;z-index:0;pointer-events:none;background:#070b12 url('./assets/art/title.webp') center/cover no-repeat;filter:blur(18px) brightness(.32) saturate(.8); }
#app { z-index:1; }