/* Lucid Labs game, scoped to #ll-root so theme styles stay out */
#ll-root{
  --bg:#eaf6ff; --panel:#ffffff; --text:#101828; --sub:#5b6b7f;
  --accent:#7c5cff; --accent2:#4cc9ff;
  --btn-bg:#101828; --btn-text:#ffffff;
  --panel-shadow:0 12px 40px rgba(16,24,40,.18);
  --ring:rgba(16,24,40,.12); --inset:rgba(16,24,40,.05);
  position:relative; width:100%; max-width:640px; margin:0 auto;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); user-select:none; -webkit-user-select:none;
}
#ll-root[data-theme="dark"]{
  --bg:#0f1113; --panel:#17191d; --text:#f2f5fb; --sub:#9aa3ad;
  --btn-bg:#f2f5fb; --btn-text:#101828;
  --panel-shadow:0 12px 40px rgba(0,0,0,.55);
  --ring:#2a2e35; --inset:#1f2228;
}
#ll-root *{margin:0;padding:0;box-sizing:border-box}
#ll-root canvas{
  display:block; width:100%; aspect-ratio:420/640; border-radius:20px;
  box-shadow:var(--panel-shadow); touch-action:manipulation; cursor:pointer;
}
#ll-root .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:14px;
  border-radius:20px; padding:14px; pointer-events:none; overflow-y:auto;
  scrollbar-width:none;
}
#ll-root .overlay::-webkit-scrollbar{display:none}
#ll-root .overlay.hidden{display:none}
#ll-root .card{
  pointer-events:auto; background:var(--panel); border:1px solid var(--ring);
  border-radius:20px; padding:16px 20px; box-shadow:var(--panel-shadow);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:100%; max-width:330px; margin:auto;
}
#ll-root .badge{
  font-size:10px; font-weight:700; letter-spacing:2px; color:var(--sub);
  border:1px solid var(--ring); border-radius:999px; padding:5px 12px;
  text-transform:uppercase;
}
#ll-root .logo-img{width:100%; max-width:280px; height:auto; display:block}
#ll-root .wm-text{text-align:left; line-height:1.05}
#ll-root .wm-text b{font-size:26px; letter-spacing:2px; font-weight:800}
#ll-root .wm-text span{display:block; font-size:13px; letter-spacing:7px; color:var(--sub); font-weight:600}
#ll-root .tagline{color:var(--sub); font-size:14px; line-height:1.45; text-wrap:balance}
#ll-root .tagline b{color:var(--text)}
#ll-root .bigscore{font-size:34px; font-weight:800; line-height:1}
#ll-root .medal{font-size:14px; color:var(--sub)}
#ll-root button{font:inherit; line-height:1.2}
#ll-root button.play{
  pointer-events:auto; border:0; border-radius:999px; padding:12px 32px;
  font-size:16px; font-weight:700; color:#ffffff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  cursor:pointer; box-shadow:0 6px 22px rgba(124,92,255,.45); transition:transform .08s;
}
#ll-root button.play:active{transform:scale(.95)}
#ll-root button.mini{
  border:1px solid var(--ring); border-radius:999px; padding:8px 16px;
  font-size:13px; font-weight:700; background:var(--inset); color:var(--text);
  cursor:pointer;
}
#ll-root button.mini.mode-active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#ffffff; border-color:transparent;
  box-shadow:0 4px 14px rgba(124,92,255,.4);
}
#ll-root button:disabled{opacity:.5; cursor:default}
#ll-root .hint{font-size:12px; color:var(--sub); text-wrap:balance}
#ll-root .subrow{display:flex; gap:8px; width:100%}
#ll-root .subrow input{
  flex:1; min-width:0; background:var(--inset); border:1px solid var(--ring);
  color:var(--text); border-radius:10px; padding:9px 12px; font-size:14px;
}
#ll-root .lb{width:100%; max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; scrollbar-width:none}
#ll-root .lb::-webkit-scrollbar{display:none}
#ll-root .lb.hidden{display:none}
#ll-root .lb-row{
  display:flex; align-items:center; gap:8px; font-size:13px;
  padding:6px 10px; border-radius:8px; background:var(--inset);
}
#ll-root .lb-row.me{outline:2px solid var(--text)}
#ll-root .lb-rank{color:var(--sub); width:20px; flex:none; font-weight:600}
#ll-root .lb-name{flex:1; text-align:left; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ll-root .lb-orbs{color:var(--sub); font-size:12px}
#ll-root .lb-score{font-weight:700}
#ll-root .pu-box{width:100%; background:rgba(4,92,180,.07); border:1px solid #045cb4; border-radius:12px; padding:10px 12px; text-align:left}
#ll-root .pu-title{font-size:11px; font-weight:800; letter-spacing:1.5px; color:#045cb4; text-transform:uppercase; margin-bottom:6px}
#ll-root .pu-text{font-size:13px; line-height:1.45; color:var(--text); margin-bottom:8px; text-wrap:pretty}
#ll-root .pu-text b{font-family:'Courier New',monospace}
#ll-root .pu-btn{display:inline-block; background:#045cb4; color:#ffffff; font-weight:700; font-size:13px; border-radius:8px; padding:8px 14px; text-decoration:none}
#ll-root .pu-btn:hover{background:#034a92; color:#ffffff}
#ll-root .pu-link{font-size:12px; font-weight:700; color:#045cb4; text-decoration:none}
#ll-root .pu-link:hover{text-decoration:underline}
#ll-root[data-theme="dark"] .pu-box{background:rgba(110,168,255,.08); border-color:#3b6fb0}
#ll-root[data-theme="dark"] .pu-title{color:#6ea8ff}
#ll-root[data-theme="dark"] .pu-link{color:#6ea8ff}
#ll-root .papf-brand{
  position:absolute; top:10px; right:10px; z-index:5; pointer-events:auto;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  text-decoration:none; text-align:right;
}
#ll-root .papf-brand img{height:32px; width:auto; display:block}
#ll-root .papf-brand span{
  font-size:11px; font-weight:700; color:var(--text); background:var(--panel);
  border:1px solid var(--ring); border-radius:999px; padding:4px 10px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
@media(max-width:560px){ #ll-root .papf-brand span{display:none} #ll-root .papf-brand img{height:24px} }
#ll-root #ll-themeBtn{
  position:absolute; top:10px; left:56px; z-index:5; pointer-events:auto;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--ring);
  background:var(--panel); color:var(--text); font-size:17px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.2); line-height:1; padding:0;
}
#ll-root #ll-fsBtn{
  position:absolute; top:10px; left:10px; z-index:5; pointer-events:auto;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--ring);
  background:var(--panel); color:var(--text); font-size:17px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.2); line-height:1; padding:0;
}
#ll-root.ll-fs{position:fixed; inset:0; width:100%; height:100%; max-width:none; margin:0; z-index:99999; background:#0f1113}
#ll-root.ll-fs canvas{width:100%; height:100%; border-radius:0; box-shadow:none}
#ll-root.ll-fs-rot{position:fixed; top:0; left:0; width:100vh; height:100vw; max-width:none; margin:0; z-index:99999; background:#0f1113; transform:rotate(90deg) translateY(-100%); transform-origin:top left}
#ll-root.ll-fs-rot canvas{width:100%; height:100%; border-radius:0; box-shadow:none}
#ll-root:fullscreen{max-width:none; background:#0f1113}
#ll-root:fullscreen canvas{width:100%; height:100%; border-radius:0}
body.ll-noscroll{overflow:hidden}