@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --bg-0: #070b12;
  --bg-1: #0d1320;
  --bg-2: #131d2e;
  --bg-3: #19253a;
  --bg-4: #1f2d44;

  --card-red:    #e63946;
  --card-yellow: #f4c430;
  --card-green:  #2a9d8f;
  --card-blue:   #457b9d;
  --card-wild:   #9b5de5;
  --card-skip:   #f77f00;

  --accent:     #7c3aed;
  --accent-h:   #8b5cf6;
  --accent-dim: rgba(124,58,237,.12);
  --accent-glow: 0 0 24px rgba(124,58,237,.3);

  --text-1: #e8edf5;
  --text-2: #8899b0;
  --text-3: #4a5a70;

  --border:   rgba(255,255,255,.07);
  --border-h: rgba(255,255,255,.13);

  --green: #22c55e;
  --green-dim: rgba(34,197,94,.12);
  --red:   #ef4444;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --font-d: 'Nunito', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --sh-lg: 0 8px 40px rgba(0,0,0,.6);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-b); background:var(--bg-0); color:var(--text-1); min-height:100dvh; -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--bg-4); border-radius:2px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border:none; border-radius:var(--r-sm); font-family:var(--font-b); font-size:15px; font-weight:600; cursor:pointer; transition:all .16s; text-decoration:none; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent; }
.btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.3); }
.btn-primary:hover:not(:disabled) { background:var(--accent-h); transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.3),var(--accent-glow); }
.btn-primary:active:not(:disabled) { transform:translateY(1px); }
.btn-secondary { background:var(--bg-3); color:var(--text-1); border:1px solid var(--border-h); }
.btn-secondary:hover:not(:disabled) { background:var(--bg-4); }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background:var(--bg-2); color:var(--text-1); }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:15px 32px; font-size:17px; }
.btn-full { width:100%; }
.btn-danger { background:rgba(239,68,68,.1); color:var(--red); border:1px solid rgba(239,68,68,.3); }

/* Input */
.input { width:100%; padding:12px 16px; min-height:48px; background:var(--bg-2); border:1px solid var(--border-h); border-radius:var(--r-sm); color:var(--text-1); font-family:var(--font-b); font-size:15px; outline:none; transition:border-color .2s,box-shadow .2s; }
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.input::placeholder { color:var(--text-3); }
.label { display:block; font-size:11px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.09em; margin-bottom:6px; }

/* Cards */
.card {
  width:52px; height:78px; border-radius:10px;
  border:2px solid rgba(255,255,255,.15);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  position:relative; font-family:var(--font-d); font-weight:900;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .15s, box-shadow .15s, border-color .15s;
  flex-shrink:0;
}
.card:hover:not(.disabled):not(.back) { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
.card.red    { background:var(--card-red);    color:#fff; }
.card.yellow { background:var(--card-yellow); color:#1a1a1a; }
.card.green  { background:var(--card-green);  color:#fff; }
.card.blue   { background:var(--card-blue);   color:#fff; }
.card.wild   { background:linear-gradient(135deg,#9b5de5,#f15bb5); color:#fff; }
.card.skip   { background:var(--card-skip);   color:#fff; }
.card.back   { background:linear-gradient(135deg,#1a237e,#283593); color:rgba(255,255,255,.3); cursor:default; }
.card.selected { transform:translateY(-14px) scale(1.04); border-color:#fff; box-shadow:0 14px 28px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.4); }
.card.disabled { opacity:.4; cursor:not-allowed; filter:grayscale(30%); transform:none !important; }
.card.sm { width:38px; height:57px; border-radius:7px; }
.card.sm .cv { font-size:16px; }
.card.sm .cl { font-size:6px; }
.card.xs { width:28px; height:42px; border-radius:5px; }
.card.xs .cv { font-size:12px; }
.card.xs .cl { display:none; }
.cv { font-size:22px; line-height:1; }
.cl { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }

/* Badge */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.badge-accent { background:var(--accent-dim); color:var(--accent); }
.badge-green  { background:var(--green-dim); color:var(--green); }
.badge-phase  { background:rgba(124,58,237,.2); color:#a78bfa; border:1px solid rgba(124,58,237,.3); }

/* Card / panel */
.panel { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; }
.panel-lg { padding:28px; }

/* Dot */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-on  { background:var(--green); box-shadow:0 0 8px var(--green); }
.dot-off { background:var(--text-3); }

/* Avatar */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; flex-shrink:0; font-family:var(--font-d); text-transform:uppercase; }

/* Toast */
#toast-container { position:fixed; bottom:24px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:300px; }
.toast { padding:12px 18px; background:var(--bg-4); border:1px solid var(--border-h); border-radius:var(--r-sm); font-size:14px; color:var(--text-1); box-shadow:var(--sh-lg); animation:toastIn .25s ease; pointer-events:all; }
.toast.success { border-color:rgba(34,197,94,.4); }
.toast.error   { border-color:rgba(239,68,68,.4); }
.toast.info    { border-color:rgba(124,58,237,.4); }
@keyframes toastIn { from { transform:translateX(16px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Connection status */
#conn-status { position:fixed; top:12px; right:12px; display:flex; align-items:center; gap:6px; padding:5px 12px; background:var(--bg-3); border:1px solid var(--border); border-radius:99px; font-size:11px; color:var(--text-2); z-index:200; transition:all .3s; pointer-events:none; }
#conn-status.connected { border-color:rgba(34,197,94,.3); }
#conn-status.disconnected { border-color:rgba(239,68,68,.3); }

/* Toggle buttons */
.toggle-group { display:flex; gap:4px; flex-wrap:wrap; }
.toggle-btn { padding:7px 14px; border:1px solid var(--border-h); border-radius:var(--r-sm); background:transparent; color:var(--text-2); font-size:13px; font-weight:700; cursor:pointer; transition:all .16s; font-family:var(--font-b); -webkit-tap-highlight-color:transparent; min-width:44px; min-height:40px; }
.toggle-btn:hover { color:var(--text-1); border-color:rgba(255,255,255,.2); }
.toggle-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* Settings */
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); gap:12px; }
.setting-row:last-child { border-bottom:none; }
.setting-label { font-size:14px; color:var(--text-1); font-weight:600; }
.setting-desc  { font-size:12px; color:var(--text-2); margin-top:2px; }

/* Chat */
.chat-msgs { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.chat-msg { font-size:12.5px; line-height:1.5; padding:1px 0; }
.chat-msg .mu { color:var(--accent); font-weight:700; }
.chat-msg.sys { color:var(--text-2); font-style:italic; font-size:11.5px; }
.chat-row { display:flex; gap:6px; }
.chat-input { flex:1; padding:9px 12px; min-height:38px; background:var(--bg-2); border:1px solid var(--border-h); border-radius:10px; color:var(--text-1); font-family:var(--font-b); font-size:13px; outline:none; transition:border-color .2s; }
.chat-input:focus { border-color:var(--accent); }
.chat-send-btn { width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff; border:none; font-size:16px; font-weight:900; cursor:pointer; flex-shrink:0; transition:background .16s,transform .12s; -webkit-tap-highlight-color:transparent; }
.chat-send-btn:hover { background:var(--accent-h); transform:scale(1.05); }

/* Error msg */
.error-msg { color:var(--red); font-size:13px; margin-top:6px; min-height:20px; }

/* Rules toggle */
.rules-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; font-family:var(--font-b); color:var(--text-1); font-size:14px; font-weight:600; transition:background .16s; -webkit-tap-highlight-color:transparent; }
.rules-toggle:hover { background:var(--bg-3); }
.rules-toggle .arrow { transition:transform .25s; color:var(--text-2); }
.rules-toggle.open .arrow { transform:rotate(180deg); }
.rules-body { display:none; padding:16px; background:var(--bg-2); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); }
.rules-body.open { display:block; }

/* Form group */
.form-group { margin-bottom:16px; }

/* Hidden */
.hidden { display:none !important; }

@media (max-width:600px) {
  #toast-container { bottom:72px; left:12px; right:12px; max-width:none; }
}