@font-face{font-family:DM;src:url('../play-lab/fonts/dm-sans-700.ttf');font-weight:700;font-display:swap}
:root{font-family:DM,'Hiragino Kaku Gothic ProN',system-ui,sans-serif;color:#1a365d;background:#f4f3eb;--navy:#1a365d;--orange:#ed8936;--teal:#319795}*{box-sizing:border-box}body{margin:0;overflow:hidden}[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent;color:inherit;font:inherit}button{cursor:pointer;border:0}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ed8936;outline-offset:3px}.app{height:100svh;display:flex;flex-direction:column}header{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:var(--navy);color:white}header>a{display:flex;align-items:center;gap:20px}header img{width:124px}header span{font-size:9px;letter-spacing:2px;border-left:1px solid #ffffff55;padding-left:20px}nav{display:flex;align-items:center;gap:16px;font-size:11px}nav button{background:none;color:white;min-height:40px;min-width:32px}.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 27px;flex-shrink:0}.hud p{font-size:9px;letter-spacing:2px;color:var(--teal);margin:0 0 4px}h1{font-size:26px;letter-spacing:-1px;margin:0}h1 span{color:var(--orange)}.distance b{font-size:31px}.distance small{font-size:10px;color:#647c83}.progress{height:4px;background:#d6dfdc;flex-shrink:0}.progress i{height:100%;display:block;width:0;background:var(--orange)}main{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(#18334f 0%,#48647a 35%,#e4b286 60%,#afc3c4 100%)}canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}.live{position:absolute;top:18px;left:25px;right:25px;display:flex;justify-content:space-between;color:white;font-size:13px;pointer-events:none}.live>span{background:#173450dc;border:1px solid #ffffff22;border-radius:30px;padding:9px 14px}#lives{color:#ffd596;letter-spacing:3px}.toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;padding:10px 16px;background:#163152e8;color:white;font-size:12px;text-align:center;border-radius:30px;pointer-events:none;margin:0}.boost-banner{position:absolute;top:18%;width:100%;text-align:center;color:#ffe8a5;font-size:clamp(25px,4vw,48px);letter-spacing:3px;text-shadow:0 3px 20px #8b3d14;pointer-events:none}.boost-banner small{display:block;color:white;font-size:12px;letter-spacing:2px;margin-top:6px}.cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(30px,6vh,70px) clamp(30px,7vw,105px);background:linear-gradient(90deg,#142e4cfa 0%,#142e4cdd 30%,#142e4c00 78%);color:white;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:3px;color:#a6d5d0;margin:0 0 18px}.cover h2{font-size:clamp(52px,6.8vw,98px);line-height:1.05;letter-spacing:-5px;margin:0}.cover h2 em{font-style:normal;color:#ffb867}.cover-note{font-size:12px;letter-spacing:2px;color:#b8cdcf;margin-top:23px}.cover-bottom{max-width:370px;pointer-events:auto}.cover-bottom p{font-size:12px;line-height:1.9;color:#dfebe8}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 19px;min-height:54px;border-radius:9px;background:#ed8936;color:#172f4e;font-weight:bold;font-size:15px}.primary span{font-size:20px}.cover-bottom small{display:block;font-size:10px;color:#b6cccb;margin-top:11px}footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:7px 18px;font-size:10px;color:#7b8c8d}footer button{min-width:140px;min-height:49px;padding:6px 19px;display:flex;align-items:center;justify-content:space-between;font-size:28px;color:var(--navy);background:#e0e8e3;border-radius:9px;touch-action:manipulation}footer button:active{background:#bdd9d2;transform:scale(.96)}footer button span{font-size:9px;letter-spacing:2px}.app:not([data-playing]) .live,.app:not([data-playing]) .toast{visibility:hidden}.app:not([data-playing]) footer{opacity:.4}dialog{width:min(92vw,420px);max-height:90svh;overflow:auto;padding:28px;border:0;border-radius:18px;color:var(--navy);background:#f8f5e9;box-shadow:0 30px 100px #10284688}dialog::backdrop{background:#122943b8;backdrop-filter:blur(5px)}dialog .eyebrow{color:var(--teal)}dialog h2{font-size:32px;line-height:1.25;margin:15px 0}dialog p{font-size:12px;line-height:1.9}.big{font-size:67px;color:var(--orange);font-weight:bold;letter-spacing:-2px}.big small{font-size:13px;letter-spacing:0;color:#6b807b}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-block:1px solid #d5dcd0;padding:15px 0;margin:15px 0 24px;font-size:10px}.stats b{display:block;font-size:20px;margin-bottom:3px}.secondary{width:100%;background:none;padding:15px;margin-top:7px;font-size:12px}#error{position:absolute;inset:0;background:#fff;padding:30px;z-index:20}
@media(max-width:600px){header{height:43px;padding:0 14px}header img{width:103px}header span{display:none}nav{gap:9px}.hud{padding:8px 15px}.hud p{font-size:8px}h1{font-size:22px}.distance b{font-size:26px}.distance small{font-size:9px}.live{left:12px;right:12px;top:13px;font-size:11px}.live>span{padding:8px 11px}.cover{padding:27px 27px 23px;background:linear-gradient(90deg,#142e4ced,#142e4c70 80%)}.cover h2{font-size:56px;letter-spacing:-3px}.cover .eyebrow{font-size:10px;margin-bottom:14px}.cover-note{font-size:10px;margin-top:15px}.cover-bottom{max-width:none}.cover-bottom p{font-size:11px}.primary{font-size:14px;min-height:50px;padding:13px 16px}.cover-bottom small{font-size:9px}footer{padding:7px 9px;gap:8px}footer button{min-width:100px;min-height:50px;padding:5px 14px}footer>span{font-size:9px;white-space:nowrap}.toast{font-size:10px;bottom:13px}.boost-banner{top:22%}}
@media(max-height:560px){header{height:38px}.hud{padding:4px 14px}.hud p{display:none}h1{font-size:19px}.distance b{font-size:23px}.cover{flex-direction:row;align-items:center;gap:24px;padding:20px 30px}.cover h2{font-size:45px}.cover-bottom{max-width:280px}.cover-note{margin:10px 0 0}.cover-bottom p{font-size:10px}.cover .eyebrow{font-size:9px;margin-bottom:10px}footer{padding:3px 12px}footer button{min-height:38px}.live{top:8px}}
