/* v48 — forged metal UI. All details are resolution-independent CSS/SVG.
   Scene artwork and geometry are owned by styles.css and crash.css. */
:root {
  --ui-metal: linear-gradient(155deg, #30302e, #202122 65%);
  --ui-copper: linear-gradient(115deg, #f3c897, #dda369 58%, #c78850);
  --ui-water: linear-gradient(115deg, #caeeea, #8ecfd0 58%, #70afb9);
  --ui-edge: #cbb99d26;
}
.topbar { background: linear-gradient(180deg, #292826, #1c1d1d); border-bottom-color: var(--ui-edge); }
.workbench { background: radial-gradient(ellipse at 95% 0, #ae784312, transparent 65%), #1c1e1f; }
.top-stat-value, .cbet-input, .cbet-btn-sub { font-variant-numeric: tabular-nums; }
.icon-btn, .bet-btn, .cbet-step, .crash-help, .overlay-close {
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.icon-btn { border-radius: 10px; background: var(--ui-metal); border-color: var(--ui-edge); box-shadow: inset 0 1px #ffffff0b; }
#btn-menu { color: #efbf85; border-color: #b88a5355; background: linear-gradient(140deg, #3a3025, #232120); }
#btn-menu svg { width: 25px; height: 25px; }
.icon-btn[aria-pressed="false"] { color: #aaa59c; }
.icon-btn[aria-pressed="false"] #mute-waves { visibility: hidden; }
.mode-tabs { background: #111314; padding: 4px; border-color: var(--ui-edge); box-shadow: inset 0 2px 5px #0005; }
.mode-tab { min-height: 34px; letter-spacing: .08em; transition: background .18s, color .18s; }
.mode-tab[aria-selected="true"] { background: linear-gradient(135deg, #66503a, #42362a); color: #ffddb2; box-shadow: inset 0 1px #e7be8745, 0 2px 5px #0003; }
.mode-tab[aria-selected="true"] .live-dot { background: #f6bd80; }
.workbench-intro h1 { letter-spacing: -.035em; }
.workbench-intro p { color: #bdb7ac; }
.heat-selector { gap: 7px; }
.heat-pace { color: #b7b1a6; letter-spacing: 0.01em; }
.bet-chip {
  background: var(--ui-metal);
  border-color: var(--ui-edge);
  color: #e4d9c7;
  box-shadow: inset 0 1px #ffffff08;
  transition: background .18s, border-color .18s, color .18s;
}
.bet-chip[aria-pressed="true"] {
  color: #302012;
  background: var(--ui-copper);
  border-color: #f2c38e;
}
.heat-segment {
  --heat-rgb: 208 133 92;
  overflow: hidden; justify-content: center; gap: 5px; padding: 13px 3px 10px;
  border: 1px solid #ffffff15; border-radius: 10px;
  background: linear-gradient(155deg, #292b2c, #1b1d1e);
  box-shadow: inset 0 1px #ffffff07, 0 3px 8px #0002;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.heat-segment[data-heat="feuer"] { --heat-rgb: 245 172 91; }
.heat-segment[data-heat="weissglut"] { --heat-rgb: 255 226 171; }
.heat-segment::after {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px;
  background: rgb(var(--heat-rgb) / .42); border-radius: 0 0 4px 4px;
}
.heat-segment[aria-checked="true"] {
  border-color: rgb(var(--heat-rgb) / .75);
  background: radial-gradient(ellipse at 50% 0, rgb(var(--heat-rgb) / .17), transparent 90%), #242321;
  box-shadow: inset 0 0 0 1px rgb(var(--heat-rgb) / .12), 0 3px 12px #0003;
}
.heat-segment[aria-checked="true"]::after { background: rgb(var(--heat-rgb)); box-shadow: 0 0 14px rgb(var(--heat-rgb) / .6); }
.heat-label { font-family: var(--font); font-size: 10px; line-height: 1.2; letter-spacing: .025em; color: #d5d1c8; }
.heat-segment[aria-checked="true"] .heat-label { color: #fff0d9; }
.heat-gain { font-size: 12px; font-weight: 650; line-height: 1.2; color: rgb(var(--heat-rgb)); }
.heat-sub { font-size: 9px; line-height: 1.2; color: #b0aba1; }
.heat-sub::after { font-size: inherit; }
.bet-row input { border-color: var(--ui-edge); border-radius: 9px; background: #111415; box-shadow: inset 0 2px 6px #0004; }
.bet-btn { border-radius: 9px; background: var(--ui-metal); border-color: var(--ui-edge); color: #e4d9c7; box-shadow: inset 0 1px #ffffff08; }
.action-btn, .cbet-btn, .overlay-primary-btn {
  position: relative; overflow: hidden; border-radius: 11px;
  transition: transform .12s, filter .18s, box-shadow .18s;
}
.action-btn { flex-direction: row; gap: 8px; padding-inline: 10px; }
.strike-btn, .cbet-btn.is-bet, .overlay-primary-btn {
  color: #302012; background: var(--ui-copper); border: 1px solid #f2c38e;
  box-shadow: inset 0 1px #fff6, inset 0 -3px #78471f26, 0 5px 16px #0003;
}
/* Fine inner edge catches light without stretching a raster frame. */
.action-btn::after, .cbet-btn::after {
  content: ""; pointer-events: none; position: absolute; inset: 3px;
  border: 1px solid #ffffff1c; border-radius: 8px;
}
.vision-action-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: #54301912; }
.vision-action-icon svg { width: 24px; height: 24px; }
.vision-action-plate { min-width: 0; gap: 4px; }
.action-name { font-size: 12px; line-height: 1.2; font-weight: 750; }
.action-hint { font-size: 10px; line-height: 1.2; opacity: .8; }
.collect-btn:not(:disabled), .cbet-btn.is-cashout {
  color: #163639; background: var(--ui-water); border: 1px solid #bce3df;
  box-shadow: inset 0 1px #fff6, inset 0 -3px #20505726, 0 5px 18px #0003;
  animation: none;
}
.collect-btn .vision-action-icon { background: #1d535018; }
.action-btn:disabled { opacity: 1; filter: none; box-shadow: inset 0 1px #ffffff05; }
.strike-btn:disabled { background: #4b4034; border-color: #685442; color: #c6b093; }
.collect-btn:disabled { background: linear-gradient(145deg, #252c2c, #1c2223); border-color: #b4c6c329; color: #9caaa8; }
.collect-btn:disabled::after { border-color: transparent; }
.collect-btn .hold-progress { z-index: 1; height: 4px; background: #effffc; box-shadow: 0 0 12px #ecffff90; }
.cbet { background: linear-gradient(140deg, #2a2b29, #1c1f20); border-color: var(--ui-edge); box-shadow: inset 0 1px #ffffff07, 0 8px 20px #0002; }
.cbet-amount { border-radius: 9px; background: #111415; border-color: var(--ui-edge); box-shadow: inset 0 2px 6px #0005; }
.cbet-step, .cbet-input { height: 38px; }
.cbet-quick { gap: 6px; }
.cbet-quick button { height: 30px; border-radius: 7px; background: #ffffff04; transition: background .15s, color .15s, border-color .15s; }
.cbet-quick button[aria-pressed="true"] { border-color: #d2a16b70; background: #c58a491c; color: #f6cf9e; }
.cbet-btn { border: 1px solid transparent; padding: 10px 12px; min-width: 0; gap: 4px; }
.cbet-btn-main { font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .045em; line-height: 1.2; }
.cbet-btn-sub { font-size: 12px; font-weight: 500; line-height: 1.2; opacity: .85; }
.cbet-symbol { display: none; }
.cbet-btn.is-cancel, .cbet-btn.is-queued { background: linear-gradient(135deg, #503e2e, #352f28); border-color: #cba57265; color: #f8d8af; box-shadow: inset 0 1px #ffffff0c; }
.cbet-btn.is-banked { border-color: #84b7ae70; background: radial-gradient(ellipse at 50% 0, #4d978536, transparent 85%), #1d302d; color: #c2e8da; box-shadow: inset 0 1px #d2ffec10; }
.cbet-btn.is-banked .cbet-btn-main { color: #d0f0df; }
.cbet-btn.is-lost { border-color: #bd817040; background: #2b2523; color: #d9aea0; }
.cbet-btn.is-wait { background: #232728; color: #afb4b0; border-color: var(--ui-edge); }
.cbet-btn.is-bet:disabled { filter: saturate(.2); opacity: .65; }
.cbet-auto { min-height: 34px; }
.cbet-auto input { width: 18px; height: 18px; margin: 0 2px 0 0; accent-color: #e4b07b; }
.cbet-auto-field { border-radius: 8px; border-color: var(--ui-edge); }
.cbet-auto-val { font-size: 16px; height: 34px; }
.cbet-autoplay { min-height: 34px; border-radius: 8px; border-color: var(--ui-edge); }
.cbet-opts { flex-wrap: wrap; gap: 6px 8px; border-top-color: var(--ui-edge); }
.crash-history { list-style: none; margin: 0; padding: 3px 1px; min-height: 34px; }
.crash-history > li { flex: 0 0 auto; }
.crash-chip { min-height: 28px; border-radius: 7px; background: #ffffff04; }
.crash-live { background: linear-gradient(155deg, #242726, #191c1d); border-color: var(--ui-edge); }
.crash-live-tab { min-height: 32px; border-radius: 8px; }
.crash-live-tab[aria-selected="true"] { background: #cba57512; border-color: #cba57535; }
.crash-help { width: 32px; height: 32px; border-radius: 8px; }
.crash-live-empty { padding: 20px 8px; line-height: 1.6; }
.crash-live-list li.row-lost { opacity: 1; color: #bba59e; }
.overlay-card { background: linear-gradient(145deg, #2a2c2b, #1b1e1f); border-color: #b4a18b50; box-shadow: 0 24px 80px #0009, inset 0 1px #ffffff0d; }
.overlay-close { width: 36px; height: 36px; border-radius: 9px; background: #ffffff06; border: 1px solid #ffffff1c; }
.overlay-secondary-btn { border-radius: 10px; background: #ffffff05; }
.settings-row input { accent-color: #e9b478; }
.settings-row select, .settings-row input:not([type="checkbox"]):not([type="range"]) { border-radius: 8px; }
.cbet-input:focus-visible { outline-offset: -3px; border-radius: 6px; }
.crash-chip:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .icon-btn:hover, .bet-btn:not(:disabled):hover, .crash-help:hover, .overlay-close:hover { border-color: #e5b57e80; color: #f7d8ae; }
  .heat-segment:hover { border-color: rgb(var(--heat-rgb) / .6); }
  .cbet-quick button:not(:disabled):hover, .cbet-autoplay:hover { border-color: #e5b57e80; background-color: #bd875523; }
  .action-btn:not(:disabled):hover, .cbet-btn:not(:disabled):hover, .overlay-primary-btn:hover { filter: brightness(1.07); }
  .crash-chip:hover { filter: brightness(1.2); }
}
@media (min-width: 851px) {
  .cbet-btn { padding-inline: 66px; }
  .cbet-symbol { display: grid; position: absolute; left: 18px; top: calc(50% - 21px); width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #36210a12; }
  .cbet-symbol svg { width: 24px; height: 24px; }
  .cbet-symbol .symbol-water, .cbet-symbol .symbol-check { display: none; }
  .is-cashout .cbet-symbol .symbol-hammer, .is-banked .cbet-symbol .symbol-hammer { display: none; }
  .is-cashout .cbet-symbol .symbol-water, .is-banked .cbet-symbol .symbol-check { display: block; }
  .is-banked .cbet-symbol { background: #c8ffe812; }
  .is-cancel .cbet-symbol, .is-queued .cbet-symbol, .is-lost .cbet-symbol, .is-wait .cbet-symbol { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .mode-tabs { margin-top: 6px; }
  .mode-tab { min-height: 32px; }
  .heat-segment { gap: 2px; padding-block: 6px; }
  .heat-gain { font-size: 11px; }
  .heat-pace { font-size: 8px; line-height: 1.1; }
  .cbet-btn-main { font-size: 14px; }
  .cbet-input, .cbet-step { height: 40px; }
  .crash-view { gap: 8px; }
  body.mode-crash .crash-stage { height: 100%; min-height: 0; }
  .cbet-autoplay { padding-inline: 9px; }
  .crash-live-empty { padding: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .controls-hint { display: none; }
  .fairness-toggle { padding: 4px 0; }
}
/* Kurze breite Fenster (kleine Laptops): die Szene darf nicht auf 480 px
   festwachsen, sonst verschwindet der Amboss unter der Kante. */
@media (min-width: 851px) and (max-height: 760px) {
  .app {
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: calc(100svh - 28px);
    max-height: calc(100svh - 28px);
  }
  .scene { min-height: 0 !important; height: 100% !important; }
  .forge { width: 168px !important; height: 168px !important; bottom: 12px !important; }
  .workbench-intro p { display: none; }
}

/* iPhone im Querformat ist oft breiter als 850 px und würde sonst das
   Desktop-Layout bekommen. Dieses Fenster ist zu flach dafür. */
@media (orientation: landscape) and (max-height: 560px) {
  html, body { height: 100svh; max-height: 100svh; overflow: hidden; }
  body {
    padding: 4px max(10px, var(--safe-right)) max(6px, var(--safe-bottom)) max(12px, var(--safe-left)) !important;
    align-items: stretch;
  }
  .demo-ribbon { top: 4px; }
  .app {
    width: 100% !important;
    height: calc(100svh - 8px) !important;
    max-height: calc(100svh - 8px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(268px, 320px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  .scene {
    grid-column: 1;
    grid-row: 2;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100%;
  }
  .forge {
    width: 132px !important;
    height: 132px !important;
    bottom: 6px !important;
  }
  .multiplier-display { top: 6px !important; }
  .mult-label { display: none !important; }
  #multiplier-value { font-size: 28px !important; }
  .scene-stats { bottom: 6px; }
  .scene-stats strong { font-size: 12px; }
  .workbench {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px !important;
  }
  .workbench-intro, .controls-hint, .live-feed, .demo-note, .help-link, .scene-kicker, .bet-chips { display: none !important; }
  .heat-segment { min-height: 0; padding: 4px 2px; }
  .action-btn { min-height: 48px; }
  .fairness-toggle { padding: 4px 0; }

  body.mode-crash .app { display: flex !important; flex-direction: column; }
  body.mode-crash .crash-view {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    display: grid !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
    grid-template-rows: auto minmax(0, 1fr) 48px !important;
    gap: 6px;
    padding: 4px 6px 6px !important;
    overflow: hidden;
  }
  body.mode-crash .crash-history { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  body.mode-crash .crash-stage {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
  }
  body.mode-crash .crash-bets {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center;
    min-height: 0;
    overflow: visible;
  }
  body.mode-crash .crash-demo-note { display: none !important; }
  body.mode-crash .crash-live {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-height: 0;
    max-height: 48px;
    margin: 0;
    padding: 4px 8px;
    overflow: hidden;
    align-items: center;
    gap: 6px;
  }
  body.mode-crash .crash-live-tabs { margin: 0; flex: 0 0 auto; }
  body.mode-crash .crash-live-tab { min-height: 26px; padding: 2px 8px; font-size: 11px; }
  body.mode-crash .crash-live-head { display: none; }
  body.mode-crash .crash-live-list { max-height: 22px; margin: 0; font-size: 11px; }
  body.mode-crash .crash-live-empty { margin: 0; padding: 0; font-size: 11px; line-height: 1.2; }
  body.mode-crash .crash-center { top: 14% !important; }
  body.mode-crash .crash-mult { font-size: 34px !important; }
  body.mode-crash .crash-stage .forge {
    width: 120px !important;
    height: 120px !important;
    bottom: 8px !important;
  }
  body.mode-crash .crash-stage .hammer-layer { top: 8% !important; left: 58% !important; width: 34% !important; height: 34% !important; }
  body.mode-crash .heat-gauge { top: auto !important; bottom: 10% !important; left: 3% !important; height: 58% !important; }
  body.mode-crash .cbet { padding: 8px; grid-template-columns: minmax(132px, 1.2fr) minmax(108px, 0.9fr); }
  body.mode-crash .cbet-btn { min-height: 56px !important; padding-inline: 40px 8px !important; }
  .cbet-symbol { width: 28px !important; height: 28px !important; left: 8px !important; top: calc(50% - 14px) !important; }
  .cbet-btn-sub { white-space: nowrap; font-size: 11px; }
  .cbet-input { font-size: 15px; }
  body.mode-crash .heat-gauge { left: 10px !important; }
  .cash-dial { width: 92px; height: 92px; }
  .dial-readout { inset: 20px 8px; font-size: 12px; }
  .app { height: calc(100svh - max(6px, var(--safe-bottom)) - 8px) !important; max-height: calc(100svh - max(6px, var(--safe-bottom)) - 8px) !important; }
}
@media (max-width: 360px) {
  .vision-action-icon { width: 25px; height: 28px; flex-basis: 25px; background: none; }
  .vision-action-icon svg { width: 22px; height: 22px; }
  .action-btn { gap: 4px; padding-inline: 6px; }
  .action-name { font-size: 11px; }
  .action-hint { font-size: 9px; }
  .heat-gain { font-size: 10px; }
  .heat-label { font-size: 9px; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-width: 850px) and (max-height: 500px) {
  .app { grid-template-rows: auto minmax(270px, 1fr); }
}
@media (min-width: 851px) and (max-height: 820px) {
  .app { grid-template-rows: 76px minmax(512px, 1fr) 46px; }
  .workbench { padding: 12px 18px 8px; }
  .workbench-intro h1 { margin: 4px 0 6px; font-size: 22px; }
  .workbench-intro p { display: none; }
  .heat-segment { min-height: 62px; padding: 6px 2px; gap: 2px; }
  .controls { margin-top: 10px; }
  .action-row { margin-top: 8px; }
  .action-btn { min-height: 60px; }
  .controls-hint { margin: 4px 0 6px; min-height: 0; }
  .fairness-toggle, .help-link { padding: 7px 0; }
  .bet-chips { margin-top: 6px; }
  .bet-chip { height: 26px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .heat-segment { min-height: 48px; padding: 4px 2px; gap: 1px; }
  .heat-pace { font-size: 8px; }
  .controls, .action-row { margin-top: 6px; }
  .action-btn { min-height: 48px; }
  .controls-hint { margin: 2px 0 4px; min-height: 0; }
  .fairness-toggle { padding: 5px 0; }
  .bet-label { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-tab .live-dot { animation: none; }
  .icon-btn, .mode-tab, .action-btn, .cbet-btn, .heat-segment, .overlay-primary-btn { transition: none; }
}
body.reduced-motion .mode-tab .live-dot { animation: none; }

/* ---------- Home-Bildschirm-App (iOS): feste Höhe aus viewport-fix.js ----------
   iOS korrigiert 100dvh/100svh beim ersten App-Start erst nachträglich; --app-h
   steht schon vor dem ersten Zeichnen fest. Nur mit html.standalone aktiv. */
@media (max-width: 600px) and (orientation: portrait) and (min-height: 521px) {
  html.standalone body:has(.fairness-body[hidden]),
  html.standalone body.mode-crash { height: var(--app-h, 100dvh); min-height: var(--app-h, 100dvh); }
  html.standalone .app:not(:has(.fairness-body:not([hidden]))),
  html.standalone body.mode-crash .app {
    height: var(--app-h, 100dvh) !important;
    max-height: var(--app-h, 100dvh) !important;
    min-height: 0 !important;
  }
  html.standalone .boot-screen { height: var(--app-h, 100dvh); bottom: auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
  html.standalone, html.standalone body { height: var(--app-h, 100svh); max-height: var(--app-h, 100svh); }
  html.standalone .app {
    height: calc(var(--app-h, 100svh) - max(6px, var(--safe-bottom)) - 8px) !important;
    max-height: calc(var(--app-h, 100svh) - max(6px, var(--safe-bottom)) - 8px) !important;
  }
  html.standalone body.mode-crash .app {
    height: calc(var(--app-h, 100dvh) - 12px) !important;
    max-height: calc(var(--app-h, 100dvh) - 12px) !important;
  }
}