:root{
  --ink:#000; --card:#141518; --line:#2C2D32; --gold:#C9A86A;
  --cream:#F4F1EA; --muted:#B9B4AA; --dim:#8C877D; --danger:#d9534f;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,label.secondary{font:inherit;color:inherit;border:0;cursor:pointer}
.hidden{display:none!important}

.screen{display:none;position:fixed;inset:0;flex-direction:column;
  padding:calc(var(--st) + 8px) calc(var(--sr) + 16px) calc(var(--sb) + 12px) calc(var(--sl) + 16px)}
.screen.active{display:flex}

.top{display:flex;align-items:center;gap:10px;min-height:48px}
.top h1{flex:1;margin:0;font-size:28px;font-weight:700;letter-spacing:-.3px}
.icon{background:var(--card);width:44px;height:44px;border-radius:12px;font-size:22px;flex:none}
.icon.danger{color:var(--danger);font-size:18px}
.primary{background:var(--gold);color:#111;font-weight:700;padding:14px 20px;border-radius:14px}
.secondary{background:var(--card);padding:14px 20px;border-radius:14px;text-align:center;border:1px solid var(--line)}
.link{background:none;color:var(--gold);padding:6px 0 0;display:block;font-weight:600}
.tip{background:#1d1a12;border:1px solid #4a3f28;color:#e8dcc3;border-radius:14px;padding:12px 14px;margin:10px 0;font-size:14px}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
#list{list-style:none;margin:0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
#list li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
#list li b{display:block;font-size:17px;margin-bottom:4px}
#list li span{display:block;color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#list li{display:flex;align-items:center;gap:12px}
#list li .txt{flex:1;min-width:0}
#list li .box{display:none;flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--dim)}
#library.selecting #list li .box{display:block}
#list li.sel{border-color:var(--gold)}
#list li.sel .box{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 4px var(--card)}
#library.selecting .actions{display:none}
.selbar{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.selbar .pill{flex:1;padding:12px 8px}
.pill:disabled{opacity:.35}
.pill.danger{color:#ff8a85;border-color:#5a2a28}
.empty{color:var(--dim);text-align:center;margin-top:40px}

#title{flex:1;min-width:0;background:transparent;border:0;color:var(--cream);font:700 20px/1.2 inherit;font-family:inherit;outline:none}
#text{flex:1;margin:10px 0;background:var(--card);color:var(--cream);border:1px solid var(--line);
  border-radius:14px;padding:14px;font:17px/1.5 inherit;font-family:inherit;resize:none;outline:none}
.bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
#stats{color:var(--dim);font-size:13px}

/* ---------- LEITURA ---------- */
#prompter{padding:0;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:absolute;inset:0;overflow:hidden;transform-origin:50% 50%}
#track{position:absolute;left:0;right:0;top:0;will-change:transform}
#content{color:#fff;font-weight:600;white-space:pre-wrap;overflow-wrap:normal;hyphens:none;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
#guide{position:absolute;left:0;right:0;pointer-events:none;
  border-top:2px solid rgba(201,168,106,.55);background:linear-gradient(rgba(201,168,106,.10),rgba(201,168,106,0))}
#guide::before{content:"";position:absolute;left:0;top:-12px;border:10px solid transparent;border-left:14px solid var(--gold)}
#countdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:40vmin;font-weight:800;color:var(--gold);background:rgba(0,0,0,.6)}
#timer{position:absolute;left:50%;top:calc(var(--st) + 8px);transform:translateX(-50%);display:flex;gap:14px;
  font-size:15px;color:rgba(244,241,234,.55);background:rgba(0,0,0,.65);padding:5px 12px;border-radius:14px;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
#timer b{color:var(--gold);font-weight:700}
#prompter:not(.playing) #timer{top:calc(var(--st) + 62px)}
#toast{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:rgba(20,20,20,.85);
  color:var(--cream);padding:8px 16px;border-radius:20px;font-size:20px;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.show{opacity:1}

#hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;
  padding:calc(var(--st) + 8px) calc(var(--sr) + 12px) calc(var(--sb) + 12px) calc(var(--sl) + 12px);
  transition:opacity .2s}
#hud > *{pointer-events:auto}
#prompter.playing #hud{opacity:0;transition:none}
#prompter.playing #hud > *{pointer-events:none}
.hud-top,.hud-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hud-center{pointer-events:none!important;align-self:center;color:var(--muted);background:rgba(0,0,0,.6);padding:8px 14px;border-radius:20px;font-size:15px}
.grow{flex:1}
.pill{background:rgba(30,31,35,.92);border:1px solid var(--line);color:var(--cream);padding:10px 14px;border-radius:22px;font-size:15px;white-space:nowrap}
.pill.on{background:var(--gold);color:#111;border-color:var(--gold);font-weight:700}
.speed{display:flex;align-items:center;gap:8px;margin-left:auto;background:rgba(0,0,0,.55);border-radius:24px;padding:2px}
.speed span{font-size:14px;color:var(--muted)} .speed b{color:var(--cream);font-size:17px}
.speed .pill{width:44px;padding:10px 0;font-size:20px}

/* ---------- AJUSTES ---------- */
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet-box{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;background:#17181b;border-radius:20px 20px 0 0;
  padding:14px 18px calc(var(--sb) + 18px);border-top:1px solid var(--line)}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{margin:6px 0;font-size:20px}
.sheet-box label{display:block;margin:14px 0 4px;color:var(--muted);font-size:14px}
.sheet-box output{float:right;color:var(--cream);font-weight:600}
.sheet-box input[type=range]{width:100%;margin-top:8px;accent-color:var(--gold);height:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet-box label.check{display:flex;align-items:center;gap:8px;color:var(--cream);font-size:15px}
.check input{width:22px;height:22px;accent-color:var(--gold)}
details{margin-top:16px;color:var(--muted)} summary{color:var(--cream);font-weight:600}
.keys{font-size:14px;line-height:1.7}
.ver{color:var(--dim);font-size:12px;text-align:center;margin-top:16px}