/* 入口。スマホ1画面に収める：頭（題字）／真ん中（開催までの日数・開催日）／足（2つのボタン）。
   暗い地に金。動きは landing.js（数字の巻き上げ・金の粉・段階的な現れ）。 */
:root {
  --bg: #0b0908;
  --gold: #d4b66c;
  --gold-bright: #f5d987;
  --gold-dim: #9c8048;
  --crimson: #8b1c1c;
  --crimson-bright: #b52828;
  --ink-light: #f5ecd5;
  --serif: "Shippori Mincho", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Cinzel", "Shippori Mincho", serif;
  --sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --pad: clamp(18px, 5vw, 40px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-light); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, p { margin: 0; }
a { color: inherit; text-decoration: none; }

.land { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; align-items: center;
  padding: calc(env(safe-area-inset-top) + 22px) var(--pad) calc(env(safe-area-inset-bottom) + 22px); text-align: center; overflow: hidden; }
.land-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139,28,28,.46) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,97,.10) 0%, transparent 60%),
    linear-gradient(180deg, #0b0908 0%, #1a0808 50%, #0b0908 100%); }
.land-bg .ring { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); border: 1px solid var(--gold-dim); border-radius: 50%; }
.ring-1 { width: min(96vw, 620px); height: min(96vw, 620px); opacity: .22; animation: breathe 9s ease-in-out infinite; }
.ring-2 { width: min(76vw, 500px); height: min(76vw, 500px); opacity: .14; animation: breathe 9s ease-in-out -3s infinite; }
.ring-3 { width: min(56vw, 380px); height: min(56vw, 380px); opacity: .10; animation: breathe 9s ease-in-out -6s infinite; }
@keyframes breathe { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }

/* 段階的に現れる */
.land-head, .land-count, .act { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.land-head { animation-delay: .05s; }
.land-count { animation-delay: .35s; }
.act-draw { animation-delay: .8s; }
.act-notes { animation-delay: .95s; }
.act-rules { animation-delay: 1.1s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .land-head, .land-count, .act { animation: none; opacity: 1; transform: none; } .ring { animation: none; } }

/* 頭 */
.land-head { position: relative; z-index: 1; }
.crest { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 6px 16px; border: 1px solid var(--gold-dim);
  font-family: var(--latin); font-size: 10px; letter-spacing: .42em; color: var(--gold); }
.crest::before, .crest::after { content: "◆"; font-size: 7px; color: var(--crimson-bright); }
.title-main { display: block; font-family: var(--serif); font-size: clamp(44px, 13vw, 76px); font-weight: 800; line-height: 1; letter-spacing: .1em;
  background: linear-gradient(180deg, #f5d987 0%, var(--gold) 45%, var(--gold-dim) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.title-sub { display: block; margin-top: .7em; font-family: var(--serif); font-size: clamp(12px, 3.3vw, 16px); letter-spacing: .18em; font-weight: 600; opacity: .85; }

/* 真ん中：日数 */
.land-count { position: relative; z-index: 1; padding: 8px 0; }
.cd-label { font-family: var(--serif); font-size: clamp(12px, 3.4vw, 15px); letter-spacing: .36em; color: var(--gold); }
.cd-row { display: flex; align-items: baseline; justify-content: center; gap: .08em; line-height: 1; margin: 4px 0 10px; }
.cd-pre { font-family: var(--serif); font-size: clamp(20px, 6vw, 30px); letter-spacing: .12em; color: var(--gold); margin-right: .2em; }
.cd-num { font-family: var(--latin); font-size: clamp(120px, 40vw, 220px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fbe7a4 0%, var(--gold) 48%, var(--gold-dim) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 30px rgba(212,182,108,.18)); }
.cd-unit { font-family: var(--serif); font-size: clamp(22px, 6.5vw, 34px); letter-spacing: .1em; color: var(--gold); margin-left: .1em; }
.land-count.is-today .cd-pre, .land-count.is-today .cd-unit { display: none; }
.land-count.is-today .cd-num { font-family: var(--serif); font-size: clamp(44px, 13vw, 72px); letter-spacing: .1em; }
.cd-date { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; font-family: var(--serif); letter-spacing: .1em; }
.cd-y { font-family: var(--latin); font-size: clamp(11px, 3vw, 13px); letter-spacing: .2em; opacity: .75; }
.cd-date b { font-size: clamp(18px, 5.4vw, 26px); font-weight: 700; color: var(--gold-bright); letter-spacing: .06em; }
.cd-dow { font-size: clamp(11px, 3vw, 13px); padding: 2px 8px; border: 1px solid var(--gold-dim); color: var(--gold); }
.cd-open { font-size: clamp(13px, 3.8vw, 17px); color: var(--ink-light); opacity: .9; }
.cd-venue { margin-top: 8px; font-size: clamp(11px, 3vw, 13px); letter-spacing: .12em; opacity: .7; }

/* 足：ボタン */
.land-actions { position: relative; z-index: 1; display: grid; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto; }
.act { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kicker arrow" "title arrow"; align-items: center; text-align: left;
  padding: 14px 18px 13px 20px; border: 1px solid var(--gold-dim); position: relative; overflow: hidden; isolation: isolate;
  transition: transform .18s ease, border-color .18s ease; -webkit-tap-highlight-color: transparent; }
.act:active { transform: scale(.985); }
.act-kicker { grid-area: kicker; font-family: var(--latin); font-size: 9.5px; letter-spacing: .4em; color: var(--gold-dim); }
.act-title { grid-area: title; font-family: var(--serif); font-size: clamp(18px, 5.2vw, 22px); font-weight: 700; letter-spacing: .08em; line-height: 1.3; }
.act-arrow { grid-area: arrow; font-family: var(--latin); font-size: 22px; color: var(--gold); transition: transform .18s ease; }
.act:hover .act-arrow, .act:focus-visible .act-arrow { transform: translateX(4px); }
/* 表：金で塗った主役 */
.act-draw { background: linear-gradient(135deg, #f1d68d 0%, var(--gold) 45%, #b8944c 100%); border-color: transparent; color: #1a1208; }
.act-draw .act-kicker { color: rgba(26,18,8,.6); }
.act-draw .act-arrow { color: #1a1208; }
.act-draw::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -50%; transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); animation: sheen 3.6s ease-in-out 1.6s infinite; }
@keyframes sheen { 0% { left: -50%; } 45%, 100% { left: 120%; } }
/* 注意事項・規定：線だけ。2つ並べて1段に */
.act-notes, .act-rules { background: rgba(255,255,255,.03); color: var(--ink-light); }
.act-notes:hover, .act-notes:focus-visible, .act-rules:hover, .act-rules:focus-visible { border-color: var(--gold); }
.land-actions { grid-template-columns: 1fr 1fr; }
.act-draw { grid-column: 1 / -1; }
.act.is-off { pointer-events: none; opacity: .45; }
/* 狭い幅では、並べた2つは矢印を消して1行に収める */
@media (max-width: 430px) {
  .act-notes, .act-rules { grid-template-columns: 1fr; grid-template-areas: "kicker" "title"; padding: 11px 12px 10px 14px; }
  .act-notes .act-arrow, .act-rules .act-arrow { display: none; }
  .act-notes .act-title, .act-rules .act-title { font-size: 16px; letter-spacing: .06em; white-space: nowrap; }
}

/* 背の低い端末は上下を詰める */
@media (max-height: 700px) {
  .land { padding-top: calc(env(safe-area-inset-top) + 14px); padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .crest { margin-bottom: 8px; }
  .cd-num { font-size: clamp(96px, 32vw, 160px); }
  .cd-row { margin-bottom: 6px; }
  .cd-venue { display: none; }
  .act { padding: 10px 14px 9px 16px; }
  .act-title { font-size: clamp(16px, 4.6vw, 19px); }
}
@media (min-width: 700px) { .land-actions { max-width: 640px; } }