/* Eko-Sort 3D — Ucieczka ze słoika. Bazuje na tokenach z site.css. */
.game-body { overflow: hidden; height: 100vh; height: 100dvh; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--bg); }
.g-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.g-cracks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.g-cracks path { fill: none; stroke: rgba(230,255,245,.75); stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(127,227,197,.6)); }
.g-cracks path.thin { stroke-width: .8; stroke: rgba(230,255,245,.5); }
.g-flash { position: fixed; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 50% 10%, #fff, rgba(212,239,120,.6) 40%, transparent 75%); opacity: 0; }
kbd { font-family: inherit; font-size: .7rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid currentColor; opacity: .7; line-height: 1.2; }
.kbd-in { margin-left: 6px; border-color: rgba(8,32,24,.4); }

/* HUD */
.g-hud { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.g-hud > * { pointer-events: auto; }
.g-back { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 10px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; }
.g-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.g-progress { margin-inline: auto; display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 18px; border-radius: 999px; }
.g-progress ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.g-progress li { width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); border: 1.5px solid var(--line-2); transition: background .4s, border-color .4s, transform .6s var(--spring); }
.g-progress li.now { border-color: var(--lime); transform: rotate(45deg) scale(1.3); }
.g-progress li.ok { background: var(--lime); border-color: var(--lime); }
.g-progress li.no { background: #ff7a66; border-color: #ff7a66; }
.g-score { display: flex; align-items: baseline; gap: 4px; padding: 6px 14px; border-radius: 999px; background: rgba(212,239,120,.12); }
.g-score b { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lime); min-width: 3ch; text-align: right; }
.g-score span { font-size: .72rem; color: var(--muted); }
.g-tools { display: flex; gap: 8px; }
.g-tool { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; transition: transform .4s var(--spring), border-color .3s, opacity .3s; }
.g-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.g-tool kbd { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: var(--bg); font-size: .62rem; padding: 1px 5px; }
.g-tool:disabled { opacity: .4; cursor: not-allowed; }
.g-tool:not(:disabled):hover { transform: translateY(-2px); border-color: var(--lime); }
.g-tool.is-active { background: var(--lime); color: #082018; }
.g-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--lime); color: #082018; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }

.g-combo { position: fixed; z-index: 15; top: 92px; right: 18px; transform: scale(0); transform-origin: right center; display: flex; align-items: baseline; gap: 6px; padding: 8px 18px; border-radius: 999px; background: var(--lime); color: #082018; font-weight: 800; box-shadow: 0 0 40px rgba(212,239,120,.5); pointer-events: none; }
.g-combo b { font-size: 1.5rem; }
.g-combo span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.g-label { position: fixed; z-index: 12; left: 0; top: 0; pointer-events: none; padding: 9px 16px; border-radius: 999px; background: rgba(4,17,13,.72); border: 1px solid rgba(212,239,120,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 650; font-size: clamp(.9rem, 1.4vw, 1.1rem); white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.g-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-right: 1px solid rgba(212,239,120,.45); border-bottom: 1px solid rgba(212,239,120,.45); transform: rotate(45deg); }
.g-tip { position: fixed; z-index: 14; left: 50%; top: calc(84px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); padding: 14px 20px; border-radius: 18px; font-size: .95rem; text-align: center; }
.g-tip strong { color: var(--lime); }
.score-pop { position: fixed; z-index: 16; pointer-events: none; font-weight: 800; font-size: 1.6rem; color: var(--lime); text-shadow: 0 0 20px rgba(212,239,120,.7); transform: translate(-50%, -50%); }
.score-pop.bad { color: #ff9d8a; text-shadow: 0 0 20px rgba(255,120,100,.7); }

/* Pojemniki-przyciski */
.g-bins { position: fixed; z-index: 20; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(640px, calc(100% - 24px)); }
.g-bin { --c: #3f9b4d; position: relative; min-height: 72px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 38%, rgba(4,17,13,.6)), rgba(4,17,13,.75)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; font-weight: 700; font-size: 1rem; box-shadow: 0 7px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .3s, filter .3s; }
.g-bin img { width: 38px; height: auto; margin: -8px 0 -6px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition: transform .4s var(--spring); }
.g-bin.is-lane img { transform: translateY(-3px) scale(1.08); }
.g-bin kbd { position: absolute; top: 8px; right: 10px; }
.g-bin:disabled { opacity: .45; cursor: default; }
.g-bin.is-lane { filter: brightness(1.25); box-shadow: 0 7px 0 rgba(0,0,0,.45), 0 0 0 2px var(--c), 0 0 30px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.g-bin.is-down { transform: translateY(7px); box-shadow: 0 0 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.g-bin.is-hint { animation: hintpulse .8s ease-in-out infinite; }
@keyframes hintpulse { 50% { box-shadow: 0 7px 0 rgba(0,0,0,.45), 0 0 0 3px #fff, 0 0 50px var(--c); } }
.bin-glass { --c: #3f9b4d; } .bin-mixed { --c: #56605b; } .bin-pszok { --c: #d98a2b; }
.g-keys { position: fixed; z-index: 20; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
.g-keys .kc { min-width: 46px; height: 46px; }
.kc-sm { min-width: 40px; height: 40px; border-radius: 11px; font-size: .9rem; --d: 4px; }

/* Panele */
.g-panel { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 32px; padding: clamp(24px, 4vw, 44px); background: linear-gradient(135deg, rgba(7,26,20,.82), rgba(7,26,20,.6)); }
.g-panel h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 16px; }
.g-panel h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 10px; }
.g-lead { color: var(--muted); font-size: 1.05rem; }
.g-howto { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.g-howto li { display: flex; align-items: center; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.g-howto p { margin: 0 0 0 8px; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.g-howto small { color: var(--faint); font-weight: 400; }
.g-modes { display: inline-flex; margin-bottom: 22px; }
.g-modes button { position: relative; z-index: 1; border: 0; background: transparent; padding: 0 18px; min-height: 46px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); transition: color .3s; }
.g-modes button.active { color: #082018; }
.g-title-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 14px; }

.g-feedback { width: min(600px, calc(100% - 24px)); border-color: rgba(255,122,102,.4); }
.g-fb-verdict { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ff9d8a; margin-bottom: 12px; }
.g-fb-row { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.g-fb-row img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); flex: none; }
.g-fb-answer { margin: 0; color: var(--muted); font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#g-fb-text { color: var(--ink); font-size: 1.05rem; }

.g-pausebox { width: min(460px, calc(100% - 24px)); text-align: center; }
.g-pausebox .g-title-actions { justify-content: center; }
.g-pausebox p { color: var(--muted); }

.g-results { text-align: center; }
.g-results .eyebrow { justify-content: center; }
.g-results .g-title-actions { justify-content: center; }
.g-stars { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.g-stars i { width: 54px; height: 54px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,.12); }
.g-stars i.on { background: linear-gradient(135deg, #f4ffc4, var(--lime)); filter: drop-shadow(0 0 14px rgba(212,239,120,.7)); }
.g-res-sub { color: var(--muted); }
.g-res-stats { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g-res-stats li { padding: 14px 8px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.g-res-stats b { display: block; font-size: 1.8rem; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.g-res-stats span { font-size: .76rem; color: var(--muted); }
.g-mistakes { text-align: left; margin-bottom: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.g-mistakes summary { padding: 14px 18px; font-weight: 650; cursor: pointer; }
.g-mistakes ul { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 10px; }
.g-mistakes li { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); }
.g-mistakes li img { width: 52px; height: 52px; object-fit: contain; }
.g-mistakes li p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.g-mistakes li .il-listen { color: var(--ink); }

.g-count { position: fixed; z-index: 25; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: clamp(6rem, 22vw, 16rem); font-weight: 750; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3px var(--lime); text-shadow: 0 0 60px rgba(212,239,120,.35); }
.g-count.go { color: var(--lime); -webkit-text-stroke: 0; font-size: clamp(4rem, 14vw, 10rem); }

/* Intro */
.g-intro { position: fixed; inset: 0; z-index: 40; background: #000; }
.g-intro video { width: 100%; height: 100%; object-fit: cover; }
.g-intro-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.7)), linear-gradient(0deg, rgba(0,0,0,.75), transparent 45%); }
.g-intro-text { position: absolute; left: 0; right: 0; bottom: 14vh; display: grid; place-items: center; padding: 0 20px; }
.g-intro-text p { margin: 0; max-width: 820px; text-align: center; font-family: "Instrument", Georgia, serif; font-style: italic; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.15; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.g-skip { position: absolute; right: 18px; bottom: 18px; }
.g-skip kbd { margin-left: 6px; }

.g-loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); color: var(--muted); font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; transition: opacity .6s; }
.g-loading span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--lime); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-loading.is-done { opacity: 0; pointer-events: none; }
.g-nowebgl { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; padding: 24px; background: var(--bg); }

/* ===== Motyw jasny: dzienna kuchnia, jasne panele (tokeny i .glass z motyw-jasny.css) ===== */
html[data-theme="light"] .g-cracks path { stroke: rgba(13,42,32,.6); filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
html[data-theme="light"] .g-cracks path.thin { stroke: rgba(13,42,32,.4); }
html[data-theme="light"] .g-progress li.now { border-color: var(--lime-ink); }
html[data-theme="light"] .g-score { background: rgba(212,239,120,.45); }
html[data-theme="light"] .g-score b { color: var(--lime-ink); }
html[data-theme="light"] .g-tool:not(:disabled):hover { border-color: var(--lime-ink); }
html[data-theme="light"] .g-label { background: rgba(255,255,255,.9); border-color: rgba(68,114,11,.45); color: var(--ink); box-shadow: 0 10px 30px rgba(13,42,32,.18); }
html[data-theme="light"] .g-label::after { border-color: rgba(68,114,11,.45); }
html[data-theme="light"] .g-tip strong { color: var(--lime-ink); }
html[data-theme="light"] .score-pop { color: var(--lime-ink); text-shadow: 0 0 14px rgba(255,255,255,.95), 0 2px 0 rgba(255,255,255,.8); }
html[data-theme="light"] .score-pop.bad { color: #b23e29; }
html[data-theme="light"] .g-bin { color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, rgba(255,255,255,.9)), rgba(255,255,255,.82)); box-shadow: 0 7px 0 rgba(13,42,32,.2), inset 0 1px 0 #fff; }
html[data-theme="light"] .g-bin img { filter: drop-shadow(0 6px 8px rgba(13,42,32,.3)); }
html[data-theme="light"] .g-bin.is-lane { filter: none; box-shadow: 0 7px 0 rgba(13,42,32,.2), 0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 50%, transparent), inset 0 1px 0 #fff; }
html[data-theme="light"] .g-bin.is-down { box-shadow: 0 0 0 rgba(13,42,32,.2), inset 0 1px 0 #fff; }
html[data-theme="light"] .game-body .kc { color: var(--ink); background: linear-gradient(180deg, #fff, #eef2e8); border-color: rgba(13,42,32,.18); box-shadow: 0 var(--d) 0 rgba(13,42,32,.22), inset 0 1px 0 #fff; }
html[data-theme="light"] .game-body .kc.is-down { box-shadow: 0 0 0 rgba(13,42,32,.22), inset 0 1px 0 #fff; background: var(--lime); }
html[data-theme="light"] .g-panel { background: linear-gradient(135deg, rgba(250,251,246,.94), rgba(250,251,246,.8)); }
html[data-theme="light"] .g-howto li { background: rgba(255,255,255,.7); }
html[data-theme="light"] .g-fb-verdict { color: #b23e29; }
html[data-theme="light"] .g-fb-row img { filter: drop-shadow(0 14px 18px rgba(13,42,32,.28)); }
html[data-theme="light"] .g-stars i { background: rgba(13,42,32,.1); }
html[data-theme="light"] :is(.g-res-stats li, .g-mistakes, .g-mistakes li) { background: rgba(255,255,255,.72); }
html[data-theme="light"] .g-res-stats b { color: var(--lime-ink); }
html[data-theme="light"] .g-count { -webkit-text-stroke-color: var(--lime-ink); text-shadow: 0 0 40px rgba(255,255,255,.9); }
html[data-theme="light"] .g-count.go { color: var(--lime-ink); }
html[data-theme="light"] .g-loading span { border-top-color: var(--lime-ink); }

@media (max-width: 760px) {
  .g-hud { gap: 6px; left: 10px; right: 10px; }
  .g-back span { display: none; }
  .g-back { width: 44px; padding: 0; justify-content: center; }
  .g-progress { gap: 6px; padding: 6px 6px 6px 10px; min-width: 0; }
  .g-progress ol { gap: 3px; }
  .g-progress li { width: 7px; height: 7px; border-radius: 2px; }
  .g-score { padding: 4px 8px; } .g-score span { display: none; } .g-score b { font-size: 1.05rem; min-width: 2ch; }
  .g-tool { width: 44px; height: 44px; border-radius: 14px; }
  .g-tools { gap: 6px; }
  .g-keys { display: none; }
  .g-bin { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; font-size: .86rem; min-height: 84px; }
  .g-bin kbd { display: none; }
  .g-howto { grid-template-columns: 1fr; }
  .g-res-stats { grid-template-columns: repeat(2, 1fr); }
  .g-tip { top: calc(72px + env(safe-area-inset-top)); font-size: .88rem; }
  .g-combo { top: 150px; }
}
@media (max-width: 420px) {
  #g-sound { display: none; }
  .g-score b { font-size: 1.1rem; }
}
@media (hover: none) { .g-keys { display: none; } }