@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');

:root {
  --neon-cyan: #00d4e8;
  --neon-pink: #ff2a6d;
  --neon-yellow: #ffbe0b;
  --neon-green: #06d6a0;
  --dark-bg: #050510;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--dark-bg); font-family:'Rajdhani',sans-serif; color:white; }
body { display:flex; align-items:center; justify-content:center; height:100dvh; }

/* SCREENS */
.screen { display:none; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; position:absolute; z-index:10; }
.screen.active { display:flex; }

/* LOBBY */
#lobby { gap:1.8rem; padding:2rem 1.5rem; }

.game-logo { text-align:center; }
.game-logo h1 { font-family:'Orbitron',monospace; font-size:clamp(2rem,9vw,3.8rem); font-weight:900; color:var(--neon-cyan); letter-spacing:0.08em; }
.game-logo .subtitle { font-size:clamp(0.65rem,2.5vw,0.9rem); color:var(--neon-yellow); letter-spacing:0.4em; text-transform:uppercase; margin-top:0.3rem; }

.lobby-options { display:flex; flex-direction:column; gap:0.85rem; width:100%; max-width:360px; }

.mode-btn {
  font-family:'Orbitron',monospace; font-size:clamp(0.7rem,2.8vw,0.9rem); font-weight:700;
  padding:0.95rem 1.4rem; border:2px solid; background:transparent; cursor:pointer;
  text-transform:uppercase; letter-spacing:0.08em; transition:background 0.15s; text-align:left;
}
.mode-btn.cyan  { border-color:var(--neon-cyan);  color:var(--neon-cyan);  }
.mode-btn.cyan:hover  { background:rgba(0,212,232,0.1); }
.mode-btn.pink  { border-color:var(--neon-pink);  color:var(--neon-pink);  }
.mode-btn.pink:hover  { background:rgba(255,42,109,0.1); }
.mode-btn.green { border-color:var(--neon-green); color:var(--neon-green); }
.mode-btn.green:hover { background:rgba(6,214,160,0.1); }

.btn-desc { display:block; font-family:'Rajdhani',sans-serif; font-size:0.68rem; font-weight:400; opacity:0.6; letter-spacing:0.03em; margin-top:0.15rem; }

/* AI panel */
#aiPanel { gap:1rem; }
.diff-label { font-family:'Orbitron',monospace; font-size:0.75rem; color:rgba(255,255,255,0.5); letter-spacing:0.2em; text-transform:uppercase; text-align:center; }
.diff-buttons { display:flex; gap:0.5rem; width:100%; max-width:360px; }
.diff-btn { flex:1; font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:700; padding:0.75rem 0.5rem; border:2px solid rgba(255,255,255,0.15); background:transparent; color:rgba(255,255,255,0.4); cursor:pointer; text-transform:uppercase; letter-spacing:0.05em; transition:all 0.15s; }
.diff-btn:hover { border-color:rgba(255,255,255,0.4); color:rgba(255,255,255,0.7); }
.diff-btn.active.easy   { border-color:var(--neon-green);  color:var(--neon-green); }
.diff-btn.active.medium { border-color:var(--neon-yellow); color:var(--neon-yellow); }
.diff-btn.active.hard   { border-color:var(--neon-pink);   color:var(--neon-pink); }

.start-btn { font-family:'Orbitron',monospace; font-size:0.9rem; font-weight:700; padding:1rem 2.5rem; border:2px solid var(--neon-green); background:transparent; color:var(--neon-green); cursor:pointer; text-transform:uppercase; letter-spacing:0.1em; transition:background 0.15s; width:100%; max-width:360px; }
.start-btn:hover { background:rgba(6,214,160,0.1); }

/* Inputs */
.room-input-group { display:flex; gap:0.5rem; width:100%; max-width:360px; }
input[type="text"] { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.2); color:white; font-family:'Orbitron',monospace; font-size:1.1rem; padding:0.8rem 1rem; outline:none; letter-spacing:0.25em; text-transform:uppercase; }
input[type="text"]::placeholder { color:rgba(255,255,255,0.25); font-size:0.65rem; }
input[type="text"]:focus { border-color:var(--neon-cyan); }

.small-btn { font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:700; padding:0.8rem 1rem; border:2px solid var(--neon-cyan); background:transparent; color:var(--neon-cyan); cursor:pointer; text-transform:uppercase; transition:background 0.15s; white-space:nowrap; }
.small-btn:hover { background:rgba(0,212,232,0.1); }

.status-msg { text-align:center; font-size:0.82rem; color:var(--neon-yellow); min-height:1.4rem; letter-spacing:0.04em; width:100%; max-width:360px; }
.back-btn { font-family:'Rajdhani',sans-serif; font-size:0.82rem; background:none; border:none; color:rgba(255,255,255,0.35); cursor:pointer; text-transform:uppercase; letter-spacing:0.1em; transition:color 0.15s; }
.back-btn:hover { color:rgba(255,255,255,0.7); }

.room-code-display { display:flex; align-items:center; gap:0.8rem; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.15); padding:0.7rem 1.2rem; font-family:'Orbitron',monospace; font-size:1.6rem; letter-spacing:0.4em; color:var(--neon-cyan); }
.copy-icon { cursor:pointer; opacity:0.55; transition:opacity 0.15s; font-size:1rem; }
.copy-icon:hover { opacity:1; }
.lobby-hint { text-align:center; font-size:0.6rem; color:rgba(255,255,255,0.22); letter-spacing:0.08em; text-transform:uppercase; margin-top:0.5rem; }

/* GAME SCREEN */
#game { flex-direction:column; position:relative; }
.game-wrapper { display:flex; flex-direction:column; width:100%; height:100%; }

.score-bar { display:flex; justify-content:space-between; align-items:center; width:100%; padding:0.5rem 1rem; background:rgba(0,0,0,0.7); border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; z-index:20; }
.player-score { display:flex; flex-direction:column; align-items:center; gap:0.05rem; }
.player-label { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; opacity:0.5; }
.score-num { font-family:'Orbitron',monospace; font-size:clamp(1.6rem,6vw,2.5rem); font-weight:900; line-height:1; }
.p1 .score-num { color:var(--neon-cyan); }
.p2 .score-num { color:var(--neon-pink); }
.game-info { display:flex; flex-direction:column; align-items:center; gap:0.25rem; }
.round-badge { font-family:'Orbitron',monospace; font-size:0.5rem; background:rgba(255,255,255,0.06); padding:0.2rem 0.6rem; letter-spacing:0.1em; border:1px solid rgba(255,255,255,0.08); }
.twist-badge { font-size:0.58rem; color:var(--neon-yellow); letter-spacing:0.04em; font-weight:600; text-transform:uppercase; min-height:0.9rem; }

.canvas-container { position:relative; flex:1; width:100%; overflow:hidden; min-height:0; }
#gameCanvas { display:block; width:100%; height:100%; }

/* Overlays */
.game-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(5,5,16,0.92); z-index:30; gap:1.2rem; }
.game-overlay.hidden { display:none; }
.overlay-title { font-family:'Orbitron',monospace; font-size:clamp(1.4rem,7vw,2.8rem); font-weight:900; text-transform:uppercase; letter-spacing:0.1em; text-align:center; }
.overlay-sub { font-size:clamp(0.75rem,3vw,1rem); opacity:0.6; letter-spacing:0.12em; text-transform:uppercase; text-align:center; padding:0 1rem; }
.overlay-buttons { display:flex; flex-direction:column; gap:0.7rem; align-items:center; }
.overlay-btn { font-family:'Orbitron',monospace; font-size:0.82rem; font-weight:700; padding:0.9rem 2.2rem; border:2px solid var(--neon-cyan); background:transparent; color:var(--neon-cyan); cursor:pointer; text-transform:uppercase; letter-spacing:0.1em; transition:background 0.15s; }
.overlay-btn:hover { background:rgba(0,212,232,0.1); }

.winner-crown { font-size:2.8rem; animation:crownBounce 0.6s ease infinite alternate; }
@keyframes crownBounce { from{transform:translateY(0)} to{transform:translateY(-8px)} }

.countdown-num { font-family:'Orbitron',monospace; font-size:clamp(4rem,20vw,9rem); font-weight:900; color:var(--neon-cyan); animation:countPulse 0.8s ease-out; }
@keyframes countPulse { from{transform:scale(1.5);opacity:0} to{transform:scale(1);opacity:1} }

.twist-announce { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Orbitron',monospace; font-size:clamp(0.85rem,3.5vw,1.3rem); font-weight:700; color:var(--neon-yellow); text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; pointer-events:none; z-index:25; opacity:0; text-align:center; padding:0.4rem 1rem; background:rgba(0,0,0,0.7); border:1px solid rgba(255,190,11,0.4); }
.twist-announce.show { animation:twistPop 2.8s ease forwards; }
@keyframes twistPop {
  0%   { opacity:0; transform:translate(-50%,calc(-50% + 14px)); }
  15%  { opacity:1; transform:translate(-50%,-50%); }
  75%  { opacity:1; transform:translate(-50%,-50%); }
  100% { opacity:0; transform:translate(-50%,calc(-50% - 14px)); }
}

.mobile-hint { flex-shrink:0; text-align:center; font-size:0.58rem; color:rgba(255,255,255,0.25); letter-spacing:0.06em; text-transform:uppercase; padding:0.4rem 1rem; background:rgba(0,0,0,0.6); border-top:1px solid rgba(255,255,255,0.04); }