/* ============================================================
   BOXゲートラン！ — KEY VISUAL EDITION
   キービジュアル準拠: 青空 × 白いコンクリのコース × 赤/青のツヤツヤゲート × 金の立体ロゴ
   UIは「厚みのあるツヤ板」。文字は白抜き＋濃紺の縁取り
   ============================================================ */
:root {
  --sky-1: #3ea3ff; --sky-2: #9fd4ff; --sky-3: #e6f4ff;
  --navy: #0e2a5c; --navy-2: #163d80;
  --red: #ff2a3c; --red-d: #b8081c; --red-l: #ff6b78;
  --blue: #1e7cff; --blue-d: #0b3fb8; --blue-l: #6fb0ff;
  --gold: #ffb400; --gold-d: #b86f00; --gold-l: #ffe28a;
  --white: #ffffff; --paper: #f4f8fc; --concrete: #d9e0e8; --line: rgba(14,42,92,0.14);
  --text: #0e2a5c; --dim: rgba(14,42,92,0.6);
  --font-en: 'Outfit', 'Zen Kaku Gothic New', system-ui, sans-serif;   /* 数字・英字: ぶっ飛ばしコンテストと同じ Outfit 800 */
  --font-jp-display: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;   /* 見出し: Zen Kaku 900 */
  --font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; overflow: hidden; overscroll-behavior: none; background: var(--sky-1); }
body {
  color: var(--text); font-family: var(--font-jp);
  -webkit-user-select: none; user-select: none; touch-action: none;
  font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; }

#app { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; overflow: hidden; background: var(--sky-1); box-shadow: 0 0 80px rgba(0,0,0,0.35); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rbflow { to { background-position: 300% 0; } }
@keyframes shine { 0% { transform: translateX(-160%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cloud { from { transform: translateX(-10%); } to { transform: translateX(110%); } }

/* ---------- 文字の仕立て：白抜き＋濃紺の縁取り（ロゴと同じ作法） ---------- */
.outl { -webkit-text-stroke: 0; paint-order: stroke fill; color: #fff;
  text-shadow: 0 2px 0 var(--navy), 0 -1px 0 var(--navy), 1px 0 0 var(--navy), -1px 0 0 var(--navy), 0 4px 10px rgba(14,42,92,0.35); }
.en { font-family: var(--font-en); font-weight: 800; letter-spacing: 0.06em; }
.label { font-family: var(--font-en); font-weight: 800; font-size: 0.56rem; letter-spacing: 0.3em; color: var(--dim); text-transform: uppercase; }
.t-gold {
  font-family: var(--font-jp-display); font-weight: 900;
  background: linear-gradient(180deg, #fff3b0 0%, #ffd23f 40%, #ff9d00 70%, #ffc63a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a4400) drop-shadow(0 5px 10px rgba(122,68,0,0.35));
}

/* ---------- ツヤ板（ボタン・プレート共通） ---------- */
.plate {
  position: relative; border-radius: 16px; background: var(--white);
  box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.45), inset 0 0 0 2px rgba(255,255,255,0.9), inset 0 -8px 0 rgba(14,42,92,0.06);
}
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 340px; padding: 17px 22px; border-radius: 18px;
  font-family: var(--font-jp-display); font-weight: 900; font-size: 1.1rem; letter-spacing: 0.06em; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  background: linear-gradient(180deg, #ff6b78 0%, #ff2a3c 45%, #e0122a 100%);
  box-shadow: 0 7px 0 var(--red-d), 0 16px 30px -12px rgba(184,8,28,0.6), inset 0 2px 0 rgba(255,255,255,0.5);
  overflow: hidden; transition: transform 0.12s, box-shadow 0.12s;
}
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shine 3.4s ease-in-out infinite; }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--red-d), 0 8px 16px -10px rgba(184,8,28,0.6); }
.btn .chev { font-family: var(--font-en); font-weight: 800; font-size: 0.85rem; letter-spacing: -0.15em; opacity: 0.95; }
.btn .sub { font-family: var(--font-en); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.3em; opacity: 0.85; }
.btn.blue { background: linear-gradient(180deg, #6fb0ff 0%, #1e7cff 45%, #0f5fe0 100%); box-shadow: 0 7px 0 var(--blue-d), 0 16px 30px -12px rgba(11,63,184,0.6), inset 0 2px 0 rgba(255,255,255,0.5); }
.btn.blue:active { box-shadow: 0 2px 0 var(--blue-d), 0 8px 16px -10px rgba(11,63,184,0.6); }
.btn.gold { color: #4a2a00; text-shadow: 0 1px 0 rgba(255,255,255,0.6); background: linear-gradient(180deg, #ffe28a 0%, #ffb400 50%, #f39a00 100%); box-shadow: 0 7px 0 var(--gold-d), 0 16px 30px -12px rgba(184,111,0,0.6), inset 0 2px 0 rgba(255,255,255,0.6); }
.btn.gold:active { box-shadow: 0 2px 0 var(--gold-d), 0 8px 16px -10px rgba(184,111,0,0.6); }
.btn.line { background: linear-gradient(180deg, #4ee68a 0%, #06C755 50%, #049a41 100%); box-shadow: 0 7px 0 #036b2d, 0 16px 30px -12px rgba(6,199,85,0.6), inset 0 2px 0 rgba(255,255,255,0.5); }
.btn.line:active { box-shadow: 0 2px 0 #036b2d; }
.btn.line .badge { font-family: var(--font-en); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.08em; background: #fff; color: #06C755; padding: 3px 7px; border-radius: 6px; text-shadow: none; }
.btn.white { color: var(--navy); text-shadow: none; background: linear-gradient(180deg, #ffffff, #eef3f9); box-shadow: 0 7px 0 #b9c7d8, 0 16px 30px -12px rgba(14,42,92,0.35); }
.btn.white:active { box-shadow: 0 2px 0 #b9c7d8; }
.btn.white::after { display: none; }
.btn-text { font-family: var(--font-en); font-weight: 800; font-size: 0.62rem; letter-spacing: 0.3em; color: var(--navy); padding: 8px 14px; text-transform: uppercase; opacity: 0.75; }
.btn-text:active { opacity: 1; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; padding: calc(var(--safe-t) + 10px) 12px 0; display: flex; flex-direction: column; gap: 8px; }
.hud button { pointer-events: auto; }
.hud-row { display: flex; align-items: stretch; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 0 #b9c7d8, 0 8px 18px -10px rgba(14,42,92,0.45);
  transition: transform 0.12s, box-shadow 0.12s;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b9c7d8; }
.icon-btn.off { opacity: 0.5; }
.icon-btn svg { width: 16px; height: 16px; fill: var(--navy); }
.icon-btn .ic { display: contents; }
/* 白ピルのサウンド切替（タイトル・スプラッシュ用） */
.sound-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: #fff; color: var(--navy); box-shadow: 0 4px 0 #b9c7d8, 0 10px 22px -12px rgba(14,42,92,0.45);
  font-family: var(--font-en); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em;
}
.sound-pill svg { width: 18px; height: 18px; fill: var(--navy); }
.sound-pill.off { color: var(--red); }
.sound-pill.off svg { fill: var(--red); }
.sound-pill:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9c7d8; }
.stage-chip {
  display: flex; align-items: center; padding: 0 14px; border-radius: 12px;
  font-family: var(--font-en); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.22em; color: #fff;
  background: linear-gradient(180deg, var(--blue-l), var(--blue)); box-shadow: 0 3px 0 var(--blue-d), 0 8px 18px -10px rgba(11,63,184,0.5);
  transition: background 0.5s;
}
.stage-chip b { font-size: 0.95rem; margin-left: 6px; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.timer {
  margin-left: auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 0 #b9c7d8, 0 8px 18px -10px rgba(14,42,92,0.45);
  font-variant-numeric: tabular-nums;
}
.timer .t-num { --fit-base: 1.35rem; font-family: var(--font-en); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--navy); white-space: nowrap; }
.timer .t-unit { font-family: var(--font-en); font-weight: 800; font-size: 0.5rem; color: var(--dim); letter-spacing: 0.3em; }

.box-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
.box-line .bx {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f1f6fb); box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.45), inset 0 0 0 3px rgba(255,180,0,0.55);
  transition: transform 0.12s, box-shadow 0.2s;
}
.box-line .bx.bump { transform: scale(1.12); }
.box-line .bx.bad { box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.45), inset 0 0 0 3px var(--red); }
.box-line .bx svg { width: 24px; height: 24px; }
.box-line .bx-num { font-family: var(--font-en); font-weight: 800; font-size: 1.95rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--navy); }
.box-line .bx-cap { font-family: var(--font-en); font-weight: 800; font-size: 0.5rem; color: var(--gold-d); letter-spacing: 0.3em; margin-left: 2px; }
.streak {
  font-family: var(--font-en); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  background: linear-gradient(180deg, var(--red-l), var(--red)); padding: 8px 12px; border-radius: 12px; box-shadow: 0 3px 0 var(--red-d);
  opacity: 0; transform: translateY(-4px) scale(0.9); transition: opacity 0.2s, transform 0.2s;
}
.streak.on { opacity: 1; transform: none; }
.prog { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.7); margin: 4px 30px 0 6px; box-shadow: inset 0 1px 3px rgba(14,42,92,0.25); }
.prog-fill { height: 100%; border-radius: 99px; width: 0%; background: linear-gradient(90deg, var(--red), var(--gold), var(--blue)); transition: width 0.25s linear; }
.prog-flag { position: absolute; right: -26px; top: -8px; width: 22px; height: 22px; }
.prog-flag svg { width: 100%; height: 100%; }

/* ---------- オーバーレイ ---------- */
.ov {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--safe-t) + 18px) 18px calc(var(--safe-b) + 22px);
  text-align: center;
  background: linear-gradient(180deg, #3ea3ff 0%, #8ccbff 45%, #dfeffb 100%);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.ov::before, .ov::after { content: ''; display: block; flex: 1 1 0; min-height: 0; }
.ov.show { display: flex; animation: ovIn 0.3s cubic-bezier(0.2,0.9,0.3,1.1); }
@keyframes ovIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
/* 雲 */
.clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.clouds i { position: absolute; display: block; border-radius: 999px; background: #fff; opacity: 0.85; filter: blur(1px); }
.clouds i:nth-child(1) { width: 34%; height: 44px; top: 9%; left: -10%; animation: cloud 60s linear infinite; }
.clouds i:nth-child(2) { width: 24%; height: 32px; top: 16%; left: -20%; animation: cloud 75s linear 12s infinite; opacity: 0.7; }
.clouds i:nth-child(3) { width: 40%; height: 52px; top: 4%; left: -30%; animation: cloud 90s linear 30s infinite; opacity: 0.6; }
.ov > *:not(.clouds) { position: relative; z-index: 1; }
.brand-plate { display: inline-flex; padding: 8px 20px; border-radius: 14px; }
.brand-plate img { width: min(34vw, 130px); display: block; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.36em; color: #fff; text-shadow: 0 1px 0 rgba(14,42,92,0.5); }
.eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 2px; background: #fff; opacity: 0.8; }

/* ---------- タイトル ---------- */
#ovTitle { padding-top: 0; justify-content: flex-start; }
#ovTitle::before { display: none; }
.hero { position: relative; width: 100%; max-width: 520px; padding: 18px 0 6px; }
.hero-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(14,42,92,0.4)); animation: splashFloat 3.2s ease-in-out infinite; }
.brand-row { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-row .brand-plate { padding: 8px 20px; border-radius: 14px; box-shadow: 0 3px 0 #b9c7d8, 0 8px 18px -10px rgba(14,42,92,0.4); }
.brand-row .brand-plate img { width: min(32vw, 130px); }
.title-lead { font-family: var(--font-jp-display); font-weight: 900; font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.3; letter-spacing: 0.04em; margin-top: 10px; }
/* ベストスコアのカード */
.best-card { width: 100%; max-width: 340px; padding: 12px 16px 14px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.best-card:empty { display: none; }
.best-card .label { font-size: 0.6rem; letter-spacing: 0.34em; color: var(--blue); }
.best-card .num { font-family: var(--font-en); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--navy); letter-spacing: 0.02em; }
.best-card .title-badge { font-size: 1rem; }
.btn.big { padding: 20px 22px; font-size: 1.35rem; border-radius: 22px; }
.btn.big .sub { font-size: 0.68rem; }
.btn.how { padding: 13px 20px; font-family: var(--font-en); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.28em; max-width: 340px; }

/* HOW TO PLAY */
.rules[hidden] { display: none; }
.rules { display: grid; gap: 6px; width: 100%; max-width: 372px; padding: 12px; text-align: left; border-radius: 18px; }
.rule { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--paper); font-size: 0.75rem; line-height: 1.5; font-weight: 700; color: var(--navy); }
.rule .no { font-family: var(--font-en); font-weight: 800; font-size: 1rem; color: var(--blue); }
.rule b { color: var(--red); font-weight: 900; }
.rule .ng { color: var(--red); font-weight: 900; }
.rule .ok { color: var(--blue); font-weight: 900; }

/* ---------- カウントダウン ---------- */
#ovCount { background: rgba(62,163,255,0.35); }
.count-num {
  font-family: var(--font-en); font-weight: 800; font-size: clamp(7rem, 46vw, 12rem); line-height: 1; color: #fff;
  text-shadow: 0 6px 0 var(--navy), 0 0 2px var(--navy), 0 16px 40px rgba(14,42,92,0.45);
  animation: countPop 0.72s cubic-bezier(0.2,0.9,0.3,1.3);
}
@keyframes countPop { 0% { transform: scale(2.1); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.72); opacity: 0; } }
.pause-title { font-family: var(--font-en); font-weight: 800; font-size: 2.4rem; letter-spacing: 0.2em; color: #fff; text-shadow: 0 4px 0 var(--navy), 0 0 2px var(--navy); }

/* ---------- リザルト ---------- */
#ovResult { background: linear-gradient(180deg, rgba(62,163,255,0.9) 0%, rgba(140,203,255,0.86) 40%, rgba(223,239,251,0.92) 100%); }
.res-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.res-head { font-family: var(--font-en); font-weight: 800; font-size: 2.1rem; letter-spacing: 0.14em; line-height: 1; color: #fff; text-shadow: 0 5px 0 var(--red-d), 0 0 2px var(--red-d), 0 12px 30px rgba(184,8,28,0.4); }
.res-head.goal { text-shadow: 0 5px 0 var(--blue-d), 0 0 2px var(--blue-d), 0 12px 30px rgba(11,63,184,0.4); }
.res-sub { font-size: 0.74rem; color: var(--navy); font-weight: 900; margin-top: -4px; letter-spacing: 0.02em; }
.res-sub b { color: var(--red); font-family: var(--font-en); font-weight: 800; letter-spacing: 0.04em; }

/* 称号バッジ：等級プレート＋名前 */
.title-badge {
  display: inline-flex; align-items: stretch; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 0 #b9c7d8, 0 10px 24px -12px rgba(14,42,92,0.45);
  font-family: var(--font-jp-display); font-weight: 900; font-size: 0.98rem; letter-spacing: 0.04em; color: var(--navy);
}
.title-badge .tier { display: grid; place-items: center; padding: 0 12px; min-width: 54px; font-family: var(--font-en); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.35); background: #8a97ad; }
.title-badge .name { display: flex; align-items: center; padding: 9px 18px 9px 14px; }
.title-badge.sm { font-size: 0.78rem; border-radius: 10px; }
.title-badge.sm .tier { font-size: 0.6rem; min-width: 40px; padding: 0 8px; }
.title-badge.sm .name { padding: 6px 12px 6px 10px; }
.title-badge.r .tier { background: linear-gradient(180deg, #6fb0ff, #1e7cff); }
.title-badge.sr .tier { background: linear-gradient(180deg, #ffe28a, #ffb400); color: #4a2a00; text-shadow: none; }
.title-badge.ssr .tier { background: linear-gradient(180deg, #c59bff, #7c1fd6); }
.title-badge.ur .tier { background: linear-gradient(135deg, #19e6ff, #ff4fd8); }
.title-badge.lr .tier { background: linear-gradient(100deg, #ff0053, #ff7a00, #ffe600, #39ff14, #00e0ff, #2b6bff, #c400ff, #ff0053); background-size: 300% 100%; animation: rbflow 4s linear infinite; }
.title-badge.lr .name { background: linear-gradient(100deg, #ff2a3c, #ff7a00, #c99a00, #0aa64f, #1e7cff, #8b2be2, #ff2a3c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rbflow 4s linear infinite; }
.title-badge.mr .tier { background: linear-gradient(180deg, #fff3c4 0%, #ffcf4d 40%, #ff3350 100%); color: #2a0a02; text-shadow: none; }
.title-badge.mr { box-shadow: 0 4px 0 #b9c7d8, 0 0 30px rgba(255,120,60,0.7); animation: blink 1.6s ease-in-out infinite; }
.title-badge.mr .name { color: #c2410c; }
.title-badge.god .tier { background: linear-gradient(180deg, #0e2a5c, #000); }
.title-badge.god { background: linear-gradient(180deg, #fff, #dfe9f5); box-shadow: 0 4px 0 #8a97ad, 0 0 34px rgba(255,255,255,0.9), 0 0 60px rgba(30,124,255,0.6); animation: blink 1.1s ease-in-out infinite; }

.res-score {
  --fit-base: clamp(3.8rem, 20vw, 4.9rem);
  font-family: var(--font-en); font-weight: 800; font-size: clamp(3.8rem, 20vw, 4.9rem); line-height: 0.95; white-space: nowrap; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 6px 0 var(--navy), 0 0 2px var(--navy), 0 14px 34px rgba(14,42,92,0.45);
  padding: 6px 12px 4px;
}
.res-score-cap { font-family: var(--font-en); font-weight: 800; font-size: 0.56rem; letter-spacing: 0.44em; color: var(--navy); opacity: 0.75; }
.res-stats { display: flex; gap: 6px; width: 100%; }
.res-stat { flex: 1; padding: 10px 4px 10px; border-radius: 12px; background: #fff; box-shadow: 0 4px 0 #b9c7d8, 0 10px 24px -12px rgba(14,42,92,0.4); }
.res-stat .v { font-family: var(--font-en); font-weight: 800; font-size: 1.2rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.res-stat .k { font-family: var(--font-en); font-weight: 800; font-size: 0.48rem; color: var(--blue); letter-spacing: 0.22em; margin-top: 4px; }
.next-title { font-size: 0.72rem; color: var(--navy); font-weight: 900; }
.next-title b { color: var(--red); font-family: var(--font-en); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.04em; }
.next-title:empty { display: none; }
.res-new { font-family: var(--font-jp-display); font-weight: 900; font-size: 0.82rem; letter-spacing: 0.1em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); background: linear-gradient(180deg, var(--red-l), var(--red)); padding: 7px 18px; border-radius: 12px; box-shadow: 0 4px 0 var(--red-d); animation: bob 1.2s ease-in-out infinite; }


.prize { width: 100%; padding: 14px 16px 13px; border-radius: 18px; color: #4a2a00; background: linear-gradient(180deg, #ffe28a 0%, #ffb400 60%, #f39a00 100%); box-shadow: 0 5px 0 var(--gold-d), 0 14px 30px -14px rgba(184,111,0,0.7), inset 0 2px 0 rgba(255,255,255,0.6); }
.prize-head { font-family: var(--font-en); font-weight: 800; font-size: 0.56rem; letter-spacing: 0.36em; color: #7a4400; }
.prize-item { font-family: var(--font-jp-display); font-weight: 900; font-size: 1.1rem; line-height: 1.35; margin-top: 4px; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 0 #7a4400, 0 0 1px #7a4400; }
.prize-item small { display: block; font-size: 0.72rem; margin-top: 4px; font-family: var(--font-jp); font-weight: 900; color: #4a2a00; text-shadow: none; }
.prize-note { font-size: 0.64rem; color: rgba(74,42,0,0.8); margin-top: 6px; font-weight: 700; line-height: 1.6; }
/* 応募CTA・無料登録導線・注意書き（エクシアの肝試しと同方式 2026-10-30） */
.share-cta { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 14px 12px; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.45), inset 0 0 0 3px rgba(255,42,60,0.55); }
.share-ribbon { font-family: var(--font-jp-display); font-weight: 900; font-size: 0.98rem; letter-spacing: 0.12em; color: var(--red); animation: ribbonBlink 1s steps(2) infinite; }
@keyframes ribbonBlink { 50% { opacity: 0.4; } }
.btn.x.big { max-width: none; min-height: 74px; padding: 16px 20px; font-size: 1.2rem; white-space: nowrap; border-radius: 20px; animation: shareGlow 1.5s ease-in-out infinite; }
@keyframes shareGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); box-shadow: 0 7px 0 #000, 0 0 0 5px rgba(255,42,60,0.35), 0 18px 40px -10px rgba(0,0,0,0.8); } }
.btn.x.big:active { transform: translateY(5px) scale(1); animation: none; }
.btn.x.big .sub { color: var(--gold-l); opacity: 1; }
.btn.x.big .xmark { width: 28px; height: 28px; }
.btn.x.big .xmark svg { width: 18px; height: 18px; }
.share-cta .shwarn { margin-top: 0; }
.reg { width: 100%; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.4); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.regh { font-family: var(--font-jp-display); font-weight: 900; font-size: 0.92rem; letter-spacing: 0.08em; color: var(--navy); }
.regbtn { display: block; width: 100%; padding: 14px 20px; background: linear-gradient(180deg, #ff6b78 0%, #ff2a3c 45%, #e0122a 100%); color: #fff; font-family: var(--font-jp-display); font-weight: 900; font-size: 1.1rem; letter-spacing: 0.06em; text-decoration: none; text-align: center; border-radius: 14px; text-shadow: 0 2px 0 rgba(0,0,0,0.35); box-shadow: 0 6px 0 var(--red-d), 0 14px 30px -12px rgba(184,8,28,0.6), inset 0 2px 0 rgba(255,255,255,0.5); }
.regbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-d); }
.stores { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 8px; background: #000; color: #fff; border: 1px solid #8a8a8a; border-radius: 8px; padding: 5px 13px 5px 10px; text-decoration: none; height: 44px; }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.store small { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; }
.store b { font-size: 15px; font-weight: 700; }
.caution { width: 100%; font-size: 0.66rem; line-height: 1.7; color: var(--dim); font-weight: 700; text-align: center; }

.rank-box { width: 100%; padding: 13px 15px 14px; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #b9c7d8, 0 12px 26px -12px rgba(14,42,92,0.4); }
.rank-title { font-family: var(--font-en); font-weight: 800; font-size: 0.56rem; letter-spacing: 0.34em; color: var(--blue); margin-bottom: 8px; text-align: left; }
.rank-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.rank-list li { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; padding: 6px 8px; border-radius: 8px; color: var(--navy); }
.rank-list li.me { background: rgba(255,180,0,0.18); box-shadow: inset 3px 0 0 var(--gold); }
.rank-list .no { width: 1.8em; font-family: var(--font-en); font-weight: 800; color: var(--dim); text-align: left; font-size: 0.7rem; }
.rank-list .tt { color: var(--dim); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.rank-list .pt { margin-left: auto; font-family: var(--font-en); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.rank-empty { font-size: 0.72rem; color: var(--dim); text-align: left; padding: 2px; }
.copy { font-family: var(--font-en); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.26em; color: var(--navy); opacity: 0.55; }

#ovLoad { background: linear-gradient(180deg, #3ea3ff, #9fd4ff); }
.load-bar { width: min(64%, 230px); height: 8px; border-radius: 99px; background: rgba(255,255,255,0.7); overflow: hidden; box-shadow: inset 0 1px 3px rgba(14,42,92,0.25); }
.load-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), var(--gold), var(--blue)); transition: width 0.2s; }
.load-txt { font-family: var(--font-en); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.4em; color: #fff; text-shadow: 0 1px 0 rgba(14,42,92,0.5); }

.toast { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translateX(-50%); z-index: 9; padding: 11px 20px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 0.76rem; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 0 #061534; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, -8px); }
/* ---------- 共通アニメ ---------- */
@keyframes splashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes raysSpin { to { transform: rotate(360deg); } }
/* ---------- エクシア配置・Xシェア ---------- */
.title-row { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 420px; margin-top: 2px; }
.title-chibi { width: 36%; max-width: 150px; height: auto; flex: none; filter: drop-shadow(0 10px 14px rgba(14,42,92,0.35)); animation: splashFloat 2.8s ease-in-out 0.4s infinite; }
.title-row .title-lead { margin-top: 0; text-align: left; flex: 1; min-width: 0; font-size: clamp(1rem, 4.7vw, 1.3rem); letter-spacing: 0; }
.res-top { display: flex; align-items: center; gap: 4px; width: 100%; }
.res-exia { width: 30%; max-width: 118px; height: auto; flex: none; align-self: flex-end; margin-bottom: 6px; filter: drop-shadow(0 10px 14px rgba(14,42,92,0.35)); }
.res-topr { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.res-topr .res-head { font-size: 1.7rem; }
.res-topr .res-score { --fit-base: clamp(2.2rem, 12vw, 3rem); font-size: var(--fit-base); padding: 4px 6px 2px; }
.btn.x { color: #fff; background: linear-gradient(180deg, #4a4a52 0%, #16161a 50%, #000 100%); box-shadow: 0 7px 0 #000, 0 16px 30px -12px rgba(0,0,0,0.7), inset 0 2px 0 rgba(255,255,255,0.25); text-decoration: none; }
.btn.x:active { box-shadow: 0 2px 0 #000; }
.btn.x .xmark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: #000; }
.btn.x .xmark svg { width: 15px; height: 15px; }
.btn.sm { min-height: 44px; font-size: 0.85rem; }
.shwarn { font-size: 0.62rem; color: var(--red-d); font-weight: 900; letter-spacing: 0.02em; margin-top: -6px; }
.shmodal { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(14,42,92,0.62); }
.shmodal.show { display: flex; }
.shbox { width: 100%; max-width: 400px; padding: 16px 16px 14px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shbox img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 20px -8px rgba(14,42,92,0.5); }
.shtitle { font-family: var(--font-en); font-weight: 800; font-size: 1rem; letter-spacing: 0.3em; color: var(--navy); }
.shnote { font-size: 0.72rem; font-weight: 700; color: var(--navy); line-height: 1.5; text-align: center; }
.shnote .shwarn { margin-top: 0; }
.shbox .btn { width: 100%; }
.gap-s { height: 2px; }
.gap-m { height: 10px; }
.gap-l { height: 18px; }