@font-face{font-family:"Patrick Hand";src:url(fonts/patrick-hand.woff2) format("woff2");font-display:block}
@font-face{font-family:Bangers;src:url(fonts/bangers.woff2) format("woff2");font-display:block}
@font-face{font-family:Atkinson;font-weight:400;src:url(fonts/atkinson-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atkinson;font-weight:700;src:url(fonts/atkinson-700.woff2) format("woff2");font-display:swap}
:root{--ink:#15121E;--bg:#FFC928;--dot:#F2B400;--card:#fff;--txt:#15121E;--mut:#57536A;--line:#15121E;--pop:#FF5A36;--sky:#5CCBFF;--mint:#35DBA8;--lil:#B49AFF;--pink:#FF8CC0;--path:#15121E;--pan:brightness(1) saturate(1)}
[data-night="1"]{--bg:#15132E;--dot:#1D1B3F;--card:#24224A;--txt:#F2F0FF;--mut:#B6B3D6;--line:#000;--path:#4A4780;--pan:brightness(.72) saturate(.85)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--txt);font:400 17px/1.45 Atkinson,system-ui,sans-serif}
body{background-image:radial-gradient(var(--dot) 2.2px,transparent 2.6px);background-size:14px 14px;min-height:100vh;min-height:100dvh}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p{margin:0}
#app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
.wrap{padding:14px 16px 112px}
.bang{font-family:Bangers,Impact,sans-serif;letter-spacing:.6px;font-weight:400}
/* botões */
.btn{display:block;width:100%;font:400 24px/1 Bangers,Impact,sans-serif;letter-spacing:1px;background:var(--pop);color:#fff;border:4px solid var(--ink);border-radius:14px;padding:14px 16px 12px;box-shadow:0 5px 0 var(--ink);text-align:center;text-shadow:2px 2px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.alt{background:#fff;color:var(--ink);text-shadow:none}
.btn.mint{background:var(--mint);color:var(--ink);text-shadow:none}
.btn.sm{font-size:19px;padding:9px 12px 7px;box-shadow:0 3px 0 var(--ink);border-width:3px}
.lnk{text-decoration:underline;color:var(--txt);font-weight:700;padding:6px 0}
/* faixa de cima */
.top{display:flex;align-items:center;gap:10px;padding:12px 16px 2px}
.logo{font:400 30px/1 Bangers,Impact,sans-serif;letter-spacing:1px;color:#fff;-webkit-text-stroke:0;text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink);flex:1;white-space:nowrap}
.ibtn{width:44px;height:44px;border:3px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 var(--ink);flex:none}
.ibtn svg{width:22px;height:22px}
[data-night="1"] .ibtn{background:#FFE9A8}
.pill{font-weight:700;font-size:14px;background:var(--ink);color:#fff;border-radius:99px;padding:4px 11px;white-space:nowrap}
.hi{font-weight:700;margin:6px 16px 0}
.demo{background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-align:center;padding:6px 10px}
/* cartões */
.card{background:var(--card);border:4px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 5px 0 var(--line);margin-bottom:18px}
.card h2{font:400 26px/1.05 Bangers,Impact,sans-serif;letter-spacing:.8px;margin-bottom:6px}
.mut{color:var(--mut);font-size:15px}
/* próximo */
.next{display:block;width:100%;text-align:left;background:var(--card);border:4px solid var(--line);border-radius:16px;box-shadow:0 6px 0 var(--line);overflow:hidden;margin:12px 0 18px}
.next .pn{display:block;width:100%;filter:var(--pan)}
.next .nb{padding:12px 14px 14px;display:flex;align-items:center;gap:12px}
.next .nb b{display:block;font:400 28px/1.02 Bangers,Impact,sans-serif;letter-spacing:.8px}
.next .tag{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.next .go{flex:none;width:auto;font-size:21px;padding:10px 14px 8px}
.daret{display:flex;gap:12px;align-items:flex-start;background:var(--mint);color:var(--ink);border:4px solid var(--ink);border-radius:14px;padding:11px 13px;margin-bottom:18px;box-shadow:0 4px 0 var(--ink);text-align:left;width:100%}
.daret b{font:400 19px/1 Bangers,Impact,sans-serif;letter-spacing:.8px;display:block;margin-bottom:3px}
.daret span{font-size:15px;line-height:1.3;display:block}
/* trilha */
.stop{font:400 22px/1 Bangers,Impact,sans-serif;letter-spacing:1px;background:var(--ink);color:#FFC928;display:inline-block;padding:7px 13px 5px;transform:rotate(-1.5deg);margin:12px 0 6px;border-radius:4px}
.trail{position:relative;padding:6px 0}
.step{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 0;min-height:82px}
.step.r{flex-direction:row-reverse;text-align:right}
.step::before{content:"";position:absolute;left:37px;top:-22px;bottom:50%;width:0;border-left:7px dotted var(--path);z-index:0}
.step.r::before{left:auto;right:37px}
.trail .step:first-child::before{display:none}
.step.mid{padding-left:21%}
.step.mid::before{left:calc(21% + 37px)}
.step.r.mid{padding-left:0;padding-right:21%}
.step.r.mid::before{left:auto;right:calc(21% + 37px)}
.dot{position:relative;z-index:1;flex:none;width:78px;height:78px;border-radius:50%;border:5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;font:400 34px/1 Bangers,Impact,sans-serif;box-shadow:0 5px 0 var(--ink)}
.step.lock .dot{background:#D9D6E6;color:#807C96;box-shadow:0 3px 0 var(--ink)}
[data-night="1"] .step.lock .dot{background:#39365F;color:#8986AD}
.step.now .dot{animation:pop 1.3s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.step.done .dot::after{content:"";position:absolute;right:-6px;top:-6px;width:30px;height:30px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%2315121E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;border:3px solid var(--ink)}
.st{position:relative;z-index:1;background:var(--card);border:3px solid var(--line);border-radius:12px;padding:6px 10px;min-width:0;font-weight:700;line-height:1.15;font-size:16px;max-width:60%}
.st small{display:block;font-weight:400;font-size:13px;color:var(--mut);margin-top:2px}
.step.lock .st{background:transparent;border-color:transparent;color:var(--txt);opacity:.75;font-weight:400;padding:0}
/* leitor */
.rbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:9px 12px}
.rbar h1{font:400 22px/1.05 Bangers,Impact,sans-serif;letter-spacing:.8px;flex:1;min-width:0}
.rbar .ibtn{width:38px;height:38px;box-shadow:none;border-width:2px}
.pans{padding:14px 16px 0}
.pans .pw{margin-bottom:14px;animation:slam .28s cubic-bezier(.2,1.4,.5,1) both}
.pans .pw:nth-child(even){transform:rotate(.35deg)}
.pans .pw:nth-child(odd){transform:rotate(-.3deg)}
.pn{display:block;width:100%;height:auto;filter:var(--pan);border-radius:3px}
.pn text{user-select:none}
@keyframes slam{from{opacity:0;scale:.92;translate:0 18px}to{opacity:1;scale:1;translate:0 0}}
.sticky{position:sticky;bottom:0;z-index:4;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 34%)}
.law{background:var(--ink);color:#fff;border:4px solid var(--ink);border-radius:16px;padding:18px 16px 20px;margin:4px 16px 18px;text-align:center;animation:stamp .34s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 6px 0 var(--pop)}
.law small{font:400 19px/1 Bangers,Impact,sans-serif;color:#FFC928;letter-spacing:1.5px;display:block;margin-bottom:8px}
.law p{font:400 31px/1.08 Bangers,Impact,sans-serif;letter-spacing:.8px}
@keyframes stamp{from{opacity:0;scale:1.5;rotate:-6deg}to{opacity:1;scale:1;rotate:0deg}}
.sec{padding:0 16px}
.timer{display:flex;align-items:center;gap:10px;margin-top:12px}
.timer .bar{flex:1;height:14px;border:3px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.timer .bar i{display:block;height:100%;background:var(--mint);width:0}
.care{background:#EAF7FF;color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:12px;margin-top:12px;font-size:16px}
.care b{display:block;margin-bottom:3px}
.who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.donebox{background:var(--mint);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:10px 12px;font-weight:700;display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px}
/* barra de baixo */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;background:var(--ink);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.nav div{display:flex;width:100%;max-width:560px;gap:6px}
.nav button{flex:1;color:#fff;font:400 18px/1 Bangers,Impact,sans-serif;letter-spacing:.8px;padding:7px 2px 5px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:3px}
.nav button svg{width:23px;height:23px}
.nav button.on{background:#FFC928;color:var(--ink)}
/* leis */
.lawc{background:var(--card);border:3px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px;box-shadow:0 3px 0 var(--line)}
.lawc b{display:block;font:400 22px/1.1 Bangers,Impact,sans-serif;letter-spacing:.6px}
.lawc small{color:var(--mut);font-size:13px}
.lawc.off{background:transparent;border-style:dashed;box-shadow:none;color:var(--mut);padding:8px 13px}
.h1{font:400 38px/1 Bangers,Impact,sans-serif;letter-spacing:1px;margin:6px 0 2px}
/* adulto */
.rowset{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:2px solid rgba(128,128,128,.3)}
.rowset:first-of-type{border-top:0}
.rowset b{display:block}
.sw{flex:none;width:58px;height:34px;border:3px solid var(--ink);border-radius:99px;background:#D9D6E6;position:relative}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:left .12s}
.sw[aria-checked="true"]{background:var(--mint)}
.sw[aria-checked="true"]::after{left:27px}
.field{display:block;width:100%;background:#fff;color:#15121E;border:3px solid var(--ink);border-radius:10px;padding:11px 12px;font-size:17px}
ul.rules{margin:0;padding:0 0 0 19px}
ul.rules li{margin-bottom:6px}
.lrow{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:9px 0;border-top:2px solid rgba(128,128,128,.3)}
.lrow b{display:block;line-height:1.15}
.lrow small{color:var(--mut)}
details summary{cursor:pointer;font-weight:700;padding:4px 0}
.tipb{margin:4px 0 8px;font-size:15.5px}
/* login */
.login{padding:30px 18px 40px}
.login .logo{font-size:52px;display:block;white-space:normal;line-height:1;margin-bottom:6px}
.login h2{font:400 30px/1 Bangers,Impact,sans-serif;letter-spacing:.8px;margin:12px 0 4px}
.login .field{margin:9px 0}
.authmsg{font-weight:700;margin:10px 0 0}
.authlinks{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px}
.lpic{margin:0 0 12px;border-radius:4px;overflow:hidden}
/* janela */
.veil{position:fixed;inset:0;z-index:20;background:rgba(10,8,20,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.veil .card{width:100%;max-width:420px;margin:0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:10px;font-weight:700;z-index:30;max-width:90vw;font-size:15px;border:2px solid #fff}
@media (min-width:760px){
  #app{max-width:640px}
  .next .pn{max-height:320px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}