/* Una sola pantalla: cielo de atardecer anime detrás del tablero */
:root{
  --sky-top:#ffd6c9; --sky-bot:#c9b8f0; --ink:#3b2a3f; --soft:#6d5a78;
  --accent:#ff6b6b; --cream:#fff7ee;
  --display:'Mochiy Pop One','Zen Maru Gothic','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  --body:'Zen Maru Gothic','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%}
body{
  margin:0;box-sizing:border-box;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));color:var(--ink);font-family:var(--body);
  display:flex;flex-direction:column;align-items:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;
}
#wrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
canvas{display:block;border-radius:16px;box-shadow:0 10px 30px rgba(59,42,63,.25)}
#hint{font-size:13px;color:var(--soft);padding-top:8px;text-align:center;font-weight:700}
@media (prefers-reduced-motion:reduce){canvas{box-shadow:none}}

/* ---------- tabla en línea ---------- */
#wrap{position:relative}
.lb-btns{position:absolute;display:flex;gap:.6em;justify-content:center;z-index:2}
.lb-btns[hidden]{display:none}
.lb-btns button,.lb-panel button{font-family:var(--display);border:0;border-radius:999px;cursor:pointer;padding:.55em 1.1em;font-size:1em;line-height:1.1;touch-action:manipulation}
.lb-btns button:focus-visible,.lb-panel button:focus-visible,.lb-panel input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#lb-upload{background:#ffb347;color:var(--ink);box-shadow:0 3px 0 #d98a2b}
#lb-upload:disabled{background:#c9e8b8;box-shadow:0 3px 0 #8fbf78;cursor:default}
#lb-open{background:#8f7ad6;color:var(--cream);box-shadow:0 3px 0 #6a56b0}
.lb-btns.title{justify-content:flex-end}
.lb-btns.title #lb-open{padding:.4em .8em;font-size:.85em}
#lb-overlay{position:fixed;inset:0;z-index:10;background:rgba(59,42,63,.45);display:flex;align-items:center;justify-content:center;padding:16px}
#lb-overlay[hidden]{display:none}
.lb-panel{background:var(--cream);border:4px solid #ffb3a7;border-radius:22px;box-shadow:0 12px 40px rgba(59,42,63,.35);width:min(420px,100%);max-height:100%;overflow:auto;padding:18px 18px 16px;box-sizing:border-box;user-select:text;-webkit-user-select:text}
.lb-panel[hidden]{display:none}
.lb-panel h2{font-family:var(--display);font-weight:400;color:var(--accent);margin:0 0 10px;font-size:24px;text-align:center}
.lb-panel p{margin:6px 0;color:var(--soft);font-weight:700;font-size:14px;text-align:center}
.lb-panel input{width:100%;box-sizing:border-box;font:700 20px var(--body);padding:10px 14px;border-radius:14px;border:3px solid #d9c8f0;background:#fff;color:var(--ink);touch-action:manipulation}
.lb-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.lb-primary{background:var(--accent);color:var(--cream);box-shadow:0 3px 0 #d94f4f}
.lb-primary:disabled{opacity:.6}
.lb-ghost{background:#eee3f7;color:var(--ink)}
.lb-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.lb-tab{background:#eee3f7;color:var(--soft);padding:.4em .9em!important;font-size:14px!important}
.lb-tab.on{background:#8f7ad6;color:var(--cream)}
#lb-list{list-style:none;margin:0;padding:0;font-weight:700}
#lb-list li{display:grid;grid-template-columns:2.2em 1fr auto 4.5em;gap:8px;align-items:center;padding:7px 10px;border-radius:12px;color:var(--ink)}
#lb-list li:nth-child(odd){background:#fdeee6}
#lb-list li.me{background:#ffe08a}
#lb-list li:nth-child(1) .rk{color:#e0a000}
#lb-list .rk{font-family:var(--display);text-align:center}
#lb-list .nk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lb-list .lv{color:var(--soft);font-size:12px}
#lb-list .sc{text-align:right;font-family:var(--display)}
#lb-list li.lb-empty{display:block;text-align:center;color:var(--soft);background:none}
#lb-note:empty,#lb-me:empty,#lb-name-msg:empty{display:none}
#lb-note{color:var(--ink)}
#lb-name-msg{color:#d94f4f}

/* ---------- cuenta y sonido ---------- */
#lb-sound{background:#fff7ee;color:var(--ink);box-shadow:0 3px 0 #d9c8f0;padding:.4em .6em;font-size:.85em}
#lb-account-open{background:#fff;color:var(--ink);box-shadow:0 3px 0 #d9c8f0;padding:.4em .8em;font-size:.85em;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btns.title #lb-sound{margin-right:auto}
.lb-google{display:inline-flex;align-items:center;gap:.6em;background:#fff;color:#3c4043;border:2px solid #dadce0!important;box-shadow:0 2px 0 #dadce0;font-family:var(--body)!important;font-weight:700}
.lb-google:disabled{opacity:.6;cursor:default}
.lb-small{font-size:12px!important}
.lb-hint{font-size:13px!important}
.lb-link{background:none!important;padding:0!important;color:var(--accent)!important;text-decoration:underline;font-size:1em!important;font-family:var(--body)!important;font-weight:700;box-shadow:none!important;border-radius:0!important}
.lb-user{display:flex;align-items:center;gap:12px;justify-content:center;margin:4px 0 8px}
.lb-user img{border-radius:50%;border:3px solid #ffb3a7;width:56px;height:56px;object-fit:cover}
.lb-user-txt{display:flex;flex-direction:column;min-width:0;color:var(--ink)}
.lb-user-txt strong{font-family:var(--display);font-weight:400;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-user-txt span{color:var(--soft);font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lb-acc-msg:empty{display:none}
#lb-acc-msg{color:var(--ink)}