/* ---------- PIXELKRIEG ----------
   Real-time territory war: the grid lives on the canvas, everything here is the DOM HUD on top of it.
   Layout: .pk = column (top bar, middle, bottom). The canvas draws the grid into .pk-stage's rectangle, so the grid
   always fits the space the HUD leaves free. Only buttons take pointer events: every touch on the grid reaches the canvas. */
.pk-root { --pk-cyan: #3de6ff; --pk-violet: #8b5cff; --pk-gold: #ffd166; --pk-ok: #4dff9a; --pk-warn: #ffd166; --pk-bad: #ff5470; --pk-panel: rgba(10, 8, 32, .84); --pc: #3de6ff; }
.pk { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; }
.pk button { font: inherit; color: inherit; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pk [hidden] { display: none !important; }

/* top bar (no backdrop-filter anywhere: the canvas behind redraws every frame) */
.pk-top { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 8px; padding: 8px 10px 4px; min-height: 46px; overflow: hidden; } /* one fixed row: a wrapping bar would resize the stage and make the grid jump */
.pk-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 14px; font-weight: 900; font-size: 15px; white-space: nowrap;
  background: var(--pk-panel); border: 1px solid rgba(139, 92, 255, .42); box-shadow: 0 0 14px rgba(61, 230, 255, .1);
}
.pk-time { font-family: var(--display); font-size: 20px; min-width: 84px; justify-content: center; font-variant-numeric: tabular-nums; }
.pk-time.low { color: var(--pk-bad); border-color: rgba(255, 84, 112, .75); box-shadow: 0 0 16px rgba(255, 84, 112, .35); animation: pk-blink .5s ease-in-out infinite alternate; }
@keyframes pk-blink { to { opacity: .55; } }
.pk-mine-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--pc); box-shadow: 0 0 8px var(--pc); flex: none; }
.pk-mine-l { font-size: 12px; font-weight: 800; color: #b9b0e8; }
.pk-mine-n { font-family: var(--display); font-size: 18px; font-variant-numeric: tabular-nums; }
.pk-mine-p { font-size: 12px; font-weight: 800; color: var(--pk-cyan); }
.pk-empty { color: var(--pk-bad); border-color: rgba(255, 84, 112, .6); animation: pk-blink .7s ease-in-out infinite alternate; }
.pk-out { color: #ff8a9a; border-color: rgba(255, 84, 112, .5); }
.pk-spec { color: #cfd6ff; }
.pk-mute { background: var(--pk-panel); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 10px; font-size: 16px; }

/* middle: stage (the canvas shows through) + scoreboard */
.pk-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pk-stage { position: relative; flex: 1; min-height: 0; min-width: 0; }
.pk-side { order: -1; padding: 2px 8px 0; }
.pk-board { --cols: 3; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

/* scoreboard row (base = compact chip for portrait phones) */
.pk-row {
  position: relative; display: flex; align-items: center; gap: 5px; padding: 3px 9px 5px; border-radius: 999px; font-size: 12px; font-weight: 800; overflow: hidden; max-width: 100%;
  flex: 0 0 calc((100% - (var(--cols) - 1) * 4px) / var(--cols)); /* a fixed share of the row: the row count never changes mid-match */
  background: var(--pk-panel); border: 1px solid rgba(255, 255, 255, .12);
}
.pk-row.me { border-color: var(--pk-gold); box-shadow: 0 0 0 1px rgba(255, 209, 102, .35); }
.pk-row.lead { box-shadow: 0 0 12px rgba(255, 209, 102, .35); }
.pk-row.out { opacity: .45; filter: grayscale(.85); }
.pk-av { display: none; flex: none; }
.pk-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--pc); box-shadow: 0 0 6px var(--pc); }
.pk-nm { flex: 1; min-width: 0; }
.pk-crown { display: none; font-size: 12px; line-height: 1; }
.pk-row.lead .pk-crown { display: inline; }
.pk-n { margin-left: auto; font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; }
.pk-pct { display: none; font-size: 11px; font-weight: 800; color: #b9b0e8; font-variant-numeric: tabular-nums; }
.pk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.pk-bar i { display: block; height: 100%; width: 0; background: var(--pc); box-shadow: 0 0 6px var(--pc); transition: width .25s; }

/* feed, toast, overlays inside the stage */
.pk-feed { position: absolute; left: 8px; top: 6px; display: flex; flex-direction: column; gap: 3px; max-width: 72%; }
.pk-line { font-size: 12px; font-weight: 800; padding: 2px 9px; border-left: 3px solid var(--lc, #889); background: rgba(10, 5, 28, .78); border-radius: 0 9px 9px 0; animation: pk-in .25s both; }
@keyframes pk-in { from { opacity: 0; transform: translateX(-10px); } }
.pk-toast {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%); max-width: 92%; text-align: center; white-space: nowrap;
  font-family: var(--display); font-size: clamp(18px, 4.4vw, 34px); letter-spacing: 1px; color: #fff;
  text-shadow: 0 0 18px var(--pk-cyan), 0 3px 0 rgba(10, 5, 28, .9); animation: pk-pop .45s cubic-bezier(.2, 1.4, .3, 1) both;
}
@keyframes pk-pop { from { opacity: 0; transform: translateX(-50%) scale(.6); } }
@keyframes pk-card { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.pk-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; pointer-events: none; }

/* countdown */
.pk-cd-box { min-height: clamp(80px, 22vmin, 180px); display: grid; place-items: center; }
.pk-cd {
  font-family: var(--display); font-size: clamp(72px, 22vmin, 170px); line-height: 1; color: #fff;
  text-shadow: 0 0 34px var(--pk-cyan), 0 0 8px var(--pk-violet), 0 6px 0 rgba(10, 6, 28, .85); animation: pk-cdpop .55s cubic-bezier(.2, 1.5, .3, 1) both;
}
.pk-cd.go { color: var(--pk-ok); text-shadow: 0 0 34px var(--pk-ok), 0 6px 0 rgba(10, 6, 28, .85); animation: pk-gopop .9s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes pk-cdpop { from { opacity: 0; transform: scale(1.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pk-gopop { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.5); } }
.pk-rules, .pk-prices, .pk-you {
  max-width: min(560px, 94%); text-align: center; border-radius: 14px; background: var(--pk-panel); border: 1px solid rgba(139, 92, 255, .4); animation: pk-card .4s both;
}
.pk-rules { padding: 8px 16px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.pk-prices { padding: 4px 12px; font-size: 12px; font-weight: 700; color: #b9b0e8; }
.pk-you { padding: 4px 12px; font-size: 13px; font-weight: 700; color: #e4defa; }
.pk-you b { color: var(--pk-gold); }
.pk-you-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 0; vertical-align: -1px; box-shadow: 0 0 6px currentColor; }

/* final standings */
.pk-final {
  width: min(460px, 100%); max-height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 16px; text-align: center;
  background: rgba(10, 6, 30, .93); border: 2px solid var(--pk-gold); border-radius: 20px; animation: pk-card .4s both;
  box-shadow: 0 0 30px rgba(255, 209, 102, .25), 0 18px 50px rgba(0, 0, 0, .5);
}
.pk-final-t { font-family: var(--display); font-size: clamp(26px, 7vw, 40px); letter-spacing: 4px; color: #fff; text-shadow: 0 0 20px var(--pk-gold), 0 0 6px var(--pk-cyan); }
.pk-final-w { font-size: 16px; font-weight: 900; color: var(--pk-gold); }
.pk-fl { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 2px; }
.pk-fr { display: grid; grid-template-columns: 30px 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 800; text-align: left; }
.pk-fr.me { outline: 1px solid var(--pk-gold); }
.pk-fr .pk-dot { width: 11px; height: 11px; }
.pk-fr-rk { text-align: center; color: #b9b0e8; }
.pk-fr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-fr-n { font-family: var(--display); font-size: 14px; color: var(--pk-gold); min-width: 34px; text-align: right; }
.pk-fr-p { font-size: 12px; color: #b9b0e8; min-width: 52px; text-align: right; }
.pk-final-me { font-size: 14px; font-weight: 800; color: #f4f0ff; }
.pk-final-foot { font-size: 12px; color: #a99fe0; }

/* bottom: the pixel bank (base = portrait phone: room at the right for the global "Verlassen" button) */
.pk-bot { padding: 4px 96px 12px 10px; display: flex; justify-content: center; }
.pk-bank {
  width: min(520px, 100%); padding: 7px 12px 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 5px;
  background: var(--pk-panel); border: 1px solid rgba(139, 92, 255, .5); box-shadow: 0 0 14px -3px var(--pc);
}
.pk-bank-head { display: flex; align-items: baseline; gap: 7px; }
.pk-bank-l { font: 900 11px var(--font); letter-spacing: 2px; color: #b9b0e8; }
.pk-bank-n { font-family: var(--display); font-size: 26px; line-height: 1; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.pk-bank-max { font-size: 13px; font-weight: 800; color: #a99fe0; }
.pk-regen { margin-left: auto; font-size: 13px; font-weight: 900; color: var(--pk-cyan); }
.pk-segs { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 3px; height: 16px; }
.pk-segs i { display: block; border-radius: 3px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); transition: background .08s; }
.pk-segs i.on { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 65%), var(--pc); box-shadow: 0 0 8px var(--pc), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.pk-segs i.part { background: linear-gradient(90deg, var(--pc) calc(var(--f, 0) * 100%), rgba(255, 255, 255, .09) 0); opacity: .85; }
.pk-bank.low .pk-bank-n { color: var(--pk-bad); }
.pk-bank.deny { border-color: var(--pk-bad); box-shadow: 0 0 20px rgba(255, 84, 112, .6); animation: pk-deny .38s linear; }
.pk-bank.deny .pk-segs i { background: rgba(255, 84, 112, .35); }
@keyframes pk-deny { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.pk-err { height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 900; line-height: 16px; text-align: center; color: #ff8a9a; visibility: hidden; } /* always takes its space */
.pk-err.show { visibility: visible; animation: pk-in .2s both; }

/* desktop and landscape phones: scoreboard as a column on the right, "Verlassen" sits right of the bank */
@media (min-width: 640px) and (orientation: landscape), (min-width: 820px) {
  .pk-mid { flex-direction: row; }
  .pk-side { order: 0; width: 252px; flex: none; padding: 4px 10px 0 0; }
  .pk-board { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 5px; }
  .pk-row { flex: none; display: grid; grid-template-columns: 26px 10px minmax(0, 1fr) auto auto auto; gap: 4px 8px; align-items: center; padding: 5px 10px 9px; border-radius: 14px; font-size: 13px; }
  .pk-av { display: grid; place-items: center; width: 26px; height: 26px; }
  .pk-crown, .pk-row.lead .pk-crown { display: block; visibility: hidden; } /* keeps its column so the numbers line up */
  .pk-row.lead .pk-crown { visibility: visible; }
  .pk-n { margin-left: 0; font-size: 14px; min-width: 28px; text-align: right; }
  .pk-pct { display: block; min-width: 50px; text-align: right; }
  .pk-bar { height: 4px; }
  .pk-bot { padding: 4px 114px 12px 10px; }
  .pk-mine-l { display: inline; }
}
@media (max-width: 639px), (orientation: portrait) and (max-width: 819px) {
  .pk-mine-l { display: none; }
}
/* short screens (landscape phones, small laptops): squeeze the HUD so the grid keeps its room */
@media (max-height: 700px) {
  .pk-top { padding: 4px 8px 2px; gap: 6px; }
  .pk-chip { padding: 3px 10px; font-size: 13px; }
  .pk-time { font-size: 16px; }
  .pk-row { padding-top: 3px; padding-bottom: 7px; }
  .pk-av { width: 22px; height: 22px; }
  .pk-board { gap: 3px; }
  .pk-bot { padding-bottom: 6px; }
  .pk-bank { padding: 4px 10px 5px; gap: 3px; }
  .pk-bank-n { font-size: 22px; }
  .pk-segs { height: 12px; }
  .pk-rules { font-size: 13px; padding: 5px 12px; }
  .pk-final { padding: 8px 12px; gap: 4px; }
  .pk-fr { padding: 2px 8px; }
}
@media (max-height: 520px) {
  .pk-prices, .pk-you, .pk-final-foot { display: none; }
  .pk-cd-box { min-height: 0; }
  .pk-cd { font-size: clamp(48px, 16vmin, 90px); }
  .pk-fr { padding: 1px 6px; font-size: 12px; }
  .pk-final-t { font-size: 22px; letter-spacing: 2px; }
  .pk-final-w { font-size: 14px; }
}
@media (max-width: 460px) {
  .pk-top { gap: 5px; padding: 6px 6px 3px; }
  .pk-chip { padding: 5px 9px; font-size: 13px; }
  .pk-time { font-size: 17px; min-width: 64px; }
  .pk-rules { font-size: 13px; }
  .pk-bank-n { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-time.low, .pk-empty, .pk-cd, .pk-cd.go, .pk-bank.deny, .pk-line, .pk-toast, .pk-rules, .pk-prices, .pk-you, .pk-final, .pk-err { animation: none; }
  .pk-cd.go { opacity: 1; }
}