/* Konquest on the Yodacon console: lib/yodacon-style.css gives the look
   (docs/STYLE.md); this file lays out the game and styles the board. */
body { padding: 12px 16px 24px; }
.muted { color: var(--yc-phos-dim); }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; max-width: 1220px; margin: 0 auto 12px; }
.top h1 { font-size: clamp(22px, 4vw, 34px); }
.crumbs { margin: 0; width: 100%; font-size: 0.85rem; }
.status { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.turnbox { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; }
.turn-value { font-size: 20px; }
.who { color: var(--yc-ice); font-weight: 700; letter-spacing: 0.06em; }

.game { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 12px; max-width: 1220px; margin: 0 auto; }
@media (max-width: 880px) { .game { grid-template-columns: minmax(0, 1fr); } }

/* ---- the board: a viewport onto space ---- */
.board-wrap { position: relative; align-self: start; padding: 3px; }
.board { display: grid; gap: 2px; grid-template-columns: repeat(var(--cols), 1fr); aspect-ratio: var(--cols) / var(--rows);
  background-color: #000;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #fff5 50%, transparent 51%);
  background-size: 97px 89px, 131px 113px, 71px 67px; border-radius: 4px; }
.cell { position: relative; border-radius: 3px; min-width: 0; box-shadow: inset 0 0 0 1px rgb(92 255 92 / 0.05); }
/* A planet's square glows faintly in its owner's colour, framed like a lit instrument. */
.cell.planet { cursor: pointer;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--owner) 30%, transparent), transparent 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--owner) 75%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--owner) 35%, transparent); }
.cell.planet:hover { box-shadow: inset 0 0 0 2px var(--owner), inset 0 0 18px color-mix(in srgb, var(--owner) 50%, transparent); }
.cell.planet canvas { position: absolute; inset: 12%; width: 76%; height: 76%; }
.cell.planet img.pic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  image-rendering: pixelated; height: auto; }
.cell.planet img.small { width: 46%; }
.cell.planet img.medium { width: 66%; }
.cell.planet img.large { width: 84%; }
.cell .name, .cell .ships { position: absolute; font: 700 clamp(9px, 1.5vw, 13px)/1 var(--yc-mono);
  color: var(--yc-phos); text-shadow: 0 0 4px #000, 0 0 6px rgb(92 255 92 / 0.6); pointer-events: none; }
.cell .name { top: 3px; left: 4px; color: var(--yc-ice); text-shadow: 0 0 4px #000; }
.cell .ships { bottom: 3px; right: 4px; }
.cell.source { box-shadow: inset 0 0 0 3px var(--yc-phos), 0 0 14px rgb(92 255 92 / 0.5); }
.cell.target { box-shadow: inset 0 0 0 3px var(--yc-amber), 0 0 14px rgb(255 179 64 / 0.5); }
.fleets { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }

.cover { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center;
  background: rgb(2 4 6 / 0.95); border-radius: 6px; color: var(--yc-ice); font: 700 18px/1.4 var(--yc-title);
  letter-spacing: 0.12em; text-transform: uppercase; }
.cover[hidden] { display: none; }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 7px 10px; border-radius: 4px; white-space: nowrap;
  background: #020d03; color: var(--yc-phos); font: 700 12px/1.4 var(--yc-mono);
  border: 1px solid rgb(92 255 92 / 0.5); box-shadow: 0 0 14px rgb(92 255 92 / 0.25), 0 6px 14px #000c; }
.tip dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 0 10px; }
.tip dt { color: var(--yc-phos-dim); }
.tip dd { margin: 0; }

/* ---- the side: engraved panels ---- */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.yc-panel form p { margin: 6px 0; }
#send-route { color: var(--yc-phos); font-weight: 700; margin-top: 0; }
label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; }
label.check { display: flex; }
input { width: 6em; }
.orders, .news { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.orders li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--yc-text); }
.orders .yc-plate, .orders button { padding: 4px 8px; font-size: 10px; }
.news { max-height: 320px; overflow: auto; font-size: 0.85rem; }
.news li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; }
.news img { width: 40px; height: 40px; border-radius: 3px; background: #000; object-fit: cover;
  image-rendering: pixelated; box-shadow: 0 0 0 1px var(--yc-chrome-lo); }
.news .turnhead { grid-template-columns: 1fr; color: var(--yc-violet); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; border-top: 1px solid rgb(92 255 92 / 0.2); padding-top: 4px; text-shadow: none; }
.standings { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.standings th, .standings td { padding: 3px 4px; text-align: right; border-bottom: 1px solid rgb(92 255 92 / 0.18); }
.standings th { color: var(--yc-phos-dim); font-size: 0.7rem; letter-spacing: 0.08em; }
.standings th:first-child, .standings td:first-child { text-align: left; }
.standings tr.dead td { opacity: 0.4; text-decoration: line-through; }

/* ---- the new-game dialog: a console of its own ---- */
dialog { color: var(--yc-text); max-width: min(660px, calc(100vw - 32px)); padding: 16px; }
dialog::backdrop { background: rgb(0 0 0 / 0.7); }
dialog h2 { margin: 0 0 12px; font-size: 18px; }
fieldset { border: 2px solid; border-color: var(--yc-chrome-lo) var(--yc-chrome-hi) var(--yc-chrome-hi) var(--yc-chrome-lo);
  border-radius: 6px; margin: 0 0 10px; background: var(--yc-deck); }
legend { color: var(--yc-ice); font: 700 11px/1 var(--yc-title); letter-spacing: 0.24em; text-transform: uppercase; padding: 0 6px; }
.setup-players { padding-left: 1.4em; margin: 4px 0; display: grid; gap: 6px; }
.setup-players li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.setup-players input { width: 9em; }
.setup-players img { width: 32px; height: 32px; image-rendering: pixelated; background: #000; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--yc-chrome-lo); }
.grid2 { display: flex; flex-wrap: wrap; }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 0; }
.credit { max-width: 1220px; margin: 16px auto 0; color: var(--yc-phos-dim); font-size: 0.75rem; }

/* Phones: the standings table scrolls inside its screen, and the console is thinner. */
.yc-crt:has(> .standings) { overflow-x: auto; }
@media (max-width: 520px) {
  body { padding: 8px 8px 20px; }
  .game.yc-console { padding: 6px; border-width: 2px; }
  .standings th, .standings td { padding: 3px 2px; }
}

/* ---- the end of a game, and the rules ---- */
.ending-title { margin: 0; font: 700 clamp(22px, 4vw, 36px)/1.1 var(--yc-title); letter-spacing: 0.3em; color: var(--yc-ice);
  text-shadow: 0 0 22px rgb(190 225 255 / 0.4); }
.ending-title.lost { color: var(--yc-hal); text-shadow: 0 0 22px rgb(255 42 26 / 0.45); }
.ending-title.won { color: var(--yc-phos); text-shadow: 0 0 22px rgb(92 255 92 / 0.5); }
.ending-text { margin: 0; font: 400 15px/1.5 var(--yc-mono); letter-spacing: 0.04em; text-transform: none; color: var(--yc-text); }
.cover p { margin: 0; }
.help > summary { list-style: none; cursor: pointer; margin-bottom: -10px; }
.help[open] > summary { margin-bottom: 8px; }
.help > summary::-webkit-details-marker { display: none; }
.help > summary::after { content: " ▸"; }
.help[open] > summary::after { content: " ▾"; }
.help ol { margin: 0; padding-left: 1.3em; font-size: 0.85rem; display: grid; gap: 4px; }
.help b { color: var(--yc-phos); }
.help p { font-size: 0.8rem; margin: 8px 0 0; }