*{box-sizing:border-box}
/* Full-viewport root so the body background always covers, no grey strip */
html,body{width:100%;height:100%}
html{background:#06112a}
body{
  margin:0;overflow:hidden;
  font-family:'Courier New',monospace;
  user-select:none;
  background-image:url("../bg1.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;
  background:rgba(0,0,0,0.32);pointer-events:none;z-index:0;
}

/* ── TOP HUD (Desktop) ──────────────────────────────────────── */
#hud-top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:7px 16px;
  background:linear-gradient(180deg,rgba(0,5,30,.92) 0%,rgba(0,5,30,.72) 100%);
  border-bottom:1px solid rgba(0,180,255,.22);
}
.hb{text-align:center;min-width:54px}
.hl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
    color:rgba(120,200,255,.55);margin-bottom:1px;font-weight:bold}
.hv{font-size:22px;font-weight:bold;color:#00ccff;
    text-shadow:0 0 8px #00ccff88;font-variant-numeric:tabular-nums}
.hv.ok {color:#44ff88;text-shadow:0 0 8px #44ff8888}
.hv.warn{color:#ff5555;text-shadow:0 0 8px #ff555588}
.hv.ng-yes{color:#44ff88;text-shadow:0 0 8px #44ff8888;font-size:13px;font-weight:bold;line-height:1.3}
.hv.ng-no {color:#ffaa44;text-shadow:0 0 8px #ffaa4488;font-size:13px;font-weight:bold;line-height:1.3}
.hv.ng-wait{color:rgba(120,200,255,.45);font-size:12px;line-height:1.3}
#h-mines{color:#ffcc00;text-shadow:0 0 8px #ffcc0088}

#diff-sel,#dens-sel,#geometry-sel,#frustum-level-sel,#frustum-diff-sel{
  background:rgba(0,0,40,.92);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);padding:4px 8px;
  border-radius:5px;font-family:inherit;font-size:12px;
  cursor:pointer;outline:none;
}
#diff-sel option,#dens-sel option,#geometry-sel option,#frustum-level-sel option,#frustum-diff-sel option{background:#000a20}

.hud-btn{
  background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);padding:4px 10px;
  border-radius:5px;font-family:inherit;font-size:12px;font-weight:bold;
  cursor:pointer;letter-spacing:.5px;
  text-shadow:0 0 6px #00ccff88;
  transition:background .15s;
}
.hud-btn:hover{background:rgba(0,80,200,.5)}
.hud-btn.active{background:rgba(0,120,255,.55)}
.hud-btn.toggled-off{
  background:rgba(60,0,0,.85);color:#ff6666;
  border-color:rgba(255,80,80,.5);text-shadow:0 0 6px #ff666688;
}
.hud-btn.toggled-off .ico-strike{text-decoration:line-through}
/* Icon-only Buttons: expandieren beim Hover */
.hud-btn-ic{
  background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);
  padding:4px 6px;border-radius:5px;
  font-family:inherit;font-size:12px;font-weight:bold;
  cursor:pointer;text-shadow:0 0 6px #00ccff88;
  white-space:nowrap;overflow:hidden;
  max-width:34px;                         /* Breite im eingeklappten Zustand */
  transition:max-width .25s ease, padding .25s ease, background .15s;
  display:inline-flex;align-items:center;gap:0;
}
.hud-btn-ic:hover{
  max-width:220px;                        /* Breite ausgeklappt – groß genug für längsten Text */
  padding:4px 10px;
  background:rgba(0,80,200,.5);
  gap:4px;
}
.hud-btn-ic.active{background:rgba(0,120,255,.55)}
.hud-btn-ic.toggled-off{
  background:rgba(60,0,0,.85);color:#ff6666;
  border-color:rgba(255,80,80,.5);text-shadow:0 0 6px #ff666688;
}
.hud-btn-ic.toggled-off .ico-strike{text-decoration:line-through}
.hud-btn-ic .btx{                         /* Text-Span innerhalb des Buttons */
  overflow:hidden;max-width:0;opacity:0;
  transition:max-width .25s ease, opacity .15s ease;
  display:inline-block;white-space:nowrap;
}
.hud-btn-ic:hover .btx{max-width:180px;opacity:1;}
.hud-btn-ic#btn-pwa{ max-width:48px; }
.hud-btn-ic#btn-pwa:hover{ max-width:220px; }
#btn-design{ min-height:28px; }

/* Padding für hud-top, damit mode-toggle nicht überlappt */
#hud-top{padding-right:155px;}
/* ── BOTTOM HINTS (Desktop) ────────────────────────────────── */
#hud-bot{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
  padding:6px 18px;
  background:linear-gradient(0deg,rgba(0,5,30,.9) 0%,rgba(0,5,20,.65) 100%);
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(160,210,255,.6);font-size:12px;letter-spacing:.3px;
}
#hud-bot-left{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:0}
#hud-bot-right{color:rgba(160,210,255,.4);font-size:12px;text-align:right;flex-shrink:0;margin-left:12px}
#hud-bot-right a{color:#00ccff;text-decoration:none}
#hud-bot-right a:hover{text-decoration:underline}
#hud-bot-right span{display:inline} /* override #hud-bot span{display:flex} */
#hud-bot span{display:flex;align-items:center}
.key-btn{
  background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.35);padding:2px 8px;
  border-radius:4px;font-family:'Courier New',monospace;font-size:12px;
  cursor:pointer;letter-spacing:.3px;
  text-shadow:0 0 5px #00ccff88;transition:background .12s;
}
.key-btn:hover{background:rgba(0,80,200,.5)}

/* ── RESULT PANEL ──────────────────────────────────────────── */
#result-panel{
  position:fixed;top:0;left:0;z-index:200;
  display:none;
  background:rgba(0,3,20,.97);
  border:1px solid rgba(0,180,255,.22);
  border-radius:0 0 14px 0;
  padding:18px 28px 20px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,80,255,.25);
}
#result-panel{margin-top:58px}
#res-icon{font-size:44px;margin-bottom:4px}
/* Result/Donate round image cutouts: coffee woman (bg8) + whisky captain (bg2) */
.res-body{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.res-btns{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:130px}
.res-btns>button{margin:0!important}
/* ═══════════════════════════════════════════════════════════════════════════
   RUNDE BILDAUSSCHNITTE  (Frau=bg8 · Captain=bg2 · Willkommen-Frau=bg1)
   Jede Klasse ist EINMAL definiert und wird in BEIDEN Fenstern genutzt:
   Captain & Kaffee-Frau erscheinen im Ergebnis-Panel (Gewonnen/Game Over)
   UND im Spendenfenster → 1× ändern wirkt auf beide gleichzeitig.

   So justierst du einen Ausschnitt (in der jeweiligen .res-pic-* / .skill-pic-* Zeile):
   • VERSCHIEBEN → background-position: X% Y%
       X% = horizontal (kleiner = weiter LINKS im Foto, größer = weiter RECHTS)
       Y% = vertikal   (kleiner = weiter OBEN,          größer = weiter UNTEN)
   • ZOOM        → background-size  (280% = Standard … 400% = enger/näher rangezoomt)
   • KREISGRÖSSE → --res-pic-d in .res-pic (Standard 118px, mobil 92px) – gilt für ALLE Kreise
   ═══════════════════════════════════════════════════════════════════════════ */
.res-pic{
  --res-pic-d:118px;                                  /* ≈ "Neues Spiel"-Buttonbreite */
  width:var(--res-pic-d);height:var(--res-pic-d);border-radius:50%;flex-shrink:0;
  border:2px solid rgba(0,200,255,.7);               /* = Rahmen des aktiven Sprach-Buttons */
  box-shadow:0 0 16px rgba(0,80,255,.25);
  background-repeat:no-repeat;background-size:280%;   /* Zoom – größer = näher rangezoomt */
}
.res-pic-coffee{background-image:url("../bg8.png");background-position:30% 60%;} /* ggf. Position feinjustieren (Gesicht+Tasse) */
.res-pic-whisky{background-image:url("../bg2.png");background-position:78% 45%;background-size:425%;} /* enges Portrait: Gesicht+Glas, Hand unten gerade sichtbar */
.donate-pics{display:flex;flex-direction:row;justify-content:center;gap:18px;margin:0 0 14px}
/* Skill modal: welcome woman (bg1) left of the title+options */
.skill-body{display:flex;align-items:center;gap:20px}
.skill-main{flex:1;min-width:0}
.skill-pic-woman{background-image:url("../bg1.png");background-position:19% 42%;background-size:280%;} /* Gesicht/Lächeln der Frau aus bg1 */
@media(max-width:600px){ .skill-body{flex-direction:column;gap:12px} }
@media(max-width:560px){ .res-pic{--res-pic-d:92px} .res-btns{min-width:108px} .res-body{gap:12px} }
/* Win-Screen: Teilen + Bewerten */
.res-actions{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:14px}
.res-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 18px;
  border-radius:7px;background:rgba(0,120,200,.18);border:1px solid rgba(0,200,255,.4);color:#7dd8ff;
  font-family:inherit;font-size:13px;font-weight:bold;cursor:pointer;text-decoration:none;transition:.15s}
.res-action-btn:hover{background:rgba(0,140,220,.3)}
#res-rate-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.rate-prompt{font-size:12px;color:rgba(160,210,255,.65)}
.rate-stars{display:flex;gap:3px;font-size:28px;line-height:1}
.rate-star{color:rgba(160,180,220,.32);cursor:pointer;padding:0 2px;transition:color .1s;user-select:none}
.rate-stars:not(.locked) .rate-star:hover,.rate-star.hi{color:#ffcc33}
.rate-star.on{color:#ffcc33}
.rate-stars.locked .rate-star{cursor:default}
.rate-line{font-size:12px;color:rgba(160,210,255,.7);min-height:14px}
#res-title{font-size:26px;font-weight:bold;color:#fff;margin-bottom:6px}
#res-sub{font-size:13px;color:rgba(160,200,255,.55);margin-bottom:16px}
/* (B) Einheitliche, mittlere Größe für alle Hinweis-/Info-Texte (15px). NICHT für Footer/Copyright/Version,
   Formular-Labels/-Fehler/-Platzhalter oder Badges. In einer Zeile zentral einstellbar. */
.res-note{font-size:15px;line-height:1.45}
#res-btn{
  background:linear-gradient(135deg,#0055bb,#003399);color:#fff;
  border:none;padding:9px 28px;border-radius:7px;
  font-size:14px;cursor:pointer;font-weight:bold;
  font-family:inherit;letter-spacing:.8px;
  box-shadow:0 3px 14px rgba(0,80,255,.4);transition:all .15s;
}
#res-btn:hover{background:linear-gradient(135deg,#0077dd,#0055bb);transform:translateY(-1px)}

/* ── SHARED MODAL BASE ─────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.65);
  display:none;align-items:center;justify-content:center;
}
.modal-overlay.visible{display:flex}
/* Auth overlay must appear above all editor overlays (design 9100, custom-geo 10000) */
#auth-overlay{z-index:10200;}
/* Skill/welcome modal: soft-blur the background so the focus is on "Welcome…" + A/B/C */
#skill-overlay{background:rgba(2,6,20,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(9px);}
/* 2D-Tutorial (Option A): Hintergrund ebenfalls unscharf — bleibt durchgehend bis Schritt 4/4
   (danach hebt obFinish die Unschärfe auf). Musik ist über _musicBlocked('t2d-overlay') ohnehin aus. */
#t2d-overlay{background:rgba(2,6,20,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.modal-box{
  background:rgba(0,5,30,.98);
  border:1px solid rgba(0,180,255,.3);
  border-radius:14px;padding:30px 36px;
  max-width:clamp(460px,40vw,700px);width:90vw; /* scales with viewport: ~460px@900, ~580px@1440, ~700px@1750+ */
  max-height:80vh;overflow-y:auto;
  color:rgba(160,210,255,.88);
  font-size:clamp(13px,1.2vw,17px);line-height:1.55; /* 15px@1250px, 17px@1440px+, 13px@small */
  box-shadow:0 0 60px rgba(0,80,255,.3);
  overscroll-behavior:contain;
}
.modal-box h2{
  color:#00ccff;font-size:clamp(18px,1.8vw,24px);margin:0 0 16px; /* 20px@1110px, 24px@1330px+ */
  text-shadow:0 0 10px #00ccff88;text-align:center;
}
.modal-box h3{color:#00ccff;font-size:clamp(14px,1.3vw,18px);margin:14px 0 4px}
.modal-box p,.modal-box li{margin:3px 0}
.modal-box ul{padding-left:18px;margin:4px 0}
/* Auth-Modal (Anmelden/Registrieren): Eingabefelder + Land-Label lesbarer (überschreibt Inline-Größen) */
#auth-box input,#auth-box select{font-size:15px!important}
#reg-country-lbl,#auth-country-lbl{font-size:14px!important}
.modal-close-btn{
  display:block;margin:20px auto 0;
  background:linear-gradient(135deg,#0055bb,#003399);color:#fff;
  border:none;padding:9px 32px;border-radius:7px;
  font-size:14px;cursor:pointer;font-weight:bold;
  font-family:inherit;letter-spacing:.8px;
}
.modal-close-btn:hover{background:linear-gradient(135deg,#0077dd,#0055bb)}
/* App-Aktionsbutton (z.B. Kongregate-Länderauswahl) — gleiche Optik wie modal-close-btn, aber inline nutzbar */
.app-btn{
  background:linear-gradient(135deg,#0055bb,#003399);color:#fff;
  border:none;padding:8px 22px;border-radius:7px;
  font-size:13px;cursor:pointer;font-weight:bold;
  font-family:inherit;letter-spacing:.5px;
}
.app-btn:hover{background:linear-gradient(135deg,#0077dd,#0055bb)}

/* ── DONATE MODAL EXTRAS ───────────────────────────────────── */
.donate-row{
  background:rgba(0,20,60,.6);border:1px solid rgba(0,180,255,.15);
  border-radius:10px;padding:14px 16px;margin:12px 0;
}
.donate-row h3{margin:0 0 6px;font-size:14px}
.donate-addr{
  font-family:'Courier New',monospace;font-size:13px;
  color:rgba(160,210,255,.7);word-break:break-all;
  background:rgba(0,0,30,.5);padding:5px 8px;border-radius:5px;
  margin:6px 0;line-height:1.5;
}
.donate-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.copy-btn{
  background:rgba(0,60,160,.7);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);padding:4px 12px;
  border-radius:5px;font-family:inherit;font-size:13px;
  cursor:pointer;transition:background .12s;
}
.copy-btn:hover{background:rgba(0,100,220,.7)}
.copy-btn.copied{background:rgba(0,140,60,.7);color:#44ff88;border-color:#44ff8888}
.donate-link{color:#00ccff;text-decoration:none;font-size:13px}
.donate-link:hover{text-decoration:underline}

/* ── DEMO / AUTOPILOT ──────────────────────────────────────── */
body.demo-active::before{
  content:"";position:fixed;inset:3px;z-index:9990;
  border:3px solid #ff2222;border-radius:4px;pointer-events:none;
  box-shadow:0 0 18px rgba(255,0,0,.5),inset 0 0 18px rgba(255,0,0,.15);
  animation:demo-pulse 2s ease-in-out infinite;
}
@keyframes demo-pulse{
  0%,100%{box-shadow:0 0 18px rgba(255,0,0,.5),inset 0 0 18px rgba(255,0,0,.15);}
  50%{box-shadow:0 0 30px rgba(255,0,0,.8),inset 0 0 30px rgba(255,0,0,.25);}
}
#demo-panel{
  position:fixed;z-index:9995;top:0;left:0;display:none;
  background:rgba(10,0,0,.96);border:1px solid rgba(255,40,40,.35);
  border-radius:0 0 12px 0;padding:14px 20px 16px;min-width:240px;
  box-shadow:0 0 30px rgba(255,0,0,.2);color:rgba(255,180,180,.9);
  font-size:13px;line-height:1.5;margin-top:58px;
}
#demo-panel h3{color:#ff4444;font-size:15px;margin:0 0 8px;text-shadow:0 0 8px #ff444488;}
#demo-status{color:rgba(255,200,200,.7);font-size:12px;margin:6px 0 12px;min-height:1.4em;}
#demo-close-btn{
  background:linear-gradient(135deg,#aa0000,#660000);color:#fff;
  border:none;padding:7px 22px;border-radius:6px;
  font-size:13px;cursor:pointer;font-weight:bold;font-family:inherit;
}
#demo-close-btn:hover{background:linear-gradient(135deg,#cc2222,#aa0000)}
#demo-panel.paused{border-color:rgba(255,204,68,.5);box-shadow:0 0 30px rgba(255,180,0,.25)}
#demo-pause-btn.is-paused{background:linear-gradient(135deg,#005533,#003322)!important;color:#44ff88!important;border-color:#44ff8888!important}
#demo-cursor{position:fixed;pointer-events:none;z-index:9998;display:none;width:22px;height:22px;transform:translate(-3px,-3px);}
#demo-cursor svg{filter:drop-shadow(0 0 4px rgba(255,60,60,.8));}
#demo-click-flash{
  position:fixed;pointer-events:none;z-index:9997;display:none;
  width:36px;height:36px;border:2px solid #ff4444;border-radius:50%;
  transform:translate(-18px,-18px);animation:click-flash .35s ease-out forwards;
}
@keyframes click-flash{
  0%{opacity:1;transform:translate(-18px,-18px) scale(0.3);}
  100%{opacity:0;transform:translate(-18px,-18px) scale(1.4);}
}
#demo-explain{
  position:fixed;z-index:9999;pointer-events:none;display:none;
  max-width:280px;min-width:160px;background:rgba(0,0,0,.92);
  border:1px solid rgba(255,100,100,.5);border-radius:10px;
  padding:10px 14px;color:rgba(255,220,200,.92);font-size:15px;
  line-height:1.5;font-family:'Courier New',monospace;
  box-shadow:0 0 20px rgba(255,50,50,.3);transition:opacity .2s;
}
#demo-explain b{color:#ff8888;}
#demo-explain::before{
  content:'';position:absolute;top:12px;left:-7px;
  border-width:6px 7px 6px 0;border-style:solid;
  border-color:transparent rgba(255,100,100,.5) transparent transparent;
}
.demo-hl{color:#ffee44!important;text-shadow:0 0 8px #ffee4488!important;font-weight:bold!important;animation:hl-pulse .6s ease-in-out infinite alternate;}
.demo-hl.key-btn{background:rgba(100,80,0,.8)!important;border-color:#ffee44!important;}
@keyframes hl-pulse{from{opacity:.7}to{opacity:1}}

/* ── LANGUAGE BUTTONS ──────────────────────────────────────── */
.lang-btn{
  background:rgba(0,10,50,.85);border:2px solid transparent;
  border-radius:5px;padding:2px 5px;font-size:20px;line-height:1;
  cursor:pointer;transition:border-color .15s,background .15s;
  display:inline-flex;align-items:center;
}
.lang-btn:hover{background:rgba(0,80,200,.4)}
.lang-btn.active{border-color:rgba(0,200,255,.7);background:rgba(0,60,180,.5)}

/* ── LOGIN BUTTON ──────────────────────────────────────────────── */
#btn-login{
  position:relative;
  width:30px;height:30px;
  background:rgba(0,10,50,.85);
  border:1px solid rgba(0,180,255,.35);
  border-radius:5px;
  color:rgba(160,200,255,.7);
  cursor:pointer;
  transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;padding:0;
}
#btn-login:hover{background:rgba(0,80,200,.4);}
#btn-login.logged-in{
  border:2px solid rgba(0,200,255,.7);
  background:rgba(0,60,180,.5);
  color:#00ccff;
}
#btn-login-initial{
  display:none;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:21px;
  font-weight:bold;
  color:rgba(255,80,80,0.55);
  font-family:'Courier New',monospace;
  line-height:1;
  pointer-events:none;
  text-shadow:0 0 6px rgba(255,0,0,0.4);
}

/* ── MODE TOGGLE (always visible, top-right) ───────────────── */
#mode-toggle{
  position:fixed;top:0;right:8px;z-index:9850;
  display:flex;gap:3px;
  height:100%;           /* ALT: gleiche Höhe wie hud-top inkl. padding: 2×7px + ~38px Inhalt */
  max-height:60px;       /* Sicherheitsnetz */
  align-items:center;    /* vertikal zentrieren innerhalb dieser Höhe */
}
#mode-toggle button{
  background:rgba(0,10,50,.85);color:rgba(0,180,255,.6);
  border:1px solid rgba(0,180,255,.25);border-radius:5px;
  padding:4px 8px;font-size:15px;cursor:pointer;line-height:1;
  transition:all .15s;white-space:nowrap;font-weight:bold;
}
#mode-toggle button:hover{color:#00ccff;background:rgba(0,40,120,.5);}
#btn-mode-desktop.active,#btn-mode-mobile.active{color:#00ccff;border-color:rgba(0,200,255,.6);background:rgba(0,60,180,.5);}
#btn-mode-fs{font-size:18px;}
#btn-mode-desktop.active, #btn-mode-mobile.active,
#mode-toggle .lang-btn.active,  #btn-mode-fs.active{
  color:#00ccff;border-color:rgba(0,200,255,.6);background:rgba(0,60,180,.5);
}
/* ── MOBILE MODE OVERRIDES ─────────────────────────────────── */
body.mobile-mode #hud-top{display:none!important;}
body.mobile-mode #hud-bot{display:none!important;}

/* Hamburger */
#btn-hamburger{
  display:none;position:fixed;top:8px;left:8px;z-index:9800;
  background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);border-radius:5px;
  padding:4px 10px;font-size:20px;cursor:pointer;line-height:1;
}
body.mobile-mode #btn-hamburger{display:flex;align-items:center;}

/* Mini HUD (mobile top bar) */
#hud-mini{
  display:none;position:fixed;top:0;left:0;right:0;z-index:9700;
  height:52px;
  background:linear-gradient(180deg,rgba(0,5,30,.96) 0%,rgba(0,5,30,.78) 100%);
  border-bottom:1px solid rgba(0,180,255,.22);
  align-items:center;gap:4px;padding:0 6px 0 50px;overflow:hidden;
}
body.mobile-mode #hud-mini{display:flex;}
#hud-mini .hm-item{display:flex;flex-direction:column;align-items:center;min-width:34px;}
#hud-mini .hm-lbl{font-size:8px;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(120,200,255,.5);font-weight:bold;white-space:nowrap;}
#hud-mini .hm-val{font-size:15px;font-weight:bold;color:#00ccff;
  text-shadow:0 0 6px #00ccff88;font-variant-numeric:tabular-nums;}
#hud-mini .hm-val.ng-yes{color:#44ff88;font-size:9px;font-weight:bold;line-height:1.2;}
#hud-mini .hm-val.ng-no {color:#ffaa44;font-size:9px;font-weight:bold;line-height:1.2;}
#hud-mini .hm-val.ng-wait{color:rgba(120,200,255,.4);font-size:8px;line-height:1.2;}
#hud-mini-mines{color:#ffcc00!important;text-shadow:0 0 6px #ffcc0088!important;}
.hm-sel-group{display:flex;flex-direction:column;gap:1px;margin:0 2px;}
.hm-sel-label{font-size:8px;color:rgba(120,200,255,.5);letter-spacing:.3px;text-transform:uppercase;font-weight:bold;white-space:nowrap;}
.hm-sel{background:rgba(0,0,40,.9);color:#00ccff;border:1px solid rgba(0,180,255,.4);
  padding:2px 2px;border-radius:3px;font-family:inherit;font-size:10px;cursor:pointer;outline:none;}
.hm-sel option{background:#000a20;}
#hud-mini-fs{margin-left:auto;background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);padding:4px 7px;border-radius:5px;font-size:14px;cursor:pointer;flex-shrink:0;}

/* Mobile Menu (side panel) */
#mobile-menu{
  position:fixed;top:0;left:0;bottom:0;z-index:9900;
  width:min(58vw,280px);
  background:rgba(0,3,18,.15);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-right:1px solid rgba(0,180,255,.18);
  box-shadow:4px 0 24px rgba(0,0,0,.5);
  display:none;flex-direction:column;align-items:stretch;
  padding:10px 10px 14px;gap:4px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#mobile-menu.open{display:flex;}
#mobile-menu h3{color:#00ccff;font-size:13px;margin:4px 0 2px;letter-spacing:.5px;}
.mob-sep{height:1px;background:rgba(0,180,255,.14);margin:3px 0;flex-shrink:0;}
.mob-btn{
  display:block;width:100%;
  background:rgba(0,10,50,.85);color:#00ccff;
  border:1px solid rgba(0,180,255,.32);padding:9px 11px;
  border-radius:6px;font-family:'Courier New',monospace;font-size:12px;
  cursor:pointer;font-weight:bold;text-align:left;
  text-shadow:0 0 5px #00ccff77;
}
.mob-btn:hover,.mob-btn:active{background:rgba(0,60,180,.5);}
.mob-btn.active{background:rgba(0,120,255,.55);}
.mob-btn.toggled-off{background:rgba(55,0,0,.85);color:#ff6666;border-color:rgba(255,80,80,.45);}
#mobile-menu .mob-close-btn{
  background:linear-gradient(135deg,#0055bb,#003399);color:#fff;
  border:none;padding:9px;border-radius:6px;font-size:13px;
  cursor:pointer;font-weight:bold;font-family:inherit;margin-top:4px;text-align:center;
}
#mobile-menu .mob-info{color:rgba(160,210,255,.4);font-size:11px;line-height:1.6;padding:3px 0;}
#mobile-menu .mob-info a{color:#00ccff;text-decoration:none;}

/* Mobile overlay backdrop (closes menu) */
#mob-overlay{
  display:none;position:fixed;inset:0;z-index:9850;
  background:rgba(0,0,0,.4);
}
#mobile-menu.open~#mob-overlay{display:block;}

/* Re-center button (bottom right, mobile only) */
#btn-recenter{
  display:none;position:fixed;bottom:18px;right:14px;z-index:9700;
  background:rgba(0,10,50,.92);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);border-radius:50%;
  width:46px;height:46px;font-size:22px;cursor:pointer;
  align-items:center;justify-content:center;
  text-shadow:0 0 8px #00ccff88;box-shadow:0 2px 12px rgba(0,80,255,.3);
}
body.mobile-mode #btn-recenter{display:flex;bottom:48px;}

/* Axis-Lock Buttons (bottom right, desktop + mobile) */
#axis-lock-group{
  position:fixed;bottom:42px;right:14px;z-index:9600;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
body.mobile-mode #axis-lock-group{right:66px;bottom:55px;}
#axis-lock-hint{
  display:none;align-items:center;justify-content:center;gap:5px;
  background:rgba(0,8,35,.88);border:1px solid rgba(255,255,255,.18);border-radius:6px;
  padding:3px 8px;font-size:13px;white-space:nowrap;
  width:100%;box-sizing:border-box;
}
.alh-icons{font-size:12px;opacity:.75;}
.alh-arr{font-size:17px;font-weight:bold;line-height:1;}
#axis-lock-btns{display:flex;flex-direction:row;gap:4px;}
.axis-lock-btn{
  width:32px;height:32px;
  border:2px solid rgba(255,255,255,.22);border-radius:6px;
  background:rgba(0,10,40,.72);
  font-size:13px;font-weight:bold;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,box-shadow .15s;
  padding:0;
}
.axis-lock-btn:hover{background:rgba(255,255,255,.1);}
#btn-axis-lock-x{color:#ff3333;}
#btn-axis-lock-y{color:#33ee33;}
#btn-axis-lock-z{color:#4499ff;}
.axis-lock-btn.active-x{border-color:#ff4444;box-shadow:0 0 8px #ff4444;}
.axis-lock-btn.active-y{border-color:#33ee33;box-shadow:0 0 8px #33ee33;}
.axis-lock-btn.active-z{border-color:#4499ff;box-shadow:0 0 8px #4499ff;}

/* STRG button (bottom left, mobile only) */
#btn-strg{
  display:none;position:fixed;bottom:18px;left:14px;z-index:9700;
  background:rgba(0,10,50,.92);color:#00ccff;
  border:2px solid rgba(0,180,255,.4);border-radius:8px;
  padding:8px 12px;font-size:12px;font-weight:bold;cursor:pointer;
  font-family:'Courier New',monospace;
  text-shadow:0 0 6px #00ccff88;box-shadow:0 2px 12px rgba(0,80,255,.3);
  transition:all .15s;
}
#btn-strg.active{background:rgba(0,120,255,.5);border-color:#00ccff;box-shadow:0 0 16px rgba(0,180,255,.5);}
body.mobile-mode #btn-strg{display:flex;align-items:center;gap:4px;}

/* Demo panel: mobile */
body.mobile-mode #demo-panel{
  max-width:min(54vw,250px);padding:8px 12px 10px;font-size:11px;
  margin-top:52px!important;
}
body.mobile-mode #demo-panel h3{font-size:12px;margin:0 0 3px;}
body.mobile-mode #demo-status{font-size:10px;margin:2px 0 5px;}
body.mobile-mode #demo-pause-btn{padding:4px 8px!important;font-size:10px!important;}
body.mobile-mode #demo-close-btn{padding:4px 8px;font-size:10px;}

/* Result panel mobile */
body.mobile-mode #result-panel{margin-top:52px;}

/* CHANGE 2: touch-action so browser doesn't swallow touch gestures on the canvas */
canvas{touch-action:none;-webkit-touch-callout:none;}
/* ONLY the main WebGL canvas (a direct child of <body>) fills the viewport.
   The sub-region minimap canvas is nested in its panel and must keep its place —
   a global rule here previously yanked it to the top-left corner. */
body>canvas{
  position:fixed;top:0;left:0;
  display:block;z-index:1;
}

/* Explode Slider (mobile only) – right side, above ⊙ button */
#explode-ctrl{
  display:none;position:fixed;right:14px;bottom:74px;z-index:9700;
  flex-direction:column;align-items:center;gap:3px;
}
body.mobile-mode #explode-ctrl{display:flex;bottom:104px;}
#explode-slider{
  -webkit-appearance:slider-vertical;
  appearance:slider-vertical;
  writing-mode:vertical-lr;
  width:32px;height:110px;    /* war 28px */
  cursor:pointer;
  accent-color:#00ccff;
  padding:0;margin:0;
  transform:rotate(180deg); /* bottom=0(compact), top=100(spread) */
  opacity:.9;
}
#explode-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px;height:24px;border-radius:50%;       /* war 16×16, jetzt 1.5× = 24×24 */
  background:#00ccff;box-shadow:0 0 6px #00ccff88;
  margin-left:-9px;                                /* zentriert den Punkt auf dem Track */
}
#explode-slider::-webkit-slider-runnable-track{
  width:6px;background:rgba(0,180,255,.25);border-radius:3px;
}
.explode-icon-svg{
  color:rgba(0,200,255,.55);pointer-events:none;user-select:none;
}
/* ── NO-GUESS WARNING TOAST ─────────────────────────────── */
#ng-toast{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  z-index:9999;pointer-events:none;
  background:rgba(20,10,0,.96);
  border:1px solid rgba(255,180,50,.45);
  border-radius:0 0 10px 10px;
  padding:8px 20px 10px;
  color:rgba(255,210,120,.92);
  font-family:'Courier New',monospace;font-size:12px;
  text-align:center;line-height:1.5;
  box-shadow:0 4px 20px rgba(255,140,0,.25);
  display:none;
  transition:opacity .4s;
}
#ng-toast.visible{display:block;}

/* ── NEWS MODAL ─────────────────────────────────────────────── */
.news-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.news-counter{
  font-size:13px;color:rgba(160,210,255,.6);
  font-family:'Courier New',monospace;flex-shrink:0;
}
.news-carousel{
  display:flex;align-items:flex-start;gap:6px;margin-bottom:14px;
}
.news-nav-btn{
  background:rgba(0,200,255,.1);
  border:1px solid rgba(0,200,255,.28);
  color:rgba(0,200,255,.9);
  border-radius:50%;width:34px;height:34px;
  font-size:22px;line-height:1;
  cursor:pointer;flex-shrink:0;
  margin-top:22px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;padding:0;
}
.news-nav-btn:hover:not(:disabled){ background:rgba(0,200,255,.22); }
.news-nav-btn:disabled{ opacity:.2;cursor:default; }
.news-content{ flex:1;min-width:0; }
.news-date{
  text-align:center;font-size:11px;
  color:rgba(160,210,255,.45);
  margin:0 0 8px;font-style:italic;
}
.news-item-title{
  text-align:center;margin:0 0 10px;
  font-size:clamp(13px,1.15vw,17px);
}
.news-body{
  max-height:38vh;overflow-y:auto;
  line-height:1.65;margin:0 0 14px;
  padding-right:6px;white-space:pre-wrap;
  color:rgba(200,230,255,.9);
}
.news-dismiss-label{
  display:flex;align-items:center;gap:9px;
  margin:0 0 4px;font-size:13px;
  color:rgba(160,210,255,.75);cursor:pointer;
}
.news-dismiss-label input[type="checkbox"]{
  width:15px;height:15px;flex-shrink:0;
  cursor:pointer;accent-color:#00ccff;
}
.news-footer-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:14px;border-top:1px solid rgba(0,200,255,.1);
  padding-top:12px;
}
.news-reopen-hint{
  font-size:11px;color:rgba(160,210,255,.45);
  font-style:italic;line-height:1.4;flex:1;min-width:0;
}

/* ── SOON MODAL ─────────────────────────────────────────────── */
#soon-overlay .modal-box{max-width:540px;}
#soon-overlay h2{color:#00ccff;margin-bottom:12px;}
#soon-overlay ul{text-align:left;line-height:1.8;margin:10px 0 14px 16px;color:rgba(160,220,255,.85);}
#soon-overlay ul li{margin-bottom:4px;}
#soon-donate-btn{
  background:linear-gradient(135deg,#005533,#003322);
  color:#44ff88;border:none;padding:8px 24px;border-radius:7px;
  font-size:13px;cursor:pointer;font-weight:bold;font-family:inherit;
  box-shadow:0 0 12px rgba(0,255,100,.2);transition:background .15s;
  margin-top:4px;
}
#soon-donate-btn:hover{background:linear-gradient(135deg,#007744,#004422);}
.hud-btn-ic.soon-btn{opacity:.85;}
/* geometry-sel: gleicher Stil wie diff-sel/dens-sel */
/* Mobile: Login-Button immer sichtbar im hud-mini */
#hud-mini-login{background:none;border:1px solid rgba(0,180,255,.3);color:rgba(160,200,255,.7);border-radius:4px;padding:2px 6px;cursor:pointer;font-size:14px;flex-shrink:0;}
/* hud-mini-fs und login nur auf Desktop (mode-toggle reicht für beide) */
body.mobile-mode #hud-mini-fs,
body.mobile-mode #hud-mini-login{display:none!important;}
/* Fixed button below mode-toggle, visible on L3+ on both desktop & mobile */
#btn-subregion{
  display:none; /* shown via .visible class */
  position:fixed;top:44px;right:8px;z-index:9840;
  background:rgba(0,10,50,.90);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);
  border-radius:5px;padding:4px 10px;
  font-family:inherit;font-size:13px;font-weight:bold;
  cursor:pointer;line-height:1.4;
  transition:background .15s, border-color .15s, box-shadow .15s;
  text-shadow:0 0 6px #00ccff88;
  align-items:center;gap:5px;white-space:nowrap;
}
#btn-subregion:hover{background:rgba(0,80,200,.5);}
#btn-subregion.active{
  background:rgba(0,120,255,.55);
  border-color:rgba(255,80,80,.7);
  box-shadow:0 0 10px rgba(255,60,60,.4);
}
#btn-subregion.visible{display:flex;}
/* On desktop: push below the hud-top header dynamically via JS */
/* On mobile: push below mini-hud */
body.mobile-mode #btn-subregion{top:56px;}

/* ── Gesture Button ──────────────────────────────────────────── */
#btn-gesture{
  display:flex;
  position:fixed;top:82px;right:8px;z-index:9840;
  background:rgba(0,10,50,.90);color:#00ccff;
  border:1px solid rgba(0,180,255,.4);
  border-radius:5px;padding:4px 10px;
  font-family:inherit;font-size:13px;font-weight:bold;
  cursor:pointer;line-height:1.4;
  transition:background .15s,border-color .15s,box-shadow .15s;
  text-shadow:0 0 6px #00ccff88;
  align-items:center;gap:5px;white-space:nowrap;
}
#btn-gesture:hover{background:rgba(0,80,200,.5);}
#btn-gesture.active{
  background:rgba(0,120,255,.55);
  border-color:rgba(80,255,160,.7);
  box-shadow:0 0 10px rgba(60,255,140,.4);
}
#btn-gesture:disabled{opacity:.5;cursor:default;}
body.mobile-mode #btn-gesture{top:94px;}

/* Minimap: always-on when sub-region active */
#sub-minimap-wrap{
  position:fixed;z-index:9600;
  bottom:0;left:14px; /* JS will set exact bottom above footer */
  background:rgba(0,5,25,.92);
  border:1px solid rgba(0,180,255,.3);
  border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0;
  padding:5px 5px 4px;
  display:none;
  box-shadow:0 -2px 14px rgba(0,0,0,.5);
  min-width:190px;
}
#sub-minimap-wrap.visible{display:block;}
body.mobile-mode #sub-minimap-wrap{
  bottom:0;left:14px;
}
#sub-minimap-label{
  font-size:9px;color:rgba(100,180,255,.55);
  letter-spacing:.5px;text-align:center;
  margin-bottom:3px;font-family:'Courier New',monospace;
  position:relative;
}
/* Close button top-right of minimap */
#sub-minimap-close{
  position:absolute;top:0;right:0;
  background:none;border:none;color:rgba(160,200,255,.5);
  cursor:pointer;font-size:11px;line-height:1;padding:0 2px;
  font-family:inherit;
}
#sub-minimap-close:hover{color:#00ccff;}
#sub-minimap{display:block;}
/* Nav arrows row */
#sub-minimap-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;gap:4px;
}
.sub-nav-btn{
  background:rgba(0,30,80,.7);color:#00ccff;
  border:1px solid rgba(0,180,255,.3);border-radius:4px;
  font-size:13px;cursor:pointer;padding:2px 8px;line-height:1.3;
  transition:background .12s;flex-shrink:0;
}
.sub-nav-btn:hover{background:rgba(0,80,200,.5);}
.sub-nav-btn:disabled{opacity:.3;cursor:default;}
#sub-minimap-counter{
  font-size:9px;color:rgba(100,180,255,.65);
  text-align:center;font-family:'Courier New',monospace;
  flex:1;
}
/* No-move warning in minimap */
#sub-no-move-warn{
  font-size:9px;color:rgba(255,80,80,.9);
  text-align:center;font-family:'Courier New',monospace;
  margin-top:3px;display:none;line-height:1.3;
}
#sub-no-move-warn.visible{display:block;}

/* Sub-region info toast */
#sub-toast{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  z-index:9999;pointer-events:none;
  background:rgba(0,5,30,.97);
  border:1px solid rgba(0,180,255,.4);
  border-radius:0 0 10px 10px;
  padding:8px 20px 10px;
  color:rgba(100,200,255,.92);
  font-family:'Courier New',monospace;font-size:12px;
  text-align:center;line-height:1.5;
  box-shadow:0 4px 20px rgba(0,100,255,.25);
  display:none;transition:opacity .4s;
}
#sub-toast.visible{display:block;}

/* ── ONBOARDING OVERLAY ANIMATION ──────────────────────────── */
@keyframes fadeInOB {from{opacity:0;transform:translateY(-50%) translateX(-8px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
/* Mini-onboarding: on phones sit bottom-centre so it doesn't cover the board */
@media(max-width:600px){
  #mini-onboard{left:50%!important;top:auto!important;bottom:84px!important;transform:translateX(-50%)!important;animation:none!important;max-width:340px!important;width:calc(100vw - 24px)!important;}
}

/* ── ONBOARDING CONTENT ────────────────────────────────────── */
/* The single/double-click block is the key message → pulse to draw the eye. */
.ob-key-block{
  background:rgba(255,80,80,0.10);
  border:1px solid rgba(255,90,90,0.45);
  border-radius:7px;padding:9px 11px;margin-bottom:4px;
  animation:obPulse 1.8s ease-in-out infinite;
}
.ob-single{color:#ff8a8a;font-weight:bold;margin-bottom:4px}
.ob-double{color:#7dffb0;font-weight:bold;margin-bottom:4px}
.ob-flag{color:#ffcc66;font-weight:bold}
.ob-key-block b{color:#fff}
@keyframes obPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,0.0)}50%{box-shadow:0 0 14px 1px rgba(255,90,90,0.35)}}
.ob-ctrl{margin-top:11px;padding-top:9px;border-top:1px solid rgba(0,200,255,0.14);font-size:14px;color:rgba(160,210,255,0.72);line-height:1.5}
.ob-ctrl-title{color:rgba(120,200,255,0.6);text-transform:uppercase;letter-spacing:.6px;font-size:11px;margin-bottom:3px}
.ob-help{margin-top:11px;font-size:14px}
.ob-help a{color:rgba(0,200,255,0.75);text-decoration:underline;text-underline-offset:2px}

/* Animated double-click demo label (next to the cursor) */
#ob-demo-label{
  display:none;position:fixed;z-index:10001;pointer-events:none;
  background:rgba(255,80,80,0.92);color:#fff;
  font-family:'Courier New',monospace;font-size:12px;font-weight:bold;
  padding:3px 9px;border-radius:5px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  animation:obPulse 1.0s ease-in-out infinite;
}

/* In-context "double-click" safety-net nudge */
#ob-nudge{
  display:none;position:fixed;left:50%;top:64px;transform:translateX(-50%) translateY(-6px);
  z-index:10002;max-width:420px;width:calc(100vw - 40px);
  background:rgba(60,10,10,0.95);border:1px solid rgba(255,90,90,0.6);
  border-radius:8px;padding:9px 16px;text-align:center;
  font-family:'Courier New',monospace;font-size:13px;line-height:1.5;
  color:rgba(255,200,200,0.97);box-shadow:0 4px 18px rgba(0,0,0,0.5);
  opacity:0;transition:opacity .25s ease, transform .25s ease;
}
#ob-nudge.visible{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
#ob-nudge b{color:#fff}
body.mobile-mode #ob-nudge{top:auto;bottom:120px}
@media(max-width:600px){
  #onboarding-overlay{
    left:50% !important;
    top:auto !important;
    bottom:90px !important;
    transform:translateX(-50%) !important;
    max-width:320px !important;
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 110px) !important;   /* Querformat: Fenster nicht höher als der Schirm … */
    overflow-y:auto !important;                   /* … sondern vertikal scrollbar (Schritt 4/4) */
    -webkit-overflow-scrolling:touch;
  }
  @keyframes fadeInOB {from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}
/* Querformat auf dem Handy: die @media(max-width:600px)-Regel oben greift hier NICHT
   (Landscape-Breite >600px). Das Steuerungs-Overlay (Schritt 4/4) sonst zentriert &
   höher als der Schirm → an Schirmhöhe klemmen + vertikal scrollbar. */
@media (orientation:landscape) and (max-height:560px){
  #onboarding-overlay{
    top:8px !important; bottom:8px !important; left:12px !important;
    transform:none !important;
    max-height:calc(100vh - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
  }
}


/* ── TUTORIAL: skill modal buttons ─────────────────────────── */
.skill-btn{
  text-align:left;background:rgba(0,20,60,.7);
  border:1px solid rgba(0,180,255,.3);border-radius:7px;
  color:rgba(200,225,255,.92);font-family:'Courier New',monospace;
  font-size:15px;line-height:1.5;padding:11px 14px;cursor:pointer;transition:.15s;
}
.skill-btn:hover{background:rgba(0,60,140,.6);border-color:rgba(0,200,255,.6);}
.skill-letter{
  display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;
  background:rgba(0,200,255,.18);border:1px solid rgba(0,200,255,.5);border-radius:50%;
  color:#00ccff;font-weight:bold;margin-right:8px;flex-shrink:0;
}

/* ── TUTORIAL: classic 2D minesweeper ──────────────────────── */
#t2d-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 7px;margin-bottom:5px;background:#c0c0c0;
  border:4px solid;border-color:#808080 #fff #fff #808080;
}
.t2d-seg{
  background:#000;color:#ff2a2a;font:bold 20px/1 'Courier New',monospace;
  padding:3px 6px;letter-spacing:2px;border:1px solid #500;min-width:50px;text-align:right;
}
#t2d-smiley{
  width:34px;height:34px;font-size:19px;background:#c0c0c0;cursor:pointer;
  border:3px solid;border-color:#fff #808080 #808080 #fff;border-radius:3px;padding:0;
}
#t2d-board{
  display:grid;grid-template-columns:repeat(9,26px);gap:0;padding:5px;background:#c0c0c0;
  border:4px solid;border-color:#808080 #fff #fff #808080;width:max-content;
}
.t2d-cell{
  width:26px;height:26px;box-sizing:border-box;background:#c0c0c0;
  border:3px solid;border-color:#fff #808080 #808080 #fff;
  font:bold 15px/1 Tahoma,Arial,sans-serif;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;
  -webkit-touch-callout:none;-webkit-user-select:none;touch-action:manipulation; /* kein iOS-Kontextmenü/Callout bei Long-Press */
}
.t2d-cell.open{border:1px solid #9a9a9a;background:#d6d6d6;cursor:default;}
.t2d-cell.flag::after{content:'🚩';font-size:14px;}
.t2d-cell.qm::after{content:'❓';font-size:13px;}
.t2d-cell.mine{background:#d6d6d6;border:1px solid #9a9a9a;}
.t2d-cell.mine::after{content:'💣';font-size:14px;}
.t2d-cell.boom{background:#ff4444;}
.t2d-cell.n1{color:#0000ff}.t2d-cell.n2{color:#1a7a1a}.t2d-cell.n3{color:#ff0000}
.t2d-cell.n4{color:#000080}.t2d-cell.n5{color:#800000}.t2d-cell.n6{color:#008080}
.t2d-cell.n7{color:#000000}.t2d-cell.n8{color:#808080}
#t2d-cursor{
  position:fixed;z-index:10050;pointer-events:none;display:none;
  width:18px;height:18px;border:3px solid #ff3b3b;border-radius:50%;
  box-shadow:0 0 9px #ff3b3b;transform:translate(-50%,-50%);
}
#t2d-explain{
  position:fixed;z-index:10051;pointer-events:none;display:none;max-width:250px;
  background:rgba(0,8,40,.96);border:1px solid rgba(0,200,255,.4);border-radius:8px;
  padding:8px 11px;color:rgba(200,230,255,.96);font-family:'Courier New',monospace;
  font-size:12px;line-height:1.5;box-shadow:0 3px 14px rgba(0,0,0,.5);
}

/* ── ONBOARDING TOUR: mobile touch indicator (finger ring) ── */
#ob-touch{
  position:fixed;z-index:9998;pointer-events:none;display:none;
  width:30px;height:30px;border:3px solid rgba(255,80,80,.9);border-radius:50%;
  box-shadow:0 0 12px rgba(255,80,80,.7);transform:translate(-50%,-50%);
  animation:obTouchPulse 1.1s ease-in-out infinite;
}
@keyframes obTouchPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.25)}}

/* ── Save game ─────────────────────────────────────────────────── */
.sg-actions{display:flex;flex-direction:column;gap:9px;margin:14px 0 4px;}
.sg-btn{padding:11px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#dbe3f4;}
.sg-btn:hover{background:rgba(120,160,255,.2);}
.sg-btn.primary{background:linear-gradient(90deg,#2e7d46,#36a056);border-color:rgba(120,255,170,.4);color:#fff;}
.sg-btn.primary:hover{filter:brightness(1.12);}
.sg-toast{
  position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:10002;max-width:520px;
  width:calc(100vw - 40px);text-align:center;padding:9px 16px;border-radius:7px;font-size:13px;
  background:rgba(20,40,25,.95);border:1px solid rgba(120,255,170,.4);color:#dfffe9;box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.sg-toast.sg-pro{background:rgba(40,25,0,.95);border-color:rgba(255,180,60,.5);color:#ffe0a8;}

/* ── Highscore / Bestenliste ───────────────────────────────────── */
.hs-box{max-width:min(96vw,1120px);width:96vw;max-height:92vh;overflow-y:auto;}
.hs-pro-note{background:rgba(40,25,0,.5);border:1px solid rgba(255,180,60,.4);color:#ffe0a8;
  padding:8px 11px;border-radius:6px;font-size:15px;margin-bottom:12px;line-height:1.45;}
.hs-block{margin-bottom:14px;}
.hs-bhead{cursor:pointer;font-weight:bold;font-size:14px;color:#dfe6f5;padding:7px 4px;
  border-bottom:1px solid rgba(120,160,255,.25);user-select:none;}
.hs-bhead:hover{color:#fff;}
.hs-arrow{display:inline-block;transition:transform .15s;font-size:11px;}
.hs-block.collapsed .hs-arrow{transform:rotate(-90deg);}
.hs-block.collapsed .hs-scroll{display:none;}
.hs-scroll{overflow:auto;max-height:60vh;margin-top:6px;border:1px solid rgba(120,160,255,.15);border-radius:6px;}
.hs-loading{padding:22px;text-align:center;color:#8fbfff;font-size:13px;}
.hs-table{border-collapse:separate;border-spacing:0;font-size:14px;color:#dfe6f5;width:100%;}
.hs-table th,.hs-table td{padding:5px 9px;white-space:nowrap;text-align:left;
  border-bottom:1px solid rgba(120,160,255,.12);}
.hs-table thead th{position:sticky;top:0;background:#0e1730;z-index:2;font-weight:bold;color:#bcd0ff;}
.hs-stick{position:sticky;background:#0c1428;z-index:1;}
.hs-table thead th.hs-stick{z-index:3;}
.hs-c0{left:0;min-width:74px;width:74px;font-weight:bold;}
.hs-c1{left:74px;min-width:54px;width:54px;color:#aeb8d4;}
.hs-lvl{vertical-align:middle;}
.hs-time,.hs-mytime,.hs-myrank{font-variant-numeric:tabular-nums;text-align:right;}
.hs-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;}
.hs-empty{color:#7b88a8;font-style:italic;text-align:center;}
.hs-me{color:#ffd27a;font-weight:bold;}
.hs-you{background:rgba(120,255,170,.07);}
.hs-foot{font-size:11px;color:#8090b5;margin-top:6px;padding-left:2px;}
@media(max-width:560px){ .hs-table{font-size:13px;} .hs-table th,.hs-table td{padding:4px 6px;}
  .hs-c0{min-width:58px;width:58px;} .hs-c1{left:58px;min-width:44px;width:44px;} .hs-name{max-width:110px;} }

/* ── Custom Geometry editor (L7) ──────────────────────────────── */
#custom-geo-overlay{
  display:none;position:fixed;inset:0;z-index:10000;
  background:rgba(6,6,16,.92);backdrop-filter:blur(2px);
  align-items:center;justify-content:center;
}
#cg-modal{
  display:flex;flex-direction:column;
  width:99vw;height:98vh;
  background:#11131f;border:1px solid rgba(120,160,255,.28);border-radius:10px;
  box-shadow:0 12px 50px rgba(0,0,0,.6);color:#dfe6f5;overflow:hidden;
  font-family:'Segoe UI',system-ui,sans-serif;
}
#cg-head{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:linear-gradient(90deg,#1a2138,#161a2a);border-bottom:1px solid rgba(120,160,255,.18);
}
#cg-title-ico{font-size:20px;line-height:1;}
#cg-title{font-weight:700;font-size:16px;color:#cfe0ff;}
/* central key badge shown during demo keyboard actions */
#cg-keycap{position:fixed;z-index:23;transform:translate(-50%,-50%);pointer-events:none;
  padding:9px 16px;border-radius:10px;font-family:'Courier New',monospace;font-size:21px;font-weight:800;letter-spacing:.5px;
  background:rgba(18,22,38,.94);border:2px solid rgba(255,255,255,.55);color:#fff;box-shadow:0 6px 26px rgba(0,0,0,.6);}
#cg-keycap.cg-kc-in{animation:cgKc .26s ease;}
@keyframes cgKc{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
#cg-onlyone{font-size:15px;font-weight:600;color:rgba(255,190,90,.95);margin-left:6px;}
#cg-close{
  margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#cfd8ee;width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:15px;
}
#cg-close:hover{background:rgba(255,80,80,.25);border-color:rgba(255,80,80,.5);}
#cg-help-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600;
  background:rgba(120,160,255,.12);border:1px solid rgba(120,160,255,.3);color:#cdd8f2;
}
#cg-help-btn .cg-help-q{color:#ff5a5a;font-size:16px;font-weight:800;line-height:1;}
#cg-help-btn:hover{background:rgba(120,160,255,.28);}
#cg-help-btn+#cg-close{margin-left:8px;}
/* first-run coachmark tour */
#cg-pro-toast{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:22;
  padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;
  background:rgba(40,28,4,.96);border:1px solid rgba(255,190,90,.55);color:#ffd9a0;box-shadow:0 6px 22px rgba(0,0,0,.5);
}
/* fake open dropdown (template demo) */
#cg-demo-dd{position:fixed;z-index:24;background:#0d0f1a;border:1px solid rgba(120,160,255,.45);border-radius:6px;box-shadow:0 8px 26px rgba(0,0,0,.6);overflow:hidden;font-size:13px;}
.cg-dd-opt{padding:7px 11px;color:#d7deef;}
.cg-dd-opt.hi{background:rgba(60,120,255,.45);color:#fff;font-weight:600;}
/* demo mouse cursor */
#cg-cursor{position:fixed;z-index:25;pointer-events:none;width:24px;height:24px;margin:-3px 0 0 -3px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));}
#cg-cursor.cg-click svg{animation:cgCurClick .3s ease;}
#cg-cursor.cg-click::after{content:"";position:absolute;left:-6px;top:-6px;width:26px;height:26px;border-radius:50%;border:2px solid #6ab0ff;animation:cgCurRing .35s ease-out;}
@keyframes cgCurClick{0%{transform:scale(1)}45%{transform:scale(.68)}100%{transform:scale(1)}}
@keyframes cgCurRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
#cg-tour{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.22);}  /* light dim so the live demo stays visible */
#cg-tour-spot{position:fixed;border-radius:8px;border:2px solid #ff4444;box-shadow:0 0 0 3px rgba(255,68,68,.28),0 0 18px rgba(255,68,68,.8);transition:left .2s,top .2s,width .2s,height .2s;pointer-events:none;animation:cgSpotPulse 1.4s ease-in-out infinite;}
@keyframes cgSpotPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,68,68,.28),0 0 14px rgba(255,68,68,.6);}50%{box-shadow:0 0 0 5px rgba(255,68,68,.38),0 0 24px rgba(255,68,68,.95);}}
#cg-tour-tip{position:fixed;width:300px;z-index:21;background:#141726;border:1px solid rgba(255,68,68,.55);border-radius:10px;padding:13px 14px;color:#e7ecfa;font-size:15px;line-height:1.45;box-shadow:0 10px 34px rgba(0,0,0,.6);}
#cg-tour-tip b{color:#cfe0ff;}
#cg-tour-nav{display:flex;align-items:center;gap:7px;margin-top:11px;flex-wrap:nowrap;}
.cg-tour-spacer{flex:1;}
#cg-tour-count{font-size:11px;color:#8fa3d0;white-space:nowrap;}
.cg-tour-btn{padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;white-space:nowrap;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#d7deef;}
.cg-tour-btn:hover{background:rgba(120,160,255,.2);}
.cg-tour-btn.primary{background:rgba(60,120,255,.4);border-color:rgba(120,180,255,.7);color:#fff;}
.cg-tour-btn.ghost{background:none;border-color:transparent;color:#9aa6c8;}
.cg-tri{font-size:9px;opacity:.85;vertical-align:middle;}
#cg-body{flex:1;display:flex;min-height:0;}
#cg-side{
  width:230px;flex:0 0 230px;padding:14px;display:flex;flex-direction:column;gap:16px;
  background:#0e1018;border-right:1px solid rgba(120,160,255,.14);overflow-y:auto;
}
.cg-grp{display:flex;flex-direction:column;gap:7px;}
.cg-grp-h{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8fa3d0;font-weight:700;}
.cg-tool-btn{
  text-align:left;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#d7deef;
}
.cg-tool-btn:hover{background:rgba(120,160,255,.14);}
.cg-tool-btn.active{background:rgba(60,120,255,.32);border-color:rgba(120,180,255,.75);color:#fff;box-shadow:0 0 0 1px rgba(120,180,255,.4) inset;}
.cg-tool-btn.cg-end{background:rgba(255,160,60,.16);border-color:rgba(255,180,90,.4);color:#ffd9a8;}
.cg-tool-btn.cg-end:hover{background:rgba(255,160,60,.28);}
.cg-row{display:flex;gap:7px;}
.cg-mini-btn{
  flex:1;text-align:center;padding:7px 4px;border-radius:6px;cursor:pointer;font-size:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#d7deef;
}
.cg-mini-btn:hover:not(:disabled){background:rgba(120,160,255,.14);}
.cg-mini-btn:disabled{opacity:.4;cursor:default;}
.cg-sel{
  width:100%;padding:8px 9px;border-radius:7px;font-size:13px;cursor:pointer;
  background:#0d0f1a;border:1px solid rgba(120,160,255,.3);color:#eef2ff;
}
#cg-shortcuts-hint{border-top:1px solid rgba(255,255,255,.07);padding-top:8px;}
/* per-axis active-layer rows */
.cg-axis-row{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:6px;border:1px solid transparent;cursor:pointer;}
.cg-axis-row:hover{background:rgba(120,160,255,.05);}
.cg-axis-row+.cg-axis-row{margin-top:3px;}
.cg-axis-row input[type=range]{flex:1;min-width:0;accent-color:#6b7da0;}
.cg-axis-row.cg-axis-active{background:rgba(120,160,255,.08);border-color:rgba(120,160,255,.3);}
.cg-axis-lbl{font-weight:800;font-size:13px;width:14px;text-align:center;}
.cg-axis-val{font-size:11px;color:#9fb0d8;min-width:34px;text-align:right;}
.axis-x{color:#ff6a6a;} .axis-y{color:#5fe084;} .axis-z{color:#6aa6ff;}
.cg-axis-row.cg-axis-active input[type=range]{accent-color:#4a7bff;}
.cg-y-btn{
  width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;flex:0 0 auto;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#d7deef;
}
.cg-y-btn:hover{background:rgba(120,160,255,.2);}
/* mirror panel */
#cg-mirror-panel{margin-top:8px;padding:8px;border-radius:7px;background:rgba(255,102,204,.06);border:1px solid rgba(255,102,204,.25);display:flex;flex-direction:column;gap:7px;}
#cg-mirror-panel .axis-x.active{background:rgba(255,106,106,.3);border-color:rgba(255,106,106,.7);}
#cg-mirror-panel .axis-y.active{background:rgba(95,224,132,.25);border-color:rgba(95,224,132,.7);}
#cg-mirror-panel .axis-z.active{background:rgba(106,166,255,.3);border-color:rgba(106,166,255,.7);}
.cg-mir-val-row{display:flex;align-items:center;gap:8px;}
.cg-mir-val-row input[type=range]{flex:1;min-width:0;accent-color:#ff66cc;}
.cg-mir-val-row #cg-explode-val,.cg-mir-val-row span{font-size:12px;color:#cdd6ee;min-width:30px;text-align:right;}
.cg-mini-btn.cg-ok{background:rgba(60,160,90,.3);border-color:rgba(120,255,170,.5);color:#dfffe9;}
#cg-explode-row .cg-mir-val-row input[type=range]{accent-color:#ffb347;}
.cg-hint{font-size:11px;color:#7e8db4;line-height:1.45;}
.cg-hint-dim{opacity:.72;}
#cg-tool-hint{border-top:1px solid rgba(255,255,255,.07);padding-top:8px;}
#cg-remaining-box{
  border-radius:9px;padding:12px;text-align:center;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);transition:background .2s,border-color .2s;
}
.cg-rem-h{font-size:11px;color:#9aa8cf;}
#cg-remaining{font-size:30px;font-weight:800;line-height:1.2;}
.cg-rem-sub{font-size:11px;color:#8090b5;}
.cg-rem-green #cg-remaining{color:#46d27e;} .cg-rem-green{border-color:rgba(70,210,126,.35);}
.cg-rem-yellow #cg-remaining{color:#e9c44a;} .cg-rem-yellow{border-color:rgba(233,196,74,.4);}
.cg-rem-red #cg-remaining{color:#ef5d5d;} .cg-rem-red{border-color:rgba(239,93,93,.5);}
.cg-rem-flash{animation:cgRemFlash .35s ease;}
@keyframes cgRemFlash{0%,100%{background:rgba(255,255,255,.03)}50%{background:rgba(239,93,93,.35)}}
#cg-view{flex:1;min-width:0;position:relative;background:#0d0d1a;}
#cg-viewport-canvas{display:block;width:100%;height:100%;touch-action:none;}
#cg-foot{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:#161a2a;border-top:1px solid rgba(120,160,255,.18);
}
.cg-name-wrap{font-size:13px;color:#c7d2ec;}
#cg-name-input{
  width:120px;margin-left:6px;padding:6px 9px;border-radius:6px;font-size:13px;
  background:#0d0f1a;border:1px solid rgba(120,160,255,.3);color:#eef2ff;
}
.cg-foot-spacer{flex:1;}
.cg-foot-btn{
  padding:8px 13px;border-radius:7px;cursor:pointer;font-size:13px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#d7deef;
}
.cg-foot-btn:hover:not(:disabled){background:rgba(120,160,255,.18);}
.cg-foot-btn:disabled{opacity:.5;cursor:default;}
#cg-save-btn{
  padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;
  background:linear-gradient(90deg,#2e7d46,#36a056);border:1px solid rgba(120,255,170,.4);color:#fff;
}
#cg-save-btn:hover{filter:brightness(1.12);}
/* No-Guess check result panel (floats over the viewport) */
#cg-check-result{
  position:absolute;top:12px;left:12px;max-width:340px;z-index:5;
  padding:12px 30px 12px 14px;border-radius:9px;font-size:13px;line-height:1.5;
  background:rgba(14,16,26,.95);border:1px solid rgba(255,255,255,.18);color:#e7ecfa;box-shadow:0 6px 22px rgba(0,0,0,.5);
}
#cg-check-result.cg-check-ok{border-color:rgba(70,210,126,.6);}
#cg-check-result.cg-check-warn{border-color:rgba(233,196,74,.6);}
#cg-check-result.cg-check-bad{border-color:rgba(239,93,93,.6);}
.cg-check-ok{color:#7fe6a6;} .cg-check-warn{color:#f0d27a;} .cg-check-bad{color:#f29a9a;}
.cg-check-extra{margin-top:6px;font-size:11.5px;color:#aeb8d4;}
.cg-trivial-warn{color:#ffc060;font-weight:600;}
.cg-check-x{position:absolute;top:6px;right:8px;background:none;border:none;color:#9aa6c8;cursor:pointer;font-size:14px;}
.cg-check-x:hover{color:#fff;}
/* Code import/export panel */
#cg-code-panel{
  position:absolute;top:12px;right:12px;width:min(440px,calc(100% - 24px));z-index:6;
  display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:9px;
  background:rgba(12,14,22,.97);border:1px solid rgba(120,160,255,.3);box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.cg-code-head{display:flex;align-items:center;font-weight:700;color:#cfe0ff;font-size:14px;}
.cg-code-head .cg-check-x{position:static;margin-left:auto;}
#cg-code-panel label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8fa3d0;font-weight:700;}
#cg-code-panel textarea{
  width:100%;box-sizing:border-box;min-height:78px;resize:vertical;border-radius:6px;padding:8px;
  font-family:'Courier New',monospace;font-size:11.5px;background:#0a0c14;border:1px solid rgba(120,160,255,.25);color:#dfe7ff;
}
.cg-code-row{display:flex;align-items:center;gap:8px;}
.cg-msg-ok{color:#7fe6a6;font-size:12px;} .cg-msg-err{color:#f29a9a;font-size:12px;}
@media(max-width:760px){ #cg-code-panel{width:calc(100% - 24px);} }
@media(max-width:720px){
  #cg-body{flex-direction:column;}
  #cg-side{width:auto;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:12px;max-height:38%;}
}