/* game.css — układ: 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); } }
.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 { width: min(100%, 440px); display: grid; gap: var(--sp-3); }
.brand { display: flex; align-items: center; justify-content: center; gap: 16px; }
.brand h1 { margin: 0; display: grid; line-height: 1; text-align: left; }
.brand-name {
  font-family: var(--serif); font-size: clamp(36px, 10vw, 48px); font-weight: 700; font-style: italic; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 4px;
}
.brand-sub { font-size: 13px; font-weight: 800; color: var(--text-2); letter-spacing: .22em; text-transform: uppercase; margin-top: 8px; }
.logo { position: relative; width: 66px; height: 60px; flex: none; }
.logo i {
  position: absolute; bottom: 0; width: 34px; height: 48px; display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(180deg, #fffdf8, #efe7d4); border: 1px solid rgba(58, 46, 26, .38);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 10px rgba(0, 0, 0, .35); transform-origin: 50% 100%;
}
.logo i .ic { width: 20px; height: 20px; }
.logo .c1 { left: 2px; color: #1b1d22; transform: rotate(-14deg); }
.logo .c2 { left: 16px; color: #c3223a; transform: rotate(0deg); bottom: 4px; }
.logo .c3 { left: 30px; color: #c3223a; transform: rotate(14deg); }
.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(--gold-2); outline-offset: 2px; }
.mode-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, var(--gold-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: 14px; font-weight: 800; }
.hud-mode small { font-size: 11.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: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.stat b { font-size: 17px; 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: 12px; 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(--gold); }
.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); } }

/* 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: 12.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: 15px; 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); }
body[data-layout="side"] #btnFinish { top: calc(var(--table-y) + var(--table-h) - 60px); }