/* Host-Editor (Vorbereiten): Spielbrett als Navigation links, eine Frage rechts.
   Alle Regeln hängen an .host-editor-layout bzw. .host-dashboard. */

/* Kopfzeile des Host-Bereichs */
.host-dashboard{max-width:1600px}
/* Pokémon- und Schnitzeljagd-Host: gleiche Breite wie der Jeopardy-Host, die Karte drumherum nimmt weniger Rand weg. */
.pokemon-host-container>.card,.scavenger-host-container>.card{padding:16px}
@media(max-width:700px){.pokemon-host-container>.card,.scavenger-host-container>.card{padding:10px}}
.host-dash-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.host-dash-bar h1{margin:0 8px 0 0;font-size:24px}
.host-dash-bar select{flex:1 1 260px;min-width:0;max-width:520px}

.host-editor-layout{display:flex;flex-direction:column;gap:14px}
.host-editor-layout .card{padding:16px;border-radius:16px}
.host-editor-layout h3{margin:0;font-size:16px}

/* Werkzeugleiste (Vorbereiten/Spielen/Verlauf …), Raumcode, Spieleransicht in einer Zeile */
.he-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.he-qol{flex:1 1 640px;min-width:0}
.he-qol:empty{display:none}
.he-qol #qol-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:8px 10px;border-radius:12px}
.he-qol .qol-actions{display:flex;flex-wrap:wrap;gap:6px}
.he-qol #qol-toolbar button{padding:7px 12px;font-size:14px}
.he-qol #qol-draft-status{color:var(--text-muted)}
.he-qol #qol-draft-status:empty{display:none}
.he-top-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto;min-width:0;max-width:100%}
.he-room{display:flex;align-items:center;gap:8px;color:var(--text-muted);white-space:nowrap}
.he-room .code{font-size:20px;letter-spacing:3px}
.he-name{display:flex;align-items:flex-end;gap:8px;min-width:0}
.he-name .he-field{flex:1 1 auto}
.he-name button{white-space:nowrap}

/* Zwei Spalten */
.he-main{display:grid;grid-template-columns:minmax(360px,560px) minmax(0,1fr);gap:18px;align-items:start}
.he-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.he-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.he-card-head button{padding:6px 12px;font-size:14px}

/* Mini-Spielbrett */
.he-board{display:grid;grid-template-columns:repeat(var(--he-cols,5),minmax(0,1fr));gap:6px}
.he-cat{min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border-radius:8px;background:var(--panel2);border:1px solid #315da0;font-weight:800;font-size:13px;color:var(--category-text);text-align:center}
.he-cat span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.he-cat .he-reveal{padding:1px 7px;font-size:10px;line-height:1.4;min-height:0;border-radius:6px}
.he-tile{position:relative;min-width:0;height:52px;padding:0;display:grid;place-items:center;border-radius:8px;background:#12315f;border:1px solid #315da0;color:var(--tile-points-text);font-size:18px;font-weight:800;cursor:pointer}
.he-tile:hover{border-color:var(--accent)}
.he-tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.he-tile.is-current{background:#1d4a8a;border:2px solid var(--accent);box-shadow:0 0 0 3px rgba(244,197,66,.28)}
.he-tile.is-played .he-points{opacity:.45;text-decoration:line-through}
.he-tile-empty{cursor:default;color:var(--text-muted);font-size:14px}
.he-badge{position:absolute;top:3px;right:4px;padding:1px 5px;border-radius:5px;background:var(--accent);color:#07142d;font-size:9px;font-weight:800;line-height:1.4}
.he-media{position:absolute;bottom:2px;left:6px;font-size:11px;color:#cfdaf0}
.he-missing,.he-missing-dot{width:8px;height:8px;border-radius:50%;background:#ff8f6b;display:inline-block}
.he-missing{position:absolute;bottom:5px;right:6px}
.he-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;color:var(--text-muted)}
.he-legend .he-missing-dot{margin-right:6px}

/* Board-Design direkt am Spielbrett */
.he-design .board-design-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;padding:0;background:none;border:0}
.he-design .board-design-control label{font-size:13px;font-weight:700;color:var(--text-muted);margin:0}
.he-design .board-design-control select{flex:1 1 180px;min-width:0}
.he-design .board-design-control .small{flex-basis:100%;color:var(--text-muted)}

/* Teams (eingeklappt mit Kurzübersicht) */
.he-teams-card>summary{display:flex;align-items:baseline;gap:12px;cursor:pointer;font-weight:800;list-style:none}
.he-teams-card>summary::before{content:"▸";color:var(--text-muted)}
.he-teams-card[open]>summary::before{content:"▾"}
.he-teams-summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px;color:var(--text-muted)}
.he-teams-summary b{color:var(--accent)}
.he-teams-card[open] .he-teams{margin-top:12px}
.he-add-team{margin-top:10px}
.he-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.he-team{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 10px;border-radius:10px;background:rgba(7,20,45,.6);border:1px solid #24406b}
.he-team-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.he-team-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.he-team-name .team-name-member+.team-name-member::before{content:" & "}
.he-team-score{color:var(--accent);font-weight:800;white-space:nowrap}
.he-team-actions{display:flex;gap:6px}
.he-team-actions input{width:84px;flex:1 1 auto;min-width:0}
.he-team-actions button{padding:6px 11px}
.he-team.empty-team{opacity:.7}

/* Einstellungen (eingeklappt) */
.he-settings>summary{display:flex;gap:12px;cursor:pointer;font-weight:800;list-style:none}
.he-settings>summary::before{content:"▸";color:var(--text-muted)}
.he-settings[open]>summary::before{content:"▾"}
.he-settings-body{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.he-settings-body .row{flex-wrap:wrap}
.he-background .row select{flex:1 1 200px;min-width:0}

/* Bearbeitungsfeld */
.he-panel{position:sticky;top:12px;display:flex;flex-direction:column;max-height:calc(100vh - 24px);max-height:max(460px,calc(100dvh - var(--he-top,24px) - 16px));padding:0!important;overflow:hidden}
.he-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #24406b}
.he-step{width:40px;height:40px;padding:0;font-size:24px;line-height:1}
.he-panel-title{display:flex;flex-direction:column;min-width:0}
.he-panel-title .small{color:var(--text-muted)}
.he-panel-points{color:var(--accent)}
.he-panel-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.he-panel-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px;overscroll-behavior:contain}
.he-panel-body .category-editor,.he-panel-body .clue-editor{margin:0;padding:0;border:0;background:none;box-shadow:none}
.he-panel-body .category-editor:not(.is-current),.he-panel-body .clue-editor:not(.is-current){display:none}
.he-category-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:14px}
.he-category-row .he-field{flex:1 1 auto}
.he-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;font-size:13px;font-weight:700;color:var(--text-muted)}
.he-panel-body .clue-main-row{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin:0}
.he-panel-body .clue-main-row textarea{min-height:110px;resize:vertical}
.he-group{display:flex;flex-direction:column;gap:8px;margin-top:16px;min-width:0}
.he-group-label{font-size:13px;font-weight:700;color:var(--text-muted)}
.he-types{display:flex;flex-wrap:wrap;gap:8px}
.he-types .estimate-toggle{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 13px;border:1px solid #315da0;border-radius:999px;cursor:pointer;font-weight:700}
.he-types .estimate-toggle:has(input:checked){background:var(--accent);border-color:var(--accent);color:#07142d}
.he-types .estimate-toggle input{margin:0;accent-color:#07142d}
.he-panel-body .tips-editor{margin-top:10px}
.he-media-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
.he-uploads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.he-uploads .media-upload{display:flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:6px;border:1px dashed #315da0;border-radius:10px;text-align:center;cursor:pointer}
.he-uploads .media-upload:hover{border-color:var(--accent)}
.he-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.he-previews:not(:has(.media-block)){display:none}
.he-previews .media-block{margin:0}
.he-panel-body .clue-status{margin-top:12px;color:var(--text-muted)}
.he-savebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-top:1px solid #24406b;background:rgba(7,20,45,.88)}
.he-savebar .small{color:var(--text-muted);flex:1 1 260px}
.he-savebar button{padding:10px 24px;font-size:16px}

/* Schmale Bildschirme: untereinander, ohne festgehaltenes Bearbeitungsfeld */
@media (max-width:1000px){
  .he-main{grid-template-columns:minmax(0,1fr)}
  .he-panel{position:static;max-height:none}
  .he-panel-body{overflow:visible}
}
@media (max-width:640px){
  .host-dash-bar h1{flex-basis:100%}
  .host-editor-layout .card{padding:12px}
  .he-board{gap:4px}
  .he-tile{height:46px;font-size:15px}
  .he-cat{font-size:11px}
  .he-panel-body .clue-main-row{grid-template-columns:minmax(0,1fr)}
  .he-media-groups{grid-template-columns:minmax(0,1fr)}
  .he-panel-actions{margin-left:0;width:100%}
}

/* Speichern immer als gelbe Hauptaktion; Werkzeugleiste etwas kompakter */
.he-savebar button.primary{font-weight:800}
/* Der aktive Modus (Vorbereiten/Spielen) bleibt gelb markiert, auch wenn Speichern die Hauptaktion ist. */
.host-editor-layout .he-qol #qol-toolbar button.primary{background:var(--accent);border-color:var(--accent);color:var(--button-primary-text)}
.he-qol #qol-toolbar button{padding:6px 10px;font-size:13px}

/* Im Spielen-Modus bleibt nur das Spielbrett sichtbar, wie bisher */
body:has(.host-board-scene) #app>.container>.host-dash-bar{display:none}
/* Moderator-Notiz je Frage (nur Host) */
.he-host-note{margin-top:12px}.he-host-note textarea{min-height:64px;resize:vertical}

/* Schnitzeljagd-Host im Aufbau des Jeopardy-Editors */
.scavenger-host-layout .he-panel-body .scavenger-riddle-editor:not(.is-current){display:none}
.scavenger-host-layout .he-panel-body .scavenger-riddle-editor{margin:0;padding:0;border:0;background:none}
.scavenger-host-layout [onclick^="toggleScavengerRiddleCollapse"]{display:none}
.scavenger-host-layout .scav-board{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.scavenger-host-layout .scav-tile{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 6px}
.scavenger-host-layout .scav-tile .he-points{font-size:20px;line-height:1}
.scavenger-host-layout .scav-tile-title{max-width:100%;font-size:11px;font-weight:600;color:#cfdaf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scavenger-host-layout .he-teams-card .scorebar{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.scavenger-host-layout .he-teams-card .score{margin:0}
.scavenger-host-layout .scav-top .he-name{flex:1 1 360px;max-width:560px}
.scavenger-host-layout .he-background .row{flex-wrap:wrap}
.scavenger-host-layout .scav-top{flex-wrap:wrap}.scavenger-host-layout .scav-top .he-top-right{flex-wrap:wrap;margin-left:0}
.scavenger-host-layout .he-teams-card .score{padding:10px 12px}.scavenger-host-layout .he-teams-card .score b{font-size:16px}.scavenger-host-layout .he-teams-card .team-score{font-size:18px}