/* 風の草原 — WIND MEADOW
   全面に WebGL のステージ。HUD は四隅に浮かべる：左上に縦書きのタイトル（プレイ開始直後だけ）、
   右上に時間帯の印と画質・中断、左下に操作説明。デモ中は DEMO 表示と HUB リンクだけ（共通ルール13）。 */
:root {
  --ink: #0e1316;
  --ink-a: rgba(12, 16, 20, 0.42);
  --paper: #f3ead8;
  --paper-dim: rgba(243, 234, 216, 0.7);
  --lamp: #f2b45a;
  --line: rgba(243, 234, 216, 0.22);
  --f-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --f-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-ui); font-size: 14px;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; background: var(--ink); }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.hud {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-bottom, 0px) + 14px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

#hub {
  pointer-events: auto; color: var(--paper); text-decoration: none;
  font-size: 12px; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 999px;
  background: var(--ink-a); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#hub:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

.mark { display: flex; gap: 10px; align-items: flex-start; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); transition: opacity 1.4s; }
.mark h1 {
  margin: 0; writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 800;
  font-size: 26px; line-height: 1; letter-spacing: 0.3em;
}
.mark p { margin: 2px 0 0; font-size: 11px; line-height: 1.7; letter-spacing: 0.06em; color: var(--paper-dim); }
.mark p span { display: block; }

.panel { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tod {
  pointer-events: auto; display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--ink-a); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tod button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
  background: transparent; color: var(--paper); cursor: pointer;
  font: 600 17px/1 var(--f-display);
  transition: background-color 0.3s, color 0.3s;
}
.tod button:hover { background: rgba(243, 234, 216, 0.12); }
.tod button[aria-checked="true"] { background: var(--lamp); color: var(--ink); }
.meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--paper-dim); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.chip {
  pointer-events: auto; cursor: pointer;
  font: 500 11px/1 var(--f-ui); letter-spacing: 0.04em; color: var(--paper);
  background: var(--ink-a); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tod button:focus-visible, .chip:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

.bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hint {
  max-width: min(440px, 100%); font-size: 12px; line-height: 1.75; color: var(--paper-dim);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); transition: opacity 1.4s;
}
.hint b { color: var(--paper); font-weight: 500; }
.hint.quiet { opacity: 0; }
.mark.quiet { opacity: 0; }

#demo-tag {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  font: 600 12px/1 var(--f-ui); letter-spacing: 0.22em; color: var(--paper);
  padding: 9px 14px; border-radius: 999px; background: rgba(12, 16, 20, 0.38); border: 1px solid var(--line);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
#demo-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); animation: blink 1.6s ease-in-out infinite; }
#demo-tag em { font-style: normal; font-weight: 500; letter-spacing: 0.14em; color: var(--paper-dim); }
@keyframes blink { 50% { opacity: 0.25; } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); z-index: 6;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px;
  background: rgba(12, 16, 20, 0.7); border: 1px solid var(--line);
  font-size: 12px; color: var(--paper); text-align: center; pointer-events: none;
}

.joy {
  position: fixed; z-index: 4; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 1px solid var(--line); background: radial-gradient(circle, rgba(12, 16, 20, 0.1), rgba(12, 16, 20, 0.34));
  pointer-events: none;
}
.joy i {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: rgba(243, 234, 216, 0.86); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

#loading {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: var(--ink); transition: opacity 0.9s ease;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#loading.out { opacity: 0; pointer-events: none; }
.load-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 320px; text-align: center; }
.load-title { writing-mode: vertical-rl; font: 800 34px/1 var(--f-display); letter-spacing: 0.36em; }
.load-bar { width: 160px; height: 2px; background: var(--line); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--lamp); transition: width 0.35s ease; }
#load-step { font-size: 12px; line-height: 1.7; color: var(--paper-dim); letter-spacing: 0.08em; }
#load-step.err { color: var(--paper); letter-spacing: 0.02em; }

/* モード別の表示（共通ルール12・13） */
body:not([data-mode="demo"]) #demo-tag,
body:not([data-mode="demo"]) #hub { display: none; }
body:not([data-mode="play"]) #mark,
body:not([data-mode="play"]) #panel,
body:not([data-mode="play"]) #hint { display: none; }
body.is-touch .pc, body:not(.is-touch) .touch { display: none; }

@media (max-width: 420px) {
  .mark h1 { font-size: 22px; }
  .tod button { width: 34px; height: 34px; font-size: 15px; }
  .hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading, .hint, .mark, .tod button, .load-bar i { transition: none; }
  #demo-tag i { animation: none; }
}