/* Boteco Tycoon — interface. Identidade: placa pintada de boteco (contorno escuro, sombra dura, creme, vermelho e mostarda). */
:root{
  --ink:#3b2418;--paper:#fff6dc;--paper2:#f6e7b4;--red:#c93a2b;--red-dark:#8f2419;--mustard:#f6c544;--mustard-dark:#b97f1c;
  --green:#2f7d5b;--green-dark:#1f5a41;--teal:#2a8c8c;--muted:#7a5a48;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --display:"Boteco Display","Arial Black",system-ui,sans-serif;
  --sans:"Boteco Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --edge:18px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#2a1a12}
body{font-family:var(--sans);font-weight:500;color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Palco */
.game-app,.gameboard{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
.gameboard{isolation:isolate;background:#dccfb3;touch-action:none;user-select:none;-webkit-user-select:none}
.gameboard:fullscreen{width:100vw;height:100dvh}
.gameboard canvas{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;touch-action:none}
/* Luz de fim de tarde: bordas quentes e escuras, centro limpo. */
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 95% at 50% 46%,rgba(255,214,150,0) 54%,rgba(88,38,14,.3) 100%),linear-gradient(180deg,rgba(255,190,110,.1),rgba(255,190,110,0) 36%)}

/* Barra superior */
.topbar{position:absolute;z-index:4;top:calc(var(--safe-top) + 14px);left:var(--edge);right:var(--edge);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.chip{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 16px 7px 10px;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink)}
.chip small{display:block;font:700 9px/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.chiptext{min-width:0}
.cashchip strong{display:block;font:900 24px/1 var(--display);letter-spacing:-.4px;white-space:nowrap}
.coinicon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;background:var(--mustard);border:2.5px solid var(--ink);box-shadow:inset 0 -4px 0 var(--mustard-dark),inset 0 0 0 3px #ffe08a;border-radius:50%;font:900 21px/1 var(--display);color:#8a5a12;padding-bottom:3px}
.levelchip{padding-right:14px}
.levelbadge{display:grid;place-items:center;align-content:center;flex-shrink:0;width:40px;height:40px;background:var(--red);border:2.5px solid var(--ink);border-radius:50%;box-shadow:inset 0 -4px 0 var(--red-dark);color:var(--paper);padding-bottom:3px}
.levelbadge small{font:700 7px/1 var(--sans);letter-spacing:.8px;color:#ffd9c9;margin:0 0 1px}
.levelbadge b{font:900 17px/1 var(--display)}
.xp{display:flex;flex-direction:column;gap:5px;width:126px}
#xp-label{font:700 11px/1 var(--sans);color:var(--muted);white-space:nowrap}
.xp-track{height:10px;background:#ead9a8;border:2px solid var(--ink);border-radius:7px;overflow:hidden}
.xp-track i{display:block;height:100%;width:0;background:linear-gradient(180deg,#8fd36a,#4fa85a);transition:width .25s}
.traychip{padding:7px 12px}
#tray{letter-spacing:0;color:var(--ink)}#tray i{font-style:normal;color:var(--muted)}
.tray-items{display:flex;gap:5px}
.slot{display:grid;place-items:center;width:32px;height:32px;border:2px dashed rgba(59,36,24,.38);border-radius:10px;background:rgba(59,36,24,.05)}
.slot.full{border:2px solid var(--ink);background:#fffdf4;animation:pop .22s ease-out}
.slot svg{width:27px;height:27px;display:block}
.slot.bag{width:auto;grid-auto-flow:column;gap:4px;padding:0 10px 0 5px;border:2px solid var(--ink);background:#f3d8cc}
.slot.bag::after{content:"Lixo";font:700 12px var(--sans)}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Placa do bar */
.placard{position:absolute;z-index:4;left:var(--edge);top:calc(var(--safe-top) + 90px);display:flex;flex-direction:column;align-items:flex-start;gap:9px;pointer-events:none}
.placard h1{margin:0;padding:6px 14px 7px;font:italic 900 15px/1 var(--display);letter-spacing:.3px;text-transform:uppercase;color:var(--paper);text-shadow:0 2px 0 var(--red-dark);background:var(--red);border:2.5px solid var(--ink);border-radius:11px;box-shadow:0 3px 0 var(--ink),inset 0 0 0 2px var(--red),inset 0 0 0 3.5px var(--mustard);transform:rotate(-2deg);transform-origin:left center}
.placardstats{display:flex;gap:6px}
.placardstats>span{display:flex;align-items:center;gap:5px;padding:4px 10px;font:700 10.5px/1 var(--sans);color:var(--muted);background:var(--paper);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink)}
.placardstats b{font:900 12px/1 var(--display);color:var(--ink)}
.queuestatus i{width:8px;height:8px;border-radius:50%;background:#7cc65a;border:1.5px solid var(--ink)}
.queuestatus.busy{background:#ffe08a}.queuestatus.busy i{background:var(--red)}

/* Botões */
.utilitydock{position:absolute;z-index:5;right:var(--edge);top:calc(var(--safe-top) + 90px);display:flex;flex-direction:column;gap:11px}
.iconbutton{width:46px;height:46px;display:grid;place-items:center;padding:0;background:var(--paper);border:2.5px solid var(--ink);border-radius:15px;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.iconbutton svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.iconbutton:hover{background:#fffdf4}
.iconbutton:active,.dockbutton:active,.primary:active,.return-drinks:active,.poi:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.iconbutton[aria-pressed=true]{background:var(--paper2)}
.pausebutton{background:var(--red)}.pausebutton:hover{background:#d8483a}.pausebutton svg{stroke:var(--paper);stroke-width:3.4}
.bottomdock{position:absolute;z-index:5;right:var(--edge);bottom:calc(var(--safe-bottom) + 22px);display:flex;gap:12px;align-items:flex-end}
.dockbutton{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:72px;height:72px;padding:0;background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);font:700 10.5px/1 var(--sans);letter-spacing:.6px;text-transform:uppercase;transition:transform .08s,box-shadow .08s}
.dockbutton svg{width:27px;height:27px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dockbutton:hover{background:#fffdf4}
.dockbutton[aria-pressed=true]{background:#bfe5d8}
.objectivesbutton{background:var(--mustard)}.objectivesbutton:hover{background:#ffd660}
.objectivesbutton small{position:absolute;right:-8px;top:-10px;min-width:32px;padding:4px 6px;font:900 11px/1 var(--display);letter-spacing:0;color:var(--paper);background:var(--green);border:2.5px solid var(--ink);border-radius:11px}
.return-drinks{position:absolute;z-index:5;left:50%;bottom:calc(var(--safe-bottom) + 92px);transform:translateX(-50%);padding:11px 18px;font:900 13px/1 var(--display);color:var(--paper);background:var(--teal);border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.return-drinks:active{transform:translate(-50%,3px)}

/* Joystick */
.joystick-hint{position:absolute;z-index:3;left:calc(var(--edge) + 8px);bottom:calc(var(--safe-bottom) + 22px);width:104px;pointer-events:none;opacity:.8;text-align:center;transition:opacity .4s}
.ghost-base{display:grid;place-items:center;margin:0 auto 8px;width:80px;height:80px;border:2.5px dashed rgba(59,36,24,.75);background:rgba(255,246,220,.42);border-radius:50%}
.ghost-base span{width:30px;height:30px;border:2.5px solid var(--ink);background:var(--mustard);border-radius:50%;box-shadow:0 3px 0 rgba(59,36,24,.6)}
.joystick-hint small{display:inline-block;padding:3px 8px;font:700 8.5px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--ink);background:rgba(255,246,220,.85);border-radius:999px}
.joystick-hint.used{opacity:.22}.joystick-hint.used small{visibility:hidden}
.joystick{position:absolute;display:none;width:100px;height:100px;border:2.5px solid var(--ink);border-radius:50%;background:rgba(255,246,220,.4);pointer-events:none;z-index:7}
.joystick #stick{position:absolute;top:28px;left:28px;width:40px;height:40px;border:2.5px solid var(--ink);background:var(--mustard);border-radius:50%;box-shadow:0 3px 0 rgba(59,36,24,.6)}

/* Faixa de ação, destino e avisos */
.actionbar{position:absolute;z-index:4;left:50%;bottom:calc(var(--safe-bottom) + 28px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 430px);padding:12px 20px 14px;display:flex;align-items:center;gap:10px;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);font:700 13.5px/1.35 var(--sans);overflow:hidden;text-align:left;pointer-events:none}
.actiondot{width:10px;height:10px;flex-shrink:0;background:var(--mustard);border:2px solid var(--ink);border-radius:50%}
.holdprogress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(59,36,24,.1)}
.holdprogress span{display:block;height:100%;width:0;background:#4fa85a}
.poi{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;max-width:150px;min-height:38px;padding:7px 13px;font:900 12px/1 var(--display);color:var(--ink);background:var(--mustard);border:2.5px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);transform:translate(-50%,-50%);white-space:nowrap}
.poi:active{transform:translate(-50%,calc(-50% + 3px))}
.poi-arrow{display:inline-block;font:700 17px/1 var(--sans)}
.toast{position:absolute;z-index:9;left:50%;top:calc(var(--safe-top) + 92px);transform:translate(-50%,-14px);width:max-content;max-width:calc(100% - 40px);padding:11px 18px;font:700 13px/1.35 var(--sans);text-align:center;color:var(--paper);background:var(--ink);border:2.5px solid var(--mustard);border-radius:16px;box-shadow:0 5px 0 rgba(59,36,24,.45);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.private-badge{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bottom) + 6px);pointer-events:none;font:700 7px/1 var(--sans);letter-spacing:1.4px;color:rgba(59,36,24,.5)}

/* Janelas */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(20px,var(--safe-top)) 18px max(20px,var(--safe-bottom));background:rgba(46,22,12,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);touch-action:pan-y}
.modal{position:relative;min-width:0;flex-shrink:1;width:400px;max-width:100%;max-height:100%;padding:38px 26px 26px;background:var(--paper);border:3px solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink),0 30px 60px rgba(0,0,0,.35);overflow-y:auto;overscroll-behavior:contain;text-align:center;outline:none}
/* friso de azulejo no topo */
.modal::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--teal) 0 14px,var(--paper) 14px 28px);border-bottom:2.5px solid var(--ink)}
.logo{display:inline-flex;flex-direction:column;align-items:center;margin:6px auto 18px;transform:rotate(-4deg)}
.logo-top{font:italic 900 58px/.86 var(--display);letter-spacing:-1.5px;text-transform:uppercase;color:var(--mustard);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.logo-bottom{margin-top:2px;padding:4px 16px 5px;font:italic 900 22px/1 var(--display);letter-spacing:3px;text-transform:uppercase;color:var(--paper);background:var(--red);border:2.5px solid var(--ink);border-radius:9px;box-shadow:0 4px 0 var(--ink);transform:rotate(2deg) translateX(18px)}
.modaleyebrow{display:block;font:700 10.5px/1 var(--sans);letter-spacing:2.2px;color:var(--red)}
.modal h2{font:900 31px/1.04 var(--display);letter-spacing:-.6px;margin:11px 0 12px}
.modal p,.modal-description{font:500 13.5px/1.6 var(--sans);color:var(--muted);margin:0}
.steps{margin:6px 0 0;padding:0;list-style:none;counter-reset:passo;text-align:left}
.steps li{position:relative;counter-increment:passo;margin-top:9px;padding:10px 12px 11px 46px;font:500 12.5px/1.5 var(--sans);color:var(--muted);background:#fffdf4;border:2px solid var(--ink);border-radius:14px}
.steps li::before{content:counter(passo);position:absolute;left:11px;top:10px;display:grid;place-items:center;width:24px;height:24px;font:900 12px/1 var(--display);color:var(--paper);background:var(--red);border:2px solid var(--ink);border-radius:50%}
.steps b{color:var(--ink);font-weight:700}
.modal .tip{margin-top:10px;padding:10px 12px;font-size:12px;line-height:1.5;text-align:left;background:var(--paper2);border:2px dashed rgba(59,36,24,.4);border-radius:14px}
.modal-controls{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:20px 0 4px}
.modal-controls>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:86px;padding:12px 8px;background:var(--paper2);border:2px solid var(--ink);border-radius:14px}
.modal-controls small{font:700 10.5px/1.35 var(--sans);color:var(--muted)}
.keycaps{font:900 12px/1 var(--display);letter-spacing:3px;padding:7px 9px 8px;background:#fffdf4;border:2px solid var(--ink);border-radius:8px;box-shadow:0 3px 0 var(--ink)}
.touchsymbol{display:grid;place-items:center;width:34px;height:34px;border:2.5px dashed var(--ink);border-radius:50%}
.touchsymbol i{width:14px;height:14px;background:var(--mustard);border:2px solid var(--ink);border-radius:50%}
.or{align-self:center;font:700 10px/1 var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.primary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;margin-top:20px;padding:14px 20px 15px;font:900 16px/1 var(--display);color:var(--paper);background:var(--green);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.primary:hover{background:#38906a}.primary span{font:700 18px/1 var(--sans)}
.menuoption{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:13px 18px;font:700 13.5px/1 var(--sans);background:var(--paper2);border:2px solid var(--ink);border-radius:14px}
.menuoption:hover{background:#f9eec6}.menuoption span{color:var(--muted)}
.textbutton{display:block;margin:14px auto 0;padding:6px;border:0;background:none;font:700 12.5px/1 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.modalclose{position:absolute;top:24px;right:14px;width:36px;height:36px;display:grid;place-items:center;padding:0 0 3px;font:700 22px/1 var(--sans);color:var(--ink);background:var(--paper2);border:2px solid var(--ink);border-radius:50%;box-shadow:0 3px 0 var(--ink)}

/* Metas */
.goals-modal{width:420px}.goals-modal h2#modal-title{font-size:26px;margin:9px 0 18px}
.goalscontent{text-align:left}.mission>.kicker,.mission h2{display:none}
.task{display:flex;align-items:flex-start;gap:11px;margin-bottom:8px;padding:11px 13px;font:700 13.5px/1.35 var(--sans);background:#fffdf4;border:2px solid var(--ink);border-radius:14px}
.task>div{flex:1;min-width:0}
.task strong{display:block;margin-top:3px;font:500 11.5px/1.4 var(--sans);color:var(--muted)}
.taskcheck{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;font:900 13px/1 var(--display);background:var(--paper2);border:2px solid var(--ink);border-radius:50%}
.taskcheck.done{background:var(--green);color:var(--paper)}
.progress{height:10px;margin-top:8px;background:#ead9a8;border:2px solid var(--ink);border-radius:7px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:linear-gradient(180deg,#8fd36a,#4fa85a);transition:width .25s}
#xp-total{margin-top:12px;font:700 12px/1.4 var(--sans);color:var(--ink)}
.missionnote{margin-top:4px!important;font-size:12px!important}
.nextstep{margin-top:10px;padding:12px 14px 13px;background:var(--paper2);border:2px dashed rgba(59,36,24,.4);border-radius:14px}
.nextstep.now{margin-top:16px;background:#d9efd2;border:2px solid var(--ink)}
.nextstep .kicker{font:900 10.5px/1 var(--display);letter-spacing:1.3px;color:var(--red)}
.nextstep.now .kicker{color:var(--green-dark)}
.nextstep p{margin-top:6px;font-size:12px;line-height:1.55}
.nextstep.now p{font-weight:700;color:var(--ink);font-size:13px}

/* Celular em pé */
@media(max-width:760px){
  :root{--edge:10px}
  .topbar{top:calc(var(--safe-top) + 10px);gap:6px}
  .chip{min-height:50px;gap:7px;padding:5px 10px 5px 7px;border-radius:15px;box-shadow:0 3px 0 var(--ink)}
  .chip small{font-size:7.5px;letter-spacing:.8px;margin-bottom:3px}
  .cashchip{flex:0 1 auto;min-width:0}.cashchip strong{font-size:17px}
  .coinicon{width:30px;height:30px;font-size:17px;box-shadow:inset 0 -3px 0 var(--mustard-dark),inset 0 0 0 2px #ffe08a}
  .levelchip{padding-right:9px}.levelbadge{width:32px;height:32px}.levelbadge small{font-size:6px}.levelbadge b{font-size:14px}
  .xp{width:58px;gap:4px}#xp-label{font-size:8.5px}.xp-track{height:8px}
  .traychip{padding:5px 8px}.tray-items{gap:4px}.slot{width:25px;height:25px;border-radius:8px}.slot svg{width:21px;height:21px}.slot.bag{padding:0 8px 0 3px}.slot.bag::after{font-size:10px}
  .placard{top:calc(var(--safe-top) + 70px);gap:7px}.placard h1{font-size:11px;padding:5px 10px 6px;border-radius:9px;border-width:2px}
  .placardstats>span{padding:3px 8px;font-size:9.5px}.placardstats b{font-size:11px}
  .utilitydock{top:calc(var(--safe-top) + 70px);gap:9px}.iconbutton{width:40px;height:40px;border-radius:13px;box-shadow:0 3px 0 var(--ink)}.iconbutton svg{width:17px;height:17px}
  .bottomdock{bottom:calc(var(--safe-bottom) + 18px);gap:10px}.dockbutton{width:62px;height:62px;border-radius:18px;font-size:9px;box-shadow:0 4px 0 var(--ink)}.dockbutton svg{width:23px;height:23px}
  .joystick-hint{left:14px;bottom:calc(var(--safe-bottom) + 14px);width:96px}.ghost-base{width:72px;height:72px;margin-bottom:6px}.joystick-hint small{font-size:7.5px}
  .actionbar{bottom:calc(var(--safe-bottom) + 100px);max-width:calc(100% - 24px);padding:10px 15px 12px;font-size:12px;border-radius:16px;box-shadow:0 3px 0 var(--ink)}
  .return-drinks{bottom:calc(var(--safe-bottom) + 156px);font-size:12px;padding:10px 15px}
  .poi{font-size:11px;min-height:34px;padding:6px 11px}
  .toast{top:calc(var(--safe-top) + 128px);font-size:12px}
  .modal{padding:34px 20px 22px;border-radius:22px}.modal h2{font-size:27px}.logo-top{font-size:50px}.logo-bottom{font-size:19px}
  .goals-modal h2#modal-title{font-size:23px}
}
/* Celular deitado */
@media(max-height:520px) and (min-width:600px){
  .topbar{top:calc(var(--safe-top) + 8px)}
  .chip{min-height:44px;padding:4px 12px 4px 7px;border-radius:14px;box-shadow:0 3px 0 var(--ink)}
  .cashchip strong{font-size:18px}.coinicon{width:30px;height:30px;font-size:17px}.levelbadge{width:32px;height:32px}.levelbadge b{font-size:14px}
  .slot{width:26px;height:26px}.slot svg{width:22px;height:22px}
  .placard{top:calc(var(--safe-top) + 62px)}.placard h1{font-size:11px;padding:4px 10px 5px}
  .utilitydock{top:calc(var(--safe-top) + 62px);gap:7px}.iconbutton{width:38px;height:38px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .bottomdock{bottom:14px;gap:9px}.dockbutton{width:56px;height:56px;border-radius:16px;font-size:8.5px;box-shadow:0 4px 0 var(--ink)}.dockbutton svg{width:21px;height:21px}
  .joystick-hint{bottom:10px;width:84px}.ghost-base{width:60px;height:60px;margin-bottom:4px}.ghost-base span{width:24px;height:24px}
  .actionbar{bottom:16px;max-width:calc(100% - 360px);font-size:11.5px;padding:8px 14px 10px}
  .return-drinks{bottom:66px;font-size:11.5px;padding:8px 13px}
  .toast{top:calc(var(--safe-top) + 62px)}
  .modal{padding:28px 24px 18px}.modal h2{font-size:24px;margin:8px 0}.modal p,.modal-description{font-size:12px}
  .logo{margin:2px auto 8px}.logo-top{font-size:36px;-webkit-text-stroke-width:7px}.logo-bottom{font-size:14px;padding:3px 12px}
  .modal-controls{margin:10px 0 0}.modal-controls>div{min-height:60px;padding:8px}
  .primary{margin-top:12px;min-height:44px;padding:10px 16px 11px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}