:root{--red: #d7263d;--red-dark: #a31226;--red-light: #f04b60;--blue-deep: #04101f;--blue: #071a30;--blue-mid: #0c2a4d;--blue-light: #14406e;--blue-glow: #57a4e8;--white: #fbfbf8;--muted: #a9b8cc;--gold: #f2c14e;--green: #23b17f;--radius: 18px;--radius-sm: 12px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--tap: 52px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}body{font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;background:var(--blue);color:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}.game-shell{position:absolute;inset:0;background:var(--blue-deep);touch-action:none;z-index:0}.game-shell.is-active{z-index:2}.game-canvas{position:absolute;inset:0;touch-action:none}.game-canvas canvas{display:block;width:100%!important;height:100%!important;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;display:none;z-index:3;padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 14px)}.hud.is-visible{display:block}.hud__row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.hud__score{font-size:clamp(24px,8vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.45)}.hud__label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700}.hud__stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.45)}.hud__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#071a30b8;border:1px solid rgba(87,164,232,.4);font-size:12px;font-weight:700}.hud__pause{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:#071a30a6;color:var(--white);font-size:18px;display:grid;place-items:center;cursor:pointer}.hud__pause:active{transform:scale(.94)}.touch-controls{position:absolute;left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 14px);display:none;grid-template-columns:repeat(4,1fr);gap:10px;pointer-events:none;z-index:4}.touch-controls.is-visible{display:grid}.touch-controls button{pointer-events:auto;min-height:62px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:#0c2a4dd1;color:var(--white);font-size:22px;font-weight:800;display:grid;place-items:center;backdrop-filter:blur(3px)}.touch-controls button:active{background:#d7263dd9;transform:scale(.96)}.screen{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 28px) calc(var(--safe-left) + 16px);background:radial-gradient(120% 90% at 50% 0%,var(--blue-mid) 0%,var(--blue) 45%,var(--blue-deep) 100%)}.screen.is-hidden{display:none}.screen.is-transparent{background:transparent;pointer-events:none;overflow:hidden}.screen.is-overlay{background:#04101fdb;backdrop-filter:blur(3px)}.screen__inner{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:16px;flex:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.topbar__title{font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.brand{text-align:center;line-height:.86;margin-top:2px}.brand__logo{display:block;width:clamp(58px,15vw,84px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}.brand__main{display:block;font-size:clamp(34px,11.5vw,72px);font-weight:900;letter-spacing:-.04em;color:var(--white);text-shadow:0 6px 0 var(--red-dark),0 12px 26px rgba(0,0,0,.5)}.brand__sub{display:block;margin-top:8px;font-size:clamp(12px,3.6vw,15px);font-weight:800;letter-spacing:.42em;text-transform:uppercase;color:var(--red-light)}.brand__tag{margin:12px auto 0;max-width:34ch;font-size:13px;color:var(--muted);line-height:1.45}.hero{display:flex;justify-content:center;margin:8px 0 4px}.hero__card{position:relative;margin:0;padding:5px;border-radius:24px;background:linear-gradient(160deg,var(--red-light),var(--red-dark));box-shadow:0 20px 38px #0000008c;animation:hero-float 4.4s ease-in-out infinite}.hero__photo{display:block;height:min(31vh,290px);width:auto;max-width:74vw;border-radius:20px;object-fit:contain;object-position:50% 14%}.hero__number{position:absolute;top:-12px;right:-12px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:Arial Black,Arial,sans-serif;font-size:24px;font-weight:900;color:var(--white);background:radial-gradient(circle at 35% 30%,var(--red-light),var(--red-dark));border:3px solid var(--white);box-shadow:0 10px 20px #00000080}.hero__caption{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:4px 12px;border-radius:999px;background:#04101fcc;font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--white);white-space:nowrap}@keyframes hero-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (prefers-reduced-motion: reduce){.hero__card{animation:none}}.btn{appearance:none;border:none;width:100%;min-height:var(--tap);padding:14px 20px;border-radius:var(--radius);font-size:17px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .09s ease,filter .15s ease,background .2s ease;color:var(--white);text-decoration:none;font-family:inherit}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn--primary{background:linear-gradient(180deg,var(--red-light),var(--red) 55%,var(--red-dark));box-shadow:0 6px #6f0b18,0 12px 22px #d7263d4d}.btn--primary:active{box-shadow:0 3px #6f0b18}.btn--secondary{background:#14406ecc;border:1px solid rgba(87,164,232,.35)}.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--muted);font-size:14px;min-height:46px}.btn--danger{background:#78141e99;border:1px solid rgba(240,75,96,.45);color:#ffd7dc}.btn--install{background:linear-gradient(180deg,#1f7a5c,#14604a);border:1px solid rgba(35,177,127,.55);box-shadow:0 5px #0c3d2f;font-size:15px}.btn--install:active{box-shadow:0 2px #0c3d2f}.btn--small{min-height:42px;font-size:13px;padding:8px 14px;border-radius:var(--radius-sm);width:auto}.btn-row{display:grid;gap:10px}.btn-row--2{grid-template-columns:1fr 1fr}.stack{display:flex;flex-direction:column;gap:12px}.spacer{flex:1;min-height:8px}.card{background:linear-gradient(180deg,#14406e99,#071a30d9);border:1px solid rgba(87,164,232,.22);border-radius:var(--radius);padding:16px}.card--tight{padding:12px}.card__label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:800;margin-bottom:6px}.card__value{font-size:26px;font-weight:900;line-height:1.1}.card__hint{font-size:13px;color:var(--muted);line-height:1.45}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.field input{width:100%;min-height:var(--tap);padding:12px 14px;border-radius:var(--radius-sm);border:1px solid rgba(87,164,232,.35);background:#04101fbf;color:var(--white);font-size:17px;font-family:inherit}.field input:focus{outline:none;border-color:var(--red-light);box-shadow:0 0 0 3px #d7263d40}.field__hint{font-size:12px;color:var(--muted)}.form-error{padding:10px 14px;border-radius:var(--radius-sm);background:#78141e73;border:1px solid rgba(240,75,96,.5);color:#ffdde2;font-size:14px;font-weight:600}.form-success{padding:10px 14px;border-radius:var(--radius-sm);background:#105a4273;border:1px solid rgba(35,177,127,.5);color:#d6f7ea;font-size:14px;font-weight:600}.list{display:flex;flex-direction:column;gap:8px}.row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:#0c2a4d8c;border:1px solid transparent}.row.is-you{border-color:var(--gold);background:#f2c14e1f}.row__pos{font-size:15px;font-weight:900;color:var(--muted);text-align:center}.row__pos--top1{color:var(--gold)}.row__name{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row__meta{font-size:12px;color:var(--muted);margin-top:2px}.row__score{font-weight:900;font-size:16px;text-align:right;white-space:nowrap}.state{padding:26px 18px;text-align:center;color:var(--muted);font-size:14px;border-radius:var(--radius);border:1px dashed rgba(169,184,204,.3)}.state--error{border-color:#f04b6080;color:#ffdde2}.pagination{display:flex;gap:10px;align-items:center;justify-content:space-between}.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;background:linear-gradient(160deg,var(--red),var(--red-dark));border:2px solid rgba(255,255,255,.35);flex:0 0 auto}.avatar--photo{object-fit:cover;object-position:50% 22%;background:#fff}.avatar--sm{width:56px;height:56px;font-size:18px}.face-row{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.face-row .card__hint{margin:6px 0 0}.profile-head{display:flex;align-items:center;gap:14px}.toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);background:#0c2a4d8c;min-height:var(--tap)}.toggle__text{font-size:15px;font-weight:700}.toggle__desc{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}.switch{position:relative;width:54px;height:32px;border-radius:999px;background:#a9b8cc52;border:1px solid rgba(255,255,255,.2);flex:0 0 auto;cursor:pointer;transition:background .2s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:transform .18s ease}.switch[aria-checked=true]{background:var(--green)}.switch[aria-checked=true]:after{transform:translate(22px)}.volume{flex:0 1 150px;width:150px;min-height:32px;accent-color:var(--red-light);cursor:pointer}@media (max-width: 360px){.volume{flex:0 1 110px;width:110px}}.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 22px);transform:translate(-50%,24px);max-width:min(92vw,480px);padding:13px 18px;border-radius:14px;background:#04101ff2;border:1px solid rgba(87,164,232,.45);color:var(--white);font-size:14px;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:60}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast--error{border-color:#f04b60b3;background:#3c0810f5}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#020810c7;backdrop-filter:blur(4px)}.modal[hidden]{display:none}.modal__panel{width:min(94vw,460px);border-radius:22px;padding:22px;background:linear-gradient(180deg,var(--blue-mid),var(--blue));border:1px solid rgba(87,164,232,.3);box-shadow:0 24px 60px #0000008c;display:flex;flex-direction:column;gap:16px}.modal__title{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.02em}.config-warning{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px 14px calc(var(--safe-bottom) + 8px);background:#785408f2;color:#fff4d6;font-size:12px;font-weight:600;text-align:center;line-height:1.35}body.has-config-warning .screen{padding-bottom:calc(var(--safe-bottom) + 88px)}@media (min-width: 720px){.screen{padding-top:calc(var(--safe-top) + 26px)}.hero__photo{height:min(32vh,280px)}.btn-row--2{gap:14px}}@media (max-height: 700px){.brand__tag{margin-top:8px;font-size:12px}.screen__inner{gap:12px}}@media (max-height: 560px){.brand__main{font-size:clamp(30px,9vw,48px)}.hero__photo{height:min(26vh,140px)}.screen{padding-top:calc(var(--safe-top) + 8px)}}