/* OLYMPIAD shell — tokens, page scale, frame, atmosphere, chrome, rule-* borders, motion */
:root{
  --u:calc(100vw / 1920);
  --paper:#34133E;--atm-navy:#071C38;--surface:#4D3970;--surface-2:#2F214B;--keyline:#866DA0;
  --mint:#55F1C8;--magenta:#F24DB8;--lavender:#B58AF2;--cyan:#6EDDEB;--coral:#FF7B96;
  --text:#F8F2FB;--text-muted:#CDBED8;
  --bg:var(--paper);--ink:var(--text);--mute:var(--text-muted);
  --font-display:"Big Shoulders Stencil",Impact,sans-serif;
  --font-body:"Hubot Sans",system-ui,sans-serif;
  --font-num:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;
  --gutter-l:calc(30*var(--u));--gutter-r:calc(27*var(--u));
  /* border tokens (BORDER_TABLE) — hairlines never below 1px */
  --rule-panel-w:max(1px,calc(2.2*var(--u)));--rule-panel-c:#866DA0;
  --rule-card-w:max(1px,calc(2.1*var(--u)));--rule-card-c:#9078AE;
  --rule-row-w:max(1px,calc(1.8*var(--u)));--rule-row-c:#745B91;
  --rule-chip-w:max(1px,calc(1.6*var(--u)));--rule-chip-c:#D2B5E2;
  --rule-lane-w:max(1px,calc(2.6*var(--u)));--rule-lane-c:#8AFCEB;
  --rule-cta-w:max(1px,calc(2.3*var(--u)));--rule-cta-c:#F6ECF9;
  --rule-input-w:max(1px,calc(2*var(--u)));--rule-input-c:#8786B2;
  --rule-hair-w:max(1px,calc(1.1*var(--u)));--rule-hair-c:#796097;
  --rule-active-w:max(1px,calc(2.5*var(--u)));--rule-active-c:#55F1C8;
  --rule-nav-w:max(1px,calc(1*var(--u)));--rule-nav-c:#bca8d2;
  --rule-ruler-c:#9a7ab8;--rule-vsep-c:#a890bd;
  /* motion: athletic, precise, short */
  --ease:cubic-bezier(.2,0,0,1);--t-s:220ms;--t-m:320ms;--t-l:420ms;
}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none}
html{background:var(--paper)}
body{background:transparent;color:var(--text);font-family:var(--font-body);font-size:max(12px,calc(16*var(--u)));position:relative;overflow-x:hidden}
a{text-decoration:none}

/* ---------- border classes: the ONLY place frames are drawn ---------- */
.rule-panel{border:var(--rule-panel-w) solid var(--rule-panel-c);border-radius:calc(26*var(--u))}
.rule-card{border:var(--rule-card-w) solid var(--rule-card-c);border-radius:calc(18*var(--u))}
.rule-row{border:var(--rule-row-w) solid var(--rule-row-c);border-radius:calc(13*var(--u))}
.rule-chip{border:var(--rule-chip-w) solid var(--rule-chip-c);border-radius:999px}
.rule-lane{border:var(--rule-lane-w) solid var(--rule-lane-c);border-radius:999px}
.rule-cta{border:var(--rule-cta-w) solid var(--rule-cta-c);border-radius:calc(16*var(--u))}
.rule-input{border:var(--rule-input-w) solid var(--rule-input-c);border-radius:calc(16*var(--u))}
.rule-hair{border-top:var(--rule-hair-w) solid var(--rule-hair-c)}
.rule-hair-b{border-bottom:var(--rule-hair-w) solid var(--rule-hair-c)}
.rule-active{border:var(--rule-active-w) solid var(--rule-active-c);box-shadow:0 0 calc(18*var(--u)) #55f1c866}
.rule-social{border:var(--rule-nav-w) solid var(--rule-nav-c);border-radius:calc(14*var(--u))}
.rule-cta-nav{border:var(--rule-nav-w) solid var(--rule-nav-c);border-radius:calc(14*var(--u))}
.rule-ruler{border:var(--rule-nav-w) solid var(--rule-ruler-c);border-radius:calc(22*var(--u))}
.rule-vsep{border-right:var(--rule-nav-w) solid var(--rule-vsep-c)}
.rule-vsep:nth-child(6){border-right:0}
/* stacked rows share one edge: the row above draws it (pre_send doubled-line fix) */
.rule-stack>.rule-row+.rule-row{border-top-color:transparent}
/* home pickers: the opened row closes its right side like the mockup (open-frame fix) */
.rule-open-row>.open{box-sizing:border-box;width:calc(100% + 13*var(--u));border-right:var(--rule-row-w) solid var(--rule-row-c)}
@media (max-width:1023px){.rule-open-row>.open{width:100%;border-right:0}}

/* ---------- ONE page frame: shell owns gutters; routes never set their own ---------- */
main#app{padding:0 var(--gutter-r) 0 var(--gutter-l);min-height:60vh;position:relative;z-index:1}
.site-nav,.site-footer{position:relative;z-index:2}

/* ---------- page atmosphere (DESIGN §3b): sky gradient, glows, lane lines, grain ---------- */
body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#071C38 0%,#34133E 38%,#4A1B56 100%)}
.atm{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atm i{position:absolute;display:block}
.atm-mint{right:calc(-60*var(--u));top:calc(160*var(--u));width:calc(900*var(--u));height:calc(500*var(--u));background:radial-gradient(closest-side,#55F1C82e,transparent)}
.atm-magenta{right:calc(-80*var(--u));top:calc(1500*var(--u));width:calc(900*var(--u));height:calc(600*var(--u));background:radial-gradient(closest-side,#F24DB838,transparent)}
.atm-lanes{right:0;top:calc(180*var(--u));bottom:0;width:calc(520*var(--u));background:repeating-linear-gradient(180deg,#ffffff0d 0 1px,transparent 1px calc(28*var(--u)));-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.atm-grain{position:fixed;inset:0;opacity:.03;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ---------- nav (chrome/nav.html, px@1920 → var(--u)) ---------- */
.site-nav{box-sizing:border-box;width:100%;height:calc(182*var(--u));padding:calc(18*var(--u)) calc(34*var(--u)) 0;background:linear-gradient(105deg,#2b123b 0%,#171733 58%,#10313d 100%);color:#fff;font-family:var(--font-body)}
.nav-main{height:calc(78*var(--u));display:flex;align-items:center;gap:calc(27*var(--u))}
.brand{display:flex;align-items:center;gap:calc(15*var(--u));font:700 calc(30*var(--u))/1 var(--font-display);letter-spacing:.04em;color:#fff}
.brand img{width:calc(208*var(--u));height:calc(66*var(--u));object-fit:contain;object-position:left center}
.brand span{font-size:max(18px,calc(30*var(--u)))}
.routes{display:flex;align-items:center;gap:calc(20*var(--u));flex:1}
.routes a,.social,.wallet{color:#fff;font-size:max(12px,calc(16*var(--u)));white-space:nowrap;cursor:pointer}
.routes a{padding:calc(13*var(--u)) calc(16*var(--u));border-radius:calc(14*var(--u));transition:background var(--t-s) var(--ease),color var(--t-s) var(--ease)}
.routes a:hover{background:#ffffff14}
.routes a.is-active{background:#8f64bc;box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) #0005}
.socials{display:flex;gap:calc(10*var(--u));align-items:center}
.social,.wallet{padding:calc(12*var(--u)) calc(17*var(--u));transition:transform var(--t-s) var(--ease),background var(--t-s) var(--ease)}
.social:hover,.wallet:hover{transform:translateY(-2px)}
.social[data-soon]{opacity:.6}
.wallet{color:#231332;background:linear-gradient(90deg,#ebc4ff,#ef8fe9);font-weight:700}
.menu-btn{display:none}
.day-ruler{position:relative;height:calc(58*var(--u));background:#ffffff0c;display:grid;grid-template-columns:repeat(7,1fr) 1.45fr;align-items:center;text-align:center;font-size:max(12px,calc(15*var(--u)));box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) #0003;box-sizing:border-box}
.day-ruler .today{margin:0 calc(12*var(--u));padding:calc(9*var(--u));border-radius:calc(13*var(--u));background:linear-gradient(90deg,#e3b6ff,#d78ddf);color:#251334;font-weight:700}
.count{font-family:var(--font-num);font-size:max(14px,calc(18*var(--u)));font-weight:700;font-variant-numeric:tabular-nums}
.day-indicator{position:absolute;left:0;bottom:calc(5*var(--u));height:max(2px,calc(3*var(--u)));width:var(--ind-w,12%);background:var(--mint);border-radius:2px;transform:translateX(var(--ind-x,0));box-shadow:0 0 calc(10*var(--u)) #55f1c8aa;transition:transform var(--t-l) var(--ease)}
.count.tick{animation:tick 160ms var(--ease)}
@keyframes tick{from{transform:translateY(calc(3*var(--u)));opacity:.6}to{transform:none;opacity:1}}
.nav-mobile{display:none}

/* ---------- footer F8 ---------- */
.site-footer{box-sizing:border-box;width:100%;min-height:calc(132*var(--u));padding:calc(20*var(--u)) calc(40*var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(30*var(--u));background:linear-gradient(100deg,#edc5ff,#e58ce2 58%,#c79cff);color:#281132;border-radius:calc(26*var(--u)) calc(26*var(--u)) 0 0;font-family:var(--font-body);box-shadow:0 calc(-12*var(--u)) calc(34*var(--u)) #0005}
.closing{font:700 calc(59*var(--u))/1 var(--font-display);letter-spacing:-.015em}
.footer-socials{display:flex;gap:calc(18*var(--u))}
.footer-socials a{min-width:calc(164*var(--u));padding:calc(20*var(--u)) calc(25*var(--u));text-align:center;border-radius:calc(18*var(--u));background:#2c183d;color:#fff;font-size:max(14px,calc(20*var(--u)));font-weight:700;box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) #35194655;transition:transform var(--t-s) var(--ease)}
.footer-socials a:hover{transform:translateY(-2px)}
.footer-socials a[data-soon]{opacity:.65}

/* ---------- wallet modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#10061a99}
.modal[hidden]{display:none}
.modal-card{box-sizing:border-box;width:min(92vw,calc(560*var(--u)),560px);min-width:min(92vw,320px);padding:calc(32*var(--u)) calc(36*var(--u));background:#3a2358f2;animation:pop var(--t-m) var(--ease)}
.modal-card h2{margin:0 0 14px;font:700 max(28px,calc(44*var(--u)))/1 var(--font-display)}
.wallet-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.wallet-list button{width:100%;display:flex;justify-content:space-between;padding:12px 16px;background:var(--surface-2);cursor:pointer;font-size:max(14px,calc(18*var(--u)))}
.wallet-list button:hover{background:#3d2a5f}
.wallet-note{min-height:1.4em;margin:0 0 12px;color:var(--text-muted);font-size:max(12px,calc(15*var(--u)))}
.chip-btn{padding:8px 20px;cursor:pointer}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- MOTION (DESIGN §10): lane wipe, glide, finish-tape draw ---------- */
.route-sweep{position:fixed;left:0;top:0;height:max(3px,calc(5*var(--u)));width:100%;z-index:60;background:linear-gradient(90deg,var(--mint),var(--magenta));transform:scaleX(0);transform-origin:left;pointer-events:none}
.route-sweep.run{animation:sweep var(--t-l) var(--ease)}
@keyframes sweep{0%{transform:scaleX(0);transform-origin:left;opacity:1}60%{transform:scaleX(1);transform-origin:left;opacity:1}61%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right;opacity:.6}}
main.is-leaving{opacity:1;transition:none}
.js [data-reveal]{opacity:0;transform:translateX(calc(-18*var(--u)))}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.js [data-grow]{transform:scaleX(0);transform-origin:left center}
.js [data-grow].in{transform:scaleX(1);transition:transform 640ms var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js [data-glide]{transform:translateX(calc(var(--from,-40)*var(--u)));opacity:0}
.js [data-glide].in{transform:none;opacity:1;transition:transform var(--t-l) var(--ease),opacity var(--t-s) linear}
[data-flash].flash{animation:flash 520ms var(--ease)}
@keyframes flash{0%{text-shadow:0 0 calc(14*var(--u)) var(--mint)}100%{text-shadow:none}}
[data-lift]{transition:transform var(--t-s) var(--ease),box-shadow var(--t-s) var(--ease)}
[data-lift]:hover{transform:translateY(-3px);box-shadow:0 calc(14*var(--u)) calc(28*var(--u)) #0006}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-grow],.js [data-glide]{opacity:1!important;transform:none!important}
}

/* ---------- mobile (<1024): own layout, fixed px ---------- */
@media (max-width:1023px){
  :root{--u:1px;--gutter-l:16px;--gutter-r:16px}
  .site-nav{height:auto;padding:12px 16px 12px}
  .nav-main{height:auto;gap:10px;flex-wrap:nowrap}
  .brand{flex:1;min-width:0;gap:8px}.brand img{width:96px;height:40px}.brand span{font-size:20px}
  .routes.nav-desktop{display:none!important}
  .socials{gap:6px}.social,.wallet,.menu-btn{padding:10px 12px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
  .wallet{display:none}
  .menu-btn{display:inline-flex}
  .nav-mobile{display:none;flex-direction:column;gap:4px;padding:8px 0;overflow:visible}
  .site-nav.is-open .nav-mobile{display:flex}
  .nav-mobile a{padding:12px 14px;border-radius:12px;font-size:16px;min-height:44px;display:flex;align-items:center}
  .nav-mobile a.is-active{background:#8f64bc}
  .day-ruler{height:48px;margin-top:10px;display:flex;overflow-x:auto;scrollbar-width:none;border-radius:16px}
  .day-ruler::-webkit-scrollbar{display:none}
  .day-ruler>span,.day-ruler>b{flex:0 0 auto;min-width:78px;padding:0 10px;line-height:48px;font-size:13px;white-space:nowrap}
  .day-ruler .today{margin:6px;padding:0 12px;line-height:36px;min-width:64px}
  .day-ruler>b{min-width:150px;font-size:16px}
  .day-indicator{display:none}
  .site-footer{flex-direction:column;align-items:flex-start;padding:24px 16px;border-radius:20px 20px 0 0;gap:18px}
  .closing{font-size:38px}
  .footer-socials a{min-width:120px;font-size:16px;padding:14px 18px}
}