/* OKAAYSAMi's CHATTERBOX — arcade stylesheet v1 */
:root{
  --red:#ff1e2d; --green:#00ff66; --bg:#07070d; --panel:#101018;
  --ink:#f4f4f4; --dim:#9a9ab0; --gold:#ffd23f;
  --px:'Press Start 2P',monospace; --head:'Anton',sans-serif; --body:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:hidden}
/* CRT scanlines + vignette */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1999;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
img{max-width:100%;display:block}
a{color:inherit}
.hidden{display:none!important}
.r{color:var(--red)} .g{color:var(--green)}

/* pixel notched corners */
.px-cut{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}

/* ============ BOOT ============ */
#boot{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center;padding:20px}
.boot-inner{max-width:560px}
.boot-logo{width:150px;margin:0 auto 18px;image-rendering:auto;filter:drop-shadow(0 0 18px rgba(0,255,102,.45))}
.boot-title{font-family:var(--px);font-size:clamp(22px,6vw,44px);line-height:1.5;text-shadow:4px 4px 0 #000}
.boot-sub{font-family:var(--px);font-size:11px;color:var(--gold);margin:18px 0;letter-spacing:1px}
.boot-press{font-family:var(--px);font-size:clamp(14px,4vw,22px);color:#fff;margin:26px 0;text-shadow:0 0 12px var(--green)}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot-meta{font-family:var(--px);font-size:9px;color:var(--dim)}
.coin-slot{position:absolute;bottom:26px;right:26px;font-size:34px;animation:bounce 1.2s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-10px)}}
#boot.glitch-out{animation:bootglitch .45s steps(3) forwards}
@keyframes bootglitch{
  20%{transform:translateX(-14px) skewX(4deg);filter:hue-rotate(90deg)}
  40%{transform:translateX(12px);filter:invert(1)}
  60%{transform:translateX(-8px) skewX(-6deg);opacity:.4}
  100%{transform:scale(1.4);opacity:0}
}

/* ============ HUD ============ */
#hud{position:sticky;top:0;z-index:1000;background:rgba(5,5,10,.96);border-bottom:3px solid var(--green);
  display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.hud-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--px);font-size:11px}
.hud-brand img{width:34px;height:34px;object-fit:contain}
.hud-nav{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none}
.hud-nav::-webkit-scrollbar{display:none}
.hud-nav a{font-family:var(--px);font-size:8px;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:9px 8px;border:2px solid #2a2a3a;background:var(--panel)}
.hud-nav a:hover,.hud-nav a:active{border-color:var(--green);color:var(--green)}
.hud-stats{display:flex;align-items:center;gap:12px;margin-left:auto}
.xpwrap{display:flex;align-items:center;gap:6px}
.xplabel{font-family:var(--px);font-size:8px;color:var(--green)}
.xpbar{width:90px;height:10px;background:#1c1c28;border:2px solid #2a2a3a}
#xpfill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .2s}
.coins{font-family:var(--px);font-size:10px;color:var(--gold)}

/* ============ SCREENS ============ */
.screen{padding:34px 14px;max-width:1180px;margin:0 auto;scroll-margin-top:90px}
.screen-head{text-align:center;margin-bottom:22px}
.sh-num{display:inline-block;font-family:var(--px);font-size:10px;background:var(--red);color:#fff;padding:8px 14px;margin-bottom:12px;transform:rotate(-2deg)}
.screen-head h2{font-family:var(--head);font-size:clamp(30px,8vw,58px);letter-spacing:2px;
  background:linear-gradient(180deg,var(--green),#00b34a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 rgba(255,30,45,.85))}
.screen-head p{color:var(--dim);max-width:640px;margin:10px auto 0;font-size:15px}

/* hub */
.hub-hero{text-align:center;padding:44px 10px 30px}
.hub-kicker{font-family:var(--px);font-size:10px;color:var(--gold);margin-bottom:14px}
.hub-title{font-family:var(--head);font-size:clamp(38px,11vw,96px);line-height:1;letter-spacing:1px}
.hub-title .r{text-shadow:4px 4px 0 #5c0006}.hub-title .g{text-shadow:4px 4px 0 #003d1c}
.hub-sub{color:var(--dim);margin:16px 0 24px;font-size:16px}
.hub-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.px-btn{display:inline-block;font-family:var(--px);font-size:11px;text-decoration:none;padding:15px 18px;color:#04120a;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .12s}
.px-btn.green{background:var(--green);box-shadow:0 5px 0 #00963c}
.px-btn.red{background:var(--red);color:#fff;box-shadow:0 5px 0 #8f0010}
.px-btn:active{transform:translateY(4px);box-shadow:none}
.px-btn.big{font-size:13px;padding:18px 22px}
.worldsel-title{font-family:var(--px);font-size:13px;text-align:center;margin:34px 0 18px;color:var(--gold)}
.world-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.world-card{background:var(--panel);border:3px solid #2a2a3a;padding:18px 12px;text-align:center;text-decoration:none;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:border-color .15s}
.world-card:hover{border-color:var(--red)}
.world-card:nth-child(odd):hover{border-color:var(--green)}
.wc-icon{font-size:34px}
.wc-num{font-family:var(--px);font-size:9px;color:var(--red);margin:10px 0 6px}
.wc-name{font-family:var(--head);font-size:20px;letter-spacing:1px}
.wc-desc{font-size:12px;color:var(--dim);margin-top:6px}

/* feed labels + cards */
.feed-label{font-family:var(--px);font-size:11px;color:var(--green);margin:26px 0 14px}
.card-grid{display:grid;grid-template-columns:1fr;gap:14px}
.acard{background:var(--panel);border:3px solid #2a2a3a;cursor:pointer;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.acard:hover{border-color:var(--green)}
.acard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.acard-body{padding:12px}
.atag{display:inline-block;font-family:var(--px);font-size:8px;background:#2a2a3a;padding:5px 8px;margin-bottom:8px}
.acard h3{font-family:var(--head);font-size:19px;letter-spacing:.5px;margin-bottom:8px}
.byline{font-size:12px;margin-bottom:8px}
.byline .who{font-weight:700;padding:2px 8px;font-size:11px}
.byline .sami{background:var(--gold);color:#111}
.byline .intern{background:var(--green);color:#04120a}
.byline .date{color:var(--dim);font-size:11px}
.aread{font-family:var(--px);font-size:9px;color:var(--green)}

/* IG grid */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ig-card{position:relative;display:block;text-decoration:none;background:var(--panel);border:2px solid #2a2a3a;overflow:hidden}
.ig-card:hover{border-color:var(--red)}
.ig-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ig-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.92));padding:22px 8px 8px;font-size:11px;line-height:1.35}
.ig-cap .d{color:var(--green);font-family:var(--px);font-size:7px;display:block;margin-bottom:3px}
.ig-note{text-align:center;color:var(--dim);font-size:13px;margin-top:12px}

/* levels */
.level-list{display:grid;grid-template-columns:1fr;gap:14px}
.level-card{background:var(--panel);border:3px solid #2a2a3a;display:grid;grid-template-columns:110px 1fr;position:relative;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.level-card img{width:110px;height:100%;object-fit:cover}
.lvl-badge{position:absolute;top:8px;left:8px;font-family:var(--px);font-size:8px;background:var(--red);color:#fff;padding:6px 8px}
.lvl-body{padding:12px}
.lvl-body h3{font-family:var(--head);font-size:18px;letter-spacing:.5px}
.lvl-meta{font-size:12px;color:var(--green);margin:4px 0 8px;font-weight:600}
.lvl-body p{font-size:13px;color:var(--dim);margin-bottom:10px}
.status{font-family:var(--px);font-size:8px;padding:6px 8px;display:inline-block}
.status.done{background:var(--green);color:#04120a}
.status.soon{background:#2a2a3a;color:var(--dim)}
.lvl-link{font-family:var(--px);font-size:8px;color:var(--gold);text-decoration:none;margin-left:8px}
.lvl-lock{font-size:44px;display:flex;align-items:center;justify-content:center;background:#0c0c14;min-height:140px}

/* boss battles */
.cut-zone{border:3px dashed #2a2a3a;padding:16px 12px;margin-bottom:22px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.basic-zone{border-color:#4a4a5a}
.pro-zone{border-color:var(--red);background:linear-gradient(180deg,rgba(255,30,45,.06),transparent)}
.zone-banner{font-family:var(--px);font-size:11px;margin-bottom:8px}
.basic-zone .zone-banner{color:var(--dim)}
.pro-zone .zone-banner{color:var(--red);text-shadow:0 0 10px rgba(255,30,45,.6)}
.zone-sub{font-size:13px;color:var(--dim);margin-bottom:14px}
.tier-grid{display:grid;grid-template-columns:1fr;gap:14px}
.tier{background:var(--panel);border:3px solid #2a2a3a;padding:16px;position:relative;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.basic-zone .tier:hover{border-color:var(--dim)}
.pro-zone .tier{border-color:var(--red)}
.pro-zone .tier:hover{border-color:var(--green)}
.tier-boss{font-family:var(--px);font-size:9px;color:var(--gold);margin-bottom:6px}
.tier-name{font-family:var(--head);font-size:26px;letter-spacing:1px}
.tier-price{font-family:var(--px);font-size:22px;color:var(--green);margin:8px 0;text-shadow:0 0 12px rgba(0,255,102,.5)}
.tier-pos{font-size:13px;color:var(--dim);font-style:italic;margin-bottom:10px}
.tier ul{list-style:none;margin-bottom:14px}
.tier li{font-size:13px;padding:5px 0 5px 22px;position:relative;color:var(--ink)}
.tier li::before{content:"▸";position:absolute;left:4px;color:var(--green)}
.basic-zone .tier li::before{color:var(--dim)}
.tier .px-btn{width:100%;text-align:center}
.tier.final .tier-price{color:var(--red);text-shadow:0 0 14px rgba(255,30,45,.7);animation:finalpulse 1.6s ease-in-out infinite}
@keyframes finalpulse{50%{transform:scale(1.04)}}
.boss-cta{text-align:center;margin-top:8px}

/* trophy room */
.accolades-art{width:100%;max-width:640px;margin:0 auto 20px;border:3px solid var(--gold)}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ach{background:var(--panel);border:3px solid var(--gold);padding:14px;text-align:center;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.ach-icon{font-size:32px}
.ach-name{font-family:var(--px);font-size:9px;color:var(--gold);margin:10px 0 6px;line-height:1.6}
.ach-desc{font-size:12px;color:var(--dim)}
.locked-ach{border-color:#2a2a3a;opacity:.6}

/* character */
.player-card{background:var(--panel);border:3px solid var(--green);display:grid;grid-template-columns:1fr;overflow:hidden;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.pc-photo img{width:100%;height:320px;object-fit:cover;object-position:top}
.pc-info{padding:18px}
.pc-name{font-family:var(--px);font-size:20px;color:var(--green);text-shadow:0 0 12px rgba(0,255,102,.5)}
.pc-real{font-size:12px;color:var(--dim);margin:8px 0 12px;letter-spacing:2px}
.pc-bio{font-size:14px;line-height:1.6;margin-bottom:16px}
.stat{display:grid;grid-template-columns:80px 1fr 36px;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--px);font-size:8px}
.statbar{height:12px;background:#1c1c28;border:2px solid #2a2a3a}
.statbar i{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,var(--red),var(--green))}
.stat b{color:var(--gold);text-align:right}
.pc-info .px-btn{margin-top:14px}

/* final boss */
.final-boss{background:linear-gradient(180deg,#16060a,#07070d);border:4px solid var(--red);padding:26px 18px;text-align:center;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.final-boss h3{font-family:var(--px);font-size:16px;color:var(--red);margin:14px 0 10px}
.final-boss p{color:var(--dim);margin-bottom:18px}
.fb-hp{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--px);font-size:9px;color:var(--red)}
.hpbar{width:180px;height:14px;background:#1c1c28;border:2px solid var(--red)}
.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#ff7a00);animation:hpdrain 6s ease-in-out infinite alternate}
@keyframes hpdrain{to{width:8%}}
.fb-btns{display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:16px}
.fb-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.fb-social a{font-size:13px;color:var(--green);text-decoration:none}

/* footer */
footer{text-align:center;padding:34px 14px 60px;border-top:3px solid var(--green);margin-top:20px}
.foot-game{font-family:var(--px);font-size:12px;color:var(--gold);margin-bottom:12px}
.foot-small{font-size:12px;color:var(--dim)}

/* reader */
#reader{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.9);display:flex;align-items:flex-start;justify-content:center;padding:20px 12px;overflow-y:auto}
.reader-box{background:var(--panel);border:3px solid var(--green);max-width:640px;width:100%;position:relative;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
#readerClose{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;border:none;font-family:var(--px);font-size:12px;padding:10px 12px;cursor:pointer;z-index:2}
.reader-box img{width:100%;max-height:380px;object-fit:cover;object-position:top}
.reader-tag{font-family:var(--px);font-size:8px;color:var(--green);padding:14px 18px 0}
.reader-box h2{font-family:var(--head);font-size:26px;padding:8px 18px;letter-spacing:.5px}
.reader-byline{padding:0 18px 12px;font-size:13px;color:var(--dim)}
#readerBody{padding:0 18px 26px;font-size:16px;line-height:1.7}

/* toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:2600;background:#0d0d16;border:3px solid var(--gold);
  padding:12px 18px;text-align:center;min-width:260px;animation:toastin .3s ease-out;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
@keyframes toastin{from{transform:translateX(-50%) translateY(30px);opacity:0}}
.toast-title{font-family:var(--px);font-size:9px;color:var(--gold);margin-bottom:6px}
#toastText{font-size:14px}

/* konami */
#konami{position:fixed;inset:0;z-index:2700;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.konami-box{text-align:center;font-family:var(--px);font-size:16px;line-height:2;color:var(--green)}
.konami-box span{color:var(--gold);font-size:11px}
.konami-box .px-btn{margin-top:18px}

/* coin fx */
.coin-pop{position:fixed;z-index:2600;font-family:var(--px);font-size:12px;color:var(--gold);pointer-events:none;animation:coinup .8s ease-out forwards}
@keyframes coinup{to{transform:translateY(-60px);opacity:0}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.reveal.on{opacity:1;transform:none}

/* desktop */
@media(min-width:760px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .world-grid{grid-template-columns:repeat(3,1fr)}
  .tier-grid{grid-template-columns:repeat(2,1fr)}
  .ach-grid{grid-template-columns:repeat(4,1fr)}
  .level-card{grid-template-columns:200px 1fr}
  .level-card img{width:200px}
  .player-card{grid-template-columns:340px 1fr}
  .pc-photo img{height:100%}
  .fb-btns{flex-direction:row;justify-content:center}
}
@media(min-width:1100px){ .card-grid{grid-template-columns:repeat(3,1fr)} }