/* Ember Hunt: a volcanic crystal cave. Basalt black, magma orange, crystal cyan. */
:root {
  --eh-basalt: #07050a; --eh-rock: #16110f; --eh-magma: #ff6a14; --eh-magma-hot: #ffb547;
  --eh-crystal: #5ff2ff; --eh-crystal-deep: #1aa6c9; --eh-gold: #ffd36b; --eh-text: #fbeee0;
  --eh-muted: #b59a86; --eh-danger: #ff3b1f;
  --eh-font: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--eh-basalt); overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button, select, output { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--eh-crystal); outline-offset: 2px; }

.eh {
  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  font: 600 15px/1.2 var(--eh-font); color: var(--eh-text); background: var(--eh-basalt);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- cave backdrop ---------- */
.eh-bg { position: absolute; inset: -4%; z-index: 0; background: var(--art-bg) center 70% / cover no-repeat; filter: brightness(.06) saturate(1.2); transform: scale(1.12); }
.eh-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 55% at 50% 52%, transparent 0, rgba(var(--eh-c01), .55) 60%, rgba(var(--eh-c01), .94) 100%),
  linear-gradient(180deg, rgba(var(--eh-c01), .85) 0, transparent 22%, transparent 70%, rgba(var(--eh-c01), .9) 100%); }
.eh-awake .eh-bg { animation: eh-cave-wake 2.2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes eh-cave-wake { 0% { filter: brightness(.06) saturate(1.2); transform: scale(1.12); } 45% { filter: brightness(.5) saturate(1.4); } 100% { filter: brightness(.36) saturate(1.25); transform: scale(1); } }
.eh-torch { position: absolute; z-index: 1; width: 70vmax; height: 70vmax; top: -30vmax; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(var(--eh-c02), .32) 0, rgba(var(--eh-c03), .12) 35%, transparent 65%); mix-blend-mode: screen; }
.eh-torch-l { left: -34vmax; } .eh-torch-r { right: -34vmax; }
.eh-awake .eh-torch { animation: eh-torch-on 1.4s .2s ease-out forwards, eh-flicker 3.1s 1.6s infinite; }
.eh-awake .eh-torch-r { animation-delay: .45s, 1.9s; animation-duration: 1.4s, 2.7s; }
@keyframes eh-torch-on { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .5; } 100% { opacity: .9; } }
@keyframes eh-flicker { 0%,100% { opacity: .9; } 18% { opacity: .72; } 33% { opacity: .95; } 52% { opacity: .66; } 70% { opacity: 1; } 84% { opacity: .78; } }
.eh-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }

/* ---------- top bar ---------- */
.eh-top { position: relative; z-index: 4; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 50px; padding: 4px 8px 0; }
.eh-logo { justify-self: center; height: 42px; width: auto; filter: drop-shadow(0 0 10px rgba(var(--eh-c04), .55)); }
.eh-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(var(--eh-c04), .35);
  background: radial-gradient(circle at 50% 35%, rgb(var(--eh-c05)), rgb(var(--eh-c06))); color: var(--eh-magma-hot); padding: 0; }
.eh-icon-btn svg { width: 22px; height: 22px; }
.eh-sound[aria-pressed="false"] { color: var(--eh-muted); }
.eh-tag { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--eh-crystal); text-shadow: 0 0 6px rgba(var(--eh-c07), .6); white-space: nowrap; }

/* ---------- stage ---------- */
.eh-stage { position: relative; z-index: 3; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 2px 8px 8px;
  --bs: clamp(200px, min(calc(100vw - 16px - 54px), calc(100dvh - 336px)), 560px); --gw: 48px; }
.eh:not(.eh-awake) .eh-stage { transform: scale(1.14) translateY(3%); filter: brightness(.18) blur(2px); }
.eh-awake .eh-stage { animation: eh-fly-in 1.5s cubic-bezier(.16,.84,.24,1) both; }
@keyframes eh-fly-in { 0% { transform: scale(1.14) translateY(3%); filter: brightness(.18) blur(2px); } 60% { filter: brightness(1.15) blur(0); } 100% { transform: none; filter: none; } }

.eh-hero { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.eh-char { width: 60px; height: 64px; object-fit: cover; object-position: 50% 4%; border-radius: 14px; flex: none;
  border: 1px solid rgba(var(--eh-c04), .5); box-shadow: 0 0 18px rgba(var(--eh-c04), .35), inset 0 0 0 1px rgba(var(--eh-c08), .6);
  background: radial-gradient(circle at 50% 30%, rgb(var(--eh-c09)), rgb(var(--eh-c10))); animation: eh-breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes eh-breathe { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.012); filter: brightness(1.08); } }
.eh-msg { flex: 1; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 15px; letter-spacing: .02em; min-height: 44px; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(var(--eh-c11), .92), rgba(var(--eh-c11), .55)); border-left: 3px solid var(--eh-magma); text-shadow: 0 1px 2px rgb(var(--eh-c08)); }
.is-erupt .eh-msg, .eh.is-ended .eh-msg { border-left-color: var(--eh-crystal); }

.eh-play { display: flex; justify-content: center; align-items: stretch; gap: 6px; }
.eh-alcove { position: relative; width: var(--bs); height: var(--bs); flex: none; }
.eh-alcove::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(var(--eh-c04), .28) 0, rgba(var(--eh-c12), .08) 45%, transparent 70%); animation: eh-flicker 4s infinite; }
.eh.is-open .eh-alcove::before { background: radial-gradient(circle, rgba(var(--eh-c13), .42) 0, rgba(var(--eh-c12), .12) 45%, transparent 70%); }
.eh-board { position: absolute; inset: 0; background: var(--art-board) center / contain no-repeat; filter: drop-shadow(0 12px 28px rgba(var(--eh-c08), .8)); }
/* the art's obsidian floor is x 13.5-86.6%; the grid reaches 2% onto the rim's inner lip so a 5x5 pitch stays >= 44px on a 360px phone */
.eh-grid { position: absolute; left: 11.6%; top: 11.4%; width: 76.8%; height: 76.8%; display: grid;
  grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 0; }

/* ---------- tiles ---------- */
.eh-cell { position: relative; padding: 0; border: 0; background: none; border-radius: 12%; min-width: 0; min-height: 0; overflow: visible; }
.eh-cell:disabled { cursor: default; }
.eh-cell > span { position: absolute; inset: 3.5%; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; border-radius: 12%; }
.eh-rock { background-image: var(--art-tileHidden); transition: transform .5s cubic-bezier(.3,.6,.3,1), opacity .45s ease, filter .3s; }
.eh-a { clip-path: polygon(0 0, 55% 0, 45% 28%, 59% 50%, 43% 73%, 53% 100%, 0 100%); }
.eh-b { clip-path: polygon(55% 0, 100% 0, 100% 100%, 53% 100%, 43% 73%, 59% 50%, 45% 28%); }
.eh-gem { background-image: var(--art-tileSafe); opacity: 0; transform: scale(.72); transition: opacity .25s ease .08s, transform .45s cubic-bezier(.2,1.6,.4,1) .08s, filter .4s; }
.eh-bomb { background-image: var(--art-tileHazard); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s cubic-bezier(.2,1.5,.4,1), filter .4s; }
.eh-glow { inset: -14% !important; opacity: 0; background: radial-gradient(circle, rgba(var(--eh-c07), .55), rgba(var(--eh-c14), .18) 45%, transparent 70%) !important; transition: opacity .4s; }
.eh-cell.is-live .eh-rock { filter: brightness(1.04); }
.eh-cell.is-live:hover .eh-rock, .eh-cell.is-live:focus-visible .eh-rock { filter: brightness(1.3) drop-shadow(0 0 6px rgba(var(--eh-c13), .9)); transform: translateY(-2%); }
.eh-cell.is-wait .eh-rock { animation: eh-heat-up .5s ease-in-out infinite alternate; }
@keyframes eh-heat-up { from { filter: brightness(1.2) drop-shadow(0 0 4px var(--eh-magma)); } to { filter: brightness(1.7) sepia(.4) drop-shadow(0 0 12px var(--eh-magma-hot)); transform: scale(1.03); } }
.eh-grid.heat-in .eh-cell .eh-rock { animation: eh-drop .55s calc((var(--r) + var(--c)) * 45ms) cubic-bezier(.2,1.4,.4,1) both; }
@keyframes eh-drop { 0% { transform: scale(.6); opacity: 0; filter: brightness(3) sepia(1); } 100% { transform: none; opacity: 1; } }

/* cracked open: two rock halves fall away, the crystal rises */
.eh-cell.is-open .eh-a { transform: translate(-26%, 28%) rotate(-16deg); opacity: 0; }
.eh-cell.is-open .eh-b { transform: translate(24%, 34%) rotate(14deg); opacity: 0; }
.eh-cell.is-open .eh-gem { opacity: 1; transform: none; }
.eh-cell.is-open .eh-glow { opacity: .55; }
.eh-cell.cracked .eh-gem { animation: eh-crystal-flash .9s ease-out; }
@keyframes eh-crystal-flash { 0% { filter: brightness(3) saturate(0) drop-shadow(0 0 18px rgb(var(--eh-c15))); } 40% { filter: brightness(1.6) hue-rotate(-12deg) drop-shadow(0 0 14px var(--eh-crystal)); } 100% { filter: none; } }
.eh-cell.is-hit .eh-rock, .eh-cell.is-bomb-dim .eh-rock, .eh-cell.is-gem-dim .eh-rock { opacity: 0; transform: scale(1.15); }
.eh-cell.is-hit .eh-bomb { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 14px var(--eh-danger)) brightness(1.15); animation: eh-hit-pulse 1s ease-in-out infinite alternate; z-index: 2; }
@keyframes eh-hit-pulse { to { filter: drop-shadow(0 0 22px var(--eh-danger)) brightness(1.35); } }
.eh-cell.is-bomb-dim .eh-bomb { opacity: .92; transform: scale(.92); filter: saturate(.75) brightness(.78) drop-shadow(0 0 5px rgba(var(--eh-c16), .55)); }
.eh-cell.is-gem-dim .eh-gem { opacity: .55; transform: scale(.9); filter: grayscale(.55) brightness(.62); }
.eh.is-ended .eh-cell .eh-rock, .eh.is-ended .eh-cell .eh-gem, .eh.is-ended .eh-cell .eh-bomb { transition-delay: calc(var(--i) * 22ms); }
.eh-cell.instant > span { transition: none !important; animation: none !important; }
.eh-idle { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .85; border-radius: 12%; }

/* ---------- effect clips and eruption ---------- */
/* no z-index on the layer itself: a stacking context would isolate the clips and stop `screen` from dropping their black */
.eh-vfx { position: absolute; inset: 2%; pointer-events: none; overflow: hidden; border-radius: 8%; } /* clips stay over the opaque board art */
.eh-clip { position: absolute; z-index: 3; mix-blend-mode: screen; opacity: 0; transition: opacity .15s; object-fit: contain; }
.eh-clip.on { opacity: 1; }
.eh-flash { position: absolute; inset: -12%; z-index: 4; pointer-events: none; opacity: 0; border-radius: 30%;
  background: radial-gradient(circle, rgba(var(--eh-c17), .9) 0, rgba(var(--eh-c18), .65) 30%, rgba(var(--eh-c19), .35) 60%, transparent 75%); mix-blend-mode: screen; }
.is-erupt .eh-flash { animation: eh-erupt 1.05s ease-out; }
@keyframes eh-erupt { 0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: .35; } 34% { opacity: .85; } 100% { opacity: 0; } }
.is-erupt .eh-bg { filter: brightness(.7) saturate(1.8) hue-rotate(-12deg) !important; transition: filter .1s; }
.eh-bg { transition: filter 1.2s ease; }
.is-erupt .eh-char { filter: brightness(1.6) sepia(.6) saturate(2) hue-rotate(-20deg); }

/* ---------- heat gauge ---------- */
.eh-gauge { position: relative; width: var(--gw); height: var(--bs); flex: none; --fill: 0; --next: 0; }
.eh-tube { position: absolute; left: 50%; transform: translateX(-50%); top: 40px; bottom: 6px; width: 18px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, rgb(var(--eh-c20)), rgb(var(--eh-c21)) 50%, rgb(var(--eh-c20))); border: 2px solid rgb(var(--eh-c22));
  box-shadow: inset 0 0 8px rgb(var(--eh-c08)), 0 0 0 1px rgba(var(--eh-c04), .25), 0 0 16px rgba(var(--eh-c03), .2); }
.eh-magma, .eh-gold { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%); transition: height .7s cubic-bezier(.3,1.3,.5,1); }
.eh-magma { background: radial-gradient(circle at 30% 20%, rgba(var(--eh-c23), .7) 0 6%, transparent 7%) 0 0 / 14px 18px,
  radial-gradient(circle at 70% 60%, rgba(var(--eh-c17), .5) 0 5%, transparent 6%) 0 0 / 12px 22px,
  linear-gradient(0deg, rgb(var(--eh-c24)) 0, rgb(var(--eh-c25)) 35%, rgb(var(--eh-c26)) 75%, rgb(var(--eh-c27)) 100%);
  box-shadow: 0 0 14px var(--eh-magma); animation: eh-bubble 1.6s linear infinite; }
.eh-magma::before { content: ""; position: absolute; left: -2px; right: -2px; top: -3px; height: 6px; border-radius: 50%; background: rgb(var(--eh-c28)); filter: blur(2px); }
@keyframes eh-bubble { to { background-position: 0 -36px, 0 -44px, 0 0; } }
.eh-gold { height: 0; background: linear-gradient(0deg, rgb(var(--eh-c29)), rgb(var(--eh-c30)) 40%, rgb(var(--eh-c31)) 100%); box-shadow: 0 0 18px var(--eh-gold); }
.eh-gauge.is-gold .eh-gold { height: calc(var(--fill) * 100%); transition: height 1.2s cubic-bezier(.2,.8,.2,1); }
.eh-next-line { position: absolute; left: 0; right: 0; bottom: calc(var(--next) * 100%); height: 0; border-top: 2px dashed var(--eh-crystal); filter: drop-shadow(0 0 3px var(--eh-crystal)); transition: bottom .6s ease; }
.eh-pill { position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; padding: 3px 4px; border-radius: 8px; text-align: center; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.eh-next { top: 0; color: rgb(var(--eh-c32)); background: linear-gradient(180deg, rgba(var(--eh-c14), .5), rgba(var(--eh-c33), .9)); border: 1px solid var(--eh-crystal);
  box-shadow: 0 0 10px rgba(var(--eh-c07), .35); display: flex; flex-direction: column; line-height: 1.05; }
.eh-pill-k { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.eh-cur { z-index: 2; color: rgb(var(--eh-c34)); background: var(--art-plateCashout) center / 100% 100%; padding: 5px 6px; border-radius: 10px; box-shadow: 0 0 12px rgba(var(--eh-c04), .7);
  bottom: clamp(0px, calc(6px + var(--fill) * (100% - 46px) - 12px), calc(100% - 70px)); transition: bottom .7s cubic-bezier(.3,1.3,.5,1); }
.eh-cur.is-cold { background: rgb(var(--eh-c21)); color: var(--eh-muted); box-shadow: none; border: 1px solid rgb(var(--eh-c22)); }
.eh-cur.pop { animation: eh-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes eh-pop { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.3); filter: brightness(1.5); } 100% { transform: translateX(-50%) scale(1); } }
.eh-gauge.is-gold .eh-cur { background: linear-gradient(180deg, rgb(var(--eh-c31)), rgb(var(--eh-c30))); color: rgb(var(--eh-c35)); box-shadow: 0 0 18px var(--eh-gold); }

/* ---------- control deck ---------- */
.eh-deck { display: grid; gap: 7px; width: 100%; max-width: 560px; margin: 0 auto; }
.eh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eh-field { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 5px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(var(--eh-c21), .92), rgba(var(--eh-c36), .92)); border: 1px solid rgba(var(--eh-c04), .22); }
.eh-k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--eh-muted); padding-left: 2px; }
.eh-stepper { display: flex; align-items: center; gap: 4px; }
.eh-step { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid rgba(var(--eh-c04), .4);
  background: radial-gradient(circle at 50% 30%, rgb(var(--eh-c37)), rgb(var(--eh-c38))); color: var(--eh-magma-hot); }
.eh-step svg { width: 20px; height: 20px; }
.eh-step:disabled, .eh-v-btn:disabled { opacity: .35; cursor: default; }
.eh-v { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-v-btn { height: 44px; border: 0; border-radius: 10px; background: rgba(var(--eh-c07), .07); color: var(--eh-crystal); text-shadow: 0 0 8px rgba(var(--eh-c07), .5); }
.eh-reason { margin: -2px 0 0; font-size: 12px; color: rgb(var(--eh-c39)); text-align: center; }
.eh-select { width: 100%; height: 44px; border-radius: 10px; border: 1px solid rgba(var(--eh-c04), .4); background: rgb(var(--eh-c38)); padding: 0 8px; font-size: 15px; font-weight: 700; }
.eh-action { position: relative; min-height: 60px; border: 0; border-radius: 14px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--art-plateCashout) center / 100% 100% no-repeat; color: rgb(var(--eh-c40)); text-shadow: 0 1px 0 rgba(var(--eh-c41), .6);
  filter: drop-shadow(0 4px 14px rgba(var(--eh-c04), .45)); transition: filter .2s, transform .1s; }
.eh-action:active:not(:disabled) { transform: scale(.97); }
.eh-action-k { font-size: 19px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.eh-action-v { font-size: 14px; font-weight: 800; }
.eh-action-v:empty { display: none; }
.eh-action.is-cashout:not(:disabled) { animation: eh-cash-glow 1.4s ease-in-out infinite; }
@keyframes eh-cash-glow { 50% { filter: drop-shadow(0 0 18px rgba(var(--eh-c07), .7)) brightness(1.12); } }
.eh-action:disabled { filter: grayscale(.75) brightness(.55); cursor: default; }
.eh-meters { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px; }
.eh-meter { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.eh-meter b { font-size: 16px; white-space: nowrap; }
.eh-meter-win b { color: var(--eh-gold); text-shadow: 0 0 10px rgba(var(--eh-c42), .45); }

/* ---------- sheets ---------- */
.eh-sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(var(--eh-c43), .72); backdrop-filter: blur(3px); }
.eh-sheet-card { width: min(560px, 100%); max-height: 86dvh; overflow: auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgb(var(--eh-c44)), rgb(var(--eh-c45))); border: 1px solid rgba(var(--eh-c04), .35); border-bottom: 0; box-shadow: 0 -10px 40px rgba(var(--eh-c18), .2); }
.eh-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.eh-sheet-head h2 { margin: 0; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--eh-magma-hot); }
.eh-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.eh-chip { min-height: 44px; border-radius: 10px; border: 1px solid rgba(var(--eh-c04), .35); background: rgb(var(--eh-c46)); font-size: 17px; font-weight: 800; }
.eh-chip.is-on { background: linear-gradient(180deg, var(--eh-magma-hot), var(--eh-magma)); color: rgb(var(--eh-c40)); border-color: rgb(var(--eh-c27)); }
.eh-chip.is-off { opacity: .4; border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.eh-chip-note { margin: 10px 0 0; font-size: 13px; color: rgb(var(--eh-c39)); }
.eh-chip-note::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1px dashed currentColor; border-radius: 3px; vertical-align: middle; }
.eh-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-weight: 500; line-height: 1.4; color: rgb(var(--eh-c47)); }

/* ---------- toast ---------- */
.eh-toast { position: fixed; left: 50%; top: 22%; z-index: 25; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 999px;
  background: rgba(var(--eh-c36), .94); border: 1px solid var(--eh-crystal); color: rgb(var(--eh-c32)); box-shadow: 0 0 20px rgba(var(--eh-c07), .3); transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; }
.eh-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- win banner ---------- */
.eh-banner { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 6px; background: radial-gradient(circle, rgba(var(--eh-c48), .7), rgba(var(--eh-c43), .92) 70%);
  opacity: 0; transition: opacity .3s; cursor: pointer; }
.eh-banner.on { opacity: 1; }
.eh-banner-rays { position: absolute; width: 160vmax; height: 160vmax; left: 50%; top: 50%; margin: -80vmax 0 0 -80vmax; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(var(--eh-c49), .5) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(closest-side, rgb(var(--eh-c08)) 0, transparent 42%); -webkit-mask: radial-gradient(closest-side, rgb(var(--eh-c08)) 0, transparent 42%);
  animation: eh-spin 18s linear infinite; opacity: .3; }
.eh-banner[data-tier="maxWin"] .eh-banner-rays { background: repeating-conic-gradient(from 0deg, rgba(var(--eh-c07), .55) 0 6deg, rgba(var(--eh-c49), .4) 6deg 12deg, transparent 12deg 18deg); opacity: .5; }
@keyframes eh-spin { to { transform: rotate(360deg); } }
.eh-banner-art { position: relative; width: min(94vw, 680px); }
.eh-banner-art img { display: block; width: 100%; height: auto; }
.eh-banner.on .eh-banner-art { animation: eh-slam .7s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes eh-slam { 0% { transform: scale(2.4); opacity: 0; filter: brightness(3); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
.eh-banner-tier { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 9vw, 64px); font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--eh-c50)); text-shadow: 0 0 6px var(--eh-magma-hot), 0 0 22px var(--eh-magma), 0 3px 0 rgb(var(--eh-c51)); }
.eh-banner[data-tier="maxWin"] .eh-banner-tier { color: rgb(var(--eh-c52)); text-shadow: 0 0 8px var(--eh-crystal), 0 0 26px var(--eh-magma), 0 3px 0 rgb(var(--eh-c53)); }
.eh-banner-amt { position: relative; font-size: clamp(34px, 10vw, 72px); font-weight: 900; color: var(--eh-gold); text-shadow: 0 0 18px rgba(var(--eh-c54), .8), 0 3px 0 rgb(var(--eh-c55)); font-variant-numeric: tabular-nums; }
.eh-hint { position: relative; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--eh-muted); animation: eh-blink 1.6s infinite; }
@keyframes eh-blink { 50% { opacity: .4; } }

/* ---------- intro ---------- */
.eh-intro { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 28px; background: rgb(var(--eh-c56)); transition: opacity 1.1s ease .2s; }
.eh-intro-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 35% at 50% 46%, rgba(var(--eh-c03), .22), transparent 70%); animation: eh-flicker 2.4s infinite; }
.eh-intro-logo { position: relative; width: min(84vw, 600px); height: auto; max-height: 40vh; object-fit: contain; filter: brightness(.7) drop-shadow(0 0 22px rgba(var(--eh-c03), .5)); animation: eh-logo-breathe 3s ease-in-out infinite; }
@keyframes eh-logo-breathe { 50% { filter: brightness(.95) drop-shadow(0 0 34px rgba(var(--eh-c13), .7)); } }
.eh-intro-go { position: relative; min-height: 52px; padding: 0 30px; border-radius: 999px; border: 1px solid var(--eh-magma); background: rgba(var(--eh-c57), .8);
  color: var(--eh-magma-hot); font-size: 16px; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 0 22px rgba(var(--eh-c04), .35); animation: eh-blink 2s infinite; }
.eh-intro.out { opacity: 0; pointer-events: none; }
.eh-intro.out .eh-intro-logo { animation: eh-logo-fly 1.1s cubic-bezier(.5,0,.8,.4) forwards; }
.eh-intro.out .eh-intro-go { animation: none; opacity: 0; transition: opacity .2s; }
@keyframes eh-logo-fly { to { transform: scale(2.6) translateY(-8%); filter: brightness(2) blur(6px); opacity: 0; } }

/* ---------- landscape / desktop: character left, board in the alcove, deck right ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  .eh-top { height: 64px; grid-template-columns: 52px 1fr 52px; padding: 6px 20px 0; }
  .eh-logo { height: 58px; }
  .eh-stage { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(250px, 310px); grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 8px;
    align-items: center; padding: 6px 28px 18px; --bs: clamp(260px, min(calc(100dvh - 150px), calc(100vw - 690px)), 760px); --gw: 82px; }
  .eh-hero { display: contents; }
  .eh-char { grid-column: 1; grid-row: 1 / 3; align-self: end; justify-self: end; width: auto; height: min(calc(100dvh - 90px), 760px); max-width: none;
    object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: none; margin-right: -70px; filter: drop-shadow(0 0 30px rgba(var(--eh-c03), .35)); position: relative; z-index: -1; }
  .eh-msg { grid-column: 2; grid-row: 1; justify-content: center; text-align: center; border-left: 0; border-bottom: 2px solid var(--eh-magma); border-radius: 12px; background: rgba(var(--eh-c36), .78); }
  .eh-play { grid-column: 2; grid-row: 2; align-self: start; }
  .eh-deck { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .eh-deck .eh-row { grid-template-columns: 1fr; }
  .eh-action { min-height: 72px; order: 9; }
  .eh-tube { width: 26px; top: 50px; }
  .eh-pill { font-size: 14px; }
  .eh-cur { bottom: clamp(0px, calc(6px + var(--fill) * (100% - 56px) - 14px), calc(100% - 84px)); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  .eh-top { height: 48px; } .eh-logo { height: 42px; }
  .eh-stage { --bs: clamp(200px, calc(100dvh - 110px), 760px); }
  .eh-field { padding: 2px 6px; } .eh-step, .eh-v-btn, .eh-select { height: 44px; } .eh-action { min-height: 56px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .eh-top { height: 46px; } .eh-logo { height: 38px; }
  .eh-hero { min-height: 52px; } .eh-char { height: 52px; width: 50px; } .eh-msg { min-height: 44px; padding: 6px 10px; font-size: 14px; }
  .eh-stage { gap: 5px; --bs: clamp(200px, min(calc(100vw - 16px - 54px), calc(100dvh - 318px)), 560px); }
}

/* ---------- every label at least 12 px, QUALITY-RUBRIC 1.4 ----------
   Phones in portrait first; since the mobile-first audit (7 Nov 2026) a phone on its side, a tablet and a desktop too:
   the landscape labels were 9 to 10 px (9.4 px at 844×390 under the RGS panel). */
.eh-tag { font-size: 12px; letter-spacing: .14em; bottom: -12px; }
.eh-k { font-size: 12px; letter-spacing: .1em; }
.eh-pill-k { font-size: 13px; letter-spacing: .06em; }
@media (orientation: portrait), (max-width: 699px) {
  .eh-pill { font-size: 13px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; transition-delay: 0s !important; }
}
.eh-reduced .eh-clip, .eh-reduced .eh-idle { display: none; }

/* ---------- RGS: the unified game menu (T10) shows bet, balance, win and sound ----------
   kits/shared/platform/menu.js sets html.asgf-menu; the layout keeps its place. */
html.asgf-menu .eh-sound, html.asgf-menu .eh-meters, html.asgf-menu .eh-deck > .eh-row:first-child > .eh-field:first-child { visibility: hidden; }
/* Every general control is on the panel (Henrik and Jonny, 8 Nov 2026): rules is the panel's INFO, its PLAY opens a
   round and cashes out, so the game's rules button, the bomb steppers and its own action button are hidden too. The
   board, the bomb count (it opens the chooser) and the auto cash-out choice stay. Sheets end above the panel. */
html.asgf-menu .eh-top > .eh-icon-btn, html.asgf-menu .eh-deck .eh-step, html.asgf-menu .eh-action { visibility: hidden; }
html.asgf-menu .eh-sheet { bottom: var(--asgf-menu-h, 0px); }
/* the intro too, so "Tap to enter the cave" is centred in the space above the panel (Gate B, 844×390 and 667×375, 9 Nov
   2026: with the panel's 44 px buttons it reached 3 px into the panel) */
html.asgf-menu .eh-intro { bottom: var(--asgf-menu-h, 0px); gap: min(28px, 4vh); }
html.asgf-menu .eh-intro-logo { max-height: max(48px, calc((100vh - var(--asgf-menu-h, 0px)) * .4)); }
/* the message line is empty between rounds: no empty plate either */
.eh-msg:empty { visibility: hidden; }

/* history replay (RGS T6): the round is only shown, so the bet, auto cash-out and PLAY controls are hidden; the layout stays */
html[data-asgf-replay] .eh-step, html[data-asgf-replay] .eh-auto, html[data-asgf-replay] .eh-action { visibility: hidden; }

/* ---------- RGS: above the unified menu's panel (mobile-first audit, 7 Nov 2026) ----------
   The cave filled the whole screen and the panel covered its foot: on a phone on its side the board's bottom rows and
   PLAY were under it. The game now ends above the panel and the board is sized from the height left there. In portrait
   the board stays at least 286 px, so a cell stays a 44 px target; on a phone too short for board and deck the stage
   scrolls, so PLAY is never hidden. */
html.asgf-menu .eh { bottom: var(--asgf-menu-h, 0px); --eh-vh: calc(100dvh - var(--asgf-menu-h, 0px)); }
html.asgf-menu .eh-stage { justify-content: safe center; overflow-y: auto; }
@media (orientation: portrait), (max-width: 699px) {
  html.asgf-menu .eh-stage { --bs: clamp(286px, min(calc(100vw - 16px - 54px), calc(var(--eh-vh) - 272px)), 560px); }
}
@media (orientation: landscape) and (min-width: 700px) {
  html.asgf-menu .eh-stage { --bs: clamp(260px, min(calc(var(--eh-vh) - 150px), calc(100vw - 690px)), 760px); }
  html.asgf-menu .eh-char { height: min(calc(var(--eh-vh) - 90px), 760px); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  html.asgf-menu .eh-stage { --bs: clamp(180px, calc(var(--eh-vh) - 110px), 760px); }
}