/* Die Schmiede · presentation build. One responsive composition, no video layers. */
:root {
  color-scheme: dark;
  --bg-0: #0e1011;
  --bg-2: #1b1d1e;
  --bg-3: #27282a;
  --text: #f3ede3;
  --text-dim: #c0b9ae;
  --text-mute: #aaa49a;
  --copper-soft: #eabb80;
  --ember: #ee934f;
  --hot: #ffe2b4;
  --safe: #a2d6da;
  --line: #ffffff12;
  --line-strong: #ffffff24;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font);
}
body {
  padding: calc(54px + var(--safe-top)) 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
button,
input,
select,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 4px;
}
button {
  touch-action: manipulation;
}
a {
  color: var(--copper-soft);
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 40%, #64401d25, transparent 65%),
    radial-gradient(ellipse at 90% 90%, #64747e12, transparent 50%), #0e1011;
}
.demo-ribbon {
  position: absolute;
  top: calc(15px + var(--safe-top));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #c8b58f;
  z-index: 2;
}
.app {
  position: relative;
  width: min(1140px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: 76px minmax(480px, 1fr) 46px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #17191a;
  overflow: hidden;
  box-shadow: 0 24px 100px #0006;
}
.topbar {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  padding: 14px 22px;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.topbar-main {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.13em;
  margin-left: 5px;
  white-space: nowrap;
}
.topbar-sep {
  height: 24px;
  width: 1px;
  background: var(--line-strong);
}
.top-stat {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 18px;
}
.top-stat-label {
  font-size: 11px;
  color: var(--text-mute);
}
.top-stat-value {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #ffffff04;
  color: var(--text-dim);
}
.icon-btn:hover {
  background: #ffffff0c;
  color: var(--hot);
}
.live-feed {
  grid-row: 3;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 22px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  min-width: 0;
  background: #131516;
}
.live-dot {
  width: 5px;
  height: 5px;
  background: var(--safe);
  border-radius: 50%;
  flex-shrink: 0;
}
.live-feed-note {
  color: var(--text-mute);
}
.live-feed ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.live-feed li {
  color: var(--text-dim);
}
.live-feed .log-win {
  color: var(--safe);
}
.live-feed .log-break {
  color: #efa18e;
}
.live-feed .log-vein {
  color: var(--hot);
}
.scene {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 480px;
  background: #15100d;
  --mood: #ff8c39;
}
.scene-bg,
.bg-still,
.vignette,
.ambient-embers,
.scene-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-bg {
  z-index: -3;
}
.bg-still {
  background: url("assets/img/bg-forge-landscape.webp?v=v42") center/cover;
  opacity: 0.67;
}
.vignette {
  z-index: -2;
  background:
    linear-gradient(#100d0bc9, transparent 52%, #100e0cd9),
    radial-gradient(ellipse at 50% 50%, transparent 20%, #0b0c0d99 100%);
}
.scene-frame {
  box-shadow: inset 0 0 80px #0003;
}
.scene-kicker {
  position: absolute;
  top: 26px;
  width: 100%;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: #d6b99a;
}
.multiplier-display {
  position: absolute;
  z-index: 8;
  top: 64px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}
.mult-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d6c2ac;
  margin-bottom: 8px;
}
#multiplier-value {
  display: inline-block;
  font-size: 72px;
  font-weight: 500;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #ffe5bf;
  text-shadow: 0 2px 20px #f9773026;
}
.pulse {
  animation: pulse 0.3s ease-out;
}
@keyframes pulse {
  50% {
    transform: scale(1.07);
  }
}
.forge {
  position: absolute;
  width: 310px;
  height: 310px;
  left: 50%;
  bottom: 63px;
  transform: translateX(-50%);
  isolation: isolate;
}
.anvil-img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 16px 12px #0007);
}
.ingot-wrap {
  position: absolute;
  left: 42%;
  top: -13%;
  width: 37%;
  height: 37%;
  z-index: 3;
  transform: rotate(-4deg);
  transition: filter 0.25s;
  filter: drop-shadow(0 2px 5px #ff802666);
}
.ingot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}
.ingot-heat-aura {
  position: absolute;
  inset: 35% 0;
  z-index: -1;
  background: #f57a2c55;
  filter: blur(16px);
  border-radius: 50%;
}
.ingot-wrap[data-heat="glut"] {
  filter: saturate(0.8) brightness(0.88) drop-shadow(0 1px 4px #f9632933);
}
.ingot-wrap[data-heat="weissglut"] {
  filter: saturate(0.6) brightness(1.4) drop-shadow(0 0 9px #ffd49988);
}
.ingot-wrap[data-stage="1"] {
  filter: saturate(0.1) brightness(0.65);
}
.fire-glow {
  position: absolute;
  left: 25%;
  right: 15%;
  bottom: 90px;
  height: 160px;
  background: radial-gradient(ellipse, #ee762f24, transparent 65%);
  z-index: -1;
}
.scene.heat-glut {
  --mood: #d0522a;
}
.scene.heat-weissglut {
  --mood: #ffe6ae;
}
.scene-stats {
  position: absolute;
  bottom: 20px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  z-index: 6;
}
.scene-stats > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scene-stats > div:last-child {
  text-align: right;
}
.scene-stats span {
  font-size: 10px;
  color: #d6c2ac;
}
.scene-stats strong {
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.round-message {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 45%;
  z-index: 10;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  padding: 15px 8px;
  border: 1px solid #f1d5ac33;
  border-radius: 8px;
  background: #16191aed;
  color: var(--hot);
  font-size: 19px;
  font-weight: 600;
  transform: translateY(5px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.round-message.show {
  opacity: 1;
  transform: none;
}
.round-message.broken {
  color: #ffb19e;
}
.round-message.win {
  color: #b9e4e6;
}
.hammer-layer {
  position: absolute;
  left: 48%;
  top: -26%;
  width: 40%;
  height: 40%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.hammer-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 70% 80%;
}
.hammer-layer.striking {
  opacity: 1;
}
.hammer-layer.striking .hammer-img {
  animation: hammerStrike 0.4s ease-out;
}
@keyframes hammerStrike {
  0% {
    transform: rotate(-45deg) translateY(-30px);
  }
  42% {
    transform: rotate(20deg) translateY(25px);
  }
  100% {
    transform: rotate(-20deg);
    opacity: 0;
  }
}
.ingot-wrap.impact .ingot-img {
  animation: impact 0.25s ease-out;
}
@keyframes impact {
  50% {
    transform: scaleX(1.04) scaleY(0.94);
  }
}
.anvil-img.shake {
  animation: shake 0.3s ease-out;
}
@keyframes shake {
  25% {
    transform: translateY(2px);
  }
  65% {
    transform: translateY(-1px);
  }
}
.ingot-wrap.breaking {
  animation: breaking 0.7s forwards;
}
@keyframes breaking {
  30% {
    opacity: 1;
    filter: brightness(2);
  }
  100% {
    transform: translateY(20px) scale(0.4);
    opacity: 0;
  }
}
.ingot-wrap.quenching {
  animation: quench 1.4s forwards;
}
@keyframes quench {
  to {
    filter: saturate(0.1) brightness(0.65);
  }
}
.vein-lit .ingot-img {
  animation: pulse 0.7s;
}
.impact-shock {
  position: absolute;
  left: 55%;
  top: 8%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffe2ac;
  opacity: 0;
  z-index: 6;
}
.impact-shock.burst {
  animation: shock 0.4s;
}
@keyframes shock {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}
.sparks {
  position: absolute;
  left: 10%;
  right: 0;
  top: -22%;
  bottom: 35%;
  z-index: 6;
  pointer-events: none;
}
.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffe5ac;
  border-radius: 50%;
  animation: spark 0.65s ease-out forwards;
}
.spark.big {
  width: 5px;
  height: 5px;
}
@keyframes spark {
  to {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}
.ambient-embers {
  z-index: 2;
  overflow: hidden;
}
.ember-particle {
  position: absolute;
  bottom: 18%;
  width: 3px;
  height: 3px;
  background: #ffb66d;
  border-radius: 50%;
  animation: emberRise linear forwards;
  opacity: 0;
}
@keyframes emberRise {
  15% {
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--ex), -140px);
    opacity: 0;
  }
}
.quench-fx {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}
.quench-fx.active {
  opacity: 1;
}
.quench-bucket,
.water-splash {
  display: none;
}
.steam-cloud {
  position: absolute;
  left: 38%;
  top: 0;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d3faff66, transparent 70%);
  opacity: 0;
}
.quench-fx.active .steam-cloud {
  animation: steam 1.4s ease-out;
}
@keyframes steam {
  30% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-65px) scale(2);
    opacity: 0;
  }
}
.workbench {
  grid-column: 2;
  grid-row: 2;
  padding: 30px 24px 20px;
  border-left: 1px solid var(--line);
  background: linear-gradient(140deg, #202224, #17191a);
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--copper-soft);
}
h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  margin: 12px 0;
}
.workbench-intro p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 26px;
}
.heat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.heat-title,
.bet-label {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.heat-risk {
  font-size: 10px;
  color: var(--copper-soft);
}
.heat-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.heat-segment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 2px 11px;
  min-height: 82px;
  border-radius: 8px;
  border: 1px solid #ffffff1c;
  background: #111415;
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.heat-segment:hover {
  border-color: #d8ab72;
}
.heat-segment[aria-checked="true"] {
  border-color: #dca363;
  background: linear-gradient(#65422b66, #2b211b);
  box-shadow: inset 0 2px #e8ac68;
}
.heat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.heat-gain {
  font-size: 10px;
  color: var(--copper-soft);
}
.heat-sub {
  font-size: 10px;
  color: var(--text-dim);
}
.heat-icon {
  display: none;
}
.heat-sub::after {
  content: " Bruch";
  font-size: 8px;
}
.controls {
  margin-top: 22px;
}
.bet-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bet-label > span {
  font-size: 8px;
  color: var(--text-mute);
}
.bet-row {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 6px;
}
.bet-btn,
.bet-input-wrap input {
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #111415;
  color: var(--text);
  text-align: center;
  width: 100%;
}
.bet-btn {
  color: var(--text-dim);
}
.bet-input-wrap input {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.bet-input-wrap input::-webkit-inner-spin-button {
  appearance: none;
}
.bet-btn:disabled,
.bet-input-wrap input:disabled {
  opacity: 0.5;
}
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.action-btn {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 3px;
  overflow: hidden;
  transition:
    filter 0.15s,
    opacity 0.15s;
}
.strike-btn {
  order: -1;
  background: linear-gradient(135deg, #e9ad70, #c58147);
  color: #25170c;
  box-shadow:
    inset 0 1px #ffffff40,
    0 4px 18px #ad60231a;
}
.collect-btn {
  background: #243638;
  color: #d0e6e6;
  border-color: #638e914d;
}
.action-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}
.action-btn:not(:disabled):hover {
  filter: brightness(1.12);
}
.action-btn:not(:disabled):active {
  transform: translateY(1px);
}
.vision-action-icon {
  width: 22px;
  height: 22px;
}
.vision-action-icon svg {
  width: 100%;
  height: 100%;
}
.vision-action-plate {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.action-name {
  font-size: 13px;
  font-weight: 700;
}
.action-hint {
  font-size: 10px;
}
.hold-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: #c7f6f5;
}
.controls-hint {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 12px 0 18px;
  min-height: 35px;
  text-align: center;
}
.fairness-toggle,
.help-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--text-dim);
  border: 0;
  border-top: 1px solid var(--line);
  padding: 13px 0;
  font-size: 11px;
  text-align: left;
}
.fairness-toggle {
  justify-content: flex-start;
  gap: 8px;
}
.fairness-icon {
  color: var(--safe);
}
.fairness-body {
  background: #111415;
  padding: 12px;
  border-radius: 8px;
  font-size: 10px;
}
.fairness-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.fairness-row code {
  overflow-wrap: anywhere;
  color: var(--copper-soft);
}
.fairness-row input {
  width: 100%;
  background: #232628;
  border: 1px solid var(--line-strong);
  padding: 8px;
  color: var(--text);
}
.fairness-explain {
  line-height: 1.6;
}
.demo-note {
  font-size: 9px;
  color: var(--text-mute);
  text-align: center;
  margin: 8px 0 0;
}
.colorblind .heat-segment[aria-checked="true"]::before {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #07090bc7;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay-card {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  background: #202224;
  padding: 28px;
  box-shadow: 0 24px 90px #0008;
}
.overlay-card h2 {
  font: 400 25px var(--font-display);
  margin: 0 32px 12px 0;
}
.overlay-card h3 {
  font-size: 11px;
  color: var(--copper-soft);
  letter-spacing: 0.07em;
  margin: 20px 0 12px;
}
.overlay-sub,
#tut-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 22px;
}
.overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: #ffffff08;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
}
.overlay-primary-btn,
.overlay-secondary-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  margin: 6px 0;
  padding: 9px;
}
.overlay-primary-btn {
  background: #e4a268;
  color: #21170e;
  font-weight: 600;
}
.overlay-secondary-btn {
  background: transparent;
  color: var(--text-dim);
}
.session-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.session-stats > div {
  background: #131617;
  border-radius: 7px;
  padding: 12px;
}
.session-stats dt {
  font-size: 10px;
  color: var(--text-mute);
}
.session-stats dd {
  margin: 7px 0 0;
  font-size: 18px;
  color: var(--hot);
}
.settings-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  margin: 10px 0;
}
.settings-row input[type="number"] {
  width: 66px;
  padding: 7px;
}
.settings-row input[type="range"] { width: 135px; max-width: 45%; accent-color: #dea169; }
.settings-row select {
  max-width: 135px;
  padding: 6px;
}
.settings-row input,
.settings-row select {
  background: #111415;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}
.settings-row input[type="checkbox"] {
  accent-color: #dea169;
  width: 18px;
  height: 18px;
}
.settings-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-mute);
}
.tut-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 18px;
}
.dot {
  width: 6px;
  height: 6px;
  background: #ffffff30;
  border-radius: 50%;
}
.dot.active {
  background: #e7ac73;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gallery-empty {
  grid-column: 1/-1;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}
.gallery-card {
  background: #111415;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}
.gallery-card img {
  width: 100%;
  height: 80px;
  object-fit: contain;
}
.gallery-card strong,
.gallery-card span {
  display: block;
  font-size: 12px;
}
.gallery-card span {
  color: var(--text-mute);
}
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #111314;
  transition: opacity 0.25s;
}
.boot-screen.done {
  opacity: 0;
  pointer-events: none;
}
.boot-ember {
  width: 14px;
  height: 14px;
  background: #ffc381;
  box-shadow: 0 0 45px #e9813e;
  border-radius: 50%;
  animation: pulse 1s infinite;
}
.boot-title {
  font: 28px var(--font-display);
  letter-spacing: 0.08em;
  margin: 25px 0 10px;
}
.boot-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(370px, 90vw);
  z-index: 550;
  pointer-events: none;
  display: flex;
  gap: 6px;
  flex-direction: column;
}
.toast {
  background: #252a2b;
  border: 1px solid #ffffff2a;
  border-radius: 9px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 8px 30px #0005;
}
.toast.show {
  opacity: 1;
}
.toast-ok {
  color: #bfe7d9;
}
.toast-error {
  color: #ffc4b5;
}
.offline-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 95vw;
  z-index: 650;
  background: #653b24;
  color: #fff0df;
  padding: 10px 16px;
  border: 1px solid #ddad72;
  border-radius: 8px;
  font-size: 12px;
}
body.skin-kupfer .ingot-img {
  filter: hue-rotate(-12deg);
}
body.skin-damast .ingot-img {
  filter: saturate(0.6);
}
body.skin-sternenerz .ingot-img {
  filter: hue-rotate(230deg);
}
body.theme-ember .scene {
  background: #361607;
}
body.theme-night .bg-still {
  filter: saturate(0.45);
}
@media (min-width: 1400px) and (min-height: 850px) {
  .app {
    grid-template-rows: 80px minmax(610px, 1fr) 46px;
  }
  .forge {
    width: 380px;
    height: 380px;
    bottom: 72px;
  }
  .multiplier-display {
    top: 82px;
  }
  #multiplier-value {
    font-size: 88px;
  }
  .scene-kicker {
    top: 35px;
  }
  .workbench {
    padding-top: 18px;
  }
  .workbench-intro p {
    margin-bottom: 14px;
  }
}
@media (max-width: 850px) {
  body {
    padding: calc(32px + var(--safe-top)) 12px 16px;
    align-items: flex-start;
  }
  .app {
    width: min(500px, 100%);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }
  .topbar {
    padding: 12px;
    gap: 7px;
  }
  .topbar-main {
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
  }
  .brand-name {
    font-size: 13px;
    margin: 0;
    letter-spacing: 0.1em;
  }
  .topbar-sep {
    display: none;
  }
  .top-stat {
    margin: 0;
    padding: 0;
    gap: 7px;
  }
  .top-stat-label {
    font-size: 9px;
  }
  .top-stat-value {
    font-size: 12px;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
  .scene {
    min-height: 300px;
    height: clamp(300px, 39vh, 390px);
    flex: none;
  }
  .scene-kicker {
    top: 17px;
    font-size: 8px;
    letter-spacing: 0.18em;
  }
  .multiplier-display {
    top: 39px;
  }
  .mult-label {
    font-size: 8px;
    margin-bottom: 5px;
  }
  #multiplier-value {
    font-size: 48px;
  }
  .forge {
    width: 195px;
    height: 195px;
    bottom: 32px;
  }
  .scene-stats {
    left: 18px;
    right: 18px;
    bottom: 14px;
  }
  .scene-stats span {
    font-size: 8px;
  }
  .scene-stats strong {
    font-size: 14px;
  }
  .workbench {
    padding: 18px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .workbench-intro {
    display: none;
  }
  .heat-segment {
    min-height: 72px;
    padding: 10px 2px;
    gap: 5px;
  }
  .controls {
    margin-top: 16px;
  }
  .action-row {
    margin-top: 14px;
  }
  .action-btn {
    min-height: 68px;
    flex-direction: row;
    gap: 10px;
  }
  .controls-hint {
    min-height: 0;
    margin: 10px 0;
  }
  .live-feed {
    order: 5;
    min-height: 35px;
    padding: 8px 16px;
    font-size: 10px;
  }
  .fairness-toggle,
  .help-link {
    padding: 11px 0;
  }
  .demo-note {
    margin: 5px 0;
  }
  .demo-ribbon {
    top: 11px;
    font-size: 8px;
  }
  .round-message {
    font-size: 16px;
  }
  .toast-host {
    bottom: 12px;
  }
  .scene .bg-still {
    background-image: url("assets/img/bg-forge-portrait.webp?v=v42");
    background-position: center 58%;
  }
}
@media (max-width: 850px) and (max-height: 800px) {
  .scene {
    min-height: 235px;
    height: 235px;
  }
  .scene-kicker {
    display: none;
  }
  .multiplier-display {
    top: 14px;
  }
  #multiplier-value {
    font-size: 42px;
  }
  .forge {
    width: 170px;
    height: 170px;
    bottom: 15px;
  }
  .scene-stats {
    bottom: 12px;
  }
  .workbench {
    padding: 13px 16px;
  }
  .heat-segment {
    min-height: 66px;
  }
  .controls {
    margin-top: 12px;
  }
  .help-link,
  .demo-note {
    display: none;
  }
  .action-btn {
    min-height: 63px;
  }
  .live-feed {
    display: none;
  }
}
@media (max-width: 360px) {
  body {
    padding-inline: 6px;
  }
  .workbench {
    padding-inline: 12px;
  }
  .heat-sub::after {
    font-size: 7px;
  }
  .action-btn {
    gap: 6px;
  }
  .action-name {
    font-size: 12px;
  }
  .scene-stats {
    left: 12px;
    right: 12px;
  }
}
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Compact compositions keep both actions visible on laptops and short phones. */
@media (min-width: 851px) and (max-height: 850px) {
  body {
    padding-top: 40px;
    padding-bottom: 16px;
  }
  .demo-ribbon {
    top: 12px;
  }
  .app {
    grid-template-rows: 64px minmax(480px, 1fr) 36px;
  }
  .topbar {
    padding: 10px 20px;
  }
  .workbench {
    padding: 22px 24px 15px;
  }
  .workbench-intro h1 {
    font-size: 25px;
    margin: 8px 0;
  }
  .workbench-intro p {
    margin: 0 0 18px;
    font-size: 11px;
    line-height: 1.6;
  }
  .heat-segment {
    min-height: 74px;
    padding: 10px 2px;
    gap: 6px;
  }
  .controls {
    margin-top: 16px;
  }
  .action-row {
    margin-top: 14px;
  }
  .action-btn {
    min-height: 72px;
    padding: 9px 3px;
  }
  .controls-hint {
    margin: 10px 0;
    min-height: 18px;
  }
  .fairness-toggle,
  .help-link {
    padding: 11px 0;
  }
  .scene-kicker {
    top: 20px;
  }
  .multiplier-display {
    top: 50px;
  }
  #multiplier-value {
    font-size: 66px;
  }
  .forge {
    bottom: 58px;
  }
}
@media (max-width: 850px) {
  .scene {
    height: clamp(250px, 32vh, 320px);
    min-height: 250px;
  }
  .forge {
    width: 180px;
    height: 180px;
    bottom: 32px;
  }
  .workbench {
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .heat-segment {
    min-height: 68px;
  }
  .help-link {
    padding: 9px 0;
  }
}
@media (max-width: 850px) and (max-height: 800px) {
  .scene {
    height: 210px;
    min-height: 210px;
  }
  .forge {
    width: 155px;
    height: 155px;
    bottom: 16px;
  }
  .multiplier-display {
    top: 12px;
  }
  #multiplier-value {
    font-size: 38px;
  }
  .mult-label {
    font-size: 7px;
  }
  .workbench {
    padding: 12px 16px;
  }
  .heat-segment {
    min-height: 62px;
    padding: 8px 2px;
  }
  .controls {
    margin-top: 10px;
  }
  .bet-row input,
  .bet-btn {
    height: 38px;
  }
  .bet-label {
    margin-bottom: 7px;
  }
  .action-row {
    margin-top: 10px;
  }
  .action-btn {
    min-height: 58px;
    padding: 9px 2px;
  }
  .controls-hint {
    margin: 8px 0;
  }
  .fairness-toggle {
    padding: 9px 0;
  }
  .topbar {
    padding: 9px 12px;
  }
}
/* All contact effects share the billet's anchor, on the anvil's striking face. */
.ingot-wrap::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 4%;
  top: 63%;
  height: 5%;
  background: #150b0688;
  filter: blur(1px);
  border-radius: 50%;
  z-index: -1;
}
.ingot-wrap .ingot-img {
  transform-origin: 50% 65%;
}
.hammer-layer {
  left: 48%;
  top: -30%;
  width: 45%;
  height: 45%;
}
.hammer-img {
  transform-origin: 86% 88%;
}
@keyframes hammerStrike {
  0% {
    transform: rotate(45deg) translate(12%, -15%);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: rotate(35deg) translate(5%, -10%);
  }
  40% {
    transform: rotate(-10deg) translate(0, 15%);
  }
  52% {
    transform: rotate(-5deg) translate(0, 10%);
  }
  100% {
    transform: rotate(35deg) translate(5%, -10%);
    opacity: 0;
  }
}
.scene.strike-shake {
  animation: sceneImpact 0.26s ease-out;
}
@keyframes sceneImpact {
  25% {
    translate: 0 1px;
  }
  60% {
    translate: 0 -1px;
  }
}
.ingot-fragment {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url("assets/img/ingot-feuer.webp?v=v42") center/contain no-repeat;
  pointer-events: none;
  animation: fragmentFly 0.7s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  transform-origin: center;
}
@keyframes fragmentFly {
  15% {
    filter: brightness(1.8);
  }
  100% {
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
    opacity: 0;
  }
}
.steam-wisp {
  position: absolute;
  left: 48%;
  top: 0;
  width: 25%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d6f7ff55, transparent 70%);
  animation: steamWisp 1.1s ease-out forwards;
  pointer-events: none;
}
@keyframes steamWisp {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  25% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--drift), -70px) scale(1.6);
  }
}
.quench-fx.active {
  background: radial-gradient(ellipse at 60% 7%, #a4e9ff33, transparent 28%);
  animation: quenchLight 1.4s ease-out;
}
@keyframes quenchLight {
  0%,
  100% {
    opacity: 0;
  }
  25%,
  65% {
    opacity: 1;
  }
}
.ingot-wrap.breaking .ingot-img {
  visibility: hidden;
}
.ingot-wrap.breaking {
  animation: none;
  filter: none;
}
.ingot-wrap.breaking .ingot-heat-aura {
  opacity: 0;
}
.ingot-wrap.quenching {
  animation: quench 1.4s ease-out forwards;
}
.scene[data-result="win"] .scene-stats strong {
  color: #bce9e4;
}
.scene[data-result="broken"] .scene-stats strong {
  color: #efac9a;
}
.water-stream {
  position: absolute;
  top: -13%;
  left: 61%;
  width: 4%;
  height: 30%;
  border-radius: 40%;
  transform-origin: 50% 100%;
  background: linear-gradient(
    90deg,
    transparent,
    #c9f6ffb3,
    #8bd1eb66,
    transparent
  );
  opacity: 0;
  rotate: 30deg;
}
.quench-fx.active .water-stream {
  animation: waterPour 0.85s ease-in-out;
}
@keyframes waterPour {
  0% {
    opacity: 0;
    scale: 1 0;
  }
  25%,
  65% {
    opacity: 0.8;
    scale: 1 1;
  }
  100% {
    opacity: 0;
    scale: 1 0;
  }
}
@media (max-width: 850px) and (max-height: 600px) {
  body {
    padding-top: 25px;
    padding-bottom: 8px;
  }
  .demo-ribbon {
    top: 8px;
  }
  .scene {
    height: 176px;
    min-height: 176px;
  }
  .forge {
    width: 126px;
    height: 126px;
    bottom: 14px;
  }
  .multiplier-display {
    top: 9px;
  }
  .mult-label {
    display: none;
  }
  #multiplier-value {
    font-size: 33px;
  }
  .scene-stats span {
    font-size: 7px;
  }
  .scene-stats strong {
    font-size: 12px;
  }
  .topbar {
    padding-block: 7px;
  }
  .workbench {
    padding-block: 10px;
  }
  .heat-segment {
    min-height: 57px;
    gap: 4px;
  }
  .controls-hint {
    font-size: 10px;
  }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  body {
    padding: 6px 8px;
    height: 100dvh;
    overflow: hidden;
    align-items: flex-start;
  }
  .app {
    display: grid;
    width: min(960px, 100%);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 10px;
  }
  .scene { min-height: 0; height: 100%; }
  .workbench { min-height: 0; overflow: auto; padding-top: 8px; padding-bottom: 4px; }
  .controls-hint { display: none; }
  .fairness-toggle { padding: 4px 0; }
  .action-btn { min-height: 48px; }
  .heat-segment { min-height: 44px; padding-block: 3px; }
  .topbar {
    padding: 6px 12px;
    grid-column: 1/-1;
  }
  .topbar-main {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .top-stat {
    margin-left: auto;
  }
  .scene {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 270px;
  }
  .scene-kicker,
  .workbench-intro,
  .live-feed,
  .help-link,
  .demo-note {
    display: none;
  }
  .multiplier-display {
    top: 16px;
  }
  .mult-label {
    display: block;
  }
  .forge {
    width: 175px;
    height: 175px;
    bottom: 35px;
  }
  .workbench {
    grid-column: 2;
    grid-row: 2;
    padding: 12px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .heat-segment {
    min-height: 55px;
    padding: 7px 2px;
    gap: 4px;
  }
  .heat-head {
    margin-bottom: 6px;
  }
  .controls {
    margin-top: 9px;
  }
  .bet-label {
    margin-bottom: 6px;
  }
  .bet-row input,
  .bet-btn {
    height: 34px;
  }
  .action-row {
    margin-top: 9px;
  }
  .action-btn {
    min-height: 54px;
  }
  .controls-hint {
    margin: 6px 0;
    font-size: 10px;
  }
  .fairness-toggle {
    padding: 7px 0;
  }
  .scene-stats {
    bottom: 12px;
  }
}
/* Reserve separate vertical space for the number and the billet's visible pixels. */
@media (max-width: 850px) and (min-height: 801px) {
  .scene { height: 300px; min-height: 300px; }
  .forge { width: 175px; height: 175px; bottom: 22px; }
  .multiplier-display { top: 28px; }
  #multiplier-value { font-size: 44px; }
}
@media (max-width: 850px) and (max-height: 800px) {
  .forge { width: 130px; height: 130px; bottom: 10px; }
}
@media (max-width: 850px) and (max-height: 600px) {
  .forge { width: 110px; height: 110px; bottom: 10px; }
}
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .forge { width: 160px; height: 160px; bottom: 25px; }
  .multiplier-display { top: 12px; }
  #multiplier-value { font-size: 30px; }
}
@media (max-width: 850px) and (min-height: 801px) and (max-height: 830px) {
  .help-link { display: none; }
}

/* All heat sprites share the 7-degree long edge and visible left end.
   The billet keeps its bottom contact center fixed on the anvil. */
.ingot-wrap {
  left: 35.092%; top: -7.418%; width: 51.36%; height: 51.36%;
  transform: none; filter: drop-shadow(0 1px 1px #160c09cc);
}
.ingot-wrap[data-heat="glut"], .ingot-wrap[data-heat="weissglut"] {
  filter: drop-shadow(0 1px 1px #160c09cc);
}
.ingot-wrap[data-stage="1"] { filter: saturate(.12) brightness(.6); }
.ingot-wrap::after { display: none; }
.ingot-heat-aura { inset: 42% 18%; opacity: .25; }
.ingot-wrap[data-heat="glut"] .ingot-heat-aura { background: #ba321544; }
.ingot-wrap[data-heat="weissglut"] .ingot-heat-aura { background: #ffe9ab66; }
@media (max-width: 850px) and (min-height: 801px) { body { padding-bottom: 8px; } }
/* Atmosphere: fixed artwork + small, composited fire/light layers. The plane
   retains the image's 3:2 proportions so the fire never leaves its furnace. */
.scene { container-type: size; }
.scene-bg {
  inset: auto 0 auto auto;
  top: 50%;
  width: max(100cqw, 150cqh);
  height: max(100cqh, 66.6667cqw);
  transform: translateY(-50%);
  overflow: hidden;
}
.scene .bg-still {
  background-image: url('assets/img/forge-atmosphere.webp?v=v42');
  background-position: center;
  background-size: 100% 100%;
  opacity: .91;
}
.vignette {
  background: linear-gradient(180deg, #0b1117c7 0%, #0a101a20 38%, transparent 65%, #0b0d10c9 100%),
    radial-gradient(ellipse at 52% 57%, transparent 38%, #080d1545 100%);
}
.furnace-fire {
  position: absolute; left: 89.1%; top: 36.8%; width: 9.3%; height: 14.2%;
  overflow: visible; mix-blend-mode: screen; opacity: .95;
}
.flame { transform-origin: 50% 100%; transform-box: fill-box; animation: flameDance 1.3s ease-in-out infinite alternate; }
.flame-one { animation-duration: .85s; animation-delay: -.6s; }
.flame-three { animation-duration: 1.05s; animation-delay: -.9s; }
@keyframes flameDance {
  0% { transform: scale(.88,.74) skewX(-5deg); opacity: .54; }
  38% { transform: scale(1.04,1.04) skewX(4deg); opacity: .9; }
  70% { transform: scale(.94,.84) skewX(-2deg); opacity: .68; }
  100% { transform: scale(1,1.08) skewX(3deg); opacity: .86; }
}
.furnace-light {
  position: absolute; inset: 15% -12% 12% 57%;
  background: radial-gradient(ellipse at 70% 44%, #ff9d3245, #df5b1519 40%, transparent 70%);
  mix-blend-mode: screen; animation: furnaceBreathe 3.1s ease-in-out infinite alternate;
}
@keyframes furnaceBreathe { 0%,100% { opacity: .45; } 32% { opacity: .8; } 65% { opacity: .56; } }
.floor-reflection {
  position: absolute; left: 43%; right: -10%; top: 64%; bottom: 0;
  background: radial-gradient(ellipse at 80% 53%, #f99a2226, transparent 62%);
  mix-blend-mode: screen; animation: furnaceBreathe 3.1s ease-in-out infinite alternate;
}
.moon-haze {
  position: absolute; left: 4%; top: 10%; width: 42%; height: 79%;
  background: linear-gradient(108deg, transparent 12%, #aacfea0b 30%, #b4e2ff11 40%, transparent 64%);
  clip-path: polygon(5% 0, 23% 0, 100% 100%, 35% 100%);
  animation: moonDrift 12s ease-in-out infinite alternate;
}
@keyframes moonDrift { from { opacity: .4; transform: translateX(-3px); } to { opacity: .85; transform: translateX(4px); } }
.forge::before {
  content: ''; position: absolute; bottom: 0; left: 19%; width: 67%; height: 10%;
  background: radial-gradient(ellipse, #030403a6, transparent 70%); z-index: 0;
}
/* Station remains 12% smaller. Impact effects follow the billet surface. */
.anvil-img { inset: 12% auto auto 6%; width: 88%; height: 88%; }
/* Billet reduced to 60% of v35 around its contact center (55%,55%). */
.hammer-layer { top: -20.36%; }
.impact-shock { top: 17.64%; }
.sparks { top: -12.36%; }
.quench-fx { translate: 0 9.64%; }
body.page-hidden *, body.page-hidden *::before { animation-play-state: paused !important; }
body.reduced-motion .furnace-fire, body.reduced-motion .furnace-light,
body.reduced-motion .floor-reflection, body.reduced-motion .moon-haze,
body.reduced-motion .furnace-coals, body.reduced-motion .furnace-smoke { display: none; }
@media (prefers-reduced-motion: reduce) {
  .furnace-fire, .furnace-light, .floor-reflection, .moon-haze, .furnace-coals, .furnace-smoke, .forge-drift { display: none; }
}
@media (max-width: 850px) {
  .scene .bg-still { background-image: url('assets/img/forge-atmosphere-mobile.webp?v=v42'); }
}

/* Small layers stay registered to the furnace on both background sizes. */
.flame-core { animation-duration: .72s; animation-delay: -.35s; }
.flame-four { animation-duration: .93s; animation-delay: -.2s; }
.flame-five { animation-duration: 1.21s; animation-delay: -.8s; }
.furnace-coals {
  position: absolute; left: 88.8%; top: 49.2%; width: 10.5%; height: 2.6%;
  background: radial-gradient(ellipse, #ffe6a6b3, #ff5d2470 35%, transparent 72%);
  mix-blend-mode: screen; animation: coalPulse 1.8s ease-in-out infinite alternate;
}
@keyframes coalPulse {
  0%, 100% { opacity: .45; transform: scaleX(.93); }
  35% { opacity: .95; transform: scaleX(1.03); }
  68% { opacity: .65; transform: scaleX(.98); }
}
.furnace-smoke { position: absolute; left: 88%; top: 25%; width: 11%; height: 26%; overflow: hidden; }
.furnace-smoke i {
  position: absolute; left: 18%; bottom: 0; width: 65%; height: 48%;
  background: radial-gradient(ellipse, #b4a18b22, transparent 67%);
  border-radius: 50%; opacity: 0; animation: chimneySmoke 5.5s linear infinite;
}
.furnace-smoke i:nth-child(2) { animation-delay: -1.8s; }
.furnace-smoke i:nth-child(3) { animation-delay: -3.6s; }
@keyframes chimneySmoke {
  15% { opacity: .6; }
  65% { opacity: .35; }
  100% { opacity: 0; transform: translate(-12%, -130%) scale(1.7); }
}
.furnace-light { animation-duration: 1.7s; }
.floor-reflection { animation-duration: 1.7s; animation-delay: -.15s; }
.ember-particle { box-shadow: 0 0 4px #ffae4e88; }
.forge-drift {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.fire-mote {
  position: absolute;
  width: var(--sz, 8px);
  height: calc(var(--sz, 8px) * 1.7);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff8d2 0%, #ffc15a 38%, #ff6a1a 72%, transparent 78%);
  box-shadow: 0 0 10px #ff8a2ecc;
  mix-blend-mode: screen;
  opacity: 0;
  animation: fireDrift linear forwards;
  will-change: transform, opacity;
}
.fire-mote-spark {
  height: var(--sz, 4px);
  border-radius: 50%;
  background: #ffe7a8;
  box-shadow: 0 0 6px #ffb15a;
}
@keyframes fireDrift {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.45) rotate(var(--rot, 0deg)); }
  14% { opacity: 0.95; }
  70% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25) rotate(calc(var(--rot, 0deg) + 28deg)); }
}
body.reduced-motion .forge-drift { display: none; }

/* Lange Druckgesten (Abschrecken halten) dürfen auf iOS/Android keine
   Textauswahl, Lupe oder Kontextmenü auslösen. Die Spieloberfläche ist
   deshalb nicht markierbar; Eingabefelder und die Fairness-Werte (Seeds zum
   Kopieren) bleiben es ausdrücklich. */
.app, .app button, .app button * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.app input, .app textarea, .fairness-body, .fairness-body * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#btn-collect, #btn-collect * { touch-action: none; }

/* Phone portrait: use the actual visible height, including iOS standalone
   safe areas. The scene takes the remaining space above the controls. */
@media (max-width: 600px) and (orientation: portrait) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    padding: calc(var(--safe-top) + 30px) max(8px, env(safe-area-inset-right, 0px))
      calc(var(--safe-bottom) + 10px) max(8px, env(safe-area-inset-left, 0px));
    align-items: flex-start;
  }
  .demo-ribbon { top: calc(var(--safe-top) + 10px); line-height: 12px; }
  .app {
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 40px);
    min-height: 0;
    flex-shrink: 0;
  }
  .topbar { flex: 0 0 auto; padding: 8px 10px; }
  .icon-btn { width: 38px; height: 38px; }
  .scene {
    flex: 1 1 0;
    height: auto;
    min-height: 154px;
    container-name: phone-forge;
  }
  .scene-kicker { display: none; }
  .multiplier-display { top: 20px; }
  .mult-label { display: block; font-size: 8px; margin-bottom: 6px; }
  #multiplier-value { font-size: clamp(38px, 14cqh, 48px); }
  .forge {
    width: clamp(110px, 60cqh, 240px);
    height: clamp(110px, 60cqh, 240px);
    bottom: clamp(16px, 7cqh, 28px);
  }
  .scene-stats { bottom: 14px; left: 16px; right: 16px; }
  .scene-stats span { font-size: 8px; }
  .scene-stats strong { font-size: 14px; }
  .workbench { flex: 0 0 auto; padding: 12px 16px 8px; }
  .live-feed, .demo-note { display: none; }
  .help-link { display: none; }
  .heat-segment { min-height: 64px; }
  .controls { margin-top: 12px; }
  .bet-row input, .bet-btn { height: 42px; }
  .action-row { margin-top: 12px; }
  .action-btn { min-height: 64px; }
  .controls-hint { margin: 10px 0; }
  .fairness-toggle { padding: 10px 0; }
  .app:has(.fairness-body:not([hidden])) { height: auto; }
  .app:has(.fairness-body:not([hidden])) .scene { flex: none; height: 260px; }
  .overlay { padding: calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px); }
  .overlay-card { max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); }
  .toast-host { bottom: calc(var(--safe-bottom) + 12px); }
  @container phone-forge (max-height: 220px) {
    .multiplier-display { top: 10px; }
    .mult-label { display: none; }
    #multiplier-value { font-size: 34px; }
  }
}
@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  .topbar { padding-block: 6px; }
  .workbench { padding: 10px 12px 6px; }
  .heat-segment { min-height: 56px; }
  .controls, .action-row { margin-top: 9px; }
  .action-btn { min-height: 56px; }
  .controls-hint { margin: 7px 0; }
  .fairness-toggle { padding: 8px 0; }
}
/* Very short windows / on-screen keyboards may scroll instead of clipping. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 520px) {
  .app { height: auto; }
  .scene { flex: none; height: 176px; }
}

/* Native-App-Layout (Handy, Hochformat): randlos über den ganzen Bildschirm
   wie eine installierte App. Keine Karte, kein Rahmen, keine Außenränder;
   Statusleiste und Home-Indikator werden über die Safe-Areas freigehalten.
   Die Demo-Kennzeichnung bleibt dauerhaft sichtbar, direkt unter der
   Statusleiste. */
@media (max-width: 600px) and (orientation: portrait) {
  html, body { overscroll-behavior: none; background: #17191a; }
  body { padding: 0; display: block; min-height: 100dvh; }
  .page-bg { display: none; }
  .smith-level { display: none; }
  .demo-ribbon {
    position: absolute;
    top: calc(var(--safe-top) + 5px);
    line-height: 12px;
    font-size: 8px;
    z-index: 3;
  }
  .app {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: calc(var(--safe-top) + 20px);
  }
  .workbench { padding-bottom: calc(var(--safe-bottom) + 6px); }
  .app:has(.fairness-body:not([hidden])) { height: auto; min-height: 100dvh; }
  /* Geschlossenes Fairness-Panel: nichts scrollt, kein Gummiband-Effekt. */
  body:has(.fairness-body[hidden]) { height: 100dvh; overflow: hidden; }
}
@media (max-width: 600px) and (orientation: portrait) and (max-height: 520px) {
  .app { height: auto; min-height: 100dvh; }
  body:has(.fairness-body[hidden]) { height: auto; overflow: visible; }
}

/* Hitze-Tempo, Einsatzchips, Barrenalter. Die Quote bleibt unberührt. */
.smith-level {
  flex: 0 0 auto;
  color: var(--copper-soft);
  letter-spacing: 0.08em;
  font-size: 10px;
  text-transform: uppercase;
}
.heat-pace {
  font-size: 9px;
  line-height: 1.15;
  color: var(--text-dim);
}
.bet-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.bet-chip {
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #111415;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bet-chip[aria-pressed="true"] {
  color: #2a1c10;
  background: linear-gradient(180deg, #f0c08a, #c8884e);
  border-color: #f2c38e;
}
.bet-chip:disabled { opacity: 0.45; }
.controls-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hammer-layer.striking-heavy .hammer-img { animation-duration: 0.72s; }
.ingot-wrap {
  --forge: 0;
  transform-origin: 51% 59%;
  transform: scale(calc(1 + var(--forge) * 0.11));
  transition: transform 0.28s ease, filter 0.25s;
}
/* Material wear shares the sprite coordinates, including growth and impact.
   Face clipping avoids any mark crossing the silhouette or hovering above it. */
.ingot-wrap .ingot-img {
  filter: saturate(calc(1 + var(--forge) * .25)) brightness(calc(1 + var(--forge) * .15));
}
.ingot-cracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.ingot-cracks .seam-core { fill: #391b10; opacity: .68; }
.ingot-cracks .seam-branch {
  fill: none; stroke: #4b2515; stroke-width: 1.35; opacity: .6;
  stroke-linecap: butt; stroke-linejoin: bevel;
}
.ingot-cracks .seam-edge {
  fill: none; stroke: #ffe1a0; stroke-width: .9; opacity: .35;
}
.ingot-cracks .seam-early { opacity: clamp(0, calc((var(--forge) - .12) * 2.5), 1); }
.ingot-cracks .seam-mid { opacity: clamp(0, calc((var(--forge) - .4) * 2), .85); }
.ingot-cracks .seam-late { opacity: clamp(0, calc((var(--forge) - .68) * 2.5), .75); }
.ingot-cracks g { transition: opacity .28s ease; }
.ingot-cracks { transform-origin: 50% 65%; }
.ingot-wrap.impact .ingot-cracks { animation: impact .25s ease-out; }
.ingot-wrap.vein-lit .ingot-cracks { animation: pulse .7s; }
.ingot-wrap.breaking .ingot-cracks { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ingot-wrap, .ingot-cracks g { transition: none; }
}
body.reduced-motion .ingot-wrap, body.reduced-motion .ingot-cracks g { transition: none; }
.ingot-heat-aura { opacity: calc(0.22 + var(--forge) * 0.95); }
.forge-mark, .live-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.forge-mark {
  position: absolute;
  z-index: 7;
  top: 10px;
  right: 12px;
  color: #f3d7b0;
  background: #1a120ccc;
  border: 1px solid #e7b07288;
}
body.mode-crash .forge-mark { display: none; }
.live-mark {
  color: #ffd0c4;
  background: #2a1210cc;
  border: 1px solid #ff5a3688;
}
body:not(.mode-crash) .scene { box-shadow: inset 0 0 0 1px #e7b07240; }
body.mode-crash .crash-stage { box-shadow: inset 0 0 0 1px #ff5a3647; }
.gallery-card.is-master strong { color: var(--hot); }
@container phone-forge (max-height: 175px) {
  .mult-label { display: none; }
  .multiplier-display { top: 2px; }
  #multiplier-value { font-size: 22px; }
  .forge { width: 78px; height: 78px; bottom: 20px; }
  .scene-stats strong { font-size: 11px; }
  .scene-stats span { font-size: 7px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .bet-chips { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .heat-segment { gap: 2px; padding: 7px 2px 6px; }
  .heat-pace { font-size: 8px; }
  .bet-chips { margin-top: 6px; gap: 4px; }
  .bet-chip { height: 26px; font-size: 11px; }
  .controls, .action-row { margin-top: 8px; }
}

/* Handy: Der Hinweis unter den Knöpfen wechselt beim ersten Schlag von zwei auf
   eine Zeile. Dadurch wuchs die Szene samt Amboss (Größe folgt der Szenenhöhe)
   und schrumpfte beim Bruch wieder — sah aus wie Hinein-/Herauszoomen.
   Feste Höhe für zwei Zeilen hält das Layout ruhig. */
@media (max-width: 850px) {
  .controls-hint { min-height: 35px; min-height: 2lh; box-sizing: content-box; }
}