* { 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:26px; 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; }
.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:16px; 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-name { font-size:12px; color:#888; font-weight:600; }
.s-num { font-size:32px; font-weight:900; line-height:1; }
.p1-num { color:#0055a5; }
.p2-num { color:#e67e22; }
.score-sep { font-size:20px; color:#ccc; font-weight:700; }
.scrambled-word { font-size:52px; font-weight:900; letter-spacing:8px; color:#0055a5; background:white; border-radius:16px; padding:18px 24px; width:100%; margin-bottom:6px; box-shadow:0 2px 12px rgba(0,85,165,.12); animation:popIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
.scramble-hint { font-size:13px; color:#aaa; margin-bottom:16px; }
.turn-indicator { font-size:16px; font-weight:700; padding:9px 18px; border-radius:12px; margin-bottom:14px; width:100%; border:2px solid transparent; transition:all .3s; }
.turn-indicator.p1 { background:#e8f0ff; border-color:#0055a5; color:#0055a5; }
.turn-indicator.p2 { background:#fff4e8; border-color:#e67e22; color:#e67e22; }
.answer-input { width:100%; padding:14px 16px; font-size:24px; font-weight:700; text-align:center; border:2.5px solid #dde4f0; border-radius:14px; letter-spacing:4px; text-transform:uppercase; margin-bottom:12px; transition:border-color .15s; }
.answer-input:focus { outline:none; border-color:#0055a5; }
.answer-input.correct { border-color:#27ae60; background:#e8f8ee; color:#27ae60; }
.answer-input.wrong { border-color:#e74c3c; animation:shake .3s ease; }
@keyframes shake { 0%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} 100%{transform:translateX(0)} }
.submit-btn { width:100%; padding:14px; font-size:17px; margin-bottom:10px; }
.wrong-msg { font-size:14px; color:#e74c3c; font-weight:600; padding:10px; }
.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:8px; }
.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:#e67e22; }
.pip.draw { background:#999; }
.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; }