/* Challenges — styles shared by the student page and the admin panel.
   Same navy base, glass panels and light/dark tokens as iielab.xyz (theme key
   'iielab-theme' is shared), pink accent #f2597a, big rounded touch targets.
   Cards keep their own fixed palette in both themes, like real trading cards. */
:root{
  --bg:#0b1020; --bg2:#0e1530; --surface:#141c38; --surface2:#1b2547; --surface3:#24305a;
  --border:#2a3557; --text:#eef1fb; --muted:#97a3c2;
  --accent:#f2597a; --accent2:#ffb347; --gold:#ffc93c; --blue:#5b8cff; --teal:#22d3aa; --violet:#a77bff;
  --ok:#2fd27a; --warn:#ffb02e; --danger:#ff5b6e;
  --glass:color-mix(in srgb,var(--surface) 62%,transparent);
  --shadow:0 18px 40px rgba(0,0,0,.35); --r:20px;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --on-accent:#fff;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f6fc; --bg2:#eaf0fb; --surface:#ffffff; --surface2:#f3f6fd; --surface3:#e7edf9;
  --border:#dde4f2; --text:#16203a; --muted:#5b6a88;
  --accent:#e23a62; --accent2:#f08a1c; --gold:#e8a400; --blue:#2f66ff; --teal:#0fae87; --violet:#7c4dff;
  --ok:#11a85a; --warn:#d98a00; --danger:#e23a50;
  --glass:color-mix(in srgb,var(--surface) 80%,transparent);
  --shadow:0 16px 36px rgba(30,50,90,.13);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f6fc; --bg2:#eaf0fb; --surface:#ffffff; --surface2:#f3f6fd; --surface3:#e7edf9;
    --border:#dde4f2; --text:#16203a; --muted:#5b6a88;
    --accent:#e23a62; --accent2:#f08a1c; --gold:#e8a400; --blue:#2f66ff; --teal:#0fae87; --violet:#7c4dff;
    --ok:#11a85a; --warn:#d98a00; --danger:#e23a50;
    --glass:color-mix(in srgb,var(--surface) 80%,transparent);
    --shadow:0 16px 36px rgba(30,50,90,.13);
    color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1000px 560px at 88% -8%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    radial-gradient(900px 520px at 0% 4%, color-mix(in srgb,var(--violet) 14%,transparent), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  color:var(--text);min-height:100vh;min-height:100dvh;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--blue)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}
.sp{flex:1}
.muted{color:var(--muted)}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.top-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
.home{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,#5b8cff,#22d3aa);opacity:.9;transition:.15s}
.home:hover{opacity:1;transform:translateY(-1px)}
.home svg{stroke:none}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);min-width:0}
.logo-mark{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.logo-mark svg{width:24px;height:24px;stroke-width:2.2}
.logo-txt{font-family:var(--round);font-weight:900;font-size:22px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-txt b{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--glass);
  display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;color:var(--text);text-decoration:none}
.icon-btn:hover{background:var(--surface2)}
.me-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--border);
  background:var(--glass);font-weight:800;min-height:42px;max-width:46vw}
.me-chip .av{width:34px;height:34px;font-size:21px}
.me-chip .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-chip .pts{color:var(--gold);white-space:nowrap}
.out-pill{display:flex;align-items:center;gap:6px;min-height:42px;padding:4px 14px;border-radius:999px;font-weight:800;flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--danger) 40%,var(--border));background:color-mix(in srgb,var(--danger) 10%,var(--glass));color:var(--text);transition:.15s}
.out-pill:hover{background:color-mix(in srgb,var(--danger) 20%,var(--surface2))}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;line-height:1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 25%,var(--surface2)),color-mix(in srgb,var(--violet) 25%,var(--surface2)));
  border:2px solid color-mix(in srgb,var(--accent) 35%,var(--border))}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);
  background:var(--surface2);border-radius:14px;padding:11px 17px;font-size:15px;font-weight:750;line-height:1.15;
  text-decoration:none;color:var(--text);transition:transform .12s,background .15s,filter .15s,border-color .15s;
  min-height:46px;white-space:nowrap}
.btn:hover{background:var(--surface3)}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px}
.btn.sm{min-height:36px;padding:7px 12px;font-size:13.5px;border-radius:10px}
.btn.sm svg{width:16px;height:16px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:var(--on-accent);
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.green{background:linear-gradient(135deg,#2fd27a,#16b4a0);border-color:transparent;color:#05261a;box-shadow:0 8px 22px rgba(47,210,122,.25)}
.btn.green:hover{filter:brightness(1.06)}
.btn.blue{background:linear-gradient(135deg,var(--blue),#3b6cff);border-color:transparent;color:#fff}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 14%,var(--surface2))}
.btn.ghost{background:transparent}
.btn.big{min-height:58px;font-size:18px;border-radius:17px;padding:13px 24px;font-family:var(--round);font-weight:850}
.btn.big svg{width:23px;height:23px}
.btn.huge{min-height:68px;font-size:21px;border-radius:20px;padding:16px 30px;font-family:var(--round);font-weight:900}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none;filter:grayscale(.4)}
.btn.wide{width:100%}

/* ---------------------------------------------------------------- page */
.wrap{max-width:1280px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left));position:relative;z-index:1}
.notice{margin-top:16px;padding:13px 16px;border-radius:16px;font-weight:700;display:flex;gap:10px;align-items:center;
  background:color-mix(in srgb,var(--warn) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.panel{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.foot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:13px;padding:10px 16px 28px}
.foot a{color:inherit}
h1,h2,h3{font-family:var(--round);letter-spacing:-.3px}
.hl{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------------------------------------------------------- welcome */
.welcome{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding:34px 0 10px}
.welcome h1{font-size:clamp(34px,5.6vw,60px);font-weight:900;line-height:1.02;letter-spacing:-1.5px}
.welcome .lead{font-size:clamp(16px,2vw,20px);color:var(--muted);margin-top:12px;max-width:520px}
.codebox{margin-top:26px;padding:22px;max-width:520px}
.codebox label{display:block;font-family:var(--round);font-weight:850;font-size:19px;margin-bottom:10px}
.code-row{display:flex;gap:10px}
.code-in{flex:1;min-width:0;height:68px;border-radius:18px;border:2px solid var(--border);background:var(--surface);
  font-family:var(--round);font-size:32px;font-weight:900;letter-spacing:.22em;text-align:center;text-transform:lowercase;padding:0 12px}
.code-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.code-in::placeholder{color:color-mix(in srgb,var(--muted) 55%,transparent);letter-spacing:.12em;font-size:26px}
.code-err{color:var(--danger);font-weight:750;margin-top:10px;min-height:1.5em}
.code-err.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.code-hint{color:var(--muted);font-size:14px;margin-top:2px}
.fan{position:relative;height:clamp(300px,40vw,430px);display:flex;align-items:center;justify-content:center}
.fan .ccard{position:absolute;--w:clamp(150px,19vw,230px);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.fan .ccard:nth-child(1){transform:translateX(-62%) rotate(-13deg) translateY(16px)}
.fan .ccard:nth-child(2){transform:translateY(-12px);z-index:2}
.fan .ccard:nth-child(3){transform:translateX(62%) rotate(13deg) translateY(16px)}
.fan:hover .ccard:nth-child(1){transform:translateX(-74%) rotate(-17deg) translateY(10px)}
.fan:hover .ccard:nth-child(3){transform:translateX(74%) rotate(17deg) translateY(10px)}
.decks-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.deck-tile{padding:18px;display:flex;gap:14px;align-items:flex-start;border-left:6px solid var(--cat)}
.deck-tile .ico{font-size:34px;line-height:1}
.deck-tile h3{font-size:19px}
.deck-tile p{color:var(--muted);font-size:14.5px}
.deck-tile .cnt{font-weight:800;font-size:13px;color:var(--cat);margin-top:4px;filter:brightness(1.15)}

/* ---------------------------------------------------------------- home */
.player{display:flex;align-items:center;gap:18px;padding:22px;margin-top:22px;flex-wrap:wrap}
.player .av.big{width:84px;height:84px;font-size:50px;cursor:pointer;transition:transform .15s;border-width:3px}
.player .av.big:hover{transform:scale(1.06) rotate(-4deg)}
.player h1{font-size:clamp(26px,4vw,38px);font-weight:900;line-height:1.1}
.player .sub{color:var(--muted);font-weight:650}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.stat{min-width:96px;padding:10px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);text-align:center}
.stat b{display:block;font-family:var(--round);font-size:26px;font-weight:900;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.stat.pts b{color:var(--gold)}
.stat.rank b{color:var(--teal)}
.next{display:flex;align-items:center;gap:20px;padding:18px 22px;margin-top:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),color-mix(in srgb,var(--violet) 16%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:var(--r);cursor:pointer;flex-wrap:wrap}
.next .ccard{--w:112px}
.next .txt{flex:1;min-width:200px}
.next .kick{font-weight:850;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.next h2{font-size:clamp(21px,3vw,28px);font-weight:900;line-height:1.15}
.next p{color:var(--muted)}
.next.all-done{cursor:default}
.tabs{display:flex;gap:8px;margin:24px 0 6px;flex-wrap:wrap}
.tab{border:1px solid var(--border);background:var(--glass);border-radius:14px;padding:10px 18px;font-weight:850;font-family:var(--round);font-size:17px;min-height:48px}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.deck{margin-top:22px}
.deck-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.deck-head .ico{font-size:30px;line-height:1}
.deck-head h2{font-size:24px;font-weight:900}
.deck-head .bar{flex:1;min-width:120px;max-width:320px;height:12px;border-radius:99px;background:var(--surface3);overflow:hidden}
.deck-head .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cat),color-mix(in srgb,var(--cat) 50%,#fff))}
.deck-head .cnt{font-weight:800;color:var(--muted);white-space:nowrap}
.deck-blurb{color:var(--muted);margin:-6px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;justify-items:center}
/* card text scales with --w, so --w must never be a % (it would resolve against font-size) */
.grid .ccard{--w:180px}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- leaderboard */
.ladder-box{margin-top:18px;padding:18px 20px 22px}
.ladder-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ladder-head h2{font-size:clamp(22px,3vw,28px);font-weight:900}
.ladder{list-style:none;position:relative;margin:16px 4px 0;padding:6px 22px}
.ladder::before,.ladder::after{content:"";position:absolute;top:-10px;bottom:-10px;width:10px;border-radius:10px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}
.ladder::before{left:0}
.ladder::after{right:0}
.rung{display:grid;grid-template-columns:44px minmax(80px,170px) 1fr auto;align-items:center;gap:12px;padding:10px 4px;position:relative}
.rung+.rung::before{content:"";position:absolute;left:-22px;right:-22px;top:-3px;height:6px;border-radius:6px;
  background:color-mix(in srgb,var(--accent2) 45%,var(--surface3))}
.rung .rk{font-family:var(--round);font-weight:900;font-size:20px;text-align:center;color:var(--muted)}
.rung.lead .rk,.rung .rk:not(:empty){line-height:1}
.rung .nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.rung .nm b{font-family:var(--round);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rung .nm small{color:var(--accent);font-weight:850;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.rung .track{position:relative;height:34px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--surface3) 0 18px,color-mix(in srgb,var(--surface3) 70%,var(--surface)) 18px 36px);
  border:1px solid var(--border);font-size:16px}
.rung .fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent2));
  animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.rung .runner{position:absolute;top:50%;width:2.4em;height:2.4em;margin-top:-1.2em;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1;
  background:var(--surface);border:3px solid var(--accent2);box-shadow:0 4px 12px rgba(0,0,0,.25);animation:climb 1.1s cubic-bezier(.2,.8,.2,1) both;z-index:1}
.rung .crown{position:absolute;top:-.95em;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:15px}
.rung .flag{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.6}
.rung .sc{text-align:right;white-space:nowrap}
.rung .sc b{font-family:var(--round);font-size:22px;font-weight:900;color:var(--gold)}
.rung .sc small{color:var(--muted);font-weight:750}
.rung.me .track{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.rung.lead .runner{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 30%,transparent),0 4px 12px rgba(0,0,0,.25)}
@keyframes grow{from{width:0}}
@keyframes climb{from{left:0}}
.board{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.brow{display:grid;grid-template-columns:52px 54px 1fr auto;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:transform .12s}
.brow:hover{transform:translateX(3px)}
.brow.me{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.brow .rk{font-family:var(--round);font-size:26px;font-weight:900;text-align:center;color:var(--muted)}
.brow .rk.medal{font-size:34px}
.brow .av{width:50px;height:50px;font-size:30px}
.brow .who b{font-family:var(--round);font-size:19px;font-weight:850;display:block;line-height:1.2}
.brow .minis{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}
.mini{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:750;color:var(--muted)}
.mini i{width:46px;height:7px;border-radius:9px;background:var(--surface3);overflow:hidden;display:block}
.mini i em{display:block;height:100%;background:var(--cat)}
.brow .score{text-align:right}
.brow .score b{font-family:var(--round);font-size:28px;font-weight:900;color:var(--gold);line-height:1}
.brow .score span{display:block;font-size:12.5px;color:var(--muted);font-weight:750}
.brow-cards{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}
.brow-cards .ccard{--w:92px;cursor:default}
.brow-cards .none{color:var(--muted);font-size:14px}

/* ---------------------------------------------------------------- challenge page */
.crumbs{display:flex;align-items:center;gap:10px;margin:18px 0 6px;flex-wrap:wrap}
.detail{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:30px;align-items:start;margin-top:10px}
.d-left{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;gap:16px}
.d-left .ccard{--w:min(330px,84vw);cursor:default}
.d-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.mission{padding:20px 22px}
.mission .kick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:850;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:850;text-transform:none;letter-spacing:0;
  background:color-mix(in srgb,var(--c,var(--accent)) 16%,transparent);color:var(--c,var(--accent));border:1px solid color-mix(in srgb,var(--c,var(--accent)) 35%,transparent)}
.mission h1{font-size:clamp(28px,4.4vw,42px);font-weight:900;line-height:1.08;margin-top:6px}
.mission .sum{font-size:clamp(18px,2.2vw,22px);font-weight:700;margin-top:8px;line-height:1.35}
.sec{padding:18px 22px}
.sec h2{font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:9px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.steps li::before{content:counter(s);flex-shrink:0;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-family:var(--round);
  background:color-mix(in srgb,var(--blue) 18%,var(--surface2));color:var(--blue)}
.musts{display:flex;flex-direction:column;gap:9px}
.must{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;cursor:pointer;font-size:16.5px;font-weight:650;
  background:color-mix(in srgb,var(--danger) 9%,var(--surface2));border:2px solid color-mix(in srgb,var(--danger) 30%,transparent);transition:.15s;user-select:none}
.must input{appearance:none;-webkit-appearance:none;width:28px;height:28px;border-radius:9px;border:2.5px solid color-mix(in srgb,var(--danger) 60%,var(--border));flex-shrink:0;display:grid;place-items:center;background:var(--surface)}
.must input:checked{background:var(--ok);border-color:var(--ok)}
.must input:checked::after{content:"✓";color:#fff;font-weight:900;font-size:18px}
.must.on{background:color-mix(in srgb,var(--ok) 12%,var(--surface2));border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.must b{color:var(--danger)}
.must.on b{color:var(--ok)}
.must-note{font-size:14px;color:var(--muted);margin-top:8px}
.tips{display:flex;gap:12px;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--gold) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);font-size:16px}
.tips .ico{font-size:26px;line-height:1}
.linkbtn{align-self:flex-start}

.handin{padding:20px 22px;border:2px solid color-mix(in srgb,var(--accent) 35%,var(--border))}
.handin h2{font-size:22px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px 16px;border-radius:18px;cursor:pointer;
  border:3px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--surface));transition:.15s;position:relative}
.drop:hover,.drop.over{background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:var(--accent)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop svg{width:40px;height:40px;color:var(--accent)}
.drop b{font-family:var(--round);font-size:19px}
.drop span{color:var(--muted);font-size:14px}
.stage{position:relative;height:300px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 30%,var(--surface2),var(--surface));border:1px solid var(--border);margin-top:12px}
.stage canvas{width:100%!important;height:100%!important;display:block;touch-action:none}
.stage .busy{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--muted)}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.sizecheck{margin-top:12px;padding:13px 16px;border-radius:14px;font-weight:750;display:flex;gap:10px;align-items:center;font-size:16px}
.sizecheck .big{font-size:24px}
.sizecheck.good{background:color-mix(in srgb,var(--ok) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.sizecheck.bad{background:color-mix(in srgb,var(--warn) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.sizecheck small{display:block;font-weight:600;color:var(--muted);font-size:13.5px}
.filepill{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);font-weight:700}
.filepill span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fields{display:grid;gap:12px;margin-top:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-weight:800;font-size:15px}
.fld>span small{font-weight:600;color:var(--muted)}
.fld input,.fld textarea,.fld select{border:2px solid var(--border);background:var(--surface);border-radius:13px;padding:11px 13px;font-size:16px;min-height:48px;width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.fld textarea{resize:vertical;min-height:70px}
.time-in{display:flex;align-items:center;gap:10px}
.time-in input{max-width:140px;font-size:22px;font-weight:900;font-family:var(--round);text-align:center}
.photo-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.photo-row img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.go-row{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.go-hint{color:var(--muted);font-weight:700;text-align:center;font-size:14.5px}
.err{color:var(--danger);font-weight:750;text-align:center}
.prog{height:10px;border-radius:99px;background:var(--surface3);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}

.result{padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.result .big-ico{font-size:58px;line-height:1}
.result h2{font-size:28px;font-weight:900}
.result p{color:var(--muted);font-size:16.5px;max-width:520px}
.result.got{border:2px solid color-mix(in srgb,var(--gold) 55%,var(--border));background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 14%,var(--surface)),var(--glass))}
.result.redo{border:2px solid color-mix(in srgb,var(--danger) 45%,var(--border))}
.result.wait{border:2px solid color-mix(in srgb,var(--warn) 45%,var(--border))}
.result .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bigscore{font-family:var(--round);font-weight:900;font-size:64px;line-height:1;color:var(--gold)}
.bigscore small{font-size:28px;color:var(--muted)}
.feedback{padding:14px 18px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);font-size:17px;font-weight:650;max-width:560px;text-align:left;white-space:pre-line}
.feedback b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.mywork{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.mywork img{width:150px;height:150px;object-fit:contain;border-radius:14px;background:#eef2fb;border:1px solid var(--border);cursor:zoom-in}
.facts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.locked-box{padding:30px 22px;text-align:center}
.locked-box .big-ico{font-size:58px}
.locked-box h2{font-size:26px;margin:6px 0}

/* ---------------------------------------------------------------- dialogs, toasts */
dialog.dlg{margin:auto;border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text);padding:0;
  width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:var(--shadow)}
dialog.dlg::backdrop{background:rgba(5,8,20,.6);backdrop-filter:blur(3px)}
.dlg-head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.dlg-head h2{font-size:21px;font-weight:900;flex:1}
.dlg-body{padding:8px 18px 18px}
.dlg-foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px 18px;flex-wrap:wrap}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px}
.avatars button{font-size:36px;height:66px;border-radius:16px;border:2px solid var(--border);background:var(--surface2);transition:.12s}
.avatars button:hover{transform:scale(1.08)}
.avatars button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface2))}
.zoom img{width:100%;max-height:75dvh;object-fit:contain;display:block;border-radius:14px;background:#eef2fb}
.toasts{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,calc(100vw - 24px))}
.toast{pointer-events:auto;padding:13px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:750;animation:toastIn .3s both;text-align:center}
.toast.good{border-color:color-mix(in srgb,var(--ok) 50%,var(--border))}
.toast.bad{border-color:color-mix(in srgb,var(--danger) 50%,var(--border))}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}}
#confetti{position:fixed;inset:0;z-index:90;pointer-events:none;width:100%;height:100%}

/* ================================================================ the card */
.ccard{--w:180px;--rc:#d7deea;width:var(--w);aspect-ratio:5/7;font-size:calc(var(--w) / 14);perspective:1100px;position:relative;flex-shrink:0;
  user-select:none;-webkit-user-select:none;border-radius:.85em;transition:transform .2s cubic-bezier(.2,.8,.2,1);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.25}
button.ccard,.ccard.click{cursor:pointer;border:0;background:none;padding:0;color:inherit;text-align:left}
.ccard.click:hover{transform:translateY(-5px) rotate(-.6deg)}
.ccard.r-uncommon{--rc:#4be38f}
.ccard.r-rare{--rc:#4aa8ff}
.ccard.r-epic{--rc:#c084ff}
.ccard.r-legendary{--rc:#ffcf3f}
.cc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ccard.tilting .cc-inner{transition:transform .08s linear}
.ccard.s-locked .cc-inner{transform:rotateY(180deg)}
.cc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:.85em;overflow:hidden}
.cc-front{display:flex;flex-direction:column;gap:.3em;padding:.42em;color:#fff;border:.2em solid var(--rc);
  background:linear-gradient(155deg,color-mix(in srgb,var(--cat) 62%,#fff) 0%,var(--cat) 36%,color-mix(in srgb,var(--cat) 52%,#14102c) 100%);
  box-shadow:0 .55em 1.3em rgba(0,0,0,.32),inset 0 0 0 .07em rgba(255,255,255,.35)}
.r-legendary .cc-front{box-shadow:0 0 1.1em rgba(255,207,63,.6),0 .55em 1.3em rgba(0,0,0,.32),inset 0 0 0 .07em rgba(255,255,255,.4)}
.r-epic .cc-front{box-shadow:0 0 .9em rgba(192,132,255,.45),0 .55em 1.3em rgba(0,0,0,.32),inset 0 0 0 .07em rgba(255,255,255,.35)}
.cc-head{display:flex;align-items:center;gap:.3em;background:rgba(12,10,32,.32);border-radius:.5em;padding:.22em .3em;min-width:0}
.cc-code{min-width:1.55em;height:1.55em;padding:0 .2em;border-radius:.42em;background:#fff;color:color-mix(in srgb,var(--cat) 80%,#000);font-weight:900;
  display:grid;place-items:center;font-size:.92em;font-family:var(--round);flex-shrink:0}
.cc-title{flex:1;min-width:0;font-weight:850;font-size:.9em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--round);text-shadow:0 .06em .12em rgba(0,0,0,.35)}
.cc-pts{display:flex;flex-direction:column;align-items:center;line-height:.95;flex-shrink:0;padding:.16em .32em;border-radius:.45em;
  background:linear-gradient(160deg,#fff3b8,#ffc93c 60%,#f0a400);color:#4a2c00}
.cc-pts b{font-size:.92em;font-weight:900;font-family:var(--round)}
.cc-pts small{font-size:.45em;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.cc-art{flex:1;min-height:0;border-radius:.55em;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%,#fff 0%,color-mix(in srgb,var(--cat) 16%,#eef2fb) 72%);
  box-shadow:inset 0 0 0 .1em rgba(255,255,255,.6),inset 0 -.5em 1em rgba(0,0,0,.08)}
.cc-art img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.cc-art img.cover{object-fit:cover}
.cc-meta{display:flex;justify-content:space-between;align-items:center;font-size:.64em;padding:0 .15em;gap:.4em}
.cc-stars{color:#ffe066;letter-spacing:.04em;text-shadow:0 .08em 0 rgba(0,0,0,.3);font-size:1.15em;white-space:nowrap}
.cc-rarity{font-weight:900;text-transform:uppercase;letter-spacing:.07em;padding:.12em .55em;border-radius:99px;background:var(--rc);color:#1a1430;white-space:nowrap}
.cc-sum{font-size:.58em;line-height:1.35;background:rgba(255,255,255,.93);color:#1c2340;border-radius:.55em;padding:.45em .6em;font-weight:650}
.cc-foot{display:flex;justify-content:space-between;gap:.4em;font-size:.56em;font-weight:850;padding:0 .2em;opacity:.95;white-space:nowrap;overflow:hidden}
.cc-time{flex-shrink:0}
.cc-shine{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;border-radius:inherit;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),transparent 42%),
    linear-gradient(115deg,transparent 18%,rgba(255,60,170,.55) 32%,rgba(60,255,230,.55) 48%,rgba(255,235,60,.55) 64%,transparent 80%);
  background-size:100% 100%,260% 260%;background-position:center,var(--mx,50%) var(--my,50%);transition:opacity .3s}
.s-got .cc-shine{opacity:.65;animation:holo 7s linear infinite}
.s-got.tilting .cc-shine{animation:none;opacity:.9}
@keyframes holo{0%{background-position:center,0% 0%}50%{background-position:center,100% 100%}100%{background-position:center,0% 0%}}
.cc-stamp{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-11deg);font-size:.62em;font-weight:900;padding:.35em .7em;border-radius:.4em;
  border:.18em solid;background:rgba(255,255,255,.94);text-transform:uppercase;white-space:nowrap;letter-spacing:.03em;box-shadow:0 .3em .8em rgba(0,0,0,.25);font-family:var(--round)}
.st-wait{color:#a35f00;border-color:#ffb02e}
.st-redo{color:#cf2c4a;border-color:#ff5b6e}
.cc-score{position:absolute;right:.5em;bottom:1.9em;width:2.6em;height:2.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:.04em;
  background:radial-gradient(circle at 35% 30%,#fff7c9,#ffc93c 55%,#dd9200);color:#3d2500;font-family:var(--round);box-shadow:0 .25em .6em rgba(0,0,0,.35),inset 0 0 0 .12em rgba(255,255,255,.6)}
.cc-score b{font-size:1.05em;font-weight:900}
.cc-score small{font-size:.48em;font-weight:900;margin-top:.5em}
.cc-earned{position:absolute;left:.5em;bottom:2.2em;background:#22d3aa;color:#03261c;font-weight:900;font-size:.68em;border-radius:99px;padding:.15em .55em;box-shadow:0 .2em .5em rgba(0,0,0,.25);font-family:var(--round)}
.cc-new{position:absolute;top:2.5em;right:-.15em;background:#ff3d6e;color:#fff;font-weight:900;font-size:.62em;padding:.22em .65em;border-radius:.4em 0 0 .4em;
  box-shadow:0 .2em .5em rgba(0,0,0,.3);font-family:var(--round);animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.2em)}}
.cc-back{transform:rotateY(180deg);border:.2em solid color-mix(in srgb,var(--cat) 50%,#fff);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 .55em,transparent .55em 1.1em),
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--cat) 70%,#1d1840) 0,#171433 78%);
  box-shadow:0 .55em 1.3em rgba(0,0,0,.32)}
.cc-back-in{position:absolute;inset:.55em;border:.1em dashed rgba(255,255,255,.32);border-radius:.6em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;color:#fff;text-align:center;padding:.5em}
.cc-back-ico{font-size:2.1em;line-height:1;filter:drop-shadow(0 .1em .2em rgba(0,0,0,.4))}
.cc-back-code{font-size:1.7em;font-weight:900;font-family:var(--round);line-height:1;color:color-mix(in srgb,var(--cat) 45%,#fff)}
.cc-back-pts{font-size:.7em;font-weight:850;opacity:.85}
.cc-back-txt{font-size:.6em;opacity:.85;line-height:1.3;font-weight:650}
.ccard.s-locked.click:hover{transform:rotate(-2deg)}
.ccard.is-next .cc-front{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 1.4em color-mix(in srgb,var(--cat) 85%,#fff),0 .55em 1.3em rgba(0,0,0,.32),inset 0 0 0 .07em rgba(255,255,255,.35)}}
.ccard.flip-in .cc-inner{animation:flipIn 1.1s .25s both cubic-bezier(.3,1.4,.5,1)}
@keyframes flipIn{from{transform:rotateY(180deg) scale(.9)}to{transform:rotateY(0) scale(1)}}
.ccard.pop{animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6) rotate(-8deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .ccard,.cc-inner,.ccard *{animation:none!important;transition:none!important}
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 860px){
  .welcome{grid-template-columns:1fr;gap:10px;padding-top:22px}
  .fan{order:-1;height:250px}
  .fan .ccard{--w:150px}
  .detail{grid-template-columns:1fr}
  .d-left{position:static}
  .stats{margin-left:0;width:100%}
  .stat{flex:1;min-width:0}
}
@media (max-width: 560px){
  .logo-txt{font-size:19px}
  .me-chip .nm{display:none}
  .out-pill{padding:4px 11px}
  .out-pill .txt{display:none}
  .ladder{padding:4px 16px}
  .rung+.rung::before{left:-16px;right:-16px}
  .rung{grid-template-columns:30px 1fr auto;gap:8px;row-gap:6px}
  .rung .track{grid-column:1/-1;order:3}
  .rung .rk{font-size:18px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid .ccard{--w:min(180px,calc((100vw - 44px) / 2))}
  .brow{grid-template-columns:34px 44px 1fr auto;gap:8px;padding:10px 12px}
  .brow .rk{font-size:20px}.brow .rk.medal{font-size:26px}
  .brow .av{width:42px;height:42px;font-size:25px}
  .brow .score b{font-size:22px}
  .code-in{font-size:26px;height:62px}
  .player{padding:16px;gap:12px}
  .player .av.big{width:68px;height:68px;font-size:40px}
  .stat{padding:8px 6px}.stat b{font-size:21px}.stat span{font-size:11px}
  .sec,.mission,.handin{padding:16px}
  .next{padding:14px}
  .next .ccard{--w:86px}
}