/* ============================================================================
   shogeki.css — the shared layer for shogeki.net
   Only what index.html and manual.html already had byte-identical: the design
   tokens, base type, the CRT background, the EN/日本語 pill, the export button
   and the hazard tape. Deliberately minimal — anything one page did differently
   stays on that page, so adopting this changed nothing visually.
   --ink is the *light* body text colour; the manga black is --sumi in manga.css.
   Bump ?v= in each <link> when you edit this — .htaccess pins css for a year.
   ============================================================================ */
:root{
  --cyan:#00AEEF; --yellow:#FAE14C; --pink:#FF00CF; --pink2:#FF5CE0;
  --green:#36ff8b; --bg0:#09060E; --outline:#170E1F;
  --ink:#DFF6FF; --dim:#8FB4C2; --faint:#5F808C; --line:rgba(0,174,239,.24);
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
  --disp:"Chakra Petch","Share Tech Mono",sans-serif;
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP","MS PGothic",sans-serif;

  }


*{box-sizing:border-box}

html,body{margin:0;background:var(--bg0);color:var(--ink);font-family:var(--mono);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  /* same CRT scanline + corner-glow stack as manual.html and plugins.html */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
    radial-gradient(120% 60% at 50% -5%, rgba(255,0,207,.10), transparent 55%),
    radial-gradient(120% 70% at 50% 110%, rgba(0,174,239,.12), transparent 55%),
    var(--bg0);
  line-height:1.62;font-size:15px;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* language show/hide — identical rules to manual.html */
html[lang="en"] [lang="ja"]{display:none}
html[lang="ja"] [lang="en"]{display:none}

/* ===== EN / JP toggle — copied from manual.html so the pill is identical ===== */
#bc-lang{ position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right));
  z-index:1000; display:flex; gap:2px; padding:3px; border-radius:999px;
  background:rgba(11,7,18,.82); border:1px solid rgba(0,174,239,.45);
  box-shadow:0 0 14px rgba(0,0,0,.6), inset 0 0 8px rgba(0,174,239,.18);
  font-family:"Chakra Petch", sans-serif; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#bc-lang button{ appearance:none; cursor:pointer; border:0; background:transparent; color:#7FB1C4;
  font-family:inherit; font-weight:700; font-size:12px; letter-spacing:.04em; line-height:1;
  padding:8px 9px; border-radius:999px; transition:color .15s ease, background .15s ease, box-shadow .15s ease; }
#bc-lang button:hover{ color:#CDF1FF; }
#bc-lang button[aria-pressed="true"]{ color:#03161F;
  background:linear-gradient(180deg,var(--yellow),#E3C63A);
  box-shadow:0 0 10px rgba(250,225,76,.55); }
#bc-lang button:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
html[lang="ja"] #bc-lang{ border-color:rgba(255,0,207,.5);
  box-shadow:0 0 14px rgba(0,0,0,.6), inset 0 0 8px rgba(255,0,207,.2); }
html[lang="ja"] #bc-lang button[aria-pressed="true"]{ color:#1B0116;
  background:linear-gradient(180deg,#FF5CE0,#FF00CF); box-shadow:0 0 12px rgba(255,0,207,.6); }
@media (min-width:760px){ #bc-lang button{ font-size:14px; padding:9px 16px; } }
@media (prefers-reduced-motion: reduce){ #bc-lang button{ transition:none; } }

/* export button — copied from manual.html */
#exportPdf{ position:fixed; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left));
  z-index:1000; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid rgba(0,174,239,.45); border-radius:999px; padding:8px 15px;
  background:rgba(11,7,18,.82); color:#CDF1FF; font:700 12px var(--disp); letter-spacing:.06em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 14px rgba(0,0,0,.6), inset 0 0 8px rgba(0,174,239,.18); }
#exportPdf:hover{ color:#03161F; background:linear-gradient(180deg,#60D4FF,var(--cyan)); box-shadow:0 0 14px rgba(0,174,239,.5); }
@media (min-width:760px){ #exportPdf{ font-size:13px; padding:9px 16px; } }

/* hazard tape — same two inks and same 16/32 pitch as the rest of the site */
.hazard{height:14px;width:100%;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 16px,var(--outline) 16px 32px)}
.cover-logo img{display:block;width:100%;height:100%;object-fit:contain}
.cover-logo .anim{position:absolute;inset:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.cover-logo .anim{display:none !important}}