/*  strikeshipsmashers.com
 *
 *  THE GAME'S OWN LOOK, not the studio's.  starglaze.games is a cute pixel-space sticker
 *  book in cream and violet; this is the in-game UI: near-black, hot pink and cyan, heavy
 *  black keylines, slabs cut on an angle and headers set as ransom-note letter tiles.
 *  The two sites are meant to read as a studio and one of its games, not as twins.
 *
 *  THE BOARD PAGES KEEP THEIR OWN STYLESHEET.  assets/board.css is untouched and loaded
 *  after this one, so the leaderboard and champion tables stay exactly as they are today
 *  while the chrome around them changes.
 */
:root{
  color-scheme: dark;
  --void:#0B0718;          /* the ground, near black with a blue cast */
  --deep:#140D2B;          /* panel */
  --panel:#1B1238;         /* raised panel */
  --ink:#05030C;           /* the keyline, almost black */
  --paper:#FFF6EA;         /* headline tiles and body text */
  --dim:#A99CC7;
  --pink:#FF2D7A;
  --cyan:#3FE0F0;
  --lime:#D6FF3D;
  --line:rgba(255,246,234,.14);
  --shadow:5px 5px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --f-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-pixel:"Silkscreen","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--void); color:var(--paper); font-family:var(--f-body);
  font-size:16px; line-height:1.65; overflow-x:hidden;
}
/*  A starfield and one long diagonal, which is the shape the in-game screens are built
 *  around.  Fixed and behind everything, so scrolling does not drag it. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 81% 11%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 34% 71%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 63% 44%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 91% 79%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 22% 93%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 47% 29%, #fff 50%, transparent 50%),
    linear-gradient(115deg, transparent 46%, rgba(63,224,240,.05) 46%,
                    rgba(63,224,240,.05) 54%, transparent 54%),
    radial-gradient(900px 500px at 78% -8%, rgba(255,45,122,.16), transparent 70%);
  opacity:.85;
}
main,header,footer{position:relative; z-index:1}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--lime); color:var(--ink); padding:8px 12px;
            z-index:50; border-radius:4px}

/* ---------------------------------------------------------------- the bar */
header.bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:3px solid var(--ink);
  background:linear-gradient(180deg, rgba(27,18,56,.96), rgba(11,7,24,.96));
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px);
}
.brand{
  font-family:var(--f-display); text-decoration:none; color:var(--paper);
  line-height:1; display:flex; flex-direction:column; letter-spacing:.5px;
}
.brand span{font-size:12px; color:var(--cyan)}
.brand b{font-size:19px; color:var(--paper)}
header nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
header nav a{
  font-family:var(--f-display); font-size:12px; letter-spacing:.6px;
  color:var(--dim); text-decoration:none; padding:7px 11px;
  border:2px solid transparent; transform:skewX(-8deg);
}
header nav a > *{display:inline-block; transform:skewX(8deg)}
header nav a:hover{color:var(--paper); background:var(--panel); border-color:var(--line)}
header nav a.on{color:var(--ink); background:var(--lime); border-color:var(--ink)}
.burger{display:none; margin-left:auto; background:var(--panel); color:var(--paper);
        border:2px solid var(--line); border-radius:6px; font-size:18px; padding:4px 10px;
        cursor:pointer}

/* ---------------------------------------------------------------- hero */
.hero{padding:62px 0 34px; text-align:center}
.kicker{font-family:var(--f-pixel); font-size:11px; letter-spacing:2px; color:var(--cyan);
        margin:0 0 14px}
h1.rnote{margin:0; line-height:1; display:flex; justify-content:center; flex-wrap:wrap;
         gap:4px}
/*  RANSOM NOTE: one tile per letter, cut from different paper.  The tilt is per letter and
 *  fixed rather than random, so the page looks the same on every load. */
.rn{
  font-family:var(--f-display); font-size:clamp(34px,8vw,76px); line-height:1;
  padding:4px 11px 7px; color:var(--ink); background:var(--paper);
  border:3px solid var(--ink); box-shadow:var(--shadow);
  transform:rotate(var(--t)); display:inline-block;
}
.rn.pink{background:var(--pink); color:var(--paper)}
.rn.cyan{background:var(--cyan)}
.rn.lime{background:var(--lime)}
.rn.white{background:var(--paper)}
.rn-sp{width:16px; display:inline-block}
.lede{max-width:66ch; margin:22px auto 0; color:var(--paper); font-size:17px}

/* ---------------------------------------------------------------- sections */
.band{padding:34px 20px}
h2.sec{
  font-family:var(--f-display); font-size:clamp(20px,3.4vw,30px); margin:0 0 6px;
  color:var(--paper); letter-spacing:.5px;
}
/*  HAZARD TAPE, which is what the game puts across the top of its own dialogs.  The
 *  stripes were pink on near-black, so against a near-black page it read as three stray
 *  dashes rather than a bar: the second colour has to be one you can actually see. */
h2.sec::after{
  content:""; display:block; width:124px; height:9px; margin-top:10px;
  background:repeating-linear-gradient(135deg, var(--pink) 0 8px, var(--paper) 8px 16px);
  border:2px solid var(--ink);
}
.sec-sub{color:var(--dim); max-width:70ch; margin:10px 0 20px}

.cards{display:grid; gap:16px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:var(--deep); border:3px solid var(--ink); box-shadow:var(--shadow);
  padding:18px; position:relative;
}
.card h2,.card h3{font-family:var(--f-display); margin:0 0 8px; font-size:17px;
                  color:var(--cyan); letter-spacing:.4px}
.card h2{font-size:21px}
.card p{margin:0 0 10px; color:var(--paper)}
a.card{text-decoration:none; display:block; transition:transform .12s ease}
a.card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.more{font-family:var(--f-pixel); font-size:11px; color:var(--lime); letter-spacing:1px}

.note{
  background:var(--panel); border:3px solid var(--ink); border-left:10px solid var(--pink);
  box-shadow:var(--shadow); padding:16px 18px;
}
.note p{margin:0 0 10px}
.note p:last-child{margin:0}

.cta{text-align:center}
.btn{
  display:inline-block; font-family:var(--f-display); font-size:14px; letter-spacing:.6px;
  text-decoration:none; padding:12px 22px; margin:6px;
  background:var(--pink); color:var(--paper);
  border:3px solid var(--ink); box-shadow:var(--shadow); transform:skewX(-8deg);
}
.btn > *{display:inline-block; transform:skewX(8deg)}
.btn:hover{transform:skewX(-8deg) translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.btn.ghost{background:var(--panel); color:var(--paper)}

/* ---------------------------------------------------------------- champions */
.champs{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.champ{
  background:var(--deep); border:3px solid var(--ink); box-shadow:var(--shadow);
  padding:16px 18px;
}
.champ header{margin-bottom:10px}
.champ h3{font-family:var(--f-display); margin:0; font-size:21px; color:var(--paper);
          letter-spacing:.5px}
.champ .title{margin:2px 0 0; font-family:var(--f-pixel); font-size:10px;
              letter-spacing:1.4px; color:var(--cyan)}
.champ .blurb{margin:0 0 14px; font-size:15px}
.stat{display:flex; align-items:center; gap:10px; margin-bottom:5px}
.stat span{font-family:var(--f-pixel); font-size:9px; letter-spacing:1px; color:var(--dim);
           width:68px; flex:none}
.pips{display:flex; gap:3px}
.pips i{width:16px; height:9px; background:var(--panel); border:2px solid var(--ink);
        display:block}
.pips i.on{background:var(--cyan)}
.diff{margin:12px 0 0; font-family:var(--f-pixel); font-size:9px; letter-spacing:1.4px;
      color:var(--dim); display:flex; align-items:center; gap:8px}
.stars{display:flex; gap:3px}
.stars i{width:10px; height:10px; background:var(--panel); border:2px solid var(--ink);
         transform:rotate(45deg); display:block}
.stars i.on{background:var(--pink)}

/* ---------------------------------------------------------------- press */
table.facts{width:100%; border-collapse:collapse; background:var(--deep);
            border:3px solid var(--ink); box-shadow:var(--shadow)}
table.facts th,table.facts td{text-align:left; padding:10px 14px;
                              border-bottom:2px solid var(--ink)}
table.facts th{font-family:var(--f-pixel); font-size:10px; letter-spacing:1px;
               color:var(--cyan); white-space:nowrap; width:1%}
table.facts tr:last-child th,table.facts tr:last-child td{border-bottom:0}
blockquote{
  margin:0 0 18px; padding:16px 20px; font-size:19px; font-family:var(--f-display);
  line-height:1.4; background:var(--panel); border:3px solid var(--ink);
  border-left:10px solid var(--cyan); box-shadow:var(--shadow);
}

/* ---------------------------------------------------------------- footer */
footer{border-top:3px solid var(--ink); margin-top:40px;
       background:linear-gradient(180deg, rgba(20,13,43,.9), rgba(11,7,24,.9))}
.foot{padding:26px 20px; font-size:14px}
.foot p{margin:0 0 8px}
.foot .dim{color:var(--dim)}
a{color:var(--cyan)}
a:hover{color:var(--lime)}

@media (max-width:760px){
  .burger{display:block}
  header nav{display:none; width:100%; margin-left:0}
  header nav.open{display:flex}
  header nav a{flex:1 1 40%; text-align:center}
  .hero{padding:40px 0 24px}
  .rn{border-width:2px; box-shadow:var(--shadow-sm); padding:3px 8px 5px}
  .wrap{padding:0 16px}
  .band{padding:26px 16px}
}
@media (prefers-reduced-motion:reduce){
  a.card:hover,.btn:hover{transform:none}
}

/* ================================================================== the boards
 *  THE TABLES ARE board.js's OWN MARKUP, styled here in the game's colours rather than
 *  by assets/board.css.  That stylesheet is the STUDIO site's look and it also defines
 *  .bar, .card, .band, .hero and ninety-odd variables of its own, so loading both would
 *  have been two stylesheets fighting over the chrome.  The script is untouched and
 *  shared; only the paint is different, which is the whole point of a site of its own.
 */
.board-wrap{
  background:var(--deep); border:3px solid var(--ink); box-shadow:var(--shadow);
  padding:0; overflow:hidden;
}
.scroller{overflow-x:auto}
#board table,#champs table{width:100%; border-collapse:collapse; font-size:15px}
#board caption,#champs caption{
  caption-side:top; text-align:left; padding:12px 16px;
  font-family:var(--f-pixel); font-size:10px; letter-spacing:1.2px; color:var(--cyan);
  background:var(--panel); border-bottom:3px solid var(--ink);
}
#board th,#champs th{
  font-family:var(--f-pixel); font-size:9px; letter-spacing:1.2px; color:var(--dim);
  text-align:left; padding:9px 14px; border-bottom:2px solid var(--ink);
  white-space:nowrap; background:var(--panel);
}
#board td,#champs td{padding:9px 14px; border-bottom:1px solid var(--line)}
#board tbody tr:hover,#champs tbody tr:hover{background:var(--panel)}
/*  THE TOP THREE ARE MARKED, not coloured in: a gold row is a different thing from a
 *  row whose place happens to be 1, and the game's own boards use a keyline for it. */
#board tr.top td{background:rgba(255,45,122,.09)}
#board tr.top td.place{color:var(--lime)}
td.place,td.num,td.sr,td.games,td.rate{font-family:var(--f-pixel); font-size:12px}
td.place{color:var(--cyan); width:1%; white-space:nowrap}
td.who{font-weight:700}
td.tier{font-family:var(--f-pixel); font-size:10px; letter-spacing:1px; color:var(--lime)}
td.sr{color:var(--paper)}
.meter{display:inline-block; min-width:90px; height:10px; background:var(--panel);
       border:2px solid var(--ink); position:relative; vertical-align:middle}
.meter i{display:block; height:100%; background:var(--cyan)}
.meter i.up{background:var(--lime)}
.meter i.down{background:var(--pink)}
.meter u{text-decoration:none}
.muted{color:var(--dim); padding:16px}
#note.note,#champs-note.note{
  margin:0; border:0; border-top:3px solid var(--ink); border-left:0;
  box-shadow:none; background:var(--panel); font-size:14px;
}
#note.err,#champs-note.err{border-top-color:var(--pink); color:var(--pink)}
.modes{display:flex; gap:6px; flex-wrap:wrap; margin:18px 0 0}
.modes a{
  font-family:var(--f-display); font-size:12px; letter-spacing:.5px; text-decoration:none;
  padding:9px 14px; color:var(--dim); background:var(--deep);
  border:3px solid var(--ink); box-shadow:var(--shadow-sm); transform:skewX(-8deg);
}
.modes a > *{display:inline-block; transform:skewX(8deg)}
.modes a:hover{color:var(--paper)}
.modes a[aria-current="page"]{background:var(--cyan); color:var(--ink)}
@media (max-width:640px){
  #board th.drop,#board td.drop,#champs th.drop,#champs td.drop{display:none}
  #board td,#champs td,#board th,#champs th{padding:8px 10px}
}