/* MySpot — V2 skin: "2005, but OURS."
   NOT a MySpace clone: mixtape-poster / chrome-era record-store design.
   Colors are LOCKED (Skee, 2026-11-11): black / chrome / Skee dark red / gold.
   Palette vars stay the single source — content and pages unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');
:root{
  --page-bg:#0a0a0a;
  --ink:#141414;
  --paper:#f7f2e7;
  --accent:#961216;        /* Skee dark red */
  --accent-bright:#c8102e;
  --bar:#0d0d0d;
  --bar-text:#ffffff;
  --subbar:#efe6d0;
  --row:#fffdf6;
  --row-alt:#efe6d0;
  --link:#961216;
  --chrome1:#ffffff;
  --chrome2:#8f8f8f;
  --gold:#ffb400;
  --lcd:#39ff6a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 300px at 50% -60px, rgba(150,18,22,.55), rgba(10,10,10,0) 70%),
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0/14px 14px,
    var(--page-bg);
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;color:var(--ink);
}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--accent-bright)}
.wrap{width:1000px;max-width:96vw;margin:0 auto;padding:0 6px 30px}
/* ---------- masthead ---------- */
.hdr{position:relative;padding:26px 10px 4px;text-align:center}
.hdr .logo{
  font-family:"Archivo Black",Arial,sans-serif;font-size:64px;letter-spacing:-2px;line-height:.95;
  text-decoration:none;display:inline-block;
  background:linear-gradient(180deg,#fff 15%,#d9d9d9 38%,#6f6f6f 50%,#f2f2f2 62%,#9a9a9a 85%,#e8e8e8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #000) drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.hdr .logo .spot{background:linear-gradient(180deg,#ff5f6b 10%,#c8102e 48%,#6d0a12 55%,#e02335 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr .tag{color:#f3ead8;font-family:"Space Mono",monospace;font-size:13px;letter-spacing:1px;margin-top:8px}
.hdr .toprow{display:block}
.hdr .acct{margin-top:10px;font-family:"Space Mono",monospace;font-size:11px;color:#cfc7b4}
.hdr .acct a{color:var(--gold)}
.searchbar{text-align:center;padding:12px 0 2px;color:#cfc7b4;font-family:"Space Mono",monospace;font-size:11px}
.searchbar input[type=text]{width:260px;font-size:12px;padding:5px 8px;border:3px solid #000;background:var(--paper);box-shadow:3px 3px 0 #000}
.searchbar button{font-size:12px}
/* ---------- ticker ---------- */
.ticker{background:var(--accent);border-top:3px solid #000;border-bottom:3px solid #000;overflow:hidden;white-space:nowrap;margin:16px 0 0}
.ticker .track{display:inline-block;padding:6px 0;color:#fff;font-family:"Archivo Black",Arial,sans-serif;font-size:13px;letter-spacing:1px;animation:tick 30s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- nav ---------- */
.nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 4px 4px;background:transparent;border:none}
.nav a{
  color:#fff;text-decoration:none;font-family:"Archivo Black",Arial,sans-serif;font-size:12px;letter-spacing:.5px;
  background:#161616;border:2px solid #3d3d3d;border-radius:999px;padding:7px 14px;
  box-shadow:0 3px 0 #000;
}
.nav a:hover{background:var(--accent);color:#fff;border-color:#000;transform:translateY(1px);box-shadow:0 2px 0 #000}
/* ---------- hero banner ---------- */
.banner{
  margin-top:16px;background:var(--paper);border:3px solid #000;box-shadow:8px 8px 0 #000;
  text-align:center;padding:22px 16px;color:var(--ink);
}
.banner .big{font-family:"Archivo Black",Arial,sans-serif;font-size:38px;letter-spacing:-1px}
.banner .big .spot{color:var(--accent)}
.banner b{color:var(--accent)}
.signupbtn{
  display:inline-block;background:var(--gold);color:#000;font-family:"Archivo Black",Arial,sans-serif;font-size:14px;
  padding:10px 22px;border:3px solid #000;box-shadow:5px 5px 0 #000;text-decoration:none;margin-top:12px;
}
.signupbtn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 #000;color:#000}
/* ---------- layout & cards ---------- */
.cols{display:flex;gap:18px;padding:18px 2px 0}
.left{width:320px;flex:none}
.right{flex:1;min-width:0}
.box{background:var(--paper);border:3px solid #000;box-shadow:7px 7px 0 rgba(0,0,0,.9);margin-bottom:18px}
.box h3{
  background:var(--bar);color:var(--bar-text);margin:0;padding:9px 12px;
  font-family:"Archivo Black",Arial,sans-serif;font-size:14px;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:3px solid #000;display:flex;align-items:center;gap:8px;
}
.box h3::before{content:"";width:10px;height:10px;background:var(--accent-bright);flex:none;box-shadow:2px 2px 0 rgba(255,255,255,.25)}
.box h4{background:transparent;margin:10px 0 4px;padding:0 12px;font-family:"Space Mono",monospace;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.box .body{padding:10px 12px 12px}
table.kv{width:100%;border-collapse:separate;border-spacing:0 6px}
table.kv td{padding:7px 10px;vertical-align:top;background:var(--row)}
table.kv td.k{background:#141414;color:#fff;font-family:"Space Mono",monospace;font-weight:bold;width:38%;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
.pfp{width:170px;height:170px;object-fit:cover;border:3px solid #000;box-shadow:6px 6px 0 #000;transform:rotate(-1.6deg);display:block;background:#fff}
.pfp-sm{width:48px;height:48px;object-fit:cover;border:2px solid #000}
.pfp-xs{width:34px;height:34px;object-fit:cover;border:2px solid #000}
.profilename{font-family:"Archivo Black",Arial,sans-serif;font-size:26px;letter-spacing:-.5px}
.genre{color:#6b6252;font-family:"Space Mono",monospace;font-size:11px}
.mood b{color:var(--accent)}
.contact a{display:block;padding:3px 0;font-weight:bold}
.friendgrid{display:flex;flex-wrap:wrap;gap:10px}
.friend{width:82px;text-align:center;font-size:11px}
.friend .slot{width:70px;height:70px;margin:0 auto;border:3px dashed #141414;background:repeating-linear-gradient(45deg,#fffdf6,#fffdf6 6px,#efe6d0 6px,#efe6d0 12px);display:flex;align-items:center;justify-content:center;color:#6b6252;font-family:"Space Mono",monospace;font-size:9px;padding:2px}
.friend img{width:70px;height:70px;object-fit:cover;border:3px solid #000;box-shadow:3px 3px 0 #000}
.comment{border-bottom:2px solid #e5dcc4;padding:9px 0;display:flex;gap:10px}
.comment .meta{font-size:10px;color:#6b6252;font-family:"Space Mono",monospace}
.comment .txt{margin-top:2px}
textarea,input[type=text],input[type=email],input[type=password],select{font-family:Arial,Helvetica,sans-serif;font-size:13px;padding:5px 7px;border:2px solid #141414;background:#fff}
button,.btn{
  background:linear-gradient(180deg,#fff,#cfcfcf 45%,#8f8f8f 55%,#d9d9d9);border:2px solid #000;border-radius:999px;
  padding:6px 16px;font-family:"Archivo Black",Arial,sans-serif;font-size:11px;letter-spacing:.5px;cursor:pointer;color:#000;
  text-decoration:none;display:inline-block;box-shadow:0 3px 0 #000;
}
button:hover,.btn:hover{color:var(--accent);transform:translateY(1px);box-shadow:0 2px 0 #000}
.player{background:#0d0d0d;color:var(--lcd);padding:12px;font-family:"Space Mono",monospace;border:3px solid #000;box-shadow:inset 0 0 0 2px #2c2c2c, 6px 6px 0 rgba(0,0,0,.85)}
.player .t{color:#fff;font-family:"Archivo Black",Arial,sans-serif;font-size:12px;letter-spacing:.5px}
.footer{margin-top:26px;border-top:3px solid var(--accent);padding:14px 10px 26px;text-align:center;color:#cfc7b4;font-family:"Space Mono",monospace;font-size:11px}
.footer a{color:#f3ead8}
.small{font-size:11px;color:#6b6252}
.center{text-align:center}
.photogrid{display:flex;flex-wrap:wrap;gap:14px}
.photogrid figure{margin:0;width:128px;text-align:center;font-size:11px;background:#fff;padding:6px 6px 8px;border:2px solid #000;box-shadow:4px 4px 0 #000}
.photogrid figure:nth-child(odd){transform:rotate(-1.4deg)}
.photogrid figure:nth-child(even){transform:rotate(1.2deg)}
.photogrid img{width:100%;height:140px;object-fit:cover;border:1px solid #999}
.picpick{display:flex;flex-wrap:wrap;gap:8px}
.picpick label{border:2px solid #141414;padding:5px;text-align:center;width:70px;cursor:pointer;font-size:10px;background:#fff;box-shadow:3px 3px 0 #000}
.picpick input{margin:2px}
.picpick .tile{font-size:26px;display:block;line-height:36px}
.notice{background:#fff3bf;border:3px solid #000;padding:8px 10px;margin-bottom:12px;box-shadow:5px 5px 0 #000}
.err{background:#ffd9d9;border:3px solid var(--accent);padding:8px 10px;margin-bottom:12px}
.ok{background:#d8ffd9;border:3px solid #14551c;padding:8px 10px;margin-bottom:12px}
.blogentry{border-bottom:2px solid #e5dcc4;padding:8px 0}
.blogentry .when{color:#6b6252;font-size:11px;font-family:"Space Mono",monospace}
ul.tight{margin:4px 0 4px 18px;padding:0}
iframe.studio{width:100%;height:640px;border:3px solid #000;box-shadow:7px 7px 0 rgba(0,0,0,.9);background:#fff}
video.vc{width:240px;max-width:100%;border:3px solid #000;background:#000}