/* game.css — układ: plansza na całym ekranie (płótno), paski graczy, zapis ruchów
   i przyciski przyklejone do planszy (zmienne --bar-*, --tool-*, --list-* z layout.js),
   menu na tle żywej planszy. 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; }
body:not([data-booted]) .screen { visibility: hidden; }

.screen {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; overflow: auto;
  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: 14px; }
.brand h1 { margin: 0; display: grid; line-height: 1; text-align: left; }
.brand-name {
  font-family: var(--serif); font-size: clamp(38px, 10.5vw, 52px); font-weight: 700; 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: 12.5px; font-weight: 800; color: var(--text-3); letter-spacing: .3em; text-transform: uppercase; margin-top: 8px; }
.logo { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #2a1a06;
  background: radial-gradient(circle at 35% 30%, #fbe6ad, #d6aa52 55%, #8a5f1c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(80, 50, 10, .35), 0 6px 14px rgba(0, 0, 0, .4); }
.logo .ic { width: 34px; height: 34px; }
.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: 64px; padding: 9px 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, .promo-btn: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, #c9f0d3, var(--good)); }
.mode.off { opacity: .72; }
.menu-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); }

/* ——— paski graczy ——— */
body:not([data-screen="play"]) .bar, body:not([data-screen="play"]) #tools, body:not([data-screen="play"]) .move-list { display: none; }
.bar {
  position: fixed; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--bar); border: 1px solid var(--edge); border-radius: var(--r-m); box-shadow: var(--lift-s); transition: border-color var(--t-fast);
}
#barTop { left: var(--bar-top-x); top: var(--bar-top-y); width: var(--bar-top-w); height: var(--bar-top-h); }
#barBottom { left: var(--bar-bottom-x); top: var(--bar-bottom-y); width: var(--bar-bottom-w); height: var(--bar-bottom-h); }
.bar.turn { border-color: var(--edge-strong); box-shadow: var(--lift-s), 0 0 0 1px rgba(214, 170, 82, .25); }
.bar .who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .4); }
.bar .dot.w { background: linear-gradient(180deg, #fffbf1, #cdb88f); }
body[data-theme="light"] .bar .dot.w { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(90, 60, 25, .45), 0 1px 3px rgba(0, 0, 0, .25); }
.bar .dot.b { background: linear-gradient(180deg, #5b4a3f, #110d0a); }
.bar .state { font-size: 13px; font-weight: 800; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .caps { display: flex; align-items: center; gap: 0; justify-self: end; min-width: 0; overflow: hidden; }
.bar .caps .ic.cap { width: 18px; height: 18px; margin-left: -4px; }
.bar .caps .ic.cap.w { color: #f3e7cc; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.bar .caps .ic.cap.b { color: #2a211c; filter: drop-shadow(0 1px 0 rgba(255, 240, 210, .35)); }
/* Na pergaminie jasna figurka dostaje ciemny kontur (cztery cienie po 0,6 px), inaczej znika. */
body[data-theme="light"] .bar .caps .ic.cap.w { color: #fbf3e0; filter: drop-shadow(.6px 0 0 #6b4a22) drop-shadow(-.6px 0 0 #6b4a22) drop-shadow(0 .6px 0 #6b4a22) drop-shadow(0 -.6px 0 #6b4a22); }
.bar .adv { margin-left: 6px; font-size: 13px; color: var(--text-2); }
.bar .bubble { position: absolute; right: 12px; top: -34px; padding: 6px 12px; border-radius: 999px; background: var(--card-3); border: 1px solid var(--edge-strong); box-shadow: var(--lift-s);
  font-size: 13px; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); pointer-events: none; }
#barBottom .bubble { top: auto; bottom: -34px; transform: translateY(-6px); }
.bar .bubble.show { opacity: 1; transform: none; }

/* ——— przyciski i zapis ruchów ——— */
#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: 60px; 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(--gold); }
.tool:active { transform: scale(.95); }
/* Wyłączony: korpus zostaje (bez prześwitu blatu, który w jasnym motywie udawał wciśnięcie), gaśnie treść. */
.tool:disabled { cursor: default; box-shadow: none; border-color: var(--track); }
.tool:disabled > span { opacity: .36; }
.move-list { display: none; }
body[data-layout="side"][data-screen="play"] .move-list, body[data-strip][data-screen="play"] .move-list {
  position: fixed; z-index: 3; left: var(--list-x); top: var(--list-y); width: var(--list-w); height: var(--list-h);
  background: var(--bar); border: 1px solid var(--edge); border-radius: var(--r-m); box-shadow: var(--lift-s); font-size: 14px; font-variant-numeric: tabular-nums;
}
body[data-layout="side"][data-screen="play"] .move-list { display: flex; flex-direction: column; overflow-y: auto; padding: 6px; }
body[data-layout="side"] .move-list .row { display: grid; grid-template-columns: 40px 1fr 1fr; align-items: center; min-height: 32px; padding: 0 6px; border-radius: var(--r-s); flex: none; }
body[data-layout="side"] .move-list .row:nth-child(even) { background: var(--track); }
body[data-strip] .move-list .row { display: inline-flex; align-items: center; gap: 2px; flex: none; }
body[data-strip][data-screen="play"] .move-list {
  display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 0 10px; scrollbar-width: none;
}
body[data-strip] .move-list::-webkit-scrollbar { display: none; }
.move-list .no { color: var(--text-3); font-weight: 700; }
body[data-strip] .move-list .no { margin-left: 6px; }
.move-list .mv { font-weight: 700; display: inline-flex; align-items: center; justify-self: start; padding: 3px 7px; border-radius: 8px; }
.move-list .mv.gap { color: var(--text-3); }
.move-list .mv.last { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.move-list .res { align-self: center; font-weight: 800; color: var(--gold); padding: 6px 10px; flex: none; }
.move-list .empty { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; font-weight: 700; padding: 6px; }
.move-list .empty.goal { color: var(--gold); font-size: 14px; }
.move-list .empty.goal .ic { width: 17px; height: 17px; }
.san { display: inline-flex; align-items: center; white-space: nowrap; }
.ic.fig { width: 15px; height: 15px; margin: 0 0 0 -2px; flex: none; }
#tools { flex-wrap: wrap; align-content: center; row-gap: 8px; }
/* Dwa rzędy: równa siatka 2×2 zamiast 3 + 1 (wąski panel boczny, długie napisy). */
/* Tylko na ekranie gry: ta sama waga co ukrywanie przycisków w menu, więc bez [data-screen] siatka wygrywała i przyciski stały za menu. */
body[data-screen="play"][data-tools2] #tools { display: grid; grid-template-columns: repeat(2, minmax(104px, 120px)); justify-content: center; column-gap: 10px; }
body[data-tools2] .tool { width: 100%; max-width: none; }
body[data-tools2] .tool span { max-width: 108px; }