/* ============================================================
   UNO ONLINE — Futuristic Design System
   ============================================================ */
:root {
  --red: #ff3b47;
  --yellow: #ffcc00;
  --green: #2ecc55;
  --blue: #2f7bff;
  --wild-1: #ff3b47;
  --bg-0: #05060f;
  --bg-1: #0b0e24;
  --bg-2: #141a45;
  --neon: #00eaff;
  --neon-2: #b14bff;
  --neon-3: #ff2d95;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text: #eaf0ff;
  --text-dim: #96a0c8;
  --radius: 18px;
  --shadow-neon: 0 0 24px rgba(0, 234, 255, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 10%, #1b1145 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  overflow-x: hidden;
}
body { min-height: 100vh; }

/* animated stars background */
#stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #9cf, transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #f9c, transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #cff, transparent);
  background-size: 350px 350px;
  opacity: 0.5;
  animation: drift 60s linear infinite;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: 350px 700px; } }

#app { position: relative; z-index: 1; min-height: 100vh; }

/* ---------- Neon / glass utilities ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
.title-font { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  border: none; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 16px;
  padding: 14px 26px; border-radius: 14px;
  color: #fff; transition: transform .15s, box-shadow .2s, filter .2s;
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--neon) 0%, var(--neon-2) 100%);
  box-shadow: 0 8px 24px rgba(0, 234, 255, .35);
  color: #04121f;
}
.btn-primary:hover { box-shadow: 0 10px 34px rgba(0, 234, 255, .55); filter: brightness(1.08); }
.btn-accent {
  background: linear-gradient(135deg, var(--neon-3) 0%, var(--neon-2) 100%);
  box-shadow: 0 8px 24px rgba(255, 45, 149, .4);
}
.btn-accent:hover { filter: brightness(1.1); box-shadow: 0 10px 34px rgba(255,45,149,.6); }
.btn-ghost {
  background: var(--glass); border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 420px; padding: 40px 32px; }
.logo {
  text-align: center; margin-bottom: 8px;
}
.logo-uno {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 68px; line-height: 1;
  background: linear-gradient(135deg, var(--red), var(--yellow) 40%, var(--green) 70%, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,204,0,.4));
  letter-spacing: 6px;
}
.logo-sub {
  font-family: 'Orbitron', sans-serif; letter-spacing: 8px;
  color: var(--neon); font-size: 14px; margin-top: 4px; opacity: .9;
}
.tab-row { display: flex; gap: 8px; margin: 26px 0 20px; }
.tab {
  flex: 1; text-align: center; padding: 12px; border-radius: 12px; cursor: pointer;
  font-weight: 700; color: var(--text-dim); background: transparent;
  border: 1px solid transparent; transition: .2s;
}
.tab.active { color: #04121f; background: linear-gradient(135deg,var(--neon),var(--neon-2)); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: rgba(0,0,0,.28); border: 1px solid var(--glass-border);
  color: var(--text); font-size: 16px; font-family: inherit; transition: .2s;
}
.input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0,234,255,.18); }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-opt {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 24px; border-radius: 12px; cursor: pointer;
  background: rgba(0,0,0,.25); border: 2px solid transparent; transition: .15s;
}
.avatar-opt.active { border-color: var(--neon); background: rgba(0,234,255,.15); transform: scale(1.05); }
.auth-error {
  color: #ff6b7a; font-size: 14px; margin-bottom: 14px; text-align: center; min-height: 20px;
}

/* ============================================================
   HOME / LOBBY
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; position: sticky; top: 0; z-index: 20;
  background: rgba(5,6,15,.55); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.topbar .brand {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: 3px;
  background: linear-gradient(135deg, var(--red), var(--yellow) 50%, var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer;
}
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border);
}
.user-chip .ava { font-size: 22px; }
.user-chip .stats { font-size: 12px; color: var(--text-dim); }

.container { max-width: 1100px; margin: 0 auto; padding: 32px 22px 80px; }
.hero-title { font-family:'Orbitron'; font-size: 34px; font-weight: 900; margin-bottom: 6px; }
.hero-sub { color: var(--text-dim); margin-bottom: 28px; }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
.mode-card {
  padding: 28px; cursor: pointer; transition: transform .2s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.mode-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.mode-card .glow { position:absolute; inset:0; opacity:.14; z-index:0; }
.mode-card .icon-badge {
  width: 64px; height: 64px; border-radius: 18px; display:flex; align-items:center; justify-content:center;
  font-size: 30px; margin-bottom: 18px; position: relative; z-index: 1;
}
.mode-card h3 { font-size: 22px; margin-bottom: 8px; position: relative; z-index:1; font-family:'Orbitron'; }
.mode-card p { color: var(--text-dim); font-size: 14px; line-height:1.6; position:relative; z-index:1; }
.badge-cpu { background: linear-gradient(135deg,var(--neon),var(--neon-2)); box-shadow: var(--shadow-neon); }
.badge-online { background: linear-gradient(135deg,var(--neon-3),var(--neon-2)); box-shadow: 0 0 24px rgba(255,45,149,.4); }
.badge-board { background: linear-gradient(135deg,var(--yellow),var(--red)); box-shadow: 0 0 24px rgba(255,204,0,.4); }

.section-title { font-family:'Orbitron'; font-size: 20px; margin: 40px 0 18px; display:flex; align-items:center; gap:10px; }

/* count selector */
.count-selector { display:flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.count-opt {
  flex: 1; min-width: 90px; padding: 20px 12px; text-align:center; cursor:pointer;
  border-radius: 14px; background: rgba(0,0,0,.25); border: 2px solid var(--glass-border); transition:.15s;
}
.count-opt .num { font-family:'Orbitron'; font-size: 32px; font-weight:900; }
.count-opt .lbl { font-size: 12px; color: var(--text-dim); }
.count-opt.active { border-color: var(--neon); background: rgba(0,234,255,.12); transform: scale(1.03); }

/* room list */
.room-list { display: grid; gap: 12px; }
.room-item {
  display:flex; align-items:center; justify-content:space-between; padding: 16px 20px;
}
.room-item .code { font-family:'Orbitron'; font-size: 20px; letter-spacing: 3px; color: var(--yellow); }
.room-item .meta { font-size: 13px; color: var(--text-dim); }
.empty-hint { text-align:center; color: var(--text-dim); padding: 30px; font-size:14px; }

.leaderboard { display:grid; gap:8px; }
.lb-row { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.lb-rank { font-family:'Orbitron'; font-weight:900; width:32px; text-align:center; }
.lb-rank.top { color: var(--yellow); }
.lb-name { flex:1; font-weight:700; }
.lb-win { color: var(--green); font-family:'Orbitron'; }

/* lobby room */
.lobby-players { display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin: 24px 0; }
.lp-card { padding: 22px 14px; text-align:center; }
.lp-card .ava { font-size: 44px; }
.lp-card .name { font-weight:700; margin-top:8px; }
.lp-card .host-tag { font-size:11px; color: var(--yellow); margin-top:4px; }
.lp-empty { opacity:.4; border-style: dashed !important; }
.roomcode-big {
  font-family:'Orbitron'; font-size: 42px; letter-spacing: 8px; color: var(--yellow);
  text-align:center; padding: 20px; cursor:pointer;
}

/* ============================================================
   GAME TABLE
   ============================================================ */
.game-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at center, #182a5c 0%, #0a1030 60%, #04060f 100%);
  position: relative; overflow: hidden;
}
.game-top {
  display:flex; align-items:center; justify-content:space-between; padding: 12px 18px;
  z-index: 10;
}
.game-top .g-btn { font-size: 13px; }
.dir-indicator {
  display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim);
  font-family:'Orbitron';
}

/* opponents */
.opponents {
  display:flex; justify-content:center; gap: 18px; padding: 8px 10px; flex-wrap: wrap;
  z-index: 5;
}
.opp {
  text-align:center; padding: 10px 14px; border-radius: 16px; min-width: 92px;
  background: var(--glass); border: 1px solid var(--glass-border); transition:.25s;
  position: relative;
}
.opp.active { border-color: var(--neon); box-shadow: var(--shadow-neon); transform: scale(1.06); }
.opp .ava { font-size: 30px; }
.opp .name { font-size: 12px; font-weight:700; margin-top:2px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opp .cards-count {
  display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:12px;
  background: rgba(0,0,0,.35); padding: 3px 10px; border-radius: 999px; font-family:'Orbitron';
}
.opp .uno-flag {
  position:absolute; top:-8px; right:-8px; background: var(--red); color:#fff;
  font-size:10px; font-weight:900; padding: 2px 7px; border-radius:999px;
  font-family:'Orbitron'; box-shadow: 0 0 12px rgba(255,59,71,.8); animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

/* center table */
.table-center {
  flex: 1; display:flex; align-items:center; justify-content:center; gap: 36px;
  position: relative; z-index: 3;
}
.deck-pile, .discard-pile { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pile-label { font-size:12px; color: var(--text-dim); font-family:'Orbitron'; letter-spacing:1px; }

/* UNO CARD */
.card {
  width: 84px; height: 126px; border-radius: 12px; position: relative;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron'; font-weight:900; color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); user-select:none;
  border: 3px solid #fff; transition: transform .18s, box-shadow .2s, margin .18s;
}
.card::before {
  content:''; position:absolute; inset: 6px; border-radius: 8px;
  background: rgba(255,255,255,.16); transform: rotate(-18deg) scale(1.25);
  clip-path: ellipse(50% 62% at 50% 50%);
}
.card .val {
  position: relative; z-index:2; font-size: 34px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.card .corner { position:absolute; z-index:2; font-size:14px; }
.card .corner.tl { top:6px; left:8px; }
.card .corner.br { bottom:6px; right:8px; transform: rotate(180deg); }
.card-red { background: linear-gradient(160deg,#ff5661,#e0212e); }
.card-yellow { background: linear-gradient(160deg,#ffdb4d,#f5b800); color:#4a3a00; }
.card-yellow .val, .card-yellow .corner { text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.card-green { background: linear-gradient(160deg,#42dd6b,#1fa844); }
.card-blue { background: linear-gradient(160deg,#4a90ff,#1f5fe0); }
.card-wild {
  background: conic-gradient(from 45deg, #ff3b47, #ffcc00, #2ecc55, #2f7bff, #ff3b47);
}
.card-wild::before { background: rgba(0,0,0,.25); }
.card-back {
  background: linear-gradient(160deg,#1a1f4a,#0a0e2e);
  border-color:#2a3170;
}
.card-back::before { background: none; }
.card-back .logo-mini {
  color: var(--yellow); font-size: 22px; transform: rotate(-18deg);
  text-shadow: 0 0 12px rgba(255,204,0,.6);
}
.card.sm { width: 54px; height: 82px; border-width:2px; }
.card.sm .val { font-size: 22px; }
.card.sm .corner { font-size: 10px; }

/* current color indicator */
.color-orb {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 20px currentColor;
}
.stack-warn {
  background: var(--red); color:#fff; padding: 6px 14px; border-radius:999px;
  font-family:'Orbitron'; font-weight:900; animation: pulse 0.8s infinite;
  box-shadow: 0 0 16px rgba(255,59,71,.7);
}

/* my area */
.my-area { z-index: 8; padding: 6px 0 14px; }
.my-header {
  display:flex; align-items:center; justify-content:center; gap: 14px; margin-bottom: 8px;
}
.turn-badge {
  font-family:'Orbitron'; font-weight:900; padding: 6px 18px; border-radius: 999px;
  font-size: 14px;
}
.turn-badge.mine { background: linear-gradient(135deg,var(--neon),var(--neon-2)); color:#04121f; box-shadow: var(--shadow-neon); animation: glow 1.5s infinite; }
.turn-badge.wait { background: var(--glass); color: var(--text-dim); }
@keyframes glow { 0%,100%{box-shadow:0 0 14px rgba(0,234,255,.4);} 50%{box-shadow:0 0 28px rgba(0,234,255,.8);} }

.hand {
  display:flex; justify-content:center; align-items:flex-end; padding: 0 12px 8px;
  min-height: 140px; overflow-x: auto; overflow-y: visible;
}
.hand .card { margin-left: -22px; cursor: pointer; }
.hand .card:first-child { margin-left: 0; }
.hand .card.playable:hover { transform: translateY(-22px) scale(1.05); box-shadow: 0 0 26px rgba(0,234,255,.6); z-index: 30; }
.hand .card.playable { cursor: pointer; }
.hand .card.disabled { opacity: .55; filter: grayscale(.35); cursor: not-allowed; }
.hand .card.playable::after {
  content:''; position:absolute; inset:-3px; border-radius:12px;
  border: 2px solid var(--neon); box-shadow: 0 0 14px var(--neon); opacity:.7;
}

.action-bar { display:flex; justify-content:center; gap:12px; padding: 4px 12px 18px; flex-wrap: wrap; }

/* color picker modal */
.modal-overlay {
  position: fixed; inset:0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding: 20px;
}
.modal { padding: 30px; max-width: 380px; width:100%; text-align:center; }
.modal h3 { font-family:'Orbitron'; margin-bottom: 18px; }
.color-choices { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.color-choice {
  aspect-ratio: 1.4; border-radius: 16px; cursor:pointer; border: 3px solid transparent;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px;
  color:#fff; font-family:'Orbitron'; transition:.15s;
}
.color-choice:hover { transform: scale(1.06); }
.cc-red{background:linear-gradient(160deg,#ff5661,#e0212e);}
.cc-yellow{background:linear-gradient(160deg,#ffdb4d,#f5b800);color:#4a3a00;}
.cc-green{background:linear-gradient(160deg,#42dd6b,#1fa844);}
.cc-blue{background:linear-gradient(160deg,#4a90ff,#1f5fe0);}

/* winner overlay */
.win-overlay {
  position:fixed; inset:0; background: rgba(4,6,15,.88); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; z-index: 200; padding:20px;
}
.win-card { padding: 44px 36px; text-align:center; max-width: 420px; animation: popin .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes popin { from { transform: scale(.6); opacity:0;} to {transform:scale(1);opacity:1;} }
.win-emoji { font-size: 72px; }
.win-title { font-family:'Orbitron'; font-size: 34px; font-weight:900; margin: 10px 0; }
.win-title.won { background: linear-gradient(135deg,var(--yellow),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.win-title.lost { color: var(--text-dim); }
.win-name { color: var(--text-dim); margin-bottom: 24px; }

/* game log */
.game-log {
  position: fixed; right: 14px; bottom: 14px; width: 240px; max-height: 160px;
  overflow-y: auto; padding: 12px 14px; font-size: 12px; z-index: 15;
  color: var(--text-dim); line-height: 1.7;
}
.game-log .log-latest { color: var(--neon); font-weight:700; }

/* toast */
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 500; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast {
  padding: 12px 22px; border-radius: 12px; font-weight:700; font-size:14px;
  background: rgba(20,26,69,.95); border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: toastin .3s;
  max-width: 90vw;
}
.toast.err { border-color: #ff6b7a; color: #ff9aa5; }
.toast.ok { border-color: var(--neon); color: var(--neon); }
@keyframes toastin { from{transform:translateY(-16px);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* spinner */
.spinner {
  width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--neon); border-radius: 50%; animation: spin 0.8s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }

/* responsive */
@media (max-width: 640px) {
  .card { width: 66px; height: 100px; }
  .card .val { font-size: 26px; }
  .hand .card { margin-left: -28px; }
  .table-center { gap: 20px; }
  .game-log { width: 160px; font-size: 11px; }
  .logo-uno { font-size: 54px; }
  .hero-title { font-size: 26px; }
}