/* Awantura o kasę — live view for players ("my team"). Same look as the app:
   iOS system colours, OLED black / white, LED font, flat grid, 1 px lines,
   black text on team colours, Mistrzowie black with white digits. */
@font-face {
  font-family: "LED";
  src: url("fonts/led-dot-matrix.woff2") format("woff2");
  font-display: block;
}

:root {
  /* Dark OLED only (v11) — same values as the app's Theme.swift. */
  --bg: #000000; --ink: #ffffff; --ink2: #8d8d93; --line: #636366; --soft: #38383a;
  --pot: #1c1c1e; --danger: #ff453a; --red: #ff453a;
  --blue: #0a84ff; --green: #30d158; --yellow: #ffd60a; --masters: #000000;
  --masters-edge: #8e8e93; --ink-out: #b0b0b5;
  --glow: 0 0 10px rgba(255,255,255,.6), 0 0 3px rgba(255,255,255,.35);
  --sat: env(safe-area-inset-top); --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left);
  /* Bars: one height, one label size, one LED value size everywhere. */
  --bh: 42px; --bk: 11px; --bv: 20px;
  color-scheme: dark;
}
@media (max-height: 380px) { :root { --bh: 36px; --bk: 10px; --bv: 17px; } }
/* --tc team colour; --tdim / --tink = a team that is out (bankrupt, not
   bidding, not in the final): the colour darkened on black like the web
   prototype (≈ 22 % colour) with dimmed team-coloured digits (≈ 45 %);
   --tbid = an offer that does not lead (prototype: 30 % black vs the leader). */
.t-blue, .t-green, .t-yellow, .t-masters {
  --tdim: color-mix(in srgb, var(--tc) 22%, #000); --tink: color-mix(in srgb, var(--tc) 45%, #000);
  --tbid: color-mix(in srgb, var(--tc) 35%, #000); --tlite: color-mix(in srgb, var(--tc) 70%, #fff);
}
.t-blue { --tc: var(--blue); }
.t-green { --tc: var(--green); }
.t-yellow { --tc: var(--yellow); }
.t-masters { --tc: var(--masters); --tdim: #1c1c1e; --tink: #8d8d93; --tbid: #2c2c2e; --tlite: #d1d1d6; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); height: 100%; overflow: hidden; }
body {
  font: 500 15px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .05em;
  -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; border-radius: 0; cursor: pointer; }
.led { font-family: "LED", ui-monospace, monospace; font-weight: 400; letter-spacing: .05em; line-height: 1; }
[data-fit] { display: inline-block; white-space: nowrap; }
/* Fixed digit cells (all LED digits share one width): changed digits roll up. */
.dg { display: inline-block; position: relative; vertical-align: top; height: 1em; line-height: 1; clip-path: inset(-0.04em -0.6em); }
.dg i { display: block; font-style: normal; height: 1em; }
.dg.roll i { animation: roll .14s cubic-bezier(.25, 0, 0, 1) both; }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.dg i:only-child { transform: none !important; animation: none !important; }
.lbl { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ink2); }
.fine { flex: none; font-size: 11px; color: var(--ink2); text-align: center; }
@keyframes blink { 50% { filter: brightness(1.45); } }

/* One screen, never scrolls. Game screens run edge to edge (colour to the
   very edges); only the bars carry lines. Content keeps clear of the
   Dynamic Island / home indicator through the safe-area insets. */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  background: var(--bg); color: var(--ink);
}
.screen.pad {
  gap: 8px;
  padding: max(10px, var(--sat)) max(12px, var(--sar)) max(10px, var(--sab)) max(12px, var(--sal));
}
.screen.fill { background: var(--tc); color: #000; }
.screen.fill.t-masters { color: #fff; }
.screen.fill.out { background: var(--tdim); color: var(--tink); }
.screen.fill.out .mine-label, .screen.fill.out .zl { color: var(--ink-out); }
.screen.fill.t-masters .hero .led { text-shadow: var(--glow); }

/* ---- Bars -------------------------------------------------------------------
   Full-width bands, edge to edge. ONE cell component (`cell()` in app.js):
   small system label next to an LED value. Cells share the width (no holes),
   1 px lines only BETWEEN cells (never at the screen sides), the first/last
   cell's colour runs into the screen edge while its content stays inside the
   safe area. Highlight = cell background only. */
.bar { flex: none; display: flex; background: var(--bg); color: var(--ink); }
.bar.top { height: calc(var(--bh) + var(--sat)); border-bottom: 1px solid var(--line); }
.bar.foot { height: calc(var(--bh) + var(--sab)); border-top: 1px solid var(--line); }
.bar > .cell { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--ink);
  overflow: hidden; white-space: nowrap; }
.bar.top > .cell { padding-top: var(--sat); }
.bar.foot > .cell { padding-bottom: var(--sab); }
.bar > .cell:first-child { border-left: 0; padding-left: calc(12px + var(--sal)); }
.bar > .cell:last-child { padding-right: calc(12px + var(--sar)); }
.bar > .cell.grow, .bar > .cell:only-child { flex: 1 1 0; }
/* question bar: PULA left, CZAS right, one open line */
.bar.qbar > .cell { flex: 1 1 0; }
/* question bar: DO WYGRANIA on the answering team's colour, the clock apart */
.bar.qbar > .cell + .cell { flex: 0 0 auto; min-width: 140px; }
.bar.qbar > .cell.team { justify-content: flex-start; }
/* stacked bar: label over value, cells share the width, values fit */
.bar.stack > .cell { flex: 1 1 auto; flex-direction: column; gap: 2px; }
.bar.stack > .cell.grow { flex: 2 1 auto; }
.bar.stack > .cell .vb { max-width: 100%; justify-content: center; }
.bar > .cell.at-start { justify-content: flex-start; }
.bar > .cell.at-end { justify-content: flex-end; }
.cell .k { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--bk); font-weight: 700; letter-spacing: .1em; color: var(--ink2); }
.cell .k:empty { display: none; }
.cell .v { font-size: var(--bv); }
.cell .vb { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.bar > .cell:not(.team):not(.good):not(.bad):not(.hl):not(.box) .v { text-shadow: var(--glow); }
/* highlighted cells: background colour only; label in the cell's ink */
.bar > .cell.good { background: var(--green); color: #000; }
.bar > .cell.bad { background: var(--red); color: #000; }
/* black box: reversed (white cell in dark, black in light) so it never vanishes into the bar */
.bar > .cell.box { background: var(--ink); color: var(--bg); }
.bar > .cell.hl { background: var(--ink); color: var(--bg); }
.bar > .cell.team { background: var(--tc); color: #000; flex-grow: 0; min-width: 76px; }
.bar > .cell.team.grow { flex: 1 1 0; }
.bar > .cell.team.t-masters { color: #fff; box-shadow: inset 0 0 0 1.5px var(--masters-edge); }
.bar > .cell.team.t-masters .v { text-shadow: var(--glow); }
.bar > .cell.team.out { background: var(--tdim); color: var(--ink-out); }
.bar > .cell.good .k, .bar > .cell.bad .k, .bar > .cell.box .k, .bar > .cell.hl .k, .bar > .cell.team .k { color: inherit; }
.bar > .cell.zero .v, .bar > .cell.zero .k { animation: blink .7s infinite; }
.bar.haggle { height: var(--bh); border-bottom: 1px solid var(--line); animation: blink 1.2s infinite; }
.bar.haggle > .cell { justify-content: space-between; }

/* 0. Team picker */
.pick-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.pick-head .led { font-size: clamp(14px, 4.4vw, 20px); white-space: nowrap; }
.pick-head .close { height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--bg); font-size: 12px; font-weight: 600; }
.picks { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pick { flex: 1 1 0; min-height: 0; border: 0; background: var(--tc); color: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pick .nm { font-size: clamp(14px, min(6vmin, 2.9vw), 40px); }
.pick .sub { font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.pick.t-masters { color: #fff; outline: 1.5px solid var(--masters-edge); outline-offset: -1.5px; }
.pick.t-masters .nm { text-shadow: var(--glow); }
.pick.on { box-shadow: inset 0 0 0 4px var(--ink); }
.pick.t-masters.on { box-shadow: inset 0 0 0 4px #fff; }
.center-msg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.center-msg .big { font-size: 28px; border: 1px solid var(--line); padding: 20px 18px; }


/* 1 + 4. My colour, my money */
.hero { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  margin: 6px max(16px, var(--sar)) 6px max(16px, var(--sal)); }
.mine-label { flex: none; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.mine-label.bankrupt { font-size: 22px; }
.amount { flex: none; width: 100%; display: flex; align-items: center; justify-content: center; }
.zl { flex: none; text-align: center; font-size: 16px; font-weight: 700; }

/* 2. Auction: columns KONTO over OFERTA (no names: colour = team), PULA bar */
/* edge to edge: columns run the full height between the bars and to the
   screen sides; the first/last column's content keeps clear of the safe area */
.cols { flex: 1 1 0; min-height: 0; display: flex; }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid #000; }
.col:first-child { border-left: 0; }
.col:first-child > .konto, .col:first-child .ol, .col:first-child .ov { padding-left: var(--sal); }
.col:last-child > .konto, .col:last-child .ol, .col:last-child .ov { padding-right: var(--sar); }
.col[data-id] { cursor: pointer; }
.col .konto { flex: none; height: var(--bh); display: flex; align-items: center; justify-content: center; gap: 8px;
  border-bottom: 1px solid var(--line); }
.col + .col .konto { box-shadow: inset 1px 0 0 var(--line); }
.col .konto .k { font-size: var(--bk); font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.col .konto .v { font-size: var(--bv); text-shadow: var(--glow); }
.col.mine .konto { background: var(--pot); }
.offer { flex: 1 1 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--tbid); color: var(--tlite); }
.offer .ov { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; overflow: hidden; }
.offer .st { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-size: clamp(12px, 4vh, 16px); font-weight: 800; letter-spacing: .12em; color: var(--ink-out); }
/* the leader (and VA BANQUE): full team colour, black digits */
.offer.lead { background: var(--tc); color: #000; }
.offer.lead .st { color: #000; }
.col.t-masters .offer { outline: 1.5px solid var(--masters-edge); outline-offset: -1.5px; }
.col.t-masters .offer.lead { color: #fff; outline: 3px solid #fff; outline-offset: -3px; }
.col.t-masters .offer:not(.lead):not(.out) { background: #383838; }
.col.t-masters .offer .led { text-shadow: var(--glow); }
/* out of the auction (bankrupt / not bidding / BLOKADA): darker still */
.offer.out { background: var(--tdim); color: var(--tink); }
.offer.out .led { text-shadow: none !important; }
/* VA BANQUE: the prototype's 200 ms blink between 30 % and 60 % black */
.offer.vb { animation: vb .4s steps(1, end) infinite; }
@keyframes vb { 0% { background: color-mix(in srgb, var(--tc) 70%, #000); } 50% { background: color-mix(in srgb, var(--tc) 40%, #000); } }
/* an overbid: a short pulse of the tile (the host's phone plays the bid sound) */
.offer.pulse { animation: pulse .22s cubic-bezier(.25, 0, 0, 1); }
@keyframes pulse { 0% { filter: brightness(1.35); transform: scale(1.03); } 100% { filter: none; transform: none; } }

/* Host actions (KARA, PREMIA) and a bought hint: thin bars under the top bar */
.bar.fx { height: 30px; border-bottom: 1px solid var(--line); }
.bar.fx > .cell { flex: 1 1 0; }
/* 1 NA 1 crossing out: the list, crossed-out ones dimmed and struck */
.strike { flex: 1 1 0; min-height: 0; display: flex; flex-wrap: wrap; align-content: stretch; gap: 1px;
  background: var(--line); }
.sk { flex: 1 0 calc(33.34% - 1px); display: flex; align-items: center; justify-content: center; background: var(--bg); }
.sk.l { padding-left: var(--sal); } .sk.r { padding-right: var(--sar); } .sk.b { padding-bottom: var(--sab); }
.sk .led { font-size: clamp(16px, 5vh, 26px); text-shadow: var(--glow); }
.sk.out .led { color: var(--ink2); text-decoration: line-through; text-shadow: none; }

/* The wheel (live): half wheel anchored at the bottom, pointer on top */
.screen.wheel .wheel-area { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.wheel-svg { width: 100%; height: 100%; display: block; }
.wheel-svg #disc { will-change: transform; transform-origin: 0 0; }
.wheel-svg text { font-family: "LED", ui-monospace, monospace; letter-spacing: .04em; }
#wheelTicker { font-family: "LED", ui-monospace, monospace; font-size: var(--bv); text-shadow: var(--glow); white-space: nowrap; }

/* 3. Question: low bar PULA ——— CZAS, the question wide, A–D 2×2 */
.q { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 8px calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal)); background: var(--tc); color: #000; }
.q.t-masters { color: #fff; }
.q .who { flex: none; text-align: center; font-size: var(--bk); font-weight: 800; letter-spacing: .1em; }
/* "ODPOWIADACIE!" — the most important word for the team: big (v13) */
.q .who.mine { font-size: clamp(16px, 6vh, 26px); letter-spacing: .14em; }
.qtext { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qtext [data-fit] { display: block; width: 100%; white-space: normal; font-weight: 700; line-height: 1.08; text-align: center; letter-spacing: 0; }
.answers { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* A–D readable at arm's length (v13): at least 20 px, the question gives way */
.a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--soft); font-size: clamp(18px, 5.4vh, 22px); font-weight: 700; line-height: 1.1; }
.a .chip { flex: none; width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); font-size: 1em; }

/* Connection warning + debug */
.conn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; text-align: center; letter-spacing: .08em; }
.conn[hidden], .dbg[hidden] { display: none; }
.dbg { position: fixed; left: 4px; bottom: 4px; z-index: 6; font-size: 10px; background: var(--bg); color: var(--ink); padding: 2px 4px; }

/* Code entry */
.nocode { position: fixed; inset: 0; z-index: 9; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.nocode[hidden] { display: none; }
.nocode .big { font-size: 28px; padding: 22px 18px; }
.box { border: 1px solid var(--line); }
.nocode p { color: var(--ink2); text-transform: none; letter-spacing: 0; }
.nocode form { display: flex; width: 100%; max-width: 340px; }
.nocode input { flex: 1; min-width: 0; height: 56px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 24px "LED", monospace; text-align: center; text-transform: uppercase; letter-spacing: .15em; border-radius: 0; }
.btn { height: 56px; padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-size: 18px; border-radius: 0; }


/* Landscape only (round 8): the picker in a row; portrait shows "turn the phone". */
.picks { flex-direction: row; }

/* ---- Portrait: "OBRÓĆ TELEFON" ---------------------------------------------- */
.turn { display: none; }
@media (orientation: portrait) {
  #view, .conn { display: none !important; }
  .turn {
    position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: max(24px, var(--sat)) 28px max(24px, var(--sab)); text-align: center; background: var(--bg); color: var(--ink);
  }
}
.turn-art { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); }
.turn .phone { position: relative; width: 66px; height: 124px; border: 4px solid var(--ink); border-radius: 14px; padding: 6px;
  animation: turn 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.turn .island { position: absolute; top: 5px; left: 50%; width: 18px; height: 5px; margin-left: -9px; border-radius: 3px; background: var(--ink); }
.turn .screen-art { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 3px; padding-top: 9px; }
.turn .screen-art i { flex: 1; display: block; }
.turn .b1 { background: var(--blue); } .turn .b2 { background: var(--green); } .turn .b3 { background: var(--yellow); }
.turn .arrow { position: absolute; right: 14px; top: 8px; font-size: 34px; line-height: 1; color: var(--ink2);
  animation: turnArrow 2.6s ease-in-out infinite; }
@keyframes turn { 0%, 18% { transform: rotate(0deg); } 50%, 82% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes turnArrow { 0%, 18% { opacity: 1; } 40%, 100% { opacity: .25; } }
.turn .title { font-size: 34px; text-shadow: var(--glow); }
.turn .sub { font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.turn .hint { max-width: 300px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink2); text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .turn .phone { animation: none; transform: rotate(-90deg); }
  .turn .arrow { animation: none; }
}


/* Black box opening at the end (v13): full screen, the drum roll pulses */
.box-open .hero { gap: 10px; }
.box-open .led.drum { font-size: clamp(60px, 30vh, 160px); text-shadow: var(--glow); animation: blink .3s infinite; }
.box-open .amount .led { text-shadow: var(--glow); }
/* v16: before START CZASU the question text is not sent — LED "PYTANIE ZA CHWILĘ". */
.qtext.qwait [data-fit] { font-family: "LED", ui-monospace, monospace; font-weight: 400; letter-spacing: .05em; }
/* v16 (Arek's pattern): the wheel seen from the side fills the screen; ONE bar
   on top (RUNDA | field) and the accounts at the bottom float over it — solid
   black, 1 px frame, flat. */
.screen.wheel .wheel-area, .stage > .wheel-area { position: relative; display: block; }
.wheel-area > .wheel-svg { position: absolute; inset: 0; }
.wheel-area > .wtop, .wheel-area > .wfoot { position: absolute; z-index: 1;
  left: calc(max(10px, var(--sal)) + 1.5%); right: calc(max(10px, var(--sar)) + 1.5%); }
.wheel-area > .wtop { top: calc(max(8px, var(--sat)) + 2%); height: var(--bh); border: 1px solid var(--line); }
.wheel-area > .wfoot { bottom: calc(max(8px, var(--sab)) + 2%); }
.wheel-area > .wfoot > .bar { height: var(--bh); border: 1px solid var(--line); }
.wheel-area .bar > .cell:first-child { padding-left: 12px; }
.wheel-area .bar > .cell:last-child { padding-right: 12px; }