/* papel e madeira: cartoes cor de papel com borda marrom, botoes de madeira */
:root{--paper:#fbf3df;--paper2:#f3e6c6;--ink:#4a3320;--muted:#8a7258;--edge:#7a5634;--wood:#9c6a40;--wood2:#5e3b1f;
  --accent:#f2b705;--accent2:#e2552f;--ok:#3d9a52;--blue:#2f6fb3;
  --f-display:"Baloo 2",system-ui,sans-serif;--f-body:"Nunito",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#a6daf4;font-family:var(--f-body);color:var(--ink);user-select:none;-webkit-user-select:none}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

#hud{position:fixed;inset:0;pointer-events:none}
.top{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{pointer-events:auto;background:var(--paper);border:3px solid var(--edge);border-radius:999px;padding:5px 14px;font:800 15px var(--f-display);box-shadow:0 3px 0 rgba(74,51,32,.35);font-variant-numeric:tabular-nums}
.chip b{font-weight:800}
#lvlName{margin-right:auto}
#hint{position:absolute;top:66px;left:50%;transform:translateX(-50%);background:rgba(58,40,24,.9);color:#fff8e8;padding:8px 16px;border-radius:12px;font-weight:800;font-size:14px;max-width:calc(100% - 32px);text-align:center;transition:opacity .4s}
#holdWrap{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:220px;height:14px;border-radius:8px;background:var(--paper2);border:2px solid var(--edge);overflow:hidden;opacity:0;transition:opacity .2s}
#holdWrap.on{opacity:1}
#hold{height:100%;width:0;background:var(--ok)}

/* painel */
#dash{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:300px;height:132px;background:#22262e;border:4px solid var(--wood2);border-radius:18px;box-shadow:0 5px 0 rgba(60,38,20,.45)}

/* alavanca em H */
#clutchBox{position:absolute;pointer-events:auto;right:calc(max(12px,env(safe-area-inset-right)) + 486px);bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--paper);border:3px solid var(--edge);border-radius:16px;padding:8px;box-shadow:0 3px 0 rgba(74,51,32,.35);font:800 12px/1.1 var(--f-display);text-align:center}
#clutchBox small{font-weight:600;color:var(--muted)}
.cbar{width:16px;height:44px;border-radius:6px;background:var(--paper2);border:2px solid var(--edge);display:flex;align-items:flex-end;overflow:hidden}
.cbar i{display:block;width:100%;height:0;background:#5fa8e8}
.startBtn{background:var(--accent);border:2.5px solid #9a7200;border-radius:10px;padding:5px 8px;font:800 12px/1.1 var(--f-display);box-shadow:0 3px 0 rgba(0,0,0,.25)}

/* toque */
#touch{position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));pointer-events:none}
.pad{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.pad button{width:72px;height:72px;border-radius:18px;background:var(--paper);border:3px solid var(--edge);font:900 28px var(--f-display);box-shadow:0 4px 0 rgba(74,51,32,.35);touch-action:none}
.pad button.on{background:var(--accent)}
.pad.col{flex-direction:column;align-items:flex-end;gap:8px}
.mini{display:flex;gap:6px}
.mini button{width:48px;height:44px;font-size:18px;border-radius:12px}
.pedals{display:flex;gap:8px;align-items:flex-end}
.pad button.pedal{width:66px;height:96px;font-size:13px;border-radius:14px}
.pad button.pedal.gas{height:118px;background:#dff2d8}
.pad button.pedal.brake{background:#ffe2d6}
.pad button.pedal.clutch{background:#dbeafa;height:96px}
body.touch #dash{bottom:auto;top:58px;right:50%;transform:translateX(50%) scale(.82);transform-origin:top center}
body.touch #hint{top:180px}
body.touch #holdWrap{bottom:150px}
body.touch #shifter{right:max(12px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 182px);width:140px;height:150px}
body.touch #clutchBox{right:calc(max(12px,env(safe-area-inset-right)) + 140px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 182px);padding:6px}
body.touch #clutchBox .cbar,body.touch #clutchBox>span{display:none}

/* menus */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(40,28,16,.35);padding:16px}
.card{background:var(--paper);border:3px solid var(--edge);border-radius:20px;padding:22px;width:min(480px,100%);text-align:center;box-shadow:0 6px 0 rgba(74,51,32,.35),inset 0 0 0 2px #fff8e8;max-height:100%;overflow:auto}
h1{margin:0 0 2px;font:800 38px/1.05 var(--f-display);letter-spacing:-.5px;color:var(--wood2)}
h2{margin:0 0 8px;font:800 30px var(--f-display);color:var(--wood2)}
.card p{margin:6px 0 14px}
.keys{font-size:12px;color:var(--muted)}
#levels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 12px}
.lvl{background:#fff;border:2.5px solid #e6d3a8;border-radius:14px;padding:10px 6px;font:800 20px var(--f-display);box-shadow:0 3px 0 rgba(122,86,52,.25)}
.lvl small{display:block;font:700 11px var(--f-body);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl .st{color:var(--accent);letter-spacing:2px;font-size:14px;margin-top:2px}
.lvl:disabled{opacity:.45;cursor:not-allowed}
.lvl:not(:disabled):hover{border-color:var(--blue)}
#stars{font-size:46px;color:var(--accent);letter-spacing:6px;margin:4px 0;text-shadow:0 3px 0 rgba(122,86,52,.3)}
#stars .off{color:#e2d5b6}
.row{display:flex;gap:10px;justify-content:center}
.row button{padding:12px 20px;border-radius:12px;background:var(--paper2);border:2.5px solid var(--edge);font:800 16px var(--f-display);box-shadow:0 3px 0 rgba(74,51,32,.3)}
.row button.primary{background:var(--accent);border-color:#9a7200}
.link{background:none;margin-top:10px;color:var(--muted);text-decoration:underline;font-weight:700}
.opts{display:flex;gap:10px 16px;justify-content:center;flex-wrap:wrap;margin:4px 0 10px;font-weight:800;font-size:14px}
.opts input{accent-color:var(--wood);width:16px;height:16px;vertical-align:-3px}
.opts select{font:inherit;font-weight:800;padding:3px 6px;border-radius:8px;border:2px solid var(--edge);background:#fff}
table.keys{margin:0 auto 6px;border-collapse:collapse;font-size:12px;color:var(--muted)}
table.keys td{padding:2px 6px;text-align:left}
table.keys td:nth-child(odd){font-weight:800;color:var(--ink);text-align:right;white-space:nowrap}
.loading{grid-column:1/-1;color:var(--muted);font-weight:700}

@media (max-width:820px){
  #clutchBox{right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)}
  #shifter{right:calc(max(12px,env(safe-area-inset-right)) + 90px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)}
}
@media (max-width:480px){
  .pad{gap:6px}
  .pad button{width:56px;height:56px;font-size:22px}
  .pad button.pedal{width:54px;height:84px;font-size:11px}.pad button.pedal.gas{height:100px}.pad button.pedal.clutch{height:84px}
  .mini button{width:42px;height:40px}
  .chip{padding:4px 10px;font-size:13px}
  #levels{grid-template-columns:repeat(3,1fr)}
}

/* ---------- mundo aberto ---------- */
#place{margin-right:auto}
.miniWrap{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 46px);right:max(12px,env(safe-area-inset-right));width:156px;height:156px;border-radius:50%;overflow:hidden;border:4px solid var(--wood2);box-shadow:0 4px 0 rgba(60,38,20,.4);background:#7cc04f}
#minimap{width:100%;height:100%;display:block}
#prompt{position:absolute;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 96px);transform:translateX(-50%);background:var(--paper);border:3px solid var(--edge);border-radius:999px;padding:8px 18px;font:800 16px var(--f-display);box-shadow:0 3px 0 rgba(74,51,32,.35);animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,-4px)}}
.enterBtn{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px);z-index:5;background:var(--accent);border:3px solid #9a7200;border-radius:16px;padding:10px 16px;font:800 16px var(--f-display);box-shadow:0 4px 0 rgba(0,0,0,.25);display:none}
body.touch .enterBtn{display:block}
.enterBtn.glow{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
#footPads{pointer-events:auto}
#joy{width:130px;height:130px;border-radius:50%;background:rgba(251,243,223,.5);border:3px solid var(--edge);display:grid;place-items:center;touch-action:none}
#joyKnob{width:56px;height:56px;border-radius:50%;background:var(--paper);border:3px solid var(--edge);box-shadow:0 3px 0 rgba(74,51,32,.35)}
#touch{display:none}
body.touch #touch{display:flex}
#drivePads{display:flex;justify-content:space-between;width:100%}
#drivePads[hidden]{display:none}

/* tela inicial */
.sub{margin:0 0 12px;font:800 16px var(--f-display);color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.ask{font:800 20px var(--f-display);margin:6px 0 10px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.opt{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border-radius:16px;background:#fff;border:3px solid #e6d3a8;box-shadow:0 4px 0 rgba(122,86,52,.25)}
.opt b{font:800 22px var(--f-display);color:var(--wood2)}
.opt small{font-size:13px;color:var(--muted);font-weight:700;line-height:1.35}
.opt:hover{border-color:var(--blue)}
.card .col{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.btn{padding:12px 18px;border-radius:12px;background:var(--paper2);border:2.5px solid var(--edge);font:800 16px var(--f-display);box-shadow:0 3px 0 rgba(74,51,32,.3)}
.btn.primary{background:var(--accent);border-color:#9a7200}

/* alavanca em H: placa de metal, coifa de borracha, manopla */
#shifter{position:absolute;pointer-events:auto;right:calc(max(12px,env(safe-area-inset-right)) + 316px);bottom:max(12px,env(safe-area-inset-bottom));width:170px;height:180px;
  background:linear-gradient(#a4723f,#8a5a30);border:4px solid var(--wood2);border-radius:22px;box-shadow:0 5px 0 rgba(60,38,20,.45),inset 0 2px 0 rgba(255,255,255,.2)}
#shifter .gate{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plate{fill:url(#plateG);stroke:#6e747c;stroke-width:2}
.screw{fill:#7d838b;stroke:#565b62;stroke-width:1}
.slot{stroke:#454a50;stroke-width:1.4}
#gatePath{fill:none;stroke:#1d1f23;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
#gateInner{fill:none;stroke:#3a3e45;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;transform:translateY(2px)}
#bootIn{fill:#0c0d0f}
#stick{stroke:#c9ced6;stroke-width:6;stroke-linecap:round}
#gateLabels circle{fill:#f4f2ec;stroke:#6e747c;stroke-width:1.5}
#gateLabels text{font:800 13px var(--f-display);fill:#2b2d33;text-anchor:middle}
#gateLabels g.rev circle{fill:#ffd9d0}
#gateLabels g.on circle{fill:var(--accent);stroke:#9a7200}
#knob{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#5a5e66,#24262b 62%,#0f1012);border:2px solid #0a0b0c;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.25)}
#knob::after{content:"";position:absolute;inset:9px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 3v14M10 3v14M16 3v14M4 10h12' stroke='%23e8e8e8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
#knob.on{cursor:grabbing;box-shadow:0 0 0 4px rgba(242,183,5,.6)}
body.touch #shifter{right:max(12px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 200px);width:150px;height:160px}
body.touch .miniWrap{width:110px;height:110px}
body.touch #dash{top:auto;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 140px);left:50%;right:auto;transform:translateX(-50%) scale(.75);transform-origin:bottom center}
@media (max-width:820px){ #shifter{right:calc(max(12px,env(safe-area-inset-right)) + 90px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 150px)} }
@media (max-width:480px){ .choice{grid-template-columns:1fr} }