/* ДЮЖИНА — консольна гра на d12. Дизайн у стилі farkle.shelupets.com.ua */

:root {
  --bg: #050805;
  --fg: #3ad15c;
  --fg-dim: rgba(58, 209, 92, 0.55);
  --border: rgba(58, 209, 92, 0.45);
  --amber: #ffd24a;
  --red: #ff5c5c;
  --chip-text: #1a1405;
}
body[data-theme="amber"] {
  --bg: #0a0703;
  --fg: #ffb000;
  --fg-dim: rgba(255, 176, 0, 0.55);
  --border: rgba(255, 176, 0, 0.45);
  --amber: #7dff9a;
  --chip-text: #041a09;
}
body[data-theme="blue"] {
  --bg: #030609;
  --fg: #53a8ff;
  --fg-dim: rgba(83, 168, 255, 0.55);
  --border: rgba(83, 168, 255, 0.45);
  --amber: #ffd24a;
  --chip-text: #1a1405;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  min-height: 100vh;
}

#app { min-height: 100vh; }

.hidden { display: none !important; }

button {
  font: inherit;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.55em 1.3em;
  cursor: pointer;
  text-align: center;
}
button:hover:not(:disabled) {
  border-color: var(--fg);
  text-shadow: 0 0 8px var(--fg-dim);
}
button:focus-visible { outline: 1px dashed var(--fg); outline-offset: 2px; }
button:disabled { opacity: 0.35; cursor: default; }
button.primary { color: var(--amber); border-color: var(--amber); }
button.active { background: var(--fg); color: var(--bg); font-weight: 700; }

kbd {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  border-radius: 3px;
  padding: 0 0.4em;
  margin-left: 0.55em;
  font-size: 0.85em;
  font-family: inherit;
}
button:disabled kbd { opacity: 0.6; }
button.active kbd { background: var(--bg); color: var(--fg); }

/* ================= МЕНЮ ================= */

.screen-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2em 1em;
}

.logo {
  color: var(--amber);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 1px;
  margin: 0 0 0.6em 0;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 210, 74, 0.45);
  user-select: none;
}
body[data-theme="amber"] .logo { text-shadow: 3px 3px 0 rgba(0,0,0,.9), 0 0 18px rgba(125,255,154,.4); }

.subtitle {
  color: var(--fg-dim);
  margin-bottom: 2.2em;
}
.subtitle::first-letter { color: var(--fg); }

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  width: 300px;
  max-width: 90vw;
}
.menu-buttons button { width: 100%; }

.version {
  margin-top: 4em;
  color: var(--fg-dim);
  font-size: 0.85em;
}

/* ================= ЕКРАН ГРИ ================= */

#scr-game { padding: 1em 1.6em 2em; max-width: 1200px; margin: 0 auto; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}
.chips { display: flex; gap: 0.6em; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border);
  padding: 0.25em 0.75em;
  white-space: nowrap;
}
.chip.cur {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--chip-text);
  font-weight: 700;
}
.chip.done { border-color: var(--amber); color: var(--amber); }
.chip.cur.done { color: var(--chip-text); }

.topbar-right { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.goal { font-weight: 700; margin-right: 0.4em; }
button.mini { padding: 0.3em 0.8em; }

.hud {
  margin-top: 1em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.hud .x2 { color: var(--amber); }
.hud .sep { color: var(--fg-dim); font-weight: 400; padding: 0 0.35em; }

.progress { margin-top: 0.5em; color: var(--fg-dim); }
.progress b { color: var(--fg); }
.progress .bar { letter-spacing: 1px; }
.progress .bar .fill { color: var(--amber); }

.play-area {
  display: flex;
  align-items: center;
  gap: 3em;
  margin: 0.6em 0 0.4em;
  flex-wrap: wrap;
}

.die-wrap {
  width: 230px;
  display: flex;
  justify-content: center;
  user-select: none;
}
#die {
  width: 215px;
  height: 215px;
  color: var(--fg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 7px var(--fg-dim));
}
.die-faces polygon {
  fill: currentColor;
  stroke: none;
}
.die-lines polygon, .die-lines line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#die-num {
  fill: var(--amber);
  font-family: inherit;
  font-size: 38px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.die-wrap.rolling #die { animation: roll-scale 0.4s ease-in-out infinite; }
.die-wrap.rolling #die-num { fill: var(--fg); }
.die-wrap.land #die { animation: pop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
.die-wrap.bust #die { color: var(--red); filter: drop-shadow(0 0 12px rgba(255, 92, 92, 0.6)); }
.die-wrap.bust #die-num { fill: var(--red); }
.die-wrap.doubled #die { color: var(--amber); animation: pulse12 1.1s ease-in-out infinite; }
@keyframes roll-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.92); }
}
@keyframes pop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes pulse12 {
  0%, 100% { filter: drop-shadow(0 0 5px var(--amber)); }
  50%      { filter: drop-shadow(0 0 18px var(--amber)); }
}

.roll-panel { text-align: center; min-width: 220px; }
.bank-label { color: var(--fg-dim); }
.bank-big {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  min-height: 64px;
}
.bank-big .x2 { color: var(--amber); font-size: 0.55em; vertical-align: middle; }
.roll-note { min-height: 1.4em; font-weight: 700; }
.roll-note.good { color: var(--amber); }
.roll-note.bad { color: var(--red); }

.hours {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.2em 0 0.5em;
}
.hours-label { color: var(--fg-dim); margin-right: 0.6em; }
.hour {
  border: 1px solid var(--border);
  min-width: 2em;
  text-align: center;
  padding: 0.12em 0.15em;
  color: var(--fg-dim);
}
.hour.occ {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--chip-text);
  font-weight: 700;
}
.hour.dead {
  border-color: rgba(255, 92, 92, 0.55);
  color: var(--red);
}

.warn { min-height: 1.5em; margin: 0.2em 0 0.6em; font-weight: 700; }
.warn.bad { color: var(--red); }
.warn.good { color: var(--amber); animation: blink 1s steps(2) infinite; }
.warn.hint { color: var(--fg); }
@keyframes blink { 50% { opacity: 0.45; } }

.actions { display: flex; gap: 0.8em; flex-wrap: wrap; margin-bottom: 1.2em; }

.log-title { color: var(--fg-dim); margin-bottom: 0.4em; }
.log {
  border: 1px solid var(--border);
  padding: 0.7em 1em;
  height: 13em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.log p { margin: 0 0 0.15em; color: var(--fg-dim); }
.log p.last { color: var(--fg); font-weight: 700; }
.log p.bad { color: var(--red); }
.log p.good { color: var(--amber); }
.log p.dim { opacity: 0.8; }

/* ================= ОВЕРЛЕЙ ФІНІШУ ================= */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.overlay-box {
  background: var(--bg);
  border: 1px solid var(--amber);
  box-shadow: 0 0 30px rgba(255, 210, 74, 0.25);
  padding: 2em 3em;
  text-align: center;
  max-width: 90vw;
}
.overlay-title {
  color: var(--amber);
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.8em;
  text-shadow: 0 0 14px rgba(255, 210, 74, 0.5);
}
.overlay-body { margin-bottom: 1.5em; line-height: 1.6; }
.overlay-actions { display: flex; gap: 0.8em; justify-content: center; flex-wrap: wrap; }

/* ================= СТОРІНКИ (правила, налаштування…) ================= */

.screen-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2em 1.6em 3em;
}
.screen-page h1 {
  color: var(--fg-dim);
  font-size: 1.1em;
  font-weight: 400;
  margin: 0 0 1.4em;
}
.screen-page h2 { color: var(--amber); font-size: 1em; margin: 1.4em 0 0.4em; }

.setup-row {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.setup-row .label { min-width: 220px; }
.opt-group { display: inline-flex; gap: 0.5em; flex-wrap: wrap; }
.opt-group button { padding: 0.3em 1em; }

.player-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.6em;
  flex-wrap: wrap;
}
.player-row input[type="text"] {
  font: inherit;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.3em 0.7em;
  width: 180px;
}
.player-row input[type="text"]:focus { outline: none; border-color: var(--fg); }
.player-row .num { color: var(--fg-dim); width: 1.5em; }

.page-actions { margin-top: 2em; display: flex; gap: 0.8em; flex-wrap: wrap; }
.note { color: var(--fg-dim); }

/* правила */
.rules { line-height: 1.55; }
.rules b { color: var(--fg); }
.rules .amber, .amber { color: var(--amber); }
.rules .red, .red { color: var(--red); }
.rules ol { padding-left: 1.4em; }
.rules li { margin-bottom: 0.6em; }
.rules-table { border-collapse: collapse; margin: 0.8em 0; }
.rules-table th, .rules-table td {
  border: 1px solid var(--border);
  padding: 0.45em 0.9em;
  text-align: left;
  vertical-align: top;
}
.rules-table th { color: var(--amber); font-weight: 700; }
.example { border-left: 3px solid var(--amber); padding-left: 1em; color: var(--fg-dim); }
.example b { color: var(--amber); }

/* статистика */
.stats-table { border-collapse: collapse; margin-bottom: 1.4em; }
.stats-table td { padding: 0.25em 1.2em 0.25em 0; }
.stats-table td:last-child { color: var(--amber); font-weight: 700; }
.stats-list p { margin: 0.2em 0; color: var(--fg-dim); }
.stats-list p b { color: var(--fg); }

/* ================= МОБІЛЬНЕ ================= */

@media (max-width: 720px) {
  #scr-game { padding: 0.8em 0.8em 1.5em; }
  .play-area { gap: 1em; justify-content: center; }
  .die-wrap { width: 165px; }
  #die { width: 155px; height: 155px; }
  .bank-big { font-size: 44px; min-height: 52px; }
  .roll-panel { min-width: 160px; }
  .setup-row .label { min-width: 100%; }
  .overlay-box { padding: 1.5em 1.2em; }
  .logo { font-size: 7px; }
}