:root{
  --bg-ground:#2c3423;
  --bg-panel:#1b2016;
  --accent-green:#3ecf5b;
  --accent-red:#d9503b;
  --text-light:#f2ead9;
  --text-dim:#b7ad97;
  --toggle-off:#4a4438;
  --toggle-on:#3ecf5b;
  --border-col:#6b5f45;
  --app-max-width:640px; /* max. šířka hry — na počítači se hra neroztahuje, zůstává sloupec jako na mobilu uprostřed okna */
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#0d0f0a;
  color:var(--text-light);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  overscroll-behavior:none;
}
#app{
  display:flex; flex-direction:column;
  width:100%; height:100dvh;
  max-width:var(--app-max-width); margin:0 auto;
  container-type:inline-size; /* rozměry v cqw se počítají z šířky hry, ne okna (stejné proporce jako na mobilu) */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  background:var(--bg-ground);
  box-shadow:0 0 40px rgba(0,0,0,.6); /* oddělení sloupce hry od okolí na širokém okně */
}

/* --- horni panel: mapa arény --- */
#mapPanel{ position:relative; flex:0 0 32%; padding:12px 16px 6px; min-height:0; }
#mapCanvas{ width:100%; height:100%; display:block; border-radius:8px; border:3px solid var(--border-col); background:#25301f; }
#scoreLabel{ position:absolute; top:24px; left:30px; font-weight:800; font-size:clamp(13px,3.4cqw,20px); letter-spacing:.5px; text-shadow:0 2px 4px rgba(0,0,0,.7); z-index:90; } /* nad zatmavenym pozadim identifikacniho overlaye (z-index:80), at je pridani bodu videt i behem nej */
@keyframes scoreGain{ 0%{ transform:scale(1); } 35%{ transform:scale(1.3); color:#f2c94c; text-shadow:0 0 10px rgba(242,201,76,.8); } 100%{ transform:scale(1); color:var(--text-light); text-shadow:0 2px 4px rgba(0,0,0,.7); } }
@keyframes scoreLoss{ 0%{ transform:scale(1); } 35%{ transform:scale(1.15); color:#d9503b; text-shadow:0 0 10px rgba(217,80,59,.8); } 100%{ transform:scale(1); color:var(--text-light); text-shadow:0 2px 4px rgba(0,0,0,.7); } }
#scoreLabel.gain{ animation:scoreGain .6s ease; display:inline-block; }
#scoreLabel.loss{ animation:scoreLoss .6s ease; display:inline-block; }
#devBadge{ position:absolute; bottom:14px; left:26px; font-size:9px; font-weight:700; letter-spacing:1px; color:var(--text-dim); background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px; pointer-events:none; } /* oznaceni „ve vyvoji“ (MVP je verejne na webu) */
#menuBtn{ position:absolute; top:12px; right:22px; background:none; border:none; color:var(--text-light); display:flex; flex-direction:column; align-items:center; gap:3px; font-size:22px; cursor:pointer; padding:4px; }
#menuBtn span{ font-size:9px; font-weight:700; letter-spacing:1px; color:var(--text-dim); }

/* --- nápověda k ovládání (js/ui/help.js): přepínač NÁPOVĚDA / MAPA vedle MENU, panel přes mapu pod horní řádkou --- */
#helpToggle{ position:absolute; top:19px; right:70px; width:min(33cqw,136px); z-index:15; } /* svisle na střed tlačítka MENU; širší než dolní přepínače, ať se vejde „NÁPOVĚDA“ */
#helpToggle .stateOpt{ font-size:9px; letter-spacing:.2px; }
#helpPanel{ position:absolute; top:58px; left:22px; right:22px; bottom:12px; display:flex; flex-direction:column; background:rgba(20,24,16,.93); border:1px solid var(--border-col); border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.45); z-index:15; overflow:hidden; }
#helpPanel[data-mode="closed"]{ display:none; }
#helpPanel[data-mode="min"]{ bottom:auto; } /* minimalizovaný = jen lišta s názvem stránky */
#helpPanel[data-mode="min"] #helpBody, #helpPanel[data-mode="min"] .helpFooter{ display:none; }
#helpPanel[data-mode="min"] #helpTitle{ cursor:pointer; }
/* během minihry je nápověda i její přepínač nad zatmavením overlaye (z-index:80), jinak by nešla číst ani zapnout */
#app.helpOverIdentify #helpPanel, #app.helpOverIdentify #helpToggle{ z-index:85; }
.helpHeader{ display:flex; align-items:center; gap:2px; padding:4px 4px 4px 12px; border-bottom:1px solid rgba(107,95,69,.5); flex-shrink:0; }
#helpPanel[data-mode="min"] .helpHeader{ border-bottom:none; }
#helpTitle{ flex:1; min-width:0; font-size:12px; font-weight:800; letter-spacing:.5px; color:var(--accent-green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.helpIconBtn{ background:none; border:none; color:var(--text-dim); font-size:15px; line-height:1; width:30px; height:28px; border-radius:6px; cursor:pointer; flex-shrink:0; }
.helpIconBtn:active{ background:rgba(255,255,255,.08); }
.helpIconBtn:disabled{ opacity:.25; cursor:default; }
#helpBody{ flex:1; min-height:0; overflow-y:auto; touch-action:pan-y; padding:6px 12px 6px 10px; font-size:12px; line-height:1.45; color:var(--text-light); user-select:text; -webkit-user-select:text; }
#helpBody ul{ margin:0; padding-left:16px; }
#helpBody li{ margin:3px 0; }
#helpBody b{ color:#f2c94c; font-weight:700; }
.helpFooter{ display:flex; align-items:center; justify-content:center; gap:10px; padding:2px 4px; border-top:1px solid rgba(107,95,69,.5); flex-shrink:0; }
#helpPageNum{ font-size:10.5px; font-weight:700; color:var(--text-dim); min-width:40px; text-align:center; }

#menuPanel{ position:absolute; top:48px; right:14px; background:var(--bg-panel); border:1px solid var(--border-col); border-radius:10px; padding:6px; min-width:180px; box-shadow:0 8px 20px rgba(0,0,0,.45); display:none; z-index:20; }
#menuPanel.open{ display:block; }
.menuToggleRow{ width:100%; background:none; border:none; display:flex; align-items:center; gap:10px; padding:9px 8px; cursor:pointer; color:var(--text-light); font-size:12.5px; font-weight:600; text-align:left; border-radius:6px; }
.menuToggleRow:active{ background:rgba(255,255,255,.06); }
.menuToggleRow[aria-pressed="true"] .toggleTrack{ background:var(--toggle-on); }
.menuToggleRow[aria-pressed="true"] .toggleKnob{ left:23px; }
.menuRowIcon{ width:46px; flex-shrink:0; text-align:center; font-size:17px; } /* ikona v řádku menu bez přepínače — stejná šířka jako přepínač, ať texty lícují */

/* --- stredni panel: detekcni pohled (svet + civka) --- */
#worldPanel{ flex:1 1 auto; position:relative; padding:6px 16px; min-height:0; }
#worldCanvas{ width:100%; height:100%; display:block; border-radius:8px; }

/* --- spodni panel: ovladani --- */
#controls{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:8px 22px calc(16px + env(safe-area-inset-bottom,0px)); gap:8px; }
.ctrlCol{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.toggleBtn{ background:none; border:none; color:var(--text-dim); display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-align:center; line-height:1.3; padding:2px; }
.toggleTrack{ width:46px; height:25px; border-radius:14px; background:var(--toggle-off); position:relative; transition:background .18s; }
.toggleKnob{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#f2ead9; transition:left .18s; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.toggleBtn[aria-pressed="true"] .toggleTrack{ background:var(--toggle-on); }
.toggleBtn[aria-pressed="true"] .toggleKnob{ left:23px; }
.toggleBtn.disabled{ opacity:.3; pointer-events:none; }

/* Prepinace STAVU (Long/Short kmit, Search/Dig) — na rozdil od .toggleBtn/.menuToggleRow vyse
   (ktere jsou genuinni zapnuto/vypnuto, napr. HUD prepinac v menu) tenhle vzdy zobrazuje OBA
   nazvy stavu vedle sebe a jen zvyrazni ten aktualni — je hned jasne "ktery ze dvou rezimu",
   ne jen "je to zapnute nebo ne". data-active="left"/"right" rika, ktera strana je aktivni. */
.stateToggle{ position:relative; display:flex; width:min(30cqw,124px); height:30px; border-radius:15px; background:var(--toggle-off); border:1px solid var(--border-col); cursor:pointer; padding:0; }
.stateToggle .stateHighlight{ position:absolute; top:2px; left:2px; width:calc(50% - 3px); height:24px; border-radius:12px; background:var(--toggle-on); transition:left .18s; }
.stateToggle[data-active="right"] .stateHighlight{ left:calc(50% + 1px); }
.stateToggle .stateOpt{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; letter-spacing:.3px; color:var(--text-dim); transition:color .18s; }
.stateToggle[data-active="left"] .stateOptLeft{ color:#0d1a0f; }
.stateToggle[data-active="right"] .stateOptRight{ color:#0d1a0f; }
.stateToggle.disabled{ opacity:.3; pointer-events:none; }

.roundBtn{ background:rgba(255,255,255,.06); border:2px solid var(--border-col); border-radius:50%; width:62px; height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-dim); cursor:pointer; }
.roundBtn .ic{ font-size:20px; }
.roundBtn .lb{ font-size:8.5px; font-weight:700; margin-top:2px; letter-spacing:.5px; }
.roundBtn.active{ border-color:var(--accent-green); color:var(--accent-green); box-shadow:0 0 12px rgba(62,207,91,.5); }
.roundBtn.disabled{ opacity:.3; pointer-events:none; }

#joyBase{ width:min(28cqw,140px); height:min(28cqw,140px); border-radius:50%; border:3px solid rgba(255,255,255,.3); background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02)); position:relative; touch-action:none; }
#joyKnob{ position:absolute; width:44%; height:44%; left:28%; top:28%; border-radius:50%; background:#f2ead9; box-shadow:0 3px 6px rgba(0,0,0,.45); }

#toast{ position:fixed; left:50%; bottom:calc(20% + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(8px); background:rgba(18,20,14,.92); color:var(--text-light); padding:10px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; max-width:78cqw; text-align:center; z-index:50; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#identifyOverlay{ position:fixed; inset:0; background:rgba(8,9,6,.86); display:none; align-items:center; justify-content:center; z-index:80; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
#identifyOverlay.open{ display:flex; }
.identifyCard{ width:100%; max-width:380px; background:var(--bg-panel); border:1px solid var(--border-col); border-radius:14px; padding:16px; box-shadow:0 12px 32px rgba(0,0,0,.55); }
.identifyTitle{ text-align:center; font-weight:800; letter-spacing:1px; font-size:13px; color:var(--text-dim); margin-bottom:10px; }
#identifyCanvas{ width:100%; height:38vh; max-height:260px; display:block; border-radius:10px; background:#2c3423; touch-action:none; cursor:pointer; }
.identifyRounds{ text-align:center; font-size:11.5px; color:var(--text-dim); margin:8px 0 12px; }

.identifyCats{ display:flex; flex-direction:column; gap:8px; }
.identifyCatBtn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border-col); border-radius:8px; padding:10px 12px; cursor:pointer; color:var(--text-light); }
.identifyCatBtn .catLabel{ font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--text-dim); width:64px; text-align:left; flex-shrink:0; }
.identifyCatBtn .catValue{ flex:1; text-align:center; font-size:12.5px; font-weight:600; }
.identifyCatBtn .catIndex{ font-size:9.5px; font-weight:600; color:var(--text-dim); width:32px; text-align:right; flex-shrink:0; }
.identifyCatBtn .catPts{ font-size:11px; font-weight:700; color:var(--accent-green); width:28px; text-align:right; flex-shrink:0; display:inline-block; }
/* uhodnutá kategorie: zelený rámeček, podklad i text (zamčená, už se necykluje) */
.identifyCatBtn.locked{ cursor:default; border-color:var(--accent-green); background:rgba(62,207,91,.16); }
.identifyCatBtn.locked .catValue{ color:var(--accent-green); }
@keyframes catPtsPulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.6); color:#f2c94c; text-shadow:0 0 8px rgba(242,201,76,.7); } 100%{ transform:scale(1); color:var(--accent-green); text-shadow:none; } }
.catPts.pulse{ animation:catPtsPulse .5s ease; }
@keyframes catShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-5px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(2px); } }
.identifyCatBtn.shake{ animation:catShake .4s ease; }

#identifyResult{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-col); text-align:center; }
#identifyResult.show{ display:block; }
.identifyResultName{ font-weight:800; font-size:15px; margin-bottom:4px; }
.identifyResultDesc{ font-size:11.5px; color:var(--text-dim); margin-bottom:10px; }
.identifyBreakdown{ font-size:11.5px; color:var(--text-light); line-height:1.6; margin-bottom:12px; white-space:pre-line; }
#identifyContinueBtn{ width:100%; background:var(--accent-green); border:none; border-radius:8px; padding:11px; font-weight:800; letter-spacing:.5px; font-size:12.5px; color:#0d1a0f; cursor:pointer; }