/*!
 * Motor de Narrativas Interativas em Cordel, v1.0.0: folha de estilos.
 */
:root{--paper:#f4e7c9;--paper2:#ead8b0;--card:#fffaf0;--ink:#1e1712;--red:#b8332a;--blue:#1f5f8b;--yellow:#e3ac1c;--green:#3b7a3f;--brown:#7a4a26}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--paper);background-image:radial-gradient(rgba(120,80,30,.09) 1px,transparent 1px);background-size:6px 6px;color:var(--ink);font-family:Bitter,Georgia,serif;font-size:16px;line-height:1.45;overscroll-behavior:none}
#app{max-width:440px;margin:0 auto;padding:12px 16px 32px;position:relative;transition:filter .6s}
.screen{display:none}
.screen.on{display:block;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,h3,.disp{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;letter-spacing:.3px;margin:.2em 0}
h1{font-size:34px;line-height:1.05;color:var(--red);text-shadow:3px 3px 0 var(--ink)}
h2{font-size:26px;line-height:1.1}
p{margin:.6em 0}
.lead{font-size:17px}
.kicker{font-family:'Alfa Slab One',Georgia,serif;font-size:13px;color:var(--red);text-transform:uppercase;letter-spacing:1px}
.btn{display:inline-block;font-family:'Alfa Slab One',Georgia,serif;font-size:18px;background:var(--red);color:#fff8ea;border:3px solid var(--ink);border-radius:12px;padding:12px 22px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-decoration:none;line-height:1.1}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.sec{background:var(--card);color:var(--ink)}
.btn.blue{background:var(--blue)}
.btn.big{font-size:20px;padding:16px 26px;width:100%}
.btn.small{font-size:14px;padding:8px 14px;box-shadow:3px 3px 0 var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.row .btn{flex:1;text-align:center}
.capa{width:100%;display:block;border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);background:#f0d79c}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.icon-btn{background:var(--card);border:2.5px solid var(--ink);border-radius:10px;font-size:18px;width:40px;height:40px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);color:var(--ink)}
.icon-btn:active{transform:translate(2px,2px);box-shadow:none}
/* trilha */
.trail{list-style:none;padding:0;margin:18px 0 0;position:relative}
.trail:before{content:"";position:absolute;left:27px;top:20px;bottom:20px;border-left:4px dotted var(--ink)}
.stop{position:relative;display:flex;gap:14px;align-items:center;margin-bottom:14px;cursor:pointer}
.stop .num{flex:0 0 58px;height:58px;border-radius:50%;background:var(--red);color:#fff8ea;border:3px solid var(--ink);display:grid;place-items:center;font-size:26px;box-shadow:3px 3px 0 var(--ink);z-index:1}
.stop .box{flex:1;background:var(--card);border:3px solid var(--ink);border-radius:10px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}
.stop .box b{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:18px;display:block}
.stop .box small{display:block;color:#5c4a3a}
.stop.lock{cursor:default}
.stop.lock .num{background:#b9a888}
.stop.lock .box{opacity:.55}
.stop.done .num{background:var(--green)}
.stars{color:var(--yellow);-webkit-text-stroke:1px var(--ink);font-size:18px;letter-spacing:2px}
/* intro */
.verso{background:var(--card);border:3px solid var(--ink);border-radius:8px;padding:16px 18px;margin:14px 0;box-shadow:5px 5px 0 var(--ink);font-style:italic;font-size:18px;position:relative}
.verso:before{content:"✦ cordel ✦";position:absolute;top:-12px;left:14px;background:var(--yellow);border:2px solid var(--ink);border-radius:6px;font:12px 'Alfa Slab One',Georgia;padding:1px 8px;font-style:normal}
.como{background:var(--paper2);border-left:5px solid var(--red);padding:10px 12px;border-radius:0 8px 8px 0}
/* jogo */
.gbar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gbar .gt{flex:1;font-family:'Alfa Slab One',Georgia;font-size:15px;line-height:1.1}
#hud{font-size:15px;min-height:22px;margin:0 2px 6px}
#stage{position:relative;width:100%;aspect-ratio:3/4;border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);background:var(--paper)}
.fala{display:none;align-items:center;min-height:64px;margin-top:14px;background:var(--card);border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);padding:10px 14px;font-size:16px;font-weight:600;line-height:1.35}
.fala.nova{animation:falaIn .35s ease}
@keyframes falaIn{from{background:#fff1b8;transform:translateY(-4px)}to{background:var(--card);transform:none}}
#cv{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
#dpad{display:none;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,52px);gap:6px;justify-content:center;margin-top:14px}
#dpad button{font-size:24px;border:3px solid var(--ink);border-radius:10px;background:var(--card);box-shadow:3px 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
#dpad button:active{transform:translate(2px,2px);box-shadow:none}
#dpad .u{grid-column:2;grid-row:1}#dpad .l{grid-column:1;grid-row:2}#dpad .d{grid-column:2;grid-row:2}#dpad .r{grid-column:3;grid-row:2}
/* canos (quebra-cabeça de girar peças) */
#canos{display:none}
.cn-msg{background:var(--card);border:3px solid var(--ink);border-radius:10px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink);margin-bottom:12px;font-size:15px}
.cn-wrap{display:grid;grid-template-columns:38px 1fr;gap:4px;align-items:stretch}
.cn-srccol{position:relative}
.cn-src{position:absolute;left:0;width:38px;height:38px;transform:translateY(-50%);display:grid;place-items:center;font-size:22px;background:var(--card);border:3px solid var(--ink);border-radius:8px}
.cn-grid{display:grid;gap:3px;background:var(--ink);border:3px solid var(--ink);border-radius:8px;padding:3px}
.tile{position:relative;aspect-ratio:1;border:0;padding:0;background:#efe0bd;border-radius:4px;cursor:pointer;overflow:hidden}
.tile svg{width:100%;height:100%;display:block;transition:transform .18s ease}
.tile .pipe{stroke:#d3c08f;transition:stroke .2s}
.tile.on .pipe{stroke:var(--c)}
.tile .house{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(18px,6vw,26px);pointer-events:none;filter:grayscale(1) opacity(.6);transition:filter .3s,transform .3s}
.tile.on .house{filter:none;transform:scale(1.12)}
.tile .badge{position:absolute;right:2px;top:1px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}
.tile.on .badge{opacity:1}
.cn-grid.win .tile{animation:pulse .6s ease 2}
@keyframes pulse{50%{background:#fff3c4}}
.cn-info{margin-top:10px;font-size:15px;display:flex;justify-content:space-between}
/* carta */
.carta{background:var(--card);border:3px solid var(--ink);border-radius:8px;padding:34px 18px 18px;margin:20px 0 10px;box-shadow:6px 6px 0 var(--ink);position:relative}
.carta .faixa{position:absolute;top:-14px;left:12px;right:12px;background:var(--red);color:#fff8ea;border:3px solid var(--ink);border-radius:6px;font:13px 'Alfa Slab One',Georgia;text-align:center;padding:4px;letter-spacing:1px}
.carta .em{font-size:46px;text-align:center;line-height:1}
.carta h3{text-align:center;font-size:22px}
.carta .fonte{font-size:12.5px;color:#6a5643;font-style:italic;border-top:2px dashed #c9b48a;padding-top:8px;margin-top:12px}
.ganho{text-align:center;font-size:15px}
.ganho .stars{font-size:30px}
/* mural com contador */
.mural{position:relative;overflow:hidden;margin:18px 0 18px;border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);color:#fff8ea;text-align:center;
 background:linear-gradient(180deg,rgba(184,51,42,.35),rgba(30,23,18,.82)),var(--mural-foto,repeating-linear-gradient(35deg,#b8332a 0 9px,#a12c24 9px 12px)) center/cover}
button.mural{display:block;width:100%;padding:34px 12px;cursor:pointer;font:inherit}
button.mural:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.mural-grande{position:relative;z-index:1;display:block;font:clamp(54px,17vw,84px)/.95 'Alfa Slab One',Georgia,serif;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink);transform:rotate(-4deg)}
.mural-sub{position:relative;z-index:1;display:inline-block;margin-top:22px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);padding:8px 14px;font:16px/1.2 'Alfa Slab One',Georgia,serif;animation:subPulse 1.6s ease-in-out infinite}
.mural-sub.ok{background:var(--card);animation:none}
@keyframes subPulse{50%{transform:scale(1.05)}}
/* contador da capa */
.tit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.tit-row h1{margin:0}
.cont{flex:0 0 auto;width:96px;text-align:center}
.cont svg{width:96px;height:96px;display:block;filter:drop-shadow(3px 3px 0 var(--ink))}
.cont small{display:block;font:11px/1.15 'Alfa Slab One',Georgia,serif;color:var(--red);margin-top:2px}
.mural-voo{position:absolute;z-index:2;font:15px 'Alfa Slab One',Georgia;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);pointer-events:none;animation:muralVoo 1.6s ease-out forwards}
@keyframes muralVoo{from{opacity:1;transform:translateY(0) scale(.8)}to{opacity:0;transform:translateY(-150px) scale(1.15)}}
#gigante{position:fixed;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(184,51,42,.55),rgba(30,23,18,.0) 70%)}
#gigante b{font:clamp(48px,17vw,96px)/1 'Alfa Slab One',Georgia,serif;color:var(--yellow);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink);transform:rotate(-8deg);animation:gig 2.4s cubic-bezier(.2,1.6,.4,1) forwards;text-align:center}
@keyframes gig{0%{transform:rotate(-8deg) scale(.1);opacity:0}18%{transform:rotate(-8deg) scale(1.1);opacity:1}80%{transform:rotate(-8deg) scale(1);opacity:1}100%{transform:rotate(-8deg) scale(1.25);opacity:0}}
.gig-star{position:fixed;z-index:31;pointer-events:none;color:var(--red);font-size:30px;text-shadow:2px 2px 0 var(--ink);animation:gstar 1.8s ease-out forwards}
@keyframes gstar{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(200deg);opacity:0}}
.album{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mini{background:var(--card);border:3px solid var(--ink);border-radius:8px;padding:12px 8px;text-align:center;box-shadow:3px 3px 0 var(--ink);cursor:pointer;min-height:110px;font:inherit;color:var(--ink)}
.mini .em{font-size:34px}
.mini b{display:block;font-family:'Alfa Slab One',Georgia;font-weight:400;font-size:14px;line-height:1.15;margin-top:4px}
.mini.lock{background:var(--paper2);cursor:default;color:#8a7558}
.hint{font-size:14px;color:#5c4a3a;font-style:italic;margin-top:14px}
/* epílogo */
.dias{font-family:'Alfa Slab One',Georgia;font-size:22px;text-align:center;margin:14px 0;min-height:60px}
.dias small{display:block;font-family:Bitter,Georgia;font-size:15px;color:#5c4a3a}
.tl{list-style:none;padding:0;margin:14px 0}
.tl li{background:var(--card);border:3px solid var(--ink);border-radius:8px;padding:10px 12px;margin-bottom:10px;box-shadow:3px 3px 0 var(--ink);opacity:0;transform:translateY(8px);transition:all .5s}
.tl li.vis{opacity:1;transform:none}
.tl li b{font-family:'Alfa Slab One',Georgia;font-weight:400;color:var(--red)}
.creditos{font-size:14.5px}
.creditos li{margin-bottom:6px}
/* toast */
#toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,calc(100% + 40px));visibility:hidden;width:min(400px,calc(100% - 32px));background:var(--ink);color:#fff8ea;border-radius:12px;padding:12px 14px;font-size:15px;transition:transform .35s;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#toast.on{transform:translate(-50%,0);visibility:visible}
.foot{text-align:center;font-size:12px;color:#7a6650;margin-top:22px}