:root{
      --bg:#0b1220;
      --text:#e5e7eb;
      --muted:#aab3c2;
      --line:rgba(255,255,255,.10);
      --brand:#06b6d4;
      --brand2:#22c55e;
      --warn:#f59e0b;
      --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--text);
      background: radial-gradient(1200px 600px at 20% 0%, rgba(6,182,212,.18), transparent 60%),
                  radial-gradient(900px 500px at 80% 0%, rgba(34,197,94,.12), transparent 55%),
                  linear-gradient(180deg, #070b14, var(--bg));
      min-height:100vh;
    }
    .container{max-width:1440px; margin:0 auto; padding:22px 18px 32px;}
.topbar{
      display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap;
      padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
      background: rgba(15,26,46,.65); backdrop-filter: blur(8px); box-shadow: var(--shadow);
      position:relative;
      z-index:100;
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .logo{
      width:44px; height:44px; border-radius:14px; background:#111827;
      display:grid; place-items:center; border:1px solid rgba(255,255,255,.10);
    }
    .title{display:flex; flex-direction:column; line-height:1.1;}
    .title b{font-size:18px; letter-spacing:.2px}
    .title span{font-size:12px; color:var(--muted)}
.langWrap{
      position:relative;
      display:flex; align-items:center;
      z-index:110;
    }
    .langTrigger{
      width:auto;
      min-width:86px;
      height:34px;
      padding:0 10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-size:13px;
      border-radius:12px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
    }
.langMenu{
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      width:min(180px, calc(100vw - 32px));
      display:none;
      padding:6px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(15,26,46,.98);
      box-shadow: var(--shadow);
      z-index:120;
}
    .langMenu.open{display:block;}
    .langItem{
      width:100%;
      text-align:left;
      padding:9px 10px;
      border-radius:10px;
      border:1px solid transparent;
      background: transparent;
      font-size:13px;
    }
    .langItem:hover,
    .langItem:focus-visible,
    .langItem.active{
      background: rgba(6,182,212,.16);
      border-color: rgba(6,182,212,.35);
    }
    .layout{
      display:grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap:16px;
      align-items:start;
      margin-top:16px;
    }
    @media (max-width: 1060px){ .layout{grid-template-columns:1fr} }
    .card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background: rgba(15,26,46,.60);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .cardHeader{
      padding:14px 14px 10px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    }
    .cardHeader b{display:block; font-size:13px}
    .cardHeader small{color:var(--muted)}
    .cardBody{padding:14px}
    .grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
    .grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px;}
    .field label{display:block; font-size:12px; color: var(--muted); margin-bottom:6px;}
    .hint{font-size:11px; color:var(--muted); margin-top:6px; opacity:.95}
    input, select, button{
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(13,22,40,.8);
      color: var(--text);
      outline:none;
    }
    input:focus, select:focus{border-color: rgba(6,182,212,.65); box-shadow: 0 0 0 4px rgba(6,182,212,.12)}
    button{
      cursor:pointer;
      background: linear-gradient(180deg, rgba(6,182,212,.20), rgba(13,22,40,.8));
      border:1px solid rgba(6,182,212,.35);
    }
    button:hover{border-color: rgba(6,182,212,.7)}
    .btn2{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);}
    .btnGood{background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(13,22,40,.8)); border:1px solid rgba(34,197,94,.35);}
    .btnWarn{background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(13,22,40,.8)); border:1px solid rgba(245,158,11,.35);}

/* keep header language control compact (override global button styles) */
.topbar .langTrigger{
  width:auto;
  padding:0 10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.topbar .langItem{
  width:100%;
  padding:9px 10px;
  background: transparent;
  border:1px solid transparent;
}
    .actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
    .actions3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:10px;}
    .note{
      margin-top:10px; padding:10px 12px; border-radius:12px;
      border:1px dashed rgba(255,255,255,.18);
      color: var(--muted); font-size:12px;
    }
    .warn{
      margin-top:10px; padding:10px 12px; border-radius:12px;
      border:1px solid rgba(245,158,11,.35);
      background: rgba(245,158,11,.08);
      color: #ffd7a1; font-size:12px; display:none;
    }
    .ok{
      border-color: rgba(34,197,94,.35) !important;
      background: rgba(34,197,94,.10) !important;
      color: #c7ffd9 !important;
    }
    .canvasWrap{padding:14px;}
    .sidebarCard .cardBody{display:flex; flex-direction:column; gap:10px;}
    .mainStage{padding:14px;}
    .mainStage .canvasWrap{
      display:flex;
      justify-content:center;
      align-items:center;
      padding:10px 12px 16px;
    }
    .mazeStage{
      width:100%;
      max-width:1000px;
      margin:0 auto;
    }
    canvas{
      display:block;
      width:100%; height:auto;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:#fff;
      transition: opacity .18s ease;
    }
    canvas.is-loading{opacity:.6}
    .footer{
      margin-top:16px;
      text-align:center;
      color: var(--muted);
      font-size:12px;
      opacity:.95;
    }
    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      padding:1px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--text);
    }
    .rowLine{height:1px; background:rgba(255,255,255,.10); margin:12px 0;}
    .mini{font-size:11px; color:var(--muted)}
    .chip{
      display:inline-flex; gap:6px; align-items:center;
      padding:6px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      font-size:12px; color:var(--text);
      white-space:nowrap;
    }
    .switchLine{
      display:flex; gap:10px; align-items:center; justify-content:space-between;
      padding:10px 12px; border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
    }
    .switchLine b{font-size:12px}
    .switchLine span{font-size:11px; color:var(--muted)}
    .toggle{
      width:46px; height:26px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
      background: rgba(13,22,40,.8);
      position:relative; cursor:pointer;
    }
    .toggle::after{
      content:""; width:20px; height:20px; border-radius:999px;
      background: rgba(255,255,255,.80);
      position:absolute; top:2px; left:2px;
      transition: all .18s ease;
    }
    .toggle.on{
      border-color: rgba(34,197,94,.35);
      background: rgba(34,197,94,.12);
    }
    .toggle.on::after{left:24px; background: rgba(34,197,94,.95)}
  

/* =========================
   Mode selector overlay + extras
========================= */
.modebar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.modebtn{
  width:auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-size:12px;
}
.modebtn:hover{border-color: rgba(6,182,212,.6)}
.modebtn.active{
  background: linear-gradient(180deg, rgba(6,182,212,.24), rgba(13,22,40,.85));
  border-color: rgba(6,182,212,.65);
  box-shadow: 0 0 0 2px rgba(6,182,212,.2), inset 0 0 0 1px rgba(255,255,255,.08);
  font-weight: 700;
}

button[aria-pressed="true"]{
  border-color: rgba(34,197,94,.6);
  background: rgba(34,197,94,.18);
}

.overlay{
  position:fixed; inset:0;
  display:grid;
  place-items:center;
  z-index:9991;
  pointer-events:none;
}
.overlay.hidden{display:none;}
.overlay-backdrop{
  position:fixed;
  inset:0;
  z-index:9990;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  pointer-events:auto;
}
.overlay-card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:9991;
  pointer-events:auto;
  width:min(760px, 92vw);
  border-radius: 18px;
  background: rgba(15,26,46,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  padding: 20px;
}
.overlay-header h1{margin:0 0 6px 0; font-size:28px;}
.overlay-header p{margin:0 0 16px 0; color: var(--muted);}
.overlay-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){ .overlay-actions{grid-template-columns:1fr;} }
.overlay-actions button{
  text-align:left;
  padding: 14px 14px;
  border-radius: 14px;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.overlay-actions .primary{
  background: linear-gradient(180deg, rgba(6,182,212,.22), rgba(13,22,40,.8));
  border-color: rgba(6,182,212,.35);
}
.overlay-actions .secondary{
  background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(13,22,40,.8));
  border-color: rgba(34,197,94,.35);
}
.btn-title{display:block; font-weight:800; font-size:16px;}
.btn-sub{display:block; margin-top:4px; color: var(--muted); font-size:13px;}
.overlay-footer{margin-top: 12px; display:flex; justify-content:flex-end;}
.linklike{
  background: transparent;
  border:none;
  color: var(--muted);
  cursor:pointer;
  padding: 8px 6px;
}
.linklike:hover{color: var(--text);}

.playHud{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.playHud-left, .playHud-right{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.playScores{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
#localScores{margin-top:8px; display:flex; flex-direction:column; gap:8px;}
.scoreRow{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(13,22,40,.55);
}


/* =========================
   Play options + Mobile D-pad
========================= */

.playOptions{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.playOptionsInner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.playCustomPanel{
  flex: 1 1 280px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(13,22,40,.30);
}

.advancedBlock{
  margin-top: 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}
.advancedBlock summary{
  cursor:pointer;
  color: var(--muted);
  font-size:12px;
  font-weight:600;
}

.dpad{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 500;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.dpad-grid{
  display:grid;
  grid-template-columns: 52px 52px 52px;
  grid-template-rows: 52px 52px 52px;
  gap: 8px;
}
.dpad-btn{
  width:52px;
  height:52px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  touch-action:none;
  padding:0;
}
.dpad-btn:active{ transform: translateY(1px); opacity: .9; }
@media (max-width: 820px){
  body.apml-playing .dpad{ display:block !important; }
}

.hidden{display:none !important;}

.homeScreen{margin-top:16px;}
.homeLead{color:var(--muted); margin:0 0 14px 0;}
.puzzleGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
.puzzleCard{padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(13,22,40,.55);}
.puzzleCard h3{margin:0 0 8px 0;}
.puzzleCard p{margin:0 0 12px 0; color:var(--muted);} 
.constructionBadge{display:inline-flex; margin:0 0 12px 0; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,184,0,.12); font-size:12px; color:#ffd682;}
.cardActions{display:flex; gap:8px;}
.cardActions .modebtn[disabled]{opacity:.6; pointer-events:none; cursor:not-allowed;}
.placeholderScreen{margin-top:16px;}

textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(13,22,40,.8);color:var(--text);}
.wsGrid{display:grid;gap:2px;background:#fff;padding:12px;border-radius:12px;max-width:820px;margin:0 auto;border:1px solid rgba(255,255,255,.12);touch-action:none;user-select:none;}
.wsCell{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#111;border-radius:6px;font-size:15px;}
.wsCell.sel{background:#bae6fd;}
.wsCell.found{background:#86efac;}
.wsWordListWrap{margin-top:12px;}
.wsWordList{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.wsWordList li{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;}
.wsWordList li.found{text-decoration:line-through;opacity:.65;}
.topbar{isolation:isolate;}