/* =================================================================
   css/game.css — in-game chrome, "cozy honey-wood interior".
   Loaded AFTER static/game.css + redesign.css, so these win.
   Reskins the HUD, sidebars, panels, overlays. The gameplay canvas
   is only framed, never restyled. All class/id hooks preserved.
   ================================================================= */

/* ---------------- Topbar / canopy ---------------- */
.topbar {
  background:
    url('/static/sprites/honeycomb.svg') 0 0 / 60px auto,
    linear-gradient(180deg, #3d2b16 0%, #31220f 100%);
  background-blend-mode: soft-light, normal;
  border-bottom: 2px solid var(--border-strong);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
  padding: 9px 16px;
}
.topbar .btn.small {
  font-family: var(--hm-display);
  border-radius: 999px;
  background: rgba(255,246,224,.06);
  border: 1.5px solid var(--border-strong);
}
.topbar .btn.small:hover { background: rgba(255,207,92,.16); border-color: var(--honey); transform: translateY(-1px); }
/* Active/pressed topbar toggles (Auto-Sammler, Auto-Pickup, Aufgaben, Sound):
   restore the honey background so the dark active text stays readable.
   Needs to out-specify `.topbar .btn.small` above. */
.topbar .btn.small.active,
.topbar .btn.small[aria-pressed="true"] {
  background: linear-gradient(150deg, var(--hm-gold-soft), var(--hm-honey));
  color: #4a2c08;
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 4px 12px -5px rgba(224,124,21,.5);
}

.tab {
  font-family: var(--hm-display);
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: rgba(255,246,224,.05);
  color: var(--text-dim);
  padding: 8px 18px;
  transition: transform var(--hm-t-fast) var(--hm-ease), background var(--hm-t), color var(--hm-t);
}
.tab:hover:not(.active) { color: var(--text); transform: translateY(-1px); }
.tab.active {
  background: linear-gradient(150deg, var(--hm-gold-soft), var(--hm-honey));
  color: #4a2c08; border-color: rgba(255,255,255,.4);
  box-shadow: 0 6px 16px -6px rgba(224,124,21,.55);
}

/* HUD chips */
.hud-pill {
  font-family: var(--hm-body); font-weight: 700;
  background: linear-gradient(180deg, rgba(60,42,22,.9), rgba(42,29,14,.9));
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  padding: 6px 15px;
  box-shadow: inset 0 1px 0 rgba(255,220,140,.12);
}
#hud-score { color: var(--hm-gold); border-color: rgba(255,207,92,.5); box-shadow: inset 0 0 0 1px rgba(255,207,92,.25), 0 0 14px -4px var(--hm-glow); }

.sound-controls { border-radius: 999px; border-color: var(--border-strong); background: rgba(20,14,8,.45); }
.sound-controls input[type=range] { accent-color: var(--honey); }

/* ---------------- Threat banner ---------------- */
.threat-banner {
  background: linear-gradient(90deg, rgba(150,40,26,.96), rgba(96,24,18,.9));
  border-bottom: 2px solid #ef7d4a;
  font-family: var(--hm-display);
}
.threat-banner .threat-item { border-radius: 999px; }
.threat-banner .threat-btn { border-radius: 999px; font-family: var(--hm-body); }

/* ---------------- Hive tabs ---------------- */
.hive-tabs {
  background: linear-gradient(180deg, #3a2914 0%, #31220f 100%);
  border-bottom: 2px solid var(--border);
  padding: 8px 16px;
}
.hive-tab {
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(160deg, rgba(60,42,22,.7), rgba(42,29,14,.7));
  transition: transform var(--hm-t-fast) var(--hm-ease), border-color var(--hm-t), background var(--hm-t);
}
.hive-tab:hover { transform: translateY(-2px); background: rgba(60,42,22,.95); color: var(--text); }
.hive-tab.active {
  background: linear-gradient(150deg, rgba(255,207,92,.2), rgba(200,156,240,.12));
  border-color: var(--honey);
  box-shadow: 0 6px 16px -8px rgba(224,124,21,.5), inset 0 0 0 1px rgba(255,207,92,.3);
}
.hive-tab-name { font-family: var(--hm-display); }
.hive-tab.active .hive-tab-stats { color: var(--hm-gold); }

/* ---------------- Sidebars (parchment interior) ---------------- */
.sidebar {
  background:
    url('/static/sprites/honeycomb.svg') 0 0 / 68px auto,
    linear-gradient(170deg, #36261380 0%, #2b1d0d 100%);
  background-blend-mode: soft-light, normal;
  border-color: var(--border);
}
.sidebar h3 { color: var(--hm-honey); font-family: var(--hm-display); letter-spacing: .8px; }
.sidebar h3 small { color: var(--hm-gold); }

.sidebar-section {
  border: 2px solid var(--border);
  border-radius: 14px;
  background: rgba(20,14,8,.42);
}
.sidebar-section > summary {
  font-family: var(--hm-display);
  color: var(--hm-honey);
  background: linear-gradient(180deg, rgba(60,42,22,.75), rgba(42,29,14,.55));
}
.sidebar-section > summary::before { color: var(--hm-gold); }
.sidebar-section > summary:hover { background: rgba(70,50,26,.85); color: var(--hm-gold); }
.sidebar-section > summary small { color: var(--hm-gold); }

/* ---------------- Resource list (new SVG icons) ---------------- */
.resource-list li {
  background: linear-gradient(160deg, rgba(60,42,22,.55), rgba(42,29,14,.55));
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: background var(--hm-t), border-color var(--hm-t), transform var(--hm-t-fast);
}
.resource-list li:hover { background: rgba(70,50,26,.7); border-color: rgba(255,207,92,.25); transform: translateX(2px); }
.res-ico {
  width: 24px; height: 24px; border-radius: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.res-ico.bees   { background-image: url('/static/sprites/ico-bees.svg?v=122'); }
.res-ico.honey  { background-image: url('/static/sprites/ico-honey.svg'); }
.res-ico.nectar { background-image: url('/static/sprites/ico-nectar.svg'); }
.res-ico.wax    { background-image: url('/static/sprites/ico-wax.svg'); }
.res-ico.pollen { background-image: url('/static/sprites/ico-pollen.svg'); }
.res-label { color: var(--text-dim); font-weight: 600; }
.res-num { color: var(--text); }
.res-rate.positive { color: var(--green); }
.res-rate.negative { color: var(--red); }
/* value-change bounce (added by fx/hud.js) */
.res-num.hm-pulse, #hud-score.hm-pulse, #hud-foragers.hm-pulse { animation: hm-pop .5s var(--hm-ease-bounce); }

/* ---------------- Event log ---------------- */
.event-log li {
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(60,42,22,.5), rgba(42,29,14,.35));
  border-left-width: 3px;
}
.event-log li.ev-good { border-left-color: var(--green); }
.event-log li.ev-bad  { border-left-color: var(--red); }
.event-log li.ev-warn { border-left-color: var(--amber-3); }

/* ---------------- Roles ---------------- */
.role-row {
  background: linear-gradient(150deg, rgba(60,42,22,.65), rgba(42,29,14,.65));
  border: 1.5px solid transparent;
  border-radius: 12px;
  transition: border-color var(--hm-t), background var(--hm-t);
  /* let the name shrink/truncate so the +/- controls never overflow a narrow
     sidebar (fixes clipped "+" buttons on small widths) */
  grid-template-columns: minmax(0, auto) minmax(18px, 1fr) auto;
  min-width: 0;
}
.role-row:hover { border-color: rgba(255,207,92,.3); }
.role-name { min-width: 0; }
.role-name-text { font-family: var(--hm-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; }
.role-bar { height: 9px; border-radius: 6px; background: rgba(0,0,0,.4); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.role-bar-fill { background: linear-gradient(90deg, var(--hm-honey), var(--hm-gold)); box-shadow: 0 0 8px rgba(255,207,92,.5); border-radius: 6px; }
.role-controls button {
  border-radius: 8px; border: 1.5px solid var(--border-strong);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  transition: transform var(--hm-t-fast), background var(--hm-t);
}
.role-controls button:hover { background: var(--honey); color: #3a2408; transform: translateY(-1px); }
.role-controls button:active { transform: scale(.9); }

/* ---------------- Build panel ---------------- */
.build-btn {
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(150deg, rgba(60,42,22,.8), rgba(42,29,14,.8));
  transition: border-color var(--hm-t), background var(--hm-t), box-shadow var(--hm-t), transform var(--hm-t-fast);
}
.build-btn:hover:not(:disabled) {
  border-color: var(--honey);
  background: linear-gradient(150deg, rgba(78,56,30,.95), rgba(58,40,22,.95));
  box-shadow: 0 6px 16px -8px rgba(224,124,21,.5);
}
.build-btn.active {
  border-color: var(--honey);
  background: linear-gradient(150deg, rgba(255,207,92,.2), rgba(200,156,240,.12));
  box-shadow: 0 0 0 1px rgba(255,207,92,.4), 0 6px 16px -8px rgba(224,124,21,.45);
}
.build-btn-name { font-family: var(--hm-display); background: linear-gradient(150deg, var(--hm-gold), var(--hm-honey)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.build-btn:disabled .build-btn-name { color: var(--text-mute); background: none; -webkit-background-clip: initial; background-clip: initial; }
.build-status { border-radius: 12px; border: 2px solid var(--border); }
.build-status.build-status-ok  { border-color: rgba(166,207,99,.55); }
.build-status.build-status-bad { border-color: rgba(230,102,63,.55); }
.build-status .build-status-head { font-family: var(--hm-display); color: var(--hm-gold); }

/* ---------------- Canvas frame ---------------- */
.canvas-wrap {
  background: radial-gradient(ellipse at center, #33230f 0%, #180d04 82%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}

/* ---------------- Toasts ---------------- */
.toast {
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(60,42,22,.97), rgba(42,29,14,.97));
  font-family: var(--hm-display);
  box-shadow: var(--hm-shadow-soft);
}
.toast.good { border-color: var(--green); }
.toast.bad  { border-color: var(--red); }
.toast.warn { border-color: var(--amber-3); }

/* ---------------- Cell inspector ---------------- */
.cell-inspector {
  border-radius: 18px;
  border: 2px solid var(--border-strong);
  background: linear-gradient(155deg, rgba(60,42,22,.98), rgba(45,31,16,.98));
  box-shadow: var(--hm-shadow-card);
}
.cell-inspector-title { font-family: var(--hm-display); color: var(--hm-gold); }

/* ---------------- Pause overlay ---------------- */
.pause-overlay { background: rgba(20,11,4,.8); backdrop-filter: blur(5px); }
.pause-inner {
  border-radius: 26px;
  border: 3px solid var(--border-strong);
  background: linear-gradient(160deg, var(--hm-cream) 0%, var(--hm-cream-2) 100%);
  color: var(--hm-ink);
  box-shadow: var(--hm-shadow-card);
}
.pause-inner h2 { font-family: var(--hm-display); color: var(--hm-honey-deep); }
.pause-inner p { color: var(--hm-ink-soft); }
.pause-checklist { background: rgba(255,246,224,.5); border: 2px solid var(--hm-cream-edge); border-radius: 14px; }
.pause-checklist h3 { color: var(--hm-honey-deep); font-family: var(--hm-display); }
.pause-checklist li { color: var(--hm-ink-soft); }
.pause-checklist li::before { background: var(--hm-honey); border-color: transparent; color: #fff; }

/* ---------------- Advisor ---------------- */
.advisor-card {
  border-radius: 20px;
  border: 2px solid var(--border-strong);
  background: linear-gradient(150deg, rgba(60,42,22,.98), rgba(45,31,16,.98));
  box-shadow: var(--hm-shadow-card);
}
.advisor-badge { font-family: var(--hm-display); background: linear-gradient(150deg, var(--hm-gold-soft), var(--hm-honey)); color: #4a2c08; border-radius: 999px; }
.advisor-list li.current { background: rgba(255,207,92,.1); }
.advisor-task-title { font-family: var(--hm-display); font-weight: 600; }
.advisor-step.done, .advisor-step.current { background: linear-gradient(90deg, var(--hm-honey), var(--hm-gold)); }

/* keep mobile handle painterly */
.mobile-sheet-handle { color: var(--hm-gold); font-family: var(--hm-display); }

/* ---------------- Game-over: centre the score breakdown when there is no
   postmortem (e.g. after resigning), so the left half isn't a blank void. --- */
.gameover-body:has(#postmortem.hidden) { grid-template-columns: minmax(0, 520px) !important; justify-content: center; }
.gameover-body:has(#postmortem.hidden) .gameover-col-left { display: none; }

/* ---------------- Solo Startplatz-Auswahl (spot picker overlay) ---------------- */
.sp-spot-overlay { background: rgba(28,16,6,.72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--hm-ease); }
.sp-spot-card {
  background: linear-gradient(160deg, var(--hm-cream) 0%, var(--hm-cream-2) 100%);
  border: 3px solid #fff; outline: 2px solid var(--hm-cream-edge);
  border-radius: 26px; box-shadow: var(--hm-shadow-card);
  padding: 24px 28px; max-width: min(820px, 94vw); max-height: 92vh; overflow: auto;
  text-align: center; color: var(--hm-ink); position: relative;
  animation: hm-pop .35s var(--hm-ease-bounce);
}
.sp-spot-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url('/static/sprites/honeycomb.svg') 0 0 / 64px auto repeat; opacity: .08;
}
.sp-spot-card > * { position: relative; }
.sp-spot-title { font-family: var(--hm-display); color: var(--hm-honey-deep); font-size: clamp(22px,3vw,28px); margin: 0 0 6px; }
.sp-spot-hint { color: var(--hm-ink-soft); font-weight: 600; max-width: 640px; margin: 0 auto 14px; line-height: 1.45; }
.sp-spot-canvas {
  border: 3px solid var(--hm-cream-edge); border-radius: 16px; background: #241708;
  box-shadow: 0 10px 24px -10px rgba(46,24,6,.55), inset 0 0 40px rgba(0,0,0,.35);
  display: block; margin: 0 auto; max-width: 100%; height: auto; cursor: pointer;
}
.sp-spot-status { font-family: var(--hm-display); color: var(--hm-ink); margin-top: 12px; }
.sp-spot-legend { color: var(--hm-ink-mute); font-size: 13px; margin-top: 6px; }

/* ================================================================
   IN-GAME LAYOUT — "stage" panels
   Turn the flush columns into distinct rounded panels with gaps, so
   the board reads as a central stage flanked by two cards. CSS-only;
   scoped to ≥861px so the mobile bottom-sheet logic is untouched.
   ================================================================ */
@media (min-width: 861px) {
  .game-main {
    gap: 12px;
    padding: 12px;
    background:
      url('/static/sprites/honeycomb.svg') 0 0 / 90px auto,
      linear-gradient(180deg, #1d1408, #150d05);
    background-blend-mode: soft-light, normal;
  }
  .sidebar {
    border-radius: 18px;
    border: 2px solid var(--border);
    box-shadow: var(--hm-shadow-soft), inset 0 1px 0 rgba(255,220,140,.08);
  }
  .sidebar-left  { border-right: 2px solid var(--border); }
  .sidebar-right { border-left: 2px solid var(--border); }
  .canvas-wrap {
    border-radius: 18px;
    border: 2px solid var(--border-strong);
    box-shadow: var(--hm-shadow-card), inset 0 0 60px rgba(0,0,0,.5);
  }
}

/* HUD pills grouped into one cohesive "stat ribbon" */
.topbar .hud {
  background: rgba(20,14,8,.4);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 3px 5px;
  gap: 5px;
}
.topbar .hud .hud-pill { border-color: transparent; box-shadow: none; }
.topbar .hud #hud-score { border-color: rgba(255,207,92,.5); }

/* ================================================================
   TAGESLICHT-MODUS — Weltkarte aktiv (body.hm-daylight via fx/hud.js).
   Draußen wird ALLES hell: Topbar, Seitenleisten, Panels. Der Stock
   (ohne die Klasse) bleibt dunkel-gemütlich. Kontrast: dunkle Tinte
   (#3d2610 auf Creme ≈ 9:1), kräftige Ränder, Warnfarben bleiben satt.
   ================================================================ */
body.hm-daylight #scene-game {
  --bg: #eaf4f8; --bg-2: #f7eed8; --bg-3: #efe2c2;
  --panel: #f9f1dc; --panel-2: #f3e6c6;
  --border: #dcc48c; --border-strong: #c9a960;
  --text: #3d2610; --text-dim: #6b4a24; --text-mute: #8a6b42;
  --green: #3f7d28; --red: #b23315;
}

/* Topbar: heller Morgenhimmel */
body.hm-daylight .topbar {
  background:
    url('/static/sprites/honeycomb.svg') 0 0 / 60px auto,
    linear-gradient(180deg, #eef8fc 0%, #d9edf5 100%);
  background-blend-mode: soft-light, normal;
  border-bottom-color: #b6d6e4;
  box-shadow: 0 6px 18px -10px rgba(70, 110, 140, .35);
}
body.hm-daylight .topbar .btn.small {
  background: rgba(255,255,255,.65);
  border-color: var(--border-strong);
  color: var(--text);
}
body.hm-daylight .topbar .btn.small:hover { background: rgba(255,214,107,.35); border-color: var(--hm-honey); }
body.hm-daylight .tab { background: rgba(255,255,255,.6); border-color: var(--border-strong); color: var(--text-dim); }
body.hm-daylight .tab:hover:not(.active) { color: var(--text); }
body.hm-daylight .hud-pill {
  background: rgba(255,255,255,.75);
  border-color: var(--border-strong);
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.hm-daylight #hud-score { color: #9c5e08; border-color: #e0ac3c; box-shadow: inset 0 0 0 1px rgba(224,172,60,.4); }
body.hm-daylight .topbar .hud { background: rgba(255,255,255,.4); border-color: #cfe2ec; }
body.hm-daylight .sound-controls { background: rgba(255,255,255,.55); border-color: var(--border-strong); }

/* Hive-Tabs-Leiste */
body.hm-daylight .hive-tabs {
  background: linear-gradient(180deg, #e2f1f7 0%, #d3e8f1 100%);
  border-bottom-color: #b6d6e4;
}
body.hm-daylight .hive-tab { background: rgba(255,255,255,.7); border-color: var(--border); color: var(--text-dim); }
body.hm-daylight .hive-tab:hover { background: #fff; color: var(--text); }
body.hm-daylight .hive-tab-stats { color: var(--text-mute); }

/* Bühne: animierte Wiese scheint durch */
body.hm-daylight .game-main {
  background:
    url('/static/sprites/honeycomb.svg') 0 0 / 90px auto,
    linear-gradient(180deg, #cfe8f3, #cde9dc);
  background-blend-mode: soft-light, normal;
}
body.hm-daylight .canvas-wrap {
  background: linear-gradient(180deg, #bfe0ef, #d4ecd9);
  border-color: #a9cede;
  box-shadow: var(--hm-shadow-soft), inset 0 0 40px rgba(255,255,255,.35);
}

/* Seitenleisten: helles Pergament */
body.hm-daylight .sidebar {
  background:
    url('/static/sprites/honeycomb.svg') 0 0 / 68px auto,
    linear-gradient(170deg, #faf3df 0%, #f1e4c4 100%);
  background-blend-mode: soft-light, normal;
  border-color: var(--border);
}
body.hm-daylight .sidebar h3 { color: #a05f08; }
body.hm-daylight .sidebar h3 small { color: #9c5e08; }
body.hm-daylight .sidebar-section { background: rgba(255,255,255,.4); border-color: var(--border); }
body.hm-daylight .sidebar-section > summary {
  background: linear-gradient(180deg, rgba(255,246,220,.95), rgba(245,230,196,.8));
  color: #a05f08;
}
body.hm-daylight .sidebar-section > summary:hover { background: rgba(255,236,190,.95); color: #7c4a06; }
body.hm-daylight .sidebar-section > summary::before,
body.hm-daylight .sidebar-section > summary small { color: #9c5e08; }

/* Ressourcen, Log, Rollen, Bauen */
body.hm-daylight .resource-list li { background: rgba(255,255,255,.65); }
body.hm-daylight .resource-list li:hover { background: #fff; border-color: rgba(201,169,96,.6); }
body.hm-daylight .res-num { color: var(--text); }
body.hm-daylight .event-log li { background: rgba(255,255,255,.55); color: var(--text-dim); }
body.hm-daylight .role-row { background: rgba(255,255,255,.6); }
body.hm-daylight .role-bar { background: rgba(90,60,20,.18); box-shadow: inset 0 1px 2px rgba(90,60,20,.25); }
body.hm-daylight .role-controls button {
  background: #fffaf0; color: var(--text);
  border-color: var(--border-strong);
}
body.hm-daylight .build-btn { background: rgba(255,255,255,.65); border-color: var(--border); }
body.hm-daylight .build-btn:hover:not(:disabled) { background: #fff; }
body.hm-daylight .build-status { background: rgba(255,255,255,.6); }
body.hm-daylight .mobile-sheet-handle { color: #9c5e08; }

/* Wiese hinter dem Spiel wieder sichtbar (sonst bei Spielszene ausgeblendet) */
body.hm-daylight:has(#scene-game.active) #fx-bg { opacity: 1; }

/* Dunkle Schwebe-Karten (Berater, Toast, Zell-Inspektor) werden im
   Tageslicht zu Creme-Karten — sonst dunkle Schrift auf dunklem Grund. */
body.hm-daylight .advisor-card {
  background: linear-gradient(150deg, #fdf6e4 0%, #f4e7cc 100%);
  border-color: var(--border-strong);
}
body.hm-daylight .advisor-list li.current { background: rgba(224,172,60,.18); }
body.hm-daylight .advisor-list li.current .advisor-task-title { color: #a05f08; }
body.hm-daylight .advisor-list li::before { background: rgba(255,255,255,.7); border-color: var(--border-strong); }
body.hm-daylight .advisor-step { background: rgba(90,60,20,.2); }
body.hm-daylight .toast {
  background: linear-gradient(180deg, #fffaf0, #f7ead2);
  color: var(--text);
  border-color: var(--border-strong);
}
body.hm-daylight .cell-inspector {
  background: linear-gradient(155deg, #fdf6e4 0%, #f4e7cc 100%);
  border-color: var(--border-strong);
}
body.hm-daylight .cell-inspector-title { color: #a05f08; }