/* ============================================================
   Svédkocka — skandináv játékest
   krémpapír · svédkék filc · elefántcsont kockák · mustár akcent
   ============================================================ */

:root {
  --paper: #f3ebdb;
  --paper-2: #eadfc7;
  --card: #fbf7ec;
  --ink: #22304a;
  --ink-2: #4a5872;
  --line: #d9cbab;
  --blue: #1f4e8c;
  --blue-deep: #16365f;
  --blue-light: #2d63ab;
  --sun: #f2b23e;
  --sun-deep: #d3961d;
  --sun-ink: #3d2c05;
  --red: #bf4530;
  --red-soft: #e8d3c6;
  --green: #3e7d52;
  --die-ivory: #fdfaf1;
  --die-edge: #e4dbc4;
  --pip: #243350;

  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: Corbel, Candara, "Segoe UI", "Trebuchet MS", sans-serif;
  --font-num: Consolas, "Cascadia Mono", "Courier New", monospace;

  --die: 68px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(34, 48, 74, .12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(242, 178, 62, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(31, 78, 140, .10), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
}

/* finom papírszemcse az egész oldalon */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; }

/* ---------- fejléc ---------- */

.topbar {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 20px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-die {
  position: relative;
  width: 44px; height: 44px;
  background: linear-gradient(150deg, var(--die-ivory), #f1ead6);
  border: 2px solid var(--ink);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  transform: rotate(-8deg);
  box-shadow: 3px 4px 0 rgba(34, 48, 74, .25);
}

.brand-text h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: .06em;
  line-height: 1;
}
.brand-sub {
  display: block;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}

.topnav { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- gombok ---------- */

.btn {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  background: none;
}
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* link gombként (pl. vissza a főoldalra) */
a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.btn-primary {
  background: linear-gradient(180deg, #f7c159, var(--sun) 55%, var(--sun-deep));
  color: var(--sun-ink);
  border-color: var(--sun-deep);
  box-shadow: 0 5px 0 #a97a14, 0 10px 22px rgba(211, 150, 29, .35);
  font-size: 19px;
  padding: 13px 34px;
}
.btn-primary:hover:not([disabled]) { filter: brightness(1.05); }
.btn-primary:active:not([disabled]) { box-shadow: 0 2px 0 #a97a14; transform: translateY(3px); }

.btn-stop {
  background: var(--card);
  border-color: var(--ink);
  color: var(--ink);
  font-size: 19px;
  padding: 13px 28px;
  box-shadow: 0 5px 0 rgba(34, 48, 74, .5);
}
.btn-stop:hover:not([disabled]) { background: var(--ink); color: var(--card); }
.btn-stop:active:not([disabled]) { box-shadow: 0 2px 0 rgba(34,48,74,.5); transform: translateY(3px); }

.btn-ghost { color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: rgba(34, 48, 74, .08); }

.btn-outline { border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--card); }

/* ---------- állapotsor ---------- */

.stage { max-width: 980px; margin: 0 auto; padding: 0 20px 30px; }

.statusbar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 92px;
  box-shadow: 0 2px 0 rgba(34, 48, 74, .06);
}
.stat-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-2);
}
.stat-v {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
}

.stat-diff { margin-left: auto; }

.seg { display: flex; gap: 4px; margin-top: 3px; }
.seg-b {
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 9px;
  padding: 3px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}
.seg-b.is-on { background: var(--ink); color: var(--card); }
.seg-b[disabled] { opacity: .5; cursor: not-allowed; }
.seg-b:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }

/* ---------- játéktábla (kék filc) ---------- */

.board {
  position: relative;
  border-radius: 22px;
  padding: 20px 22px 26px;
  background:
    radial-gradient(120% 130% at 50% -20%, var(--blue-light), var(--blue) 55%, var(--blue-deep)),
    var(--blue);
  box-shadow:
    inset 0 0 0 3px rgba(242, 178, 62, .55),
    inset 0 0 0 6px rgba(23, 54, 95, .9),
    inset 0 14px 44px rgba(9, 22, 44, .55),
    var(--shadow-soft);
  overflow: hidden;
}
/* filc textúra */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* varrott szegély */
.board::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  border: 2px dashed rgba(251, 247, 236, .25);
  pointer-events: none;
}

.board-hint {
  text-align: center;
  color: rgba(251, 247, 236, .85);
  font-size: 16px;
}
.board-hint strong { color: var(--sun); }

/* üzenetsáv — fix, fenntartott hely a tábla tetején; megjelenése semmit sem mozdít el */
.banner {
  position: absolute;
  top: 14px;
  left: 22px;
  right: 22px;
  z-index: 5;
  text-align: center;
  border-radius: 10px;
  font-weight: 700;
  padding: 9px 14px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(9, 22, 44, .35);
}
.banner.show {
  opacity: 1;
  transform: translateY(0);
}
.banner.b-info { background: rgba(251, 247, 236, .92); color: var(--ink); }
.banner.b-warn { background: var(--sun); color: var(--sun-ink); }
.banner.b-danger { background: var(--red); color: #fff; }
.banner.b-success { background: var(--green); color: #fff; }

/* ---------- kockák ---------- */

.dice-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  /* felül az üzenetsáv fenntartott helye */
  padding: 64px 0 18px;
}

.die {
  position: relative;
  width: calc(var(--die) + 26px);
  height: calc(var(--die) + 34px);
  background: none;
  border: 0;
  padding: 0;
  perspective: 700px;
  cursor: default;
}
.die:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; border-radius: 14px; }

.die-ring {
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.die-shadow {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 74%; height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(5, 14, 30, .55), transparent 70%);
  border-radius: 50%;
  transition: transform .2s ease, opacity .2s ease;
}

.die-lift {
  position: absolute;
  left: 50%; top: 55%;
  width: var(--die); height: var(--die);
  margin: calc(var(--die) / -2) 0 0 calc(var(--die) / -2);
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

.cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.2, .85, .3, 1.04);
  transition-duration: .9s;
}

.face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 9%;
  background:
    linear-gradient(145deg, #ffffff 0%, var(--die-ivory) 45%, #efe7cf 100%);
  border: 1px solid var(--die-edge);
  border-radius: 16%;
  box-shadow: inset 0 0 10px rgba(120, 105, 70, .18);
  backface-visibility: hidden;
}
.f1 { transform: translateZ(calc(var(--die) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--die) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--die) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }

/* pöttyök — 3×3 rács cellái */
.pip {
  width: 68%; height: 68%;
  place-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #46587e 12%, var(--pip) 58%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .45);
}
.pip.p1 { grid-area: 1 / 1; }
.pip.p2 { grid-area: 1 / 2; }
.pip.p3 { grid-area: 1 / 3; }
.pip.p4 { grid-area: 2 / 1; }
.pip.p5 { grid-area: 2 / 2; }
.pip.p6 { grid-area: 2 / 3; }
.pip.p7 { grid-area: 3 / 1; }
.pip.p8 { grid-area: 3 / 2; }
.pip.p9 { grid-area: 3 / 3; }
/* az 1-es középső pöttye hagyományosan piros */
.face .pip.p5:only-child { background: radial-gradient(circle at 34% 30%, #d96a52 12%, var(--red) 58%); }

/* kocka állapotok */
.die.is-idle .die-lift { opacity: .45; }
.die.is-idle .face { background: rgba(251, 247, 236, .35); border: 2px dashed rgba(251, 247, 236, .5); box-shadow: none; }
.die.is-idle .pip { visibility: hidden; }

/* kivehető: halvány, szaggatott, pulzáló keret — a sárga a kivetteké */
.die.is-selectable { cursor: pointer; }
.die.is-selectable .die-ring {
  border: 2px dashed rgba(251, 247, 236, .75);
  animation: ringPulse 1.4s ease-in-out infinite;
}
.die.is-selectable:hover .die-lift { transform: translateY(-5px); }
.die.is-selectable:hover .die-ring { border-color: rgba(251, 247, 236, 1); }

/* kivett: erős sárga keret, ragyogás, megemelés és pipa-jelvény */
.die.is-held { cursor: pointer; }
.die.is-held .die-lift { transform: translateY(-13px) scale(1.05); }
.die.is-held .die-ring {
  border: 3px solid var(--sun);
  background: rgba(242, 178, 62, .13);
  box-shadow:
    0 0 0 3px rgba(242, 178, 62, .4),
    0 0 28px rgba(242, 178, 62, .8),
    inset 0 0 16px rgba(242, 178, 62, .3);
}
.die.is-held .die-shadow { transform: translateX(-50%) scale(.82); opacity: .8; }

.die-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 6;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--sun-ink);
  border: 2px solid var(--sun-deep);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(9, 22, 44, .4);
  opacity: 0;
  transform: scale(.3) rotate(-30deg);
  transition: opacity .18s ease, transform .18s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.die.is-held .die-badge,
.die-badge.on { opacity: 1; transform: scale(1) rotate(0deg); }

.die.is-frozen .die-lift {
  transform: translateY(9px) scale(.74);
  filter: grayscale(.75) brightness(.82);
  opacity: .6;
}
.die.is-frozen .die-shadow { transform: translateX(-50%) scale(.6); opacity: .4; }

@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 247, 236, .5); }
  50% { box-shadow: 0 0 0 7px rgba(251, 247, 236, 0); }
}

/* dobás: pattogás */
.die.is-hopping .die-lift { animation: hop var(--hop-dur, .9s) cubic-bezier(.3, .5, .4, 1) both; }
.die.is-hopping .die-shadow { animation: shadowHop var(--hop-dur, .9s) cubic-bezier(.3, .5, .4, 1) both; }

@keyframes hop {
  0% { transform: translateY(0); }
  28% { transform: translateY(-34px); }
  58% { transform: translateY(2px); }
  76% { transform: translateY(-12px); }
  92% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes shadowHop {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  28% { transform: translateX(-50%) scale(.55); opacity: .5; }
  58% { transform: translateX(-50%) scale(1.02); opacity: 1; }
  76% { transform: translateX(-50%) scale(.8); opacity: .7; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* tiltott kattintás — rázás */
.die.is-denied { animation: deny .35s ease; }
@keyframes deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

/* ---------- felbontás-választó (1-esek / 5-ösök) ---------- */

/* állandó magasságú alsó sáv: üresen is helyet foglal, így nem ugrál a tábla */
.optbox {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100px;
  padding-bottom: 4px;
}
.optgroup {
  background: rgba(251, 247, 236, .95);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(9, 22, 44, .35);
  max-width: 100%;
}
.optgroup h4 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.optlist { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 4px 11px;
  cursor: pointer;
  font-family: var(--font-num);
  font-size: 15px;
  background: var(--card);
  user-select: none;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.is-on { border-color: var(--sun-deep); background: var(--sun); color: var(--sun-ink); font-weight: 700; }
.opt.is-off { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.opt:focus-within { outline: 3px solid var(--sun); outline-offset: 1px; }

/* ---------- pontkártyák és akciók ---------- */

.dash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 18px 0 8px;
}

.scorecards { display: flex; gap: 12px; flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 20px;
  min-width: 118px;
  box-shadow: 0 2px 0 rgba(34, 48, 74, .06);
}
.card-l {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-2);
}
.card-v {
  font-family: var(--font-num);
  font-size: 30px;
  line-height: 1.15;
}
.card-total { background: var(--ink); border-color: var(--ink); }
.card-total .card-l { color: rgba(251, 247, 236, .7); }
.card-total .card-v { color: var(--sun); }
.card-v.bump { animation: bump .35s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.actions { display: flex; gap: 14px; align-items: center; }

/* ---------- haladássáv az 1000-ig ---------- */

.trackwrap { margin-top: 20px; }

.track {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.track-zone {
  position: absolute;
  top: 0; bottom: 0;
  left: 40%; width: 10%;
  background: repeating-linear-gradient(135deg, var(--red-soft) 0 7px, rgba(191, 69, 48, .55) 7px 14px);
  border-left: 1px solid var(--red);
  border-right: 1px solid var(--red);
}
.track-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: linear-gradient(180deg, var(--blue-light), var(--blue-deep));
  border-radius: 10px 0 0 10px;
  transition: width .5s cubic-bezier(.3, .8, .3, 1);
}
.track-ghost {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 0;
  background: repeating-linear-gradient(135deg, rgba(242, 178, 62, .95) 0 8px, rgba(242, 178, 62, .55) 8px 16px);
  transition: left .5s cubic-bezier(.3, .8, .3, 1), width .5s cubic-bezier(.3, .8, .3, 1);
}
.track-goal {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-52%);
  font-size: 13px;
  color: var(--sun-deep);
}
.track.flash-zone .track-zone { animation: zoneFlash .6s ease 2; }
@keyframes zoneFlash {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.5) saturate(2); }
}

.track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 5px;
  font-family: var(--font-num);
}
.tl-zone { color: var(--red); letter-spacing: .04em; }

.foot {
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 20px 26px;
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: .05em;
}

/* ---------- párbeszédablakok ---------- */

.dlg {
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: var(--card);
  color: var(--ink);
  width: min(520px, calc(100vw - 36px));
  box-shadow: 0 30px 80px rgba(9, 22, 44, .45);
}
.dlg-wide { width: min(760px, calc(100vw - 36px)); }
.dlg::backdrop { background: rgba(18, 28, 48, .55); backdrop-filter: blur(3px); }

.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 2px solid var(--paper-2);
  background: linear-gradient(180deg, #fffdf6, var(--card));
  border-radius: 18px 18px 0 0;
}
.dlg-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: .04em;
}
.dlg-head-win { justify-content: center; background: linear-gradient(180deg, #f7c159, var(--sun)); }
.dlg-head-win h2 { color: var(--sun-ink); }

.dlg-x {
  border: 0;
  background: none;
  font-size: 19px;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 8px;
  color: var(--ink-2);
}
.dlg-x:hover { background: var(--paper-2); color: var(--ink); }

.dlg-body { padding: 20px 24px 24px; max-height: min(72vh, 640px); overflow-y: auto; }
.dlg-center { text-align: center; }

.dlg-note .dlg-body { padding-top: 28px; }
.note-icon {
  width: 58px; height: 58px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note-icon.note-ask { background: var(--blue); }
.note-icon.note-info { background: var(--blue); }
.dlg-note h2 { font-family: var(--font-display); margin: 4px 0 8px; }
.dlg-note p { margin: 0 0 18px; color: var(--ink-2); }

.btnrow { display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* toplista */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 10px;
  padding: 6px 20px;
  cursor: pointer;
  font-weight: 700;
}
.tab.is-on { background: var(--ink); color: var(--card); }
.tab:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }

.toptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.toptable th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  border-bottom: 2px solid var(--paper-2);
  padding: 6px 8px;
}
.toptable td { padding: 7px 8px; border-bottom: 1px solid var(--paper-2); }
.toptable td.num { font-family: var(--font-num); text-align: right; }
.toptable th.num { text-align: right; }
.toptable tr.is-new td { background: rgba(242, 178, 62, .28); font-weight: 700; }
.toptable tr:first-child .medal { color: var(--sun-deep); }
.top-empty {
  text-align: center;
  color: var(--ink-2);
  padding: 26px 10px;
  font-style: italic;
}
.top-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: .03em;
}

/* győzelem */
.win-lead { font-size: 18px; margin: 4px 0 14px; }
.win-stats { margin: 0 auto 14px; border-collapse: collapse; }
.win-stats th, .win-stats td { padding: 4px 14px; text-align: left; }
.win-stats th { color: var(--ink-2); font-weight: 400; }
.win-stats td { font-family: var(--font-num); font-weight: 700; }
.win-score {
  background: var(--ink);
  color: var(--card);
  border-radius: 14px;
  padding: 10px 18px;
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.win-score span { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: rgba(251,247,236,.7); }
.win-score strong { font-family: var(--font-num); font-size: 34px; color: var(--sun); }
.win-qualify { font-weight: 700; color: var(--green); margin: 6px 0 8px; }
.win-form input {
  display: block;
  margin: 0 auto 12px;
  font: inherit;
  padding: 9px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  width: min(280px, 100%);
  text-align: center;
  background: #fffdf6;
}
.win-form input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
.win-noq { color: var(--ink-2); font-style: italic; }

/* ---------- szabályok tartalma ---------- */

.rules-body { font-size: 16px; }
.rules-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .03em;
  margin: 26px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--paper-2);
  display: flex;
  align-items: center;
  gap: 9px;
}
.rules-body h3:first-child { margin-top: 0; }
.rules-body h3 .hdie {
  width: 17px; height: 17px;
  border-radius: 4px;
  background: var(--sun);
  border: 2px solid var(--sun-deep);
  transform: rotate(-8deg);
  flex: none;
}
.rules-body p { margin: 8px 0; }
.rules-body ul { margin: 8px 0; padding-left: 22px; }
.rules-body li { margin: 5px 0; }
.rules-body .note {
  background: var(--paper-2);
  border-left: 4px solid var(--sun-deep);
  border-radius: 0 10px 10px 0;
  padding: 9px 14px;
  margin: 12px 0;
}

.mini-die {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 30px; height: 30px;
  padding: 4px;
  background: linear-gradient(150deg, #fff, var(--die-ivory));
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  vertical-align: middle;
  margin: 1px;
  box-shadow: 1px 2px 0 rgba(34, 48, 74, .18);
}
.mini-die .pip { width: 76%; height: 76%; box-shadow: none; }
.mini-die.md-dim { opacity: .4; filter: grayscale(1); }
.mini-die.md-take { outline: 2px solid var(--sun-deep); outline-offset: 1px; }

.rule-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.rule-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  border-bottom: 2px solid var(--paper-2);
  padding: 6px 8px;
}
.rule-table td { padding: 8px; border-bottom: 1px solid var(--paper-2); vertical-align: middle; }
.rule-table td.pts { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

.ex-roll {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.ex-roll .arr { margin: 0 8px; color: var(--ink-2); font-weight: 700; }
.ex-pts { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

/* tiltott sáv ábra */
.band {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 10px 0 4px;
  font-family: var(--font-num);
  font-size: 14px;
  text-align: center;
}
.band > div { padding: 8px 6px; }
.band .b-ok { flex: 4; background: #e4ecdd; color: var(--green); }
.band .b-no {
  flex: 1.2;
  background: repeating-linear-gradient(135deg, var(--red-soft) 0 8px, rgba(191, 69, 48, .5) 8px 16px);
  color: #7c2413;
  font-weight: 700;
}
.band .b-ok2 { flex: 5; background: #e4ecdd; color: var(--green); }
.band-cap { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }

/* képletek */
.formula {
  background: var(--ink);
  color: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-num);
  font-size: 15px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: nowrap;
}
.formula b { color: var(--sun); font-weight: 700; }

/* minta-kör lépések */
.walk { counter-reset: lep; margin: 12px 0; }
.walk-step {
  position: relative;
  padding: 10px 12px 10px 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 8px 0;
  background: #fffdf6;
}
.walk-step::before {
  counter-increment: lep;
  content: counter(lep);
  position: absolute;
  left: 12px; top: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--card);
  font-family: var(--font-num);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.walk-step .ws-t { font-weight: 700; }

/* ---------- reszponzív ---------- */

@media (max-width: 640px) {
  :root { --die: 54px; }
  body { font-size: 16px; }
  .brand-text h1 { font-size: 27px; }
  .dice-row { gap: 10px; }
  .dash { justify-content: center; }
  .actions { width: 100%; justify-content: center; }
  .btn-primary { flex: 1; }
  .stat { padding: 6px 12px; min-width: 74px; }
  .stat-v { font-size: 19px; }
  .card { min-width: 96px; padding: 8px 14px; }
  .card-v { font-size: 24px; }
}

/* ---------- csökkentett mozgás ---------- */

@media (prefers-reduced-motion: reduce) {
  .cube { transition-duration: .12s !important; }
  .die.is-hopping .die-lift,
  .die.is-hopping .die-shadow,
  .die.is-selectable .die-ring,
  .card-v.bump,
  .track.flash-zone .track-zone { animation: none !important; }
  .track-fill, .track-ghost, .banner, .die-lift, .die-badge { transition-duration: .01s !important; }
}