/* =========================================================
   ゲピミニランナー / style.css
   スマホ縦持ち。上がゲーム画面、下が操作盤。
   ========================================================= */
:root {
  --bg: #1d2340;
  --panel: #262d52;
  --ink: #fff;
  --sub: #b9c0e6;
  --gold: #ffd23f;
  --world: #ff9c3f;
  --view-h: 56vh;
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --logo: 'Dela Gothic One', 'Hiragino Kaku Gothic StdN', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0e1226; color: var(--ink); font-family: var(--font);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .3; cursor: default; }
img { -webkit-user-drag: none; }

#app {
  position: relative; height: 100%; height: 100dvh; max-width: 480px; margin: 0 auto;
  background: var(--bg); overflow: hidden;
}
.scr { position: absolute; inset: 0; display: none; }
.scr.on { display: block; }

/* ---------- 読み込み ---------- */
#scr-loading { display: none; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #33407a, #151a33); }
#scr-loading.on { display: flex; }
.load-box { width: 70%; text-align: center; }
.load-face { width: 84px; animation: bob .5s ease-in-out infinite alternate; }
.load-bar { height: 12px; border-radius: 6px; background: #0b0f22; margin: 14px 0 8px; overflow: hidden; border: 2px solid #fff3; }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb13b, #ffd23f); transition: width .15s; }
#load-text { font-size: 13px; color: var(--sub); margin: 0; }
@keyframes bob { to { transform: translateY(-8px) rotate(4deg); } }

/* ---------- タイトル ---------- */
#scr-title canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#scr-title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0008, #0000 45%, #0000 60%, #000a); pointer-events: none; }
.title-logo {
  position: absolute; z-index: 2; top: 9%; left: 0; right: 0; text-align: center;
  font-family: var(--logo); line-height: 1; transform: rotate(-4deg);
  animation: logoIn .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.title-logo span { display: block; }
.title-logo .t1 { font-size: 52px; color: #ffd23f; -webkit-text-stroke: 3px #3a1d00; text-shadow: 0 5px 0 #e05a1a, 0 8px 12px #0008; }
.title-logo .t2 { font-size: 60px; color: #fff; -webkit-text-stroke: 3px #1b2a5a; text-shadow: 0 5px 0 #4a8cff, 0 8px 12px #0008; margin-top: 4px; letter-spacing: 2px; }
.title-logo .t3 { font-size: 13px; letter-spacing: 5px; margin-top: 12px; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 4px #000; }
@keyframes logoIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.title-cast { position: absolute; z-index: 2; left: 0; right: 0; bottom: 20%; display: flex; justify-content: center; align-items: flex-end; }
.title-cast img { width: 34%; max-width: 150px; margin: 0 -4%; filter: drop-shadow(0 6px 6px #0008); animation: bob .8s ease-in-out infinite alternate; }
.title-cast img:nth-child(2) { width: 38%; animation-delay: .25s; z-index: 1; }
.title-cast img:nth-child(3) { animation-delay: .5s; }
.title-press {
  position: absolute; z-index: 2; bottom: 9%; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--logo); font-size: 22px; letter-spacing: 3px; text-shadow: 0 3px 0 #000;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }
.btn-sound { position: absolute; z-index: 3; top: 12px; right: 12px; background: #0008; border-radius: 20px; padding: 6px 12px; font-size: 13px; }

/* ---------- マップ ---------- */
#scr-map.on { display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; background: linear-gradient(var(--world), color-mix(in srgb, var(--world) 60%, #000)); }
.map-arrow { width: 40px; height: 40px; border-radius: 50%; background: #0004; font-size: 16px; }
.map-title { text-align: center; line-height: 1.2; }
.map-title small { display: block; font-family: var(--logo); font-size: 12px; letter-spacing: 2px; opacity: .9; }
.map-title b { font-size: 18px; text-shadow: 0 2px 0 #0006; }
.map-field { position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden; }
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.9); }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-path polyline { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .9; }
.map-path polyline { stroke-width: 5px; }
.node {
  position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe07a 30%, #f2a71b); border: 3px solid #fff;
  box-shadow: 0 4px 0 #8a5300, 0 6px 10px #0008; font-family: var(--logo); font-size: 14px; color: #5a2e00;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.node i { font-style: normal; font-size: 10px; color: #c7470c; margin-top: 2px; letter-spacing: -1px; }
.node.lock { background: radial-gradient(circle at 35% 30%, #ddd, #888); color: #444; box-shadow: 0 4px 0 #444; }
.node.lock span::before { content: '🔒'; display: block; font-size: 14px; }
.node.lock span { font-size: 0; }
.node.sel { animation: pulse 1s ease-in-out infinite; }
.node.story::after { content: '📖'; position: absolute; top: -12px; right: -10px; font-size: 16px; }
.node .gem-mini { position: absolute; bottom: -16px; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.map-me { position: absolute; width: 64px; margin: -92px 0 0 -32px; z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 4px #0009); transition: left 1s ease-in-out, top 1s ease-in-out; }
.map-me.walk { animation: hop .25s ease-in-out 4 alternate; }
@keyframes hop { to { transform: translateY(-10px); } }
.map-gems { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; background: #0007; padding: 6px 8px; border-radius: 14px; }
.map-card { flex: 0 0 auto; background: var(--panel); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 3px solid var(--world); }
.map-stage { display: flex; align-items: baseline; gap: 10px; }
.map-stage b { font-family: var(--logo); font-size: 20px; }
#map-stars { color: var(--gold); letter-spacing: 1px; }
#map-best { margin-left: auto; font-size: 12px; color: var(--sub); }
.map-pick-label { margin: 6px 0 4px; font-size: 12px; color: var(--sub); }
.map-pick { display: flex; gap: 8px; }
.pick { flex: 1; background: #1a2040; border: 3px solid #fff2; border-radius: 14px; padding: 4px 2px 6px; display: flex; flex-direction: column; align-items: center; }
.pick img { width: 46px; height: 46px; }
.pick b { font-size: 13px; }
.pick.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, #1a2040); transform: translateY(-2px); }
.map-skill { font-size: 11.5px; line-height: 1.5; color: #dfe3ff; margin: 6px 0 8px; min-height: 52px; }
.map-skill b { display: block; color: var(--gold); font-size: 13px; }
.map-skill span { color: var(--sub); }
.map-foot { display: flex; gap: 6px; margin-top: 8px; }
.map-foot .btn-sub { flex: 1; font-size: 12px; padding: 8px 4px; }

.btn-go {
  display: block; width: 100%; padding: 13px; border-radius: 16px; font-family: var(--logo); font-size: 22px; letter-spacing: 2px;
  background: linear-gradient(#ffcf3a, #ff8a1a); color: #fff; -webkit-text-stroke: 1px #7a3300;
  box-shadow: 0 5px 0 #b84f00, 0 8px 14px #0006; text-shadow: 0 2px 0 #b84f00;
}
.btn-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #b84f00; }
.btn-sub { background: #3a4378; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #1a1f40; }
.btn-sub:active { transform: translateY(2px); box-shadow: none; }

/* 宝石（CSS で描く。ワールドごとに色がちがう） */
.gem, .gem-mini { display: inline-block; clip-path: polygon(50% 0, 90% 32%, 50% 100%, 10% 32%); background: linear-gradient(135deg, #fff 0 12%, var(--g1) 30%, var(--g2) 100%); }
.gem-mini { width: 16px; height: 18px; filter: grayscale(1) brightness(.5); }
.gem-mini.got { filter: none; }
.gem { width: 46px; height: 54px; animation: gemIn .5s cubic-bezier(.2, 1.6, .4, 1) both, gemShine 1.4s ease-in-out infinite alternate; }
.w1 { --g1: #ffb45a; --g2: #e0561b; }
.w2 { --g1: #ffe066; --g2: #d69a00; }
.w3 { --g1: #8fb0ff; --g2: #3450d8; }
.w4 { --g1: #ff9ccc; --g2: #e0317a; }
.w5 { --g1: #d9a3ff; --g2: #8a2fd8; }
@keyframes gemIn { from { transform: scale(0) rotate(-90deg); } }
@keyframes gemShine { to { filter: brightness(1.35) drop-shadow(0 0 6px #fff); } }

/* ---------- ものがたり ---------- */
#scr-story { background: #000; }
.st-bg { position: absolute; top: 0; left: 0; width: 100%; height: 72%; object-fit: cover; opacity: 0; transition: transform .8s ease-in-out, opacity .8s; }
.st-bg.on { opacity: 1; transform: none; }
.st-bg.enter { opacity: 0; transform: translateX(40%); transition: none; }
.st-bg.leave { opacity: 0; transform: translateX(-40%); }
.st-chara {
  position: absolute; bottom: 4%; height: 66%; width: auto; max-width: none; opacity: 0; pointer-events: none;
  filter: brightness(.5) drop-shadow(0 6px 8px #0008); transition: opacity .3s, filter .25s, transform .3s;
  transform: translateX(-50%) scale(.84); transform-origin: 50% 100%;
}
.st-chara.l { left: 16%; } .st-chara.c { left: 50%; } .st-chara.r { left: 84%; }
.st-chara.in { opacity: 1; }
.st-chara.speak { filter: brightness(1) drop-shadow(0 6px 8px #0008); transform: translateX(-50%) scale(1); z-index: 2; }
.st-chara.hop { animation: charaHop .35s ease-out; }
.st-chara.shake { animation: charaShake .4s linear; }
@keyframes charaHop { 40% { transform: translateX(-50%) translateY(-16px); } }
@keyframes charaShake { 20%, 60% { transform: translateX(calc(-50% - 6px)); } 40%, 80% { transform: translateX(calc(-50% + 6px)); } }
.st-cg { position: absolute; top: 4%; left: 5%; width: 90%; height: 64%; object-fit: cover; border: 4px solid #fff; border-radius: 6px; box-shadow: 0 8px 24px #000c; opacity: 0; transform: scale(.9) rotate(-2deg); transition: opacity .4s, transform .4s; z-index: 3; pointer-events: none; }
.st-cg.on { opacity: 1; transform: rotate(-1deg); }
.st-gems { position: absolute; top: 18%; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 4; opacity: 0; transition: opacity .3s; pointer-events: none; }
.st-gems.on { opacity: 1; }
.st-gems .gem { width: 64px; height: 76px; }
.st-gems::before { content: ''; position: absolute; inset: -40px 0; background: radial-gradient(ellipse, #fff8, #fff0 70%); z-index: -1; }
.st-title { position: absolute; top: 14px; left: 0; padding: 6px 16px 6px 12px; background: #000a; border-radius: 0 20px 20px 0; font-size: 13px; font-weight: 800; opacity: 0; z-index: 5; }
.st-title.on { animation: titleIn 3.2s ease both; }
@keyframes titleIn { 0% { opacity: 0; transform: translateX(-30px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.st-win {
  position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 26%; z-index: 6;
  background: #fffdf5; color: #2a2230; border-radius: 16px; border: 4px solid #2a2230; padding: 26px 16px 12px; box-shadow: 0 6px 0 #0006;
}
.st-win.narr { background: #1d1a2c; color: #fff; border-color: #6c6391; }
.st-name { position: absolute; top: -18px; left: 14px; padding: 4px 16px; border-radius: 12px; font-weight: 800; font-size: 16px; color: #fff; border: 3px solid #2a2230; display: none; background: #555; }
.st-name.on { display: block; }
.st-name.gepimini { background: #e8a600; } .st-name.gepicrm { background: #3a78c2; } .st-name.gepicap { background: #1f9e6e; } .st-name.all { background: #c2466b; }
.st-text { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 800; white-space: pre-wrap; }
.st-next { position: absolute; right: 14px; bottom: 8px; font-size: 14px; opacity: 0; }
.st-next.on { opacity: 1; animation: bob .5s ease-in-out infinite alternate; }
.st-skip { position: absolute; top: 12px; right: 10px; z-index: 7; background: #000a; border-radius: 16px; padding: 6px 12px; font-size: 12px; }

/* ---------- ゲーム ---------- */
#scr-game.on { display: flex; flex-direction: column; }
.view { position: relative; flex: 0 0 var(--view-h); height: var(--view-h); overflow: hidden; background: #000; }
#game-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); pointer-events: none; }
.hud-hp { display: flex; gap: 2px; }
.hud-hp i { width: 18px; height: 16px; background: #0006; clip-path: path('M9 16 C-4 7 2 -2 9 4 C16 -2 22 7 9 16Z'); }
.hud-hp i.on { background: #ff4d6d; }
.hud-prog { position: relative; flex: 1; height: 8px; background: #0007; border-radius: 4px; border: 1.5px solid #fff8; }
.hud-prog i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--gold); }
.hud-prog img { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.hud-prog .flag { position: absolute; right: -6px; top: -10px; font-size: 14px; }
.hud-coin { display: flex; align-items: center; gap: 4px; background: #0008; border-radius: 12px; padding: 2px 8px 2px 4px; min-width: 70px; }
.coin-ico { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b8, #ffd23f 45%, #b7791f); }
.hud-coin b { font-family: var(--logo); font-size: 14px; font-weight: 400; }
.hud-pause { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; background: #0008; font-weight: 800; font-size: 13px; }
.hud-stage { position: absolute; top: 44px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 14px; text-shadow: 0 2px 3px #000; opacity: 0; pointer-events: none; }
.hud-stage.on { animation: titleIn 3s ease both; }
.toast { position: absolute; left: 50%; top: 64px; transform: translate(-50%, -10px); max-width: 92%; padding: 7px 14px; background: #fffdf2; color: #3a2a00; border: 3px solid #3a2a00; border-radius: 14px; font-size: 13.5px; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.ready { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--logo); font-size: 48px; color: #fff; -webkit-text-stroke: 2px #1b2a5a; text-shadow: 0 4px 0 #4a8cff; opacity: 0; pointer-events: none; }
.ready.on { animation: readyIn 1.1s ease both; }
@keyframes readyIn { 0% { opacity: 0; transform: scale(2); } 20%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.8); } }

/* カットイン */
.cutin { position: absolute; left: 0; right: 0; top: 50%; height: 44%; transform: translateY(-50%); opacity: 0; pointer-events: none; overflow: hidden; }
.cutin.on { animation: cutBand .95s ease both; }
.cutin-band { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cutin::before, .cutin::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; background: var(--c); z-index: 2; }
.cutin::before { top: 0; } .cutin::after { bottom: 0; }
.cutin-card { position: absolute; top: 0; left: 0; height: 100%; width: 70%; object-fit: cover; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.cutin.on .cutin-card { animation: cutCard .95s cubic-bezier(.1, .9, .3, 1) both; }
.cutin-text { position: absolute; right: 4%; bottom: 12%; text-align: right; z-index: 3; line-height: 1.1; }
.cutin-text small { display: block; font-size: 15px; font-weight: 800; text-shadow: 0 2px 2px #000; }
.cutin-text b { font-family: var(--logo); font-weight: 400; font-size: 26px; color: #fff; -webkit-text-stroke: 1.5px #000; text-shadow: 0 3px 0 var(--c), 0 5px 8px #000a; }
.cutin.on .cutin-text { animation: cutText .95s ease both; }
@keyframes cutBand { 0% { opacity: 0; clip-path: inset(50% 0); } 12%, 86% { opacity: 1; clip-path: inset(0 0); } 100% { opacity: 0; clip-path: inset(50% 0); } }
@keyframes cutCard { 0% { transform: translateX(-100%); } 25%, 85% { transform: translateX(0); } 100% { transform: translateX(8%); } }
@keyframes cutText { 0%, 15% { opacity: 0; transform: translateX(60px); } 35%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 操作盤（画面の下 1/4 ほど）。上の段にキャラ3人、下の段にスライディングとジャンプ */
.pad {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(#2c3563, #1a2040); border-top: 3px solid #0b0f22; touch-action: none; min-height: 0;
}
.pad-skills { flex: 0 0 40%; display: flex; gap: 6px; min-height: 0; }
.sk {
  position: relative; flex: 1; min-width: 0; border-radius: 14px; background: #141a36; border: 2px solid #fff1; padding: 3px 4px;
  display: flex; flex-direction: row; align-items: center; gap: 5px; touch-action: none; text-align: left;
}
.sk-ring {
  --size: min(11vw, 48px, 5.6vh);
  position: relative; width: var(--size); height: var(--size); border-radius: 50%; padding: 3px; flex: 0 0 auto;
  background: conic-gradient(var(--c) var(--p, 0deg), #4a5070 var(--p, 0deg));
}
.sk-ring img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; background: #0b0f22; object-fit: cover; }
.sk-ring img.g { filter: grayscale(1) brightness(.55); }
/* 12 時の位置から時計回りに色がもどる */
.sk-ring img.c { -webkit-mask-image: conic-gradient(#000 var(--p, 0deg), transparent var(--p, 0deg)); mask-image: conic-gradient(#000 var(--p, 0deg), transparent var(--p, 0deg)); }
.sk-txt { display: flex; flex-direction: column; min-width: 0; }
.sk b { font-size: 12px; line-height: 1.2; }
.sk small { font-size: 9px; color: var(--sub); line-height: 1.15; letter-spacing: -.3px; }
.sk .run { position: absolute; top: -7px; left: 4px; font-style: normal; font-family: var(--logo); font-size: 9px; padding: 0 5px; border-radius: 6px; background: var(--c); color: #0b0f22; display: none; }
.sk.running { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, #141a36); }
.sk.running .run { display: block; }
.sk.full .sk-ring { animation: ready 0.8s ease-in-out infinite alternate; }
.sk.full::after { content: 'GO!'; position: absolute; top: -7px; right: 4px; font-family: var(--logo); font-size: 10px; color: var(--c); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.sk.active .sk-ring { box-shadow: 0 0 0 3px #fff, 0 0 16px var(--c); }
@keyframes ready { from { box-shadow: 0 0 0 0 var(--c); } to { box-shadow: 0 0 14px 4px var(--c); } }
.sk.nope { animation: nope .3s linear; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sk .call { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 10px; background: #fff; color: #c2000b; border: 2px solid #c2000b; z-index: 2; }
.sk .call::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #c2000b; }
.sk.calling { border-color: #ff4d4d; animation: call .5s ease-in-out infinite alternate; }
.sk.calling .call { display: block; }
@keyframes call { to { transform: translateY(-3px); box-shadow: 0 0 14px #ff4d4d; } }
.pad-main { flex: 1 1 60%; display: flex; gap: 10px; min-height: 0; }
.pad-btn {
  flex: 1; border-radius: 18px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; touch-action: none;
  font-weight: 800; box-shadow: 0 5px 0 var(--sh), 0 8px 14px #0008; transition: transform .05s;
}
.pad-btn .ico { font-size: 22px; line-height: 1; }
.pad-btn b { font-size: 16px; }
.pad-btn small { display: none; }
.pad-btn.slide { --sh: #1c4f8a; background: linear-gradient(#5aa8ff, #2f73d6); flex: 0.8; }
.pad-btn.jump { --sh: #a33d00; background: linear-gradient(#ffb13b, #ff6a1a); }
.pad-btn.press { transform: translateY(4px); box-shadow: 0 1px 0 var(--sh); }

/* ---------- モーダル ---------- */
.modal { position: absolute; inset: 0; z-index: 20; background: #000a; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.on { display: flex; }
.panel { width: 100%; max-width: 340px; background: var(--panel); border-radius: 22px; border: 3px solid #fff3; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 10px; animation: logoIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.panel .row { display: flex; gap: 8px; }
.panel .row .btn-sub { flex: 1; }
.res-head { margin: 0; font-family: var(--logo); font-weight: 400; font-size: 30px; color: var(--gold); -webkit-text-stroke: 1px #5a2e00; text-shadow: 0 3px 0 #b84f00; }
.res-head.over { color: #ff6a6a; text-shadow: 0 3px 0 #6a0000; }
.res-stars span { font-size: 40px; color: #4a5070; display: inline-block; }
.res-stars span.on { color: var(--gold); animation: gemIn .4s cubic-bezier(.2, 1.6, .4, 1) both; text-shadow: 0 0 10px #ffb13b; }
.res-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; text-align: left; background: #0003; padding: 10px 14px; border-radius: 12px; }
.res-list dt { color: var(--sub); font-size: 13px; }
.res-list dd { margin: 0; text-align: right; font-family: var(--logo); }
.res-new { margin: 0; color: #ff8fd0; font-weight: 800; animation: blink .8s steps(2) infinite; }
.over-tip { margin: 0; font-size: 13px; color: #dfe3ff; background: #0003; padding: 10px; border-radius: 10px; }
.story-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.story-list .btn-sub { font-size: 13px; text-align: left; }

/* ---------- エンディングのあと ---------- */
#scr-end.on { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #4a3a8a, #120e2a); }
.end-box { text-align: center; padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.end-box h2 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: 44px; color: var(--gold); text-shadow: 0 4px 0 #b84f00; }
.end-gems { display: flex; gap: 8px; }
.end-msg { font-weight: 800; margin: 0; }
.end-total { font-family: var(--logo); margin: 0; }
.end-credit { font-size: 11px; color: var(--sub); line-height: 1.6; }
.end-credit b { display: block; color: #fff; }
.end-box .btn-go { max-width: 260px; }

/* 横向きのスマホ */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate { display: flex; position: fixed; inset: 0; z-index: 99; background: var(--bg); align-items: center; justify-content: center; font-weight: 800; }
}