@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --img-corner:url(/assets/img/corner.jpg);
  --img-cabinet:url(/assets/img/cabinet.jpg);
  --img-pl:url(/assets/img/pl.jpg);
  --img-training:url(/assets/img/training.jpg);
  --img-ucl:url(/assets/img/ucl.jpg);
  --img-logo:url(/assets/img/logo.png);
  --nazar-w:clamp(46px,4.2vw,64px);
  --bg:#000;
  --ink:#f4f2ee;
  --ink-dim:rgba(244,242,238,.58);
  --tape:#e2c22e;
  --tape-ink:#15130c;
  --pad:clamp(20px,3vw,44px);
  --num:clamp(6rem,min(26vw,44vh),30rem);
  --lbl:clamp(1.5rem,min(4vw,6.6vh),4.5rem);
  --tape-h:clamp(42px,4.4vw,66px);
  --px:0px;
  --py:0px;
  /* safe areas (notch, Dynamic Island, home indicator); 0 where the browser reports none */
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --nazar-string:clamp(22px,2.6vh,30px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{
  background:var(--bg);-webkit-text-size-adjust:100%;
}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- memory montage ---------- */
.montage{
  position:fixed;left:50%;top:50%;z-index:0;
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);
  transform:translate(-50%,-50%) scale(1.04);
  background:#000;pointer-events:none;overflow:hidden;
}
.ph{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h,auto);
  aspect-ratio:var(--ar);z-index:var(--z,1);opacity:var(--o,1);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(closest-side,#000 var(--ms,18%),rgba(0,0,0,.55) 55%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 var(--ms,18%),rgba(0,0,0,.55) 55%,transparent 100%);
  transform:translate(calc(var(--px) * var(--d,1)),calc(var(--py) * var(--d,1)));
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
  animation:reveal 1.6s ease both;animation-delay:calc(var(--i,0) * 120ms);
  will-change:transform,opacity;
}
.ph>i{
  display:block;width:100%;height:100%;
  background:var(--img) var(--op,50% 50%)/cover no-repeat;
  animation:drift var(--t,30s) ease-in-out infinite alternate;animation-delay:var(--td,0s);
  will-change:transform;
}
@keyframes reveal{from{opacity:0}to{opacity:var(--o,1)}}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(var(--dx,1.5%),var(--dy,-1%))}}

.corner{--img:var(--img-corner);--ar:900/1106}
.cabinet{--img:var(--img-cabinet);--ar:900/635}
.pl{--img:var(--img-pl);--ar:900/601}
.training{--img:var(--img-training);--ar:900/570}
.ucl{--img:var(--img-ucl);--ar:900/968}
.logo{--img:var(--img-logo);--ar:560/936;-webkit-mask-image:none;mask-image:none}
.logo>i{background-size:contain;animation:none}

/* landscape canvas 1600x900 */
.p1{--x:-16%;--y:-24%;--w:58%;--o:.95;--z:2;--d:1.1;--i:0;--t:34s;--dx:-1.5%;--dy:1%}
.p2{--x:18%;--y:-24%;--w:66%;--o:.7;--z:3;--d:.7;--i:1;--t:40s;--td:-12s}
.p3{--x:56%;--y:-28%;--w:50%;--o:.95;--z:4;--d:1.3;--i:2;--t:36s;--td:-5s;--dx:1%;--dy:1.5%}
.p4{--x:42%;--y:32%;--w:72%;--o:.9;--z:2;--d:.6;--i:3;--t:44s;--td:-20s}
.p5{--x:-22%;--y:34%;--w:70%;--o:.9;--z:3;--d:.8;--i:4;--t:38s;--td:-9s;--dx:-1%;--dy:-1.5%}
.p6{--x:40.5%;--y:41%;--w:11%;--o:.72;--z:6;--d:1.6;--i:5}

@media (orientation:portrait){
  .montage{width:max(100vw,56.25vh);height:max(100vh,177.78vw)}
  /* portrait canvas 900x1600 */
  .p1{--x:-30%;--y:-12%;--w:105%}
  .p2{--x:14%;--y:-2%;--w:110%;--o:.65}
  .p3{--x:18%;--y:28%;--w:92%}
  .p4{--x:-38%;--y:50%;--w:112%}
  .p5{--x:4%;--y:66%;--w:112%}
  .p6{--x:70%;--y:42%;--w:22%}
}

.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 50% at 50% 54%,rgba(0,0,0,.74) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.88) 100%);
}

/* ---------- crime scene tape ---------- */
.tape{
  position:fixed;z-index:2;left:50%;
  top:var(--tape-top,calc(50vh - var(--num) * .46 - var(--tape-h) * 1.15 - 14px));
  width:140vw;height:var(--tape-h);
  transform:translate(-50%,-50%) rotate(-5.5deg);
  display:flex;align-items:center;gap:0;overflow:hidden;white-space:nowrap;
  color:var(--tape-ink);
  background:
    linear-gradient(100deg,rgba(255,255,255,.17) 0 5%,transparent 5% 47%,rgba(0,0,0,.09) 47% 56%,transparent 56%) 0 0/340px 100% repeat-x,
    linear-gradient(80deg,transparent 0 62%,rgba(255,255,255,.1) 62% 66%,transparent 66%) 90px 0/530px 100% repeat-x,
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 30%,transparent 70%,rgba(0,0,0,.14)),
    var(--tape);
  border-block:2px solid rgba(0,0,0,.28);
  box-shadow:0 22px 48px -10px rgba(0,0,0,.75);
  pointer-events:none;
  animation:unroll 1.1s cubic-bezier(.2,.7,.2,1) both .25s;
}
.tape span{
  font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;
  font-size:calc(var(--tape-h) * .58);line-height:1;letter-spacing:.07em;
  padding:0 1.1em;flex:none;
}
.tape span::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:2.2em;vertical-align:.16em;background:currentColor;transform:rotate(45deg)}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
}

/* ---------- evil eye bead ---------- */
.nazar{
  position:fixed;top:0;right:calc(var(--pad) + var(--sar));z-index:5;
  width:var(--nazar-w);display:flex;flex-direction:column;align-items:center;
  transform-origin:50% 0;animation:sway 5.4s ease-in-out -1.6s infinite alternate;
  pointer-events:none;
}
.nazar i{display:block;width:1px;height:calc(var(--sat) + var(--nazar-string));background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.6))}
.nazar img{display:block;width:100%;height:auto;margin-top:-3px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.7))}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* ---------- stone menu ---------- */
.menu{position:fixed;z-index:6;top:calc(var(--pad) - 6px + var(--sat));left:calc(var(--pad) - 6px + var(--sal))}
.menu[hidden]{display:none}
.menu-btn{
  display:block;width:64px;height:44px;padding:4px 6px;margin:0;border:0;border-radius:10px;
  background:transparent;cursor:pointer;
  transition:background .2s ease,transform .25s cubic-bezier(.2,.7,.2,1);
}
.menu-btn img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.menu-btn:hover,.menu-btn:focus-visible{background:rgba(255,255,255,.07);outline:none}
.menu-btn:focus-visible{box-shadow:0 0 0 2px var(--tape)}
.menu.open .menu-btn{transform:rotate(-8deg)}
.menu-list{
  position:absolute;left:6px;top:calc(100% + 6px);min-width:230px;max-width:calc(100vw - var(--pad) * 2 - var(--sal) - var(--sar));margin:0;padding:6px;list-style:none;
  background:rgba(12,12,12,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.menu.open .menu-list{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.menu-list button{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px 10px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-dim);font:500 15px/1.2 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.menu-list button::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none;transition:background .15s ease}
.menu-list button:hover,.menu-list button:focus-visible{background:rgba(255,255,255,.07);color:var(--ink);outline:none}
.menu-list button[aria-current="true"]{color:var(--ink)}
.menu-list button[aria-current="true"]::before{background:var(--tape)}
.comp{margin:clamp(14px,2.4vh,24px) 0 0;color:var(--ink-dim);font-size:clamp(1rem,.9rem + .4vw,1.25rem);line-height:1;letter-spacing:.01em;transition:opacity .25s ease}
.comp.swap{opacity:0}

/* ---------- page ---------- */
.page{
  position:relative;z-index:4;min-height:100vh;min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:16px;
  padding:calc(var(--pad) + var(--sat)) calc(var(--pad) + var(--sar)) calc(var(--pad) + var(--sab)) calc(var(--pad) + var(--sal));
}

.answer{grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(clamp(24px,5vh,56px) + 3vh) 0 clamp(24px,5vh,56px)}
.stats{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(2rem,7.5vw,9rem)}

.stat{display:flex;flex-direction:column;align-items:center;min-width:0}
.num{
  font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;
  font-size:var(--num);line-height:.86;letter-spacing:-.025em;text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
}
.lbl{font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;font-size:var(--lbl);line-height:1;letter-spacing:.16em;padding-left:.16em;margin-top:.45em}
.bottom{grid-column:1;grid-row:2;align-self:end;opacity:0;animation:fade .9s ease .35s both}
.bottom{display:flex;flex-direction:column;gap:3px;color:var(--ink-dim);font-size:clamp(.8rem,.75rem + .2vw,.9rem);line-height:1.4}
.bottom p{margin:0}
.bottom .club{color:var(--ink);font-weight:500;font-size:1.1em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes fade{to{opacity:1}}

/* ---------- share ---------- */
.share-btn{
  grid-column:2;grid-row:2;align-self:end;position:relative;
  display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;margin:0;padding:0 18px 0 15px;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:rgba(12,12,12,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:var(--ink);font:500 15px/1 Inter,system-ui,sans-serif;cursor:pointer;
  opacity:0;animation:fade .9s ease .35s both;
  transition:background .2s ease;
}
.share-btn[hidden]{display:none}
.share-btn svg{display:block;flex:none}
.share-btn:hover{background:rgba(40,40,40,.8)}
/* transparent outline: forced colors drop the box-shadow ring but paint the outline */
.share-btn:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--tape)}

.share-dialog{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:calc(var(--pad) + var(--sat)) calc(var(--pad) + var(--sar)) calc(var(--pad) + var(--sab)) calc(var(--pad) + var(--sal));
  background:transparent;color:var(--ink);overflow:hidden;
}
.share-dialog[open]{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  justify-items:center;align-items:center;row-gap:16px;
  animation:share-in .24s cubic-bezier(.2,.7,.2,1);
}
/* literal colours: ::backdrop inherits custom properties only in recent engines */
.share-dialog::backdrop{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.share-dialog[open]::backdrop{animation:share-fade .24s ease}
html:has(.share-dialog[open]){overflow:hidden}
.share-close{
  position:absolute;z-index:1;top:calc(var(--sat) + 8px);right:calc(var(--sar) + 8px);
  display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  background:rgba(12,12,12,.72);color:var(--ink);cursor:pointer;transition:background .2s ease;
}
.share-close svg{display:block}
.share-close:hover{background:rgba(40,40,40,.85)}
.share-card{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:9/16;
  border-radius:16px;background:rgba(255,255,255,.05);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -24px rgba(0,0,0,.9);
}
.share-card[hidden]{display:none}
.share-panel{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.share-status{margin:0;min-height:1.4em;max-width:36ch;color:var(--ink-dim);font-size:14px;line-height:1.4;text-align:center}
.share-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share-action{
  min-height:48px;margin:0;padding:0 22px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;background:transparent;
  color:var(--ink);font:500 15px/1.2 Inter,system-ui,sans-serif;cursor:pointer;
  transition:background .2s ease,opacity .2s ease;
}
.share-action[hidden]{display:none}
.share-action:hover:not(:disabled){background:rgba(255,255,255,.08)}
.share-action-primary{border-color:var(--tape);background:var(--tape);color:var(--tape-ink)}
.share-action-primary:hover:not(:disabled){background:#ecd04a}
.share-action:disabled{opacity:.45;cursor:default}
.share-close:focus-visible,.share-action:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #000,0 0 0 4px var(--tape)}
@keyframes share-in{from{opacity:0;transform:scale(.97)}}
@keyframes share-fade{from{opacity:0}}
@media (orientation:portrait){
  /* the card can fill the width here, so it starts below the close button (top + 44px + gap) */
  .share-dialog{padding-top:max(calc(var(--pad) + var(--sat)),calc(var(--sat) + 60px))}
}

@media (max-width:640px) and (orientation:portrait){
  /* 29vw keeps three two-digit numbers inside a 280px-wide phone */
  :root{--num:clamp(4.5rem,29vw,8.5rem);--lbl:clamp(1rem,5.8vw,1.6rem);--tape-h:clamp(34px,10vw,44px);--tape-top:calc(var(--sat) + 14%)}
  :root{--nazar-w:44px;--nazar-string:30px}
  .menu{top:calc(28px + var(--sat))}
  .menu-btn{width:56px;height:44px}
  .answer{padding:2vh 0 6vh}
  .stats{gap:clamp(.9rem,5.5vw,1.6rem)}
  .lbl{letter-spacing:.12em;padding-left:.12em}
  .lbl{margin-top:.3em}
  .tape{transform:translate(-50%,-50%) rotate(-7deg)}
}

@media (max-width:379px){
  /* icon only; the label stays as the accessible name */
  .share-btn{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .share-btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (orientation:landscape) and (max-height:520px){
  :root{--pad:clamp(12px,3.2vh,22px);--num:min(34vh,16vw);--lbl:clamp(.95rem,6vh,1.5rem);--tape-h:clamp(28px,8vh,38px);--nazar-w:38px;--nazar-string:12px}
  /* the tape runs across the top, behind the menu stone and the bead, clear of the numbers */
  .tape{top:calc(var(--sat) + var(--pad) + 22px);transform:translate(-50%,-50%) rotate(-2.5deg)}
  .answer{padding:calc(var(--tape-h) + 34px) 0 4px}
  .stats{gap:clamp(1.25rem,5vw,4rem)}
  .lbl{margin-top:.3em}
  .comp{margin-top:6px}
  .bottom{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;font-size:.75rem}
  /* the actions sit to the right of the card */
  .share-dialog[open]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px}
  .share-card{flex:none;height:100%;max-height:none}
  .share-panel{align-items:flex-start;max-width:260px}
  .share-status{text-align:left}
  .share-actions{flex-direction:column;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .ph,.bottom,.tape,.nazar,.share-btn{animation:none;opacity:1}
  .ph{opacity:var(--o,1)}
  .ph>i{animation:none}
  .ph{transition:none}
  .share-dialog[open],.share-dialog[open]::backdrop{animation:none}
}