/* =============================
   css/ui.css
   ============================= */
/* ===== ui: botões, modal, balão de fala, selos, janelinha do salário ===== */

.btn{font:900 17px/1.1 "PDDText","Comic Sans MS",sans-serif;padding:10px 12px;min-height:48px;color:var(--k);
  background:linear-gradient(#fffaf0,#ffe9a8);border:4px solid var(--k);border-radius:16px;
  box-shadow:5px 5px 0 var(--k),inset 0 3px 0 #fff9,inset 0 -4px 0 #0002;cursor:pointer;transition:transform .05s,box-shadow .05s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;touch-action:manipulation}
.btn.big{background:linear-gradient(#ffeb7a,#ffd93b 55%,#f5b800);font-size:24px;padding:10px 14px;min-height:56px;position:relative;overflow:hidden}
.btn.big::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--k),inset 0 3px 0 #fff9}

/* modal */
#modal{position:absolute;inset:0;z-index:30;background:#000a;display:flex;align-items:center;justify-content:center;padding:24px}
.card{background:var(--w);border:4px solid var(--k);border-radius:18px;box-shadow:6px 6px 0 var(--k);padding:18px;text-align:center}
.card h2{font:900 24px "PDDTitle",Impact,sans-serif;margin-bottom:8px;color:#d90429}
.card p{font-size:15px;line-height:1.35;margin-bottom:14px}
.card .btn{width:100%}

/* balão de fala. .l/.r = rabinho para baixo; .side = rabinho para a esquerda */
.bal{background:#fff;border:4px solid var(--k);border-radius:18px;padding:10px;font:700 13.5px/1.3 "PDDText","Comic Sans MS",sans-serif;box-shadow:4px 4px 0 var(--k);--tx:80px}
.bal.l{--tx:80px}
.bal.r{--tx:231px}
.bal::before,.bal::after{content:"";position:absolute;left:var(--tx);border:11px solid transparent;border-bottom:0}
.bal::before{bottom:-19px;border-top:15px solid var(--k)}
.bal::after{bottom:-12px;border-top:15px solid #fff}
.bal.side::before,.bal.side::after{left:auto;bottom:auto;top:28px;border:11px solid transparent;border-left:0}
.bal.side::before{left:-15px;border-right:15px solid var(--k)}
.bal.side::after{left:-8px;border-right:15px solid #fff}
.bal.narr{background:var(--w);font-style:italic;text-align:center}
.bal.narr::before,.bal.narr::after{display:none}
/* balão de pensamento (bolinhas em vez de rabinho) */
.bal.think{border-radius:34px;font-style:italic;background:#fff}
.bal.think::before,.bal.think::after{content:"";position:absolute;left:var(--tx);border:3px solid var(--k);border-radius:50%;background:#fff}
.bal.think::before{bottom:-26px;width:16px;height:16px}
.bal.think::after{bottom:-40px;margin-left:-8px;width:9px;height:9px}
.bal small{display:block;font:900 11px "PDDText","Comic Sans MS",sans-serif;color:var(--r);margin-bottom:3px}

/* selo com nome do personagem */
.tag{background:var(--y);border:3px solid var(--k);border-radius:8px;padding:2px 8px;font:900 12px "PDDText","Comic Sans MS",sans-serif;box-shadow:3px 3px 0 var(--k)}

/* cartão de título da fase */
.headcard{text-align:center;background:var(--y);border:4px solid var(--k);border-radius:14px;box-shadow:4px 4px 0 var(--k);padding:4px 6px;transform:rotate(-1.5deg)}
.headcard b{display:block;font:900 14px "PDDTitle",Impact,sans-serif;letter-spacing:.5px;white-space:nowrap}
.headcard small{display:block;font:700 11px "PDDText","Comic Sans MS",sans-serif}

/* janelinha do salário (global, fica sobre as cenas) */
#salary{position:absolute;right:8px;top:6px;z-index:20;width:134px;background:#fff;border:3px solid var(--k);border-radius:10px;box-shadow:3px 3px 0 var(--k)}
#salary .bar{display:flex;align-items:center;gap:3px;background:var(--g);border-bottom:3px solid var(--k);padding:2px 5px;border-radius:7px 7px 0 0}
#salary .sbtn{position:relative;width:20px;height:20px;border:2px solid var(--k);border-radius:50%;background:#fff;font-size:11px;line-height:1;padding:0;cursor:pointer}
#salary .sbtn::after{content:"";position:absolute;inset:-14px -10px -14px -10px}
#salary .bar b{margin-left:auto;font:900 10px "PDDText","Comic Sans MS",sans-serif}
#salary .val{font:900 17px "PDDTitle",Impact,sans-serif;text-align:center;padding:3px 2px;letter-spacing:.5px}
#salary.up .val{color:#169a36;animation:pop .35s}
#salary.down .val{color:var(--r);animation:pop .35s}
#salary .fx{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;padding:2px 12px;font:900 24px/1.15 "PDDTitle",Impact,sans-serif;letter-spacing:1px;color:#fff;border:3px solid var(--k);border-radius:12px;box-shadow:3px 3px 0 var(--k);white-space:nowrap;pointer-events:none;opacity:0}
#salary .fx.up{background:#16a34a}
#salary .fx.down{background:#e11d2e}
#salary .fx.go{animation:fxFloat 1.5s ease-out}
@keyframes fxFloat{0%{opacity:0;transform:translate(-50%,-6px) scale(.5)}15%{opacity:1;transform:translate(-50%,6px) scale(1.2)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* ===== botões de ação padrão: PRÓXIMO / COMEÇAR / COMPRAR ficam SEMPRE no canto inferior direito ===== */
.scene>.next,.scene>.buy{position:absolute;left:auto;top:auto;right:10px;bottom:12px;margin:0;width:auto;min-width:150px;min-height:52px;
  padding:8px 16px;font-size:18px;white-space:nowrap;z-index:12}
.scene>.next.go,.scene>.buy{background:linear-gradient(#ffeb7a,#ffd93b 55%,#f5b800)}
.scene>.buy{font-size:20px;animation:pulse .7s ease-in-out infinite}