/* game.css — układ Pająka: stół na całym ekranie (płótno), pasek wyniku i przyciski
   przyklejone do stołu (zmienne --hud-*, --tool-*, --table-* z layout.js),
   menu na tle żywego stołu. Układ „top”: wynik nad stołem, przyciski pod nim.
   Układ „side”: wynik i przyciski w bocznych kolumnach. Szerokość przycisków
   z treści, nic rozciągnięte na cały ekran (§1g). */
[hidden] { display: none !important; }
#table { position: fixed; inset: 0; display: block; touch-action: none; }

.screen {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; overflow: hidden;
  padding: calc(var(--safe-top, 0px) + 12px) calc(var(--safe-right, 0px) + 12px) calc(var(--safe-bottom, 0px) + 12px) calc(var(--safe-left, 0px) + 12px);
  background: var(--veil); animation: screenIn var(--t-med) var(--ease);
}
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } }
/* Zanim gra wstanie (wolna sieć), widać tylko tło w kolorach gry, nie puste przyciski. */
body:not([data-booted]) .screen, body:not([data-booted]) #hud, body:not([data-booted]) #tools { visibility: hidden; }
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--edge);
  border-radius: var(--r-l); box-shadow: var(--lift); padding: clamp(16px, 4.2vw, 24px);
}

/* ——— menu ——— */
.menu-card { position: relative; overflow: hidden; width: min(100%, 440px); display: grid; gap: var(--sp-3); }
.menu-card > * { position: relative; }
.menu-card > .menu-web { position: absolute; top: 0; right: 0; width: 46%; height: auto; color: var(--acc); opacity: .16; pointer-events: none; }
.brand { display: flex; align-items: center; justify-content: center; gap: 14px; }
.brand h1 { margin: 0; display: grid; line-height: 1; text-align: left; }
.brand-name {
  font-size: clamp(32px, 9vw, 44px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--acc-2), var(--acc) 55%, var(--acc-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px var(--glow)); padding-right: 2px;
}
.brand-sub { font-size: 12.5px; font-weight: 800; color: var(--text-2); letter-spacing: .38em; text-transform: uppercase; margin-top: 9px; }
.logo { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 0 12px var(--glow)); }
.logo svg { width: 100%; height: 100%; display: block; }
.tagline { margin: 0; text-align: center; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.modes { display: grid; gap: var(--sp-2); }
.mode, .continue {
  display: grid; grid-template-columns: 46px 1fr 22px; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px;
  text-align: left; cursor: pointer; background: var(--card-2); border: 1px solid var(--edge); border-radius: var(--r-m);
  box-shadow: var(--lift-s); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.continue { border-color: var(--edge-strong); background: linear-gradient(180deg, var(--card-3), var(--card-2)); }
.mode:hover, .continue:hover { border-color: var(--edge-strong); }
.mode:active, .continue:active { transform: translateY(1px) scale(.99); }
.mode:focus-visible, .continue:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .tool:focus-visible, .seg:focus-visible, .toggle:focus-visible, .item:focus-visible { outline: 3px solid var(--acc-2); outline-offset: 2px; }
.mode-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--acc-ink); border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, var(--acc-2), var(--acc) 60%, var(--acc-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .25); }
.mode-txt { display: grid; gap: 2px; min-width: 0; }
.mode-txt b { font-size: 17px; font-weight: 800; }
.mode-txt small { font-size: 13px; color: var(--text-2); line-height: 1.3; }
.mode-txt .meta { color: var(--gold); font-weight: 700; font-size: 12.5px; }
.mode-txt .meta:empty { display: none; }
.mode-go { color: var(--text-3); }
.mode.done .mode-ic { background: linear-gradient(180deg, #b8f0d0, var(--good)); }
.menu-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); }

/* ——— pasek wyniku i przyciski przy stole ——— */
body:not([data-screen="play"]) #hud, body:not([data-screen="play"]) #tools, body:not([data-screen="play"]) #btnFinish { display: none; }
#hud {
  position: fixed; z-index: 3; left: var(--hud-x); top: var(--hud-y); width: var(--hud-w); height: var(--hud-h);
  display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3);
  background: var(--bar); border: 1px solid var(--edge); border-radius: var(--r-m); box-shadow: var(--lift-s);
}
.hud-mode { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.hud-mode b, .hud-mode small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-mode b { font-size: 15px; font-weight: 800; }
.hud-mode small { font-size: 12.5px; color: var(--text-3); font-weight: 700; }
.stat { display: grid; justify-items: end; line-height: 1.1; min-width: 44px; }
.stat small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.stat b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
#tools {
  position: fixed; z-index: 3; left: var(--tool-x); top: var(--tool-y); width: var(--tool-w); height: var(--tool-h);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
.tool {
  display: grid; justify-items: center; align-content: center; gap: 2px; width: fit-content; min-width: 64px; max-width: 104px; height: 56px; padding: 4px 10px;
  cursor: pointer; background: var(--bar); border: 1px solid var(--edge); border-radius: var(--r-m); box-shadow: var(--lift-s);
  font-size: 13px; font-weight: 800; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.tool span { display: grid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.tool .ic { width: 22px; height: 22px; color: var(--acc); }
.tool:active { transform: scale(.95); }
.tool:disabled { opacity: .42; cursor: default; }

#btnFinish {
  position: fixed; z-index: 4; left: calc(var(--table-x) + var(--table-w) / 2); top: calc(var(--tool-y) - 66px);
  transform: translateX(-50%); animation: finishIn var(--t-med) var(--ease);
}
@keyframes finishIn { from { opacity: 0; transform: translate(-50%, 10px); } }
body[data-layout="side"] #btnFinish { top: calc(var(--table-y) + var(--table-h) - 60px); }

/* układ boczny (telefon w poziomie): wynik w kolumnie talii, przyciski 2×2 przy fundamentach */
body[data-layout="side"] #hud { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 8px 10px; }
body[data-layout="side"] .hud-mode { flex: none; }
body[data-layout="side"] .hud-mode b { font-size: 13.5px; white-space: normal; line-height: 1.2; }
body[data-layout="side"] .hud-mode small { display: none; }
body[data-layout="side"] .stat { grid-template-columns: 1fr auto; align-items: baseline; justify-items: start; gap: 6px; }
body[data-layout="side"] .stat b { font-size: 16px; justify-self: end; }
body[data-layout="side"] #tools { display: grid; grid-template-columns: repeat(2, 52px); grid-auto-rows: 50px; gap: 8px; align-content: end; justify-content: center; }
body[data-layout="side"] .tool { width: 52px; min-width: 52px; height: 50px; padding: 0; }
body[data-layout="side"] .tool span + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }