/* System font stack only — no external font requests. Headings and body
   text share this one stack (weight/letter-spacing tell them apart), which
   keeps rendering consistent across devices instead of depending on a
   webfont that may or may not load. */
:root{color-scheme:dark;--bg:#090711;--panel:#161321;--panel2:#1d182b;--lime:#b6ff20;--purple:#b03dff;--pink:#fa4cff;--text:#f9f7ff;--muted:#a7a1b7;--border:#373044;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--font-display:var(--font);font-family:var(--font)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--text);background:radial-gradient(circle at 50% -10%,#34204b 0,transparent 34%),var(--bg);min-height:100vh}
button,input{font:inherit}
button{cursor:pointer;transition:transform .12s ease,opacity .12s ease}
button:active{transform:scale(.96)}
button:disabled:active{transform:none}
.shell{max-width:560px;margin:auto;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#0b0813}
.brand{display:flex;align-items:center;gap:10px;font:700 13px/1.05 var(--font);letter-spacing:.08em}
.brand>span:last-child span{display:block;color:var(--lime)}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--lime);color:#0c0a10;font:900 14px var(--font);transform:skew(-10deg);box-shadow:4px 4px 0 #8228c0}
.brand-mark span{color:#9c21c6}
.event-tag{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em}
.hero{height:390px;position:relative;overflow:hidden;background:#251331}
.hero-art{position:absolute;inset:0;background-image:url('/static/arcade-hero.png');background-size:cover;background-position:center 43%;filter:saturate(1.18) contrast(1.05)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,14,.15) 0%,rgba(7,5,14,.08) 38%,rgba(7,5,14,.92) 100%),linear-gradient(90deg,rgba(9,5,16,.5),transparent 80%)}
.hero:before,.hero:after{content:'';position:absolute;z-index:1;width:180px;height:4px;background:var(--lime);box-shadow:0 0 16px var(--lime)}
.hero:before{top:0;left:20px}.hero:after{bottom:0;right:0;background:var(--pink);box-shadow:0 0 16px var(--pink)}
.hero-copy{position:absolute;z-index:2;left:22px;right:14px;bottom:55px;text-shadow:0 3px 18px #07030b}
.eyebrow{display:flex;align-items:center;gap:8px;font:700 11px var(--font);letter-spacing:.12em;color:var(--lime)}
.spark{width:9px;height:9px;background:var(--lime);transform:rotate(45deg);box-shadow:0 0 10px var(--lime)}
h1,h2,p{margin:0}
h1{font:900 clamp(50px,12.5vw,78px)/1 var(--font-display);letter-spacing:-.03em;text-transform:uppercase;margin:9px 0 10px;color:#fff;filter:drop-shadow(4px 5px 0 #8b23c4)}
.bang{color:var(--lime)}
.hero-copy p{font-size:14px;font-weight:700}
.hero-meta{position:absolute;z-index:2;left:22px;right:22px;bottom:16px;display:flex;align-items:center;gap:8px}
.hero-meta span{border:1px solid rgba(199,180,220,.45);background:rgba(12,8,23,.78);border-radius:5px;padding:5px 10px;font:800 10px var(--font);letter-spacing:.07em}
.hero-meta span:last-child{margin-left:auto;color:var(--lime);border-color:var(--lime)}
.content{padding:18px 18px 24px}
.view-tabs{display:flex;gap:5px;background:#211a2e;border:1px solid #514361;border-radius:12px;padding:5px;margin:0 0 17px}
.view-tab{flex:1;border:0;border-radius:8px;background:transparent;color:#aaa1b8;font-size:12px;font-weight:800;padding:11px 9px}
.view-tab.active{background:var(--lime);color:#14180a;box-shadow:0 3px 12px rgba(182,255,32,.22)}
.admin-view{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px 18px;margin-top:4px}
/* Calm, one-shot entrance for cards/panels. Runs whenever the element goes
   from [hidden] to visible (tab switch, registration result appearing) —
   not a continuous loop, and skipped entirely under reduced motion below. */
@keyframes card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.capacity-card,.event-card,.form-panel,.result-panel,.admin-view{animation:card-in .4s cubic-bezier(.22,.9,.32,1) both}
.event-card{animation-delay:.05s}
.form-panel{animation-delay:.1s}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.participant-row{animation:row-in .28s ease-out both}
.admin-heading{display:flex;align-items:center;justify-content:space-between}
.admin-heading h2{margin:5px 0 0}
.refresh-button{width:38px;height:38px;border:1px solid #665577;background:#2c203b;border-radius:10px;color:var(--lime);font-size:25px;line-height:1}
.admin-description{color:var(--muted);font-size:12px;line-height:1.5;margin:9px 0 18px}
.admin-summary{display:flex;align-items:baseline;gap:11px;background:#2b1e3c;border:1px solid #6e4a8d;border-radius:12px;padding:13px 15px}
.admin-summary strong{font:800 24px var(--font-display);letter-spacing:-.02em;color:var(--lime)}
.admin-summary span{font-size:11px;color:var(--muted)}
.admin-actions{display:flex;gap:8px;margin:12px 0}
.admin-actions button{flex:1;background:#30213f;border:1px solid #6b4b84;border-radius:8px;color:var(--lime);font-size:11px;font-weight:800;padding:11px 7px;min-height:40px}
.admin-tip{color:var(--muted);font-size:11px;line-height:1.4}
.admin-view h3{font-size:13px;margin:24px 0 10px}.admin-view h3 span{display:inline-grid;place-items:center;min-width:22px;height:22px;background:#443352;color:var(--lime);border-radius:6px;margin-left:5px;font-size:11px}
.participant-list{color:var(--muted);font-size:12px}
.participant-row{display:flex;align-items:center;gap:10px;background:#0f0c18;border:1px solid #3c304b;border-radius:10px;padding:11px 10px;margin:7px 0;min-height:58px}
.participant-number{display:grid;place-items:center;flex:0 0 32px;height:32px;background:#30203f;border:1px solid #74449a;border-radius:7px;color:var(--lime);font:800 13px var(--font-display)}
.participant-info{min-width:0;flex:1}.participant-info strong,.participant-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-info strong{color:var(--text);font-size:13px}.participant-info small{color:var(--muted);font-size:11px;margin-top:3px}.participant-row a{color:var(--purple);font-size:10px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Attendance-reminder confirmation ("Буду"/"Нет ответа") — separate from
   the checked-in attendance-button, shown as a small pill under the name
   so it never competes with the row's buttons for horizontal space. */
.confirm-badge{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.03em;background:#241d30;color:var(--muted);border:1px solid #4a3f5c}
.confirm-badge.confirmed{background:#1e3617;color:var(--lime);border-color:var(--lime)}
.attendance-button{border:1px solid #6c5881;background:#271d34;color:#d7cce2;border-radius:7px;font-size:9px;font-weight:800;padding:7px 5px;min-width:65px;min-height:36px}
.attendance-button.checked{background:#2a3818;color:var(--lime);border-color:var(--lime)}
.remove-button{flex:0 0 auto;border:1px solid #8a4560;background:#2c1620;color:var(--pink);border-radius:7px;font-size:15px;font-weight:800;line-height:1;width:36px;height:36px}
.remove-button:active{background:#43111f}
.announcement-editor{margin-top:27px;border-top:1px solid #514361;padding-top:20px}
.announcement-editor h3{font:800 19px var(--font-display);letter-spacing:-.01em;margin:9px 0}
.announcement-editor p{color:var(--muted);font-size:11px;line-height:1.5}
.announcement-editor label{margin-top:17px}
.announcement-editor textarea{display:block;width:100%;resize:vertical;border:1px solid #554960;border-radius:10px;background:#0d0b15;color:var(--text);padding:12px 14px;outline:0;font:13px/1.5 var(--font);min-height:110px}
.announcement-editor textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(182,255,32,.12)}
.admin-publish-button{width:100%;margin-top:11px;border:0;border-radius:9px;background:var(--lime);color:#11100b;min-height:44px;font-size:11px;font-weight:900}
.admin-publish-button:disabled{opacity:.55}
.announcement-editor small{display:block;margin-top:8px;color:var(--muted);font-size:10px}
.capacity-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;background:linear-gradient(135deg,#1b1727,#241735);border:1px solid #6a4d85;border-radius:16px;padding:19px 18px 16px;box-shadow:0 12px 25px rgba(0,0,0,.2)}
.capacity-card .overline{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.16em}
/* "Digital display" chip for the slot counter, framed like an arcade
   credits readout, using the same display font weight as the headings. */
.capacity-card strong{display:inline-block;font:800 26px/1 var(--font-display);letter-spacing:-.01em;margin:8px 0 13px;padding:7px 12px;color:var(--lime);background:#0d0b15;border:1px solid var(--lime);border-radius:8px;box-shadow:inset 0 0 10px rgba(182,255,32,.2)}
/* CSS-drawn arcade coin/token — a ring with a coin-slot bar — replacing a
   plain arrow glyph, no image or emoji needed. */
.capacity-icon{position:relative;width:32px;height:32px;border-radius:50%;border:2px solid var(--lime);background:radial-gradient(circle at 32% 28%,rgba(182,255,32,.35),transparent 65%),#171225;box-shadow:0 0 10px rgba(182,255,32,.25)}
.capacity-icon:before{content:'';position:absolute;left:50%;top:22%;bottom:22%;width:3px;background:var(--lime);transform:translateX(-50%);border-radius:2px;box-shadow:0 0 6px var(--lime)}
.progress-track{grid-column:1/-1;height:9px;border-radius:20px;background:#3d3050;overflow:hidden;position:relative}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--lime),#e3ff54);box-shadow:0 0 15px var(--lime);transition:width .5s cubic-bezier(.22,.9,.32,1)}
/* Segmented look — thin dark dividers every 5%, like an arcade lives/energy
   meter, drawn with a repeating gradient instead of extra markup. */
.progress-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 2px),rgba(9,7,17,.55) calc(5% - 2px),rgba(9,7,17,.55) 5%);pointer-events:none}
.capacity-card small{grid-column:1/-1;color:var(--muted);font-size:11px;margin-top:10px}
.event-card{margin-top:16px;background:#15111f;border:1px solid #483459;border-radius:16px;padding:19px 18px}
.event-card h2{font-size:22px;margin:5px 0 15px}
.event-facts{display:grid;gap:1px;background:#32273e;border-radius:9px;overflow:hidden}
.event-facts>div{display:grid;grid-template-columns:72px 1fr;gap:9px;align-items:start;background:#1c1727;padding:11px 12px}
.event-facts span{font-size:9px;color:var(--purple);font-weight:900;letter-spacing:.08em;margin-top:3px}
.event-facts strong{font-size:12px;line-height:1.35}
.rules-details{margin-top:13px;background:#211b2d;border-radius:9px;padding:11px 12px;font-size:12px}
.rules-details summary{cursor:pointer;color:var(--lime);font-weight:800}
.rules-details p{margin-top:9px;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.announcement-card{margin-top:13px;background:#271a38;border:1px solid #a447e1;border-radius:9px;padding:13px}
.announcement-card span{color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.1em}
.announcement-card p{color:#eee7f7;font-size:12px;line-height:1.55;white-space:pre-wrap;margin-top:7px}
.form-panel,.result-panel{margin-top:18px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:23px 21px 22px;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.section-head{display:flex;align-items:center;justify-content:space-between}
.step{font-size:10px;color:var(--purple);font-weight:800;letter-spacing:.14em}
.section-icon{font-size:23px;color:var(--lime)}
h2{font:800 27px var(--font-display);letter-spacing:-.015em;margin:6px 0 7px}
.form-intro{color:var(--muted);font-size:12px;margin-bottom:22px}
label{display:block;font-weight:800;font-size:12px;margin:17px 0 8px}
input{width:100%;height:52px;border:1px solid #554960;border-radius:10px;background:#0d0b15;color:var(--text);padding:0 14px;outline:0;font-size:14px}
input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(182,255,32,.12)}
input::placeholder{color:#726b80}
.field-hint{color:#8e879d;font-size:11px;margin:7px 0 0}
.age-note{display:flex;gap:11px;align-items:center;background:#211b2e;border:1px solid #514361;border-radius:10px;padding:11px;margin:19px 0}
.age-note span{color:#151019;background:var(--lime);font-weight:900;border-radius:4px;font-size:12px;padding:5px 7px}
.age-note p{color:#d1cadc;font-size:11px;font-weight:700}
.primary-button{height:54px;width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:10px;background:var(--lime);color:#11100b;padding:0 18px;font:900 14px var(--font);letter-spacing:.04em;box-shadow:0 5px 0 #607c17,0 10px 22px rgba(182,255,32,.17)}
.primary-button span:last-child{font-size:22px}
.primary-button:disabled{opacity:.55;cursor:wait}
.notice{background:#4a2530;border:1px solid #fa7d8c;color:#ffe4e8;padding:12px 14px;border-radius:10px;font-size:12px;margin:16px 0}
.result-panel{text-align:center;padding:30px 23px}
.result-emblem{display:grid;place-items:center;margin:0 auto 18px;width:70px;height:70px;border:2px solid var(--lime);border-radius:50%;background:#283615;color:var(--lime);font-size:38px;box-shadow:0 0 25px rgba(182,255,32,.28);animation:ticket-pop .5s cubic-bezier(.2,1.5,.3,1) both}
@keyframes ticket-pop{from{transform:scale(.55) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.result-panel h2{margin:9px 0}.result-panel>p:not(.step){font-size:13px;color:var(--muted);line-height:1.6}
.ticket{text-align:left;position:relative;overflow:hidden;margin:23px 0 11px;border:1px solid var(--lime);background:linear-gradient(130deg,rgba(22,14,34,.96),rgba(16,18,26,.89)),url('/static/arcade-hero.png') center/cover;border-radius:12px;padding:18px;box-shadow:0 0 20px rgba(182,255,32,.12)}
.ticket:after{content:'';position:absolute;right:-50px;bottom:-85px;width:190px;height:190px;border:18px solid rgba(176,61,255,.14);border-radius:50%}
.ticket-top,.ticket-details{display:flex;justify-content:space-between;gap:8px}
.ticket-top span:last-child{color:var(--lime)}
.ticket-cat{height:75px;width:75px;border-radius:50%;margin:18px 0;background:url('/static/arcade-hero.png') 27% 17%/400px auto;border:2px solid var(--lime);box-shadow:0 0 18px rgba(182,255,32,.35)}
.ticket span,.ticket small{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em}
.ticket strong{position:relative;z-index:1;display:block;color:var(--lime);font:800 clamp(20px,5.5vw,27px) var(--font-display);letter-spacing:-.01em;margin:7px 0;overflow-wrap:anywhere}
.ticket-divider{border-top:1px dashed #8a6aad;margin:17px 0 13px}
.ticket-details span{color:#fff}
.ticket-venue{color:#d9d0e6;font-size:11px;margin-top:9px;line-height:1.4}
.event-actions,.ticket-actions{display:flex;gap:8px;margin-top:14px}
.ticket-actions{margin:15px 0 4px}
.event-action-button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid #6b4b84;background:#20162c;color:var(--lime);border-radius:9px;font-size:11px;font-weight:800;letter-spacing:.02em;text-decoration:none;padding:0 8px;text-align:center;transition:transform .12s ease,opacity .12s ease}
.event-action-button:active{transform:scale(.96)}
.event-action-button span{font-size:13px;line-height:1}
.screenshot-hint{color:var(--muted);font-size:10px!important}
.quiet-button{background:transparent;border:0;color:#afa6bb;text-decoration:underline;font-size:12px;padding:10px}
.footer{display:flex;justify-content:space-between;color:#6d657c;font-size:9px;font-weight:800;letter-spacing:.08em;padding:22px 2px 10px}
[hidden]{display:none!important}
@media(max-width:370px){.hero{height:350px}h1{font-size:53px}.hero-copy{left:17px}.hero-meta{left:17px;right:17px}.content{padding:14px}}
@media(prefers-reduced-motion:reduce){
  .result-emblem{animation:none}
  .progress-bar{transition:none}
  .capacity-card,.event-card,.form-panel,.result-panel,.admin-view,.participant-row{animation:none}
  button,.event-action-button{transition:none}
  button:active,.event-action-button:active{transform:none}
}