/* Additions for the live site: alias line, shoutout popups, sheets, ended state, legal links. Uses tokens from styles.css. */
body{margin:0}
.whoami{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;position:relative;z-index:1}
.alias-btn{border:0;background:var(--yellow);font-family:var(--mono);font-weight:700;font-size:12px;padding:2px 6px;color:var(--ink)}
.whoami span{opacity:.8}

.r-list .empty{display:block;text-align:center;padding:18px 0;color:var(--muted);border:0}
.r-list li.paid .t{font-weight:700}
.r-list .shoutline{display:block;font-family:var(--body);font-size:12px;font-style:italic;white-space:normal;color:var(--ink)}
#rStatus.off{color:var(--pink)}

/* shoutout popups */
.shouts{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40;width:min(440px,calc(100% - 32px));display:grid;gap:10px;pointer-events:none}
.shout{pointer-events:auto;background:var(--sheet);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--side,var(--pink));padding:12px 14px 14px;display:grid;gap:4px;position:relative;cursor:pointer;animation:slam .45s cubic-bezier(.2,1.4,.4,1)}
.shout.b{--side:var(--blue)}
.shout.leaving{animation:leave .3s ease forwards}
@keyframes slam{from{transform:translateY(-24px) rotate(-3deg) scale(.9);opacity:0}}
@keyframes leave{to{transform:translateY(-16px);opacity:0}}
.shout .s-top{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.shout .s-price{background:var(--yellow);padding:0 6px;font-weight:700;color:var(--ink)}
.shout .s-who{font-weight:700;font-size:14px;overflow-wrap:anywhere}
.shout .s-who b{color:var(--side,var(--pink))}
.shout .s-msg{font-family:var(--marker);font-size:21px;line-height:1.2;overflow-wrap:anywhere;color:var(--ink)}
.shout .s-msg:empty{display:none}
.shout.preview{animation:none;box-shadow:4px 4px 0 var(--side,var(--pink));cursor:default}

/* sheets (alias + pay) */
.sheet{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--sheet);color:var(--ink);padding:0;width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px)}
.sheet::backdrop{background:rgba(28,27,32,.45)}
.sheet form{display:grid;gap:10px;padding:20px}
.sheet h3{margin:0;font-family:var(--poster);font-weight:900;font-size:32px;line-height:1;text-transform:uppercase}
.sheet label{font-weight:700;font-size:14px;margin-top:4px}
.sheet label small{font-weight:400;color:var(--muted)}
.sheet input{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.sheet input:focus{outline:3px solid var(--yellow);outline-offset:0}
.at-field{display:flex;align-items:stretch}
.at-field span{display:grid;place-items:center;padding:0 10px;border:1.5px solid var(--ink);border-right:0;background:var(--yellow);font-family:var(--mono);font-weight:700}
.hint{margin:0;font-size:12px;color:var(--muted)}
.counter{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;margin-top:-6px}
.preview-label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.pack-pill{font-family:var(--mono);font-weight:700;font-size:12px;background:var(--yellow);border:1.5px solid var(--ink);padding:2px 8px}
.x-btn{border:0;background:none;font-size:18px;padding:4px 8px}
.sheet-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.fb.primary{background:var(--ink);color:var(--sheet)}
.fb.big{font-family:var(--poster);font-weight:900;font-size:22px;letter-spacing:.5px;text-transform:uppercase;padding:14px;margin-top:6px}
.fb:disabled{opacity:.6;cursor:wait}

/* war over */
.ended .acts button,.ended .whoami{opacity:.35;pointer-events:none}
.stamp.winner{font-size:16px;padding:4px 12px}

.legal{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;align-self:start}
.legal a{color:var(--ink)}

/* ── pushing rn ── */
.rn{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--sheet);padding:1px 6px 1px 4px;border:1px solid var(--rule)}
.rn i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:cwblink 1.2s infinite}
.team-b .rn i{background:var(--blue)}
.rn.zero i{animation:none;background:var(--rule)}
@keyframes cwblink{50%{opacity:.25}}

/* ── MVP board ── */
.mvp{background:var(--sheet);border:1.5px solid var(--ink);padding:18px;display:grid;gap:14px}
.mvp-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:600px){.mvp-cols{grid-template-columns:1fr}}
.mvp-col{min-width:0}
.mvp-col h3{margin:0 0 6px;font-family:var(--poster);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase;padding-bottom:6px;border-bottom:3px solid var(--pink);color:var(--pink)}
.mvp-col.b h3{color:var(--blue);border-color:var(--blue)}
.mvp-col ol{list-style:none;margin:0;padding:0}
.mvp-col li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:8px 2px;border-bottom:1px dotted var(--rule)}
.mvp-col li .rk{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mvp-col li .al{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mvp-col li .pt{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.mvp-col li:first-child .al{font-size:17px}
.mvp-col li.me{background:var(--yellow)}
.mvp-col li.empty{display:block;color:var(--muted);font-size:13px;border:0}

/* ── lead change alarm ── */
.alarm{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(28,27,32,.4)}
.alarm[hidden]{display:none}
.alarm-card{--side:var(--pink);width:min(520px,100%);background:var(--sheet) var(--grain);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--side);padding:22px 20px 14px;display:grid;gap:12px;text-align:center;transform:rotate(-2deg);animation:stampin .5s cubic-bezier(.2,1.5,.4,1)}
.alarm-card.b{--side:var(--blue)}
@keyframes stampin{from{transform:scale(1.7) rotate(-9deg);opacity:0}}
.alarm-kicker{justify-self:center;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;background:var(--yellow);padding:2px 10px}
.alarm-title{font-family:var(--poster);font-weight:900;font-size:clamp(40px,10vw,70px);line-height:.88;text-transform:uppercase;color:var(--side);text-wrap:balance}
.alarm-sub{margin:0;font-family:var(--marker);font-size:20px;line-height:1.25}
.alarm-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.alarm-x{justify-self:center;border:0;background:none;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-decoration:underline;padding:4px}
.poster.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-6px) rotate(-.4deg)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.team-a .rn{justify-self:start}

/* ── fight ring: karate fighters, moves scale with money ── */
:root{--skin:#d39a66}
.ring{--center:50%;--fw:clamp(124px,36vw,190px);position:relative;height:calc(var(--fw) * 1.2 + 8px);z-index:1;border-bottom:3px solid var(--ink)}
.ropes{position:absolute;left:0;right:0;top:20%;height:30%;border-top:2px solid color-mix(in srgb,var(--ink) 30%,transparent);border-bottom:2px solid color-mix(in srgb,var(--ink) 30%,transparent);pointer-events:none}
.fighter{--team:var(--pink);--dir:-1;position:absolute;bottom:-3px;width:var(--fw);transform-origin:50% 100%;transition:left .7s cubic-bezier(.2,.8,.2,1)}
.fighter.a{left:calc(var(--center) - var(--fw) * .8)}
.fighter.b{--team:var(--blue);--dir:1;left:calc(var(--center) - var(--fw) * .2)}
.fighter.b .flip{transform:scaleX(-1)}
.rig{display:block;width:100%;height:auto;overflow:visible;animation:stance 1s ease-in-out infinite}
.fighter.b .rig{animation-delay:-.5s}
@keyframes stance{50%{transform:translateY(3px)}}

/* paint */
.rig .o,.rig .f{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rig .o{stroke:var(--ink)}
.rig .arm-o{stroke-width:15}.rig .arm-f{stroke-width:9}
.rig .leg-o{stroke-width:19}.rig .leg-f{stroke-width:13}
.rig .gi{stroke:var(--sheet)}.rig .skin{stroke:var(--skin)}.rig .team{stroke:var(--team)}
.rig .giF{fill:var(--sheet)}.rig .skinF{fill:var(--skin)}.rig .teamF{fill:var(--team)}.rig .inkF{fill:var(--ink)}
.rig .line{stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.rig path.line:not([class*="F"]){fill:none}
.rig .shadow{fill:var(--ink);opacity:.14}
.rig .ol{stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}

/* joints (viewBox units) */
.rig g{transform-box:view-box}
.rig .upper{transform-origin:102px 126px}
.rig .head{transform-origin:103px 52px}
.rig .armF{transform-origin:114px 64px}.rig .foreF{transform-origin:136px 84px}
.rig .armB{transform-origin:92px 64px}.rig .foreB{transform-origin:104px 92px}
.rig .legF{transform-origin:110px 130px}.rig .shinF{transform-origin:132px 172px}
.rig .legB{transform-origin:94px 130px}.rig .shinB{transform-origin:78px 176px}
.rig .tails{transform-origin:90px 27px;animation:flutter .45s ease-in-out infinite alternate}
@keyframes flutter{to{transform:rotate(12deg)}}

/* ── moves (attacker) ── */
.fighter.m-jab .armF{animation:jabA .3s ease-out}
.fighter.m-jab .foreF{animation:jabF .3s ease-out}
.fighter.m-jab .upper{animation:leanS .3s ease-out}
.fighter.m-jab .rig{animation:stepS .3s ease-out}
@keyframes jabA{40%{transform:rotate(-42deg)}}
@keyframes jabF{40%{transform:rotate(100deg)}}
@keyframes leanS{40%{transform:rotate(6deg)}}
@keyframes stepS{40%{transform:translateX(12px)}}

.fighter.m-cross .armB{animation:crossA .34s ease-out}
.fighter.m-cross .foreB{animation:crossF .34s ease-out}
.fighter.m-cross .upper{animation:leanM .34s ease-out}
.fighter.m-cross .rig{animation:stepM .34s ease-out}
@keyframes crossA{40%{transform:rotate(-67deg)}}
@keyframes crossF{40%{transform:rotate(114deg)}}
@keyframes leanM{40%{transform:rotate(11deg)}}
@keyframes stepM{40%{transform:translateX(18px)}}

.fighter.m-lowkick .legF{animation:lowL .38s ease-out}
.fighter.m-lowkick .shinF{animation:lowS .38s ease-out}
.fighter.m-lowkick .upper{animation:leanBack .38s ease-out}
@keyframes lowL{45%{transform:rotate(-40deg)}}
@keyframes lowS{45%{transform:rotate(-14deg)}}
@keyframes leanBack{45%{transform:rotate(-8deg)}}

.fighter.m-sidekick .legF{animation:sideL .56s cubic-bezier(.3,1.2,.5,1)}
.fighter.m-sidekick .shinF{animation:sideS .56s cubic-bezier(.3,1.2,.5,1)}
.fighter.m-sidekick .legB{animation:pivot .56s ease-out}
.fighter.m-sidekick .upper{animation:leanBig .56s ease-out}
.fighter.m-sidekick .rig{animation:stepM .56s ease-out}
@keyframes sideL{20%{transform:rotate(-95deg)}42%,62%{transform:rotate(-74deg)}}
@keyframes sideS{20%{transform:rotate(80deg)}42%,62%{transform:rotate(-18deg)}}
@keyframes pivot{42%,62%{transform:rotate(8deg)}}
@keyframes leanBig{42%,62%{transform:rotate(-16deg)}}

.fighter.m-uppercut .armB{animation:upA .72s cubic-bezier(.3,1.3,.5,1)}
.fighter.m-uppercut .foreB{animation:upF .72s cubic-bezier(.3,1.3,.5,1)}
.fighter.m-uppercut .upper{animation:upBody .72s ease-out}
.fighter.m-uppercut .rig{animation:upJump .72s ease-out}
@keyframes upA{20%{transform:rotate(-10deg)}40%,60%{transform:rotate(-55deg)}}
@keyframes upF{20%{transform:rotate(40deg)}40%,60%{transform:rotate(27deg)}}
@keyframes upBody{20%{transform:rotate(10deg) translateY(6px)}40%,60%{transform:rotate(-12deg)}}
@keyframes upJump{20%{transform:translate(4px,6px)}40%,55%{transform:translate(16px,-14px)}}

.fighter.m-flurry .armF{animation:flA .82s linear}
.fighter.m-flurry .foreF{animation:flAf .82s linear}
.fighter.m-flurry .armB{animation:flB .82s linear}
.fighter.m-flurry .foreB{animation:flBf .82s linear}
.fighter.m-flurry .upper{animation:flBody .82s linear}
.fighter.m-flurry .rig{animation:flStep .82s ease-out}
@keyframes flA{0%,25%,50%,75%,100%{transform:none}12%,37%,62%,87%{transform:rotate(-42deg)}}
@keyframes flAf{0%,25%,50%,75%,100%{transform:none}12%,37%,62%,87%{transform:rotate(100deg)}}
@keyframes flB{0%,12%,37%,62%,87%,100%{transform:none}25%,50%,75%{transform:rotate(-67deg)}}
@keyframes flBf{0%,12%,37%,62%,87%,100%{transform:none}25%,50%,75%{transform:rotate(114deg)}}
@keyframes flBody{0%,100%{transform:none}12%,37%,62%,87%{transform:rotate(6deg)}25%,50%,75%{transform:rotate(10deg)}}
@keyframes flStep{10%,90%{transform:translateX(14px)}}

.fighter.m-fly .rig{animation:flyR 1.05s cubic-bezier(.3,.9,.4,1)}
.fighter.m-fly .legF{animation:flyLF 1.05s ease-out}
.fighter.m-fly .shinF{animation:flySF 1.05s ease-out}
.fighter.m-fly .legB{animation:flyLB 1.05s ease-out}
.fighter.m-fly .shinB{animation:flySB 1.05s ease-out}
.fighter.m-fly .upper{animation:flyU 1.05s ease-out}
@keyframes flyR{18%{transform:translate(-4px,8px)}45%,58%{transform:translate(66px,-40px)}80%{transform:translate(30px,-6px)}}
@keyframes flyLF{18%{transform:rotate(-20deg)}45%,62%{transform:rotate(-80deg)}}
@keyframes flySF{18%{transform:rotate(20deg)}45%,62%{transform:rotate(-8deg)}}
@keyframes flyLB{30%,65%{transform:rotate(-55deg)}}
@keyframes flySB{30%,65%{transform:rotate(95deg)}}
@keyframes flyU{45%,62%{transform:rotate(-14deg)}}

/* ── getting hit (defender) ── */
.fighter.h-s{animation:hS .3s ease-out}
.fighter.h-s .head{animation:headS .3s ease-out}
.fighter.h-m{animation:hM .55s ease-out}
.fighter.h-m .upper{animation:bodyM .55s ease-out}
.fighter.h-m .head{animation:headM .55s ease-out}
.fighter.h-l{animation:hL 1.6s cubic-bezier(.2,.9,.3,1)}
.fighter.h-l .rig{animation:kneelR 1.6s ease-out}
.fighter.h-l .legF{animation:kneelLF 1.6s ease-out}
.fighter.h-l .shinF{animation:kneelSF 1.6s ease-out}
.fighter.h-l .legB{animation:kneelLB 1.6s ease-out}
.fighter.h-l .shinB{animation:kneelSB 1.6s ease-out}
.fighter.h-l .upper{animation:kneelU 1.6s ease-out}
.fighter.h-l .head{animation:kneelH 1.6s ease-out}
@keyframes hS{35%{transform:translateX(calc(var(--dir) * 7px))}}
@keyframes headS{35%{transform:rotate(-16deg)}}
@keyframes hM{30%{transform:translateX(calc(var(--dir) * 20px))}60%{transform:translateX(calc(var(--dir) * 12px))}}
@keyframes bodyM{30%{transform:rotate(-16deg)}}
@keyframes headM{30%{transform:rotate(-24deg)}}
@keyframes hL{15%{transform:translate(calc(var(--dir) * 26px),-22px) rotate(calc(var(--dir) * 16deg))}35%,75%{transform:translateX(calc(var(--dir) * 20px))}}
/* knocked down to the knees, then back up */
@keyframes kneelR{0%,22%{transform:none}35%,75%{transform:translateY(16%)}}
@keyframes kneelLF{0%,22%{transform:none}35%,75%{transform:rotate(-62deg)}}
@keyframes kneelSF{0%,22%{transform:none}35%,75%{transform:rotate(69deg)}}
@keyframes kneelLB{0%,22%{transform:none}35%,75%{transform:rotate(-19deg)}}
@keyframes kneelSB{0%,22%{transform:none}35%,75%{transform:rotate(94deg)}}
@keyframes kneelU{0%,22%{transform:none}35%,75%{transform:rotate(-8deg)}}
@keyframes kneelH{15%{transform:rotate(-28deg)}35%,75%{transform:rotate(18deg)}}

/* ── states ── */
.fighter.dazed .head{transform:rotate(-12deg) translateY(3px)}
.fighter.dazed::after,.fighter.ko::after{content:"💫";position:absolute;top:-2%;left:50%;font-size:22px;animation:orbit 1.4s linear infinite}
@keyframes orbit{from{transform:translateX(-50%) rotate(0) translateX(14px) rotate(0)}to{transform:translateX(-50%) rotate(360deg) translateX(14px) rotate(-360deg)}}
.fighter.win .armF{transform:rotate(-125deg)}
.fighter.win .foreF{transform:rotate(100deg)}
.fighter.ko .rig,.fighter.win .rig{animation:none}
.fighter.ko .rig{transform:translateY(16%)}
.fighter.ko .legF{transform:rotate(-62deg)}.fighter.ko .shinF{transform:rotate(69deg)}
.fighter.ko .legB{transform:rotate(-19deg)}.fighter.ko .shinB{transform:rotate(94deg)}
.fighter.ko .upper{transform:rotate(-8deg)}.fighter.ko .head{transform:rotate(18deg)}
.fighter.ko::after{top:12%}

/* combo counter */
.combo{position:absolute;top:-4%;left:50%;transform:translateX(-50%);font-family:var(--poster);font-weight:900;font-size:22px;line-height:1.1;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);padding:0 8px;white-space:nowrap;opacity:0;pointer-events:none;z-index:4}
.combo.on{animation:comboPop 1.3s ease-out}
@keyframes comboPop{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}15%{opacity:1;transform:translateX(-50%) scale(1.18) rotate(-4deg)}80%{opacity:1;transform:translateX(-50%) scale(1) rotate(-4deg)}100%{opacity:0}}

/* comic burst at the point of impact */
.burst{position:absolute;left:var(--center);top:22%;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;z-index:3;animation:burst .7s cubic-bezier(.2,1.6,.4,1) forwards}
.burst svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.burst svg polygon{fill:var(--yellow);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.burst span{position:relative;font-family:var(--marker);color:var(--ink);white-space:nowrap;transform:rotate(-8deg)}
.burst.s{width:74px;height:56px}.burst.s span{font-size:15px}
.burst.m{width:150px;height:96px}.burst.m span{font-size:20px}
.burst.l{width:min(240px,72%);height:132px;top:16%}.burst.l span{font-size:clamp(17px,4.6vw,24px)}
.burst.l.from-a svg polygon{fill:var(--pink)}
.burst.l.from-b svg polygon{fill:var(--blue)}
.burst.l.from-b span{color:#fff}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.1);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-62%) scale(1);opacity:0}}
.poster.flash::before{content:"";position:absolute;inset:0;background:var(--yellow);mix-blend-mode:multiply;z-index:2;pointer-events:none;animation:flash .35s ease-out forwards}
@keyframes flash{from{opacity:.7}to{opacity:0}}

/* ── ₹99+ tag ── */
.tag.big{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.tag.big::before{border-color:var(--sheet)}

/* ── pack picker in the pay sheet ── */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}
@media (max-width:420px){.packs{grid-template-columns:repeat(2,1fr)}}
.pack{position:relative;display:grid;gap:1px;justify-items:center;border:1.5px solid var(--ink);background:#fff;padding:10px 4px 8px;color:var(--ink)}
.pack[aria-checked="true"]{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.pk-price{font-family:var(--poster);font-weight:900;font-size:24px;line-height:1}
.pk-pts{font-family:var(--mono);font-size:11px;font-weight:700}
.pk-tag{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.pack[aria-checked="true"] .pk-tag{color:var(--ink)}
.pk-ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--pink);color:var(--ink);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border:1.5px solid var(--ink);white-space:nowrap}
.perks{margin:0;font-size:13px;line-height:1.4}

/* ── pinned shoutout banner ── */
.pinned{--side:var(--pink);position:relative;z-index:2;display:grid;gap:4px;background:var(--yellow);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--side);padding:10px 14px 12px;transform:rotate(-.6deg)}
.pinned.b{--side:var(--blue)}
.pinned[hidden]{display:none}
.pin-top{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.pin-chip{font-weight:700}
.pin-left{font-variant-numeric:tabular-nums}
.pin-who{font-weight:700;font-size:14px;overflow-wrap:anywhere}
.pin-who b{color:var(--side)}
.pinned.a .pin-who b{color:#c4006a}
.pin-price{font-family:var(--mono);font-weight:400;font-size:12px}
.pin-msg{font-family:var(--marker);font-size:clamp(20px,4vw,26px);line-height:1.15;overflow-wrap:anywhere}
.pin-knock{justify-self:end;border:1.5px solid var(--ink);background:var(--sheet);font-weight:700;font-size:12px;padding:5px 10px;box-shadow:2px 2px 0 var(--ink)}

/* ── shoutout tiers ── */
.shout.k-mega{background:var(--yellow)}
.shout.k-carry{background:var(--yellow)}
.shout-full{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:rgba(28,27,32,.55)}
.shout-full[hidden]{display:none}
.shout-full .shout{width:min(560px,100%);padding:22px 22px 26px;box-shadow:12px 12px 0 var(--side,var(--pink));transform:rotate(-1.5deg);animation:fullslam .6s cubic-bezier(.2,1.5,.4,1)}
.shout-full .shout .s-top{font-size:13px}
.shout-full .shout .s-who{font-size:20px}
.shout-full .shout .s-msg{font-size:clamp(30px,8vw,48px)}
@keyframes fullslam{from{transform:scale(2) rotate(-10deg);opacity:0}}

/* ── Hall of Fame ── */
.hall{background:var(--sheet);border:1.5px solid var(--ink);padding:18px;display:grid;gap:10px}
.hall-sub{margin:0;font-size:14px;color:var(--muted)}
.hall-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){.hall-list{grid-template-columns:1fr 1fr;column-gap:24px}}
.hall-row{--side:var(--pink);display:grid;gap:4px;padding:10px 0;border-bottom:1px dotted var(--rule);min-width:0}
.hall-row.b{--side:var(--blue)}
.hall-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hall-no{font-family:var(--mono);font-size:11px;color:var(--muted)}
.hall-win{font-family:var(--poster);font-weight:900;font-size:24px;line-height:1;text-transform:uppercase;color:var(--side)}
.hall-row.a .hall-win{color:#e0218a}
.hall-stamp{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:1.5px;border:2px solid var(--side);color:var(--ink);padding:0 5px;transform:rotate(-4deg)}
.hall-vs{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
.hall-mvps{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px}
.hall-mvp{font-family:var(--mono);font-size:12px}
.hall-mvp.first{font-weight:700;background:var(--yellow);padding:0 4px}
.hall-empty{font-size:12px;color:var(--muted);font-style:italic}

/* ── add your college ── */
.ticket.add{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.ticket.add .no{color:var(--yellow)}
.ticket.add::before{border-color:color-mix(in srgb,var(--sheet) 40%,transparent)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--yellow);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--blue);padding:18px 20px}
.cta h2{margin:0;font-family:var(--poster);font-weight:900;font-size:clamp(28px,5vw,40px);line-height:1;text-transform:uppercase}
.cta p{margin:4px 0 0;font-size:14px}
.cta .fb.big{margin:0}

/* WhatsApp-style formatting in the share preview */
.bubble b{font-weight:700}
.bubble #shareText{white-space:pre-line}