:root {
  --bark: #1c1711;
  --wood: #8a5a31;
  --wood-hi: #b07a45;
  --wood-lo: #5a3820;
  --parch: #f4e8cc;
  --muted: #cbb894;
  --moss: #a3c653;
  --ember: #f08a3c;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bark); color: var(--parch);
  font-family: var(--sans); touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }

#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
#screen { position: absolute; display: block; }

/* HUD */
#hud {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 10px) 0 calc(env(safe-area-inset-left, 0px) + 10px);
  pointer-events: none;
}
.hud-group { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  background: linear-gradient(#a8703d, #6f4524); border: 2px solid #3d2612; border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.4);
  font-weight: 700; font-size: 17px; color: #fff4dc; text-shadow: 0 1px 0 #3a2210; font-variant-numeric: tabular-nums;
}
.chip img { image-rendering: pixelated; height: 22px; width: auto; }
.chip.day { font-family: var(--serif); font-size: 15px; }
.chip.icon { pointer-events: auto; width: 38px; justify-content: center; padding: 0; font-size: 13px; letter-spacing: -2px; }

#tip {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 50px); transform: translateX(-50%);
  width: min(92%, 520px); padding: 8px 12px; border-radius: 8px; text-align: center; font-size: 15px; line-height: 1.35;
  background: rgba(40, 26, 12, .82); border: 1px solid var(--wood-hi); pointer-events: none;
}
#toast {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); opacity: 0; transition: .25s;
  width: max-content; max-width: 90%; padding: 8px 14px; border-radius: 20px; font-weight: 700; font-size: 15px; text-align: center;
  background: rgba(20, 14, 8, .85); color: #fff3c4; pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Érintőgombok */
#pad {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 14px) calc(env(safe-area-inset-left, 0px) + 16px);
  touch-action: none; z-index: 5; pointer-events: none;
}
.pad-row { display: flex; justify-content: space-between; align-items: flex-end; }
.pad-hint { display: none; margin: 0 0 auto; text-align: center; font-size: 14px; color: var(--muted); }
#pad .cluster { display: flex; gap: 14px; align-items: flex-end; pointer-events: auto; }
#pad .cluster.right { align-items: flex-start; }
#pad button {
  width: 76px; height: 76px; border-radius: 50%; border: 3px solid rgba(255, 240, 210, .55);
  background: rgba(60, 38, 18, .45); color: #fff4dc; font-weight: 800; font-size: 22px; touch-action: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.35); padding: 0;
}
#pad button.big { width: 92px; height: 92px; font-size: 16px; background: rgba(163, 198, 83, .45); }
#pad button[data-k="run"] { width: 62px; height: 62px; font-size: 14px; }
#pad button.on { background: rgba(255, 220, 140, .6); transform: translateY(2px); box-shadow: none; }
#pad button.toggled { background: rgba(240, 138, 60, .7); border-color: #ffd9a0; }

body.portrait #pad { top: var(--game-h); pointer-events: auto; padding-left: 4vw; padding-right: 4vw; background: linear-gradient(#2a2016, #17120c); border-top: 3px solid var(--wood-lo); }
body.portrait .pad-hint { display: block; padding-top: 4px; }
body.portrait #pad .cluster { gap: 2.5vw; }
body.portrait #pad button { width: min(20vw, 92px); height: min(20vw, 92px); background: #3a2a1a; border-color: var(--wood-hi); }
body.portrait #pad button[data-k="run"] { width: min(16vw, 72px); height: min(16vw, 72px); }
body.portrait #pad button.big { width: min(25vw, 112px); height: min(25vw, 112px); background: #4f6a26; border-color: var(--moss); font-size: 17px; }
body.portrait #pad button.on { background: #6d4d2c; }
body.portrait #pad button.big.on { background: #6f8f3a; }
body.portrait #pad button.toggled { background: #9a5a26; border-color: var(--ember); }

/* Képernyők */
.screen {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(20, 14, 8, .72); touch-action: pan-y;
}
#title { background: linear-gradient(rgba(20,14,8,.35), rgba(20,14,8,.8)), url("assets/parlament-concept.png") center / cover no-repeat, var(--bark); }
.card {
  width: min(100%, 440px); display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; text-align: center; margin: auto;
  background: linear-gradient(160deg, rgba(58, 40, 22, .96), rgba(34, 24, 14, .96)); border: 2px solid var(--wood); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
.kicker { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--moss); font-weight: 700; }
h1, h2 { margin: 0; font-family: var(--serif); line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(34px, 9vw, 48px); color: #fff4dc; text-shadow: 0 2px 0 #3a2210; }
h2 { font-size: 30px; }
.sub { margin: 0; color: var(--muted); line-height: 1.4; }
.note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--parch); padding: 8px 10px; border-left: 3px solid var(--ember); background: rgba(0,0,0,.2); text-align: left; border-radius: 0 6px 6px 0; }
.note.speaker::before { content: "📢 A karón kiabálók: "; font-weight: 700; color: var(--ember); }
.keys { margin: 0; font-size: 13px; color: var(--muted); }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.card button {
  min-height: 48px; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 17px;
  background: linear-gradient(#5a3f25, #3d2a17); border: 2px solid var(--wood); color: var(--parch);
}
.card button.primary { background: linear-gradient(#b2d46a, #7c9e3a); border-color: #d5ee93; color: #1f2a0b; font-size: 20px; min-height: 56px; }
.card button:active { transform: translateY(1px); }
.day-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-pick > div { display: flex; flex-direction: column; }
.day-pick small { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.day-pick strong { font-family: var(--serif); font-size: 26px; }
.day-pick button { width: 52px; min-height: 48px; padding: 0; }
.day-line { margin: 0; font-family: var(--serif); font-size: 22px; }
.tally-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.tally-row > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.tally-row img { image-rendering: pixelated; height: 42px; }
.tally-row b { font-size: 34px; font-variant-numeric: tabular-nums; }
.tally-row small { color: var(--muted); }
.tally-row .arrow { font-size: 28px; color: var(--moss); }
button:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }

/* Fekvő telefon: alacsony képernyőn tömörebb menük */
@media (max-height: 520px) {
  .card { width: min(100%, 620px); gap: 8px; padding: 14px 18px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  .sub { font-size: 14px; }
  .card button { min-height: 42px; }
  .card button.primary { min-height: 46px; font-size: 18px; }
  .day-pick strong { font-size: 22px; }
  .keys { display: none; }
  #tip { top: calc(env(safe-area-inset-top, 0px) + 48px); font-size: 14px; padding: 6px 10px; }
}