/* Game screen. Colours and buttons come from style.css. */
:root { --p0: #9c3f2e; --p1: #2f5f8a; --mil: #4f8a4a; --pre: #d9d4c4; --gue: #c98a3a; --mag: #3f72b5; --vol: #b2413a; }
:root[data-theme="dark"] { --p0: #d0705b; --p1: #6d9fd0; }

body.play { min-height: 100vh; }
.play-bar { display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: var(--side); color: var(--side-ink); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.play-bar .brand small { color: var(--side-muted); }
.play-status { flex: 1; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.play-status strong { color: var(--gold-soft); font-weight: 600; }
.play-links { display: flex; gap: 16px; align-items: center; }
.play-links a { text-decoration: none; }

/* ------------------------------------------------------------------ home */
.home { max-width: 1100px; margin: 0 auto; padding: 30px 20px 60px; }
.home h1 { font: 600 34px var(--serif); margin: 0 0 6px; }
.home .lead { color: var(--muted); margin: 0 0 24px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mode-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.mode-card h2 { font: 600 21px var(--serif); margin: 0; }
.mode-card p { margin: 0; color: var(--muted); font-size: 14px; }
.mode-card label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.mode-card select, .mode-card input, .action-panel select, .action-panel input[type="text"], .action-panel input[type="number"] { border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--bg); font-weight: 400; }
.saved { margin-top: 26px; }
.saved h2 { font: 600 20px var(--serif); }
.saved-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.saved-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.saved-list .grow { flex: 1; }
.invite { font: 12px var(--mono); word-break: break-all; background: var(--bg); padding: 6px 8px; border-radius: 6px; }

/* ------------------------------------------------------------------ layout */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 16px; max-width: 1800px; margin: 0 auto; }
.game-main { display: grid; gap: 16px; align-content: start; }
.game-side { display: grid; gap: 16px; align-content: start; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
.panel h2, .board h2 { font: 600 18px var(--serif); margin: 0 0 8px; }
.board { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.board.opponent { opacity: .95; }
.seat-0 { --seat: var(--p0); } .seat-1 { --seat: var(--p1); }
.seat-name { color: var(--seat); font-weight: 700; }

/* ------------------------------------------------------------------ dungeons */
.dungeons { display: grid; gap: 10px; }
.dungeon-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 12px; display: grid; gap: 4px; position: relative; min-height: 132px; }
.tile.locked { opacity: .55; }
.tile.cleaned { background: repeating-linear-gradient(135deg, var(--paper), var(--paper) 8px, var(--row-hover) 8px, var(--row-hover) 16px); }
.tile.fighting { outline: 2px solid var(--gold); }
.tile h3 { font: 600 14px var(--serif); margin: 0; padding-right: 26px; }
.tile .level { position: absolute; top: 8px; right: 8px; font: 500 11px var(--mono); background: var(--side); color: var(--side-ink); border-radius: 99px; padding: 1px 7px; }
.stats { display: flex; gap: 8px; font-family: var(--mono); font-size: 12px; flex-wrap: wrap; }
.stats span b { font-weight: 600; }
.creature { color: var(--muted); }
.effect { font-style: italic; color: var(--muted); }
.skull { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; vertical-align: -1px; }
.skull.red { background: #b2413a; } .skull.black { background: #2b2419; }
:root[data-theme="dark"] .skull.black { background: #d9cfba; }
.floors { display: flex; gap: 3px; align-items: center; }
.floor { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.floor.s0 { background: var(--p0); border-color: var(--p0); } .floor.s1 { background: var(--p1); border-color: var(--p1); }
.spots { display: flex; gap: 6px; margin-top: auto; font-size: 11px; }
.spot { flex: 1; border: 1px dashed var(--line); border-radius: 6px; padding: 3px 5px; text-align: center; color: var(--muted); }
.spot.taken { border-style: solid; color: var(--side-ink); background: var(--seat); }

/* ------------------------------------------------------------------ player board */
.board-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 10px; }
.resources { display: flex; flex-wrap: wrap; gap: 6px; }
.res { background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 13px; }
.res b { font-family: var(--mono); }
.units { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.unit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.cube { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); }
.cube.mil { background: var(--mil); } .cube.pre { background: var(--pre); } .cube.gue { background: var(--gue); } .cube.mag { background: var(--mag); } .cube.vol { background: var(--vol); }
.buildings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.building { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12px; display: grid; gap: 3px; background: var(--bg); }
.building header { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.building h4 { margin: 0; font-size: 13px; }
.building .pips { font-family: var(--mono); color: var(--gold); white-space: nowrap; }
.building .eff { color: var(--muted); }
.building .eff.on { color: var(--ink); }
.building .tokens { font-weight: 700; color: var(--accent); }
.building button { padding: 3px 8px; font-size: 12px; justify-self: start; }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.group { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12px; }
.group.locked { opacity: .5; }
.line { display: flex; gap: 3px; align-items: center; min-height: 18px; }
.cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; max-width: 230px; background: var(--bg); }
.card b { display: block; font-size: 12px; }
.card.maison { border-color: var(--gold); }
.card.hidden { color: var(--muted); font-style: italic; }
.small { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ action panel */
.action-panel { border-color: var(--gold); }
.action-panel h2 { color: var(--accent); }
.action-panel p { font-size: 14px; margin: 0 0 10px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.choice .grow { flex: 1; }
.choice.col { display: grid; justify-content: stretch; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { padding: 2px 9px; }
.stepper output { min-width: 18px; text-align: center; font-family: var(--mono); }
.compose { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 4px 6px; align-items: center; font-size: 12px; }
.compose input { width: 100%; }
.dice { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.die { border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; font-size: 12px; background: var(--bg); }
.die.dead { border-color: var(--accent); color: var(--accent); }
.die.removed { text-decoration: line-through; opacity: .5; }
.events { list-style: none; margin: 6px 0; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.events .cancelled { text-decoration: line-through; color: var(--muted); }
.versus { font: 600 20px var(--mono); margin: 6px 0; }
.waiting { color: var(--muted); font-style: italic; }

.log-panel { max-height: 45vh; overflow: auto; }
.log { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 3px; }
.log li.title { font-weight: 700; margin-top: 6px; }
.log li.good { color: var(--good); }
.log li.bad { color: var(--accent); }

.results { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.results td, .results th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.results td.number, .results th.number { text-align: right; }

@media (max-width: 1100px) {
  .game { grid-template-columns: 1fr; }
  .game-side { position: static; max-height: none; order: -1; }
  .dungeon-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .buildings, .groups { grid-template-columns: 1fr; }
  .play-bar { padding: 10px 14px; }
}