:root { color-scheme: dark; --bg: #171717; --panel: #242424; --text: #eee; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, "Segoe UI", Arial, sans-serif; }
header { padding: 8px 14px; border-bottom: 1px solid #333; display: flex; gap: 16px; align-items: center; }
h1 { margin: 0; font-size: 22px; white-space: nowrap; }
header p { margin: 0; font-size: 12px; color: #bbb; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; padding: 10px; align-items: start; }
.sidebar { min-width: 0; display: grid; gap: 10px; font-size: 13px; }
.panel, aside, .home, .cell { background: var(--panel); border: 1px solid #555; border-radius: 12px; }
.panel { min-width: 0; padding: 10px; }
.panel p { margin: 8px 0; }
.sidebar button, .sidebar select { max-width: 100%; font-size: 12px; padding: 6px 8px; }
.sidebar .controls { gap: 6px; margin-top: 8px; }
.experiment-settings label { display: grid; gap: 3px; margin: 8px 0; }
.experiment-settings select { min-width: 0; width: 100%; }
#rulesSummary { font-weight: 700; color: #f1d487; }
.lane-progress { display: block; margin: 6px 0; }
.lane-badge { display: inline-block; min-width: 24px; padding: 3px; margin: 0 2px; text-align: center; border: 1px solid #888; border-radius: 4px; }
.death .lane-badge.scored { background: #923d39; border-color: #e8897d; }
.devil .lane-badge.scored { background: #35588f; border-color: #a1bcf0; }
.action-history, .playing-help { margin-top: 10px; }
.sidebar h2 { margin: 0 0 8px; font-size: 16px; }
aside { min-width: 0; padding: 12px; }
.controls { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button, select { background: #eee; color: #111; border: 0; border-radius: 8px; padding: 8px 11px; font: inherit; font-weight: 700; }
button { cursor: pointer; }
input { font: inherit; max-width: 100%; }
input[type="file"] { display: block; }
input[type="range"] { width: 100%; }
.controls > *, .controls label { min-width: 0; max-width: 100%; }
button { overflow-wrap: anywhere; }
button:disabled { opacity: .4; cursor: not-allowed; }
:focus-visible { outline: 3px solid #f6d365; outline-offset: 3px; }
.game { min-width: 0; max-width: min(100%, calc((100dvh - 70px) * .79879)); width: 100%; justify-self: center;
  position: relative; aspect-ratio: 2104 / 2634; isolation: isolate; }
.game[data-columns="4"] { aspect-ratio: 1683.2 / 2634; max-width: min(100%, calc((100dvh - 70px) * .63903)); }
.game[data-columns="3"] { aspect-ratio: 1262.4 / 2634; max-width: min(100%, calc((100dvh - 70px) * .47927)); }
/* Crop to the home realms and battleground; reference tables remain in the sidebar. */
.home { position: absolute; left: 0; width: 100%; height: 17.616%; min-height: 0; padding: 1%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3px; container-type: size;
  border-radius: 3px; background: rgb(0 0 0 / 72%); border: 1px solid rgb(255 255 255 / 30%); }
#home-death { top: 0; }
#home-devil { top: 82.764%; height: 17.236%; }
.home .die { width: clamp(10px, 3.6cqw, 24px); height: auto; aspect-ratio: 1; flex-shrink: 0;
  font-size: clamp(7px, 2.1cqw, 13px); border-width: 1px; border-radius: 3px; }
.home .dice { gap: 2px; overflow: auto; align-content: start; }
.home h2 { font-size: clamp(8px, 2.7cqw, 14px); margin: 0; }
.home .target-button { padding: 2px 4px; font-size: clamp(7px, 2cqw, 10px); margin: 0; justify-self: start; }
.home .target-button:disabled { visibility: hidden; }
#decisionTitle { font-size: 16px; margin: 0 0 8px; }
.dice { display: flex; gap: 6px; flex-wrap: wrap; }
.board-style { display: inline-block; margin-top: 10px; }
.board-scroll { position: absolute; left: 0; top: 17.616%; width: 100%; height: 65.148%; min-width: 0; overflow: visible; padding: 0; }
  .board { display: grid; grid-template-columns: repeat(var(--columns, 5), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), minmax(0, 1fr));
  width: 100%; height: 100%; min-width: 0; gap: 0; position: relative; }
/* Original A4 JPG: 3507 x 2480. Playable crop: x=438, y=188,
   width=2634, height=2104. Rotate counterclockwise and scale uniformly.
   Battlefield bounds in the original: x=892, y=188, w=1716, h=2104. */
.board-art { position: absolute; inset: 0; overflow: hidden; container-type: size; z-index: -1; pointer-events: none; }
.board-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 133.144cqh; height: 117.87cqw;
  background: url('../assets/66d6_board_dark_a4.jpg') center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(-90deg); }
.game[data-style="light"] .board-art::before { background-image: url('../assets/66d6_board_light_a4.jpg'); }
.cell { min-width: 0; min-height: 0; padding: 0; position: relative; border: 0; border-radius: 0; background: rgb(0 0 0 / 15%); container-type: size; }
.experimental .cell { isolation: isolate; }
.cell-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; z-index: -1; }
.cell-art::before { content: ''; position: absolute;
  left: calc(250% - var(--printed-column) * 100%); top: calc(199.184% - var(--row) * 100%);
  width: 817.483cqh; height: 589.354cqw;
  background: url('../assets/66d6_board_dark_a4.jpg') center / 100% 100% no-repeat;
  transform: translate(-50%, -50%) rotate(-90deg); }
.game[data-style="light"] .cell-art::before { background-image: url('../assets/66d6_board_light_a4.jpg'); }
.game[data-candidate="true"] .board-art::before { left: 0; top: 0; width: 100%; height: 100%; transform: none;
  background-image: url('../assets/66d6_candidate_dark.svg'); }
.game[data-candidate="true"][data-style="light"] .board-art::before { background-image: url('../assets/66d6_candidate_light.svg'); }
.game[data-candidate="true"] .cell-art { display: none; }
.game[data-candidate="true"] .home { background: transparent; }
.game[data-candidate="true"][data-style="light"] .home { color: #171923; border-color: rgb(0 0 0 / 30%); }
.game[data-small="true"] { aspect-ratio: var(--mini-ratio); max-width: min(100%, calc((100dvh - 70px) * var(--mini-ratio))); }
.game[data-small="true"] .board-art, .game[data-small="true"] .cell-art { display: none; }
.game[data-small="true"] .board-scroll { top: var(--mini-home-top); height: var(--mini-board-height); }
.game[data-small="true"] #home-death { height: var(--mini-home-top); background: #162b35; }
.game[data-small="true"] #home-devil { top: calc(100% - var(--mini-home-bottom)); height: var(--mini-home-bottom); background: #351b19; }
.game[data-small="true"] .cell { border: 1px solid #789; background: linear-gradient(#233640, #182125 50%, #3b2823); }
.game[data-small="true"][data-style="light"] .cell { background: linear-gradient(#cadde0, #c9c9c3 50%, #d1b7a3); }
.game[data-small="true"] .cell .die { left: 30%; width: 26%; }
.game[data-small="true"] .cell .die[data-slot="1"] { left: 70%; }
.game[data-small="true"] .home .target-button:disabled { display: none; }
.coord { position: absolute; top: 3%; right: 3%; padding: 1px 3px; border-radius: 3px; background: rgb(0 0 0 / 80%); color: #eee; font-size: clamp(6px, 7cqw, 11px); }
.side { position: absolute; inset: 0; pointer-events: none; }
/* Centers and size of the three printed slots in each army's row. */
.cell .die { position: absolute; left: 20%; top: 24%; width: 24%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%); font-size: clamp(8px, 12cqw, 22px); border-width: clamp(1px, 1cqw, 2px); border-radius: 15%; pointer-events: auto; }
.cell .die[data-slot="1"] { left: 50%; }
.cell .die[data-slot="2"] { left: 80%; }
.game[data-capacity="4"] .cell .die { left: 13%; width: 20%; }
.game[data-capacity="4"] .cell .die[data-slot="1"] { left: 37%; }
.game[data-capacity="4"] .cell .die[data-slot="2"] { left: 63%; }
.game[data-capacity="4"] .cell .die[data-slot="3"] { left: 87%; }
.cell .devilSide .die { top: 76%; }
.cell .die::after { content: ''; position: absolute; inset: -2px; }
.cell .target-button { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%);
  margin: 0; padding: 3px 5px; font-size: clamp(8px, 8cqw, 12px); max-width: 90%; z-index: 1; }
.die { width: 34px; height: 34px; padding: 0; border-radius: 7px; font-weight: 900; border: 2px solid #111; }
.die.death { background: #dc625a; }
.die.devil { background: #6591e8; }
.die:disabled { opacity: .8; }
.cell .target-button:disabled { visibility: hidden; }
.die.selected { outline: 3px solid white; }
.die.eligible { outline: 3px solid #f6d365; outline-offset: 1px; }
.die.fighting { box-shadow: 0 0 0 2px white; }
.die.eligible:focus-visible { outline-offset: 4px; }
.save-status { color: #b7d7b7; font-size: 13px; }
.warning { color: #ffd07c; }
#combatPreview { padding: 10px; background: #111; border-radius: 8px; }
#combatSummary { margin: 0; line-height: 1.6; }
#recordingTools, #replayControls { margin: 12px 0; padding: 10px; border: 1px solid #777; border-radius: 8px; }
summary { cursor: pointer; }
.home.target { box-shadow: 0 0 0 3px #f6d365; }
.cell.target { box-shadow: inset 0 0 0 3px #f6d365; background: rgb(0 0 0 / 35%); }
.target-button { font-size: 12px; margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; }
.tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
table { width: 100%; table-layout: fixed; overflow-wrap: anywhere; border-collapse: collapse; font-size: 13px; }
th[scope="row"] { width: 38%; }
td, th, caption { border: 1px solid #777; padding: 4px; }
#status { min-height: 1.3em; color: #f1d487; }
.ai-note { font-size: 13px; color: #bbb; }
.log { margin: 8px 0 0; padding-left: 22px; max-height: 120px; overflow: auto; font-size: 13px; color: #ddd; }
.log li { margin: 2px 0; }
#decision { padding: 12px; margin: 12px 0; border: 2px solid #f6d365; border-radius: 8px; }
a { color: #9dc4ff; }
@media (max-width: 750px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .game { max-width: 100%; }
  .game[data-columns] { max-width: 100%; }
  header { flex-wrap: wrap; gap: 3px; }
}
@media (max-width: 500px) {
  main { padding: 6px; gap: 10px; }
  .die { width: 28px; height: 28px; }
  .target-button { padding: 6px 4px; font-size: 11px; }
}