/* game.html（ゲーム紹介）のスタイル */
:root { color-scheme: dark; --cyan: #4de1ff; --muted: #899ba9; }
* { box-sizing: border-box; }
body { margin: 0; background: #030b13; color: #ecf6ff; font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
header { padding: 13px 5%; display: flex; align-items: center; gap: 24px; }
footer { padding: 27px 5%; display: flex; align-items: center; gap: 20px; }
footer { justify-content: center; }
header { border-bottom: 1px solid #ffffff12; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: 112px; height: auto; display: block; }
.brand:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 4px; }
footer, button { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.svg-defs { position: absolute; }
main { max-width: 760px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px 5%; min-height: calc(100svh - 140px); }

button { border: 1px solid #4de1ff60; background: #0b202b; color: #d3f7ff; border-radius: 3px; padding: 14px 21px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 13px; min-height: 46px; }
button:hover { background: #123343; border-color: var(--cyan); }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
button:disabled { opacity: .5; cursor: default; }
.button-icon { color: var(--cyan); width: 12px; }
figure { margin: 0; min-width: 0; width: 100%; }
.panel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.machine { position: relative; width: calc(100% - 96px); max-width: min(520px, 48svh); margin: auto; isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.machine img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.machine > img { pointer-events: none; }
.machine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #030b13, transparent 15%, transparent 85%, #030b13), linear-gradient(#030b13, transparent 8%, transparent 91%, #030b13); }
/* Image coordinates: screen interior ≈ (261, 319)–(763, 700), on 1024 × 1536. */
.screen { position: absolute; left: 25.49%; top: 20.77%; width: 49.02%; height: 24.80%; clip-path: url(#screen-shape); background: radial-gradient(ellipse, #73797b, #11181b); overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 18px 5px #000b; background: linear-gradient(135deg, #b6e9ff0b, transparent 40%); }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 10px ui-monospace, monospace; letter-spacing: .2em; }
.fallback[hidden] { display: none; }
.screen .game-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.screen .game-image[hidden], .game-link[hidden] { display: none; }
.screen[data-power="booting"], .screen[data-power="on"] { background: #02060c; }
.screen[data-power="booting"] canvas, .screen[data-power="on"] canvas,
.screen[data-power="booting"] .fallback, .screen[data-power="on"] .fallback { visibility: hidden; }
.screen[data-power="booting"] .game-image { animation: power-on 850ms ease-out both; }
.screen[data-power="on"]::after { background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 3px), linear-gradient(135deg, #b6e9ff12, transparent 40%); }
.screen-trigger { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; display: grid; place-items: center; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.screen-trigger:hover { background: #05152220; }
.screen-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--cyan); }
.screen-trigger span { color: white; background: #020a13c9; padding: 10px 13px; font-size: clamp(8px, 1.1vw, 12px); letter-spacing: .12em; border: 1px solid #ffffff55; }
.screen-trigger[hidden] { display: none; }
.screen-trigger:disabled { opacity: 1; }
.controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.power-reset { background: transparent; }
/* 画面には出さず、読み上げ用に残す（読み込み失敗時だけ .is-error で表示）。 */
.screen-help { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-help.is-error { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; color: #ff9f9f; font-size: 12px; line-height: 1.8; }
#noise-toggle, #power-reset, .controls { display: none; }
.screen { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.screen[data-power="on"] { cursor: grab; }
.screen[data-power="on"]:active { cursor: grabbing; }
.screen:focus-visible { outline: none; }
.screen:focus-visible::after { box-shadow: inset 0 0 0 3px var(--cyan), inset 0 0 18px 5px #000b; }
.game-image { pointer-events: none; -webkit-user-drag: none; }
.game-nav { position: absolute; left: 0; right: 0; top: 33.17%; height: 0; z-index: 3; }
.game-nav[hidden] { display: none; }
.game-nav button { position: absolute; top: 0; transform: translateY(-50%); width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 20px; }
#game-prev { right: calc(100% + 4px); }
#game-next { left: calc(100% + 4px); }
.game-title { margin: 0; min-height: 22px; line-height: 22px; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #ecf6ff; }
.game-count { margin: 0; min-height: 16px; font: 12px/16px ui-monospace, monospace; color: var(--cyan); letter-spacing: .15em; }
/* 表示が切り替わっても高さが変わらないよう、隠すときも場所は残す。 */
.game-title[hidden], .game-count[hidden] { display: block; visibility: hidden; }

.game-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; -webkit-user-drag: none; touch-action: pan-y pinch-zoom; }
.game-link:active { cursor: grabbing; }
.game-link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cyan); }
@keyframes power-on {
  0% { transform: scale(.04, .005); filter: brightness(3); opacity: .3; }
  25% { transform: scale(1, .008); filter: brightness(2); opacity: 1; }
  65% { transform: scale(1, 1); filter: brightness(1.4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .screen[data-power="booting"] .game-image { animation: none; }
}
footer { border-top: 1px solid #ffffff12; color: #617584; font-size: 10px; letter-spacing: .12em; }

@media (max-width: 680px) {
  header { padding: 10px 0 10px 6%; }
  footer { padding: 22px 6%; }
  .brand img { width: 108px; }
  main { padding: 15px 5% 25px; gap: 16px; }
  .machine { max-width: min(440px, 52svh); }
  .controls, .game-nav { justify-content: center; }
  footer { font-size: 8px; }
}

/* --- 電源ON後の「遊べる」サイン ------------------------------------------ */
.play-hint {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  padding: 5px 12px; border: 1px solid #4de1ff66; border-radius: 3px;
  background: #02060cc4; color: var(--cyan);
  font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; z-index: 3;
  text-shadow: 0 0 10px #4de1ff80; box-shadow: 0 0 18px #4de1ff26;
}
.screen[data-power="on"] .play-hint { opacity: 1; animation: play-blink 1.9s ease-in-out infinite; }
@keyframes play-blink { 0%, 100% { opacity: 1; } 55% { opacity: .35; } }

/* --- ゲームページへ遷移するときの拡大演出 -------------------------------- */
.launch-overlay {
  position: fixed; z-index: 100; background-size: cover; background-position: center;
  transform-origin: center center; will-change: transform; pointer-events: none;
  box-shadow: 0 0 0 1px #4de1ff40;
}
.launch-flash { position: fixed; inset: 0; z-index: 99; background: #02060c; opacity: 0; pointer-events: none; }
body.is-launching { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .screen[data-power="on"] .play-hint { animation: none; }
}