/* =====================================================================
   COOL I GUESS CREW  —  global stylesheet
   vibe: a 2000s art-girl's Mac OS desktop. you opened it by accident.
   ===================================================================== */

/* ---------- fonts ----------
   Silkscreen = pixel/bitmap chrome  ·  Jua = bubbly hand title
   Special Elite = typewriter diary  ·  system fallback for UI text   */

:root{
  --desk-1:#b9a7d6;          /* periwinkle wallpaper base   */
  --desk-2:#a594c9;
  --ink:#2b2440;             /* near-black purple ink        */
  --win-face:#dcd9e3;        /* platinum window face         */
  --win-edge:#ffffff;
  --win-shadow:#7d7791;
  --bar:#cfc9da;             /* title bar base               */
  --hot:#ff4f9a;            /* hot pink accent               */
  --hot-2:#ff2d7e;
  --cool:#36c5e0;           /* aqua accent                   */
  --lime:#9fe05a;
  --sun:#ffd23f;
  --line:#5a5270;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:"Silkscreen", Geneva, Tahoma, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background-color:var(--desk-1);
  /* tiled hand-drawn doodle wallpaper (stars · hearts · smileys) */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<g fill='none' stroke='%239585b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M22 14 l3 7 7 1 -5 5 1 7 -6 -4 -6 4 1 -7 -5 -5 7 -1 z'/>\
<path d='M86 30 c-4 -6 -13 -2 -10 5 c2 5 10 9 10 9 s8 -4 10 -9 c3 -7 -6 -11 -10 -5 z'/>\
<circle cx='34' cy='74' r='9'/>\
<path d='M30 73 v0 M38 73 v0 M30 78 q4 4 8 0'/>\
<path d='M96 88 l2 6 6 1 -4 4 1 6 -5 -3 -5 3 1 -6 -4 -4 6 -1 z'/>\
<path d='M62 52 l0 0'/>\
</g></svg>");
  background-repeat:repeat;
  image-rendering:pixelated;
  cursor:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>\
<path d='M3 2 L3 18 L7 14 L10 21 L13 20 L10 13 L16 13 Z' fill='black' stroke='white' stroke-width='1.5'/>\
</svg>") 2 2, auto;
}

a{ color:inherit; }

/* ===================== MENU BAR ===================== */
.menubar{
  position:fixed; top:0; left:0; right:0; height:26px; z-index:1000;
  display:flex; align-items:center; gap:0;
  background:linear-gradient(#ffffff,#e7e4ee 60%,#cfcad9);
  border-bottom:2px solid var(--ink);
  font-size:11px; padding:0 8px;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.menubar .apple{ font-size:14px; margin-right:10px; transform:translateY(-1px); }
.menubar .mitem{ padding:3px 9px; border-radius:3px; cursor:pointer; }
.menubar .mitem:hover{ background:var(--ink); color:#fff; }
.menubar .spacer{ flex:1; }
.menubar .clock{ padding:3px 8px; }
.menubar .marquee-wrap{
  flex:1; overflow:hidden; white-space:nowrap; margin:0 14px;
  color:var(--hot-2);
}
.menubar .marquee-wrap span{ display:inline-block; padding-left:100%; animation:scrollx 18s linear infinite; }
@keyframes scrollx{ to{ transform:translateX(-100%);} }

/* ===================== DESKTOP LAYOUT ===================== */
.desktop{
  padding:42px 16px 80px;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  min-height:100vh;
}

/* desktop icons (top-left, floating) */
.desk-icons{
  position:fixed; top:40px; left:14px; z-index:5;
  display:flex; flex-direction:column; gap:18px;
}
.desk-icon{
  width:74px; text-align:center; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:9px; line-height:1.2;
}
.desk-icon .glyph{
  width:46px; height:42px; display:flex; align-items:center; justify-content:center;
  font-size:24px;
  background:var(--win-face);
  border:2px solid var(--ink);
  border-radius:7px;
  box-shadow:3px 3px 0 var(--win-shadow);
}
.desk-icon span{
  background:var(--sun); padding:1px 4px; border:1px solid var(--ink); border-radius:3px;
}
.desk-icon:hover .glyph{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--win-shadow); }

/* ===================== WINDOW ===================== */
.window{
  width:min(720px, 94vw);
  background:var(--win-face);
  border:2px solid var(--ink);
  border-radius:8px 8px 5px 5px;
  box-shadow:6px 7px 0 var(--win-shadow), 0 0 0 2px #fff inset;
  position:relative;
}
.window.wide{ width:min(880px,95vw); }

.titlebar{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px;
  border-bottom:2px solid var(--ink);
  border-radius:6px 6px 0 0;
  /* platinum pinstripe */
  background:repeating-linear-gradient(
    to bottom,
    #efedf5 0 1px, #d4cfe0 1px 2px
  );
}
.titlebar .dot{
  width:14px; height:14px; border:2px solid var(--ink); background:var(--win-face);
  border-radius:3px; box-shadow:1px 1px 0 #fff inset;
}
.titlebar .title{
  flex:1; text-align:center; font-size:12px; letter-spacing:.5px;
  text-shadow:1px 1px 0 #fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.titlebar .strut{ width:14px; height:14px; }

.window .content{ padding:14px 20px 16px; }

/* ===================== HERO / NAME ===================== */
.hero{ text-align:center; padding:2px 0 0; }
.hero .crew{
  font-family:"Jua", sans-serif;
  font-size:clamp(28px, 5.4vw, 50px);
  line-height:.92;
  margin:0;
  color:var(--hot);
  text-shadow:
    3px 3px 0 #fff,
    5px 5px 0 var(--cool),
    6px 6px 0 var(--ink);
  transform:rotate(-2deg);
}
.hero .crew .star{ color:var(--sun); -webkit-text-stroke:1px var(--ink); }
.hero .tag{
  display:inline-block; margin-top:8px; font-size:10px;
  background:var(--sun); color:var(--ink);
  padding:4px 10px; border:2px solid var(--ink); border-radius:20px;
  box-shadow:2px 2px 0 var(--ink); transform:rotate(1.5deg);
}
.hero .sub{ font-family:"Special Elite", serif; font-size:11px; margin:9px auto 0; max-width:48ch; color:var(--ink); opacity:.85; }

/* ===================== VOTING / VS ===================== */
.vote-head{
  text-align:center; margin:14px 0 10px; font-size:14px; letter-spacing:1px;
  color:var(--ink);
}
.vote-head b{ color:var(--hot-2); }

.vs{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:10px;
}
.pick{
  border:none; background:none; padding:0; cursor:inherit;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .08s;
}
.pick:hover{ transform:translateY(-4px) rotate(-1deg); }
.pick:active{ transform:scale(.97); }

.frame{
  width:100%; aspect-ratio:1/1; max-width:208px;
  border:3px solid var(--ink);
  background:#cfc7e0;
  box-shadow:5px 5px 0 var(--win-shadow);
  overflow:hidden;
  position:relative;
}
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* placeholder card when no src yet */
.frame .ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  font-family:"Special Elite", serif; font-size:12px; color:var(--ink);
  text-align:center; padding:10px;
}
.frame .ph .big{ font-size:30px; }
.frame .ph .id{ font-family:"Silkscreen",sans-serif; font-size:9px; opacity:.6; }

.pick .label{
  font-family:"Jua",sans-serif; font-size:14px; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:6px;
  padding:2px 10px; box-shadow:2px 2px 0 var(--ink);
}
.pick .pickbtn{
  font-family:"Silkscreen",sans-serif; font-size:10px;
  background:var(--lime); color:var(--ink);
  border:2px solid var(--ink); border-radius:5px; padding:5px 14px;
  box-shadow:2px 2px 0 var(--ink);
}
.pick:hover .pickbtn{ background:var(--hot); color:#fff; }

.vs-bolt{
  font-family:"Jua",sans-serif; font-size:30px; color:#fff;
  background:var(--hot-2); width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-8deg);
}

/* share this matchup ("help me pick") */
.sharebar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  margin-top:12px;
}
.sharebar .share-q{
  width:100%; text-align:center; font-family:"Special Elite",serif;
  font-size:12px; color:var(--ink); margin-bottom:2px;
}
.share{
  font-family:"Silkscreen",sans-serif; font-size:10px; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:6px;
  padding:7px 13px; box-shadow:2px 2px 0 var(--ink); cursor:inherit;
}
.share:hover{ background:var(--sun); }
.share:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.share.x{ background:var(--cool); }
.share.x:hover{ background:var(--hot); color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.bigbtn.alt{ background:var(--cool); }
.bigbtn.alt:hover{ background:var(--hot); color:#fff; }

.vote-foot{ text-align:center; margin-top:10px; font-size:10px; opacity:.7; }
.vote-foot .skip{
  background:var(--win-face); border:2px solid var(--ink); border-radius:5px;
  padding:4px 12px; font-family:"Silkscreen",sans-serif; font-size:9px;
  box-shadow:2px 2px 0 var(--win-shadow); cursor:inherit; color:var(--ink);
}
.vote-foot .skip:hover{ background:var(--sun); }

/* tiny toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) rotate(-1deg);
  background:var(--ink); color:#fff; font-size:11px;
  padding:8px 16px; border:2px solid #fff; border-radius:6px;
  box-shadow:4px 4px 0 rgba(0,0,0,.3); z-index:2000;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px) rotate(-1deg); }

/* ===================== LEADERBOARD ===================== */
.board{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.row{
  display:grid; grid-template-columns:34px 40px 1fr auto; align-items:center; gap:10px;
  background:#fff; border:2px solid var(--ink); border-radius:6px; padding:6px 8px;
  box-shadow:2px 2px 0 var(--win-shadow);
}
.row .rank{ font-family:"Jua",sans-serif; font-size:18px; color:var(--hot-2); text-align:center; }
.row.top1 .rank{ color:var(--sun); -webkit-text-stroke:1px var(--ink); }
.row .thumb{
  width:40px; height:40px; border:2px solid var(--ink); overflow:hidden; background:#eee;
}
.row .thumb img{ width:100%; height:100%; object-fit:cover; }
.row .thumb .mini{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:16px; }
.row .meta{ min-width:0; }
.row .meta .name{ font-family:"Jua",sans-serif; font-size:13px; }
.row .bar{
  height:8px; margin-top:4px; background:#e6e2ee; border:1px solid var(--ink); border-radius:4px; overflow:hidden;
}
.row .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cool),var(--hot)); }
.row .count{ font-family:"Silkscreen",sans-serif; font-size:11px; white-space:nowrap; }

/* ===================== STICKY NOTES / DOODLES ===================== */
.sticky{
  position:fixed; z-index:6; width:150px; padding:12px;
  font-family:"Special Elite", serif; font-size:12px; color:var(--ink);
  background:var(--sun); border:1px solid rgba(0,0,0,.25);
  box-shadow:3px 4px 8px rgba(0,0,0,.25);
}
.sticky.pink{ background:#ffb3d9; }
.sticky.s1{ top:120px; right:18px; transform:rotate(4deg); }
.sticky.s2{ bottom:24px; right:24px; transform:rotate(-5deg); }
.sticky b{ font-family:"Silkscreen",sans-serif; font-size:9px; }

/* ===================== COUNTDOWN PAGE (MTV TRL) ===================== */
.trl{
  width:min(900px,95vw);
  background:#101018;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--win-shadow);
  color:#fff; overflow:hidden; border-radius:6px;
}
.trl-top{
  background:repeating-linear-gradient(135deg,var(--hot) 0 22px,var(--hot-2) 22px 44px);
  padding:16px 18px; border-bottom:3px solid #000; text-align:center;
}
.trl-top h1{
  font-family:"Jua",sans-serif; margin:0; font-size:clamp(26px,6vw,46px); color:#fff;
  text-shadow:3px 3px 0 #000, 5px 5px 0 var(--sun);
}
.trl-top .lil{ font-size:10px; letter-spacing:3px; color:#fff; margin-top:4px; }
.trl-body{ padding:14px; display:flex; flex-direction:column; gap:8px;
  background:
    radial-gradient(circle at 12% 20%, rgba(54,197,224,.25), transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(255,79,154,.25), transparent 40%),
    #14141f;
}
.crow{
  display:grid; grid-template-columns:64px 56px 1fr auto; align-items:center; gap:12px;
  background:#1d1d2b; border:2px solid #000; border-radius:6px; padding:8px 10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.crow .num{ font-family:"Jua",sans-serif; font-size:34px; text-align:center; color:var(--cool); }
.crow.n1{ background:linear-gradient(#3a2b4d,#1d1d2b); border-color:var(--sun); }
.crow.n1 .num{ color:var(--sun); font-size:42px; text-shadow:2px 2px 0 #000; }
.crow .pic{ width:56px; height:56px; border:2px solid #000; overflow:hidden; background:#333; }
.crow .pic img{ width:100%; height:100%; object-fit:cover; }
.crow .pic .mini{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:22px; }
.crow .info .t{ font-family:"Jua",sans-serif; font-size:16px; }
.crow .info .v{ font-family:"Silkscreen",sans-serif; font-size:10px; color:#9fa; opacity:.8; }
.crow .move{ font-size:10px; font-family:"Silkscreen",sans-serif; color:var(--lime); white-space:nowrap; }

/* back link button shared */
.bigbtn{
  display:inline-block; text-decoration:none;
  font-family:"Silkscreen",sans-serif; font-size:11px; color:var(--ink);
  background:var(--sun); border:2px solid var(--ink); border-radius:6px;
  padding:8px 16px; box-shadow:3px 3px 0 var(--ink);
}
.bigbtn:hover{ background:var(--hot); color:#fff; }
.bigbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.center{ text-align:center; }
.mt{ margin-top:22px; }

/* footer credit */
.credit{
  text-align:center; font-size:9px; color:var(--ink); opacity:.7; padding:30px 0 10px;
  font-family:"Silkscreen",sans-serif;
}

/* ===================== MOBILE ===================== */
@media (max-width:560px){
  /* no Mac menu bar on phones — drop it entirely */
  .menubar{ display:none; }
  .desktop{ padding:14px 12px 70px; }
  .desk-icons{
    position:static; flex-direction:row; flex-wrap:wrap; justify-content:center;
    gap:14px; margin:6px 0 4px;
  }
  .sticky.s1{ top:auto; position:static; margin:0 auto 4px; transform:rotate(2deg); }
  .sticky.s2{ display:none; }
  .vs{ grid-template-columns:1fr; }
  .vs-bolt{ margin:2px auto; }
  .frame{ max-width:220px; }
  .sharebar .share{ flex:1 1 auto; text-align:center; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .row{ grid-template-columns:28px 34px 1fr auto; }
  .crow{ grid-template-columns:44px 44px 1fr; }
  .crow .move{ display:none; }
}