/* ============================================================
   DOTA-2 RESKIN — loaded LAST so it owns the signature look.
   Cool teal-steel HUD panels, antique-gold beveled buttons,
   angular notched corners, teal focus glows. Built on the
   shared HSL tokens (see styles.css :root) so the whole app
   shifts; this file adds the metal/glow treatments on top.
   ============================================================ */

/* ---------- page base: a faint HUD grid + cool vignette ---------- */
body { background:
  radial-gradient(ellipse 90% 70% at 50% -10%, hsl(196 50% 14% / .45), transparent 60%),
  radial-gradient(ellipse 70% 60% at 50% 120%, hsl(40 60% 12% / .25), transparent 60%),
  hsl(var(--background)); }

/* ---------- STEEL PANEL — the liquid-glass primitive, reskinned ---------- */
.liquid-glass {
  background:
    linear-gradient(180deg, hsl(var(--steel-top) / .92), hsl(var(--steel-bot) / .96));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 hsl(var(--bevel-hi) / .22),     /* top metal lip */
    inset 0 0 0 1px hsl(200 30% 40% / .18),        /* hairline frame */
    0 12px 36px rgba(0,0,0,.55);
  border: none; position: relative; overflow: hidden;
}
/* replace the warm gold edge with a teal-steel -> gold raceline */
.liquid-glass::before {
  background: linear-gradient(180deg,
    hsl(var(--accent) / .55) 0%, hsl(200 40% 45% / .12) 26%,
    transparent 46%, transparent 54%,
    hsl(200 40% 45% / .12) 74%, hsl(var(--primary) / .42) 100%);
}

/* ---------- BUTTONS — beveled steel; primary/active goes gold ---------- */
.chip-btn, .tiny-btn {
  background: linear-gradient(180deg, hsl(var(--steel-top)), hsl(var(--steel-bot)));
  color: hsl(var(--foreground));
  box-shadow: inset 0 1px 0 hsl(var(--bevel-hi) / .25), inset 0 0 0 1px hsl(200 28% 34% / .55);
  border: none; transition: filter .15s ease, box-shadow .2s ease, transform .08s ease;
}
.chip-btn:hover, .tiny-btn:hover { filter: brightness(1.18); box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.3), inset 0 0 0 1px hsl(var(--accent)/.5); }
.chip-btn:active, .tiny-btn:active { transform: translateY(1px); }
.chip-btn.on {
  color: hsl(var(--primary-foreground));
  background: linear-gradient(180deg, hsl(var(--primary) / 1), hsl(38 80% 46%));
  box-shadow: inset 0 1px 0 hsl(46 95% 80% / .6), inset 0 0 0 1px hsl(40 80% 60% / .7), 0 0 18px hsl(var(--primary) / .35);
}
.tiny-btn.on { color: hsl(var(--primary)); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.7), inset 0 1px 0 hsl(var(--bevel-hi)/.2); }
.tiny-btn.heal-outline { color: hsl(var(--heal)); box-shadow: inset 0 0 0 1px hsl(var(--heal)/.6) !important; }
.tiny-btn.danger-outline { color: hsl(0 75% 66%); box-shadow: inset 0 0 0 1px hsl(var(--damage)/.55) !important; }

/* primary call-to-action (Create room, Continue, Place bid…) — gold ingot */
.rm-go, .auction-place, .ear-roll, .dice-roll-go {
  background: linear-gradient(180deg, hsl(44 92% 64%), hsl(38 82% 48%)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: inset 0 1px 0 hsl(48 95% 82% / .7), inset 0 0 0 1px hsl(40 80% 55% / .8), 0 6px 20px hsl(var(--primary) / .3) !important;
  border: none !important;
}
.rm-go.ghost { background: linear-gradient(180deg, hsl(var(--steel-top)), hsl(var(--steel-bot))) !important;
  color: hsl(var(--foreground)) !important; box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.25), inset 0 0 0 1px hsl(200 28% 34% / .6) !important; }

/* ---------- INPUTS — inset steel with a teal focus ring ---------- */
.tinput, .rm-input, .code-input input, .bld-select, .asset-name {
  background: hsl(var(--steel-bot) / .85);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px hsl(200 26% 30% / .6);
  border: none !important;
}
.tinput:focus, .rm-input:focus, .code-input input:focus, .bld-select:focus, .asset-name:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px hsl(var(--accent) / .8), 0 0 0 3px hsl(var(--accent) / .18) !important;
}

/* ---------- HEADERS — gold with a teal underline rule ---------- */
.section-label { color: hsl(var(--primary)); position: relative; }
.host-card > .section-label::after,
.camp-head h2::after {
  content: ''; display: block; margin-top: 5px; height: 1px;
  background: linear-gradient(90deg, hsl(var(--accent) / .7), hsl(var(--accent) / 0) 70%);
}

/* ---------- HOST / CAMPAIGN / BUILDER PANELS — steel cards ---------- */
.host-card, .camp-panel, .bld-side, .bld-form-title, .room-form {
  border: none;
}
.host-card { box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.16), inset 0 0 0 1px hsl(200 26% 32% / .35), 0 10px 30px rgba(0,0,0,.45); }
.zone-switch .zone-btn.on {
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(38 80% 46%));
  color: hsl(var(--primary-foreground)); box-shadow: inset 0 1px 0 hsl(46 95% 80% / .6), 0 0 16px hsl(var(--primary)/.3);
}

/* ---------- ENTRY / MAIN-MENU — Dota title plate ---------- */
.room-head h1, .es-wordmark h1, #boot-title {
  color: hsl(44 80% 66%);
  text-shadow: 0 0 26px hsl(var(--primary) / .35), 0 2px 0 rgba(0,0,0,.6);
}
.es-wordmark .es-tag, .room-sub { color: hsl(var(--accent) / .85); letter-spacing: .18em; }

/* ---------- ROOM LANDING — cool HUD + angular path cards ---------- */
.room-scene { background:
  radial-gradient(ellipse 80% 60% at 50% 18%, hsl(196 45% 13%), hsl(206 36% 6%) 68%); }
.room-veil-bg { background: radial-gradient(circle at 50% 28%, hsl(var(--accent) / .12), transparent 60%); }
.room-path {
  background: linear-gradient(180deg, hsl(var(--steel-top) / .92), hsl(var(--steel-bot) / .96));
  border: none;
  box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.2), inset 0 0 0 1px hsl(200 28% 34% / .5), 0 10px 30px rgba(0,0,0,.5);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.room-path:hover {
  box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.3), inset 0 0 0 1px hsl(var(--accent)/.7), 0 16px 44px hsl(var(--accent) / .2);
}
.rp-ico { color: hsl(var(--accent)); background: hsl(var(--accent) / .12);
  box-shadow: inset 0 0 0 1px hsl(var(--accent) / .5), 0 0 18px hsl(var(--accent) / .25); }
.rp-t { color: hsl(44 70% 70%); }

/* lobby code plate — teal-gold HUD readout */
.lobby-code-plate { background: hsl(var(--accent) / .07); border: none;
  box-shadow: inset 0 0 0 1px hsl(var(--accent) / .4), 0 0 24px hsl(var(--accent) / .12); }
.room-code { color: hsl(44 80% 66%); text-shadow: 0 0 28px hsl(var(--primary) / .45); }

/* ---------- MAIN DISPLAY — HUD party dock + scene title ---------- */
.party-card {
  background: linear-gradient(180deg, hsl(var(--steel-top) / .9), hsl(var(--steel-bot) / .95)) !important;
  box-shadow: inset 0 1px 0 hsl(var(--bevel-hi)/.2), inset 0 0 0 1px hsl(200 28% 34% / .5), 0 8px 24px rgba(0,0,0,.5) !important;
  clip-path: polygon(0 9px, 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.pc-hp-track { box-shadow: inset 0 0 0 1px hsl(200 26% 30% / .6); }
.scene-name.display { color: hsl(44 70% 68%); text-shadow: 0 0 22px hsl(var(--primary) / .3), 0 2px 6px #000; }
.scene-name .sub { color: hsl(var(--accent) / .8); }

/* ---------- net pill + account chip — HUD chips ---------- */
.net-pill { background: linear-gradient(180deg, hsl(var(--steel-top)), hsl(var(--steel-bot))) !important;
  box-shadow: inset 0 0 0 1px hsl(200 28% 34% / .6) !important; color: hsl(var(--foreground)); }
.net-pill.net-online .net-dot { background: hsl(var(--accent)); box-shadow: 0 0 8px hsl(var(--accent)); }

/* keep reduced-motion + low-perf happy: clips are static, no animation added */