* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: linear-gradient(160deg,#e8f0ff,#f0f4ff); min-height:100vh; display:flex; align-items:center; justify-content:center; }
#confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; display:none; z-index:200; }
.screen { display:none; flex-direction:column; align-items:center; text-align:center; padding:20px 16px; max-width:520px; width:100%; }
.screen.active { display:flex; }
.gap-logo { font-size:36px; font-weight:900; letter-spacing:10px; color:#0055a5; margin-bottom:8px; }
.gap-logo.small { font-size:20px; letter-spacing:7px; margin-bottom:0; }
h1 { font-size:28px; font-weight:900; color:#111; margin-bottom:6px; }
.sub { color:#777; font-size:14px; margin-bottom:24px; }
.name-row { display:flex; align-items:center; gap:14px; width:100%; margin-bottom:24px; }
.player-input { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.player-dot { font-size:40px; line-height:1; }
.p1-dot { color:#ffd700; }
.p2-dot { color:#e74c3c; }
.player-input input { width:100%; padding:10px 12px; border:2px solid #dde4f0; border-radius:12px; font-size:15px; text-align:center; }
.player-input input:focus { outline:none; border-color:#0055a5; }
.vs-badge { font-size:16px; font-weight:900; color:#bbb; }
.btn-primary { background:#0055a5; color:white; border:none; border-radius:14px; padding:13px 28px; font-size:16px; font-weight:700; cursor:pointer; transition:background .15s, transform .1s; }
.btn-primary:hover { background:#0044cc; }
.btn-primary:active { transform:scale(.97); }
.btn-primary.big-btn { padding:16px 40px; font-size:18px; }
.btn-secondary { background:#eee; color:#555; border:none; border-radius:14px; padding:12px 24px; font-size:15px; font-weight:600; cursor:pointer; margin-top:12px; }
.btn-secondary:hover { background:#ddd; }
.ghost-btn { background:none; border:none; color:#bbb; font-size:13px; cursor:pointer; margin-top:14px; }
.game-header { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:12px; }
.round-badge { background:#0055a5; color:white; font-size:12px; font-weight:700; letter-spacing:1px; padding:5px 14px; border-radius:20px; text-transform:uppercase; }
.scoreboard { display:flex; align-items:center; width:100%; background:white; border-radius:14px; padding:12px 20px; margin-bottom:12px; box-shadow:0 2px 10px rgba(0,85,165,.08); gap:8px; }
.score-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.s-dot { font-size:22px; line-height:1; }
.s-name { font-size:12px; color:#888; font-weight:600; }
.s-num { font-size:32px; font-weight:900; line-height:1; }
.p1-num { color:#b8860b; }
.p2-num { color:#e74c3c; }
.score-sep { font-size:20px; color:#ccc; font-weight:700; }
.turn-bar { width:100%; border-radius:12px; padding:9px 16px; font-size:15px; font-weight:700; margin-bottom:8px; border:2px solid transparent; transition:all .3s; }
.turn-bar.p1 { background:#fffbea; border-color:#f0c040; color:#8a6500; }
.turn-bar.p2 { background:#fff0ee; border-color:#e74c3c; color:#c0392b; }
.col-arrows { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:100%; max-width:400px; margin-bottom:2px; }
.col-arrow { font-size:18px; cursor:pointer; transition:transform .15s; padding:4px 0; opacity:0.5; }
.col-arrow:hover { opacity:1; transform:translateY(3px); }
.board-wrap { background:#0055a5; border-radius:14px; padding:10px; width:100%; max-width:400px; }
.board { display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(6,1fr); gap:6px; }
.cell { aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.15); cursor:pointer; transition:background .15s; }
.cell:hover { background:rgba(255,255,255,.28); }
.cell.p1 { background:#ffd700; cursor:default; animation:popIn .25s cubic-bezier(.34,1.56,.64,1); }
.cell.p2 { background:#e74c3c; cursor:default; animation:popIn .25s cubic-bezier(.34,1.56,.64,1); }
.cell.winner { animation:winPulse .5s ease; box-shadow:0 0 0 3px white; }
@keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes winPulse { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.48); z-index:60; align-items:center; justify-content:center; padding:20px; }
.overlay.show { display:flex; }
.overlay-card { background:white; border-radius:24px; padding:32px 40px; text-align:center; max-width:320px; width:100%; animation:slideUp .3s ease; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.big-emoji { font-size:64px; margin-bottom:10px; }
.overlay-card h2 { font-size:20px; color:#111; margin-bottom:6px; }
.overlay-sub { color:#777; font-size:13px; margin-bottom:16px; }
.trophy { font-size:80px; margin-bottom:6px; }
.champion-sub { font-size:18px; color:#888; margin-bottom:14px; }
.final-score { font-size:48px; font-weight:900; color:#0055a5; margin-bottom:28px; }