/* spy.top -- dark frutiger aero. deep teal water, glass, bloom. */
:root{
  --bg0:#04121a; --bg1:#07222f; --bg2:#0a3140;
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.03);
  --edge:rgba(160,240,255,.16); --edge2:rgba(160,240,255,.28);
  --ink:#dff4f8; --ink2:#8fb8c4; --dim:#87acba;
  --aqua:#3ddbe8; --mint:#79f0c4; --deep:#0d7f97; --pop:#ff6fb5; --sun:#ffd166;
  --glow:0 0 0 1px rgba(160,240,255,.10), 0 18px 50px rgba(0,0,0,.55),
         inset 0 1px 0 rgba(255,255,255,.14);
  --ui:'Quicksand',Segoe UI,Tahoma,sans-serif;
  --px:'Silkscreen',monospace;
  --r:clamp(14px,1.4vw,26px);
}
*{box-sizing:border-box}
html{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
html,body{margin:0;padding:0}
body{
  font-family:var(--ui);font-weight:500;color:var(--ink);
  font-size:clamp(14px,.36vw + 12.6px,17px);line-height:1.6;
  min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(60vw 40vw at 82% -6%, rgba(61,219,232,.20), transparent 68%),
    radial-gradient(52vw 36vw at 6% 14%, rgba(121,240,196,.14), transparent 70%),
    radial-gradient(70vw 52vw at 50% 112%, rgba(13,127,151,.34), transparent 72%),
    linear-gradient(176deg, var(--bg1) 0%, var(--bg0) 46%, #05161f 100%);
  background-attachment:fixed;
}
body::before{ /* faint caustic haze so the dark isn't flat */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(1px 1px at 12% 22%, #bffaff77 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 8%, #bffaff55 50%, transparent 50%),
    radial-gradient(2px 2px at 84% 62%, #79f0c455 50%, transparent 50%),
    radial-gradient(1px 1px at 33% 78%, #bffaff44 50%, transparent 50%);
  background-size:340px 300px,300px 280px,420px 380px,260px 240px;
}
a{color:var(--aqua);text-decoration:none;border-bottom:1px solid rgba(61,219,232,.35)}
a:hover{color:var(--mint);border-bottom-color:var(--mint)}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.5px}
.blink{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{opacity:.12}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes pulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.12)}}
@keyframes sheen{to{background-position:260% 0}}
@keyframes drift{
  0%{transform:translate3d(0,-11px,0)}
  50%{transform:translate3d(0,11px,0)}
  100%{transform:translate3d(0,-11px,0)}}
.rainbow{
  background:linear-gradient(96deg,#79f0c4,#3ddbe8,#8fd0ff,#ff6fb5,#ffd166,#79f0c4);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite}

/* ---------------- splash ---------------- */
#gate{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(16px,2vw,28px);transition:opacity .32s ease;
  background:radial-gradient(48vw 34vw at 50% 34%, rgba(61,219,232,.18), transparent 70%),
    linear-gradient(172deg,#07222f,#04121a 60%,#03222b)}
#gate.gone{opacity:0;pointer-events:none}
#gate .orb{width:clamp(110px,12vw,170px);aspect-ratio:1;border-radius:50%;display:grid;
  place-items:center;animation:spin 1.15s linear infinite;
  background:radial-gradient(circle at 34% 26%, #dffaff, #3ddbe8 46%, #0d7f97 78%, #062b39);
  box-shadow:0 0 60px rgba(61,219,232,.35), inset 0 -14px 30px rgba(255,255,255,.22)}
#gate .orb img{width:68%;object-fit:contain;opacity:0;transition:opacity .2s}
#gate.ready .orb img{opacity:1}
#gate .slogan{font-size:clamp(19px,2.4vw,34px);font-weight:700;text-align:center;padding:0 18px;
  text-shadow:0 0 26px rgba(61,219,232,.5)}
#gate .bar{width:min(420px,74vw);height:20px;padding:3px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid var(--edge);box-shadow:var(--glow)}
#gate .fill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(180deg,#bffaff,var(--aqua) 50%,var(--deep));
  box-shadow:0 0 20px rgba(61,219,232,.65)}
#gate .pct{font-family:var(--px);font-size:12px;color:var(--ink2)}

/* ---------------- shell ---------------- */
.wrap{position:relative;z-index:1;width:min(1240px,100%);margin:0 auto;
  padding:clamp(16px,2.2vw,40px) clamp(14px,3vw,44px) clamp(50px,6vw,90px)}

/* hero: logo bleeds out of the grid, name sits low and left */
header.top{position:relative;display:grid;
  grid-template-columns:clamp(88px,9vw,150px) minmax(0,1fr);
  gap:clamp(14px,2vw,30px);align-items:end;
  padding:clamp(20px,4vw,56px) 0 clamp(14px,2vw,26px)}
header.top .logo{width:100%;aspect-ratio:1;object-fit:contain;padding:8%;border-radius:28%;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(61,219,232,.06));
  border:1px solid var(--edge);box-shadow:var(--glow);
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
  animation:drift 5.5s ease-in-out infinite}
header.top h1{font-size:clamp(38px,8.4vw,104px);line-height:1.04;letter-spacing:-.05em;
  padding-bottom:.06em;filter:drop-shadow(0 0 34px rgba(61,219,232,.35))}
header.top .tag{margin-top:.5em;font-size:clamp(13px,1.1vw,19px);color:var(--ink2);max-width:46ch}

/* asymmetric two-column: main column offset, sidebar hangs lower */
.layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.85fr);
  gap:clamp(18px,2.6vw,44px);align-items:start}
.col-main{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,38px)}
.col-side{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(30px,6vw,110px)}

/* ---------------- glass panels ---------------- */
.panel{position:relative;border-radius:var(--r);background:var(--glass);
  border:1px solid var(--edge);box-shadow:var(--glow);
  backdrop-filter:blur(18px) saturate(1.3);overflow:hidden}
.panel::before{content:"";position:absolute;inset:0 0 auto;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent)}
.panel::after{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(191,250,255,.65),transparent)}
.panel > .bar{position:relative;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding:clamp(13px,1.5vw,20px) clamp(16px,1.8vw,26px) clamp(9px,1vw,13px)}
.panel > .bar h2{font-size:clamp(19px,1.7vw,28px)}
.panel > .bar .sub{margin-left:auto;font-family:var(--px);font-size:clamp(9px,.7vw,11px);
  color:var(--dim);letter-spacing:.05em}
.panel .body{position:relative;padding:0 clamp(16px,1.8vw,26px) clamp(16px,1.8vw,24px)}
/* wide panels break the grid slightly so nothing stacks dead-centre */
.col-main > .panel:nth-of-type(2n){margin-right:clamp(-34px,-2.4vw,0px)}
.col-main > .blockwrap:nth-of-type(2n+1){margin-left:clamp(0px,3vw,46px)}
.col-side > .panel:nth-of-type(3n+2){margin-left:clamp(-30px,-2vw,0px)}

/* ---------------- leaderboard ---------------- */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}
.search{flex:1 1 190px}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(6px,.7vw,11px)}
.board.capped{max-height:min(58vh,560px);overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:var(--deep) transparent}
.board.capped::-webkit-scrollbar{width:8px}
.board.capped::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:99px}
.board.capped::-webkit-scrollbar-thumb{background:var(--deep);border-radius:99px}
.row{display:grid;grid-template-columns:clamp(28px,2.4vw,42px) clamp(42px,4vw,62px) minmax(0,1fr) auto;
  gap:clamp(9px,1.1vw,16px);align-items:center;padding:clamp(7px,.8vw,11px) clamp(10px,1.2vw,16px);
  border-radius:calc(var(--r) * .72);background:rgba(255,255,255,.045);
  border:1px solid rgba(160,240,255,.10);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1),background .18s,border-color .18s}
.row:hover{transform:translateX(5px);background:rgba(61,219,232,.10);
  border-color:var(--edge2);z-index:2}
.row .rank{font-family:var(--px);font-size:clamp(11px,.9vw,15px);color:var(--dim);text-align:center}
.row:nth-child(1) .rank{color:var(--sun);font-size:clamp(13px,1.1vw,18px)}
.row:nth-child(2) .rank{color:#cfe6ee}
.row:nth-child(3) .rank{color:#e0a06a}
.row .pfp{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;
  background:rgba(255,255,255,.06);border:1px solid var(--edge2);
  box-shadow:0 0 18px rgba(61,219,232,.18)}
.row .nm{font-size:clamp(15px,1.15vw,20px);font-weight:700;overflow-wrap:anywhere}
.row .bl{font-size:clamp(11px,.8vw,13px);color:var(--ink2);overflow-wrap:anywhere}
.row .right{display:flex;align-items:center;gap:clamp(7px,.9vw,14px)}
.votes{font-family:var(--px);font-size:clamp(12px,1vw,16px);color:var(--mint);
  min-width:2.2em;text-align:right;text-shadow:0 0 14px rgba(121,240,196,.4)}
.showcase{font-family:var(--px);font-size:clamp(9px,.7vw,11px);border:1px solid var(--edge);
  padding:.45em .8em;border-radius:99px;background:rgba(255,255,255,.05);white-space:nowrap}
.showcase:hover{background:rgba(61,219,232,.16);border-color:var(--edge2)}
.hidden{display:none!important}
.clipbox{grid-column:1/-1;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .34s cubic-bezier(.3,1,.4,1),opacity .24s,margin .34s}
.row.open .clipbox{max-height:min(46vw,460px);opacity:1;margin-top:clamp(8px,1vw,14px)}
.clipbox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:calc(var(--r) * .6);
  background:#04161e;box-shadow:0 0 0 1px var(--edge), 0 12px 30px rgba(0,0,0,.5)}
.clipbox .lbl{font-family:var(--px);font-size:clamp(8.5px,.66vw,10.5px);color:var(--dim);
  margin:0 0 6px 2px}
.row.open{background:rgba(61,219,232,.09);border-color:var(--edge2)}
.showcase.on{background:rgba(61,219,232,.2);border-color:var(--aqua);color:var(--ink)}

/* ---------------- controls ---------------- */
.btn{font-family:var(--ui);font-weight:700;font-size:clamp(12px,.85vw,14px);cursor:pointer;
  color:#032027;padding:.6em 1.25em;border-radius:99px;border:1px solid rgba(191,250,255,.5);
  background:linear-gradient(180deg,#c9fbff,var(--aqua) 52%,#159fb5);
  box-shadow:0 8px 24px rgba(61,219,232,.22), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .14s,filter .14s,box-shadow .14s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 30px rgba(61,219,232,.34)}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;filter:grayscale(.7) brightness(.8);box-shadow:none}
.btn.pink{color:#2a0a1c;background:linear-gradient(180deg,#ffd0e8,var(--pop) 52%,#d43e8b);
  border-color:rgba(255,208,232,.55);box-shadow:0 8px 24px rgba(255,111,181,.22), inset 0 1px 0 rgba(255,255,255,.7)}
.btn.ghost{color:var(--ink);background:rgba(255,255,255,.05);border-color:var(--edge);
  box-shadow:none}
.btn.ghost:hover{background:rgba(61,219,232,.14)}
.btn.sm{font-size:clamp(11px,.75vw,12.5px);padding:.45em .95em}
input[type=text],input[type=password],input[type=number],textarea,select{
  font-family:var(--ui);font-size:clamp(13px,.85vw,14.5px);color:var(--ink);
  padding:.6em 1em;border-radius:99px;border:1px solid var(--edge);
  background:rgba(0,0,0,.28);min-width:0}
input::placeholder,textarea::placeholder{color:var(--dim)}
textarea{border-radius:calc(var(--r) * .6);width:100%;font-size:13px;line-height:1.45}
select{padding-right:.5em}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(61,219,232,.18)}
form.inline{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.hp{position:absolute;left:-9999px}
.notice{font-size:clamp(12px,.85vw,14px);color:var(--ink2);margin-top:12px}
.hint{font-size:clamp(10.5px,.75vw,12px);color:var(--dim)}

/* ---------------- posts (last few, no voting) ---------------- */
.posts{display:flex;flex-direction:column;gap:clamp(7px,.8vw,11px)}
.post{padding:clamp(9px,1vw,14px) clamp(12px,1.3vw,18px);border-radius:calc(var(--r) * .66);
  background:rgba(255,255,255,.04);border:1px solid rgba(160,240,255,.10)}
.post .who{font-weight:700;font-size:clamp(12.5px,.9vw,14.5px);color:var(--aqua)}
.post .txt{overflow-wrap:anywhere;margin-top:2px}
.post .t{float:right;font-family:var(--px);font-size:9.5px;color:var(--dim)}

/* ---------------- sidebar ---------------- */
.col-side .panel{margin:0}
.ring{display:flex;flex-wrap:wrap;gap:8px}
.ring a{border:0;padding:0;background:none}
.ring a.txt{font-family:var(--px);font-size:clamp(9px,.7vw,11px);padding:.5em .85em;
  border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.ring a.txt:hover{background:rgba(61,219,232,.16)}
.ring img{width:88px;height:31px;object-fit:cover;border-radius:5px;border:1px solid var(--edge2)}
.counter{font-family:var(--px);font-size:clamp(9px,.72vw,11px);letter-spacing:.12em;
  color:var(--mint);padding:.3em .6em;border-radius:8px;background:rgba(0,0,0,.3);
  border:1px solid var(--edge);display:inline-block;vertical-align:middle}

/* ---------------- shitpost blocks ---------------- */
.blockwrap .cap{font-family:var(--px);font-size:clamp(9px,.7vw,11px);color:var(--dim);
  margin-bottom:7px}
.blockwrap img{border-radius:var(--r);border:1px solid var(--edge);box-shadow:var(--glow);
  max-height:60vh;width:auto}
.blockwrap iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);
  box-shadow:var(--glow);background:#04161e}
.blockwrap iframe.tall{aspect-ratio:auto}
.mini-ticker{overflow:hidden;white-space:nowrap;padding:.55em 0;border-radius:99px;
  font-family:var(--px);font-size:clamp(10px,.75vw,12px);color:var(--aqua);
  background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.mini-ticker span{display:inline-block;padding-left:100%;animation:mq 24s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

/* free-floating stickers */
#stickers{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none;z-index:50}
.sticker{position:absolute;pointer-events:auto;max-width:40vw;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
.sticker img{border-radius:10px;width:100%}
.sticker.a-spin{animation:spin 3.6s linear infinite}
.sticker.a-float{animation:float 3.4s ease-in-out infinite}
.sticker.a-wobble{animation:wobble 1.7s ease-in-out infinite}
.sticker.a-pulse{animation:pulse 1.5s ease-in-out infinite}
.sticker.a-blink{animation:blink 1s steps(2,start) infinite}

footer{margin-top:clamp(26px,4vw,56px);padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px);
  border-radius:var(--r);background:var(--glass2);border:1px solid var(--edge);
  backdrop-filter:blur(12px);display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:center;font-size:clamp(12px,.85vw,14px);color:var(--ink2)}
/* custom cursor: hard dot + lagging ring + faint comet motes */
@media (hover:hover) and (pointer:fine){
  html.cur-on,html.cur-on *,html.cur-on *::before,html.cur-on *::after{cursor:none!important}
}
#cur,#curRing{position:fixed;left:0;top:0;pointer-events:none;z-index:10000;
  border-radius:50%;will-change:transform;opacity:0;transition:opacity .18s}
#cur.live,#curRing.live{opacity:1}
#cur{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:#dffaff;
  box-shadow:0 0 10px rgba(61,219,232,.95),0 0 22px rgba(61,219,232,.5)}
#curRing{width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(121,240,196,.6);
  box-shadow:0 0 16px rgba(121,240,196,.22) inset;
  transition:width .18s,height .18s,margin .18s,border-color .18s,background .18s,opacity .18s}
#curRing.hot{width:46px;height:46px;margin:-23px 0 0 -23px;border-color:var(--aqua);
  background:rgba(61,219,232,.10)}
#curRing.down{width:20px;height:20px;margin:-10px 0 0 -10px}
.mote{position:fixed;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  pointer-events:none;z-index:9999;mix-blend-mode:screen}

/* ---------------- admin ---------------- */
.admin table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px}
.admin td,.admin th{padding:7px 8px;vertical-align:top}
.admin tr{background:rgba(255,255,255,.035)}
.admin td:first-child,.admin th:first-child{border-radius:12px 0 0 12px}
.admin td:last-child,.admin th:last-child{border-radius:0 12px 12px 0}
.admin th{font-family:var(--px);font-size:10px;color:var(--dim);text-align:left;background:none}
.admin input[type=text],.admin input[type=number],.admin textarea,.admin select{width:100%}
.admin .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.admin label{display:block;font-family:var(--px);font-size:10px;color:var(--dim);margin:0 0 5px 10px}
.admin nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.admin nav a{font-family:var(--px);font-size:10.5px;padding:.55em 1em;border-radius:99px;
  border:1px solid var(--edge);background:rgba(255,255,255,.05)}
.admin .panel{margin:0 0 clamp(18px,2.4vw,34px)}
.login{max-width:400px;margin:12vh auto}
.err{padding:.7em 1.1em;border-radius:14px;background:rgba(255,111,181,.14);
  border:1px solid rgba(255,111,181,.4);color:#ffc2e0}

@media(max-width:920px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .col-side{margin-top:0;flex-direction:row;flex-wrap:wrap}
  .col-side > .panel{flex:1 1 250px;margin-left:0!important}
  .col-main > .panel,.col-main > .blockwrap{margin-left:0!important;margin-right:0!important}
}
@media(max-width:600px){
  header.top{grid-template-columns:64px minmax(0,1fr);align-items:center}
  .row{grid-template-columns:26px 38px minmax(0,1fr);row-gap:8px}
  .row .right{grid-column:1/-1;justify-content:space-between}
  .sticker{max-width:46vw}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}