/* Tokon Arena — Marvel Tokon: Fighting Souls guides.
   Marvel / Arc System Works comic-arena theme: ink-navy base + Marvel red + electric blue + comic gold. Mobile-first. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0e1a;
  --bg-soft:#0e1322;
  --panel:#121a2e;
  --panel-2:#0f1626;
  --ink:#eef1f7;
  --muted:#93a0b5;
  --red:#ec1d24;
  --red-bright:#ff3b41;
  --red-dark:#9e1419;
  --blue:#2b7fff;
  --blue-bright:#4d97ff;
  --gold:#ffc72c;
  --gold-bright:#ffd75e;
  --teal:#22c3b5;
  --green:#22c55e;
  --purple:#8b5cf6;
  --border:#243049;
  --shadow:0 2px 12px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px;line-height:1.7;
  background-image:
    radial-gradient(1200px 620px at 50% -220px,rgba(236,29,36,.14),transparent 70%),
    radial-gradient(1000px 520px at 100% -40px,rgba(43,127,255,.12),transparent 72%),
    radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,auto,22px 22px;
}

/* Layout */
.wrap{max-width:880px;margin:0 auto;padding:0 18px;}

/* Header / nav */
header{
  background:linear-gradient(180deg,#0b1020,#0a0e1a);
  border-bottom:3px solid var(--red);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(236,29,36,.35);
}
.site-title{
  font-family:"Anton",sans-serif;font-size:30px;font-weight:400;
  letter-spacing:1.5px;padding:16px 0 0;text-transform:uppercase;
}
.site-title a{
  color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--red-bright),var(--red));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tagline{font-size:13px;color:var(--muted);padding-bottom:12px;letter-spacing:.4px;}
nav{background:#080b14;border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
nav .wrap{display:flex;gap:2px;padding:0 10px;}
nav a{
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:700;
  padding:12px 13px;display:inline-block;border-bottom:3px solid transparent;
  font-family:"Oswald",sans-serif;letter-spacing:.6px;text-transform:uppercase;
}
nav a:hover,nav a.active{color:#fff;border-bottom-color:var(--red);}

/* Comic hero (home) */
.hero{
  position:relative;overflow:hidden;text-align:center;
  border-bottom:3px solid var(--red);
  background:linear-gradient(180deg,#0c1124,#0a0e1a);
  padding:46px 18px 50px;margin-bottom:6px;
}
.hero::before{
  content:"";position:absolute;inset:-10%;
  background:conic-gradient(from 0deg,
    rgba(236,29,36,.22) 0 20deg, transparent 20deg 40deg,
    rgba(43,127,255,.20) 40deg 60deg, transparent 60deg 80deg,
    rgba(255,199,44,.16) 80deg 100deg, transparent 100deg 120deg,
    rgba(236,29,36,.22) 120deg 140deg, transparent 140deg 160deg,
    rgba(43,127,255,.20) 160deg 180deg, transparent 180deg 200deg,
    rgba(255,199,44,.16) 200deg 220deg, transparent 220deg 240deg,
    rgba(236,29,36,.22) 240deg 260deg, transparent 260deg 280deg,
    rgba(43,127,255,.20) 280deg 300deg, transparent 300deg 320deg,
    rgba(255,199,44,.16) 320deg 340deg, transparent 340deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 45%,#000 18%,transparent 72%);
          mask:radial-gradient(circle at 50% 45%,#000 18%,transparent 72%);
  opacity:.9;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.kicker{
  display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:3px;font-size:13px;
  color:var(--gold);border:1px solid rgba(255,199,44,.4);
  padding:4px 12px;border-radius:999px;margin-bottom:14px;
  background:rgba(255,199,44,.07);
}
.hero-title{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,9vw,76px);line-height:.95;margin:0;letter-spacing:1px;
  color:#fff;
  text-shadow:
    3px 3px 0 var(--red),
    6px 6px 0 rgba(43,127,255,.65),
    0 0 26px rgba(236,29,36,.35);
}
.hero-title .line2{color:var(--gold-bright);text-shadow:3px 3px 0 var(--red),6px 6px 0 rgba(43,127,255,.55);}
.hero-sub{font-size:16px;color:var(--muted);max-width:540px;margin:18px auto 0;}

/* Compact page hero (content pages) */
.page-hero{
  position:relative;overflow:hidden;text-align:center;
  border-bottom:3px solid var(--red);
  background:linear-gradient(180deg,#0c1124,#0a0e1a);
  padding:30px 18px 32px;margin-bottom:6px;
}
.page-hero::before{
  content:"";position:absolute;inset:-10%;
  background:conic-gradient(from 0deg,
    rgba(236,29,36,.18) 0 20deg, transparent 20deg 40deg,
    rgba(43,127,255,.16) 40deg 60deg, transparent 60deg 80deg,
    rgba(255,199,44,.12) 80deg 100deg, transparent 100deg 120deg,
    rgba(236,29,36,.18) 120deg 140deg, transparent 140deg 160deg,
    rgba(43,127,255,.16) 160deg 180deg, transparent 180deg 200deg,
    rgba(255,199,44,.12) 200deg 220deg, transparent 220deg 240deg,
    rgba(236,29,36,.18) 240deg 260deg, transparent 260deg 280deg,
    rgba(43,127,255,.16) 280deg 300deg, transparent 300deg 320deg,
    rgba(255,199,44,.12) 320deg 340deg, transparent 340deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 45%,#000 16%,transparent 70%);
          mask:radial-gradient(circle at 50% 45%,#000 16%,transparent 70%);
  opacity:.7;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1;}
.ph-kicker{
  display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--gold);
  border:1px solid rgba(255,199,44,.4);padding:4px 12px;border-radius:999px;margin-bottom:12px;
  background:rgba(255,199,44,.07);
}
.page-hero h1{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,7vw,52px);line-height:1;margin:0;letter-spacing:1px;color:#fff;
  text-shadow:2px 2px 0 var(--red),4px 4px 0 rgba(43,127,255,.6),0 0 22px rgba(236,29,36,.3);
}

/* Content */
main{padding:30px 0 44px;}
h1,h2,h3{font-family:"Oswald",sans-serif;line-height:1.2;}
h1{font-size:30px;margin:6px 0 10px;color:var(--gold-bright);text-transform:uppercase;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.5);}
h2{font-size:22px;margin:38px 0 12px;padding-bottom:8px;color:#fff;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--red);position:relative;}
h2::after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:2px;background:var(--gold);}
h3{font-size:18.5px;margin:24px 0 8px;color:var(--gold-bright);text-transform:uppercase;letter-spacing:.4px;}
p{margin:11px 0;}
ul,ol{margin:11px 0;padding-left:24px;}
li{margin:6px 0;}
a{color:var(--blue-bright);}
.updated{font-size:13px;color:var(--muted);margin-bottom:16px;font-style:italic;}
.lead{font-size:19px;color:#dfe5f0;}
strong{color:#fff;}

/* Tier badges */
.tier{display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;border-radius:4px;padding:2px 9px;color:#0a0e1a;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;}
.tier-s{background:linear-gradient(180deg,var(--red-bright),var(--red));color:#fff;}
.tier-a{background:linear-gradient(180deg,#ffb02e,var(--gold));}
.tier-b{background:linear-gradient(180deg,var(--blue-bright),var(--blue));color:#fff;}
.tier-c{background:linear-gradient(180deg,#3ad6c8,var(--teal));color:#06231f;}
.tier-d{background:#5b6577;color:#fff;}

/* Tables */
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px;}
th{background:var(--panel);text-align:left;padding:9px;border:1px solid var(--border);color:var(--gold-bright);text-transform:uppercase;font-family:"Oswald",sans-serif;letter-spacing:.4px;font-size:13.5px;}
td{padding:9px;border:1px solid var(--border);vertical-align:top;background:rgba(255,255,255,.015);}
tr:nth-child(even) td{background:rgba(43,127,255,.05);}

/* Combo notation */
.combo-box{
  background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--red);
  padding:14px 16px;margin:14px 0;border-radius:0 8px 8px 0;
}
.combo-box .combo-title{font-weight:700;color:var(--red-bright);margin-bottom:6px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.4px;}
.combo-box .notation{font-size:16px;color:#fff;letter-spacing:.5px;font-family:"Oswald",sans-serif;}
.combo-box .damage{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic;}
kbd{
  display:inline-block;background:#0c1322;border:1px solid var(--border);
  border-radius:4px;padding:1px 6px;font-size:14px;color:var(--gold-bright);
  font-family:"Oswald",sans-serif;box-shadow:0 2px 0 #000;letter-spacing:.5px;
}

/* Callouts */
.tip{background:rgba(34,197,94,.10);border-left:4px solid var(--green);padding:12px 14px;margin:14px 0;border-radius:0 6px 6px 0;}
.warn{background:rgba(236,29,36,.10);border-left:4px solid var(--red);padding:12px 14px;margin:14px 0;border-radius:0 6px 6px 0;}
.note{background:rgba(43,127,255,.10);border-left:4px solid var(--blue);padding:12px 14px;margin:14px 0;border-radius:0 6px 6px 0;}
.note strong{color:var(--blue-bright);}

/* Image frame & placeholder */
.img-frame{
  margin:18px 0;border:1px solid var(--border);border-radius:8px;
  overflow:hidden;background:#0b1120;box-shadow:var(--shadow);
}
.img-frame img{display:block;width:100%;height:auto;vertical-align:top;}
.img-frame .cap{
  display:block;padding:9px 12px;font-size:13.5px;color:var(--muted);
  background:#080b14;border-top:1px solid var(--border);font-style:italic;line-height:1.5;
}
.img-frame .cap a{color:var(--blue-bright);}
.img-placeholder{
  aspect-ratio:16/9;background:
    repeating-linear-gradient(45deg,rgba(43,127,255,.06) 0 10px,transparent 10px 20px),
    linear-gradient(135deg,#0f1626,#0a0e1a);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:14px;font-style:italic;text-align:center;padding:20px;
  border:2px dashed var(--border);
}

/* Ad slots — hidden until AdSense live */
.ad-slot{display:none;}

/* Affiliate button — Marvel red→gold */
.aff-button{
  display:block;text-align:center;
  background:linear-gradient(180deg,var(--red-bright),var(--red));
  color:#fff !important;font-family:"Oswald",sans-serif;font-weight:700;
  font-size:16.5px;text-decoration:none;border-radius:8px;
  padding:15px 18px;margin:24px 0;box-shadow:var(--shadow);letter-spacing:.6px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.15);
}
.aff-button:hover{background:linear-gradient(180deg,#ff5a5f,var(--red));}
/* secondary affiliate button (G2A / Kinguin — PC keys) */
.aff-button.alt{background:transparent;color:var(--blue-bright) !important;border:1px solid var(--blue);}
.aff-button.alt:hover{background:rgba(43,127,255,.14);}

/* Promo card */
.promo-card{
  border:1px solid var(--border);border-radius:10px;background:var(--panel);
  box-shadow:var(--shadow);margin:24px 0;overflow:hidden;
}
.promo-card .promo-head{
  background:linear-gradient(180deg,#16203a,#0f1626);
  border-bottom:1px solid var(--border);
  padding:11px 14px;font-family:"Oswald",sans-serif;font-weight:700;color:var(--gold-bright);font-size:15px;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px;
}
.promo-card .promo-head::before{content:"◆";color:var(--red);}
.promo-card .promo-body{padding:14px;}
.promo-card ul{margin:0;padding-left:20px;font-size:15px;}
.promo-card li{margin:6px 0;}
.promo-card .promo-cta{
  display:block;text-align:center;margin-top:12px;
  background:linear-gradient(180deg,var(--red-bright),var(--red));
  color:#fff !important;font-family:"Oswald",sans-serif;font-weight:700;
  text-decoration:none;border-radius:7px;padding:12px;letter-spacing:.6px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.15);
}
.promo-card .promo-cta.alt{background:transparent;color:var(--blue-bright) !important;border:1px solid var(--blue);}
.promo-card .promo-cta.alt:hover{background:rgba(43,127,255,.14);}

/* FAQ */
.faq{margin:18px 0;}
.faq details{border:1px solid var(--border);border-radius:6px;margin:8px 0;background:var(--panel);}
.faq summary{cursor:pointer;font-weight:600;padding:12px 14px;font-size:15.5px;color:#fff;font-family:"Oswald",sans-serif;letter-spacing:.3px;}
.faq details[open]{background:rgba(43,127,255,.06);}
.faq .faq-a{padding:0 14px 12px;font-size:15.5px;color:#dfe5f0;}

/* Cards */
.card-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0;}
.card{
  border:1px solid var(--border);border-radius:8px;padding:16px;background:var(--panel);
  transition:border-color .15s,transform .15s,box-shadow .15s;
  border-top:3px solid var(--red);
}
.card:nth-child(2n){border-top-color:var(--blue);}
.card:nth-child(3n){border-top-color:var(--gold);}
.card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 8px 22px rgba(236,29,36,.18);}
.card h3{margin:0 0 6px;color:var(--gold-bright);}
.card p{margin:6px 0 10px;font-size:14.5px;color:var(--muted);}
.card a.go{font-weight:700;text-decoration:none;color:var(--red-bright);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.4px;}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr;}}

/* Team badges */
.team-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;margin-left:6px;letter-spacing:.4px;}
.team-avengers{background:rgba(236,29,36,.18);color:#ff8a8e;border:1px solid var(--red-dark);}
.team-guardians{background:rgba(43,127,255,.18);color:#8fb8ff;border:1px solid var(--blue);}
.team-xmen{background:rgba(255,199,44,.18);color:var(--gold-bright);border:1px solid #b8901a;}
.team-doom{background:rgba(139,92,246,.18);color:#c4a7ff;border:1px solid #5b3fa0;}
.team-outriders{background:rgba(34,197,94,.18);color:#86efac;border:1px solid #15803d;}

/* Footer */
footer{background:#080b14;color:var(--muted);font-size:13px;padding:28px 0 28px 4%;margin-top:24px;border-top:3px solid var(--red);text-align:left;}
footer a{color:var(--blue-bright);}
footer .tagline{font-family:'Oswald',sans-serif;font-style:normal;font-size:14px;color:var(--gold);padding-bottom:0;letter-spacing:.6px;text-align:left;margin:4px 0 0;text-transform:uppercase;}

/* Responsive text */
@media(max-width:480px){
  h1{font-size:24px;}
  h2{font-size:19px;}
  body{font-size:17px;}
  .site-title{font-size:24px;}
}