/* ==========================================================
   結晶洞窟 — サイト共通スタイル
   ゲーム本体の「洞窟」配色を、長文を読むための明度に調整
   ========================================================== */

:root{
  /* Light by default: near-black on near-white is the most widely
     legible pairing for long text. Every value below was checked
     against WCAG AA (4.5:1 for body, 3:1 for large text and borders). */
  --bg:#F7F7F4;
  --bg-deep:#EAEAE5;
  --bg-top:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F0F0EC;
  --line:#6E6F69;
  --line-soft:#D3D4CE;
  --ink:#15161A;        /* 16.9:1 on --bg */
  --ink-dim:#33353A;    /* 11.6:1 */
  --ink-faint:#55585E;  /*  7.1:1 */
  --cyan:#0A6058;       /*  6.4:1 — links */
  --gold:#7A4A00;       /*  6.5:1 — callout accents */
  --rose:#96002B;       /*  7.6:1 — warnings */
  --shadow:0 1px 2px rgba(20,22,26,.06), 0 8px 22px rgba(20,22,26,.05);

  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-display:"Zen Antique",Georgia,serif;
  --font-num:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --measure:34rem;
  color-scheme:light dark;
}


@media (prefers-color-scheme: dark){
  :root{
    --bg:#131418;
    --bg-deep:#0B0C0F;
    --bg-top:#1D1F25;
    --panel:#1B1D22;
    --panel-2:#24272D;
    --line:#5A5E67;
    --line-soft:#31343B;
    --ink:#F6F7F9;        /* 15.8:1 on --bg */
    --ink-dim:#D3D6DC;    /* 11.2:1 */
    --ink-faint:#A7ABB3;  /*  7.0:1 */
    --cyan:#72E2D3;       /* 10.3:1 */
    --gold:#FFC862;       /* 11.4:1 */
    --rose:#FF9BA8;       /*  8.6:1 */
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important} }

body{
  margin:0;
  background:var(--bg);
  background-image:linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 340px);
  background-repeat:no-repeat;
  color:var(--ink-dim);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--panel-2);color:var(--ink);padding:12px 18px;
  border:1px solid var(--cyan);border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* ---------- shell ---------- */
.wrap{max-width:60rem;margin:0 auto;padding:0 20px}
.narrow{max-width:var(--measure)}

header.site{
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--bg-top) 92%, transparent);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:14px;flex-wrap:wrap;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-size:1.22rem;letter-spacing:.07em;
}
.brand svg{display:block;flex:0 0 auto}
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main a{
  display:block;padding:8px 12px;border-radius:9px;
  color:var(--ink-faint);text-decoration:none;font-size:.875rem;font-weight:500;
  transition:color .15s ease, background .15s ease;
}
nav.main a:hover{color:var(--ink);background:var(--panel)}
nav.main a[aria-current="page"]{color:var(--gold);background:var(--panel)}
nav.main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:7px 13px;border-radius:99px;border:1px solid var(--line-soft);
  color:var(--ink-faint);text-decoration:none;font-size:.8125rem;font-weight:700;
  transition:color .15s ease, border-color .15s ease;
}
.lang-switch:hover{color:var(--ink);border-color:var(--cyan)}

a{color:var(--cyan);text-decoration:none}
.prose a:hover,.lede a:hover{color:var(--ink)}
:where(a,button,summary):focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- page head ---------- */
.page-head{padding-block:52px 30px;border-bottom:1px solid var(--line-soft)}
.eyebrow{
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin:0 0 10px;
}
h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.9rem,5.4vw,2.9rem);line-height:1.28;letter-spacing:.04em;
  color:var(--ink);margin:0;text-wrap:balance;
}
.lede{
  margin:16px 0 0;font-size:1.0625rem;line-height:1.95;color:var(--ink-dim);
  max-width:var(--measure);
}

/* ---------- prose ---------- */
main{padding-bottom:72px}
.prose{max-width:var(--measure);padding-top:34px}
.prose.wide{max-width:48rem}
.prose h2{
  font-family:var(--font-display);font-weight:400;
  font-size:1.5rem;line-height:1.45;letter-spacing:.03em;color:var(--ink);
  margin:44px 0 14px;padding-top:6px;text-wrap:balance;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:1.0625rem;font-weight:700;color:var(--ink);
  margin:30px 0 9px;line-height:1.6;
}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.35em}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--ink-faint)}
.prose strong{color:var(--ink);font-weight:700}
.prose code{
  font-family:var(--font-num);font-size:.875em;
  background:var(--panel-2);border:1px solid var(--line-soft);
  padding:.12em .44em;border-radius:5px;color:var(--gold);
}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:40px 0}
.prose blockquote{
  margin:0 0 18px;padding:2px 0 2px 18px;
  border-left:3px solid var(--line);color:var(--ink-faint);
}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:min(30rem,100%)}
caption{text-align:left;color:var(--ink-faint);font-size:.8125rem;padding-bottom:8px}
th,td{padding:10px 13px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
th{color:var(--ink);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- cards & callouts ---------- */
.note{
  background:var(--panel);border:1px solid var(--line-soft);
  border-left:3px solid var(--gold);border-radius:11px;
  padding:16px 18px;margin:0 0 22px;font-size:.9375rem;line-height:1.9;
  box-shadow:var(--shadow);
}
.note strong{color:var(--gold)}
.note.cool{border-left-color:var(--cyan)}
.note.cool strong{color:var(--cyan)}
.note :first-child{margin-top:0}
.note :last-child{margin-bottom:0}

.cards{
  display:grid;gap:12px;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.card{
  display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:13px;
  padding:18px 19px;box-shadow:var(--shadow);
  transition:border-color .16s ease, transform .16s ease;
}
a.card:hover{border-color:var(--cyan)}
.card b{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px;font-weight:700}
.card span{display:block;font-size:.875rem;line-height:1.8;color:var(--ink-faint)}

/* ---------- the play panel ---------- */
.play{
  margin-top:30px;padding:38px 26px 34px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,#141821 0%,#0B0C0F 100%);
  border:1px solid var(--line-soft);box-shadow:var(--shadow);
}
.play svg{display:block;margin:0 auto 16px}
.play b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.35rem,4.2vw,1.75rem);letter-spacing:.05em;
  color:#F6F7F9;margin-bottom:8px;
}
.play span{display:block;font-size:.9375rem;line-height:1.9;color:#A7ABB3;max-width:30rem;margin:0 auto}
.play .btn-row{justify-content:center;margin-top:22px}
.play .btn{background:rgba(114,226,211,.14);border-color:#72E2D3;color:#72E2D3}
.play .btn.ghost{background:rgba(255,255,255,.05);border-color:#5A5E67;color:#D3D6DC}
.play .btn.ghost:hover{color:#fff}

/* ---------- the game frame ---------- */
.stage-wrap{padding-top:26px}
.frame{
  position:relative;width:100%;
  aspect-ratio:10/16;max-height:min(78vh,860px);
  border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  background:#0B0C0F;box-shadow:var(--shadow);
}
@media (min-width:860px){ .frame{aspect-ratio:16/10} }
.frame iframe{display:block;width:100%;height:100%;border:0}
.frame-note{
  margin:11px 0 0;font-size:.8125rem;color:var(--ink-faint);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.frame-note a{color:var(--ink-faint);text-decoration:underline}
.frame-note a:hover{color:var(--ink)}

/* ---------- misc ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 22px}
.steps li{
  counter-increment:s;display:flex;align-items:flex-start;gap:16px;
  padding:22px 0;border-top:1px solid var(--line-soft);margin:0;
}
.steps li:first-child{border-top:0;padding-top:4px}
.steps li::before{
  content:counter(s);flex:0 0 auto;
  font-family:var(--font-num);font-size:.9375rem;font-weight:600;
  color:var(--panel);background:var(--gold);border-radius:99px;
  width:32px;height:32px;display:grid;place-items:center;margin-top:2px;
}
.steps li > div{flex:1 1 auto;min-width:0}
.steps b{
  display:block;color:var(--ink);font-size:1.125rem;font-weight:700;
  line-height:1.55;margin-bottom:8px;
}
.steps p{margin:0 0 10px;line-height:1.95}
.steps p:last-child{margin-bottom:0}

dl.meta{margin:0 0 22px;font-size:.9375rem}
dl.meta div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
dl.meta div:last-child{border-bottom:0}
dl.meta dt{flex:0 0 9rem;color:var(--ink-faint);margin:0}
dl.meta dd{flex:1 1 14rem;margin:0;color:var(--ink)}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:13px 26px;border-radius:11px;font-size:.9375rem;
  background:color-mix(in srgb,var(--cyan) 17%, var(--panel));
  border:1px solid var(--cyan);color:var(--cyan);
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.22);color:var(--cyan)}
.btn.ghost{background:var(--panel);border-color:var(--line);color:var(--ink-dim)}
.btn.ghost:hover{color:var(--ink)}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;margin:26px 0 0}

.tag{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  padding:3px 9px;border-radius:99px;margin-right:6px;
  border:1px solid var(--line);color:var(--ink-faint);
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line-soft);
  padding-block:34px calc(34px + env(safe-area-inset-bottom,0px));
  font-size:.875rem;color:var(--ink-faint);
}
footer.site ul{display:flex;gap:6px 20px;list-style:none;margin:0 0 16px;padding:0;flex-wrap:wrap}
footer.site a{color:var(--ink-faint);text-decoration:none}
footer.site a:hover{color:var(--ink);text-decoration:underline}
footer.site p{margin:0;line-height:1.85}