:root{
  --bg:#06101f;
  --panel:#0b1d38;
  --line:#1f6eea;
  --cyan:#47d4ff;
  --yellow:#ffd429;
  --green:#6bff3e;
  --text:#f7fbff;
  --muted:#a9bedb;
  --shadow:0 18px 42px rgba(0,0,0,.32);
  --topbar-h:60px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#06101f}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 50% 0,#11346d 0,#071529 34%,#030912 100%);
  overflow-x:hidden;
}
button,a{font:inherit}
button{color:inherit}
a{color:inherit}
.hidden{display:none!important}

.app-shell{
  width:min(1440px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:10px 14px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.topbar{
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:sticky;
  top:0;
  z-index:60;
  padding:8px 10px;
  border:1px solid rgba(63,196,255,.18);
  border-radius:18px;
  background:rgba(4,14,29,.88);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.brand{font-weight:1000;letter-spacing:.08em;text-decoration:none;color:#8cff34;text-shadow:0 0 18px rgba(114,255,46,.35)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn,.games-link{min-height:40px;border:1px solid #275891;background:#09192e;border-radius:12px;padding:8px 12px;text-decoration:none;cursor:pointer;transition:.18s ease}.icon-btn:hover,.games-link:hover{border-color:var(--cyan);transform:translateY(-1px)}
main{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}
.setup-screen,.game-screen{flex:1;min-height:0}

.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid #2269c4;
  box-shadow:var(--shadow);
  background:#09162a;
}
.hero-home{
  min-height:620px;
  height:min(calc(100vh - 118px), 700px);
}
.hero-img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(1.05) contrast(1.04)}
.hero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,6,18,.80) 0%,rgba(0,6,18,.35) 52%,rgba(0,6,18,.18) 100%)}
.hero-card::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:linear-gradient(180deg,transparent,rgba(3,11,22,.44))}
.hero-overlay{position:absolute;inset:0;z-index:2;padding:28px 32px;display:flex;flex-direction:column;justify-content:space-between}
.home-overlay{gap:18px}
.hero-copy{max-width:560px;text-shadow:0 5px 20px #000}
.eyebrow{margin:0 0 6px;font-weight:900;letter-spacing:.12em;color:#63d6ff;font-size:.84rem}
.hero-overlay h1,.game-title-line h2{margin:.04em 0;font-weight:1000;line-height:.84;letter-spacing:-.06em;font-style:italic;text-transform:uppercase;color:#ffca1f;text-shadow:0 4px 0 #e65a00,0 8px 0 #7a1a08,0 0 22px rgba(255,210,25,.25)}
.hero-overlay h1{font-size:clamp(4rem,7vw,6.4rem)}
.game-title-line h2{font-size:clamp(2.2rem,4.2vw,4.2rem)}
.hero-overlay h1 span,.game-title-line h2 span{color:#ff3157;text-shadow:0 4px 0 #9b1133}
.tagline{margin:10px 0 0;font-weight:900;font-size:clamp(1rem,1.55vw,1.3rem);max-width:520px}

.hero-controls-panel{
  width:min(100%, 1120px);
  background:linear-gradient(180deg,rgba(9,28,55,.88),rgba(4,18,38,.92));
  border:1px solid rgba(72,216,255,.34);
  border-radius:22px;
  padding:18px;
  backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.hero-control-block + .hero-control-block{margin-top:14px}
.hero-control-block h2{margin:0 0 10px;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:#c7e9ff}
.token-picker,.difficulty-grid{display:grid;gap:10px}
.token-picker{grid-template-columns:repeat(4,1fr)}
.difficulty-grid{grid-template-columns:repeat(4,1fr)}
.seg-btn,.difficulty,.token-option{border:1px solid #29537f;background:#07162a;border-radius:15px;cursor:pointer;transition:.18s ease}
.token-option{padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:114px;text-align:center}
.token-option img{width:min(70px,100%);aspect-ratio:1;object-fit:contain;object-position:center;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.token-option strong{font-size:.88rem;line-height:1.12}
.token-option small{font-size:.72rem;line-height:1.15;color:var(--muted);margin-top:4px}
.token-option.selected{border-color:#70e7ff;box-shadow:0 0 0 2px rgba(80,220,255,.2),0 0 26px rgba(46,186,255,.2);background:#103566;transform:translateY(-1px)}
.difficulty{padding:14px 12px;text-align:left;min-height:84px;display:flex;flex-direction:column;justify-content:flex-start}
.difficulty b{display:block;margin-bottom:5px;font-size:1rem}
.difficulty span{font-size:.79rem;line-height:1.18;color:var(--muted)}
.difficulty.active{border-color:#48d8ff;background:#123d75;box-shadow:0 0 20px rgba(48,190,255,.18)}
.difficulty.danger.active{border-color:#ff4a77;box-shadow:0 0 24px rgba(255,44,113,.25)}
.hero-actions{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero-note{font-weight:800;color:#cfe7ff}.hero-note strong{color:#ffd429}
.primary-btn{border:0;border-radius:18px;background:linear-gradient(180deg,#6bff3e,#25b921);color:#07150a;padding:16px 24px;font-size:1.12rem;font-weight:1000;cursor:pointer;box-shadow:0 8px 0 #11700f,0 16px 24px rgba(0,0,0,.22);text-transform:uppercase;letter-spacing:.04em}.primary-btn:active{transform:translateY(3px);box-shadow:0 5px 0 #11700f}
.start-hero-btn{min-width:280px}

.game-layout{display:grid;grid-template-columns:minmax(210px,250px) minmax(520px,1fr) minmax(210px,250px);gap:12px;align-items:start;min-height:0}
.side-panel,.board-column{background:linear-gradient(180deg,rgba(10,30,60,.97),rgba(5,18,37,.98));border:1px solid #205fa6;border-radius:20px;box-shadow:var(--shadow)}
.side-panel{padding:12px}
.board-column{padding:10px;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center}
.score-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}.score-box{border:1px solid #244e7b;border-radius:14px;padding:7px 6px;display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto;align-items:center;background:#08182f;opacity:.78;transition:.2s}.score-box img{width:50px;height:50px;grid-row:1/3;object-fit:contain;object-position:center;padding:3px;display:block}.score-box span{font-size:.7rem;font-weight:900;line-height:1.1}.score-box b{font-size:1.45rem;line-height:1}.score-box.active-side{opacity:1;border-color:#58d4ff;box-shadow:0 0 22px rgba(60,193,255,.2)}.versus{font-weight:1000;color:#ffcc26}
.turn-box{margin-top:10px;border-radius:14px;border:1px solid #294c72;padding:11px;text-align:center;background:#07142a}.turn-box span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase}.turn-box strong{font-size:1.08rem;color:#66d6ff}
.stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.stats-mini div{background:#07152a;border:1px solid #18375d;border-radius:11px;padding:7px 5px;text-align:center}.stats-mini span{display:block;font-size:.64rem;color:var(--muted)}.stats-mini b{font-size:.98rem}
.secondary-btn,.ghost-btn{width:100%;margin-top:8px;border-radius:12px;padding:10px;border:1px solid #275487;cursor:pointer;font-weight:900}.secondary-btn{background:#cc2d31}.ghost-btn{background:#09192e}.secondary-btn:hover,.ghost-btn:hover{border-color:#66d6ff}
.game-title-line{text-align:center;width:100%}.game-title-line p{margin:2px 0 7px;color:#cfe7ff;font-weight:700;font-size:.95rem;line-height:1.2}
.column-selectors{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 8px 4px;width:min(100%, calc((100vh - 214px) * 7 / 6))}.col-btn{border:0;background:transparent;color:#ff527d;font-size:1.45rem;cursor:pointer;line-height:1;padding:2px;border-radius:8px}.col-btn:hover,.col-btn:focus-visible{background:#12396e;color:#fff;outline:none}.col-btn:disabled{opacity:.2;cursor:not-allowed}
.board{--gap:clamp(4px,.7vw,8px);display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:var(--gap);padding:clamp(8px,1.2vw,14px);aspect-ratio:7/6;width:min(100%, calc((100vh - 214px) * 7 / 6));border-radius:18px;background:linear-gradient(145deg,#1776e3,#063276 55%,#0c58c4);border:4px solid #2589f3;box-shadow:inset 0 0 0 4px #05306e,inset 0 -18px 30px rgba(0,0,0,.3),0 18px 35px rgba(0,0,0,.35)}
.cell{position:relative;border:0;border-radius:50%;background:radial-gradient(circle at 45% 42%,#061121,#030916 70%);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.14);padding:0;overflow:hidden}.cell img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;border-radius:50%;padding:3px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4))}.cell.filled img{animation:dropIn .34s cubic-bezier(.2,.9,.2,1.25)}.cell.winner{box-shadow:0 0 0 4px #ffe936,0 0 25px #ffe936,inset 0 0 20px rgba(255,238,0,.5)}.cell.winner img{animation:winPulse .72s ease-in-out infinite alternate}
@keyframes dropIn{0%{transform:translateY(-420%) scale(.92)}100%{transform:translateY(0) scale(1)}}@keyframes winPulse{to{transform:scale(.88) rotate(4deg)}}
.rules-panel h3{margin:0 0 11px;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:#ffce2f}.rules-panel p{line-height:1.45;color:#c1d6ef;font-size:.9rem;margin:0 0 10px}.difficulty-badge{margin:0 0 10px;padding:10px;border-radius:12px;background:#0f3972;border:1px solid #2d7dcb;font-weight:900;text-align:center}.last-moves>span{font-size:.75rem;color:var(--muted);text-transform:uppercase}.move-history{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.move-chip{width:38px;height:38px;border-radius:50%;object-fit:contain;object-position:center;padding:2px;border:2px solid #326ca7;background:#09192e}
footer{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:0 6px 0;color:#9fb5d0;font-size:.82rem}footer a{color:#55cfff;text-decoration:none}footer a:hover{text-decoration:underline}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}.modal-card{width:min(430px,100%);padding:22px;border-radius:22px;background:linear-gradient(180deg,#102d58,#071326);border:1px solid #3a88d9;box-shadow:0 25px 80px #000;text-align:center}.modal-card>img{width:126px;height:126px;object-fit:contain;object-position:center;filter:drop-shadow(0 14px 10px rgba(0,0,0,.32))}.modal-card h2{font-size:2rem;margin:4px 0;color:#ffd42d}.modal-card p{line-height:1.42}.modal-actions{display:grid;gap:10px;margin-top:14px}.modal-actions .primary-btn{grid-column:auto}
.celebration-overlay{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;background:url('../img/fireworks-frame.png') center/cover no-repeat;transition:opacity .22s ease}.celebration-overlay::before,.celebration-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 25%, rgba(255,255,255,.95) 0 2px, transparent 3px),radial-gradient(circle at 80% 18%, rgba(255,255,255,.92) 0 2px, transparent 3px),radial-gradient(circle at 65% 74%, rgba(255,255,255,.9) 0 2px, transparent 3px),radial-gradient(circle at 22% 78%, rgba(255,255,255,.9) 0 2px, transparent 3px);animation:sparkle 700ms linear infinite alternate}.celebration-overlay::after{background:linear-gradient(90deg, transparent 0 10%, rgba(255,80,160,.15) 50%, transparent 90%),linear-gradient(0deg, transparent 0 18%, rgba(90,210,255,.12) 50%, transparent 82%);animation:flash 450ms ease-in-out infinite alternate}body.celebrate .celebration-overlay{opacity:1}@keyframes sparkle{from{transform:scale(1);opacity:.35}to{transform:scale(1.02);opacity:.8}}@keyframes flash{from{opacity:.18}to{opacity:.42}}

@media (max-width:1100px){
  .hero-home{height:auto;min-height:680px}
  .token-picker,.difficulty-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .app-shell{padding:8px}
  .topbar{border-radius:14px}
  .games-link{display:none}
  .hero-home{height:auto;min-height:760px}
  .hero-overlay{padding:18px}
  .hero-card::before{background:linear-gradient(0deg,rgba(0,4,13,.82),rgba(0,4,13,.18) 68%)}
  .hero-copy{max-width:none}
  .hero-overlay h1{font-size:clamp(2.8rem,13vw,4.8rem)}
  .token-picker,.difficulty-grid{grid-template-columns:repeat(2,1fr)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .start-hero-btn{min-width:0;width:100%}
  .game-layout{display:flex;flex-direction:column}
  .board-column{order:1;width:100%}
  .status-panel{order:2;width:100%}
  .rules-panel{order:3;width:100%}
  .column-selectors,.board{width:100%}
  .score-box{grid-template-columns:44px 1fr}.score-box img{width:44px;height:44px}
  footer{gap:8px;flex-direction:column;text-align:center}
}
@media (max-width:480px){
  .token-picker,.difficulty-grid{grid-template-columns:1fr 1fr}
  .token-option{min-height:112px}
  .token-option img{width:60px}
  .difficulty{min-height:90px;padding:12px 10px}
  .hero-home{min-height:820px}
  .game-title-line h2{font-size:2.4rem}
  .game-title-line p{font-size:.84rem}
  .board{border-width:3px;padding:6px;--gap:4px}
  .column-selectors{gap:2px;padding:0 4px 4px}
  .col-btn{font-size:1.2rem}
}
@media (orientation:landscape) and (max-height:760px) and (min-width:861px){
  .hero-home{height:min(calc(100vh - 118px), 690px);min-height:600px}
  .hero-overlay{padding:22px 24px}
  .hero-overlay h1{font-size:clamp(3.7rem,6.4vw,6rem)}
  .tagline{font-size:1rem}
  .hero-controls-panel{padding:16px}
  .token-option{min-height:104px}.token-option img{width:62px}
  .token-option strong{font-size:.82rem}.token-option small{font-size:.69rem}
  .difficulty{min-height:76px;padding:12px 10px}.difficulty b{font-size:.92rem}.difficulty span{font-size:.72rem}
  .hero-actions{margin-top:14px}.start-hero-btn{min-width:230px;padding:14px 20px;font-size:1.02rem}
  .game-layout{grid-template-columns:205px minmax(470px,1fr) 205px;gap:10px}
  .side-panel{padding:10px}
  .score-box{grid-template-columns:42px 1fr;padding:6px}.score-box img{width:42px;height:42px}.score-box b{font-size:1.2rem}
  .turn-box{margin-top:8px;padding:9px}
  .stats-mini{margin:8px 0}.stats-mini div{padding:6px 4px}
  .secondary-btn,.ghost-btn{padding:8px}
  .game-title-line p{font-size:.86rem;margin:1px 0 5px}
  .column-selectors{padding:0 6px 3px;width:min(100%, calc((100vh - 214px) * 7 / 6))}
  .board{width:min(100%, calc((100vh - 214px) * 7 / 6));padding:8px;--gap:5px}
  .rules-panel p{font-size:.82rem;line-height:1.32}.difficulty-badge{padding:8px;font-size:.9rem}.move-chip{width:34px;height:34px}
  footer{padding-top:0;font-size:.78rem}
}