*{box-sizing:border-box;margin:0}
:root{--y:#f2c230;--k:#1a1a1a;--w:#fff}
html,body{height:100%;overflow:hidden;background:var(--bg,var(--y));color:var(--k);transition:background 1.8s ease-in-out;font-family:system-ui,Arial,Verdana,sans-serif}
#app{height:100dvh;max-width:1100px;margin:auto;padding:10px;display:flex;flex-direction:column}
.scr{display:none;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.scr.on{display:flex}
h1{font:900 clamp(52px,14vw,130px)/.86 Impact,'Arial Black',Arial,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
h1 b{display:inline-block;background:var(--k);color:var(--y);padding:.04em .12em 0}
.sub{font-size:clamp(16px,3.5vw,22px);font-weight:600;max-width:30ch}
.small{font-size:14px;opacity:.75}
.btn{font:800 clamp(16px,4vw,22px) Arial,sans-serif;padding:14px 26px;background:var(--w);color:var(--k);border:3px solid var(--k);box-shadow:5px 5px 0 var(--k);cursor:pointer;text-transform:uppercase}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--k)}
.btn:focus-visible,#snd:focus-visible{outline:4px solid var(--w);outline-offset:2px}
.rec{font:900 20px Impact,Arial,sans-serif}
.rec span{font-size:44px;display:block}
#snd{position:fixed;top:10px;right:10px;font:700 12px Arial;padding:6px 10px;background:var(--k);color:var(--y);border:0;cursor:pointer;z-index:5}
#hud{display:flex;justify-content:space-between;width:100%;font:800 15px Arial;padding:4px 50px 4px 0}
#hud i{font-style:normal;font-weight:900;font-size:22px;display:block;line-height:1}
#view{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative}
#view svg{width:100%;height:auto;max-height:100%;border:4px solid var(--k);background:#fff}
#tm{position:absolute;top:8px;left:8px;background:var(--k);color:var(--y);font:900 28px Impact,Arial;padding:2px 12px;z-index:2}
.big{font:900 clamp(56px,16vw,150px)/1 Impact,'Arial Black',Arial,sans-serif;text-transform:uppercase}
h2{font:900 clamp(28px,6vw,52px)/1.05 Impact,'Arial Black',Arial,sans-serif;text-transform:uppercase;max-width:20ch}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:560px}
.ok{color:#055c1c}.no{color:#8f0d09}
#msg{min-height:26px;font-weight:700;font-style:italic;padding-bottom:4px}
table{border-collapse:collapse;font-weight:800;font-size:18px}
td{padding:4px 18px;border-bottom:2px solid var(--k)}td+td{text-align:right;font-size:22px}
.pop{animation:pop .22s ease-out}
.shk{animation:shk .3s}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes shk{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@media(prefers-reduced-motion:reduce){.pop,.shk{animation:none}html,body{transition:none}}