* { 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:24px 20px; max-width:480px; 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-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; }
.score-bar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.score-pill { font-size:28px; font-weight:900; padding:6px 20px; border-radius:20px; }
.p1-pill { background:#e8f0ff; color:#0055a5; }
.p2-pill { background:#fff0ee; color:#e74c3c; }
.score-vs { font-size:16px; color:#bbb; font-weight:700; }
.choose-prompt { margin-bottom:20px; }
.choose-avatar { font-size:52px; margin-bottom:6px; }
.choose-prompt h2 { font-size:22px; font-weight:900; color:#111; margin-bottom:4px; }
.choices { display:flex; gap:14px; margin-bottom:20px; }
.choice-btn { flex:1; background:white; border:2.5px solid #dde4f0; border-radius:18px; padding:16px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:border-color .15s,transform .1s,background .15s; }
.choice-btn span { font-size:52px; line-height:1; }
.choice-btn small { font-size:13px; font-weight:700; color:#555; }
.choice-btn:hover { border-color:#0055a5; background:#f0f5ff; transform:scale(1.04); }
.choice-btn:active { transform:scale(.97); }
.pass-icon { font-size:80px; margin-bottom:12px; }
.pass-sub { font-size:16px; color:#888; margin-bottom:4px; }
#passScreen h1 { font-size:32px; font-weight:900; color:#0055a5; margin-bottom:8px; }
.reveal-row { display:flex; align-items:center; gap:16px; margin:8px 0 16px; width:100%; }
.reveal-side { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.reveal-emoji { font-size:72px; animation:popIn .3s cubic-bezier(.34,1.56,.64,1); }
.reveal-name { font-size:15px; font-weight:700; color:#555; }
.reveal-vs { font-size:22px; font-weight:900; color:#ccc; }
.reveal-result { font-size:22px; font-weight:900; color:#0055a5; margin-bottom:12px; }
@keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.pip-row { display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.pip { width:13px; height:13px; border-radius:50%; background:#ddd; }
.pip.p1-win { background:#0055a5; }
.pip.p2-win { background:#e74c3c; }
.pip.draw { background:#999; }
.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-sub { color:#777; font-size:13px; margin-bottom:14px; }
.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; }