:root{color-scheme:dark;--bg:#03091b;--panel:#07132c;--line:#204878;--cyan:#32c8ff;--gold:#ffcc33;--muted:#9db4d5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f4f1e8;font:14px/1.5 Arial,Helvetica,sans-serif}#app{max-width:540px;min-height:100vh;margin:auto;background:radial-gradient(ellipse at 0 0,#10377a,transparent 42%),repeating-linear-gradient(135deg,transparent 0 25px,#15387133 26px 27px,transparent 29px 55px),var(--bg)}header{display:flex;align-items:center;justify-content:space-between;padding:24px 20px 8px}.brand{font-size:36px;font-weight:950;font-style:italic;letter-spacing:-2px;color:white;text-decoration:none}.brand span{display:block;font:9px Arial;letter-spacing:3.5px;color:var(--cyan)}.badge{color:var(--cyan);border:1px solid var(--cyan);padding:4px 7px;font-size:10px;border-radius:4px}.identity{padding:6px 20px}main{padding:15px 20px 110px;min-height:70vh}h1,h2,h3{font-style:italic;text-transform:uppercase;line-height:1.1}h1{font-size:29px;margin:10px 0 22px}h2{font-size:19px}h3{font-size:16px}button,input,select{font:inherit}button{min-height:44px;cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:10px 13px}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:linear-gradient(#70e4ff,#16a8e4);color:#021127;border-color:#8fe7ff;font-weight:800;width:100%}.secondary{width:100%;margin-top:10px}.card{border:1px solid var(--cyan);border-radius:9px;background:linear-gradient(#0a2040,#030b1d);padding:16px;margin:14px 0;box-shadow:0 0 15px #1ba5ff19}.gold{border-color:var(--gold)}.hero{padding:23px 18px}.hero h1{font-size:38px;margin:16px 0 24px}.kicker{font-size:10px;letter-spacing:1.8px;color:var(--cyan);font-weight:bold}.muted{color:var(--muted);font-size:12px}.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #24457388}.row:last-child{border:0}.number{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--cyan)}.money{white-space:nowrap;color:var(--gold)}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tabs{display:flex;gap:8px;margin:12px 0}.tabs button{flex:1;font-size:12px}.tabs [aria-pressed=true],.seat[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#32311c}label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px}input,select{width:100%;min-height:46px;padding:10px;background:#07152c;color:white;border:1px solid var(--line);border-radius:6px}.floorplan{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:1px solid var(--line);padding:20px 12px;border-radius:9px;background:#040d21}.seat{min-height:88px;padding:8px 3px}.seat:before{content:'▰';display:block;font-size:25px;color:var(--cyan)}.seat small{display:block;color:var(--muted);font-size:10px}.legend{display:flex;justify-content:space-between;font-size:11px;margin:8px 0;color:var(--muted)}.error{border-color:#ff8c8c;color:#ffd2d2}.empty{text-align:center;padding:24px}.link{overflow-wrap:anywhere;color:var(--cyan)}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:flex;width:min(540px,100%);padding:9px 7px calc(9px + env(safe-area-inset-bottom));background:#061026f5;border-top:1px solid var(--line);z-index:2}nav button{border:0;flex:1;font-size:10px;padding:5px 2px;background:transparent}nav button b{display:block;font-size:19px}nav button.active{color:var(--cyan)}#staff{display:flex;gap:8px;padding:8px 20px}#staff:empty{display:none}#staff button{flex:1;font-size:12px;color:var(--cyan)}#toast{position:fixed;z-index:5;bottom:95px;left:50%;transform:translateX(-50%);width:min(440px,90%);padding:14px;border:1px solid var(--gold);border-radius:8px;background:#10233e;box-shadow:0 4px 30px #000}svg{width:100%;height:auto}svg text{fill:var(--muted);font:10px Arial}.prizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.prize{padding:12px;border:1px solid var(--line);border-radius:6px}.checker{height:7px;background:repeating-conic-gradient(#d9e8fa 0 25%,#0a172b 0 50%) 0/14px 14px;margin:22px -18px -23px}a{color:var(--cyan)}[hidden]{display:none!important}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}}

.brand{max-width:65%}.brand img{display:block;width:260px;max-width:100%;height:auto}
.floorplan{position:relative;aspect-ratio:1000/950;min-height:280px;padding:0;background:#040d21}
.seat{position:absolute;box-sizing:border-box;padding:2px;font-size:9px;line-height:1.1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:0;text-align:center}
.seat:before{content:'▰';display:block;font-size:15px;color:var(--cyan)}
.seat[data-seat=kids_static]:before{content:'🧒';font-size:13px}
.seat-kids{font-size:8px}
.seat-kids .p{font-size:8px}
.seat small{display:block;color:var(--muted);font-size:6.5px;white-space:nowrap}
.seat .p{display:block;color:var(--gold);font-weight:800;font-size:9px;margin-top:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.seat .was{display:block;color:var(--muted);text-decoration:line-through;font-weight:600;font-size:6px}
.zone{position:absolute;box-sizing:border-box;border-radius:8px;border:1px dashed #2a4a78;color:var(--muted);font-size:7px;line-height:1.15;letter-spacing:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px;overflow:hidden}
.zone-door{border-color:#6b3a5a;color:#e79ac4;font-size:8px}
.zone-desk{border-color:#2f6b4a;color:#8ff0c4}
.zone-lounge{border-color:#2c5fa8;color:#9dc0ff;font-size:8px}
.chip-toggle{min-height:auto;padding:8px 12px;font-size:12px;border-radius:20px}
.chip-toggle[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#32311c}
.happy-banner{display:flex;align-items:center;gap:8px;font-size:11px;color:#0d1a10;background:linear-gradient(90deg,#ffe08a,#ffcc33);border-radius:8px;padding:8px 10px;margin:12px 0 0;font-weight:700}
/* Карточка пилота: ранг/уровень, клуб, достижения, класс, бейджи. */
.rank-hero{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rank-emoji{font-size:34px;line-height:1}
.rank-id b{display:block;font-size:17px;color:#fff;font-style:italic}
.rank-id span{font-size:11px;color:var(--muted)}
.progress-label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin:10px 0 4px}
.progress-label b{color:var(--gold);font-weight:700}
.progress{height:7px;border-radius:5px;background:#0a1830;border:1px solid var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#16a8e4);border-radius:5px}
.progress.gold i{background:linear-gradient(90deg,#ffe08a,var(--gold))}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat-grid div{background:#040d21;border:1px solid var(--line);border-radius:9px;padding:10px 4px}
.stat-grid .n{display:block;font-size:16px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums}
.stat-grid .n.money{color:var(--gold)}
.stat-grid .l{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}
.medal-row{display:flex;justify-content:space-around;text-align:center;padding:4px 0 10px}
.medal-row div span{display:block;font-size:20px}
.medal-row div b{font-size:15px}
.medal-row div small{display:block;font-size:9px;color:var(--muted)}
.class-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #24457366;font-size:12px}
.class-line:last-child{border:0}
.class-line .name{font-weight:700}
.class-line .val{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.badges-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.badges-head b{color:var(--gold)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
.badge-chip{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line);background:#081a35}
.badge-chip.on{border-color:var(--gold);background:#241f0f;box-shadow:0 0 10px #ffcc3322}
.badge-chip.off{opacity:.3;filter:grayscale(1)}
/* Лёгкая визуальная полировка: мягче тени и радиусы, без изменения структуры. */
.card{border-radius:13px;box-shadow:0 10px 26px -18px #000,0 0 16px #1ba5ff14}
button{border-radius:10px}
.badge{border-radius:6px}
input,select{border-radius:9px}
/* Prize reel: fixed cell geometry keeps the server-selected prize centered. */
.roulette-card{overflow:hidden}.reel-window{position:relative;overflow:hidden;margin:22px -8px 18px;height:144px;background:#020719;border-block:1px solid #1688db;isolation:isolate}
.reel-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#020719,transparent 22%,transparent 78%,#020719);z-index:2}
.reel-strip{position:relative;display:flex;gap:10px;width:max-content;padding:12px 0;will-change:transform}
.reel-cell{flex:0 0 120px;width:120px;height:118px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;text-align:center;border:1px solid #167eba;border-radius:12px;background:linear-gradient(145deg,#123361,#071125);font-size:13px;line-height:1.3}
.reel-cell span{font-size:32px}.reel-cell.winner{border-color:#ffe06d;box-shadow:inset 0 0 24px #ffc93a30;color:#ffe895}
.reel-pointer{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:#ffe06d;z-index:3;box-shadow:0 0 14px #ffd75f}
.reel-pointer:before{content:'';position:absolute;top:0;left:-7px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #ffe06d}
.spin-win{text-align:center;padding:8px 0 16px;animation:prize-reveal .4s ease-out}.spin-win>span{font-size:36px}.spin-win h2{color:#ffe895}.spin-help{text-align:center;font-size:12px}
.reel-window.waiting .reel-strip{animation:reel-wait 1s ease-in-out infinite alternate}
@keyframes reel-wait{to{opacity:.4;transform:translateX(-20px)}}
@keyframes prize-reveal{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffe06d;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}