:root {
  --ink: #172033;
  --muted: #667085;
  --line: #dfe4ea;
  --surface: #ffffff;
  --surface-soft: #f7f8fa;
  --primary: #1e3a8a;
  --primary-hover: #172f72;
  --accent: #f97316;
  --accent-soft: #fff1e7;
  --success: #15803d;
  --danger: #b42318;
  --warning: #a15c00;
  --info: #0b6b83;
  --radius: 10px;
  --shadow: 0 4px 14px rgba(15, 23, 42, .06);
  --header-height: 68px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f4f6f8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: #f4f6f8; color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
code { background: #eef1f5; border: 1px solid #d9dee7; padding: 2px 6px; border-radius: 4px; }

.site-header {
  min-height: var(--header-height); position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 10px clamp(16px, 3vw, 40px); background: #fff; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-width: 190px; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 900; letter-spacing: -.5px; }
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.main-nav { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; }
.nav-link, .nav-group > summary { list-style: none; color: #344054; padding: 9px 10px; border-radius: 6px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-link:hover, .nav-group > summary:hover, .nav-link.active { background: #f1f4f8; text-decoration: none; color: var(--primary); }
.nav-group { position: relative; }
.nav-group[open] > summary { background: #f1f4f8; color: var(--primary); }
.nav-panel { position: absolute; top: calc(100% + 9px); left: 0; width: 245px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.nav-panel a { padding: 9px 10px; border-radius: 5px; color: #344054; font-size: 14px; }
.nav-panel a:hover { background: #f6f7f9; color: var(--primary); text-decoration: none; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.player-chip { display: inline-flex; align-items: center; gap: 7px; color: #344054; font-size: 13px; font-weight: 700; }
.avatar-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--player-color); border: 2px solid #fff; box-shadow: 0 0 0 1px #cdd4df; }
.guest-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.nav-toggle { display: none; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }

.page-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 56px; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px clamp(16px, 3vw, 40px); color: var(--muted); background: #fff; border-top: 1px solid var(--line); font-size: 13px; }

h1, h2, h3, h4 { margin-top: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.04; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 18px; }
p { line-height: 1.65; }
.eyebrow { display: inline-block; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.muted { color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.section-heading p { margin: 3px 0 0; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; padding: 10px 15px; font-weight: 750; line-height: 1.2; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-secondary { background: #fff; color: var(--primary); border-color: #b7c2d6; }
.btn-danger { background: #fff; color: var(--danger); border-color: #e6a9a4; }
.btn-ghost { background: #fff; color: #344054; border-color: var(--line); }
.btn-small { padding: 7px 10px; font-size: 12px; }
.btn-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 26px; align-items: stretch; margin-bottom: 28px; }
.hero-main { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); box-shadow: var(--shadow); }
.hero-main p { max-width: 690px; color: #526071; font-size: 17px; }
.hero-characters { display: flex; align-items: end; gap: 8px; margin-top: 26px; height: 104px; }
.character-bubble { --c: #f97316; width: 76px; height: 76px; border-radius: 50% 50% 42% 42%; background: var(--c); border: 5px solid #fff; box-shadow: 0 2px 0 #ced5df; position: relative; transform-origin: bottom; animation: bob 2.8s ease-in-out infinite; }
.character-bubble:nth-child(2) { animation-delay: -.5s; height: 92px; width: 92px; }
.character-bubble:nth-child(3) { animation-delay: -1s; }
.character-bubble:nth-child(4) { animation-delay: -1.5s; height: 86px; width: 86px; }
.character-bubble::before, .character-bubble::after { content: ''; position: absolute; top: 26%; width: 7px; height: 9px; background: #263248; border-radius: 50%; }
.character-bubble::before { left: 28%; } .character-bubble::after { right: 28%; }
@keyframes bob { 50% { transform: translateY(-7px) rotate(2deg); } }
.hero-side { display: grid; gap: 14px; }
.quick-card, .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(15,23,42,.035); }
.quick-card { padding: 20px; }
.quick-card h3 { margin-bottom: 7px; }
.quick-card p { margin: 0 0 13px; color: var(--muted); font-size: 14px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 17px; }
.stat-card strong { display: block; font-size: 25px; margin-top: 4px; }
.stat-card span { color: var(--muted); font-size: 13px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.card { padding: 18px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.game-card { min-height: 216px; display: flex; flex-direction: column; }
.game-card .game-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 9px; background: var(--game-color, #fff2e8); font-size: 24px; border: 1px solid rgba(0,0,0,.05); margin-bottom: 15px; }
.game-card .card-actions { margin-top: auto; display: flex; gap: 8px; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: #eef2f6; color: #475467; font-size: 11px; font-weight: 750; }
.badge-success { background: #eaf8ef; color: #18713a; }
.badge-warning { background: #fff5e5; color: #8a5200; }
.badge-danger { background: #fff0ef; color: #a12b23; }
.badge-info { background: #eaf6f8; color: #0c6174; }
.progress { height: 8px; background: #e9edf2; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); width: var(--progress, 0%); }

.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel + .panel { margin-top: 14px; }
.list { display: grid; gap: 10px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.list-row:last-child { border-bottom: 0; }
.list-main { min-width: 0; }
.list-main strong { display: block; }
.list-main small { color: var(--muted); }

form { margin: 0; }
label { display: grid; gap: 6px; margin-bottom: 14px; color: #344054; font-size: 13px; font-weight: 720; }
input, select, textarea { width: 100%; min-height: 42px; border: 1px solid #cfd6df; border-radius: 6px; background: #fff; padding: 9px 11px; color: var(--ink); outline: none; }
textarea { min-height: 105px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #6c83bc; box-shadow: 0 0 0 3px rgba(30,58,138,.10); }
input[type=checkbox], input[type=radio] { width: 17px; min-height: 17px; }
.form-card { width: min(460px,100%); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.form-card h2 { margin-bottom: 20px; }
.form-note { margin: 15px 0 0; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.auth-layout { min-height: 64vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,460px); gap: 50px; align-items: center; }
.auth-copy { padding: 30px; }
.auth-copy h1 { max-width: 690px; }
.auth-copy p { max-width: 600px; color: var(--muted); font-size: 17px; }

.alert, .toast { padding: 11px 13px; border: 1px solid; border-radius: 7px; margin-bottom: 14px; line-height: 1.5; font-size: 14px; }
.alert-danger, .toast-error { color: #8f1d16; background: #fff2f1; border-color: #f0b8b3; }
.alert-success, .toast-success { color: #176b36; background: #edf9f1; border-color: #addcba; }
.alert-info { color: #0b5b6e; background: #edf8fa; border-color: #b4dfe6; }
.toast { position: fixed; right: 18px; top: 82px; z-index: 100; box-shadow: var(--shadow); animation: toastOut 5s forwards; }
@keyframes toastOut { 0%,80% { opacity:1 } 100% { opacity:0; visibility:hidden } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 13px; border-bottom: 1px solid #e8ebef; white-space: nowrap; }
th { background: #f6f7f9; color: #475467; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.rank { display: inline-grid; place-items:center; width: 28px; height: 28px; border-radius: 50%; background: #eef1f5; font-weight: 850; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filter-bar label { margin: 0; min-width: 150px; }
.pagination { display: flex; gap: 5px; justify-content: flex-end; margin-top: 14px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }

.install-page { display: grid; place-items: center; padding: 24px; }
.install-card { width: min(620px,100%); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.check-list { padding-left: 20px; line-height: 1.8; color: #475467; }

.mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mode-card { position: relative; display: block; min-height: 150px; padding: 19px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--mode-color, var(--primary)); border-radius: 8px; color: var(--ink); }
.mode-card:hover { text-decoration: none; border-color: #aab6c8; transform: translateY(-2px); }
.mode-card p { color: var(--muted); font-size: 13px; }
.mode-card .arrow { position: absolute; right: 16px; bottom: 14px; color: var(--primary); font-weight: 900; }

.character-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 13px; }
.character-card { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 15px; }
.character-avatar { --c:#f97316; width: 86px; height: 86px; margin: 0 auto 12px; background: var(--c); border-radius: 50% 50% 42% 42%; border: 4px solid #fff; box-shadow: 0 0 0 1px #d9dee6; position: relative; }
.character-avatar::before, .character-avatar::after { content:''; position:absolute; top:30%; width:8px; height:10px; border-radius:50%; background:#243044; }
.character-avatar::before { left:27%; } .character-avatar::after { right:27%; }
.character-avatar i { position:absolute; width:24px; height:10px; border-bottom:3px solid #243044; border-radius:50%; left:50%; bottom:24%; transform:translateX(-50%); }

.world-map { display: grid; gap: 16px; }
.world-card { display: grid; grid-template-columns: 220px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.world-visual { min-height: 170px; display: grid; place-items: center; font-size: 48px; background: var(--world-bg,#fff2e6); border-right: 1px solid var(--line); }
.world-content { padding: 20px 20px 20px 0; }
.level-row { display: flex; flex-wrap: wrap; gap: 8px; }
.level-button { display: inline-flex; align-items:center; gap:6px; border:1px solid #cbd3de; border-radius:6px; padding:8px 10px; background:#fff; color:#344054; }
.level-button.locked { opacity:.55; pointer-events:none; }

.room-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; }
.room-code { display:inline-flex; align-items:center; gap:9px; font-size:24px; font-weight:900; letter-spacing:.12em; padding:8px 12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:7px; }
.player-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.player-slot { min-height:112px; background:#fff; border:1px solid var(--line); border-left:5px solid var(--slot-color,#cbd5e1); border-radius:8px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-slot.empty { color:var(--muted); border-left-color:#d6dbe3; background:#fafbfc; }
.player-name { display:flex; align-items:center; gap:10px; font-weight:800; }
.ready-state { font-size:12px; font-weight:800; }
.ready-state.ready { color:var(--success); }
.chat-box { height:260px; overflow:auto; display:grid; align-content:start; gap:7px; padding:11px; background:#f7f8fa; border:1px solid var(--line); border-radius:7px; }
.chat-message { background:#fff; border:1px solid #e5e9ee; border-radius:6px; padding:8px 9px; font-size:13px; }
.quick-message-row { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.quick-message-row button { border:1px solid var(--line); background:#fff; border-radius:5px; padding:6px 8px; }
.connection-pill { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.connection-pill::before { content:''; width:8px; height:8px; border-radius:50%; background:#22c55e; }

.game-page { width:100%; }
.game-setup { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; }
.game-stage-wrap { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; position:relative; }
.game-stage { display:block; width:100%; aspect-ratio:16/9; background:#f8fbef; border:1px solid #cfd8c3; border-radius:5px; touch-action:none; }
.game-hud { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:10px; }
.game-hud .hud-right { text-align:right; }
.hud-timer { min-width:80px; text-align:center; padding:7px 10px; border:1px solid var(--line); background:#fff; border-radius:6px; font-weight:900; font-variant-numeric:tabular-nums; }
.score-strip { display:flex; flex-wrap:wrap; gap:6px; }
.score-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:#fff; padding:5px 8px; border-radius:5px; font-size:12px; }
.game-overlay { position:absolute; inset:12px; display:grid; place-items:center; background:rgba(255,255,255,.91); border-radius:5px; z-index:4; }
.game-overlay[hidden] { display:none; }
.overlay-card { width:min(520px,calc(100% - 30px)); text-align:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:var(--shadow); }
.player-config-row { display:grid; grid-template-columns:auto 1fr 130px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #edf0f3; }
.player-config-row:last-child { border-bottom:0; }
.player-number { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--player-color); font-weight:900; }
.control-help { font-size:12px; color:var(--muted); }
.touch-controls { display:none; position:absolute; inset:0; pointer-events:none; z-index:3; }
.touch-dpad { position:absolute; left:15px; bottom:15px; width:128px; height:128px; pointer-events:auto; }
.touch-dpad button { position:absolute; width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.22); background:rgba(255,255,255,.84); font-weight:900; }
.touch-dpad .up { left:42px; top:0; } .touch-dpad .down { left:42px; bottom:0; } .touch-dpad .left { left:0; top:42px; } .touch-dpad .right { right:0; top:42px; }
.touch-action { position:absolute; right:22px; bottom:30px; width:74px; height:74px; border-radius:50%; border:2px solid #fff; background:rgba(249,115,22,.88); color:#fff; font-weight:900; pointer-events:auto; }

.empty-state { padding:40px 20px; text-align:center; color:var(--muted); background:#fff; border:1px dashed #cbd3dc; border-radius:8px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.tabs a { padding:10px 12px; color:#475467; border-bottom:3px solid transparent; white-space:nowrap; }
.tabs a.active, .tabs a:hover { border-bottom-color:var(--primary); color:var(--primary); text-decoration:none; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns:auto auto 1fr; }
  .nav-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:var(--header-height); left:0; right:0; padding:12px 16px 18px; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); align-items:stretch; flex-direction:column; }
  .main-nav.open { display:flex; }
  .nav-group { width:100%; }
  .nav-group > summary, .nav-link { display:block; width:100%; }
  .nav-panel { position:static; width:auto; box-shadow:none; border:0; border-left:2px solid #d9dee7; border-radius:0; margin:4px 0 8px 8px; }
  .account-actions { margin-left:auto; }
  .card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .character-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .hero, .split-layout, .auth-layout, .game-setup, .room-layout { grid-template-columns:1fr; }
  .hero-main { padding:30px; }
  .stats-grid, .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .world-card { grid-template-columns:1fr; }
  .world-visual { border-right:0; border-bottom:1px solid var(--line); min-height:120px; }
  .world-content { padding:18px; }
  .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .touch-controls { display:block; }
  .player-slots { grid-template-columns:1fr; }
}
@media (max-width: 580px) {
  .site-header { min-height:60px; padding:9px 12px; gap:8px; }
  .brand { min-width:0; }
  .brand small { display:none; }
  .brand strong { font-size:14px; }
  .brand-mark { width:35px; height:35px; }
  .account-actions .guest-label, .player-chip { display:none; }
  .page-shell { width:min(100% - 20px,1240px); padding-top:18px; }
  .hero-main { padding:24px 20px; }
  .hero-characters { transform:scale(.88); transform-origin:left bottom; }
  .stats-grid, .card-grid, .mode-grid, .character-grid, .form-grid { grid-template-columns:1fr; }
  .section-heading { align-items:start; flex-direction:column; }
  .site-footer { flex-direction:column; }
  .player-config-row { grid-template-columns:auto 1fr; }
  .player-config-row select { grid-column:1/-1; }
  .game-stage-wrap { padding:6px; }
  .game-overlay { inset:6px; }
}

.keyboard-remap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.remap-player { border:1px solid var(--line); border-radius:7px; padding:13px; background:#fafbfc; }
.remap-player h3 { margin-bottom:9px; }
.remap-grid { display:grid; gap:6px; }
.remap-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; font-size:13px; }
.remap-key { min-width:104px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.remap-key.listening { border-color:var(--accent); background:#fff7ed; }
@media(max-width:680px){.keyboard-remap{grid-template-columns:1fr}}

/* =====================================================
   v1.4 Game Lobby Skin — polished game-style UI
   Inspired by high-production mobile/console game lobbies
   without copying any specific branded UI.
   ===================================================== */
.theme-game-ui {
  --ink: #1b2340;
  --muted: #57627f;
  --line: #c8d6f1;
  --surface: #ffffff;
  --surface-soft: #f6f8ff;
  --panel-blue: #2141a2;
  --panel-blue-2: #3459cb;
  --panel-gold: #ffcc4d;
  --panel-gold-2: #f59f0a;
  --panel-red: #ef6b43;
  --panel-green: #35b870;
  --panel-cyan: #45c9ef;
  --shadow: 0 16px 36px rgba(25, 46, 95, .18), 0 3px 8px rgba(19, 28, 55, .08);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.85), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 82% 16%, rgba(255,220,126,.35), rgba(255,220,126,0) 22%),
    linear-gradient(180deg, #9fd3ff 0%, #d8efff 24%, #eef7ff 54%, #fcfdff 100%);
}
.theme-game-ui::before,
.theme-game-ui::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
.theme-game-ui::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.65) 0 2px, transparent 2px) 0 0 / 140px 140px,
    radial-gradient(circle at 74% 28%, rgba(255,255,255,.5) 0 1.5px, transparent 2px) 0 0 / 180px 180px,
    radial-gradient(circle at 30% 72%, rgba(255,214,102,.23) 0 20px, transparent 21px) 0 0 / 320px 320px,
    radial-gradient(circle at 72% 84%, rgba(90,157,255,.12) 0 25px, transparent 26px) 0 0 / 340px 340px;
  opacity: .85;
}
.theme-game-ui::after {
  z-index: -1;
  inset: auto 0 0 0;
  height: 220px;
  background:
    radial-gradient(circle at 20% 70%, rgba(54, 191, 115, .18), rgba(54, 191, 115, 0) 26%),
    radial-gradient(circle at 80% 72%, rgba(64, 164, 255, .14), rgba(64, 164, 255, 0) 28%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 55%, rgba(255,255,255,.92));
}
.theme-game-ui body,
body.theme-game-ui { color: var(--ink); }
.theme-game-ui a { color: #1f43ae; }
.theme-game-ui a:hover { text-decoration: none; }
.theme-game-ui .page-shell { padding-top: 32px; }

.theme-game-ui .site-header {
  background: linear-gradient(180deg, rgba(35,66,166,.98), rgba(24,48,131,.98));
  border-bottom: 3px solid #ffcf5a;
  box-shadow: 0 12px 26px rgba(25, 46, 95, .18);
}
.theme-game-ui .brand,
.theme-game-ui .nav-link,
.theme-game-ui .nav-group > summary,
.theme-game-ui .player-chip,
.theme-game-ui .guest-label { color: #f8fbff; }
.theme-game-ui .brand-mark {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd86f, #ff9d19);
  color: #693600;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 rgba(101, 65, 0, .18);
}
.theme-game-ui .brand small { color: rgba(255,255,255,.85); }
.theme-game-ui .nav-link,
.theme-game-ui .nav-group > summary {
  position: relative;
  border-radius: 999px;
  color: rgba(255,255,255,.9);
}
.theme-game-ui .nav-link:hover,
.theme-game-ui .nav-group > summary:hover,
.theme-game-ui .nav-link.active,
.theme-game-ui .nav-group[open] > summary {
  color: #14358f;
  background: linear-gradient(180deg, #fff7d2, #ffd36e);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 rgba(148, 96, 0, .22);
}
.theme-game-ui .nav-panel {
  width: 265px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  border: 2px solid #c8d6f1;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.theme-game-ui .nav-panel a {
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 700;
}
.theme-game-ui .nav-panel a:hover { background: #edf4ff; }
.theme-game-ui .nav-toggle,
.theme-game-ui .account-actions .btn,
.theme-game-ui .mobile-icon-button,
.theme-game-ui .sheet-close {
  border-radius: 12px;
}

.theme-game-ui .btn {
  position: relative;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 6px 0 rgba(20, 31, 66, .12);
}
.theme-game-ui .btn:hover { transform: translateY(-2px); }
.theme-game-ui .btn:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(20,31,66,.12); }
.theme-game-ui .btn-primary {
  background: linear-gradient(180deg, #4a75ff, #2044bb);
  border-color: #1b37a8;
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 6px 0 rgba(18, 38, 104, .28);
}
.theme-game-ui .btn-primary:hover { background: linear-gradient(180deg, #5c84ff, #274ec9); }
.theme-game-ui .btn-accent {
  background: linear-gradient(180deg, #ffd967, #ff9b1f);
  border-color: #db8700;
  color: #693600;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 6px 0 rgba(143, 90, 0, .22);
}
.theme-game-ui .btn-accent:hover { background: linear-gradient(180deg, #ffe38a, #ffa72d); }
.theme-game-ui .btn-secondary,
.theme-game-ui .btn-ghost,
.theme-game-ui .btn-danger {
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border-color: #c4d4f1;
  color: #264094;
}
.theme-game-ui .btn-danger { color: #b4431f; border-color: #f0c3b1; }
.theme-game-ui .btn-small { border-radius: 12px; }

.theme-game-ui .eyebrow {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #ffd86a;
  font-weight: 900;
  letter-spacing: .14em;
}
.theme-game-ui .hero { gap: 24px; }
.theme-game-ui .hero-main {
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 84% 20%, rgba(255,255,255,.2), transparent 26%),
    radial-gradient(circle at 18% 85%, rgba(255,209,74,.22), transparent 30%),
    linear-gradient(135deg, #2444aa 0%, #2f63d5 42%, #21a6d8 100%);
  box-shadow: 0 18px 42px rgba(27, 64, 164, .32);
}
.theme-game-ui .hero-main::before,
.theme-game-ui .hero-main::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 32px;
  border: 2px solid rgba(255,255,255,.14);
  transform: rotate(20deg);
}
.theme-game-ui .hero-main::before { top: -48px; right: -24px; }
.theme-game-ui .hero-main::after { left: -46px; bottom: -50px; }
.theme-game-ui .hero-main h1 { max-width: 780px; text-shadow: 0 4px 12px rgba(17,26,58,.18); }
.theme-game-ui .hero-main p { color: rgba(247,250,255,.92); }
.theme-game-ui .hero-characters { height: 118px; }
.theme-game-ui .character-bubble {
  border: 6px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 0 rgba(19, 31, 74, .16), 0 18px 26px rgba(16, 26, 58, .2);
}
.theme-game-ui .quick-card,
.theme-game-ui .card,
.theme-game-ui .panel,
.theme-game-ui .form-card,
.theme-game-ui .stat-card,
.theme-game-ui .install-card,
.theme-game-ui .mode-card,
.theme-game-ui .world-card,
.theme-game-ui .player-slot,
.theme-game-ui .character-card {
  border: 2px solid #d9e5fa;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.theme-game-ui .quick-card,
.theme-game-ui .card,
.theme-game-ui .panel,
.theme-game-ui .form-card,
.theme-game-ui .install-card,
.theme-game-ui .world-card,
.theme-game-ui .player-slot,
.theme-game-ui .character-card,
.theme-game-ui .mode-card {
  background: linear-gradient(180deg, #ffffff, #f8fbff 100%);
}
.theme-game-ui .quick-card,
.theme-game-ui .stat-card,
.theme-game-ui .panel,
.theme-game-ui .card,
.theme-game-ui .mode-card,
.theme-game-ui .form-card,
.theme-game-ui .install-card { position: relative; overflow: hidden; }
.theme-game-ui .quick-card::before,
.theme-game-ui .stat-card::before,
.theme-game-ui .panel::before,
.theme-game-ui .card::before,
.theme-game-ui .mode-card::before,
.theme-game-ui .form-card::before,
.theme-game-ui .install-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #4d79ff, #34c6f3, #ffd05b);
}
.theme-game-ui .quick-card h3,
.theme-game-ui .panel h2,
.theme-game-ui .panel h3,
.theme-game-ui .card h3,
.theme-game-ui .mode-card h3,
.theme-game-ui .character-card h3 { color: #243d8f; }
.theme-game-ui .stat-card {
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  padding: 18px 18px 16px;
}
.theme-game-ui .stat-card strong {
  font-size: 30px;
  color: #1c3791;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.theme-game-ui .game-card {
  min-height: 230px;
  background:
    radial-gradient(circle at top right, rgba(77, 121, 255, .10), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7fbff);
}
.theme-game-ui .game-card .game-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7d0, #ffd36f);
  border: 2px solid #ffd467;
  box-shadow: 0 6px 0 rgba(154, 97, 0, .16);
}
.theme-game-ui .badge {
  border: 1px solid rgba(0,0,0,.03);
  background: linear-gradient(180deg, #f3f6ff, #e7efff);
  color: #3450a3;
  font-weight: 900;
}
.theme-game-ui .badge-success { background: linear-gradient(180deg, #e9fff1, #d6f8e3); color: #187043; }
.theme-game-ui .badge-warning { background: linear-gradient(180deg, #fff6dc, #ffe6a3); color: #8b5600; }
.theme-game-ui .badge-danger { background: linear-gradient(180deg, #fff0ec, #ffd5c9); color: #a43d1f; }
.theme-game-ui .badge-info { background: linear-gradient(180deg, #edfaff, #d8f6ff); color: #126987; }
.theme-game-ui .progress {
  height: 12px;
  background: #e5edff;
  border: 1px solid #d2dffc;
  box-shadow: inset 0 2px 4px rgba(19, 31, 74, .08);
}
.theme-game-ui .progress > span { background: linear-gradient(90deg, #58d0ef, #3373ff, #ffca49); }
.theme-game-ui .mode-card {
  min-height: 176px;
  padding: 22px;
  border-top: 0;
}
.theme-game-ui .mode-card::after {
  content: '';
  position: absolute;
  inset: auto 16px 14px auto;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.48), rgba(255,255,255,0) 58%), var(--mode-color, #3b82f6);
  opacity: .2;
}
.theme-game-ui .mode-card:hover {
  border-color: #c7d8fb;
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(27, 64, 164, .18);
}
.theme-game-ui .mode-card .arrow { color: #1f43ae; }
.theme-game-ui .list-row { border-bottom-style: dashed; border-bottom-color: #dce5f7; }
.theme-game-ui .table-wrap,
.theme-game-ui table,
.theme-game-ui .chat-box {
  border-radius: 20px;
}
.theme-game-ui .table-wrap { border: 2px solid #dbe6f8; box-shadow: var(--shadow); }
.theme-game-ui th { background: #eef4ff; color: #3851a5; }
.theme-game-ui .room-code {
  background: linear-gradient(180deg, #fff8dd, #ffe8ab);
  border: 2px solid #ffd063;
  border-radius: 16px;
  color: #7a4d00;
  box-shadow: 0 7px 0 rgba(154,97,0,.12);
}
.theme-game-ui .player-slot { border-left-width: 0; }
.theme-game-ui .player-slot::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: var(--slot-color, #cbd5e1);
}
.theme-game-ui .chat-box {
  background: linear-gradient(180deg, #f6f9ff, #eef4ff);
  border: 2px solid #d6e2f8;
}
.theme-game-ui .chat-message { border-radius: 14px; }

.theme-game-ui input,
.theme-game-ui select,
.theme-game-ui textarea {
  border-radius: 14px;
  border: 2px solid #d3def6;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.theme-game-ui input:focus,
.theme-game-ui select:focus,
.theme-game-ui textarea:focus {
  border-color: #6f8ff0;
  box-shadow: 0 0 0 4px rgba(63, 101, 224, .12);
}
.theme-game-ui .form-card,
.theme-game-ui .auth-copy {
  position: relative;
}
.theme-game-ui .auth-copy h1 { color: #203d9d; }
.theme-game-ui .alert,
.theme-game-ui .toast { border-radius: 16px; box-shadow: var(--shadow); }
.theme-game-ui .tabs a.active,
.theme-game-ui .tabs a:hover { border-bottom-color: #f8a71f; color: #2142a2; }
.theme-game-ui .character-avatar {
  border-width: 6px;
  box-shadow: 0 8px 0 rgba(19,31,74,.12), 0 0 0 2px #dbe3f5;
}
.theme-game-ui .world-card { overflow: hidden; }
.theme-game-ui .world-visual {
  color: #fff;
  background: linear-gradient(135deg, rgba(44,86,208,.95), rgba(72, 205, 238, .9));
}
.theme-game-ui .level-button {
  border-radius: 12px;
  border-width: 2px;
}
.theme-game-ui .empty-state {
  border-radius: 20px;
  border: 2px dashed #bfd0f1;
  background: linear-gradient(180deg, #f9fbff, #f1f6ff);
}

.theme-game-ui .game-stage-wrap {
  background: linear-gradient(180deg, #1c317c, #12235d);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 22px 44px rgba(18, 35, 93, .28);
  padding: 14px;
}
.theme-game-ui .game-hud {
  margin-bottom: 12px;
  color: #fff;
}
.theme-game-ui .hud-timer,
.theme-game-ui .score-chip,
.theme-game-ui #roundLabel {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(2px);
}
.theme-game-ui .hud-timer {
  border-radius: 16px;
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.theme-game-ui .score-chip { border-radius: 12px; }
.theme-game-ui .game-stage {
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #f6f3cd, #d9f1bd);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.theme-game-ui .game-overlay {
  background: rgba(13, 26, 70, .58);
  inset: 14px;
  border-radius: 20px;
}
.theme-game-ui .overlay-card {
  border: 2px solid #d7e4fa;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 24px 44px rgba(13,26,70,.28);
}
.theme-game-ui .mobile-game-toolbar button,
.theme-game-ui .touch-action,
.theme-game-ui .touch-secondary,
.theme-game-ui .touch-dpad button {
  box-shadow: 0 8px 16px rgba(18,35,93,.22);
}
.theme-game-ui .touch-action {
  background: linear-gradient(180deg, #ffbd42, #f46a22);
  color: #fff7dc;
}
.theme-game-ui .touch-secondary {
  background: linear-gradient(180deg, #4d7aff, #1c41b5);
}
.theme-game-ui .site-footer {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
  border-top: 2px solid #d7e3f8;
  box-shadow: 0 -8px 18px rgba(25, 46, 95, .05);
}

@media (max-width: 1080px) {
  .theme-game-ui .main-nav { background: linear-gradient(180deg, #2241a2, #1b3384); border-bottom-width: 2px; }
  .theme-game-ui .nav-panel { background: rgba(255,255,255,.98); }
}
@media (max-width: 820px) {
  .theme-game-ui .quick-card,
  .theme-game-ui .panel,
  .theme-game-ui .card,
  .theme-game-ui .stat-card,
  .theme-game-ui .mode-card,
  .theme-game-ui .game-stage-wrap,
  .theme-game-ui .overlay-card,
  .theme-game-ui .world-card,
  .theme-game-ui .character-card { border-radius: 18px; }
}
@media (max-width: 580px) {
  .theme-game-ui .hero-main { border-radius: 22px; }
  .theme-game-ui .btn { border-radius: 13px; }
  .theme-game-ui .game-stage-wrap { border-radius: 22px; padding: 8px; }
}