:root {
  color-scheme: dark;
  --base: #09181e;
  --panel: #10262c;
  --line: #28474c;
  --ink: #ebf5ef;
  --muted: #adbfbd;
  --mint: #94f0c8;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-family: system-ui, "Yu Gothic", Meiryo, sans-serif;
  background: var(--base);
  color: var(--ink);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 78% 4%, #123036 0, transparent 45rem);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }

.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font: 700 .9rem var(--mono);
  letter-spacing: .07em;
  white-space: nowrap;
}
.brand-name > span { color: var(--mint); }
.brand-mark {
  width: 22px;
  aspect-ratio: 1;
  margin-right: 3px;
  background: url("./icon.svg") center / contain no-repeat;
}
.nav-link { color: var(--muted); font-size: .83rem; padding-block: 12px; white-space: nowrap; }
.nav-link:hover { color: var(--mint); }
.nav-link span { color: var(--mint); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 56px);
}
.eyebrow, .sonar-header, .sonar figcaption, .site-footer {
  font: 600 .72rem/1.4 var(--mono);
  letter-spacing: .11em;
}
.eyebrow { color: var(--mint); }
.signal {
  display: inline-block;
  width: 7px;
  aspect-ratio: 1;
  margin-right: .35em;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 9px #94f0c875;
  vertical-align: .08em;
}
.hero-title {
  margin-top: 14px;
  font-size: clamp(3rem, 7vw, 5.65rem);
  line-height: 1.12;
  letter-spacing: -.07em;
}
.hero-title em { color: var(--mint); font-style: normal; }
.intro { margin-top: 20px; color: var(--muted); line-height: 1.75; }
.primary {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 48px;
  margin-top: 25px;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--mint);
  color: #092721;
  font-weight: 750;
}
.primary:hover { background: #baf7de; }
.sonar { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.sonar-header, .sonar figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  color: var(--muted);
}
.sonar-header { border-bottom: 1px solid var(--line); }
.sonar figcaption { border-top: 1px solid var(--line); }
.sonar figcaption b, .sonar-header span:first-child { color: var(--mint); }
.sonar img { display: block; width: 100%; height: clamp(190px, 23vw, 285px); object-fit: cover; }

.catalog { padding: 26px 0 50px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 18px; }
.section-heading h2, .guide h2 { margin-top: 6px; font-size: 1.5rem; }
.catalog-count { color: var(--muted); font-size: .8rem; }
.game-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-card {
  display: grid;
  grid-template-columns: clamp(78px, 23vw, 160px) minmax(0, 1fr);
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.game-card:hover, .game-card:focus-visible { border-color: var(--mint); }
.game-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px clamp(12px, 2.4vw, 20px);
}
.game-card h3 { margin-block: 4px; font-size: clamp(1rem, 2.4vw, 1.35rem); }
.game-summary { margin-bottom: 10px; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.game-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--mint);
  font-size: .85rem;
  font-weight: 700;
}
.game-action span { font-family: var(--mono); }
.game-card:hover .game-action { text-decoration: underline; }
.game-art {
  display: grid;
  place-items: center;
  border-inline-end: 1px solid var(--line);
}
.mines-art {
  background: repeating-linear-gradient(0deg, #7dcfbe12 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, #7dcfbe12 0 1px, transparent 1px 20px),
    radial-gradient(ellipse, #19423f, #0c292f);
}
.memory-art { background: radial-gradient(ellipse, #39355a, #22253b 72%); }
.solitaire-art { background: radial-gradient(ellipse, #235c4f, #13372f 72%); }
.tile-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.tile-art i {
  display: grid;
  place-items: center;
  width: clamp(16px, 4.2vw, 24px);
  aspect-ratio: 1;
  border: 1px solid #31575d;
  border-radius: 2px;
  background: #1d3c43;
  color: var(--mint);
  font: 700 .78rem var(--mono);
}
.tile-art i:nth-child(5) { color: #ffd080; border-color: #7c6841; background: #4b3d2d; }
.card-art {
  position: relative;
  width: clamp(58px, 18vw, 102px);
  aspect-ratio: 6 / 5;
}
.card-art i {
  position: absolute;
  top: 12%;
  left: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49%;
  aspect-ratio: 3 / 4;
  border: 1px solid #8078b9;
  border-radius: 5px;
  background: #302e53;
  color: #e0d6ff;
  font: 700 clamp(.8rem, 3.5vw, 1.3rem)/1.1 var(--mono);
  text-align: center;
  transform: rotate(-13deg);
}
.card-art i + i {
  left: 46%;
  background: #ede5ff;
  color: #422a75;
  transform: rotate(13deg);
}
.solitaire-art i { border-color: #b5c5bd; background: #faf7ef; color: #ad2038; }
.solitaire-art i + i { background: #faf7ef; color: #17232c; }
.site-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .66rem;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.footer-link {
  padding-block: 6px;
  font: 500 .78rem/1.4 system-ui, "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: normal;
}
.footer-link:hover, .footer-link[aria-current="page"] { color: var(--mint); text-decoration: underline; }
.footer-link span { color: var(--mint); }

.info-main { max-width: 760px; padding-block: clamp(30px, 6vw, 62px); }
.info-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.info-heading h1 { margin-block: 8px 12px; font-size: clamp(1.55rem, 5vw, 2.65rem); line-height: 1.25; }
.info-heading > p:last-child, .info-content { color: var(--muted); line-height: 1.8; }
.info-content { display: grid; gap: 28px; margin-top: 26px; }
.info-content h2 { margin-bottom: 6px; color: var(--ink); font-size: 1.15rem; }
.info-content ul { margin-block: 8px; padding-inline-start: 1.4em; }
.info-content p + p { margin-top: 8px; }
.info-content a { color: var(--mint); text-decoration: underline; text-underline-offset: .18em; }
.info-content a:hover { color: var(--ink); }
.contact-box {
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.contact-email { font-weight: 700; overflow-wrap: anywhere; }

.game-main { padding-block: clamp(22px, 4vw, 44px) 60px; }
.game-title { margin-bottom: 23px; }
.game-title h1 {
  font-size: clamp(1.65rem, 6vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.04em;
  margin-block: 8px;
}
.game-title > p:last-child { color: var(--muted); }
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 330px);
  gap: 24px;
  align-items: start;
}
.console, .guide { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.console { padding: clamp(8px, 2.5vw, 16px); }
.console-controls, .readouts, .mode-control { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.console-controls { align-items: end; }
.mines-controls .difficulty-label { grid-column: 1 / -1; }
.difficulty-label { display: grid; gap: 4px; color: var(--muted); font-size: .76rem; min-width: 0; }
.difficulty-label select, .secondary, .mode-control button {
  min-height: 44px;
  padding-inline: 8px;
  border: 1px solid #426168;
  border-radius: 5px;
  background: #17343a;
  color: var(--ink);
  font-size: .83rem;
  font-weight: 650;
}
.secondary:hover, .mode-control button:hover { border-color: var(--mint); }
.sound-toggle[aria-pressed="true"] { color: var(--mint); border-color: #69bda5; }
.readouts { margin-block: 10px; }
.readouts div { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--base); }
.readouts dt { color: var(--muted); font-size: .73rem; }
.readouts dd { color: var(--mint); font: 700 1.2rem/1.4 var(--mono); }
.mode-control button[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #092721; }
#flag-mode[aria-pressed="true"] { background: #ffd080; border-color: #ffd080; color: #35200a; }
.game-status { margin-block: 9px; min-height: 1.4em; color: var(--muted); font-size: .83rem; }
.game-status[data-state="won"] { color: var(--mint); }
.game-status[data-state="lost"] { color: #ffb4a9; }
.board { display: grid; gap: 2px; padding: 3px; border-radius: 5px; background: #091b22; }
.board-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.grid-cell { min-width: 0; }
.cell {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #31575d;
  border-radius: 3px;
  background: #1d3c43;
  color: var(--ink);
  font: 700 clamp(.86rem, 3vw, 1.12rem)/1 var(--mono);
  touch-action: manipulation;
}
.cell:focus-visible { outline-offset: -2px; }
.cell[aria-disabled="true"] { cursor: default; }
.cell[data-cell="open"] { background: #0c252c; border-color: #203e45; }
.cell[data-cell="flag"] { background: #473b28; border-color: #7c6841; color: #ffd080; }
.cell[data-cell="mine"], .cell[data-cell="wrong"] { background: #472e34; border-color: #815252; color: #ffb4a9; }
.cell[data-cell="hit"] { background: #ffb4a9; border-color: #ffb4a9; color: #422022; }
.cell[data-number="1"] { color: #8de9ff; }
.cell[data-number="2"] { color: #9bf3af; }
.cell[data-number="3"] { color: #ffb2a2; }
.cell[data-number="4"] { color: #c6baff; }
.cell[data-number="5"], .cell[data-number="6"] { color: #ffd080; }
.memory-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.6vw, 12px);
  padding: 8px;
}
.memory-card {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  font-size: clamp(1.35rem, 5vw, 2.5rem);
}
.memory-card[data-card="closed"] {
  border-color: #68628f;
  color: #d6caff;
  background: repeating-linear-gradient(135deg, #312e50 0 8px, #39355a 8px 16px);
}
.memory-card[data-card="open"] { color: #422a75; background: #ede5ff; }
.memory-card[data-card="matched"] { color: #123d36; background: #a7e8cb; }
@media (hover: hover) {
  .cell:not([aria-disabled="true"]):hover { border-color: var(--mint); }
}
.guide { padding: 20px; }
.guide ol { padding-left: 1.35em; margin-block: 12px; }
.guide li, .guide > p:last-child { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.guide li + li { margin-top: 7px; }
.guide > p:last-child { border-top: 1px solid var(--line); padding-top: 12px; }

@media (min-width: 840px) {
  .game-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .game-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 112px 1fr; }
  .game-art { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .game-card-copy { padding-block: 16px; }
}

@media (min-width: 960px) {
  .game-main { padding-top: 24px; }
  .game-title { margin-bottom: 16px; }
  .game-title h1 { font-size: 2.25rem; }
  .game-layout { grid-template-columns: minmax(0, max-content) minmax(230px, 300px); }
  .split-console {
    --board-width: clamp(265px, calc((100svh - 265px) * 2 / 3), 450px);
    display: grid;
    grid-template-columns: 220px minmax(0, var(--board-width));
    gap: 16px;
    align-items: start;
  }
  .memory-console { --board-width: 410px; }
}

@media (max-width: 700px) {
  .shell { width: calc(100% - 28px); }
  .header-inner { min-height: 55px; }
  .hero { grid-template-columns: 1fr; gap: 20px; padding-block: 24px; }
  .hero-title { font-size: clamp(2.5rem, 12vw, 3rem); }
  .intro { margin-top: 16px; }
  .primary { margin-top: 18px; }
  .desktop-break { display: none; }
  .sonar img { height: clamp(82px, 25vw, 140px); }
  .sonar-header { padding-block: 7px; }
  .sonar figcaption { display: none; }
  .catalog { padding-bottom: 34px; }
  .game-layout { grid-template-columns: minmax(0, 470px); gap: 15px; }
}

@media (max-width: 360px) {
  .sonar-header { letter-spacing: .04em; }
  .game-main { width: calc(100% - 16px); }
  .board-row { gap: 1px; }
}