* { box-sizing: border-box; }

:root {
  --bg: #202326;
  --panel: #2b3035;
  --text: #f3f5f7;
  --muted: #aeb6bf;
  --yellow: #f1c232;
  --stone: #747b83;
  --border: rgba(255,255,255,.09);
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.04), transparent 30%), linear-gradient(145deg, #17191b, var(--bg));
  color: var(--text);
  overscroll-behavior: none;
}

body { min-height: 100vh; }
button, input { font: inherit; }
h1, h2, p { margin-top: 0; }

#app {
  width: min(1180px, calc(100% - 20px));
  margin: 0 auto;
  padding: 8px 0 12px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.topbar h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 12px;
  align-items: start;
}

.game-card, .info-card {
  background: rgba(43,48,53,.95);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

.game-card { padding: 8px; border-radius: 16px; }

.game-shell {
  position: relative;
  width: min(100%, calc((100vh - 112px) * 2 / 3), 480px);
  margin: 0 auto;
  border: 5px solid #111417;
  border-radius: 10px;
  overflow: hidden;
  background: #111417;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.35);
  touch-action: none;
}

#gameCanvas { display: block; width: 100%; height: auto; background: #191c20; }

.heat-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, calc((100vh - 112px) * 2 / 3), 480px);
  margin: 0 auto 5px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .72rem;
}
.heat-flow span:first-child { text-align: left; color: #ffbb63; }
.heat-flow span:last-child { text-align: right; color: #8bc9ff; }
.heat-arrow { color: var(--yellow); letter-spacing: .01em; font-size: .82rem; }

.side-panel { display: grid; grid-template-columns: 1fr; gap: 9px; }
.info-card { padding: 11px 13px; border-radius: 13px; }
.info-card h2 { margin-bottom: 7px; font-size: .95rem; }
.stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
.stat-row:last-child { border-bottom: 0; }
.stat-row strong { color: var(--text); overflow-wrap: anywhere; text-align: right; }
.next-card { text-align: center; }
#nextCanvas { display: block; width: 132px; max-width: 100%; height: auto; margin: 0 auto 2px; border-radius: 8px; background: #202429; }
.material-label { font-weight: 800; font-size: .9rem; }
.legend > div { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--muted); font-size: .88rem; }
.swatch { width: 23px; height: 17px; border-radius: 4px; display: inline-block; border: 2px solid rgba(0,0,0,.25); }
.swatch.masonry { background: var(--stone); }
.swatch.eps { background: var(--yellow); }

.panic-button, .primary-button, .back-button, .mobile-controls button {
  border: 0; border-radius: 10px; cursor: pointer; font-weight: 900;
  transition: transform .1s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.panic-button:active, .primary-button:active, .back-button:active, .mobile-controls button:active { transform: scale(.96); filter: brightness(1.08); }
.panic-button { padding: 10px 14px; color: #fff; background: linear-gradient(135deg, #ff3d48, #ba101b); box-shadow: 0 7px 18px rgba(255,61,72,.22); letter-spacing: .07em; }
.primary-button, .back-button { padding: 11px 18px; color: #16191c; background: linear-gradient(135deg, #ffd95c, var(--yellow)); }

.mobile-controls { display: none; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 440px); margin: 6px auto 0; }
.mobile-controls button { min-height: 48px; color: #fff; background: #3b4249; border: 1px solid rgba(255,255,255,.1); font-size: 1.35rem; touch-action: manipulation; user-select: none; }
.mobile-controls .drop-control { font-size: .72rem; color: #191b1e; background: var(--yellow); }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8,10,12,.84); backdrop-filter: blur(4px); z-index: 4; }
.overlay.visible { display: flex; }
.overlay-box { width: min(360px, 100%); padding: 20px; border-radius: 16px; background: linear-gradient(145deg, #30363c, #252a2f); border: 1px solid var(--border); text-align: center; box-shadow: 0 18px 38px rgba(0,0,0,.38); }
.overlay-box h2 { margin-bottom: 8px; }
.player-name { margin: 9px 0 14px; padding: 11px; border-radius: 9px; color: var(--yellow); background: #1a1d20; font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 900; overflow-wrap: anywhere; }
.controls-help, .small-note { margin: 10px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.highscore-list { margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.highscore-list li { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); }
.highscore-rank { color: var(--yellow); font-weight: 900; }
.highscore-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.highscore-points { font-variant-numeric: tabular-nums; font-weight: 900; }
.highscore-empty { display: block !important; color: var(--muted); text-align: center; }
.highscore-list li:last-child { border-bottom: 0; }

.panic-screen { position: fixed; inset: 0; z-index: 20; display: none; overflow: auto; padding: 20px; background: #eef1f4; color: #1d2329; }
.panic-screen.visible { display: block; }
.panic-content { display: none; width: min(900px,100%); min-height: calc(100vh - 40px); margin: 0 auto; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.panic-content.visible { display: flex; }
.caught-icon { width: 90px; height: 90px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; color: #fff; background: #d82934; font-size: 3.5rem; font-weight: 1000; }
#caughtScreen h1 { font-size: clamp(2.2rem,8vw,5rem); letter-spacing: -.06em; margin-bottom: 10px; }
#caughtScreen p { color: #59636d; font-size: 1.1rem; }
.uvalue-content { justify-content: flex-start; text-align: left; padding-top: 24px; }
.uvalue-header { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.uvalue-header h1 { margin-bottom: 4px; font-size: clamp(1.8rem,5vw,3rem); }
.uvalue-header p { color: #66717b; }
.study-badge { padding: 8px 11px; border-radius: 999px; color: #fff; background: #23384e; font-size: .72rem; font-weight: 900; }
.formula-card, .u-results, .u-grid { width: 100%; }
.formula-card { padding: 18px; margin-bottom: 14px; border-radius: 12px; background: #fff; border: 1px solid #dce1e5; }
.formula { text-align: center; font-family: Georgia,serif; font-size: clamp(1.15rem,4vw,1.8rem); }
.u-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.u-grid label { display: grid; gap: 6px; font-weight: 800; }
.u-grid input { width: 100%; padding: 11px; border: 1px solid #cfd5da; border-radius: 8px; background: #fff; }
.u-results { display: grid; gap: 8px; margin-bottom: 14px; }
.u-results > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 9px; background: #fff; border: 1px solid #dce1e5; }
.u-main-result { background: #fff6cf !important; border-color: #e3c348 !important; font-size: 1.12rem; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0,1fr) 230px; }
  .subtitle { display: none; }
}

@media (pointer: coarse), (max-width: 720px) {
  html, body { overflow-x: hidden; }
  #app { width: min(100% - 10px, 720px); padding-top: 5px; }
  .topbar { margin-bottom: 5px; }
  .topbar h1 { font-size: 1.25rem; }
  .panic-button { padding: 9px 11px; font-size: .72rem; }
  .layout { display: block; }
  .game-card { padding: 5px; }
  .game-shell, .heat-flow { width: min(100%, calc((100svh - 220px) * 2 / 3), 410px); }
  .game-shell { border-width: 4px; }
  .heat-flow { margin-bottom: 3px; }
  .mobile-controls { display: grid; }
  .side-panel { grid-template-columns: 1fr 1fr; margin-top: 8px; gap: 7px; }
  .info-card { padding: 9px; }
  .next-card, .legend { display: none; }
  .overlay { padding: 10px; }
  .overlay-box { padding: 15px; }
  .overlay-box p { margin-bottom: 7px; }
  .controls-help { display: none; }
}

@media (max-width: 430px) {
  .side-panel { grid-template-columns: 1fr; }
  .mobile-controls button { min-height: 42px; font-size: 1.15rem; }
  .mobile-controls .drop-control { font-size: .64rem; }
  .side-panel { grid-template-columns: 1fr 1fr; }
  .side-panel .info-card:first-child { grid-column: 1; }
  .side-panel .info-card:last-child { grid-column: 2; }
  .small-note { display: none; }
  .u-grid { grid-template-columns: 1fr; }
  .uvalue-header { display: block; }
  .study-badge { display: inline-block; margin-bottom: 10px; }
  .panic-screen { padding: 12px; }
  .panic-content { min-height: calc(100vh - 24px); }
}

@media (max-height: 720px) and (min-width: 721px) {
  .subtitle { display: none; }
  .info-card { padding: 8px 10px; }
  .next-card, .legend { display: none; }
  .side-panel { gap: 7px; }
}

@media (max-height: 650px) {
  #app { padding-top: 3px; }
  .topbar { margin-bottom: 3px; }
  .topbar h1 { font-size: 1.1rem; }
  .heat-flow { font-size: .7rem; }
  .game-shell, .heat-flow { width: min(100%, calc((100dvh - 205px) * 2 / 3), 390px); }
  .mobile-controls { margin-top: 4px; }
  .mobile-controls button { min-height: 38px; }
  .side-panel { margin-top: 5px; }
}

.thermal-row strong { color: var(--yellow); }
.evaluation-card { border-color: rgba(241,194,50,.25); }
.thermal-rating { padding: 9px 10px; border-radius: 9px; font-weight: 900; text-align: center; }
.thermal-rating.neutral { background: #22272c; color: var(--muted); }
.thermal-rating.excellent { background: #173d2d; color: #8ff0bd; }
.thermal-rating.good { background: #29451d; color: #c9ef83; }
.thermal-rating.medium { background: #4a3b18; color: #ffe08a; }
.thermal-rating.critical { background: #4b2025; color: #ff9aa2; }
.evaluation-text { margin: 8px 0 6px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.evaluation-scale { height: 5px; display: flex; justify-content: space-between; padding-top: 8px; border-radius: 999px; background: linear-gradient(90deg,#35b779,#f1c232,#df4d55); color: var(--muted); font-size: .62rem; }
.final-evaluation { margin: 10px 0 15px; padding: 10px; border-radius: 9px; background: #1a1d20; color: var(--muted); line-height: 1.4; }
.final-evaluation strong { color: var(--yellow); }
.highscore-points { display: grid; justify-items: end; }
.highscore-points small { color: var(--muted); font-size: .62rem; font-weight: 700; }

@media (pointer: coarse), (max-width: 720px) {
  .evaluation-card { display: block; }
  .side-panel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .evaluation-card { grid-column: 1 / -1; }
  .evaluation-text { display: none; }
  .thermal-rating { padding: 7px; font-size: .8rem; }
}


.site-back {
  color: #bfe8cc;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.site-back:hover { color: #ffffff; }
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .site-back { width: 100%; font-size: .85rem; }
}

/* Mehrere gespeicherte Spieler */
.player-picker { margin: 0 0 12px; text-align: left; }
.player-picker label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.player-picker-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.player-picker select {
  width: 100%; min-width: 0; padding: 10px 32px 10px 10px; border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); background: #171a1d; font-weight: 800;
}
.secondary-button {
  border: 1px solid rgba(241,194,50,.45); border-radius: 9px; padding: 9px 10px;
  color: var(--yellow); background: #252a2f; cursor: pointer; font-weight: 900;
}
.highscore-list li.is-current-player { margin-inline: -5px; padding-inline: 5px; border-radius: 7px; background: rgba(241,194,50,.1); }

/* Optimierte Smartphone-Anordnung */
@media (pointer: coarse), (max-width: 720px) {
  #app { width: 100%; padding: 4px 6px 12px; }
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; align-items: center; }
  .site-back { grid-column: 1 / -1; width: auto; font-size: .74rem; line-height: 1; }
  .topbar h1 { font-size: 1.08rem; white-space: nowrap; }
  .topbar > div { min-width: 0; }
  .panic-button { padding: 8px 9px; font-size: .66rem; }
  .game-card { border-radius: 12px; }
  .game-shell, .heat-flow {
    width: min(calc(100vw - 20px), calc((100svh - 245px) * 2 / 3), 370px);
  }
  .mobile-controls {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "left rotate right" "down drop drop";
    width: min(100%, 370px); gap: 5px;
  }
  .mobile-controls [data-control="left"] { grid-area: left; }
  .mobile-controls [data-control="rotate"] { grid-area: rotate; }
  .mobile-controls [data-control="right"] { grid-area: right; }
  .mobile-controls [data-control="down"] { grid-area: down; }
  .mobile-controls [data-control="drop"] { grid-area: drop; }
  .mobile-controls button { min-height: 40px; }
  .side-panel { grid-template-columns: 1fr; }
  .side-panel .info-card:first-child {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;
  }
  .side-panel .info-card:first-child .stat-row { min-width: 0; }
  .evaluation-card { grid-column: auto; }
  .highscore-list { font-size: .78rem; }
  .highscore-list li { grid-template-columns: 21px minmax(0,1fr) auto; }
}

@media (max-width: 390px) {
  .game-shell, .heat-flow { width: min(calc(100vw - 18px), calc((100svh - 235px) * 2 / 3), 345px); }
  .player-picker-row { grid-template-columns: 1fr; }
  .secondary-button { padding: 8px; }
  .overlay-box { padding: 12px; }
  .player-name { margin: 6px 0 9px; padding: 8px; }
}

@media (max-height: 680px) and (max-width: 720px) {
  .game-shell, .heat-flow { width: min(calc(100vw - 18px), calc((100dvh - 218px) * 2 / 3), 330px); }
  .mobile-controls button { min-height: 35px; }
  .heat-flow { font-size: .64rem; }
  .player-picker label, .controls-help { display: none; }
}


/* Mobile Darstellung – kompakt, vollständig sichtbar und gut bedienbar */
@media (pointer: coarse), (max-width: 720px) {
  html, body {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #app {
    width: 100%;
    max-width: 520px;
    padding: 4px 7px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 7px;
    margin-bottom: 4px;
  }

  .site-back {
    grid-column: 1 / -1;
    width: auto;
    font-size: .72rem;
    line-height: 1.1;
  }

  .topbar h1 {
    font-size: clamp(1rem, 5vw, 1.25rem);
    white-space: nowrap;
  }

  .subtitle { display: none; }
  .panic-button { padding: 7px 9px; font-size: .64rem; }
  .layout { display: block; }
  .game-card { padding: 4px; border-radius: 11px; }

  .heat-flow,
  .game-shell,
  .mobile-controls {
    width: min(calc(100vw - 22px), calc((100dvh - 190px) * 2 / 3), 360px);
  }

  .heat-flow {
    margin: 0 auto 2px;
    font-size: .62rem;
  }

  .game-shell {
    border-width: 3px;
    border-radius: 8px;
  }

  .mobile-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "left rotate right"
      "down drop drop";
    gap: 5px;
    margin: 5px auto 0;
  }

  .mobile-controls [data-control="left"] { grid-area: left; }
  .mobile-controls [data-control="rotate"] { grid-area: rotate; }
  .mobile-controls [data-control="right"] { grid-area: right; }
  .mobile-controls [data-control="down"] { grid-area: down; }
  .mobile-controls [data-control="drop"] { grid-area: drop; }

  .mobile-controls button {
    min-height: 45px;
    padding: 4px;
    border-radius: 9px;
    font-size: 1.25rem;
  }

  .mobile-controls .drop-control { font-size: .72rem; }

  .side-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
  }

  .info-card { padding: 8px; border-radius: 10px; }
  .side-panel .info-card:first-child { grid-column: 1; }
  .evaluation-card { grid-column: 1 / -1; }
  .side-panel .info-card:last-child { grid-column: 2; grid-row: 1; }
  .next-card, .legend { display: none; }
  .small-note, .evaluation-text { display: none; }
  .stat-row { padding: 4px 0; font-size: .72rem; }
  .highscore-list { font-size: .72rem; }
  .highscore-list li { padding: 4px 0; }
  .thermal-rating { padding: 6px; font-size: .76rem; }
  .evaluation-card h2, .info-card h2 { font-size: .82rem; margin-bottom: 5px; }

  .overlay { padding: 7px; }
  .overlay-box { padding: 12px; border-radius: 12px; }
  .overlay-box h2 { font-size: 1.15rem; }
  .overlay-box p { margin-bottom: 6px; font-size: .8rem; }
  .player-name { margin: 6px 0 8px; padding: 8px; font-size: .95rem; }
  .primary-button { padding: 9px 14px; }
}

@media (pointer: coarse) and (max-height: 700px), (max-width: 720px) and (max-height: 700px) {
  .heat-flow,
  .game-shell,
  .mobile-controls {
    width: min(calc(100vw - 20px), calc((100dvh - 172px) * 2 / 3), 330px);
  }

  .mobile-controls button { min-height: 39px; }
  .side-panel { margin-top: 4px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #app { max-width: none; }
  .topbar { margin-bottom: 2px; }
  .site-back, .subtitle { display: none; }
  .layout { display: grid; grid-template-columns: auto minmax(190px, 1fr); gap: 6px; }
  .game-card { width: max-content; }
  .heat-flow, .game-shell, .mobile-controls {
    width: min(calc((100dvh - 105px) * 2 / 3), 285px);
  }
  .mobile-controls button { min-height: 34px; }
  .side-panel { margin-top: 0; align-content: start; }
}