:root {
  --bg: #090c16;
  --panel: rgba(17, 22, 39, .82);
  --line: rgba(255,255,255,.095);
  --text: #f5f7ff;
  --muted: #828ba6;
  --blue: #39dff4;
  --blue-dark: #2680e7;
  --red: #ff4c77;
  --red-dark: #c92e61;
  --gold: #ffcd69;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 50% 35%, #13182b 0, #090c16 54%, #070911 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, #000, transparent 78%); }
.orb { position: fixed; width: 360px; height: 360px; border-radius: 50%; filter: blur(130px); opacity: .09; pointer-events: none; }
.orb-blue { background: var(--blue); left: -200px; top: 25%; }
.orb-red { background: var(--red); right: -200px; bottom: 12%; }

.app { width: min(1280px, calc(100% - 40px)); margin: auto; padding: 26px 0 38px; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; width: 210px; height: 62px; overflow: hidden; text-decoration: none; }
.brand-logo { display: block; object-fit: cover; object-position: center; mix-blend-mode: screen; }
.logo .brand-logo { width: 100%; height: 100%; }
.top-actions { display: flex; gap: 8px; }
.icon-btn, .menu-btn { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); cursor: pointer; transition: .2s; }
.icon-btn { width: 39px; height: 39px; font-size: 17px; }
.icon-btn.muted { opacity: .42; }
.menu-btn { padding: 0 14px; color: #a3aac1; font-size: 9px; font-weight: 850; letter-spacing: 1.3px; }
.menu-btn span { margin-left: 7px; font-size: 13px; }
.nav-icon-btn { display: grid; place-items: center; width: 43px; height: 43px; padding: 5px; }
.nav-icon-btn img { display: block; width: 29px; height: 29px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.48)) drop-shadow(0 0 6px rgba(57,223,244,.22)); }
.icon-btn:hover, .menu-btn:hover { border-color: rgba(57,223,244,.42); color: white; transform: translateY(-1px); }

.game-layout { display: grid; grid-template-columns: 205px minmax(400px, 680px) 205px; gap: 30px; align-items: center; justify-content: center; margin-top: 18px; }
.arena-column { min-width: 0; }
.player-panel { position: relative; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 17px; padding: 16px; background: linear-gradient(145deg, rgba(22,28,50,.78), rgba(11,14,27,.72)); box-shadow: 0 24px 65px rgba(0,0,0,.22); opacity: .53; transform: scale(.98); transition: .3s; }
.player-panel.active { opacity: 1; transform: scale(1); }
.player-panel.active::after { content: "TWÓJ RUCH"; position: absolute; top: -10px; right: 12px; padding: 4px 7px; border-radius: 8px; color: #061119; background: var(--blue); font-size: 7px; font-weight: 950; letter-spacing: 1px; box-shadow: 0 0 16px rgba(57,223,244,.3); }
.player-red.active::after { background: var(--red); color: white; box-shadow: 0 0 16px rgba(255,76,119,.3); }
.player-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #b7fbff; background: radial-gradient(circle at 35% 25%, #8cffff, var(--blue) 34%, #1261bd 72%); box-shadow: 0 0 22px rgba(57,223,244,.28), inset -5px -7px 12px rgba(0,0,0,.3); font-size: 12px; }
.player-red .player-icon { color: #ffd0d9; background: radial-gradient(circle at 35% 25%, #ff9bae, var(--red) 34%, #9a1949 72%); box-shadow: 0 0 22px rgba(255,76,119,.26), inset -5px -7px 12px rgba(0,0,0,.3); }
.player-copy { display: flex; flex-direction: column; gap: 2px; }
.player-copy span, .pieces-left span { color: #727b98; font-size: 8px; letter-spacing: 1.6px; font-weight: 900; }
.player-copy strong { font-size: 11px; letter-spacing: 1px; }
.pieces-left { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 3px; }
.pieces-left strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.player-blue .pieces-left strong { color: var(--blue); }
.player-red .pieces-left strong { color: var(--red); }

.turn-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-height: 48px; padding: 0 15px; border: 1px solid var(--line); border-bottom: 0; border-radius: 15px 15px 0 0; background: rgba(17,22,40,.82); }
.turn-banner i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); transition: .3s; }
.turn-banner span { font-size: 9px; font-weight: 900; letter-spacing: 1.8px; }
.turn-banner small { color: #707894; font-size: 9px; }
.turn-banner.red i { background: var(--red); box-shadow: 0 0 10px var(--red); }

.arena-alert { display: flex; align-items: center; justify-content: space-between; max-height: 0; padding: 0 15px; overflow: hidden; opacity: 0; border: 1px solid transparent; border-bottom: 0; background: rgba(255,69,84,.1); transition: max-height .25s, padding .25s, opacity .25s; }
.arena-alert.visible { max-height: 44px; padding: 10px 15px; opacity: 1; border-color: rgba(255,85,95,.28); }
.arena-alert b { color: #ff6478; font-size: 8px; letter-spacing: 1.3px; }
.arena-alert span { color: #a98b98; font-size: 8px; }
.arena-alert.collapse { background: rgba(255,52,68,.2); }

.board-shell { position: relative; padding: clamp(10px, 2vw, 18px); border: 1px solid rgba(141,151,190,.18); background: rgba(8,11,22,.8); box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 0 40px rgba(0,0,0,.28); overflow: hidden; }
.board { --size: 8; position: relative; display: grid; grid-template-columns: repeat(var(--size), 1fr); aspect-ratio: 1; width: 100%; border: 1px solid rgba(144,155,201,.2); background: #11172a; user-select: none; touch-action: manipulation; }
.cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; cursor: default; }
.cell.light { background: rgba(35,43,70,.9); }
.cell.dark { background: rgba(17,23,43,.95); }
.cell.collapsed { background: #050710; box-shadow: inset 0 0 15px rgba(0,0,0,.85); }
.cell.collapsed::after { border-color: rgba(255,255,255,.008); }
.cell.danger { background: rgba(91,20,36,.72); animation: dangerPulse .8s infinite alternate; }
.cell.danger::after { border-color: rgba(255,80,95,.2); box-shadow: inset 0 0 13px rgba(255,48,68,.12); }
.cell.reactor-cell { background: radial-gradient(circle, rgba(158,91,255,.17), rgba(28,28,61,.92) 62%); }
.cell.reactor-cell::after { border-color: rgba(175,118,255,.2); box-shadow: inset 0 0 14px rgba(132,75,255,.13); }
.reactor-mark { position: absolute; z-index: 0; inset: 13%; display: grid; place-items: center; border: 1px solid rgba(183,133,255,.48); border-radius: 18%; color: rgba(208,177,255,.68); background: rgba(107,55,210,.08); box-shadow: 0 0 8px rgba(158,93,255,.24), inset 0 0 8px rgba(158,93,255,.18); animation: reactorIdle 2.2s ease-in-out infinite alternate; }
.reactor-mark::before, .reactor-mark::after { content: ""; position: absolute; inset: 15%; border: 1px solid currentColor; border-radius: 50%; opacity: .46; animation: reactorSpin 3.2s linear infinite; }
.reactor-mark::after { inset: 28%; border-style: dashed; animation-direction: reverse; animation-duration: 2s; }
.reactor-mark span { font-size: clamp(9px, 1.35vw, 16px); font-weight: 950; text-shadow: 0 0 7px currentColor; }
.cell.reactor-active .reactor-mark { animation: reactorBurst .52s ease-out; color: #f1ddff; background: rgba(174,91,255,.28); }
.cell::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.018); pointer-events: none; }
.cell.move { cursor: pointer; }
.cell.move::before { content: ""; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(57,223,244,.6); box-shadow: 0 0 13px rgba(57,223,244,.42); animation: pulse 1.2s infinite; }
.board.red-turn .cell.move::before { background: rgba(255,76,119,.68); box-shadow: 0 0 13px rgba(255,76,119,.4); }
.piece { position: absolute; z-index: 2; display: grid; place-items: center; width: 66%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transition: transform .16s cubic-bezier(.2,.8,.2,1), opacity .18s; color: rgba(255,255,255,.94); font-size: clamp(12px, 2.25vw, 25px); line-height: 1; font-weight: 950; text-shadow: 0 2px 5px rgba(0,0,0,.55); }
.cell.selectable { cursor: pointer; }
.cell.selectable:hover .piece { transform: translateY(-4%) scale(1.05); }
.piece.blue { background: radial-gradient(circle at 34% 25%, #c1ffff 0, #5deaf5 18%, #28aeea 48%, #155bc1 82%); border: 1px solid rgba(190,255,255,.72); box-shadow: 0 9px 14px rgba(0,0,0,.38), 0 0 15px rgba(57,223,244,.25), inset -7px -9px 13px rgba(0,31,101,.45); }
.piece.red { background: radial-gradient(circle at 34% 25%, #ffd2db 0, #ff7895 18%, #ef3d71 48%, #9c194b 82%); border: 1px solid rgba(255,202,214,.7); box-shadow: 0 9px 14px rgba(0,0,0,.38), 0 0 15px rgba(255,76,119,.25), inset -7px -9px 13px rgba(91,0,37,.46); }
.piece::after { content: ""; position: absolute; width: 24%; height: 11%; border-radius: 50%; background: rgba(255,255,255,.42); filter: blur(2px); left: 23%; top: 15%; transform: rotate(-20deg); }
body[data-theme="default"] .piece { width: 78%; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; box-shadow: none; filter: drop-shadow(0 10px 5px rgba(0,0,0,.58)) drop-shadow(0 0 5px currentColor); }
body[data-theme="default"] .piece.blue { color: #39dff4; background-image: url("assets/themes/default/piece-blue-v2.png"); }
body[data-theme="default"] .piece.red { color: #ff4c77; background-image: url("assets/themes/default/piece-red-v2.png"); }
body[data-theme="default"] .piece::after { display: none; }
body[data-theme="default"] .player-blue .player-icon { background: #173f64 url("assets/themes/default/piece-blue-v2.png") center / 118% no-repeat; }
body[data-theme="default"] .player-red .player-icon { background: #63243c url("assets/themes/default/piece-red-v2.png") center / 118% no-repeat; }
.cell.selected .piece { transform: translateY(-9%) scale(1.1); filter: brightness(1.13); }
.cell.selected::before { content: ""; position: absolute; z-index: 1; width: 78%; aspect-ratio: 1; border: 2px solid var(--blue); border-radius: 50%; box-shadow: 0 0 17px rgba(57,223,244,.55); animation: selectRing .9s infinite alternate; }
.board.red-turn .cell.selected::before { border-color: var(--red); box-shadow: 0 0 17px rgba(255,76,119,.5); }
.piece.sliding { z-index: 4; animation: pieceSlide var(--piece-move-duration, .42s) cubic-bezier(.22,.72,.24,1) both; }
.piece.out { animation: flyOut var(--piece-out-duration, .36s) forwards; }
.piece.flipped { animation: polarityFlip var(--piece-flip-duration, .48s) cubic-bezier(.2,.8,.25,1); }
.charge-symbol { position: relative; z-index: 3; }
.orbit { display: none; }
.board.energy-mode .piece { background: radial-gradient(circle at center, rgba(255,255,255,.98) 0 5%, currentColor 9%, rgba(16,23,42,.94) 31%, rgba(5,9,20,.84) 58%, transparent 72%); border-color: currentColor; box-shadow: 0 0 8px currentColor, 0 0 22px currentColor, inset 0 0 12px currentColor; color: var(--blue); overflow: visible; animation: electronCore 1.4s ease-in-out infinite alternate; }
.board.energy-mode .piece.red { color: var(--red); }
.board.energy-mode .piece.flipped { animation: polarityFlip var(--piece-flip-duration, .48s) cubic-bezier(.2,.8,.25,1); }
.board.energy-mode .piece::after { width: 35%; height: 35%; left: 32.5%; top: 32.5%; border-radius: 50%; background: currentColor; opacity: .28; filter: blur(5px); transform: none; animation: corePulse .8s ease-in-out infinite alternate; }
.board.energy-mode .charge-symbol { color: white; font-size: .86em; text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
.board.energy-mode .orbit { --tilt: 18deg; --speed: 2.4s; display: block; position: absolute; z-index: 1; left: 50%; top: 50%; width: 142%; height: 48%; border: 1px solid currentColor; border-radius: 50%; opacity: .65; box-shadow: 0 0 5px currentColor, inset 0 0 4px currentColor; transform: translate(-50%,-50%) rotate(var(--tilt)); animation: electronOrbit var(--speed) linear infinite; }
.board.energy-mode .orbit::after { content: ""; position: absolute; right: 5%; top: 11%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 5px white, 0 0 10px currentColor; }
.board.energy-mode .orbit-b { --tilt: -48deg; --speed: 1.85s; width: 148%; height: 43%; animation-direction: reverse; }
.em-effect { position: absolute; z-index: 6; overflow: hidden; pointer-events: none; color: #42f3ff; }
.em-effect.repel { color: #ff4f80; }
.em-effect .energy-beam { fill: none; stroke: currentColor; stroke-width: .07; stroke-linecap: round; stroke-dasharray: .12 .09; opacity: .7; filter: drop-shadow(0 0 .08px currentColor) drop-shadow(0 0 .18px currentColor); animation: currentFlow .26s linear infinite, beamPulse .62s ease-in-out infinite alternate; }
.em-effect .field-wave { fill: none; stroke: currentColor; stroke-width: .06; opacity: .75; transform-box: fill-box; transform-origin: center; animation: emWave .9s ease-out forwards; filter: drop-shadow(0 0 .09px currentColor); }
.em-effect .energy-particle { fill: white; stroke: currentColor; stroke-width: .025; filter: drop-shadow(0 0 .1px currentColor) drop-shadow(0 0 .2px currentColor); }
.interaction-overlay { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.interaction-overlay .connector { fill: none; stroke-width: .055; stroke-dasharray: .15 .12; opacity: .28; animation: neonDash 1.2s linear infinite; }
.interaction-overlay .interaction-arrow { fill: none; stroke-width: .085; stroke-linecap: round; opacity: .34; animation: neonPulse 1.15s ease-in-out infinite alternate; }
.interaction-overlay .repel { color: #ff4f80; stroke: #ff4f80; filter: drop-shadow(0 0 .07px #ff2c68) drop-shadow(0 0 .15px rgba(255,52,111,.72)); }
.interaction-overlay .attract { color: #35f2ff; stroke: #35f2ff; filter: drop-shadow(0 0 .07px #22dffc) drop-shadow(0 0 .15px rgba(48,229,255,.72)); }
.interaction-overlay .landing { fill: rgba(255,255,255,.055); stroke-width: .055; opacity: .7; animation: landingGlow 1.1s ease-in-out infinite alternate; }
.interaction-overlay .flow-arrow { fill: none; stroke-width: .115; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.interaction-overlay text { font: 900 .19px Inter, sans-serif; letter-spacing: .025px; text-anchor: middle; opacity: .74; paint-order: stroke; stroke: rgba(9,16,29,.8); stroke-width: .055px; }
.impact-text { position: absolute; z-index: 8; left: 50%; top: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(-7deg); color: white; font-size: clamp(30px, 7vw, 68px); font-weight: 1000; font-style: italic; letter-spacing: -2px; text-shadow: 0 3px 0 #4765ef, 0 0 30px rgba(80,132,255,.7); pointer-events: none; }
.impact-text.show { animation: impact .55s ease-out; }
.board-shell.shake { animation: shake .3s; }

.game-hint { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px 0; color: #646d89; font-size: 9px; }
.game-hint > span { display: flex; gap: 7px; align-items: center; }
.mouse-icon { display: inline-block; width: 12px; height: 16px; border: 1px solid #6d7590; border-radius: 6px; position: relative; }
.mouse-icon::after { content: ""; position: absolute; left: 5px; top: 2px; width: 1px; height: 4px; background: #79829f; }
.game-hint button { border: 0; background: transparent; color: #818aa7; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.game-hint button:hover { color: white; }

.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(5,7,14,.82); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .25s; }
.modal.visible { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(520px, 100%); border: 1px solid rgba(255,255,255,.12); border-radius: 23px; padding: 40px; background: linear-gradient(145deg, rgba(25,31,54,.98), rgba(11,15,29,.98)); box-shadow: 0 35px 100px rgba(0,0,0,.58); text-align: center; transform: translateY(10px) scale(.98); transition: .25s; }
.modal.visible .modal-card { transform: none; }
.eyebrow { color: #7c85a2; font-size: 9px; font-weight: 900; letter-spacing: 2.5px; margin: 0; }
.modal-card h1, .modal-card h2 { margin: 10px 0 12px; font-size: clamp(29px, 5vw, 42px); letter-spacing: -1.4px; line-height: 1; }
.modal-card h1 span { color: var(--blue); }
.intro, .win-card > p:not(.eyebrow) { max-width: 390px; margin: 0 auto 26px; color: #949cb5; font-size: 12px; line-height: 1.55; }
.close-btn { position: absolute; z-index: 5; right: 16px; top: 14px; border: 0; background: transparent; color: #7c849f; font-size: 24px; cursor: pointer; }
.close-btn.hidden { display: none; }

.settings-grid { display: grid; gap: 18px; text-align: left; margin: 25px 0 22px; }
.setting { display: block; padding: 15px 17px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.setting > span { display: flex; justify-content: space-between; color: #8b93ac; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.setting output { color: white; font-size: 12px; }
input[type="range"] { width: 100%; height: 4px; margin: 18px 0 8px; appearance: none; border-radius: 4px; outline: none; background: linear-gradient(90deg, var(--blue) var(--range, 33%), rgba(255,255,255,.09) var(--range, 33%)); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border: 3px solid #18223d; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px rgba(57,223,244,.52); cursor: pointer; }
.setting:nth-child(2) input { background: linear-gradient(90deg, #8a6cff var(--range, 22%), rgba(255,255,255,.09) var(--range, 22%)); }
.setting:nth-child(2) input::-webkit-slider-thumb { background: #9c77ff; box-shadow: 0 0 12px rgba(156,119,255,.5); }
.range-labels { display: flex; justify-content: space-between; color: #5f6781; font-size: 8px; }
.toggle-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; cursor: pointer; }
.toggle-setting .toggle-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.toggle-setting .toggle-copy b { color: #8b93ac; font-size: 9px; letter-spacing: 1.4px; }
.toggle-setting .toggle-copy small { color: #5f6781; font-size: 9px; font-weight: 500; letter-spacing: 0; }
.toggle-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 42px; height: 23px; border-radius: 20px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: .22s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #7a829a; box-shadow: 0 2px 5px rgba(0,0,0,.4); transition: .22s; }
.toggle-setting input:checked + .switch { background: rgba(57,223,244,.28); box-shadow: inset 0 0 0 1px rgba(57,223,244,.35), 0 0 13px rgba(57,223,244,.12); }
.toggle-setting input:checked + .switch::after { left: 22px; background: var(--blue); box-shadow: 0 0 9px rgba(57,223,244,.5); }
.toggle-setting input:focus-visible + .switch { outline: 2px solid white; outline-offset: 3px; }
.animation-speed-setting { margin-top: 12px; text-align: left; }
.polarity-setting { margin: 0; min-width: 0; }
.polarity-setting legend { padding: 0; color: #8b93ac; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.polarity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.online-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.online-fields[hidden] { display: none; }
.online-fields label { display: grid; gap: 5px; color: #707a96; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.online-fields input { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px; color: white; background: rgba(0,0,0,.22); outline: none; text-transform: uppercase; }
.online-fields input:focus { border-color: rgba(57,223,244,.5); box-shadow: 0 0 12px rgba(57,223,244,.1); }
.online-fields #playerName { text-transform: none; }
.offline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.offline-fields[hidden] { display: none; }
.offline-fields > label { display: grid; gap: 5px; color: #707a96; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.offline-fields input { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px; color: white; background: rgba(0,0,0,.22); outline: none; }
.offline-fields fieldset { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; }
.offline-fields fieldset legend { margin-bottom: 6px; }
.offline-fields fieldset label { cursor: pointer; font-size: 8px; }
.offline-fields fieldset input { margin-right: 3px; }
.connection-status { min-height: 15px; margin: 8px 0 0; color: #8d98b5; font-size: 9px; }
.connection-status.error { color: #ff7187; }
.connection-status.success { color: #54df9c; }
.account-card { max-width: 430px; }
.entry-brand { width: min(310px, 82vw); height: 102px; margin: -30px auto -12px; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 18px 0 12px; }
.account-tabs button, .oauth-actions button { border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: #77819d; background: rgba(255,255,255,.03); cursor: pointer; font-size: 9px; font-weight: 900; }
.account-tabs button.active { color: var(--blue); border-color: rgba(57,223,244,.4); background: rgba(57,223,244,.08); }
.account-form { display: grid; gap: 10px; }
.account-form.hidden, .oauth-actions.hidden, .account-tabs.hidden { display: none; }
.account-form label { display: grid; gap: 5px; text-align: left; color: #7c86a2; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.account-form input { border: 1px solid var(--line); border-radius: 8px; padding: 11px; color: white; background: rgba(0,0,0,.2); outline: none; }
.account-form input:focus { border-color: rgba(57,223,244,.5); }
.account-form .primary-btn { min-width: 0; width: 100%; margin-top: 4px; }
.oauth-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.main-menu.hidden { display: none; }
.main-menu { display: grid; gap: 14px; margin-top: 16px; text-align: left; }
.main-menu-user { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.main-menu-user img { width: 48px; height: 48px; border-radius: 50%; }
.main-menu-user div { display: grid; gap: 3px; }
.main-menu-user small, .room-list-section > span, #joinRoomForm > label { color: #69738e; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.main-menu-user strong { color: white; font-size: 16px; }
.main-menu-actions { display: grid; gap: 9px; }
.main-menu-actions .primary-btn { width: 100%; min-width: 0; }
#joinRoomForm { display: grid; gap: 6px; }
#joinRoomForm > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
#joinRoomForm input, #joinRoomForm button { border: 1px solid var(--line); border-radius: 8px; padding: 11px; color: white; background: rgba(0,0,0,.2); }
#joinRoomForm input { text-transform: uppercase; }
#joinRoomForm button { color: var(--blue); cursor: pointer; font-size: 8px; font-weight: 900; }
.room-list-section { display: grid; gap: 7px; }
#roomList { display: grid; gap: 6px; }
#roomList p { margin: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; color: #69738e; font-size: 9px; text-align: center; }
.room-list-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: #a8b2cb; background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.room-list-item strong { color: var(--blue); letter-spacing: 1px; }
.room-list-item span { font-size: 9px; }
.room-list-item small { color: #54df9c; font-size: 7px; }
.main-menu .profile-play-actions { grid-template-columns: repeat(2, 1fr); }
.main-menu > .text-btn { display: inline; margin: 0 10px; }
.player-color-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.player-color-dot.blue { background: var(--blue); box-shadow: 0 0 7px var(--blue); }
.player-color-dot.red { background: var(--red); box-shadow: 0 0 7px var(--red); }
.avatar-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.avatar-picker button { height: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(255,255,255,.03); cursor: pointer; font-size: 18px; }
.avatar-picker img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.avatar-picker button.selected { border-color: var(--blue); box-shadow: inset 0 0 12px rgba(57,223,244,.16); }
.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 2px 0; padding: 0; border: 0; }
.theme-picker legend { grid-column: 1 / -1; margin-bottom: 6px; color: #7c86a2; font-size: 8px; font-weight: 900; letter-spacing: 1px; text-align: left; }
.theme-picker label { cursor: pointer; }
.theme-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-picker span { display: grid; gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; color: #838ca5; background: rgba(255,255,255,.025); text-align: center; }
.theme-picker b { font-size: 7px; letter-spacing: .7px; }
.theme-picker input:checked + span { border-color: var(--blue); color: white; box-shadow: inset 0 0 14px color-mix(in srgb, var(--blue) 16%, transparent); }
.theme-preview { display: block; height: 38px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -10px 16px rgba(0,0,0,.28); }
.theme-preview.default { background: radial-gradient(circle at 32% 30%, #39dff4 0 9%, transparent 10%), linear-gradient(135deg, #283251 50%, #11172b 50%); }
.theme-preview.japanese { background: url("assets/themes/japanese/background-v2.webp") center / cover no-repeat; }
.theme-preview.fantasy { background: url("assets/themes/fantasy/background-castle-v3.webp") center / cover no-repeat; }

/* Motyw japoński — papier washi, drewno i lakierowane pionki. */
body[data-theme="japanese"] { --bg: #1b120e; --panel: rgba(47,29,21,.9); --line: rgba(224,190,132,.2); --text: #fff4dd; --muted: #bda98c; --blue: #3aa7a0; --blue-dark: #225e62; --red: #d84a3b; --red-dark: #7d211d; --gold: #d9aa55; background: radial-gradient(circle at 50% 24%, rgba(157,74,44,.24), transparent 38%), repeating-linear-gradient(7deg, rgba(255,238,198,.018) 0 1px, transparent 1px 5px), #160e0b; }
body[data-theme="japanese"] .noise { opacity: .45; background-image: repeating-linear-gradient(94deg, rgba(240,214,167,.025) 0 1px, transparent 1px 8px), repeating-linear-gradient(4deg, rgba(240,214,167,.018) 0 1px, transparent 1px 11px); }
body[data-theme="japanese"] .orb-blue { background: #d6a34b; opacity: .13; }
body[data-theme="japanese"] .orb-red { background: #b62f27; opacity: .14; }
body[data-theme="japanese"] .topbar, body[data-theme="japanese"] .modal-card, body[data-theme="japanese"] .player-panel, body[data-theme="japanese"] .turn-banner { background: linear-gradient(145deg, rgba(69,39,27,.97), rgba(27,17,13,.97)); border-color: rgba(222,181,112,.24); }
body[data-theme="japanese"] .modal { background: rgba(24,13,10,.86); }
body[data-theme="japanese"] .modal-card::before { content: ""; position: absolute; inset: 9px; z-index: -1; border: 1px solid rgba(213,169,95,.12); border-radius: 16px; pointer-events: none; }
body[data-theme="japanese"] .main-menu-user, body[data-theme="japanese"] .room-list-item, body[data-theme="japanese"] .setting, body[data-theme="japanese"] .offline-entry button { background: linear-gradient(135deg, rgba(128,72,43,.15), rgba(247,215,156,.035)); }
body[data-theme="japanese"] .board-shell { padding: clamp(12px, 2.4vw, 21px); border: 5px solid #5a3020; border-radius: 4px; background: linear-gradient(135deg, #8a5734, #3c2118); box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 0 0 2px #b47b48, inset 0 0 20px rgba(20,8,4,.7); }
body[data-theme="japanese"] .board { border-color: rgba(78,38,24,.72); background: #b18452; box-shadow: inset 0 0 24px rgba(69,35,20,.35); }
body[data-theme="japanese"] .cell.light { background: linear-gradient(135deg, rgba(222,190,128,.95), rgba(187,142,82,.96)); }
body[data-theme="japanese"] .cell.dark { background: linear-gradient(135deg, rgba(151,99,58,.96), rgba(112,65,40,.98)); }
body[data-theme="japanese"] .cell::after { border-color: rgba(72,37,22,.24); }
body[data-theme="japanese"] .piece.blue { background: radial-gradient(circle at 34% 24%, #ddfff2 0, #65bfb0 20%, #287a73 55%, #123e40 85%); border: 2px solid #b7d9bc; box-shadow: 0 8px 8px rgba(31,14,8,.5), 0 0 0 2px #244b3e, inset -7px -9px 12px rgba(2,35,37,.55); }
body[data-theme="japanese"] .piece.red { background: radial-gradient(circle at 34% 24%, #ffe0c7 0, #e45b46 20%, #a92f29 56%, #641a19 85%); border: 2px solid #efba87; box-shadow: 0 8px 8px rgba(31,14,8,.5), 0 0 0 2px #69241d, inset -7px -9px 12px rgba(72,4,7,.58); }

/* Motyw fantasy — wnętrze baśniowego zamku, kamienna arena i figurki rycerzy. */
body[data-theme="fantasy"] { --bg: #090719; --panel: rgba(22,16,49,.9); --line: rgba(154,120,255,.22); --text: #f8f3ff; --muted: #a99bc7; --blue: #5ce8d0; --blue-dark: #177d78; --red: #d563ff; --red-dark: #7b2ead; --gold: #f4d178; background: radial-gradient(circle at 50% 24%, rgba(99,61,190,.3), transparent 40%), radial-gradient(circle at 12% 72%, rgba(28,137,123,.15), transparent 28%), #080616; }
body[data-theme="fantasy"] .noise { opacity: .5; background-image: radial-gradient(circle, rgba(190,160,255,.1) 0 1px, transparent 1.5px), linear-gradient(30deg, rgba(120,85,210,.025) 25%, transparent 25% 75%, rgba(120,85,210,.025) 75%); background-size: 31px 31px, 42px 42px; }
body[data-theme="fantasy"] .orb-blue { background: #22d8bc; opacity: .16; }
body[data-theme="fantasy"] .orb-red { background: #a33cff; opacity: .2; }
body[data-theme="fantasy"] .topbar, body[data-theme="fantasy"] .modal-card, body[data-theme="fantasy"] .player-panel, body[data-theme="fantasy"] .turn-banner { background: linear-gradient(145deg, rgba(37,25,78,.97), rgba(12,10,31,.98)); border-color: rgba(159,125,255,.27); box-shadow: 0 20px 55px rgba(5,2,17,.55), inset 0 0 18px rgba(101,64,181,.08); }
body[data-theme="fantasy"] .modal { background: rgba(7,5,20,.86); }
body[data-theme="fantasy"] .main-menu-user, body[data-theme="fantasy"] .room-list-item, body[data-theme="fantasy"] .setting, body[data-theme="fantasy"] .offline-entry button { background: linear-gradient(135deg, rgba(99,64,177,.15), rgba(29,161,139,.055)); }
body[data-theme="fantasy"] .board-shell { padding: clamp(12px, 2.4vw, 21px); border: 5px ridge #574188; border-radius: 10px; background: linear-gradient(135deg, #382b61, #15122d); box-shadow: 0 25px 65px rgba(0,0,0,.56), 0 0 34px rgba(112,74,225,.22), inset 0 0 0 2px #7760aa, inset 0 0 25px #080613; }
body[data-theme="fantasy"] .board { border-color: rgba(150,117,236,.55); background: #16132d; box-shadow: inset 0 0 30px rgba(71,43,142,.45); }
body[data-theme="fantasy"] .cell.light { background: radial-gradient(circle at center, rgba(78,66,124,.95), rgba(47,38,86,.97)); }
body[data-theme="fantasy"] .cell.dark { background: radial-gradient(circle at center, rgba(38,67,72,.94), rgba(19,38,48,.98)); }
body[data-theme="fantasy"] .cell::after { border-color: rgba(167,139,242,.14); box-shadow: inset 0 0 8px rgba(109,79,195,.08); }
body[data-theme="fantasy"] .piece { clip-path: polygon(50% 0, 86% 18%, 100% 57%, 75% 100%, 25% 100%, 0 57%, 14% 18%); border-radius: 34%; }
body[data-theme="fantasy"] .piece.blue { background: radial-gradient(circle at 35% 25%, #eaffff 0, #77f8dc 17%, #24b7a9 49%, #15566a 82%); border: 1px solid #baffef; box-shadow: 0 10px 15px rgba(0,0,0,.45), 0 0 18px rgba(71,239,210,.5), inset -7px -10px 14px rgba(4,50,65,.56); }
body[data-theme="fantasy"] .piece.red { background: radial-gradient(circle at 35% 25%, #ffeaff 0, #e68cff 17%, #ad48dd 49%, #542078 82%); border: 1px solid #f4c9ff; box-shadow: 0 10px 15px rgba(0,0,0,.45), 0 0 18px rgba(205,83,255,.5), inset -7px -10px 14px rgba(55,11,83,.6); }

/* Wygenerowane zasoby bitmapowe motywów. */
body[data-theme="japanese"] { background-image: linear-gradient(rgba(17,9,6,.14), rgba(17,9,6,.48)), url("assets/themes/japanese/background-v2.webp"); background-position: center; background-size: cover; background-attachment: fixed; }
body[data-theme="japanese"] .modal-card { background-image: linear-gradient(145deg, rgba(31,18,14,.76), rgba(12,8,7,.9)), url("assets/themes/japanese/menu-panel-v3.webp"); background-position: center; background-size: cover; }
body[data-theme="japanese"] .board-shell { transform: perspective(1100px) rotateX(2.4deg) translateY(-2px); transform-origin: center bottom; border-bottom: 12px solid #2c160e; box-shadow: 0 30px 32px rgba(0,0,0,.58), 0 12px 0 #170b07, inset 0 0 0 2px #c58a4f, inset 0 0 24px rgba(20,8,4,.72); }
body[data-theme="japanese"] .board { background-color: #9b6035; background-image: linear-gradient(rgba(87,42,20,.04), rgba(38,17,8,.15)), url("assets/themes/japanese/board-v2.webp"); background-size: cover; box-shadow: inset 0 0 25px rgba(47,20,8,.36), 0 1px 0 rgba(255,218,155,.36); }
body[data-theme="japanese"] .cell.light { background: linear-gradient(145deg, rgba(255,224,166,.13), rgba(109,55,25,.035)); box-shadow: inset 1px 1px 0 rgba(255,226,174,.23), inset -2px -2px 3px rgba(60,26,10,.2); }
body[data-theme="japanese"] .cell.dark { background: linear-gradient(145deg, rgba(115,57,26,.08), rgba(47,20,8,.2)); box-shadow: inset 1px 1px 0 rgba(255,217,148,.12), inset -2px -2px 4px rgba(40,15,7,.28); }
body[data-theme="japanese"] .piece { width: 96%; border: 0; border-radius: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; box-shadow: none; transform-origin: 50% 82%; filter: drop-shadow(0 9px 4px rgba(27,11,5,.68)) drop-shadow(0 0 5px currentColor); }
body[data-theme="japanese"] .piece.blue { color: #45d4ca; border: 0; background-color: transparent; box-shadow: none; }
body[data-theme="japanese"] .piece.red { color: #ff5f50; border: 0; background-color: transparent; box-shadow: none; }
body[data-theme="japanese"] .piece.positive { background-image: url("assets/themes/japanese/piece-positive-v3.png"); }
body[data-theme="japanese"] .piece.negative { background-image: url("assets/themes/japanese/piece-negative-v3.png"); }
body[data-theme="japanese"] .piece::after { display: none; }
body[data-theme="japanese"] .charge-symbol { opacity: 0; }
body[data-theme="japanese"] .player-blue .player-icon { background: #174f52 url("assets/themes/japanese/piece-blue-v2.png") center / 118% no-repeat; }
body[data-theme="japanese"] .player-red .player-icon { background: #76251f url("assets/themes/japanese/piece-red-v2.png") center / 118% no-repeat; }

body[data-theme="fantasy"] { background-image: linear-gradient(rgba(5,4,18,.16), rgba(5,4,18,.5)), url("assets/themes/fantasy/background-castle-v3.webp"); background-position: center; background-size: cover; background-attachment: fixed; }
body[data-theme="fantasy"] .modal-card { background-image: linear-gradient(145deg, rgba(20,18,46,.7), rgba(7,8,22,.88)), url("assets/themes/fantasy/menu-panel-v3.webp"); background-position: center; background-size: cover; }
body[data-theme="fantasy"] .board-shell { transform: perspective(1100px) rotateX(2.4deg) translateY(-2px); transform-origin: center bottom; border-bottom: 12px solid #1b1239; box-shadow: 0 30px 34px rgba(0,0,0,.62), 0 12px 0 #0c081c, 0 0 38px rgba(102,62,224,.27), inset 0 0 0 2px #8068bb, inset 0 0 27px #090716; }
body[data-theme="fantasy"] .board { background-color: #17152e; background-image: linear-gradient(rgba(23,15,49,.04), rgba(5,7,20,.18)), url("assets/themes/fantasy/board-v2.webp"); background-size: cover; box-shadow: inset 0 0 28px rgba(5,4,18,.46), 0 1px 0 rgba(182,151,255,.3); }
body[data-theme="fantasy"] .cell.light { background: linear-gradient(145deg, rgba(145,115,225,.12), rgba(43,27,83,.04)); box-shadow: inset 1px 1px 0 rgba(201,178,255,.2), inset -2px -2px 4px rgba(16,9,39,.28); }
body[data-theme="fantasy"] .cell.dark { background: linear-gradient(145deg, rgba(13,66,73,.08), rgba(8,18,39,.21)); box-shadow: inset 1px 1px 0 rgba(91,237,224,.1), inset -2px -2px 4px rgba(5,5,24,.34); }
body[data-theme="fantasy"] .piece { width: 94%; border: 0; border-radius: 0; clip-path: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; box-shadow: none; transform-origin: 50% 82%; filter: drop-shadow(0 10px 5px rgba(0,0,0,.64)) drop-shadow(0 0 7px currentColor); }
body[data-theme="fantasy"] .piece.blue { color: #51f2df; border: 0; background-color: transparent; box-shadow: none; }
body[data-theme="fantasy"] .piece.red { color: #e66cff; border: 0; background-color: transparent; box-shadow: none; }
body[data-theme="fantasy"] .piece.positive { background-image: url("assets/themes/fantasy/piece-positive-v3.png"); }
body[data-theme="fantasy"] .piece.negative { background-image: url("assets/themes/fantasy/piece-negative-v3.png"); }
body[data-theme="fantasy"] .piece::after { display: none; }
body[data-theme="fantasy"] .charge-symbol { opacity: 0; }
body[data-theme="fantasy"] .player-blue .player-icon { background: #124c58 url("assets/themes/fantasy/piece-blue-v2.png") center / 118% no-repeat; }
body[data-theme="fantasy"] .player-red .player-icon { background: #52216f url("assets/themes/fantasy/piece-red-v2.png") center / 118% no-repeat; }
.offline-entry { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.offline-entry.hidden { display: none; }
.offline-entry > span { color: #69738e; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.offline-entry > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.offline-entry button { border: 1px solid var(--line); border-radius: 9px; padding: 11px 7px; color: #a8b2cb; background: rgba(255,255,255,.035); cursor: pointer; font-size: 8px; font-weight: 900; }
.entry-setup { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.entry-setup.hidden { display: none; }
.entry-setup > span { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: 1.2px; }
.entry-setup .primary-btn { width: 100%; min-width: 0; }
.profile-play-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.profile-play-actions button { border: 1px solid var(--line); border-radius: 8px; padding: 9px 4px; color: #a8b2cb; background: rgba(255,255,255,.035); cursor: pointer; font-size: 7px; font-weight: 900; }
.polarity-options label { cursor: pointer; }
.polarity-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.polarity-options span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.025); transition: .2s; }
.polarity-options b { color: #727b97; font-size: 15px; letter-spacing: 3px; }
.polarity-options small { color: #5f6781; font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.polarity-options input:checked + span { border-color: rgba(57,223,244,.38); background: rgba(57,223,244,.09); box-shadow: inset 0 0 16px rgba(57,223,244,.05); }
.polarity-options input:checked + span b { color: var(--blue); text-shadow: 0 0 8px rgba(57,223,244,.35); }
.polarity-options input:checked + span small { color: #b4bed4; }
.polarity-options input:focus-visible + span { outline: 2px solid white; outline-offset: 2px; }
.mode-options label:nth-child(2) input:checked + span { border-color: rgba(187,118,255,.5); background: rgba(137,72,255,.12); box-shadow: inset 0 0 18px rgba(137,72,255,.1); }
.mode-options label:nth-child(2) input:checked + span b { color: #c390ff; text-shadow: 0 0 9px rgba(195,144,255,.68); }
.primary-btn, .secondary-btn { border: 0; border-radius: 11px; cursor: pointer; font-size: 10px; font-weight: 950; letter-spacing: 1.2px; transition: .2s; }
.primary-btn { min-width: 240px; padding: 15px 20px; color: #071017; background: linear-gradient(100deg, #53eaf3, #718cff); box-shadow: 0 12px 30px rgba(57,223,244,.16); }
.primary-btn span { margin-left: 10px; font-size: 14px; }
.secondary-btn { padding: 13px 30px; background: rgba(255,255,255,.08); }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.offline { display: block; color: #59627d; font-size: 7px; letter-spacing: 1.1px; margin-top: 15px; }
.offline::first-letter { color: #54df9c; }

.rules-card { max-width: 480px; text-align: left; }
.rules-card h2 { text-align: center; }
.rules-card > .eyebrow { text-align: center; }
.rules-card ol { list-style: none; padding: 5px 0; margin: 18px 0; counter-reset: rules; display: grid; gap: 12px; }
.rules-card li { counter-increment: rules; position: relative; padding: 13px 13px 13px 48px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.rules-card li::before { content: counter(rules); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(57,223,244,.12); color: var(--blue); font-size: 10px; font-weight: 900; }
.rules-card li b, .rules-card li span { display: block; }
.rules-card li b { font-size: 11px; margin-bottom: 3px; }
.rules-card li span { color: #818aa5; font-size: 10px; line-height: 1.45; }
.rules-card .secondary-btn { display: block; margin: auto; }
.win-card { max-width: 450px; }
.room-card > p:not(.eyebrow) { color: #949cb5; font-size: 11px; }
.room-code { display: block; margin: 20px 0; color: var(--blue); font-size: clamp(34px, 10vw, 54px); letter-spacing: 8px; text-shadow: 0 0 20px rgba(57,223,244,.35); }
.trophy { display: grid; place-items: center; width: 67px; height: 67px; margin: 0 auto 18px; border-radius: 50%; color: #ffe3a4; background: radial-gradient(circle at 35% 30%, #fff1bc, #e7a947 55%, #8c5920); box-shadow: 0 0 30px rgba(255,205,105,.24); font-size: 23px; }
.text-btn { display: block; margin: 15px auto 0; border: 0; background: transparent; color: #76809c; font-size: 9px; cursor: pointer; text-decoration: underline; }

@keyframes pulse { 50% { transform: scale(1.35); opacity: .45; } }
@keyframes selectRing { to { transform: scale(1.08); opacity: .55; } }
@keyframes pieceSlide { from { transform: translate(var(--slide-x), var(--slide-y)); } to { transform: translate(0, 0); } }
@keyframes flyOut { to { transform: scale(.2); opacity: 0; filter: blur(4px); } }
@keyframes impact { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-8deg); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(-4deg); } }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes dangerPulse { to { background: rgba(133,25,43,.88); filter: brightness(1.18); } }
@keyframes neonDash { to { stroke-dashoffset: -.54; } }
@keyframes neonPulse { to { opacity: .58; stroke-width: .105; } }
@keyframes landingGlow { to { opacity: .95; filter: brightness(1.35); } }
@keyframes electronCore { to { filter: brightness(1.28); } }
@keyframes corePulse { to { opacity: .62; transform: scale(1.28); } }
@keyframes electronOrbit { to { transform: translate(-50%,-50%) rotate(calc(var(--tilt) + 360deg)); } }
@keyframes currentFlow { to { stroke-dashoffset: -.42; } }
@keyframes beamPulse { to { opacity: 1; stroke-width: .105; } }
@keyframes emWave { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes reactorIdle { to { filter: brightness(1.35); box-shadow: 0 0 14px rgba(158,93,255,.42), inset 0 0 11px rgba(158,93,255,.27); } }
@keyframes reactorSpin { to { transform: rotate(360deg); } }
@keyframes reactorBurst { 0% { transform: scale(.72) rotate(0); opacity: .5; } 50% { transform: scale(1.18) rotate(90deg); opacity: 1; box-shadow: 0 0 25px #a45bff; } 100% { transform: scale(1) rotate(180deg); opacity: .72; } }
@keyframes polarityFlip { 0% { transform: scale(1) rotateY(0); } 45% { transform: scale(.55) rotateY(90deg); filter: brightness(2.2); } 100% { transform: scale(1) rotateY(180deg); } }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: minmax(360px, 680px); gap: 10px; }
  .player-panel { position: fixed; z-index: 9; top: 74px; width: 155px; padding: 9px; grid-template-columns: 30px 1fr; }
  .player-blue { left: 12px; }
  .player-red { right: 12px; }
  .player-icon { width: 30px; height: 30px; }
  .pieces-left { display: none; }
}

@media (max-width: 620px) {
  .app { width: calc(100% - 16px); padding-top: 12px; }
  .logo { width: 150px; height: 48px; }
  .entry-brand { height: 82px; margin-top: -22px; }
  .menu-btn { font-size: 0; width: 39px; padding: 0; }
  .menu-btn span { margin: 0; font-size: 14px; }
  .nav-icon-btn { width: 39px; height: 39px; padding: 5px; }
  .nav-icon-btn img { width: 26px; height: 26px; }
  .game-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; align-items: stretch; }
  .arena-column { grid-column: 1 / -1; grid-row: 1; }
  .player-panel { position: relative; inset: auto; z-index: auto; display: grid; width: auto; grid-row: 2; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; padding: 9px; border-radius: 12px; }
  .player-blue { grid-column: 1; }
  .player-red { grid-column: 2; }
  .player-icon { width: 24px; height: 24px; font-size: 8px; }
  .player-copy { min-width: 0; }
  .player-copy span { font-size: 6px; letter-spacing: .8px; }
  .player-copy strong { overflow: hidden; font-size: 9px; letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; }
  .pieces-left { display: flex; grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; border-top: 0; padding-top: 0; margin-top: 0; }
  .pieces-left strong { font-size: 18px; line-height: 1; }
  .pieces-left span { font-size: 5px; letter-spacing: .5px; }
  .player-panel.active::after { top: auto; right: 8px; bottom: -7px; padding: 3px 5px; font-size: 5px; }
  .turn-banner { min-height: 44px; }
  .turn-banner small { display: none; }
  .arena-alert span { max-width: 55%; text-align: right; }
  .board-shell { padding: 7px; }
  body[data-theme="japanese"] .board-shell, body[data-theme="fantasy"] .board-shell { transform: perspective(800px) rotateX(1.4deg) translateY(-1px); border-bottom-width: 8px; }
  .game-hint { padding: 10px 3px 0; }
  .modal-card { padding: 31px 20px; }
  .settings-grid { gap: 10px; margin: 20px 0; }
  .online-fields { grid-template-columns: 1fr; }
  .primary-btn { width: 100%; min-width: 0; }
}