:root{
    /* ONE FIXED THEME. BLACK.

       --ink is the BACKGROUND and --paper is the TEXT, which is how this site
       has always used those two names.

       TWO COLOURS DO THE WORK, divided by job rather than by taste:
         BLUE is identity -- headings, the wordmark, labels, table headers.
         RED  is action   -- buttons, hovers, selections, links, the NEW flag.
       Gold is kept only where amber MEANS something, such as a caution pill.
       Gold everywhere is the Legacy Martial Arts palette, and this is not
       that. */
    color-scheme: dark;
    --ink:#000000; --panel:#12141C; --panel2:#1A1D27;
    --line:#262B36; --line-strong:#3D4353;
    --paper:#EDF0F6; --dim:#98A1B5;
    --hot:#FF6B4D;  --hot-ink:#FF8A70;  --hot-soft:#33201C;
    --cool:#6FA8E8; --cool-ink:#8FBEF0; --cool-soft:#16212E;
    --good:#57CB68; --good-soft:#16281A;
    --gold:#FFC24D; --gold-ink:#FFC24D; --gold-soft:#2B2314;
    --on-hot:#2A1008;
    --on-art:#F2F4F8;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.8);
    /* the game viewport and the page are both black now */
    --stage:#000000;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    a darker one
       carries the text. After dark the two are the same again, because the
       bright amber is perfectly readable there.
       Same story for the accent: #D93A20 links measured 4.05 against the page,
       just under the 4.5 a body-size link needs. */
    --gold-ink:#7A4F00;
    a white letterbox around one is a bright frame with a black
       picture in it. A screen is a screen. */
    --stage:#05060A;
    --mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  }


  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--ink); color:var(--paper);
    font-family:var(--mono); font-size:15px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block; image-rendering:pixelated;}
  a{color:var(--hot-ink); text-decoration:none;}
  a:hover{text-decoration:underline;}
  .wrap{max-width:1060px; margin:0 auto; padding:0 20px;}
  .eyebrow{
    font-size:11px; letter-spacing:3px; color:var(--dim);
    text-transform:uppercase; margin-bottom:10px;
  }
  h1,h2,h3{line-height:1.2; margin:0;}
  h2{font-size:clamp(20px,3.4vw,30px); letter-spacing:2px; color:var(--cool);}
  h3{font-size:15px; letter-spacing:1.5px;}
  p{margin:12px 0;}

  /* ---------- top bar ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{display:flex; align-items:center; gap:18px; height:56px;}
  .brand{font-size:14px; letter-spacing:4px; color:var(--cool); white-space:nowrap;}
  /* ten games now, so the bar has to be allowed to wrap rather than push
     the page wider than the viewport */
  header nav{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end;
             gap:10px 18px; font-size:12px; letter-spacing:1px;}
  header nav a{color:var(--dim);}
  header nav a:hover{color:var(--paper); text-decoration:none;}
  @media(max-width:620px){
    /* The nav used to be hidden outright below this width, which meant a phone
       got no navigation at all. With four items instead of fifteen it fits, so
       it stays — centred under the brand and a touch smaller. */
    header .wrap{flex-wrap:wrap; justify-content:center; gap:6px 0}
    header nav{margin-left:0; width:100%; justify-content:center; gap:8px 16px;
               font-size:11.5px; padding-top:2px}
  }

  /* ---------- hero ---------- */
  .hero{
    padding:64px 0 40px; text-align:center;
    background:radial-gradient(900px 380px at 50% -12%, color-mix(in srgb, var(--hot) 12%, transparent), transparent 70%),
      linear-gradient(180deg,var(--panel2),var(--ink));
    border-bottom:1px solid var(--line);
  }
  .hero h1{
    font-size:clamp(30px,7vw,62px); letter-spacing:6px; color:var(--cool);
    text-shadow:0 0 34px color-mix(in srgb, var(--hot) 24%, transparent);
  }
  .hero .sub{font-size:clamp(13px,2vw,17px); color:var(--dim); letter-spacing:2px; margin-top:10px;}
  .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px;}
  .btn{
    display:inline-block; padding:13px 26px; border:2px solid var(--line);
    border-radius:7px; background:var(--panel2); color:var(--paper);
    font-family:inherit; font-size:14px; letter-spacing:2px; cursor:pointer;
  }
  .btn:hover{border-color:var(--hot); color:var(--hot-ink); text-decoration:none;}
  .btn.primary{background:var(--hot); border-color:var(--hot); color:var(--on-hot);}
  .btn.primary:hover{background:var(--hot); filter:brightness(.92);}

  /* ---------- the playable frame ---------- */
  .stage{margin:34px auto 0; max-width:960px;}
  .screen{
    position:relative; border:2px solid var(--line); border-radius:10px;
    overflow:hidden; background:var(--stage); box-shadow:var(--shadow);
    aspect-ratio:16/9;
  }
  .screen iframe{width:100%; height:100%; border:0; display:block;}
  .screen .boot{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; cursor:pointer;
    background:center/cover no-repeat url("img/title.png");
  }
  .screen .boot::after{content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 55%, transparent);}
  .screen .boot .play{
    position:relative; z-index:1; padding:15px 34px; border:2px solid var(--hot);
    border-radius:8px; background:color-mix(in srgb, var(--panel) 90%, transparent); color:var(--paper);
    letter-spacing:4px; font-size:16px;
  }
  .screen .boot .hint{position:relative; z-index:1; color:var(--dim); font-size:12px; letter-spacing:1px;}
  .stagebar{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
    margin-top:12px; font-size:12px; color:var(--dim);
  }
  .stagebar button, .stagebar .btnlink{
    background:none; border:1px solid var(--line); border-radius:5px; color:var(--dim);
    font-family:inherit; font-size:12px; padding:6px 12px; cursor:pointer; letter-spacing:1px;
    text-decoration:none; display:inline-block;
  }
  .stagebar button:hover, .stagebar .btnlink:hover{border-color:var(--hot); color:var(--hot-ink);}

  /* ---------- blown-up play (works where the fullscreen API does not) ---------- */
  body.blown{overflow:hidden;}
  .screen.blown{
    position:fixed; inset:0; z-index:9000; border:0; border-radius:0;
    width:100vw; height:100vh; height:100dvh; max-width:none; padding:0; margin:0;
    background:var(--stage);
  }
  .screen.blown iframe{width:100%; height:100%;}
  #exitfs{
    position:fixed; z-index:9001; top:calc(env(safe-area-inset-top, 0px) + 6px); left:8px;
    background:rgba(11,13,18,.78); border:1px solid var(--line); border-radius:6px;
    color:var(--dim); font-family:inherit; font-size:10px; letter-spacing:1px;
    padding:5px 9px; cursor:pointer; opacity:.75;
  }
  #exitfs:hover{border-color:var(--hot); color:var(--hot-ink);}

  /* ---------- install ---------- */
  .getgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:26px;}
  .getcard .plat{color:var(--paper); letter-spacing:2px; font-size:13px; margin-bottom:10px;}
  .getcard ol{margin:0; padding-left:18px; color:var(--dim); line-height:1.9; font-size:14px;}
  .getcard li b{color:var(--paper);}
  .small{font-size:12px; color:var(--dim); opacity:.75; margin-top:10px; line-height:1.7;}

  /* ---------- sections ---------- */
  section{padding:64px 0; border-bottom:1px solid var(--line);}
  .lede{color:var(--dim); max-width:66ch;}
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; margin-top:28px;}
  .split.flip > :first-child{order:2;}
  @media(max-width:820px){ .split{grid-template-columns:1fr;} .split.flip > :first-child{order:0;} }
  .shot{border:2px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel2);}

  .rule{
    border:2px solid var(--line); border-left:4px solid var(--hot);
    background:var(--panel); border-radius:8px; padding:16px 20px; margin:22px 0;
  }
  .rule b{color:var(--paper);}

  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:28px;}
  .card{
    border:2px solid var(--line); border-radius:9px; background:var(--panel);
    padding:18px 20px;
  }
  .card h3{color:var(--paper); margin-bottom:6px;}
  .card p{color:var(--dim); font-size:13.5px; margin:0;}
  .num{font-size:30px; color:var(--paper); letter-spacing:1px;}

  .gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:28px;}
  .gallery figure{margin:0;}
  .gallery figcaption{color:var(--dim); font-size:12px; margin-top:8px; letter-spacing:.5px;}

  table{width:100%; border-collapse:collapse; margin-top:22px; font-size:13.5px;}
  th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
  th{color:var(--cool); font-weight:normal; letter-spacing:1px; font-size:12px; text-transform:uppercase;}
  td.no{color:var(--good);} td.yes{color:var(--hot-ink);}

  kbd{
    display:inline-block; min-width:26px; text-align:center; padding:3px 7px;
    border:1px solid var(--line); border-bottom-width:3px; border-radius:5px;
    background:var(--panel2); color:var(--paper); font-family:inherit; font-size:12px;
  }
  .keys{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 26px; margin-top:22px;}
  .keys div{color:var(--dim); font-size:13.5px;}
  .keys span{color:var(--paper);}

  footer{padding:44px 0 60px; color:var(--dim); font-size:12.5px;}
  .tag{
    display:inline-block; font-size:11px; letter-spacing:1px; padding:2px 8px;
    border:1px solid currentColor; border-radius:4px; margin-right:6px;
  }
  /* Ads live in their own quiet box, never touching a control.
     Google asks for 150px of clear space around a game window; these sit far
     further away than that, and there are none at all on the pages where the
     game is actually played. */
  .adwrap{
    max-width:1060px; margin:38px auto; padding:0 20px;
    min-height:120px; text-align:center;
  }
  .adlabel{
    font-size:9px; letter-spacing:3px; text-transform:uppercase;
    color:var(--dim); margin-bottom:8px;
  }
  .adwrap ins{ background:transparent; }
  /* never let an ad crowd the play window or the buttons under it */
  .stage + .adwrap, .cta + .adwrap{ margin-top:150px; }
  @media(max-width:620px){ .adwrap{ margin:28px auto; } }

  /* ---------- guide pages ---------- */
  .lede{font-size:16.5px; color:var(--paper); max-width:70ch;}
  .lede + p{color:var(--dim); max-width:70ch;}
  .crumbs{font-size:11px; letter-spacing:1.5px; color:var(--dim); padding:18px 0 0;}
  .crumbs a{color:var(--dim);} .crumbs a:hover{color:var(--hot-ink);}
  h1.guide{font-size:clamp(26px,5vw,44px); letter-spacing:2px; color:var(--paper); margin:8px 0 4px;}
  .tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0;
    border:1px solid var(--line); border-radius:8px; background:var(--panel);}
  table{border-collapse:collapse; width:100%; font-size:13px;}
  th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap;}
  th{background:var(--panel2); color:var(--paper); font-weight:400;
    letter-spacing:1px; font-size:11px; text-transform:uppercase; position:sticky; top:0;}
  tbody tr:hover{background:var(--hot-soft);}
  td.num{text-align:right; color:var(--dim);}
  td.name{color:var(--paper);}
  .el{display:inline-block; padding:1px 7px; border-radius:3px; font-size:11px;
    letter-spacing:1px; border:1px solid currentColor; opacity:.95;}
  .chart td,.chart th{padding:5px 6px; text-align:center; font-size:10px;}
  .chart td.rowhead{text-align:left; color:var(--paper); font-size:10px; letter-spacing:1px;}
  .chart .x2{background:var(--good-soft); color:var(--good); font-weight:700;}
  .chart .h2{background:var(--hot-soft); color:var(--hot-ink);}
  .chart .n1{color:var(--line-strong);}
  .faq{max-width:78ch;}
  .faq details{border:1px solid var(--line); border-radius:8px; background:var(--panel);
    margin:10px 0; padding:0 16px;}
  .faq summary{cursor:pointer; padding:14px 0; color:var(--paper); font-size:14px;
    letter-spacing:.5px; list-style:none;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::before{content:'+ '; color:var(--dim);}
  .faq details[open] summary::before{content:'\2212 ';}
  .faq details p{margin:0 0 16px; color:var(--dim); font-size:14px;}
  .guidenav{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0;}
  .guidenav a{border:1px solid var(--line); border-radius:6px; padding:8px 14px;
    font-size:12px; letter-spacing:1px; color:var(--dim); background:var(--panel);}
  .guidenav a:hover{border-color:var(--hot); color:var(--hot-ink); text-decoration:none;}
  .note{font-size:12.5px; color:var(--dim); border-left:2px solid var(--line);
    padding-left:14px; margin:18px 0; max-width:70ch;}

/* ADVERTISING IS OFF — ad-wrappers-collapsed.
   .adwrap carries min-height:120px so an advert never caused the page to jump
   while it loaded. With the units commented out that reserved space becomes a
   120px hole in the middle of the page, twice on some of them. Collapse the
   wrappers rather than deleting the rules: uncommenting the units and removing
   this block puts everything back exactly as it was.
   The generic <div class="wrap" style="margin:28px auto;"> wrappers need no
   rule -- with nothing inside they already collapse to nothing. */
.adwrap, .adwrap.adfeed{ display:none !important; }