:root{--ink: #14141f;--navy: #23233a;--navy-2: #2d2d4d;--navy-3: #3b3b63;--yellow: #ffd34d;--yellow-d: #c9951a;--pink: #ff4f8b;--blue: #4aa3ff;--green: #3fbf6b;--green-d: #1f7a43;--red: #e8434f;--red-d: #8b1e3f;--paper: #f4ead2;--num: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;--bevel: inset 0 4px 0 #ffffff26, inset 0 -4px 0 #00000040}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:#fff;font-family:system-ui,Segoe UI,Tahoma,sans-serif}.ic{width:1.25em;height:1.25em;vertical-align:-.28em;flex:none;image-rendering:pixelated}.ic+.ic{margin-inline-start:2px}#world{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none}#hud{position:fixed;top:8px;inset-inline:8px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;z-index:5}#hud .row{display:flex;gap:6px;flex-wrap:wrap}.pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;background:var(--navy);border:3px solid var(--ink);border-radius:8px;box-shadow:var(--bevel),0 3px 0 var(--ink);font:700 14px/1.6 var(--num)}.pill .used{opacity:.25;filter:grayscale(1)}.pill.bnpl{background:#6b2a5c;font-family:inherit}.pill.fog{background:var(--pink);animation:shake .5s infinite,pulse .6s infinite alternate}.pill.bump{animation:bump .35s}#hud .pill:has(.tok){pointer-events:auto;gap:4px;padding:2px 4px}.tok{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;margin:0;font-size:20px;background:var(--navy-3);border:3px solid var(--ink);border-radius:7px;box-shadow:var(--bevel);cursor:pointer;transition:transform .06s}.tok:hover:not(.used){filter:brightness(1.2);transform:translateY(-1px)}.tok:active{transform:translateY(2px)}.tok.used{opacity:.4;filter:grayscale(1)}.tok.used:after{content:"";position:absolute;inset:3px;background:linear-gradient(135deg,transparent 46%,var(--red) 46% 54%,transparent 54%)}.meters{display:flex;flex-direction:column;gap:5px;width:min(300px,100%)}.meter{position:relative;height:22px;background:var(--ink);border:3px solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:0 3px 0 var(--ink);font:700 12px/16px var(--num)}.meter i{position:absolute;inset-block:0;inset-inline-start:0;transition:width .4s steps(10);box-shadow:inset 0 4px #fff5,inset 0 -3px #00000040}.meter:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),var(--ink) calc(10% - 3px) 10%)}.meter span{position:relative;z-index:3;display:flex;align-items:center;gap:4px;padding-inline:6px;line-height:16px;text-shadow:0 2px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink)}.meter.low{animation:pulse .5s infinite alternate}.slot{display:inline-grid;place-items:center;width:30px;height:30px;margin-inline-end:3px;background:var(--ink);border:3px solid var(--ink);border-radius:6px;font-size:18px;box-shadow:inset 0 0 0 2px #ffffff14}.slot .ic{opacity:.22;filter:grayscale(1) brightness(1.6)}.slot.got{background:#ffd34d33;box-shadow:inset 0 0 0 2px var(--yellow)}.slot.got .ic{opacity:1;filter:none}.slot.new{animation:pop .5s}.float{position:fixed;z-index:30;pointer-events:none;font:800 22px var(--num);color:var(--yellow);text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink);animation:floatup 1.1s ease-out forwards}.float.bad{color:var(--red)}.float.good{color:#7dffa6}#toast{position:fixed;z-index:40;bottom:96px;left:50%;transform:translate(-50%);max-width:calc(100% - 32px);padding:10px 16px;background:var(--navy);border:4px solid var(--yellow);border-radius:10px;box-shadow:0 0 0 4px var(--ink),0 8px 0 4px var(--ink);font-size:16px;font-weight:700;animation:toastin .3s cubic-bezier(.2,1.5,.4,1)}#toast[hidden]{display:none}.joy{display:none;position:fixed;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:#fff3;border:4px solid #ffffff88;pointer-events:none}.joy-knob{position:absolute;left:28px;top:28px;width:44px;height:44px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink)}#modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px 20px;background:radial-gradient(ellipse at center,#14141f66,#14141fcc);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadein .2s}#modal[hidden]{display:none}.panel{position:relative;width:min(580px,100%);max-height:100%;overflow:auto;padding:16px;background:var(--navy);border:4px solid var(--yellow);border-radius:10px;box-shadow:0 0 0 4px var(--ink),0 12px 0 4px var(--ink);animation:pop .38s cubic-bezier(.2,1.4,.4,1);scrollbar-width:thin;scrollbar-color:var(--yellow) var(--ink)}.panel>h1:first-child,.panel>h2:first-child{margin:-16px -16px 14px;padding:10px 16px;background:linear-gradient(var(--yellow) 0 60%,#f2bf2f 60%);color:var(--ink);border-bottom:4px solid var(--ink);font-size:20px;text-shadow:0 2px 0 #ffffff77}.panel h1{font-size:20px;margin:0 0 8px}.panel h2{font-size:17px;margin:14px 0 6px;color:var(--yellow)}.panel p{line-height:1.7}.panel label{display:block;margin:10px 0;font-weight:700}.panel input{width:100%;margin-top:4px;padding:10px;font:700 18px var(--num);color:var(--ink);background:var(--paper);border:4px solid var(--ink);border-radius:8px;box-shadow:inset 0 4px #00000026;outline:0}.panel input:focus{border-color:var(--yellow-d);box-shadow:inset 0 4px #00000026,0 0 0 3px var(--yellow)}#room-pin{text-align:center;font-size:28px;letter-spacing:.6em;padding-inline-start:.6em}.scene{line-height:1.8;font-size:17px}.choice{position:relative;display:block;width:100%;margin:10px 0 14px;padding:12px 14px;font:inherit;font-size:15px;font-weight:700;text-align:start;color:#fff;background:var(--navy-3);border:4px solid var(--ink);border-radius:8px;box-shadow:var(--bevel),0 6px 0 var(--ink);cursor:pointer;transition:transform .06s,box-shadow .06s,filter .1s;-webkit-tap-highlight-color:transparent}.choice:hover:not(:disabled){filter:brightness(1.14);transform:translateY(-2px);box-shadow:var(--bevel),0 8px 0 var(--ink)}.choice:active:not(:disabled),.choice.pressed{filter:brightness(.95);transform:translateY(5px);box-shadow:var(--bevel),0 1px 0 var(--ink)}.choice:focus-visible,.tok:focus-visible{outline:3px solid #fff;outline-offset:2px}.choice:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}.choice small{display:block;margin-top:4px;font-weight:400;opacity:.8;line-height:1.5}.choice .ic{margin-inline-end:6px}.choice.primary{text-align:center;color:var(--ink);background:var(--yellow);text-shadow:0 2px 0 #ffffff77}.choice.danger{background:var(--red);text-align:center}.choice.good{background:var(--green);color:var(--ink);text-align:center}.choice.big{padding:16px;font-size:20px;animation:breathe 1.4s ease-in-out infinite}.key{display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-end:10px;border-radius:6px;background:var(--ink);color:var(--yellow);font:800 14px var(--num);vertical-align:middle}.choice.primary .key{background:var(--ink);color:var(--yellow)}.choice.swell{font-size:20px;padding:20px;background:var(--red);animation:swell .5s infinite alternate}.choice[hidden]{display:none}.choice.profile{display:flex;align-items:center;gap:12px}.badge{flex:none;display:grid;place-items:center;width:46px;height:46px;background:var(--yellow);color:var(--ink);border:4px solid var(--ink);border-radius:8px;font:800 24px var(--num);box-shadow:inset 0 4px #fff8}.choice.profile .txt{flex:1}.logo{margin:-16px -16px 12px;padding:18px 16px 14px;text-align:center;background:linear-gradient(#3b2a7a,#23233a);border-bottom:4px solid var(--ink)}.logo h1{margin:0;font-size:clamp(26px,6vw,36px);line-height:1.25;color:var(--yellow);text-shadow:0 4px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink);animation:bob 2.4s ease-in-out infinite}.logo .sub{display:inline-block;margin-top:8px;padding:3px 14px;background:var(--pink);border:3px solid var(--ink);border-radius:6px;font-weight:700;font-size:14px;box-shadow:0 3px 0 var(--ink)}.mission{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:#0000004d;border-inline-start:6px solid var(--yellow);border-radius:6px;line-height:1.7}.mission .slots{display:flex;gap:3px}.mission .slot{animation:bob 2s ease-in-out infinite}.mission .slot:nth-child(2){animation-delay:.2s}.mission .slot:nth-child(3){animation-delay:.4s}.mission .slot:nth-child(4){animation-delay:.6s}.mission .slot:nth-child(5){animation-delay:.8s}.mission .slot .ic{opacity:1;filter:none}.lang-chip{width:auto;display:inline-flex;align-items:center;gap:4px;margin:10px 0 0;padding:6px 12px;font-size:14px}.verdict{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;margin:0 0 12px;border:4px solid var(--ink);border-radius:8px;font-weight:800;font-size:18px;transform:rotate(-2deg);box-shadow:0 5px 0 var(--ink);animation:stamp .45s cubic-bezier(.2,1.6,.4,1)}.verdict.trap{background:var(--red)}.verdict.good{background:var(--green);color:var(--ink)}p.verdict{display:flex;transform:none;font-size:16px}.explainer{margin:12px 0;padding:10px 12px;background:#0000004d;border-inline-start:6px solid var(--yellow);border-radius:6px;line-height:1.7}.explainer b{color:var(--yellow)}.explainer .choice{margin-bottom:10px}.fog-note{color:#ff9fbf;font-size:14px;font-weight:700}.timebar{height:12px;margin:6px 0 10px;background:var(--ink);border:3px solid var(--ink);border-radius:6px;overflow:hidden}.timebar i{display:block;height:100%;background:var(--red);box-shadow:inset 0 3px #fff5;animation:drain linear forwards}.timeskip{text-align:center;font-size:22px;font-weight:800;padding:24px;margin-bottom:8px;background:#1b2a4a;border:4px solid var(--ink);border-radius:8px;animation:timeskip 2.2s forwards}#modal.hit{animation:redflash .5s}.shake .panel,.shake #world{animation:shake .4s}.final{display:flex;align-items:center;gap:16px;margin-bottom:8px}.final .big{font:800 52px/1 var(--num);color:var(--yellow);text-shadow:0 4px 0 var(--ink)}.final .big small{font-size:22px;color:#fff}.grade{display:grid;place-items:center;width:74px;height:74px;margin-inline-start:auto;background:var(--yellow);color:var(--ink);border:5px solid var(--ink);border-radius:12px;font:800 44px var(--num);transform:rotate(-8deg);box-shadow:0 6px 0 var(--ink),inset 0 4px #fff8;animation:stamp .6s .9s backwards cubic-bezier(.2,1.6,.4,1)}.stat{margin:10px 0;font-weight:700}.stat .bar{height:18px;margin-top:4px;background:var(--ink);border:3px solid var(--ink);border-radius:6px;overflow:hidden}.stat .bar i{display:block;height:100%;width:0;box-shadow:inset 0 4px #fff5;transition:width 1s .2s steps(20)}.confetti{position:fixed;inset:0;z-index:50;pointer-events:none}@keyframes pop{0%{transform:scale(.8) translateY(18px);opacity:0}to{transform:none;opacity:1}}@keyframes fadein{0%{opacity:0}}@keyframes bump{40%{transform:scale(1.18)}}@keyframes pulse{to{opacity:.55}}@keyframes swell{to{transform:scale(1.03)}}@keyframes breathe{50%{transform:scale(1.025)}}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes stamp{0%{transform:scale(2.4) rotate(8deg);opacity:0}to{opacity:1}}@keyframes shake{20%{transform:translate(-6px,2px)}40%{transform:translate(6px,-2px)}60%{transform:translate(-4px)}80%{transform:translate(4px,2px)}}@keyframes floatup{to{transform:translateY(-48px);opacity:0}}@keyframes toastin{0%{transform:translate(-50%,30px);opacity:0}}@keyframes drain{0%{width:100%}to{width:0}}@keyframes redflash{0%{background:#e8434fcc}}@keyframes timeskip{0%,70%{opacity:1}to{opacity:.35}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}:root{--px-ink: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3C/svg%3E);--px-yellow: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3C/svg%3E);--px-panel: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%224%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%2314141f%22/%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23ffd34d%22/%3E%3C/svg%3E)}.choice,.pill,.tok,.badge,.verdict,.panel input,.timeskip{border:4px solid transparent;border-image:var(--px-ink) 4 / 4px / 0 stretch;border-radius:0;background-clip:padding-box}.panel,.coach-head{border:8px solid transparent;border-image:var(--px-panel) 8 / 8px / 0 stretch;border-radius:0;background-clip:padding-box;box-shadow:0 12px 0 -4px var(--ink)}#toast{border:4px solid transparent;border-image:var(--px-yellow) 4 / 4px / 0 stretch;border-radius:0;background-clip:padding-box;box-shadow:0 8px 0 -4px var(--ink)}.choice{box-shadow:var(--bevel),0 10px 0 -4px var(--ink)}.choice:hover:not(:disabled){box-shadow:var(--bevel),0 12px 0 -4px var(--ink)}.choice:active:not(:disabled),.choice.pressed{transform:translateY(4px);box-shadow:var(--bevel),0 6px 0 -4px var(--ink)}.pill{box-shadow:var(--bevel),0 8px 0 -4px var(--ink)}.panel input:focus{border-image:var(--px-yellow) 4 / 4px / 0 stretch;box-shadow:inset 0 4px #00000026}.panel>h1:first-child,.panel>h2:first-child{margin:-16px -16px 14px}.logo{margin:-16px -16px 12px}.tok{box-shadow:var(--bevel)}.tok.used:after{inset:2px}.pinboxes{display:flex;gap:10px;justify-content:center;margin:6px 0 4px;cursor:text}.pinboxes span{display:grid;place-items:center;width:56px;height:68px;background:var(--paper);color:var(--ink);font:800 38px var(--num);border:4px solid transparent;border-image:var(--px-ink) 4 / 4px / 0 stretch;background-clip:padding-box;box-shadow:inset 0 4px #00000026}.pinboxes span.on{background:#fff6c8;border-image:var(--px-yellow) 4 / 4px / 0 stretch;animation:blink 1s steps(2) infinite}@keyframes blink{50%{background:var(--paper)}}.panel label{position:relative}.pin-real{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:0;opacity:0;border:0!important;border-image:none!important}.looks{display:flex;gap:10px}.choice.look{flex:1;margin:6px 0 12px;padding:8px 4px;text-align:center}.choice.look .ic{display:block;width:52px;height:52px;margin:0 auto 4px}.choice.look small{margin:0;opacity:1}.choice.look.sel{background:var(--yellow);color:var(--ink)}.landing .logo h1{font-size:clamp(30px,8vw,44px)}.landing .choice{font-size:18px}#guide{position:fixed;z-index:6;bottom:16px;left:12px;right:12px;margin:0 auto;width:fit-content;display:flex;align-items:center;gap:10px;max-width:560px;padding:8px 14px;background:var(--navy);border:4px solid var(--yellow);border-radius:12px;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink);font-weight:700;font-size:15px;pointer-events:none;transition:opacity .4s}#guide[hidden]{display:none}#guide.new{animation:guidepop .5s}@keyframes guidepop{0%{transform:scale(.7)}60%{transform:scale(1.08)}to{transform:none}}.guide-arrow{display:grid;place-items:center;flex:none;width:34px;height:34px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:50%;font-size:18px;transition:transform .15s linear}.guide-text{line-height:1.35}.guide-dist{flex:none;font:800 14px var(--num);color:var(--yellow)}@media(max-width:600px){#guide{font-size:13px;padding:6px 10px;bottom:10px}}.phases{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 10px;padding:0;list-style:none}.phases li{flex:1 1 0;min-width:64px;padding:4px 6px;text-align:center;font-size:12px;font-weight:700;background:var(--navy-3);border:3px solid var(--ink);border-radius:7px;opacity:.6}.phases li.done{background:var(--green-d);opacity:.9}.phases li.now{background:var(--yellow);color:var(--ink);opacity:1;transform:translateY(-2px)}.brief ol,.brief ul{margin:6px 0;padding-inline-start:22px;line-height:1.6}.brief .where li{list-style:none;margin-inline-start:-22px}.brief .controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}.brief .controls div{padding:6px 8px;background:var(--ink);border-radius:8px;font-size:13px}.tok.help{font:800 18px var(--num);color:var(--yellow)}.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.choice.door{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:18px 12px 16px;text-align:center;font-size:19px}.choice.door small{font-size:13px;line-height:1.5}.choice.door.host{background:var(--navy-3)}.door-ic{display:grid;place-items:center;width:64px;height:64px;background:#00000040;border-radius:50%}.choice.door.primary .door-ic{background:#fff6}.landing-foot{display:flex;gap:10px;margin-top:14px}.landing-foot .choice{flex:1;margin:0;text-align:center;font-size:15px}.pinboxes.wide{gap:6px}.pinboxes.wide span{width:46px;height:58px;font-size:32px}.form-error{margin:4px 0 0;padding:8px 12px;background:#8b1e3f;border-radius:6px;font-weight:700}.form-error[hidden]{display:none}@media(max-width:480px){.doors{grid-template-columns:1fr}.pinboxes.wide span{width:38px;height:50px;font-size:26px}}#cine{position:fixed;inset:0;z-index:50;pointer-events:none}#cine[hidden]{display:none}#cine .bar{position:absolute;inset-inline:0;height:11vh;background:#000;transition:transform .9s cubic-bezier(.6,0,.2,1)}#cine .bar.top{top:0;transform:translateY(-100%)}#cine .bar.bot{bottom:0;transform:translateY(100%)}#cine.on .bar{transform:none}#cine .fade{position:absolute;inset:0;background:#000;opacity:1;transition:opacity .6s ease}#cine .chapter{position:absolute;top:calc(11vh + 14px);inset-inline-start:18px;padding:4px 10px;font:700 13px/1.4 var(--num);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);background:#000a;border-inline-start:4px solid var(--yellow);opacity:0;transform:translateY(-6px);transition:opacity .8s .6s,transform .8s .6s}#cine .chapter.on{opacity:1;transform:none}#cine .sub{position:absolute;bottom:calc(11vh + 18px);left:50%;width:max-content;max-width:min(92vw,880px);margin:0;padding:8px 16px;transform:translate(-50%,8px);text-align:center;font-size:clamp(16px,2.4vw,26px);font-weight:700;line-height:1.5;color:#fff;background:#000b;border-radius:6px;text-shadow:0 2px 0 #000;opacity:0;transition:opacity .45s,transform .45s}#cine .sub.on{opacity:1;transform:translate(-50%)}#cine .card{position:absolute;top:50%;left:50%;width:min(90vw,560px);padding:18px 22px;transform:translate(-50%,-46%) scale(.96);text-align:center;color:#fff;background:#14141fe6;border:4px solid transparent;border-image:var(--px-yellow) 4 / 4px / 0 stretch;opacity:0;transition:opacity .5s,transform .5s cubic-bezier(.2,1.4,.4,1)}#cine .card.on{opacity:1;transform:translate(-50%,-50%)}#cine .card h3{margin:0 0 8px;font-size:clamp(15px,2.2vw,20px);color:var(--yellow)}#cine .card .big{display:block;font:800 clamp(30px,6vw,54px)/1.1 var(--num);color:#fff}#cine .card .row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:10px}#cine .card .row div{min-width:110px}#cine .card .row b{display:block;font:800 clamp(22px,4vw,34px)/1.2 var(--num)}#cine .card .good{color:var(--green)}#cine .card .bad{color:var(--red)}#cine .card small{display:block;margin-top:10px;opacity:.75;font-size:12px}#cine .ctl{position:absolute;top:calc(11vh + 10px);inset-inline-end:14px;display:flex;gap:8px;pointer-events:auto}#cine .ctl button{--p: 0;position:relative;overflow:hidden;padding:6px 12px;font:700 13px/1.4 system-ui,sans-serif;color:#fff;background:#000a;border:2px solid #fff6;border-radius:6px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#cine .skip:before{content:"";position:absolute;inset:0;background:var(--yellow);opacity:.45;transform-origin:left;transform:scaleX(var(--p))}#cine .skip span{position:relative}#cine.paused .fade{opacity:.35!important}body.in-cine #hud,body.in-cine .joy{visibility:hidden}@media(max-width:600px){#cine .skip span{display:none}}@media(prefers-reduced-motion:reduce){#cine .bar,#cine .sub,#cine .card{transition:none}}
