:root{color-scheme:light;--tinta:#4a2c3d;--vinho:#6e3448;--creme:#fbf4e8;--creme2:#f4e9d6;--rosa:#e7a9b0;--rosa2:#c9737f;--menta:#a9d6c3;--menta2:#5f9e86;--ouro:#d6a84e;--ouro2:#a87a2c;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--tinta)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f6e3dc}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,#scene:focus-visible{outline:3px solid var(--vinho);outline-offset:3px}
[hidden]{display:none!important}
#app{position:relative;width:100%;height:100dvh;overflow:hidden;background:linear-gradient(180deg,#fdf1e2 0%,#fbe3dc 38%,#f3d3d6 66%,#dfeadf 100%)}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 18%,#fff8e0cc,transparent 55%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 3px 4px)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;pointer-events:none}
.hud>*{pointer-events:auto}
.mesa-box{background:#fbf4e8e6;border:2px solid var(--tinta);border-radius:10px;padding:6px 8px 4px;box-shadow:0 3px 0 #4a2c3d33;display:flex;flex-direction:column;align-items:center}
#mesa{width:225px;height:87px;image-rendering:pixelated;display:block}
#mesa-label{font-size:12px;font-weight:700;letter-spacing:.3px;margin-top:2px}
.fase{justify-self:center;text-align:center;background:#fbf4e8d9;border-radius:10px;padding:6px 14px;border:2px solid #4a2c3d22}
.fase small{display:block;font-size:11px;letter-spacing:2px;color:var(--vinho)}
.fase strong{font-size:19px}
.acoes{display:flex;gap:8px}
.round{width:46px;height:46px;border-radius:50%;border:2px solid var(--tinta);background:var(--creme);display:grid;place-items:center;box-shadow:0 3px 0 #4a2c3d44;padding:0}
.round:hover{background:#fff}
.round:active{transform:translateY(2px);box-shadow:0 1px 0 #4a2c3d44}
.round:disabled{opacity:.45;cursor:default}
.round svg{width:22px;height:22px;fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.round[aria-pressed=false] #sound-wave{display:none}
.round[aria-pressed=false]{background:#eadfd2}
.hint{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(620px,calc(100% - 24px));background:#fbf4e8f0;border:2px solid var(--tinta);border-radius:12px;padding:10px 16px;box-shadow:0 4px 0 #4a2c3d33;pointer-events:none}
.hint p{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.hint p::before{content:"◆ ";color:var(--ouro2)}
.hint small{display:block;margin-top:4px;font-size:13px;color:var(--vinho)}
.focus-label{position:absolute;right:14px;bottom:120px;background:var(--tinta);color:var(--creme);padding:6px 12px;border-radius:8px;font-size:14px;pointer-events:none}
.toast{position:absolute;left:50%;top:70px;transform:translate(-50%,-8px);background:var(--vinho);color:var(--creme);padding:8px 16px;border-radius:20px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:absolute;inset:0;display:grid;place-items:center;background:#4a2c3d55;padding:16px;overflow:auto}
.card{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--creme);border:3px solid var(--tinta);border-radius:16px;padding:22px 24px;box-shadow:0 8px 0 #4a2c3d44}
.card h1{font-size:34px;margin:4px 0 8px;line-height:1.05;font-family:Georgia,"Times New Roman",serif}
.card h2{font-size:24px;margin:2px 0 10px;font-family:Georgia,"Times New Roman",serif}
.eyebrow{font-size:12px;letter-spacing:2.5px;color:var(--vinho);font-weight:700}
.card p{line-height:1.45;margin:8px 0}
.ficcao{background:#f1e2cf;border-left:5px solid var(--ouro);padding:8px 12px;border-radius:6px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{border:2px solid var(--tinta);background:#fff;border-radius:10px;padding:10px 16px;font-weight:700;box-shadow:0 3px 0 #4a2c3d44;min-height:46px}
.btn.primary{background:var(--rosa);}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #4a2c3d44}
.btn:disabled{opacity:.5;cursor:default}
.levels{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.levels button{width:100%;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;text-align:left;border:2px solid var(--tinta);border-radius:10px;background:#fff;padding:8px 12px;min-height:52px}
.levels button:disabled{background:#efe6da;color:#7a6a70;cursor:default}
.levels .n{font-weight:800;font-size:20px;text-align:center}
.levels .st{font-size:13px;font-weight:700;padding:3px 8px;border-radius:12px;border:2px solid currentColor}
.levels .st.ok{color:var(--menta2)}
.options{display:grid;gap:14px;margin-top:8px}
.options fieldset{border:2px solid #4a2c3d33;border-radius:10px;padding:8px 12px}
.options legend{font-weight:700}
.options label{display:flex;align-items:center;gap:8px;min-height:36px}
.options input[type=range]{width:100%}
.result-mesa{width:100%;max-width:450px;aspect-ratio:150/58;image-rendering:pixelated;display:block;margin:6px auto 4px;background:#fdf6ea;border-radius:8px;border:2px solid #4a2c3d22}
.creditos{margin:8px 0;padding-left:18px;font-size:14px;line-height:1.5}.creditos-fim{color:#6e3448}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.stats b{font-size:20px}
#save-warning{position:absolute;left:12px;bottom:12px;margin:0;background:#fff3cf;border:2px solid var(--ouro2);padding:6px 10px;border-radius:8px;font-size:13px;max-width:calc(100% - 24px)}
.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--vinho);margin:0}
#app:not([data-screen=loading]) .loading{display:none}
#app[data-screen=capa] .hud,#app[data-screen=capa] .hint,#app[data-screen=capa] #toast{display:none!important}
@media (max-width:640px){
  .hud{grid-template-columns:1fr auto;gap:8px;left:8px;right:8px}
  .fase{grid-column:1/3;grid-row:2;justify-self:start;padding:4px 10px}
  .fase strong{font-size:16px}
  #mesa{width:150px;height:58px}
  .mesa-box{padding:4px 6px 2px}
  #mesa-label{font-size:11px}
  .round{width:44px;height:44px}
  .acoes{gap:6px}
  .card{padding:18px 16px}
  .card h1{font-size:28px}
  .hint p{font-size:15px}
  .hint small{font-size:12px}
  .toast{top:142px;font-size:14px}
  .focus-label{bottom:auto;top:160px}
}
@media (pointer:coarse){.hint small{display:none}}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}