/* game.css — układ: płótno na cały ekran, pasek wyniku i dok mocy przyklejone
   do planszy (zmienne --bx/--by/--bw/--bh z layout.js), menu i wybór poziomu
   na tle żywej planszy. Pion: pasek nad planszą, dok pod nią. Poziom: panele
   po bokach. Nic nie jest rozciągnięte na cały ekran (§1g). */
[hidden] { display: none !important; }
#scene { 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: 14px; }
.brand h1 { margin: 0; display: grid; line-height: 1; text-align: left; }
.brand-name {
  font-size: clamp(36px, 10vw, 50px); font-weight: 900; 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;
}
.brand-sub { font-size: 15px; font-weight: 700; color: var(--text-2); letter-spacing: .06em; margin-top: 6px; }
.logo { position: relative; width: 62px; height: 58px; flex: none; }
.logo i { position: absolute; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset -3px -4px 6px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.3); }
.logo i::after { content: ""; position: absolute; left: 6px; top: 5px; width: 9px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); transform: rotate(-30deg); }
.logo .m1 { left: 0; bottom: 0; background: radial-gradient(circle at 34% 30%, #ffa3ae, #e5344b 45%, #6e0c1b); }
.logo .m2 { right: 0; bottom: 0; background: radial-gradient(circle at 34% 30%, #aecdff, #2f73e6 45%, #0b2a6e); }
.logo .m3 { left: 16px; top: 0; background: radial-gradient(circle at 34% 30%, #ffe7a3, #f2aa1a 45%, #7f4a00); }
.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 {
  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);
}
.mode:hover { border-color: var(--edge-strong); }
.mode:active { transform: translateY(1px) scale(.99); }
.mode:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .level:focus-visible, .power:focus-visible, .seg:focus-visible, .toggle: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-go { color: var(--text-3); }
.mode.done .mode-ic { background: linear-gradient(180deg, #b8f0d0, var(--good)); }
.menu-foot { display: flex; justify-content: center; gap: var(--sp-2); }

/* ——— wybór poziomu ——— */
.levels-card { width: min(100%, 480px); display: grid; gap: var(--sp-3); }
.bar { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-2); }
.bar h2 { margin: 0; font-size: 20px; font-weight: 800; text-align: center; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--card-3); color: var(--gold); font-weight: 800; font-size: 14px; white-space: nowrap; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.level {
  aspect-ratio: 1; min-width: 48px; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 2px; 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);
}
.level:active { transform: scale(.96); }
.level .num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.level .stars { display: flex; gap: 1px; }
.level .stars i { color: var(--track); display: grid; }
.level .stars i.on { color: var(--gold); }
.level .stars .ic { width: 12px; height: 12px; }
.level.current { border-color: var(--gold); box-shadow: var(--lift-s), 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); animation: glowPulse 1.8s ease-in-out infinite; }
.level.locked { opacity: .5; cursor: default; }
.level.locked .ic { width: 18px; height: 18px; color: var(--text-3); }
.level.locked .num { font-size: 12px; color: var(--text-3); }
@keyframes glowPulse { 50% { box-shadow: var(--lift-s), 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); } }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ——— pasek wyniku i dok mocy (tylko w grze) ——— */
#hud, #dock { position: fixed; z-index: 4; display: none; }
body[data-screen="play"] #hud, body[data-screen="play"] #dock { display: grid; }
#hud {
  left: var(--bx); width: var(--bw); top: max(calc(var(--safe-top, 0px) + 8px), calc(var(--by) - 76px)); min-height: 66px;
  grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "pause mode score" "pause shots shots";
  align-items: center; column-gap: 12px; row-gap: 4px; padding: 8px 12px 8px 10px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--edge); border-radius: var(--r-m); box-shadow: var(--lift-s);
}
#btnPause { grid-area: pause; }
.hud-mode { grid-area: mode; display: grid; min-width: 0; }
.hud-mode b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.hud-mode span { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.hud-mode span:empty { display: none; }
.hud-score { grid-area: score; display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.hud-score small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.hud-score b { font-size: 20px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-shots { grid-area: shots; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding-top: 4px; }
.shots-num { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 2ch; }
.shots-bar { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.shots-bar .fill { position: absolute; inset: 0; border-radius: 4px; transform-origin: left; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transition: transform var(--t-med) var(--ease); }
.shots-bar .mark { position: absolute; top: -5px; width: 18px; height: 18px; margin-left: -9px; color: var(--card-3); display: grid; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.shots-bar .mark .ic { width: 18px; height: 18px; }
.hud-shots[data-stars="2"] .m2, .hud-shots[data-stars="3"] .m2, .hud-shots[data-stars="3"] .m3 { color: var(--gold); }
#dock {
  left: var(--bx); width: var(--bw); top: calc(var(--by) + var(--bh) + 8px); height: 60px;
  grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px;
}
.power {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 6px 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--card-2), var(--card)); 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);
}
.power:active { transform: scale(.97); }
.power .pw-ic { color: var(--gold); display: grid; }
.power .pw-name { font-size: 14px; font-weight: 700; }
.power .pw-count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; background: var(--gold); color: var(--gold-ink); }
.power.empty { opacity: .55; }
.power.empty .pw-count { background: var(--card-3); color: var(--text-3); }
.power.armed { border-color: var(--gold); animation: armed 1s ease-in-out infinite; }
@keyframes armed { 50% { box-shadow: var(--lift-s), 0 0 0 5px color-mix(in srgb, var(--gold) 30%, transparent); } }
.meter { height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.meter i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #7fd6ff, #c79bff, #ffd27a); transition: transform 320ms var(--ease); }

/* poziomo: panele po bokach planszy */
body[data-layout="landscape"] #hud {
  left: calc(var(--bx) - var(--side) - 12px); width: var(--side); top: var(--by); min-height: 0;
  grid-template-columns: 1fr; grid-template-areas: "pause" "mode" "score" "shots"; justify-items: stretch; row-gap: 12px; padding: 14px;
}
body[data-layout="landscape"] #hud .hud-score { justify-content: flex-start; }
body[data-layout="landscape"] #dock {
  left: calc(var(--bx) + var(--bw) + 12px); width: var(--side); top: var(--by); height: auto;
  grid-template-columns: 1fr; gap: 12px; justify-items: stretch;
}
body[data-layout="landscape"] .power { justify-content: flex-start; }