/* さたのあそび場（トップ）。色・書体はゲーム側の style.css と同じトークン。面はソリッド＋1px の線、アクセントは青 1 色。 */
:root {
  color-scheme: light;
  --bg: #eff5f7; --surface: #fcfdfd; --raised: #e4eef3; --ink: #1b2a3a;
  --muted: #536778; --line: #b6c9d3; --accent: #175c97; --on-accent: #ffffff;
  --font-title: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --font-number: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101d2c; --surface: #182a3b; --raised: #233d51; --ink: #ecf4f8;
    --muted: #b1c6d4; --line: #547083; --accent: #97d4fa; --on-accent: #122a3c;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.7; word-break: auto-phrase; }
a { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.page { width: min(100%, 960px); margin: 0 auto; padding: 0 var(--s4); min-height: 100svh; display: flex; flex-direction: column; }
.site-head { padding: var(--s8) 0 var(--s6); border-bottom: 1px solid var(--line); }
.site-name { font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; letter-spacing: .12em; margin: 0; }
.site-lead { margin: var(--s1) 0 0; font-size: .875rem; color: var(--muted); }

main { flex: 1; padding: var(--s8) 0 var(--s12); }
.feature { display: grid; gap: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature-art { display: block; overflow: hidden; background: var(--raised); }
.feature-art img { display: block; width: 100%; height: auto; transform-origin: 70% 50%; animation: drift 14s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.feature-body { padding: 0 var(--s6) var(--s8); }
.feature-no { margin: 0; font: .75rem var(--font-number); letter-spacing: .14em; color: var(--muted); }
.feature-title { font-family: var(--font-title); font-weight: 600; font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.3; letter-spacing: .06em; margin: var(--s1) 0 var(--s4); }
.feature-text { margin: 0 0 var(--s4); max-width: 30em; }
.feature-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s6); font-size: .75rem; color: var(--muted); }
.feature-meta li { border: 1px solid var(--line); border-radius: 999px; padding: 2px var(--s3); }
.play { display: flex; align-items: center; justify-content: center; min-height: 56px; width: 100%; max-width: 320px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius); text-decoration: none; font-family: var(--font-title); font-size: 1.25rem; letter-spacing: .3em; padding-left: .3em; transition: opacity 120ms var(--ease); }
.play:hover { opacity: .9; }
.feature-notice { margin: var(--s4) 0 0; font-size: .6875rem; line-height: 1.7; color: var(--muted); max-width: 32em; }

.site-foot { border-top: 1px solid var(--line); padding: var(--s4) 0 max(var(--s6), env(safe-area-inset-bottom)); font-size: .75rem; color: var(--muted); }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin: 0; }
.credit a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.credit a:hover { color: var(--accent); }

@media (min-width: 760px) {
  .page { padding: 0 var(--s8); }
  .feature { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 0; }
  .feature-art { height: 100%; }
  .feature-art img { height: 100%; object-fit: cover; }
  .feature-body { padding: var(--s8); }
}
@media (prefers-reduced-motion: reduce) { .feature-art img { animation: none; } .play { transition: none; } }