/* Licence to Finish · jogos editoriais (ver INTERACTIONS.md)
   Palco com a arte em 16:9 recortada como cover por unidades de contêiner, para que as
   peças sobre a arte fiquem no lugar certo em qualquer proporção. Botões com
   preenchimento, profundidade, verbo e estado que afunda (skill de minigame editorial). */
.game{position:relative}
.game-stage{position:relative;aspect-ratio:16/9;container-type:size;overflow:hidden;border:1px solid #c9d6e33a;background:#0b1626;border-radius:4px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.stage-inner{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);transform:translate(-50%,-50%);overflow:hidden}
.stage-inner>img.stage-bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.game-stage .motion-pause{display:none}
.game-hud{position:absolute;left:14px;right:14px;top:12px;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.game-hud>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.game-hud>div:last-child{align-items:flex-end}
.pill{font:10px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:7px 11px;border:1px solid #c9d6e350;background:#0b1626c7;color:var(--dark-muted);border-radius:3px;transition:border-color .2s,color .2s,background .2s}
.pill.on{border-color:var(--dawn);color:var(--dawn);background:#2a1d10d9}
.pill.alert{border-color:#e0776a;color:#ffc2b8;background:#3a1612d9}

.game-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:6px;border:0;
  background:linear-gradient(180deg,#f6d1a8,#e6b07c 55%,#d79a5f);color:#0d1a2b;font:500 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 4px 0 #8a5a2e,0 10px 22px #0009,inset 0 1px 0 #fff8;transition:transform .08s ease,box-shadow .08s ease,filter .15s}
.game-btn:hover{filter:brightness(1.06)}
.game-btn:active,.game-btn.is-pressed{transform:translateY(3px);box-shadow:0 1px 0 #8a5a2e,0 4px 10px #0009,inset 0 1px 0 #fff6}
.game-btn:focus-visible{outline:3px solid var(--dawn-light);outline-offset:4px}
.game-btn.ghost{background:#0b1626cc;color:var(--light);box-shadow:0 3px 0 #05090f,0 8px 18px #0008,inset 0 0 0 1px #9fb3c866}
.game-btn.ghost:active{box-shadow:0 1px 0 #05090f,inset 0 0 0 1px #9fb3c866}
.game-btn.big{min-height:58px;padding:0 32px;font-size:13px}
.game-btn[aria-disabled=true]{background:#1d2c40;color:#8597ab;box-shadow:0 3px 0 #0a121d,inset 0 0 0 1px #33475f;cursor:not-allowed;filter:none}

.start-overlay{position:absolute;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;gap:16px;padding:20px;text-align:center;
  background:radial-gradient(ellipse 60% 55% at center,#0b16266b 0%,#0b162629 70%,transparent 100%);transition:opacity .25s}
.start-overlay[hidden]{display:none}
.start-overlay .goal{font:italic 500 clamp(18px,2.6vw,28px)/1.25 var(--serif);color:var(--light);max-width:30ch;margin:0;text-shadow:0 2px 3px #000,0 0 18px #000,0 0 32px #0b1626}
.start-overlay .sub{font:10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d6dfe8;margin:0;text-shadow:0 1px 3px #000,0 0 12px #000}

.game-log{font:14px/1.7 var(--sans);color:#d6dfe8;min-height:52px;margin:16px 0 0;max-width:900px}
.game-log strong{color:var(--dawn-light);font-weight:500}
.game-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.game-result{margin-top:20px;border-top:1px solid #c9d6e330;padding-top:18px}
.game-result[hidden]{display:none}
.result-table{width:100%;max-width:780px;border-collapse:collapse;font:13px/1.5 var(--sans);color:#d6dfe8}
.result-table th,.result-table td{border-bottom:1px solid #c9d6e324;padding:10px 12px;text-align:left;vertical-align:baseline}
.result-table thead th{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);font-weight:400}
.result-table td.num{font:500 24px/1 var(--serif);color:var(--light);white-space:nowrap}
.result-table td.num.hot{color:var(--dawn)}
.result-table td.num.cold{color:#9fb3c8}
.verdict{font:italic 500 clamp(20px,2.4vw,28px)/1.35 var(--serif);color:var(--dawn-light);margin:18px 0 0;max-width:42ch}
.game-note{font:10px/1.8 var(--mono);color:var(--dark-muted);margin:14px 0 0;max-width:820px}
.ring{position:absolute;inset:-7px;pointer-events:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .track{stroke:#ffffff1f}
.ring .fill{stroke:var(--dawn-light);stroke-linecap:round}

/* 01 · licença */
.guard{position:absolute;left:50%;bottom:9%;height:62%;transform-origin:50% 100%;transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .6s,filter .3s;filter:drop-shadow(0 0 1.5px #b9c7d4cc) drop-shadow(0 0 14px #9fb3c84d) drop-shadow(0 18px 18px #000c);opacity:0;z-index:3}
.guard svg{height:100%;width:auto;display:block;overflow:visible}
.guard .rim{fill:none;stroke:#b9c7d4;stroke-opacity:.55;stroke-width:1.2}
.guard .body{fill:#050a12}
.guard .eyes{fill:#e9eef2;opacity:0;transition:opacity .2s}
.guard .arm{transform-box:view-box;transition:transform .35s ease,opacity .12s}
.guard .arm-r{transform-origin:27px 56px}.guard .arm-l{transform-origin:73px 56px}
.guard .aim{opacity:0;transition:opacity .12s}
.guard .glint{fill:var(--dawn-light);filter:drop-shadow(0 0 4px #f6d1a8)}
.guard .holster{fill:#111b29;stroke:#9fb3c8;stroke-opacity:.25}
.guard.p-stare .eyes{opacity:1}
.guard.p-stare .head{transform:rotate(-4deg);transform-box:view-box;transform-origin:50px 40px}
.guard.p-holster .arm-r{transform:rotate(16deg)}
.guard.p-aim .arm{opacity:0}.guard.p-aim .aim{opacity:1}.guard.p-aim .eyes{opacity:1}
.guard.p-down{opacity:0!important;filter:brightness(2.2) drop-shadow(0 0 22px #f6d1a8);transition:opacity .7s .15s,filter .2s,transform .7s}
.licence-trigger{position:absolute;right:16px;bottom:16px;z-index:7;width:96px;height:96px;border-radius:50%;padding:0;flex-direction:column;gap:4px;font-size:12px}
.licence-trigger .ico{font-size:18px;line-height:1}
.licence-trigger.shake{animation:trigger-shake .32s}
@keyframes trigger-shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.licence-trigger.live{animation:trigger-live .9s ease-in-out infinite alternate}
@keyframes trigger-live{to{box-shadow:0 4px 0 #8a5a2e,0 0 0 10px #f6d1a833,0 10px 30px #e6b07c99,inset 0 1px 0 #fff8}}
.flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.flash.white{background:radial-gradient(circle at 50% 55%,#fff6e8 0,#f6d1a880 30%,transparent 70%)}
.flash.red{background:radial-gradient(circle at 50% 50%,transparent 35%,#c0392bb3 100%)}
.flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* 02 · blefe */
.listen{position:absolute;z-index:4;transform:translate(-50%,-50%);min-height:44px;min-width:44px;padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:0;cursor:pointer;
  background:#0b1626d9;color:var(--light);font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 3px 0 #05090f,0 0 0 1px #f6d1a866,0 0 22px #f6d1a833}
.listen::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--dawn-light);box-shadow:0 0 0 0 #f6d1a8aa;animation:listen-pulse 1.6s infinite}
@keyframes listen-pulse{70%{box-shadow:0 0 0 10px #f6d1a800}100%{box-shadow:0 0 0 0 #f6d1a800}}
.listen.heard{background:#1d2c40e6;color:#9fb3c8;box-shadow:0 2px 0 #05090f,0 0 0 1px #9fb3c855}
.listen.heard::before{background:#9fb3c8;animation:none}
.listen[aria-disabled=true]{opacity:0;pointer-events:none}
.bubble{position:absolute;z-index:5;max-width:min(320px,42%);transform:translate(-50%,calc(-100% - 30px));padding:12px 14px;border-radius:10px;background:#f2eee6;color:#14202c;
  font:italic 500 clamp(14px,1.6vw,18px)/1.3 var(--serif);box-shadow:0 10px 24px #000a;opacity:0;transition:opacity .2s,transform .2s}
.bubble.on{opacity:1}
.bubble::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#f2eee6;transform:translateX(-50%) rotate(45deg)}
.watch{position:absolute;z-index:4;left:57%;top:24%;transform:translate(-50%,-50%);width:58px;height:58px}
.watch svg{width:100%;height:100%;transform:rotate(-90deg)}
.watch circle{fill:#0b1626cc;stroke-width:5}
.watch .track{stroke:#ffffff26}.watch .fill{stroke:var(--dawn-light);stroke-linecap:round;transition:stroke .3s}
.watch .lbl{position:absolute;inset:0;display:grid;place-items:center;font:10px var(--mono);color:var(--light)}
.watch.near .fill{stroke:#e0776a}
.suspicion{position:absolute;z-index:3;left:57%;top:56%;width:34%;height:72%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s,background .4s;
  background:radial-gradient(ellipse at center,#e9eef233 0,transparent 65%)}
.suspicion.look{opacity:1}
.suspicion.bad{opacity:1;background:radial-gradient(ellipse at center,#e0776a66 0,transparent 65%)}
.suspicion.good{opacity:1;background:radial-gradient(ellipse at center,#f6d1a855 0,transparent 65%)}
.dialogue{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:16px 18px 18px;display:grid;gap:8px;background:linear-gradient(0deg,#0b1626f7 70%,#0b162600);transform:translateY(100%);transition:transform .35s ease}
.dialogue.on{transform:none}
.dialogue .q{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);margin:0}
.say{min-height:46px;text-align:left;padding:10px 16px;border-radius:6px;border:0;cursor:pointer;background:#e9eef2;color:#14202c;font:500 clamp(15px,1.7vw,19px)/1.3 var(--serif);
  box-shadow:0 3px 0 #7d8fa3,0 8px 16px #0008;transition:transform .08s,box-shadow .08s}
.say:active{transform:translateY(2px);box-shadow:0 1px 0 #7d8fa3}
.say:focus-visible{outline:3px solid var(--dawn);outline-offset:3px}
.say .k{font:10px var(--mono);color:#5b6876;margin-right:10px}

/* 03 · oráculo */
.theia{position:absolute;z-index:4;left:50%;top:9%;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#0b1626 0 28%,#e9eef2 30% 33%,#7f99b8 36% 52%,#0b1626 54% 60%,#e9eef299 62% 64%,transparent 66%);box-shadow:0 0 30px #9fb3c899}
.beam{position:absolute;z-index:3;left:50%;top:9%;width:30%;height:70%;transform-origin:50% 0;transform:translateX(-50%) rotate(0deg);pointer-events:none;opacity:0;transition:opacity .25s,transform .5s ease;
  background:linear-gradient(180deg,#e9eef255,#e9eef200);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%)}
.beam.on{opacity:1}
.dossier{position:absolute;z-index:4;top:28%;height:46%;width:20%;border:0;padding:0;background:transparent;cursor:pointer;color:#14202c;text-align:left;border-radius:3px}
.dossier .face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:9% 10%;gap:4px}
.dossier .who{position:absolute;left:24%;top:16%;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#e9eef2}
.dossier .pct{font:500 clamp(22px,4.6cqw,58px)/1 var(--serif);letter-spacing:-.04em;color:#1a1410}
.dossier .dv{font:clamp(8px,1cqw,11px)/1.3 var(--mono);color:#3b2f22;text-transform:uppercase;letter-spacing:.06em}
.dossier .hold{position:absolute;left:8%;right:8%;bottom:-17%;height:14%;min-height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:clamp(8px,1cqw,11px) var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:#0b1626e6;color:var(--dawn-light);box-shadow:0 3px 0 #05090f,inset 0 0 0 1px #f6d1a866;overflow:hidden}
.dossier .hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:#f6d1a840}
.dossier .stamp{position:absolute;left:10%;top:44%;padding:5px 9px;border:2px solid #9c2f22;color:#9c2f22;font:500 clamp(9px,1.25cqw,14px) var(--mono);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-9deg) scale(1.4);opacity:0;transition:opacity .18s,transform .18s}
.dossier.signed .stamp{opacity:1;transform:rotate(-9deg) scale(1)}
.dossier .sig{position:absolute;left:50%;right:8%;top:17%;height:13%;overflow:visible}
.dossier.signed .hold{opacity:.35}
.dossier .sig path{fill:none;stroke:#1a2a52;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset .5s ease}
.dossier.signed .sig path{stroke-dashoffset:0}
.dossier .truth{position:absolute;left:8%;top:62%;padding:6px 10px;border:3px solid #1d6b46;color:#1d6b46;font:500 clamp(10px,1.5cqw,17px) var(--mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(6deg) scale(1.6);opacity:0;transition:opacity .2s,transform .25s}
.dossier.open .truth{opacity:1;transform:rotate(6deg) scale(1)}
.dossier.open .pct{text-decoration:line-through;text-decoration-color:#9c2f22;text-decoration-thickness:3px}
.dossier.focus-scan{box-shadow:0 0 0 2px #e9eef2aa,0 0 30px #e9eef266}
.dossier:focus-visible{outline:3px solid var(--dawn);outline-offset:3px}
.queue{position:absolute;inset:0;z-index:4}
.card10{position:absolute;top:26%;left:39%;width:22%;height:50%;border-radius:4px;background:linear-gradient(160deg,#e9d3a6,#d8bd8a);box-shadow:0 14px 30px #000b;color:#1a1410;padding:3%;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s ease,opacity .35s}
.card10 .who{font:clamp(8px,1cqw,11px) var(--mono);letter-spacing:.08em;text-transform:uppercase}
.card10 .pct{font:500 clamp(24px,5cqw,60px)/1 var(--serif);letter-spacing:-.04em}
.card10 .bar{height:6px;background:#00000022;border-radius:3px;overflow:hidden}
.card10 .bar i{display:block;height:100%;width:100%;background:#9c2f22;transform-origin:0 50%}
.card10 .state{font:clamp(8px,1cqw,11px) var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#3b2f22;min-height:1.3em}
.card10.out{transform:translateX(-160%) rotate(-8deg);opacity:0}
.card10.in{transform:translateX(160%) rotate(8deg);opacity:0}
.grid10{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:780px;margin-top:14px}
.grid10 span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:4px;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#13243a;color:#a9b8c8;border:1px solid #24384f}
.grid10 span b{font:500 18px/1 var(--serif);color:var(--light)}
.grid10 span.innocent{border-color:#e0776a;color:#ffc2b8}
.grid10 span.saved{border-color:#5fbf8f;color:#b8f0d2}

/* abertura do cap. 6: slider que o leitor puxa (figures/opener-split.js) */
.opener-split{cursor:ew-resize;touch-action:pan-y pinch-zoom}
.opener-split .split-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;clip-path:inset(0 0 0 50%);pointer-events:none}
.opener-split .split-handle{z-index:6}
.opener-split .tag{position:absolute;bottom:14px;z-index:5;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light);background:#0b1626c7;padding:6px 10px;border-radius:3px;pointer-events:none}
.opener-split .tag.l{left:14px}.opener-split .tag.r{right:14px}
.split-hint{position:absolute;top:calc(50% + 34px);left:50%;z-index:6;transform:translateX(-50%);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dawn-light);text-shadow:0 1px 3px #000,0 0 10px #000;pointer-events:none;transition:opacity .4s}
.split-hint::before{content:'←  '}.split-hint::after{content:'  →'}
.opener-split.is-touched .split-hint{opacity:0}

/* 04 · fronteira */
.split-stage .side{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-stage .traced{clip-path:inset(0 0 0 50%)}
.split-stage .tag{position:absolute;bottom:14px;z-index:5;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--light);background:#0b1626c7;padding:6px 10px;border-radius:3px}
.split-stage .tag.l{left:14px}.split-stage .tag.r{right:14px}
.split-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--dawn);z-index:4;box-shadow:0 0 14px #e6b07c99}
.split-handle{position:absolute;top:50%;left:50%;z-index:6;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:0;cursor:ew-resize;display:grid;place-items:center;color:#0d1a2b;
  background:linear-gradient(180deg,#f6d1a8,#d79a5f);box-shadow:0 4px 0 #8a5a2e,0 10px 22px #0009;touch-action:none}
.split-handle:focus-visible{outline:3px solid var(--dawn-light);outline-offset:4px}
.spot{position:absolute;z-index:5;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:0;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 2px #f6d1a8cc,0 0 0 6px #f6d1a822;animation:spot-pulse 2s infinite}
@keyframes spot-pulse{50%{box-shadow:inset 0 0 0 2px #f6d1a8,0 0 0 12px #f6d1a800}}
.spot.found{animation:none;background:#f6d1a833;box-shadow:inset 0 0 0 3px var(--dawn)}
.spot.miss{animation:none;opacity:.35;box-shadow:inset 0 0 0 2px #9fb3c8}
.spot-label{position:absolute;z-index:6;transform:translate(-50%,-150%);padding:6px 10px;border-radius:5px;background:#0b1626e6;color:var(--dawn-light);font:11px/1.3 var(--sans);white-space:nowrap;pointer-events:none}
.meter{display:flex;gap:36px;flex-wrap:wrap;margin-top:18px;align-items:baseline;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dark-muted)}
.meter b{display:block;font:500 50px/1 var(--serif);letter-spacing:-.03em;text-transform:none;color:var(--light);margin-bottom:6px}
.meter .cost b{color:var(--dawn)}
.meter.hidden b{color:#3a4d64}
.blink{position:absolute;inset:0;z-index:4;overflow:hidden;background:#05090f}
.blink img{position:absolute;width:200%;height:200%;object-fit:cover;filter:blur(1.1px);will-change:transform}
.blink .cover{position:absolute;inset:0;background:#05090f;display:grid;place-items:center;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted)}

@media(max-width:600px){
  .game-stage.tall{aspect-ratio:4/3}
  /* licença: retrato, que mostra o miolo do corredor, onde o guarda anda */
  .game-stage.portrait{aspect-ratio:4/5}
  .game-hud .pill.round{display:none}
  .game-stage.asking .game-hud{opacity:0}
  .dialogue{padding:10px 12px 12px;gap:6px}
  .say{min-height:44px;padding:8px 12px;font-size:14px}
  .licence-trigger{width:72px;height:72px;right:10px;bottom:10px;font-size:11px}
  .pill{font-size:9px;padding:6px 8px}
  .game-btn.big{min-height:52px;padding:0 22px}
  .meter b{font-size:38px}
  .grid10{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .dossier .hold{bottom:-20%}
}
@media(prefers-reduced-motion:reduce){
  .game *,.game *::before,.game *::after{transition:none!important;animation:none!important}
}
@media print{.game-stage,.game-controls{display:none!important}}