/* ============================================================
   DOTA МОНОПОЛИЯ — стили (часть 1: основы, экраны, фишки)
   ============================================================ */
:root {
  --bg: #07090f;
  --bg2: #0c1018;
  --panel: #11151f;
  --panel2: #161b27;
  --line: #242b3a;
  --gold-dark: #8B6914;
  --gold: #C9A227;
  --gold-bright: #E8C84A;
  --gold-hi: #F5E070;
  --gold-deep: #8B6914;
  --gold-line: rgba(180,140,60,.3);
  --txt: #d8d2c4;
  --txt-dim: #8b8475;
  --ui-panel: rgba(20,15,10,.75);
  --ui-border: rgba(255,255,255,.12);
  --ui-border-soft: rgba(255,255,255,.08);
  --font-h: 'Oswald', 'PT Sans Narrow', system-ui, sans-serif;
  --font-b: 'Rubik', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: url("assets/bg-arena.png") center/cover no-repeat fixed, var(--bg);
  color: var(--txt);
  font-family: var(--font-b);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 0; pointer-events: none; }
#root { height: 100vh; min-width: 1280px; position: relative; z-index: 1; }
button { font-family: var(--font-b); cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: var(--font-b); }
img { display: block; }

.screen {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(20,27,44,.45) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(21,17,10,.45) 0%, transparent 55%);
}
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0,0,0,.7) 100%); }

/* particles */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particles span {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), transparent 70%);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: .8; }
  90% { opacity: .6; }
  100% { transform: translateY(-105vh) scale(.4); opacity: 0; }
}

/* logo */
.logo { text-align: center; user-select: none; }
.logo-kicker { font-family: var(--font-h); letter-spacing: .55em; color: var(--gold); font-size: 15px; margin-right: -.55em; }
.logo-main { font-family: var(--font-h); font-weight: 700; color: #f4ecd6; line-height: .95; text-shadow: 0 2px 0 #000; }
.logo-main span { color: var(--gold); }
.logo-lg .logo-main { font-size: 58px; letter-spacing: .03em; }
.logo-lg .logo-kicker { font-size: 17px; }

/* buttons */
.btn-gold {
  font-family: var(--font-h); font-weight: 600; letter-spacing: .15em;
  color: #f4e7c0; padding: 14px 26px; width: 100%; font-size: 16px;
  background: linear-gradient(180deg, #9a7619, var(--gold-dark) 60%, #6f5310);
  border: 1px solid var(--gold); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,210,80,.18), inset 0 -2px 6px rgba(0,0,0,.35);
  transition: filter .2s ease, border-color .2s ease; text-transform: uppercase;
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.12); border-color: var(--gold-bright); }
.btn-gold:disabled { opacity: .5; cursor: default; filter: grayscale(.4); }

/* ---------- LOGIN ---------- */
.login-card {
  position: relative; z-index: 2; width: 420px; padding: 38px 34px 28px;
  background: linear-gradient(180deg, rgba(22,27,39,.82), rgba(12,16,24,.86));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-top: 2px solid var(--gold);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 16px;
}
.login-card .logo { margin-bottom: 6px; }
.login-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.login-tabs button { flex: 1; padding: 10px; font-family: var(--font-h); letter-spacing: .06em; color: var(--txt-dim); border-bottom: 2px solid transparent; font-size: 14px; }
.login-tabs button.on { color: var(--gold); border-color: var(--gold); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-dim); font-weight: 600; }
.field input {
  background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--txt);
  padding: 11px 13px; font-size: 16px; border-radius: 3px; transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,168,75,.12); }
.form-err { color: #e0564f; font-size: 13px; font-weight: 600; }
.login-foot { text-align: center; color: var(--txt-dim); font-size: 12px; letter-spacing: .12em; opacity: .7; }

/* token picker */
.token-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-opt {
  --tc: var(--gold);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 4px; transition: all .18s; text-align: center;
}
.tp-opt:hover { border-color: var(--tc); background: rgba(255,255,255,.03); }
.tp-opt.on { border-color: var(--tc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent), 0 8px 20px rgba(0,0,0,.4); background: color-mix(in srgb, var(--tc) 10%, transparent); }
.tp-art { height: 56px; display: flex; align-items: flex-end; }
.tp-name { font-family: var(--font-h); font-size: 13px; color: #e7e0cf; }
.tp-ab { font-size: 10.5px; color: var(--txt-dim); line-height: 1.2; }

/* ---------- MENU ---------- */
.player-chip { position: absolute; top: 22px; right: 26px; z-index: 3; display: flex; align-items: center; gap: 10px;
  background: rgba(17,21,31,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); padding: 7px 16px 7px 8px; border-radius: 40px; }
.player-chip span { font-family: var(--font-h); color: var(--gold); font-size: 15px; }
.menu-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.menu-actions { display: flex; flex-direction: column; gap: 14px; width: 440px; }
.menu-btn { text-align: left; padding: 18px 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(22,27,39,.78), rgba(12,16,24,.82)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 4px; transition: all .2s ease; display: flex; flex-direction: column; gap: 4px; }
.menu-btn:hover { border-color: var(--gold); transform: translateX(4px); }
.menu-btn .mb-title { font-family: var(--font-h); font-size: 19px; color: #f0e8d4; }
.menu-btn .mb-sub { font-size: 13px; color: var(--txt-dim); letter-spacing: .04em; }
.menu-btn.primary { border-color: var(--gold-deep); border-left: 3px solid var(--gold); }
.menu-btn.primary .mb-title { color: var(--gold-bright); }
.menu-btn.ghost { opacity: .82; }
.join-row { display: flex; gap: 8px; margin-top: 8px; }
.join-row input { flex: 1; background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--gold-bright); font-family: var(--font-h); letter-spacing: .3em; font-size: 17px; padding: 9px 14px; border-radius: 3px; text-transform: uppercase; }
.join-row input:focus { outline: none; border-color: var(--gold); }
.join-row button { padding: 0 22px; background: linear-gradient(180deg,#9a7619,var(--gold-dark)); color: #f4e7c0; border: 1px solid var(--gold); font-family: var(--font-h); font-weight: 600; border-radius: 3px; }
.join-row button:disabled { opacity: .4; }

/* ---------- LOBBY ---------- */
.lobby-exit { position: absolute; top: 22px; left: 26px; z-index: 3; color: var(--txt-dim); font-size: 15px; letter-spacing: .08em; }
.lobby-exit:hover { color: var(--gold); }
.lobby-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; width: 760px; }
.lobby-code { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.lc-label { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--txt-dim); }
.lc-val { font-family: var(--font-h); font-weight: 700; font-size: 56px; color: var(--gold-bright); letter-spacing: .16em; }
.lc-hint { font-size: 13px; color: var(--txt-dim); }
.lobby-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; }
.slot { --sc: var(--gold); position: relative; height: 200px; border: 1px solid var(--line); border-top: 2px solid var(--sc); background: linear-gradient(180deg, rgba(17,21,31,.78), rgba(12,16,24,.82)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.slot.empty { border-style: dashed; border-color: var(--line); background: rgba(255,255,255,.015); }
.slot-ava { height: 60px; display: flex; align-items: flex-end; }
.slot-name { font-family: var(--font-h); font-size: 16px; color: #f0e8d4; }
.slot-name em { color: var(--gold); font-style: normal; font-size: 12px; }
.slot-tok { font-size: 12px; color: var(--txt-dim); }
.slot-ready { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-dim); padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; margin-top: 4px; }
.slot-ready.on { color: #6fd06f; border-color: rgba(111,208,111,.4); }
.slot-roll { display: flex; align-items: center; gap: 6px; font-family: var(--font-h); font-size: 20px; color: var(--gold-bright); }
.slot-wait { color: var(--txt-dim); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slot-wait span { font-size: 30px; opacity: .5; }
.lobby-order { text-align: center; }
.lo-label { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-dim); }
.lo-list { display: flex; gap: 18px; justify-content: center; margin-top: 8px; }
.lo-item { font-family: var(--font-h); color: var(--txt); }
.lo-item b { color: var(--gold); }
.lo-item i { color: var(--txt-dim); font-style: normal; font-size: 12px; }
.lobby-controls { width: 360px; }
.lobby-hint { text-align: center; font-size: 13px; color: var(--txt-dim); letter-spacing: .08em; padding: 12px 0; }
.lobby-pick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-label { font-family: var(--font-h); font-size: 14px; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
.lobby-waiting { font-size: 14px; color: var(--txt-dim); padding: 10px 0; }
.lobby-waiting b { color: var(--gold-bright); }
.lo-current { color: var(--gold-bright) !important; }
.lo-current b { text-shadow: 0 0 8px rgba(232,200,74,.5); }
.slot-notoken { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--txt-dim); }
.slot-roll.is-rolling { animation: rollPulse .09s ease infinite; }
@keyframes rollPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.tp-taken { opacity: .35 !important; cursor: not-allowed !important; filter: grayscale(.6); }
.tp-taken:hover { border-color: var(--line) !important; background: rgba(0,0,0,.3) !important; }

/* fades shared */
.fade-in { animation: fadeIn .4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   GAME HUB
   ============================================================ */
.hub-screen { flex-direction: column; }
.hub-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 52px; }

.hub-brand { text-align: center; user-select: none; }
.hub-kicker { font-family: var(--font-h); letter-spacing: .5em; color: var(--gold); font-size: 13px; margin-right: -.5em; }
.hub-title {
  font-family: var(--font-h); font-weight: 700; font-size: 76px; color: #f4ecd6;
  letter-spacing: .05em; line-height: 1;
  text-shadow: 0 2px 0 #000, 0 0 60px rgba(201,162,39,.18);
}
.hub-tagline { color: var(--txt-dim); font-size: 14px; margin-top: 8px; letter-spacing: .14em; }

.hub-grid { display: grid; grid-template-columns: repeat(2, 320px); gap: 22px; }

.game-card {
  --gc-accent: var(--gold);
  position: relative; overflow: hidden;
  padding: 28px 26px 22px;
  border-radius: 6px; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(160deg, rgba(22,27,39,.85) 0%, rgba(12,16,24,.9) 100%);
  border: 1px solid var(--line); border-top: 3px solid var(--gc-accent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.game-card.gc-active { cursor: pointer; }
.game-card.gc-active:hover {
  transform: translateY(-5px);
  border-color: var(--gc-accent);
  box-shadow: 0 28px 70px rgba(0,0,0,.65), 0 0 40px color-mix(in srgb, var(--gc-accent) 12%, transparent);
}
.game-card.gc-soon { cursor: default; opacity: .58; filter: grayscale(.25); }

.gc-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -5%, color-mix(in srgb, var(--gc-accent) 10%, transparent) 0%, transparent 60%);
}

.gc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.gc-icon { flex-shrink: 0; }

.gc-badge {
  font-family: var(--font-h); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-dim); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  padding: 4px 11px; border-radius: 20px; white-space: nowrap; align-self: flex-start;
}

.gc-body { flex: 1; }
.gc-title { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: var(--gc-accent); letter-spacing: .07em; }
.gc-sub { font-size: 13px; color: var(--txt); margin-top: 4px; }
.gc-desc { font-size: 12px; color: var(--txt-dim); margin-top: 6px; letter-spacing: .04em; line-height: 1.5; }

.gc-cta { font-family: var(--font-h); font-size: 13px; color: var(--gc-accent); letter-spacing: .14em; opacity: .85; }
.game-card.gc-active:hover .gc-cta { opacity: 1; }

/* ---------- SOON PAGE ---------- */
.soon-page {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.soon-icon { margin-bottom: 4px; }
.soon-title { font-family: var(--font-h); font-size: 48px; font-weight: 700; color: #5b8eb5; letter-spacing: .08em; }
.soon-text { color: var(--txt-dim); font-size: 15px; max-width: 360px; line-height: 1.6; }
.soon-page .btn-gold { margin-top: 8px; }