/* ============================================================
   LABYRINTH · REIMAGINED — labyrinth.css
   SymposiON Obsidian system. Layered over the canvas.
   ============================================================ */
#labyrinth-wrap {
  /* Chrome derives from the live front-page theme (--sym-*) so the game
     background + surfaces + gold accent follow the chosen theme. Gameplay
     colours (terra/aegean player + depth markers) stay fixed for legibility. */
  --lb-bg:var(--sym-bg, #0C0806);
  --lb-panel:var(--sym-bg-card, #14100A);
  --lb-raised:color-mix(in srgb, var(--sym-bg-card, #1E1710) 82%, var(--sym-fg, #fff) 7%);
  --lb-gold:var(--sym-gold, #C49028);
  --lb-gold-lt:color-mix(in srgb, var(--lb-gold) 78%, #fff 22%);
  --lb-terra:#C2502A; --lb-terra-lt:#E07A4C;
  --lb-aegean:#7FB6CC; --lb-aegean-lt:#BFE3F0;
  --lb-text:var(--sym-fg, #E8D8B0);
  --lb-muted:color-mix(in srgb, var(--sym-fg, #E8D8B0) 50%, transparent);
  --lb-bdr:color-mix(in srgb, var(--sym-gold, #C49028) 26%, transparent);
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-sans:'Raleway','Inter',system-ui,sans-serif;
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--lb-bg); color:var(--lb-text); font-family:var(--f-sans);
  user-select:none; -webkit-user-select:none;
}

#lb-canvas{ position:absolute; inset:0; display:block; z-index:1; }

/* ── panes ── */
.lb-pane{
  position:absolute; inset:0; z-index:40; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,40px);
}
.lb-pane.on{ display:flex; }
.lb-dim{ background:rgba(8,5,3,.78); backdrop-filter:blur(3px); }

/* ── HUD ── */
#lb-hud{
  position:absolute; top:0; left:0; right:0; z-index:30; display:none;
  align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:linear-gradient(to bottom,rgba(10,7,4,.86),rgba(10,7,4,0));
  pointer-events:none;
}
#lb-hud.on{ display:flex; }
#lb-hud button{ pointer-events:auto; }
.lb-hud-left,.lb-hud-right{ display:flex; gap:18px; align-items:flex-start; }
.lb-hud-center{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:2px; }
.lb-hud-block{ display:flex; flex-direction:column; gap:3px; }
.lb-hud-block.ar{ align-items:flex-end; }
.lb-hud-k{ font-family:var(--f-mono); font-size:8px; letter-spacing:2.5px; color:var(--lb-muted); }
.lb-lives{ display:flex; gap:5px; }
.lb-life{ color:var(--lb-terra-lt); font-size:14px; line-height:1; filter:drop-shadow(0 0 4px rgba(224,122,76,.6)); transition:.3s; }
.lb-life.off{ color:rgba(232,216,176,.16); filter:none; }
.lb-hud-depth{ font-family:var(--f-serif); font-size:20px; line-height:1; color:var(--lb-aegean-lt); }
.lb-hud-time{ font-family:var(--f-serif); font-size:22px; line-height:1; color:var(--lb-text); }
.lb-hud-score{ font-family:var(--f-mono); font-size:14px; color:var(--lb-gold-lt); }

.lb-torch-wrap{ display:flex; align-items:center; gap:8px; }
.lb-torch-ic{ font-size:15px; filter:drop-shadow(0 0 5px #D4922A); }
.lb-torch-track{
  width:min(34vw,260px); height:7px; background:rgba(255,255,255,.08);
  border:1px solid var(--lb-bdr); position:relative; overflow:hidden;
}
.lb-torch-fill{ position:absolute; inset:0 auto 0 0; width:100%; background:var(--lb-gold); transition:width .15s linear,background .4s; }
.lb-torch-wrap.low{ animation:lb-lowpulse .7s infinite; }
@keyframes lb-lowpulse{ 50%{ opacity:.5; } }

.lb-hunt{
  font-family:var(--f-mono); font-size:9px; letter-spacing:3px; color:var(--lb-terra-lt);
  opacity:0; transition:opacity .25s; text-shadow:0 0 8px rgba(224,58,30,.7);
}
.lb-hunt.on{ opacity:1; animation:lb-huntblink .55s infinite; }
@keyframes lb-huntblink{ 50%{ opacity:.35; } }

.lb-hud-btns{ display:flex; gap:6px; margin-left:2px; }
.lb-icon-btn{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--sym-gold, #C49028) 8%, transparent); border:1px solid var(--lb-bdr); color:var(--lb-gold);
  cursor:pointer; font-size:12px; transition:.15s; border-radius:5px;
}
.lb-icon-btn:hover{ background:color-mix(in srgb, var(--sym-gold, #C49028) 20%, transparent); border-color:var(--lb-gold); }
.lb-icon-btn.off{ opacity:.5; }

/* ── MENU ── */
.lb-menu-inner{
  width:min(680px,100%); max-height:100%; overflow:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.lb-title{ font-family:var(--f-serif); font-weight:300; font-size:clamp(48px,9vw,92px); line-height:.95; letter-spacing:-1px; color:var(--lb-text); text-shadow:0 0 30px color-mix(in srgb, var(--sym-gold, #C49028) 20%, transparent); }
.lb-title-en{ font-family:var(--f-mono); font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--lb-terra-lt); margin-top:-8px; }
.lb-howto{
  max-width:520px; font-size:13px; line-height:1.75; color:var(--lb-muted);
  border:1px solid var(--lb-bdr); background:color-mix(in srgb, var(--sym-bg-card, #0F0A05) 60%, transparent); padding:14px 18px; text-align:left;
}
.lb-howto b{ color:var(--lb-text); font-weight:600; }

.lb-diff-row{ display:flex; gap:10px; width:100%; flex-wrap:wrap; justify-content:center; }
.lb-diff{
  flex:1; min-width:150px; max-width:210px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px;
  background:color-mix(in srgb, var(--sym-bg-card, #14100A) 85%, transparent); border:1px solid var(--lb-bdr); padding:16px;
  transition:.16s; color:var(--lb-text);
}
.lb-diff:hover{ transform:translateY(-3px); border-color:var(--lb-gold); background:color-mix(in srgb, var(--sym-bg-card, #1C140A) 95%, transparent); }
.lb-diff-name{ font-family:var(--f-serif); font-size:26px; font-weight:500; line-height:1; }
.lb-diff-meta{ font-family:var(--f-mono); font-size:9px; letter-spacing:1.5px; color:var(--lb-muted); }
.lb-diff-best{ font-family:var(--f-mono); font-size:9px; letter-spacing:.5px; color:var(--lb-gold); margin-top:3px; }
.lb-diff-calm .lb-diff-name{ color:var(--lb-aegean-lt); }
.lb-diff-normal .lb-diff-name{ color:var(--lb-gold-lt); }
.lb-diff-nightmare .lb-diff-name{ color:var(--lb-terra-lt); }

.lb-board{ width:100%; max-width:520px; border:1px solid var(--lb-bdr); }
.lb-brow{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; padding:8px 14px; font-size:12px; align-items:center; }
.lb-brow:not(:last-child){ border-bottom:1px solid color-mix(in srgb, var(--sym-gold, #C49028) 12%, transparent); }
.lb-bhead{ background:color-mix(in srgb, var(--sym-gold, #C49028) 7%, transparent); }
.lb-bhead .lb-bk,.lb-bhead .lb-bv{ font-family:var(--f-mono); font-size:8px; letter-spacing:2px; color:var(--lb-muted); }
.lb-bk{ font-family:var(--f-serif); font-size:16px; }
.lb-bv{ font-family:var(--f-mono); text-align:right; color:var(--lb-text); }
.lb-foot{ font-family:var(--f-mono); font-size:9px; letter-spacing:2px; color:var(--lb-muted); }

/* ── DEPTH BANNER ── */
.lb-depth-banner{
  position:absolute; inset:0; z-index:45; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(circle at center,rgba(10,7,4,.82),rgba(6,4,2,.97));
}
.lb-depth-banner.on{ display:flex; animation:lb-fade .4s; }
.lb-depth-k{ font-family:var(--f-mono); font-size:11px; letter-spacing:6px; color:var(--lb-aegean); }
.lb-depth-big{ font-family:var(--f-serif); font-weight:300; font-size:clamp(40px,8vw,78px); color:var(--lb-aegean-lt); text-shadow:0 0 30px rgba(127,182,204,.4); }
.lb-depth-sub{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--lb-muted); }
@keyframes lb-fade{ from{ opacity:0; } }

/* ── QUIZ ── */
.lb-quiz{ background:rgba(8,5,3,.9); backdrop-filter:blur(4px); }
.lb-quiz-box{
  width:min(520px,100%); background:var(--lb-raised);
  border:1px solid color-mix(in srgb, var(--sym-gold, #C49028) 40%, transparent); padding:24px;
  box-shadow:0 0 60px color-mix(in srgb, var(--sym-gold, #C49028) 15%, transparent), 0 30px 60px rgba(0,0,0,.5);
}
.lb-quiz-head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--lb-bdr); }
.lb-quiz-brz{ font-size:26px; filter:drop-shadow(0 0 8px #D4922A); }
.lb-quiz-ctx{ font-family:var(--f-mono); font-size:9px; letter-spacing:3px; color:var(--lb-gold); }
.lb-quiz-sub{ font-size:11px; color:var(--lb-muted); margin-top:3px; line-height:1.4; }
.lb-q{ font-family:var(--f-serif); font-size:clamp(19px,3.4vw,25px); line-height:1.4; color:var(--lb-text); margin-bottom:16px; }
.lb-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lb-opt{
  padding:14px 12px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--lb-bdr); color:var(--lb-text);
  font-family:'Noto Serif',var(--f-serif); font-size:15px; line-height:1.4; transition:.15s;
}
.lb-opt:not(:disabled):hover{ background:color-mix(in srgb, var(--sym-gold, #C49028) 12%, transparent); border-color:var(--lb-gold); transform:translateY(-1px); }
.lb-opt.correct{ background:rgba(106,126,56,.32); border-color:#8AA64A; color:#D8E8A8; }
.lb-opt.wrong{ background:rgba(194,80,42,.25); border-color:var(--lb-terra); }
.lb-opt:disabled{ cursor:default; }
.lb-q-res{ min-height:18px; margin-top:14px; font-size:13px; text-align:center; color:var(--lb-muted); line-height:1.5; }
.lb-q-res.ok{ color:#C7DD8E; } .lb-q-res.no{ color:var(--lb-terra-lt); }
.lb-q-res b{ color:var(--lb-text); }

/* ── PAUSE & RESULT ── */
.lb-pause-inner,.lb-res-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.lb-pause-t{ font-family:var(--f-serif); font-weight:300; font-size:clamp(40px,8vw,68px); color:var(--lb-gold-lt); }
.lb-res-inner{ width:min(520px,100%); }
.lb-res-title{ font-family:var(--f-serif); font-weight:300; font-size:clamp(52px,10vw,96px); line-height:1; }
.lb-res-title.win{ color:var(--lb-aegean-lt); text-shadow:0 0 36px rgba(127,182,204,.4); }
.lb-res-title.lose{ color:var(--lb-terra-lt); text-shadow:0 0 36px rgba(194,80,42,.4); }
.lb-res-sub{ font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--lb-muted); }
.lb-res-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; width:100%; background:var(--lb-bdr); border:1px solid var(--lb-bdr); margin-top:6px; }
.lb-res-stats>div{ background:var(--lb-panel); padding:14px 6px; display:flex; flex-direction:column; gap:5px; }
.lb-res-stats span{ font-family:var(--f-mono); font-size:8px; letter-spacing:2px; color:var(--lb-muted); }
.lb-res-stats b{ font-family:var(--f-serif); font-size:26px; font-weight:400; color:var(--lb-text); }
.lb-res-best{ font-family:var(--f-mono); font-size:11px; letter-spacing:.5px; color:var(--lb-gold); }
.lb-res-best b{ color:var(--lb-gold-lt); }

/* ── buttons ── */
.lb-btn-row{ display:flex; gap:10px; margin-top:6px; }
.lb-btn{
  padding:12px 36px; cursor:pointer; border:none; background:var(--lb-gold); color:#1A1304;
  font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  transition:.16s;
}
.lb-btn:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.lb-btn.ghost{ background:transparent; border:1px solid var(--lb-bdr); color:var(--lb-muted); }
.lb-btn.ghost:hover{ border-color:var(--lb-gold); color:var(--lb-text); }

@media (max-width:520px){
  .lb-hud-left,.lb-hud-right{ gap:10px; }
  .lb-opts{ grid-template-columns:1fr; }
  .lb-res-stats b{ font-size:20px; }
}

/* ── subject picker ── */
.lb-subj-wrap{ display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; }
.lb-subj-lbl{ font-family:var(--f-mono); font-size:8px; letter-spacing:3px; color:var(--lb-muted); }
.lb-subj-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.lb-subj{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.5px; cursor:pointer;
  padding:8px 14px; color:var(--lb-muted); background:color-mix(in srgb, var(--sym-gold, #C49028) 6%, transparent);
  border:1px solid var(--lb-bdr); transition:.15s; border-radius:4px;
}
.lb-subj:hover{ color:var(--lb-text); border-color:var(--lb-gold); }
.lb-subj.on{ background:var(--lb-gold); color:#1A1304; border-color:var(--lb-gold); font-weight:600; }

/* ── touch controls ──
   Joystick + door button are provided by the shared SymTouch gamepad
   (games/shared/touch-controls.css · .symtc-*), mounted into
   #labyrinth-wrap by labyrinth/ui.js. Themed via --symtc-accent. */

/* ─── Shared frame chrome (overlay top bar + stage) ──────────────
   The #labyrinth-overlay markup in index.html is unchanged; these
   rules style its frame bar (glyph + titles + ← Έξοδος) and the stage
   that holds the canvas. Carried over verbatim from the original
   game.css so the overlay frame keeps its look after the engine swap. */
.lb-overlay { background: var(--sym-bg, #050505); }

.lb-frame-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height: 56px;
  background: color-mix(in srgb, var(--ac, var(--lb-terra)) 6%, #0C0806);
  border-bottom: 1px solid color-mix(in srgb, var(--ac, var(--lb-terra)) 28%, transparent);
  flex-shrink: 0;
}
.lb-frame-identity { display: flex; align-items: center; gap: 14px; }
.lb-frame-glyph {
  width: 36px; height: 36px;
  color: var(--ac, var(--lb-terra));
  flex-shrink: 0; opacity: .9;
}
.lb-frame-titles { display: flex; flex-direction: column; gap: 2px; }
.lb-frame-gr {
  font-family: var(--sym-font-serif, 'Cormorant Garamond', serif);
  font-size: 22px; font-weight: 500; line-height: 1;
  color: var(--sym-fg, #EFE9DC); letter-spacing: -.3px;
}
.lb-frame-en {
  font-family: var(--sym-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ac, var(--lb-terra)); opacity: .75;
}
.lb-close-btn {
  font-family: var(--sym-font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10px !important; letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ac, var(--lb-terra)) !important;
  border-color: color-mix(in srgb, var(--ac, var(--lb-terra)) 35%, transparent) !important;
  padding: 8px 16px !important;
}
.lb-close-btn:hover {
  background: color-mix(in srgb, var(--ac, var(--lb-terra)) 10%, transparent) !important;
  border-color: var(--ac, var(--lb-terra)) !important;
  color: var(--sym-fg, #EFE9DC) !important;
  transform: none !important;
}
.lb-stage { flex: 1; overflow: hidden; padding: 0 !important; position: relative; }