/* ═══════════════════════════════════════════════════════════════
   ARNOW CASINO — HUD SKIN
   emerald-teal · mahogany · brushed gold · ivory
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gold: #d4af37;
  --gold-hi: #ffe08a;
  --emerald: #0b5d4b;
  --emerald-deep: #073a30;
  --mahogany: #3b1c10;
  --ivory: #f5f0e6;
  --obsidian: #141414;
  --serif: 'Cinzel', Georgia, serif;
  --serif-body: 'Cormorant Garamond', Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #060505; }
#gl { position: fixed; inset: 0; display: block; }

.hidden { display: none !important; }

/* ── Cutscene overlay ── */
/* Two stacked layers so a clip change is a dissolve, never a black frame.
   Never interactive: the overlay covers the whole viewport, so pointer-events
   here would swallow every felt click. Skipping is a dedicated button. */
#cutscene, #cutscene-b {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 40; pointer-events: none;
  background: #000;
}
#btn-skip-veo {
  position: fixed; right: 26px; bottom: 26px; z-index: 45;
  pointer-events: auto; cursor: pointer;
  font-family: var(--serif); font-size: 11px; letter-spacing: .16em;
  color: var(--gold-hi); background: rgba(6,10,9,.62);
  border: 1px solid rgba(212,175,55,.55); border-radius: 999px;
  padding: 10px 20px; backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
#btn-skip-veo:hover { background: rgba(20,32,28,.85); border-color: var(--gold); }

/* ═══════════ HUD LAYOUT ═══════════ */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-family: var(--serif); }
#hud button, #hud .clickable { pointer-events: auto; }

/* Top-left */
#hud-top-left { position: absolute; top: 14px; left: 14px; display: flex; align-items: flex-start; gap: 12px; }
#dealer-badge {
  width: 92px; text-align: center; color: var(--gold-hi); font-size: 9px; letter-spacing: .06em;
}
#dealer-badge img {
  width: 86px; height: 86px; object-fit: cover; border-radius: 14px;
  border: 2px solid var(--gold); box-shadow: 0 4px 18px rgba(0,0,0,.6);
  background: radial-gradient(circle at 50% 40%, #123c33, #06201b);
}
#dealer-name { margin-top: 4px; }

#balance-plaque {
  width: 300px; height: 200px; background-size: 100% 100%; background-repeat: no-repeat;
  position: relative; filter: drop-shadow(0 6px 16px rgba(0,0,0,.55));
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 26px;
}
#balance-amount {
  font-size: 34px; font-weight: 900; color: var(--gold-hi);
  text-shadow: 0 2px 0 #5c4711, 0 0 18px rgba(255,224,138,.35);
  font-family: var(--serif);
}

/* Top-right */
#hud-top-right { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
#winning-plaque, #results-plaque {
  width: 280px; height: 190px; background-size: 100% 100%; background-repeat: no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)); position: relative; padding-top: 26px;
}
.plaque-title {
  position: absolute; top: 58px; font-size: 11px; letter-spacing: .18em;
  color: #8fd8c8; font-weight: 700;
}
#winning-number {
  font-size: 44px; font-weight: 900; color: var(--gold-hi); margin-top: 26px;
  text-shadow: 0 2px 0 #5c4711, 0 0 20px rgba(255,224,138,.4);
}
#winning-number[data-color="red"]   { color: #ff5a63; text-shadow: 0 0 20px rgba(255,60,70,.5); }
#winning-number[data-color="black"] { color: #e8e8e8; }
#winning-number[data-color="green"] { color: #3ddc97; }
#recent-results { display: flex; gap: 8px; margin-top: 30px; }
.result-slot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--gold); background: #0d352c;
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.result-slot[data-color="red"] { background: #b3121c; }
.result-slot[data-color="black"] { background: #171717; }
.result-slot[data-color="green"] { background: #0b6e4f; }

.hud-icon-btn {
  font-family: var(--serif); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  color: var(--gold-hi); background: linear-gradient(180deg, #123c33, #08251f);
  border: 1px solid var(--gold); border-radius: 20px; padding: 7px 14px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,224,138,.25);
}
.hud-icon-btn:hover { background: linear-gradient(180deg, #17493d, #0a2f28); }

/* Phase banner (top-center) */
#phase-banner-wrap { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
#phase-banner { height: 128px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.65)); animation: bannerIn .5s ease; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-16px) scale(.94); } to { opacity: 1; } }

/* Outcome banner (center) */
#outcome-banner-wrap {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
#outcome-banner { height: 230px; filter: drop-shadow(0 10px 34px rgba(0,0,0,.75)); animation: bannerPop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes bannerPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Callout pill */
#callout-wrap { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); pointer-events: none; }
#callout {
  width: 460px; height: 74px; background-size: 100% 100%; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-hi); font-weight: 700; font-size: 19px; letter-spacing: .1em;
  text-shadow: 0 2px 0 #4a3808, 0 0 16px rgba(255,224,138,.4);
  animation: bannerIn .4s ease;
}

/* Tooltip */
#bet-tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,48,40,.97), rgba(4,28,23,.97));
  border: 1px solid var(--gold); border-radius: 10px;
  padding: 10px 16px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,.7);
}
#tooltip-name { color: var(--gold-hi); font-weight: 700; font-size: 15px; letter-spacing: .08em; }
#tooltip-odds { color: #fff; font-size: 13px; margin: 2px 0; }
#tooltip-nums { color: #9fdccf; font-size: 12px; font-family: var(--serif-body); }

/* Lock badge */
#lock-badge {
  position: absolute; top: 150px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(120, 12, 12, .85); border: 1px solid #ff5a63;
  border-radius: 22px; padding: 6px 16px 6px 6px;
  color: #ffd9db; font-weight: 700; font-size: 12px; letter-spacing: .14em;
  box-shadow: 0 4px 18px rgba(0,0,0,.6); animation: bannerIn .4s ease;
}
#lock-badge img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* Chip rack (left) */
#chip-rack {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.chip-btn {
  pointer-events: auto; width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid rgba(212,175,55,.35); background: #08251f;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  display: flex; align-items: center; justify-content: center;
}
.chip-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chip-btn.no-img { background: radial-gradient(circle, var(--chip-color) 55%, #000 56%); }
.chip-btn.no-img::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 3px dashed #f5f0e6; opacity: .8;
}
.chip-btn span {
  position: absolute; color: #fff; font-weight: 900; font-size: 14px;
  text-shadow: 0 1px 3px #000;
}
.chip-btn:hover { transform: translateY(-3px) scale(1.05); }
.chip-btn.selected {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(255,224,138,.35), 0 0 24px rgba(255,224,138,.5);
  transform: translateY(-3px) scale(1.08);
}

/* Action bar (bottom) */
#action-bar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 15px;
  background: linear-gradient(180deg, rgba(7,34,28,.9), rgba(3,17,14,.95));
  border: 1px solid rgba(212,175,55,.55); border-radius: 18px;
  padding: 9px 20px; box-shadow: 0 14px 40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,224,150,.14);
}
#total-bet-badge {
  color: #9fdccf; font-size: 12px; letter-spacing: .1em; font-weight: 700;
  padding-right: 6px; border-right: 1px solid rgba(212,175,55,.35);
}
#total-bet { color: var(--gold-hi); font-size: 16px; }
.action-btn {
  pointer-events: auto; border: none; background: none; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.action-btn img { height: 56px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.action-btn:hover { transform: translateY(-3px); filter: brightness(1.12); }
/* the one action that matters: bigger, warmer, and lit when it is live */
.action-btn.spin {
  padding: 2px 26px; border-radius: 999px; margin-left: 4px;
  background: linear-gradient(180deg, #ffeaa6 0%, #e6c258 46%, #b8902a 100%);
  border: 1px solid rgba(255,246,208,.9);
  box-shadow: 0 12px 30px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, filter .25s;
}
.action-btn.spin img { height: 76px; filter: drop-shadow(0 6px 14px rgba(60,40,0,.5)); }
.action-btn.spin:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.85); }
.action-btn.spin.disabled {
  background: linear-gradient(180deg, rgba(24,48,40,.95), rgba(10,26,21,.95));
  border-color: rgba(212,175,55,.35); box-shadow: none; filter: none;
}
.action-btn.spin.disabled img { filter: grayscale(.85) brightness(.6); }
.action-btn.disabled { filter: grayscale(.9) brightness(.55); pointer-events: none; transform: none; }

/* HUD utils (top, under right plaques) */
#hud-utils { position: absolute; top: 420px; right: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ═══════════ MODALS ═══════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2, 10, 8, .72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, #0a3630, #06231d);
  border: 2px solid var(--gold); border-radius: 20px;
  padding: 28px 34px; min-width: 420px; max-width: 640px;
  color: var(--ivory); font-family: var(--serif);
  box-shadow: 0 24px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,224,138,.3);
  text-align: center; position: relative;
}
.modal-card h2 { color: var(--gold-hi); letter-spacing: .14em; margin-bottom: 14px; font-size: 22px; }
.modal-head { display: flex; align-items: center; gap: 14px; justify-content: center; }
.modal-head img { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; }
.modal-note { color: #9fdccf; font-size: 13px; margin-bottom: 10px; font-family: var(--serif-body); }
.modal-bank { color: var(--gold-hi); font-size: 16px; letter-spacing: .08em; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.gold-btn {
  font-family: var(--serif); font-weight: 700; letter-spacing: .08em;
  background: linear-gradient(180deg, #ffe08a, #d4af37); color: #3a2c07;
  border: 1px solid #8a6a14; border-radius: 12px; padding: 10px 20px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 #fff7;
}
.gold-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ghost-btn {
  font-family: var(--serif); font-weight: 700; letter-spacing: .08em;
  background: transparent; color: var(--gold-hi);
  border: 1px solid rgba(212,175,55,.6); border-radius: 12px; padding: 10px 20px; cursor: pointer;
}
.ghost-btn:hover { background: rgba(212,175,55,.12); }
.modal-prop { width: 220px; margin-top: 16px; opacity: .9; border-radius: 12px; }
.dealer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.dealer-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(212,175,55,.4);
  border-radius: 14px; padding: 10px; cursor: pointer; color: var(--ivory);
  font-size: 11px; display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: transform .12s ease, border-color .12s;
}
.dealer-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.dealer-card:hover { transform: translateY(-3px); border-color: var(--gold-hi); }
.rule-row { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; text-align: left; color: #cfe8e0; font-size: 13px; }
.rule-row select {
  background: #08251f; color: var(--gold-hi); border: 1px solid rgba(212,175,55,.5);
  border-radius: 8px; padding: 8px 10px; font-family: var(--serif);
}

/* Cast badge toast */
.cast-badge {
  position: fixed; bottom: 110px; right: 18px; z-index: 45;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(10,54,48,.95), rgba(6,35,29,.95));
  border: 1px solid var(--gold); border-radius: 14px; padding: 8px 16px 8px 8px;
  color: var(--gold-hi); font-family: var(--serif); font-size: 12px; letter-spacing: .06em;
  opacity: 0; transform: translateX(30px); transition: all .4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
.cast-badge.show { opacity: 1; transform: translateX(0); }
.cast-badge img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid var(--gold); }

/* ═══════════ LANDING — VIP SALON ═══════════
   The 3D room keeps rendering behind this layer and the camera keeps drifting,
   so the landing is a lit set rather than a still: chandelier bloom overhead,
   emerald wash, brass hairline frame, mahogany rim at the foot, host in the
   light. Entrance animates opacity/focus only — never transform — because the
   host and logo panel are moved by pointer parallax from JS. */
#title-screen {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  font-family: var(--serif); cursor: default;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1);
}
#title-screen.gone { opacity: 0; pointer-events: none; }

.title-grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(78% 46% at 50% -6%, rgba(255,201,104,.26), rgba(255,170,60,.06) 42%, transparent 70%),
    radial-gradient(46% 54% at 52% 56%, rgba(2,9,7,.62), transparent 76%),
    radial-gradient(40% 32% at 5% 3%, rgba(2,8,6,.72), transparent 72%),
    radial-gradient(120% 80% at 50% 46%, rgba(9,60,45,.30), transparent 68%),
    linear-gradient(180deg, rgba(4,13,10,.86) 0%, rgba(4,13,10,.34) 30%, rgba(3,11,8,.55) 58%, rgba(2,7,5,.94) 100%);
}

/* chandelier bokeh — few, large, slow: light, not sparkle */
.title-bokeh { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.title-bokeh span {
  position: absolute; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, rgba(255,224,158,.85), rgba(255,183,84,.22) 42%, transparent 72%);
  filter: blur(3px); animation: bokehDrift 24s ease-in-out infinite;
}
.title-bokeh span:nth-child(1) { width: 190px; height: 190px; top: 4%;  left: 6%;   animation-delay: 0s; }
.title-bokeh span:nth-child(2) { width: 120px; height: 120px; top: 12%; right: 9%;  animation-delay: -6s;  opacity: .4; }
.title-bokeh span:nth-child(3) { width: 78px;  height: 78px;  top: 34%; left: 16%;  animation-delay: -11s; opacity: .3; }
.title-bokeh span:nth-child(4) { width: 150px; height: 150px; top: 26%; right: 22%; animation-delay: -15s; opacity: .34; }
.title-bokeh span:nth-child(5) { width: 62px;  height: 62px;  top: 8%;  left: 44%;  animation-delay: -3s;  opacity: .28; }
.title-bokeh span:nth-child(6) { width: 96px;  height: 96px;  top: 48%; right: 4%;  animation-delay: -19s; opacity: .22; }
@keyframes bokehDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(14px,-10px,0) scale(1.06); }
  66%      { transform: translate3d(-10px,8px,0) scale(.97); }
}

/* mahogany table rim + brass bumper, straight off the table */
.title-rim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px; pointer-events: none;
  background: linear-gradient(180deg, rgba(43,20,8,0) 0%, rgba(48,23,10,.72) 46%, rgba(22,9,4,.97) 100%);
  border-top: 1px solid rgba(212,175,55,.26);
  box-shadow: inset 0 1px 0 rgba(255,224,150,.16);
}
.title-frame { position: absolute; inset: 18px; pointer-events: none; border: 1px solid rgba(212,175,55,.38); }
.title-frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(212,175,55,.14); }
.title-frame i { position: absolute; width: 15px; height: 15px; border: 1px solid rgba(249,229,150,.7); }
.title-frame i:nth-child(1) { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.title-frame i:nth-child(2) { top: -1px;    right: -1px; border-left: 0;  border-bottom: 0; }
.title-frame i:nth-child(3) { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.title-frame i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* Brand sits small in the top-left like the salon plaque on the wall: the host
   owns the centre, so the badge's own mascot bust reads as a crest, not a
   second character. */
.title-panel {
  position: absolute; top: 38px; left: 44px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; z-index: 2;
  animation: focusIn .85s cubic-bezier(.22,.61,.36,1) both;
}
.logo-wrap { position: relative; display: inline-block; }
#title-logo {
  display: block; width: min(190px, 18vw);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.92)) brightness(.9) saturate(.9);
}
.logo-sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(101deg, transparent 36%, rgba(255,246,216,.55) 47%, rgba(255,255,255,.92) 51%, rgba(255,240,190,.35) 56%, transparent 66%);
  background-size: 280% 100%; background-position: 190% 0;
  -webkit-mask: url('../arnow_casino_assets/arnow_asset_01.png') center / contain no-repeat;
  mask: url('../arnow_casino_assets/arnow_asset_01.png') center / contain no-repeat;
  animation: logoSheen 8.5s cubic-bezier(.4,.15,.2,1) 1.8s infinite;
}
@keyframes logoSheen {
  0%, 64%   { background-position: 190% 0; }
  82%, 100% { background-position: -90% 0; }
}
#title-sub {
  color: rgba(255,228,156,.88); font-size: 10px; letter-spacing: .4em;
  text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 0 18px rgba(212,175,55,.28);
}

/* the host: the sun in this composition */
.title-hero {
  position: absolute; bottom: 208px; left: 50%; transform: translateX(-50%);
  height: min(62vh, 580px); z-index: 1; pointer-events: none;
  animation: focusIn 1s cubic-bezier(.22,.61,.36,1) .1s both;
}
.hero-breathe { position: relative; height: 100%; animation: hostBreathe 7.5s ease-in-out infinite; }
.host-img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; opacity: 0;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 34px 50px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(255,182,88,.14));
}
.host-img.on { opacity: 1; }
.hero-halo {
  position: absolute; left: 50%; bottom: 12%; width: 108%; height: 74%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 55%, rgba(255,208,122,.38), rgba(255,168,58,.11) 44%, transparent 72%);
  filter: blur(26px); z-index: -1;
}
.hero-plinth {
  position: absolute; left: 50%; bottom: -14px; width: 66%; height: 34px;
  transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.88), rgba(0,0,0,.42) 42%, transparent 74%),
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.55), transparent 70%);
  filter: blur(9px);
}
@keyframes hostBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.005); }
}

.title-actions {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 13px; z-index: 3;
  animation: focusIn .9s cubic-bezier(.22,.61,.36,1) .24s both;
}

#btn-enter {
  position: relative; overflow: hidden; cursor: pointer;
  font-family: var(--serif); font-weight: 900; font-size: 14.5px; letter-spacing: .2em; text-indent: .2em;
  color: #2c2205; padding: 17px 56px; border-radius: 999px;
  background: linear-gradient(180deg, #ffeaa6 0%, #e9c65d 44%, #b8902a 100%);
  border: 1px solid rgba(255,242,196,.9);
  box-shadow: 0 16px 42px rgba(212,175,55,.26), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 6px rgba(90,60,8,.35);
  transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s, filter .38s;
  animation: btnGlow 5.5s ease-in-out infinite;
}
#btn-enter::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(101deg, transparent 40%, rgba(255,255,255,.62) 50%, transparent 60%);
  transform: translateX(-130%); transition: transform .75s cubic-bezier(.22,.61,.36,1);
}
#btn-enter:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.04); }
#btn-enter:hover::after { transform: translateX(130%); }
#btn-enter:active { transform: translateY(0) scale(.995); }
#btn-enter:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 16px 42px rgba(212,175,55,.24), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 6px rgba(90,60,8,.35); }
  50%      { box-shadow: 0 18px 52px rgba(212,175,55,.4),  inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 6px rgba(90,60,8,.35); }
}

.host-switch {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,.4); background: rgba(4,18,13,.72);
  backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.host-switch button {
  font-family: var(--serif); font-size: 9.5px; letter-spacing: .22em; text-indent: .22em;
  color: rgba(255,244,205,.95); background: none; border: 0; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.22);
  transition: color .3s, background .3s, box-shadow .3s;
}
.host-switch button:hover { color: var(--gold-hi); }
.host-switch button.active {
  color: #2c2205; background: linear-gradient(180deg, #ffe79c, #d4af37);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.host-switch button:not(.active):hover { background: rgba(212,175,55,.12); box-shadow: inset 0 0 0 1px rgba(249,229,150,.5); }
.host-switch button:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 2px; }

#title-note { color: rgba(210,244,232,.82); font-family: var(--serif-body); font-size: 13px; letter-spacing: .11em; text-shadow: 0 2px 10px rgba(0,0,0,.9); }

/* rack focus on load — no transform, so JS parallax keeps ownership of that */
@keyframes focusIn {
  from { opacity: 0; filter: blur(7px); }
  to   { opacity: 1; filter: blur(0); }
}

/* The in-game HUD is furniture of the floor, not of the front door. */
#hud { transition: opacity .5s ease; }
body.at-landing #hud { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .title-bokeh span, .hero-breathe, #btn-enter, .logo-sheen { animation: none !important; }
  .title-panel, .title-hero, .title-actions { animation-duration: .01s !important; }
}