/* KOBKA — style.css
   #stage is the full-viewport container that holds the canvas (engine.js, owned by another agent, does its
   own internal 192x320 integer-scale + letterbox compositing into it — this file makes no assumption about
   how). DOM screens (title/map/reward/pause/game-over/victory) are full-viewport modal takeovers: while any
   of them shows, the canvas is either not running yet or paused behind it, so they're built with normal
   responsive CSS rather than tied to the game's internal logical pixel grid — only the small persistent
   in-room chrome (pause button, mute button) needs to coexist on screen with the live canvas; ui.js places
   it in the letterbox around the game area (see layoutChrome). Pixel font + a dark dungeon palette are used
   throughout for visual consistency instead. */

:root {
  --bg: #0a0b12;
  --panel: #14161f;
  --panel-edge: #2a2e40;
  --ink: #e8e6d8;
  --ink-dim: #9a9aa8;
  --accent: #f0c419;
  --accent-2: #35c2e0;
  --danger: #e0435b;
  --ok: #4ad07c;
  --rare: #b06bf0;
  --ui: 1; /* overlay text/box scale; 1.4 on big screens (see the media query at the end) */
  --pixel-font: 'Jersey 10', 'Courier New', monospace; /* Czech-complete; Z/2, S/5, B/G stay distinct (Pixelify Sans drew them alike) */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); overscroll-behavior: none; height: 100%; }
/* Holding a finger down is how you steer (the joystick), so a long press must never start text selection,
   the iOS callout/magnifier or Android's long-press menu -- players saw the whole page "copying" and turning
   blue mid-run. The name field stays a normal editable, selectable input. */
html, body, #stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body { font-family: var(--pixel-font); -webkit-text-size-adjust: 100%; }
button, input { font-family: inherit; }
img { image-rendering: pixelated; }

#stage {
  position: fixed; inset: 0;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;
}
#kobkaCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* ---------- persistent in-room chrome ----------
   #pauseBtn (the ONE pause control), #muteBtn (SFX) and #musicBtn (background music) -- independent
   mutes, Mirek's ask (phase 3). The score lives in the in-canvas HUD only.
   ui.js layoutChrome() sets left/top/size inline so no button ever covers the in-canvas HUD strip;
   the top/right values here are just a fallback before the first layout pass. */
.chrome {
  position: fixed; z-index: 5; display: none;
  top: 8px; right: 8px; width: 32px; height: 32px;
  background: rgba(10, 11, 18, 0.75);
  border: 1px solid var(--panel-edge);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
  touch-action: manipulation;
}
.chrome.visible { display: flex; }
.chrome.visible.hidden-tight { display: none; }
#pauseBtn { gap: 18%; }
#pauseBtn::before, #pauseBtn::after { content: ''; display: block; width: 18%; height: 48%; background: var(--ink); }
/* #musicBtn keeps its note glyph always (Mirek: put the note icon on the button) and shows the muted
   state as a strike across it, the same way #muteBtn's own glyph swaps to a muted speaker. */
#musicBtn.muted { opacity: 0.55; }
#musicBtn.muted::after {
  content: ''; position: absolute; left: 15%; right: 15%; top: 50%; height: 2px;
  background: var(--danger); transform: rotate(-40deg); pointer-events: none;
}

/* ---------- modal screens ---------- */
#overlayRoot { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen {
  /* ui.js only ever mounts one screen element into #overlayRoot at a time (see clearChildren in ui.js),
     so this doesn't need its own show/hide state -- it's always the active screen when present. */
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column; align-items: center;
  background: var(--bg);
  padding: 16px 12px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  pointer-events: auto;
}
/* scrolling still works (wheel/touch/keys); only the native desktop scrollbars are hidden */
.screen, .map-scroll { scrollbar-width: none; }
.screen::-webkit-scrollbar, .map-scroll::-webkit-scrollbar { display: none; }

.screen h1, .screen h2 { margin: 6px 0; font-weight: normal; }
.screen h1 { font-size: clamp(36px, 11.5vw, calc(52px * var(--ui))); color: var(--accent); text-shadow: 2px 2px 0 #000; letter-spacing: 2px; }
.screen h2 { font-size: calc(20px * var(--ui)); color: var(--ink); margin-top: 10px; }
.byline { font-size: calc(13px * var(--ui)); color: var(--ink-dim); margin: 0 0 12px; }
.hint { font-size: calc(13px * var(--ui)); color: var(--ink-dim); }
.banner { font-size: calc(13px * var(--ui)); color: var(--bg); background: var(--accent); padding: 4px 8px; margin: 6px 0; }
.season-status { font-size: calc(13px * var(--ui)); color: var(--accent-2); margin: 2px 0 10px; }

button.btn {
  font-family: var(--pixel-font);
  background: var(--accent); color: #14140a;
  border: none; padding: 10px 22px;
  font-size: calc(18.667px * var(--ui)); cursor: pointer;
  margin: 6px 0;
  min-height: 40px; min-width: 100px;
}
button.btn:active { transform: translateY(1px); }
button.btn.secondary { background: transparent; color: var(--ink-dim); border: 1px solid var(--panel-edge); font-size: calc(14px * var(--ui)); padding: 6px 12px; min-height: 32px; }
button.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- title ---------- */
.name-field { width: 100%; max-width: calc(260px * var(--ui)); margin: 6px 0; }
.name-input {
  width: 100%;
  font-family: var(--pixel-font);
  font-size: calc(20px * var(--ui)); /* real px on purpose: prevents iOS auto-zoom on focus, per CLAUDE.md's RCA */
  padding: 10px 8px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--panel-edge);
}
.name-error { font-size: calc(13px * var(--ui)); color: var(--danger); min-height: 16px; margin: 3px 0; }

.board-box { width: 100%; max-width: calc(300px * var(--ui)); margin-top: 10px; }
.board-title { font-size: calc(14px * var(--ui)); color: var(--ink-dim); letter-spacing: 1px; }
.board-row { display: flex; justify-content: space-between; gap: 6px; font-size: calc(16px * var(--ui)); padding: 3px 4px; border-bottom: 1px solid var(--panel-edge); }
.board-row.me { background: rgba(240, 196, 25, 0.18); color: var(--accent); }
.board-rank { width: calc(18px * var(--ui)); text-align: left; color: var(--ink-dim); }
.board-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score { text-align: right; }
.board-floor { color: var(--ink-dim); text-align: right; white-space: nowrap; flex: none; width: calc(56px * var(--ui)); } /* fits '👑 99:59' on one line; fixed so the score column stays aligned */
.board-empty { font-size: calc(13px * var(--ui)); color: var(--ink-dim); padding: 8px; }

.other-games { margin-top: 12px; font-size: calc(13px * var(--ui)); color: var(--ink-dim); }
.other-games a { color: var(--accent-2); text-decoration: none; margin: 0 4px; }
.audio-toggles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.audio-toggles button.btn.secondary { font-size: calc(12px * var(--ui)); min-height: 28px; padding: 4px 10px; margin: 0; }

/* ---------- map ---------- */
.map-scroll { width: 100%; max-width: calc(420px * var(--ui)); flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; display: flex; flex-direction: column-reverse; }
.map-inner { position: relative; flex: none; display: flex; flex-direction: column-reverse; }
.map-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; shape-rendering: crispEdges; }
.map-edges .edge { stroke-width: 2; stroke-linecap: square; }
.map-edges .edge.dim { stroke: var(--panel-edge); }
.map-edges .edge.next { stroke: var(--accent-2); }
.map-edges .edge.path { stroke: var(--ok); }
.map-floor { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 0; position: relative; }
.map-floor-label { position: absolute; left: 0; font-size: calc(12px * var(--ui)); color: var(--ink-dim); }
.node {
  width: 40px; height: 40px; /* 32 px icon + 2 px border, see ui.js ICON_PX */
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 2px solid var(--panel-edge);
  font-size: 16px; cursor: default; position: relative; padding: 0;
  color: var(--ink-dim); flex: none;
}
.node.locked { opacity: 0.35; }
.node.cleared { background: #1c2a1e; border-color: var(--ok); color: var(--ok); opacity: 0.85; }
.node.reachable { border-color: var(--accent-2); color: var(--ink); cursor: pointer; box-shadow: 0 0 6px var(--accent-2); }
.node.reachable.selected { outline: 1px solid var(--accent); outline-offset: 2px; }
.node.reachable.selected::after {
  content: 'vybrat'; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; font-size: 10px; line-height: 1; color: var(--accent); white-space: nowrap; pointer-events: none;
}
.node.current { border-color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.map-stats { font-size: calc(14px * var(--ui)); color: var(--accent); margin: 2px 0; }
.dev-btn { flex: none; margin-top: 8px; border-style: dashed; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 2px var(--accent); } 50% { box-shadow: 0 0 10px 3px var(--accent); } }

/* ---------- reward / rest cards ---------- */
.cards { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: calc(320px * var(--ui)); margin-top: 10px; }
.card { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--panel); border: 2px solid var(--panel-edge); padding: 8px 10px; cursor: pointer; color: var(--ink); }
.card.selected { border-color: var(--accent); }
.card.rare { border-color: var(--rare); }
.sprite-icon { flex: none; } /* icon elements set their own width/height/background inline -- see ui.js spriteIconEl() */
.card-body { flex: 1; }
.card-name { font-size: calc(17px * var(--ui)); color: var(--ink); }
.card-desc { font-size: calc(13px * var(--ui)); color: var(--ink-dim); margin-top: 2px; }
.card-rare-badge { font-size: calc(11px * var(--ui)); color: var(--rare); }
/* an upgrade already at its maxStacks: visible (the offer is fixed per node) but not pickable */
.card.capped { opacity: 0.45; cursor: default; border-style: dashed; }
.card-max-badge { font-size: calc(11px * var(--ui)); color: var(--accent); }
.card-capped { font-size: calc(12px * var(--ui)); color: var(--danger); margin-top: 2px; }
.owned-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 10px; max-width: calc(320px * var(--ui)); }
.owned-chip { font-size: 14px; background: var(--panel); border: 1px solid var(--panel-edge); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; position: relative; }
.owned-chip .stacks { position: absolute; bottom: -4px; right: -4px; font-size: calc(11px * var(--ui)); background: var(--accent); color: #14140a; padding: 0 2px; }

/* ---------- pause / gameover / victory ---------- */
.stat-row { display: flex; justify-content: space-between; width: calc(220px * var(--ui)); font-size: calc(16px * var(--ui)); margin: 2px 0; }
.stat-row .v { color: var(--accent); }
.save-status { font-size: calc(13px * var(--ui)); color: var(--ink-dim); min-height: 16px; margin: 6px 0; }
.save-status.error { color: var(--danger); }
.breakdown { width: calc(240px * var(--ui)); margin-top: 8px; }
.breakdown-row { display: flex; justify-content: space-between; font-size: calc(16px * var(--ui)); padding: 2px 0; border-bottom: 1px solid var(--panel-edge); }
.breakdown-row.total { color: var(--accent); border-bottom: none; margin-top: 4px; font-size: calc(18.667px * var(--ui)); }

/* ---------- flagged-score popup ---------- */
.flagged-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(10, 11, 18, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.flagged-box {
  width: 100%; max-width: calc(300px * var(--ui));
  background: var(--panel); border: 2px solid var(--danger);
  padding: 18px 16px 14px;
  text-align: center;
}
.flagged-text { font-size: calc(15px * var(--ui)); color: var(--ink); margin: 0 0 12px; line-height: 1.4; }

@media (min-width: 700px) {
  .screen { padding-top: 32px; }
}
/* Desktop (DPR 1): the phone-sized overlay was tiny there, and Jersey 10 below ~14 px starts to blur 2 into Z */
@media (min-width: 700px) and (min-height: 700px) {
  :root { --ui: 1.4; }
}

/* Cross-document view transition: when arriving from /projects/ (or any same-site page), dissolve in from the outgoing screen. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vtArrive .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vtArrive { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }