:root {
  --blue: #208cff;
  --blue-deep: #126ee8;
  --coral: #ff755f;
  --pink: #ff5f7f;
  --aqua: #1fc9b2;
  --yellow: #ffd43b;
  --ink: #172743;
  --muted: #65728b;
  --glass: rgba(255,255,255,.84);
  --glass-strong: rgba(255,255,255,.92);
  --shadow: 0 24px 70px rgba(20,47,79,.22);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body {
  min-height:100svh;
  overflow-x:hidden;
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:#10223c;
}
button { font: inherit; }
button:focus-visible { outline: 4px solid rgba(255,212,59,.9); outline-offset:3px; }

.backgrounds, .bg, .bg-shade { position:fixed; inset:0; }
.backgrounds { z-index:-2; overflow:hidden; background:#10223c; }
.bg {
  opacity:0;
  background-position:center;
  background-size:cover;
  transform:scale(1.015);
  transition:opacity 1800ms ease-in-out, transform 14s ease-out;
  will-change:opacity;
}
.bg-day { background-image:url('/assets/backgrounds/day.webp'); }
.bg-sunset { background-image:url('/assets/backgrounds/sunset.webp'); }
.bg-night { background-image:url('/assets/backgrounds/night.webp'); }
body[data-period="day"] .bg-day,
body[data-period="sunset"] .bg-sunset,
body[data-period="night"] .bg-night { opacity:1; transform:scale(1); }
.bg-shade {
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(15,31,55,.12) 0%, rgba(15,31,55,0) 58%, rgba(15,31,55,.08) 100%),
             linear-gradient(0deg, rgba(15,31,55,.22) 0%, transparent 42%);
}
body[data-period="night"] .bg-shade { background:linear-gradient(90deg,rgba(4,14,30,.30),rgba(4,14,30,.03) 62%),linear-gradient(0deg,rgba(4,14,30,.30),transparent 45%); }

.shell {
  width:min(1460px, calc(100% - 48px));
  min-height:100svh;
  margin:0 auto;
  padding:36px 0 22px;
  display:flex;
  flex-direction:column;
}
.brand { display:flex; align-items:center; gap:14px; width:max-content; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.23); }
.brand-mark { width:58px; height:58px; border-radius:19px; background:rgba(255,255,255,.96); box-shadow:0 12px 34px rgba(0,0,0,.14); display:grid; place-items:center; position:relative; overflow:hidden; }
.brand-mark::before { content:""; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--blue),#6b5cff); }
.brand-mark span:first-child { position:absolute; width:20px; height:20px; border-radius:50%; right:7px; top:7px; background:var(--yellow); border:4px solid white; }
.brand-mark span:last-child { position:absolute; width:14px; height:14px; border-radius:50%; left:8px; bottom:8px; background:var(--pink); border:3px solid white; }
.brand h1 { margin:0; font-size:clamp(2.4rem,4.5vw,4.2rem); line-height:.86; letter-spacing:.055em; font-weight:900; }
.brand p { margin:10px 2px 0; font-size:1.02rem; font-weight:650; letter-spacing:.08em; }

.layout { flex:1; display:grid; grid-template-columns:minmax(560px, 760px) minmax(300px, 370px); justify-content:space-between; align-items:center; gap:40px; padding:30px 0 24px; }
.glass {
  background:var(--glass);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.menu-card { border-radius:var(--radius-xl); padding:34px; }
.welcome-row { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:24px; }
.eyebrow { margin:0 0 6px; color:#4b6181; font-size:.77rem; font-weight:900; letter-spacing:.24em; }
.menu-card h2 { margin:0; font-size:clamp(2.1rem,4.4vw,3.45rem); line-height:1; letter-spacing:-.045em; }
.accent-line { width:64px; height:7px; margin-top:14px; border-radius:999px; background:var(--yellow); transform:rotate(-3deg); }
.ready-badge { margin-top:8px; display:flex; align-items:center; gap:8px; white-space:nowrap; padding:10px 14px; border-radius:999px; color:#08745e; background:rgba(190,247,232,.82); font-size:.84rem; font-weight:850; }
.pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 rgba(31,201,178,.4); animation:pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(31,201,178,0); } 100% { box-shadow:0 0 0 0 rgba(31,201,178,0); } }

.primary-action { width:100%; border:0; border-radius:20px; color:white; min-height:92px; padding:17px 19px; display:grid; grid-template-columns:50px 1fr auto; gap:13px; align-items:center; text-align:left; cursor:pointer; background:linear-gradient(115deg,var(--blue-deep),#29a8ff 68%,#46b8ff); box-shadow:0 14px 28px rgba(16,112,232,.28); transition:.18s ease; position:relative; overflow:hidden; }
.primary-action::after { content:""; position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.22); border-radius:50%; right:-60px; top:-92px; }
.primary-action:hover { transform:translateY(-2px); box-shadow:0 18px 34px rgba(16,112,232,.33); }
.play-icon { width:46px; height:46px; display:grid; place-items:center; background:white; color:var(--blue); border-radius:50%; font-size:1.15rem; padding-left:3px; }
.primary-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.primary-copy strong { font-size:clamp(1rem,2vw,1.25rem); letter-spacing:.025em; }
.primary-copy small { opacity:.82; font-weight:600; }
.arrow { font-size:2.4rem; opacity:.8; }

.menu-list { display:grid; gap:11px; margin-top:14px; }
.menu-item { width:100%; border:1px solid rgba(21,45,77,.07); min-height:73px; border-radius:18px; background:rgba(255,255,255,.88); color:var(--ink); box-shadow:0 7px 18px rgba(29,55,86,.08); display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center; padding:11px 17px; text-align:left; cursor:pointer; transition:.18s ease; }
.menu-item:hover { transform:translateX(4px); background:#fff; }
.menu-item > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; min-width:0; }
.menu-item strong { font-size:1rem; }
.menu-item small { color:var(--muted); font-weight:560; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.round-icon { width:44px; height:44px; border-radius:50%; color:white; display:grid; place-items:center; font-size:1.45rem; font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.round-icon.coral { background:var(--coral); }
.round-icon.pink { background:var(--pink); }
.round-icon.aqua { background:var(--aqua); }
.chevron { font-size:2rem; color:#335170; }
.secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.secondary-actions button { min-height:54px; border:1px solid rgba(21,45,77,.08); background:rgba(248,251,255,.88); color:#365271; border-radius:16px; cursor:pointer; font-weight:800; transition:.18s ease; }
.secondary-actions button:hover { background:#fff; transform:translateY(-1px); }

.life-card { border-radius:26px; overflow:hidden; align-self:start; margin-top:22px; }
.life-card-title { padding:21px 22px 15px; font-size:.8rem; font-weight:950; letter-spacing:.19em; border-bottom:1px solid rgba(31,58,91,.09); }
.heart { color:var(--pink); font-size:1.05rem; margin-right:7px; }
.players { padding:8px 19px 6px; }
.player-row { display:grid; grid-template-columns:46px 1fr auto; gap:11px; align-items:center; min-height:67px; border-bottom:1px solid rgba(31,58,91,.07); }
.player-row:last-child { border-bottom:0; }
.player-row.muted { opacity:.78; }
.avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:white; font-weight:900; box-shadow:0 7px 16px rgba(30,70,120,.15); }
.avatar.blue { background:var(--blue); }
.avatar.coral-bg { background:var(--coral); }
.player-main { display:flex; flex-direction:column; gap:2px; }
.player-main small { font-size:.72rem; color:var(--muted); font-weight:650; }
.status { font-size:.72rem; color:#159b7d; font-weight:850; display:flex; gap:5px; align-items:center; }
.status i { width:8px; height:8px; border-radius:50%; background:var(--aqua); }
.status.waiting { color:#77859b; }
.status.waiting i { background:#a3adbb; }
.world-info { padding:13px 21px 10px; border-top:1px solid rgba(31,58,91,.08); }
.world-info > div { display:grid; grid-template-columns:27px 1fr; align-items:center; min-height:50px; color:#2f5275; }
.world-info > div > span { font-size:1.15rem; }
.world-info p { margin:0; display:flex; flex-direction:column; gap:1px; }
.world-info small { color:var(--muted); font-size:.69rem; font-weight:700; }
.world-info strong { font-size:.9rem; }
.message-preview { margin:8px 16px 16px; width:calc(100% - 32px); min-height:70px; border:0; border-radius:16px; display:grid; grid-template-columns:37px 1fr auto; gap:8px; align-items:center; text-align:left; background:rgba(218,239,255,.86); color:#21496f; cursor:pointer; padding:9px 12px; }
.message-preview > span:nth-child(2) { display:flex; flex-direction:column; gap:1px; min-width:0; }
.message-preview small { font-size:.67rem; color:#6685a2; font-weight:750; }
.message-preview strong { font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubble { width:34px; height:34px; display:grid; place-items:center; background:#fff; border-radius:10px; }

.footer-line { color:white; text-shadow:0 1px 10px rgba(0,0,0,.35); font-weight:650; display:flex; gap:8px; align-items:center; font-size:.78rem; letter-spacing:.02em; min-height:24px; }
.separator { opacity:.65; }

.app-dialog { border:0; padding:0; background:transparent; max-width:min(92vw,440px); }
.app-dialog::backdrop { background:rgba(10,20,36,.52); backdrop-filter:blur(5px); }
.dialog-card { position:relative; margin:0; padding:32px; text-align:center; border-radius:26px; background:rgba(255,255,255,.97); box-shadow:0 30px 90px rgba(0,0,0,.35); color:var(--ink); }
.dialog-close { position:absolute; right:13px; top:10px; border:0; background:transparent; color:#68778d; font-size:1.75rem; cursor:pointer; }
.dialog-icon { width:58px; height:58px; margin:0 auto 16px; border-radius:19px; display:grid; place-items:center; color:white; font-size:1.55rem; background:linear-gradient(135deg,var(--blue),#6a5dff); }
.dialog-card h3 { margin:4px 0 8px; font-size:1.65rem; }
.dialog-card > p:not(.eyebrow) { margin:0 auto 20px; color:var(--muted); line-height:1.55; }
.dialog-ok { border:0; min-width:140px; min-height:46px; border-radius:14px; color:white; background:var(--blue); font-weight:850; cursor:pointer; }

@media (max-width: 980px) {
  .shell { width:min(100% - 30px,760px); padding-top:23px; }
  .brand-mark { width:50px; height:50px; border-radius:16px; }
  .layout { grid-template-columns:1fr; align-items:start; gap:17px; padding:24px 0 20px; }
  .life-card { margin:0; order:-1; }
  .players { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .player-row { border:0; min-width:0; grid-template-columns:42px 1fr; }
  .player-row .status { grid-column:2; margin-top:-17px; }
  .world-info { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
  .world-info > div { grid-template-columns:24px 1fr; }
  .message-preview { display:none; }
}

@media (max-width: 620px) {
  :root { --radius-xl:24px; }
  body { min-height:100dvh; }
  .shell { width:calc(100% - 20px); padding:15px 0 max(14px, env(safe-area-inset-bottom)); }
  .brand { gap:10px; }
  .brand h1 { font-size:2.15rem; }
  .brand p { font-size:.78rem; margin-top:6px; }
  .brand-mark { width:44px; height:44px; border-radius:14px; }
  .brand-mark::before { width:26px; height:26px; }
  .layout { padding:15px 0 12px; }
  .life-card { display:none; }
  .menu-card { padding:20px; border-radius:24px; }
  .welcome-row { margin-bottom:18px; }
  .menu-card h2 { font-size:2.12rem; }
  .ready-badge { font-size:.72rem; padding:8px 10px; }
  .primary-action { min-height:79px; grid-template-columns:42px 1fr auto; padding:13px 14px; }
  .play-icon { width:39px; height:39px; }
  .primary-copy small { display:none; }
  .menu-item { min-height:65px; grid-template-columns:42px 1fr auto; padding:9px 12px; }
  .round-icon { width:39px; height:39px; font-size:1.2rem; }
  .menu-item small { display:none; }
  .secondary-actions { gap:9px; }
  .secondary-actions button { min-height:49px; font-size:.82rem; }
  .footer-line { justify-content:center; flex-wrap:wrap; text-align:center; font-size:.68rem; }
  .bg { background-position:center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}