/* サンタ、あと30秒。 — 深いネイビー・シャンパンゴールド・深紅・フォレストグリーン・アイボリー。スマートフォン縦画面を基準に、PCでは中央に一枚のゲーム画面として配置 */
:root {
  --navy: #0c1a2a; --navy2: #13263a; --navy3: #1d3550; --ivory: #f7f0e1; --ivory2: #ebdfc6; --paper: #fdf8ee; --ink: #2a2220; --muted: #6f655c;
  --red: #a3202c; --red2: #6e121b; --redL: #d0505a; --green: #1e4a3a; --green2: #143528; --greenL: #2f6b55;
  --gold: #d9b878; --gold2: #a8843f; --gold3: #7d5f27; --goldL: #f1dfae;
  --foil: linear-gradient(115deg, #a8843f 0%, #f1dfae 22%, #c9a25a 40%, #fff2c8 55%, #b8904a 72%, #f1dfae 100%);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "BIZ UDPMincho", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --pop: cubic-bezier(.2, 1.4, .4, 1); --ease: cubic-bezier(.25, .8, .3, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
body { margin: 0; min-height: 100vh; min-height: 100svh; font-family: var(--sans); color: var(--ivory); line-height: 1.6; overflow-x: hidden;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(241,223,174,.55), transparent), radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 42%, rgba(241,223,174,.45), transparent), radial-gradient(1px 1px at 30% 64%, rgba(255,255,255,.4), transparent),
    radial-gradient(120% 70% at 50% -10%, #213d58 0%, var(--navy2) 45%, var(--navy) 100%) fixed; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--goldL); outline-offset: 3px; border-radius: 12px; }
.loading { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--navy); color: var(--goldL); font-family: var(--serif); letter-spacing: .1em; }
.app { position: relative; max-width: 480px; margin: 0 auto; padding: 0 14px; padding-bottom: env(safe-area-inset-bottom); }
/* PC・タブレット：中央に上質な一枚のゲーム画面 */
.stage-bg { display: none; }
@media (min-width: 760px) {
  .app { max-width: 540px; margin: 28px auto; padding: 0 22px 8px; border-radius: 28px; background: linear-gradient(180deg, rgba(19,38,58,.92), rgba(12,26,42,.96));
    box-shadow: 0 0 0 1px rgba(217,184,120,.75), 0 0 0 7px rgba(217,184,120,.1), 0 0 0 8px rgba(217,184,120,.35), 0 40px 80px -30px rgba(0,0,0,.9); }
  .stage-bg { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .orn { position: absolute; width: 360px; height: 360px; border-radius: 50%; opacity: .5;
    background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(217,184,120,.25) 53%, transparent 55%), repeating-conic-gradient(from 0deg, rgba(217,184,120,.16) 0 2deg, transparent 2deg 30deg); }
  .o1 { left: -120px; top: 12%; } .o2 { right: -140px; bottom: 6%; transform: rotate(15deg); }
}
/* ヘッダー */
.hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 0 8px; }
.hd-logo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; font-family: var(--serif); font-size: 14px; letter-spacing: .08em; white-space: nowrap; } .hd-logo b { color: var(--goldL); font-weight: 600; }
body[data-screen="s-title"] .hd-logo { visibility: hidden; }
.hd-btns { flex: 0 0 auto; display: flex; gap: 6px; }
.tg { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(241,223,174,.45); border-radius: 999px; background: rgba(255,255,255,.06); font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; }
.tg[aria-pressed="true"] { background: rgba(241,223,174,.18); border-color: var(--goldL); color: var(--goldL); }
@media (max-width: 360px) { .hd-logo span { display: none; } .tg { padding: 0 9px; gap: 3px; font-size: 12px; } }
.screen { display: none; } .screen.is-active { display: block; animation: scrIn .45s var(--ease) both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px); } }
.foil { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ================= タイトル ================= */
.t-art { position: relative; display: block; margin: 0 -14px; width: calc(100% + 28px); height: min(calc(100vw * 1.12), 42svh); overflow: hidden; }
@media (min-width: 760px) { .t-art { margin: 0 -22px; width: calc(100% + 44px); height: min(500px, 44svh); } }
.t-art svg { display: block; width: 100%; height: 100%; }
.t-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to top, var(--navy2), transparent); pointer-events: none; }
.t-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #eef3f7; animation: veil 1.6s var(--ease) .1s both; }
@keyframes veil { 0% { opacity: 1; } 100% { opacity: 0; } }
.t-body { position: relative; margin-top: -48px; text-align: center; z-index: 4; }
.t-eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .38em; color: var(--goldL); }
.t-h { margin: 6px 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 11vw, 54px); line-height: 1.15; letter-spacing: .04em; white-space: nowrap; filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)); }
.t-h span { display: block; font-size: .7em; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-lead { margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: rgba(247,240,225,.92); }
.t-how { display: grid; gap: 6px; margin: 14px auto 16px; padding: 0; max-width: 360px; list-style: none; font-size: 13px; text-align: left; }
.t-how li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(241,223,174,.22); }
.t-how b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--foil); color: var(--navy); font-size: 12px; }
.t-how em { font-style: normal; color: var(--goldL); font-weight: 700; } .t-how small { font-size: 11px; opacity: .75; }
.go { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 66px; border: 0; border-radius: 20px; color: var(--ivory);
  background: linear-gradient(180deg, #c33440 0%, var(--red) 55%, var(--red2) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(217,184,120,.18), 0 12px 26px -10px rgba(163,32,44,.9); transition: transform .12s; }
.go span { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .12em; } .go small { font-size: 11.5px; opacity: .85; letter-spacing: .06em; }
.go:active { transform: translateY(2px) scale(.99); }
.go.small { min-height: 56px; margin-top: 12px; } .go.small span { font-size: 18px; }
.sub { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 10px; padding: 6px 10px; border: 1px solid rgba(241,223,174,.55); border-radius: 16px; background: linear-gradient(180deg, rgba(47,107,85,.65), rgba(30,74,58,.75)); }
.sub span { font-weight: 700; font-size: 14.5px; letter-spacing: .05em; } .sub small { font-size: 11px; opacity: .8; }
.t-best { margin: 12px 0 0; font-size: 13px; color: var(--goldL); min-height: 1em; }
.t-note { margin: 8px 0 0; font-size: 11px; color: rgba(247,240,225,.65); }
@media (max-height: 760px) { .t-art { height: min(calc(100vw * 1.12), 34svh); } .t-lead { font-size: 13px; line-height: 1.65; } .t-how { margin: 10px auto 12px; font-size: 12px; } .t-how li { padding: 5px 10px; } .t-h { font-size: clamp(30px, 10vw, 46px); } }
@media (max-height: 620px) { .t-art { height: min(calc(100vw * 1.12), 26svh); } .t-eyebrow, .t-lead br { display: none; } .t-how { display: none; } }
/* タイトル絵：雪の幕が晴れ、街が下から立ち上がり、そりが飛んでくる */
.title-art .t-sled { animation: tsled 2.6s var(--ease) .6s both, tfloat 4s ease-in-out 3.2s infinite alternate; } @keyframes tsled { from { transform: translate(-380px, 90px) scale(.55); opacity: 0; } } @keyframes tfloat { to { transform: translate(0, -8px); } }
.title-art .th { animation: rise 1s var(--pop) both; } .title-art .th:nth-child(1) { animation-delay: .5s; } @keyframes rise { from { transform: translateY(70px); opacity: 0; } }
.title-art .t-gifts { animation: rise .9s var(--pop) 1.6s both; } .title-art .t-bell { animation: bellin .9s var(--pop) 1.9s both; } @keyframes bellin { from { transform: translate(30px, 450px) scale(.6); } }
.title-art .t-snow { animation: tsnow 7s linear infinite; } @keyframes tsnow { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
.title-art .star { animation: twinkle 3s ease-in-out infinite alternate; } @keyframes twinkle { to { opacity: .25; } }
.title-art .legs-f { animation: gallop .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top; } .title-art .legs-b { animation: gallop .5s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: top; }
@keyframes gallop { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.flakes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.flakes i { position: absolute; top: -10%; width: 8px; height: 8px; background: radial-gradient(circle, #fff 0 35%, transparent 40%), linear-gradient(0deg, transparent 45%, rgba(255,255,255,.9) 45% 55%, transparent 55%), linear-gradient(90deg, transparent 45%, rgba(255,255,255,.9) 45% 55%, transparent 55%); animation: fall linear infinite; opacity: .85; }
@keyframes fall { to { transform: translateY(120vh) rotate(260deg); } }

/* ================= 配達中 ================= */
#s-play.is-active { display: flex; flex-direction: column; padding-bottom: 10px; }
.hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.h-time { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; line-height: 1; }
.ring { position: absolute; inset: 0; width: 70px; height: 70px; transform: rotate(-90deg); }
.ring-bg { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.14); stroke-width: 3.5; } .ring-fg { fill: none; stroke: var(--goldL); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke .3s; }
.h-cap { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 9.5px; letter-spacing: .04em; white-space: nowrap; color: var(--goldL); opacity: .9; } .h-time b { position: relative; font-family: var(--serif); font-size: 27px; font-variant-numeric: tabular-nums; margin: 2px 0 0; } .h-unit { position: relative; font-size: 9px; }
body.late .ring-fg { stroke: #f0a35e; } body.final .ring-fg { stroke: var(--redL); } body.final .h-time b { color: #ffb48a; animation: beat 1s ease-in-out infinite; } @keyframes beat { 15% { transform: scale(1.18); } 30% { transform: scale(1); } }
.h-time.cost::after { content: attr(data-cost); position: absolute; right: -6px; top: -4px; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; animation: costUp 1s ease forwards; } @keyframes costUp { to { transform: translateY(-14px); opacity: 0; } }
.h-mid p { margin: 0; } .h-score b { font-family: var(--serif); font-size: 26px; font-variant-numeric: tabular-nums; } .h-score small { font-size: 12px; margin-left: 2px; } .h-sub { font-size: 12px; opacity: .85; }
.h-score.pop b { display: inline-block; animation: cpop .5s var(--pop); } @keyframes cpop { 40% { transform: scale(1.25); color: var(--goldL); } }
.h-trust { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 16px; border: 1px solid rgba(241,223,174,.4); background: rgba(126,24,32,.25); }
.ht-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, var(--ivory2)); box-shadow: 0 0 0 1.5px var(--gold); } .ht-face svg { width: 120%; height: 120%; margin: -4% 0 0 -10%; display: block; }
.ht-t { display: flex; flex-direction: column; gap: 3px; } .ht-t small { font-size: 9.5px; letter-spacing: .04em; opacity: .85; white-space: nowrap; }
.bar { display: block; width: 64px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .bar i { display: block; height: 100%; width: 50%; border-radius: 3px; background: var(--foil); transition: width .6s var(--ease); }
.h-trust.up { animation: hop .6s var(--pop); box-shadow: 0 0 20px rgba(241,223,174,.5); } .h-trust.down { animation: oops .45s ease; } @keyframes hop { 40% { transform: translateY(-4px) scale(1.04); } }
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.meters li { display: flex; flex-direction: column; gap: 2px; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(241,223,174,.16); font-size: 10.5px; letter-spacing: .06em; }
.meters .bar { width: 100%; } .meters li:nth-child(2) .bar i { background: linear-gradient(90deg, #c96a6a, #f2b5a8); } .meters li:nth-child(3) .bar i { background: linear-gradient(90deg, #2f6b55, #8fd0ad); }
.meters li.up { animation: hop .5s var(--pop); } .meters li.down { animation: oops .45s ease; }
/* 街並みの帯：対応するたびに窓が灯る */
.strip { position: relative; height: 46px; margin: 8px -14px 0; overflow: hidden; border-block: 1px solid rgba(241,223,174,.2); }
@media (min-width: 509px) { .strip { margin-inline: 0; border: 1px solid rgba(241,223,174,.25); border-radius: 14px; } }
.strip svg { display: block; width: 100%; height: 100%; }
.strip .win { fill: #22313b; transition: fill .6s; } .strip .lit .win { fill: #ffd88a; } .strip .glow { opacity: 0; transition: opacity .8s; } .strip .lit .glow { opacity: 1; }
.strip .house .arrow { display: none; } .strip .star { animation: twinkle 3s ease-in-out infinite alternate; }
.strip .sled-fly { animation: fly 9s linear infinite; } @keyframes fly { from { transform: translate(-280px, 10px); } 50% { transform: translate(60px, -6px); } to { transform: translate(420px, 4px); } }
.strip .legs-f { animation: gallop .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top; } .strip .legs-b { animation: gallop .5s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: top; }
.strip .dawn { transition: opacity 1s; }
body.late .strip .sled-fly { animation-duration: 5.5s; }
/* トラブルのカード */
.case { position: relative; margin-top: 10px; padding: 12px 12px 12px; border-radius: 20px; color: var(--ink); background: linear-gradient(180deg, var(--paper), var(--ivory) 65%, var(--ivory2));
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(247,240,225,.08), 0 0 0 5px rgba(217,184,120,.45), 0 16px 32px -14px rgba(0,0,0,.75); }
.case::before { content: ''; position: absolute; inset: 5px; border-radius: 16px; border: 1px solid rgba(168,132,63,.35); pointer-events: none; }
.case.in { animation: cardIn .45s var(--pop); } @keyframes cardIn { from { transform: translateY(18px) scale(.96); opacity: 0; } }
.case.alarm { animation: cardIn .45s var(--pop), alarm 1.2s ease .2s 1; } @keyframes alarm { 0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px rgba(217,184,120,.45), 0 16px 32px -14px rgba(0,0,0,.75); } 30% { box-shadow: 0 0 0 2px var(--red), 0 0 0 8px rgba(208,80,90,.35), 0 0 40px rgba(208,80,90,.5); } }
.c-head { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; align-items: center; }
.c-alert { grid-row: 1 / span 2; width: 40px; height: 40px; } .c-alert svg { width: 40px; height: 40px; display: block; }
.case.in .c-alert .pf-bell { animation: ring 1s ease 2; transform-origin: 20px 6px; } @keyframes ring { 10%, 50% { transform: rotate(16deg); } 30%, 70% { transform: rotate(-14deg); } 85% { transform: rotate(0); } }
.c-kind { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; } .c-kind span { padding: 1px 9px; border-radius: 999px; background: linear-gradient(180deg, var(--red), var(--red2)); color: #fff; font-weight: 800; letter-spacing: .06em; } .c-kind b { color: var(--muted); font-weight: 700; }
.c-title { margin: 2px 0 0; font-family: var(--serif); font-weight: 800; font-size: clamp(17px, 5vw, 20px); line-height: 1.35; color: var(--green2); outline: none; }
.c-scene { position: relative; margin-top: 8px; border-radius: 14px; overflow: hidden; aspect-ratio: 360 / 200; max-height: 22svh; width: 100%; box-shadow: 0 0 0 1.5px var(--gold2), 0 6px 14px -6px rgba(0,0,0,.5); background: var(--navy); }
.c-scene svg { display: block; width: 100%; height: 100%; }
.c-scene.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,242,200,.75), transparent 70%); animation: flash .7s ease forwards; } @keyframes flash { to { opacity: 0; } }
.c-who { position: relative; display: flex; align-items: center; gap: 8px; margin: -26px 0 0 8px; }
.cw-face { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, var(--ivory2)); box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0,0,0,.3); }
.cw-face svg { width: 118%; height: 118%; margin: -3% 0 0 -9%; display: block; }
.cw-t { display: flex; flex-direction: column; margin-top: 30px; line-height: 1.3; } .cw-t b { font-size: 14px; color: var(--green2); } .cw-t small { font-size: 11px; color: var(--muted); }
.c-tx { margin: 6px 0 0; font-size: clamp(14.5px, 4.1vw, 16px); font-weight: 600; line-height: 1.7; }
.c-hint { margin: 8px 0 0; padding: 7px 10px 7px 34px; border-radius: 10px; position: relative; background: rgba(217,184,120,.18); border: 1px dashed var(--gold2); font-size: 12.5px; font-weight: 700; color: var(--gold3); }
.c-hint::before { content: '★'; position: absolute; left: 11px; top: 6px; color: var(--red); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .checks:empty { display: none; }
.ck { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 4px 14px 4px 8px; border-radius: 14px; border: 1.5px solid var(--green); background: #fff; color: var(--green2); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--green2); transition: transform .1s; }
.ck svg { width: 26px; height: 26px; display: block; } .ck small { font-size: 11px; color: var(--red); font-weight: 800; } .ck kbd { font: 600 10px var(--sans); color: var(--muted); }
.ck:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--green2); }
.ck:disabled { opacity: .55; box-shadow: none; cursor: default; } .ck.done small { color: var(--green); }
@media (hover: none) { .ck kbd, .ch kbd { display: none; } }
.clues { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .clues:empty { display: none; }
.clue { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 6px 12px 12px 12px; background: #fffef8; border: 1px solid rgba(168,132,63,.55); box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); font-size: 13.5px; font-weight: 700; line-height: 1.55; animation: clueIn .5s var(--pop); }
.clue svg { flex: none; width: 22px; height: 22px; margin-top: 1px; } .clue::before { content: ''; position: absolute; left: -1px; top: -1px; width: 22px; height: 6px; background: var(--red); border-radius: 6px 0 0 0; opacity: .8; }
@keyframes clueIn { from { transform: translateY(-6px) rotate(-1.5deg); opacity: 0; } }
/* 対応のボタン */
.choices { display: grid; gap: 10px; margin-top: 12px; }
.ch { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 14px 10px 10px; border: 0; border-radius: 16px; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, var(--ivory) 70%, var(--ivory2)); box-shadow: 0 0 0 1.5px var(--green), 0 5px 0 var(--green2), 0 12px 20px -10px rgba(0,0,0,.6); transition: transform .1s, box-shadow .1s; }
.ch b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, var(--greenL), var(--green2)); color: var(--goldL); font-family: var(--serif); font-size: 16px; box-shadow: 0 0 0 1.5px var(--gold); }
.ch span { font-weight: 800; font-size: clamp(14px, 4vw, 15.5px); line-height: 1.5; } .ch kbd { position: absolute; right: 8px; bottom: 4px; font: 600 9.5px var(--sans); color: var(--muted); }
.ch:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 1.5px var(--green), 0 1px 0 var(--green2); }
@media (hover: hover) { .ch:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--gold), 0 5px 0 var(--gold2), 0 12px 24px -10px rgba(217,184,120,.6); } }
.choices.in .ch { animation: chIn .4s var(--pop) both; } .choices.in .ch:nth-child(2) { animation-delay: .06s; } .choices.in .ch:nth-child(3) { animation-delay: .12s; } @keyframes chIn { from { transform: translateY(12px); opacity: 0; } }
/* 判定のあと */
.fb { margin-top: 12px; }
.fb-card { position: relative; padding: 14px 14px 14px; border-radius: 20px; color: var(--ink); text-align: left; background: linear-gradient(180deg, var(--paper), var(--ivory)); box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 5px rgba(217,184,120,.25), 0 18px 34px -14px rgba(0,0,0,.8); animation: fbIn .5s var(--pop); }
@keyframes fbIn { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.fb.g-poor .fb-card { background: linear-gradient(180deg, #fdf3ef, #f6e6df); }
.fb-grade { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 14px 4px 6px; border-radius: 999px; font-family: var(--serif); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: .06em; }
.fb-grade i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 15px; }
.g-best .fb-grade { background: linear-gradient(180deg, #c9a25a, var(--gold3)); box-shadow: 0 0 18px rgba(241,223,174,.7); } .g-best .fb-grade i { background: var(--goldL); color: var(--gold3); }
.g-ok .fb-grade { background: linear-gradient(180deg, var(--greenL), var(--green2)); } .g-ok .fb-grade i { background: var(--ivory); color: var(--green); }
.g-poor .fb-grade { background: linear-gradient(180deg, #b9555c, #8a2f37); } .g-poor .fb-grade i { background: var(--ivory); color: var(--red); }
.fb-who { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.fb-face { width: 92px; height: 92px; } .fb-face svg { width: 100%; height: 100%; display: block; }
.g-best .fb-face { animation: hop .6s var(--pop) .1s; } .g-poor .fb-face { animation: jolt .55s var(--pop) .1s; } @keyframes jolt { 20% { transform: translateY(-8px) rotate(-6deg) scale(1.08); } 45% { transform: rotate(5deg); } }
.fb-line { position: relative; margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.06); font-weight: 800; font-size: 14.5px; line-height: 1.55; color: var(--green2); }
.fb-line::before { content: ''; position: absolute; left: -8px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: #fff; }
.fb-line:empty { display: none; } .g-poor .fb-line { color: var(--red2); }
.fb-res { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--gold); font-size: 14px; font-weight: 600; line-height: 1.65; }
.fb-fx { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.fb-fx li { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(30,74,58,.1); color: var(--green2); animation: chipIn .4s var(--pop) both; }
.fb-fx li.neg { background: rgba(163,32,44,.1); color: var(--red2); } .fb-fx li.pts { background: var(--foil); color: var(--gold3); } .fb-fx li.bonus { background: var(--green); color: var(--goldL); }
.fb-fx li:nth-child(2) { animation-delay: .05s; } .fb-fx li:nth-child(3) { animation-delay: .1s; } .fb-fx li:nth-child(4) { animation-delay: .15s; } .fb-fx li:nth-child(5) { animation-delay: .2s; } .fb-fx li:nth-child(6) { animation-delay: .25s; }
@keyframes chipIn { from { transform: scale(.6); opacity: 0; } }
.fb-santa { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(163,32,44,.08); }
.fs-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--gold); } .fs-face svg { width: 120%; height: 120%; margin: -4% 0 0 -10%; display: block; }
.fb-santa p { margin: 0; font-size: 13px; font-weight: 700; color: var(--red2); }
.fb-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--navy2); color: var(--goldL); font-size: 12.5px; font-weight: 700; }
.quit { align-self: center; margin-top: 12px; min-height: 40px; padding: 0 16px; border: 0; background: none; font-size: 12px; color: rgba(247,240,225,.7); text-decoration: underline; text-underline-offset: 3px; }
/* 金色の光・バナー */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.burst i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle, #fff6d8, var(--gold) 60%, transparent 70%); animation: spark .9s cubic-bezier(.2, .7, .3, 1) forwards; }
.burst i.st { border-radius: 0; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); width: 14px; height: 14px; margin: -7px; background: var(--goldL); }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(180deg); opacity: 0; } }
.banner { position: fixed; left: 50%; top: 40%; z-index: 35; margin: 0; padding: 10px 24px; border-radius: 999px; background: var(--foil); color: var(--red2); font-family: var(--serif); font-weight: 800; font-size: clamp(18px, 5.4vw, 24px); letter-spacing: .06em; white-space: nowrap; box-shadow: 0 0 0 2px var(--red2), 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.banner.show { animation: banner 1.8s var(--pop) forwards; } @keyframes banner { 0% { transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
body.late #s-play::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; box-shadow: inset 0 0 60px rgba(208,80,90,.25); animation: urgent 1.6s ease-in-out infinite alternate; } @keyframes urgent { to { box-shadow: inset 0 0 90px rgba(208,80,90,.4); } }
/* 場面イラストの動き */
.pf-snow circle { animation: pfall 5s linear infinite; } .pf-snow.heavy circle { animation-name: pfallH; } @keyframes pfall { from { transform: translateY(-30px); } to { transform: translateY(210px); } } @keyframes pfallH { from { transform: translate(30px, -40px); } to { transform: translate(-40px, 210px); } }
.pf-star { animation: twinkle 3s ease-in-out infinite alternate; }
.pf-glow { animation: glowp 2.4s ease-in-out infinite alternate; } @keyframes glowp { to { opacity: .55; } }
.pf-q { animation: qbob 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes qbob { 50% { transform: translateY(-4px) scale(1.06); } }
.pf-gone rect { animation: dash 1.5s linear infinite; } @keyframes dash { to { stroke-dashoffset: -18; } }
.pf-dash { animation: dash 1.2s linear infinite; }
.pf-ping { animation: ping 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes ping { to { transform: scale(3); opacity: 0; } }
.pf-pin { animation: pinb 1.6s ease-in-out infinite; } @keyframes pinb { 50% { transform: translateY(-4px); } }
.pf-runner { animation: run 2.4s ease-in infinite; } @keyframes run { from { transform: translateX(-20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(80px); opacity: 0; } }
.pf-flap { animation: flap .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left center; } @keyframes flap { to { transform: rotate(-12deg); } }
.pf-drip path { animation: drip 1.2s ease-in infinite; } .pf-drip path:nth-child(2) { animation-delay: .4s; } .pf-drip path:nth-child(3) { animation-delay: .8s; } @keyframes drip { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
.pf-rain path { animation: rain .8s linear infinite; } @keyframes rain { from { transform: translate(6px, -20px); } to { transform: translate(-6px, 30px); } }
.pf-spark, .pf-ouch { animation: blink 1s ease-in-out infinite; } @keyframes blink { 50% { opacity: .2; } }
.pf-ring { animation: ringp .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes ringp { 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(0); } }
.pf-waves { animation: blink .9s ease-in-out infinite; }
.pf-bubble { animation: bub .5s var(--pop) .3s both; } @keyframes bub { from { transform: scale(.6); opacity: 0; } }
.pf-lock { animation: lockj 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center top; } @keyframes lockj { 8% { transform: rotate(-8deg); } 16% { transform: rotate(6deg); } 24% { transform: rotate(0); } }
.pf-call { animation: blink 1.2s ease-in-out infinite; }
.pf-wind path { stroke-dasharray: 40 20; animation: dash 1s linear infinite; } .pf-hat { animation: hatf 3s ease-in-out infinite; } @keyframes hatf { 50% { transform: translate(296px, 30px) rotate(10deg); } }
.pf-deer .legs-f, .pf-deer .legs-b { animation: none; } .pf-beam { animation: glowp 2s ease-in-out infinite alternate; }
.pf-bag.hl, .pf-name.a, .pf-hl { animation: hl 1.2s ease-in-out infinite alternate; } @keyframes hl { to { opacity: .7; } }
.pf-neq { animation: qbob 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.revealed .pf-q { display: none; }
@media (max-height: 700px) { .c-scene { max-height: 20svh; } .h-time, .ring { width: 60px; height: 60px; } .h-time b { font-size: 22px; } .strip { height: 36px; } .meters { margin-top: 14px; } .case { padding: 10px; } .ch { min-height: 54px; } }

/* ================= 結果（クリスマスカード） ================= */
#s-result.is-active { padding-bottom: 18px; }
.rc { --tc: var(--gold); position: relative; margin-top: 6px; padding: 26px 20px 20px; border-radius: 10px; text-align: center; color: var(--ink); overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #fffdf6 0%, var(--paper) 40%, var(--ivory) 100%);
  box-shadow: 0 0 0 1px var(--gold2), 0 0 0 6px var(--paper), 0 0 0 7.5px var(--gold), 0 24px 48px -16px rgba(0,0,0,.85); }
.rc::before { content: ''; position: absolute; inset: 10px; border: 1.5px solid var(--gold); border-radius: 4px; pointer-events: none; }
.rc::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(168,132,63,.4); border-radius: 2px; pointer-events: none; }
.rc-corner { position: absolute; width: 34px; height: 34px; pointer-events: none; background: radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 3.5px), conic-gradient(from 45deg, transparent 0 20deg, rgba(168,132,63,.7) 20deg 25deg, transparent 25deg 65deg, rgba(168,132,63,.7) 65deg 70deg, transparent 70deg); border-radius: 50%; }
.c1 { left: 4px; top: 4px; } .c2 { right: 4px; top: 4px; } .c3 { left: 4px; bottom: 4px; } .c4 { right: 4px; bottom: 4px; }
.rc-ribbon { position: absolute; right: -46px; top: 22px; width: 170px; height: 26px; transform: rotate(45deg); background: linear-gradient(180deg, #c33440, var(--red2)); box-shadow: 0 0 0 1.5px var(--gold), 0 4px 8px rgba(0,0,0,.25); }
.rc-seal { position: absolute; left: 22px; top: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 47% 53% 50% 48%; background: radial-gradient(circle at 40% 35%, #c9434d, var(--red2) 70%); box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 4px rgba(0,0,0,.12); }
.rc-seal b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,220,200,.45); font-family: var(--serif); font-size: 16px; color: rgba(255,230,210,.85); }
.rc.in { animation: rcIn .9s var(--pop) both; } @keyframes rcIn { from { transform: translateY(40px) rotateX(18deg) scale(.9); opacity: 0; } }
.rc-game { position: relative; margin: 0; font-family: var(--serif); font-size: 15px; letter-spacing: .1em; color: var(--red2); } .rc-game small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.rc-art { position: relative; } .rc-art svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 2px auto 0; }
.rc.in .rc-art { animation: artIn .9s var(--pop) .2s both; } @keyframes artIn { from { transform: scale(.6) translateY(20px); opacity: 0; } }
.rc-k { position: relative; margin: 0; font-size: 11.5px; letter-spacing: .2em; color: var(--muted); }
.rc-title { position: relative; margin: 2px 0 0; font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 7.4vw, 34px); line-height: 1.3; outline: none; background: linear-gradient(115deg, #7d5f27 0%, #b8904a 30%, #8a6a2c 50%, #c9a25a 70%, #7d5f27 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc.in .rc-title { animation: tIn .7s var(--pop) .45s both; } @keyframes tIn { from { transform: scale(1.4); opacity: 0; letter-spacing: .3em; } }
.rc-line { position: relative; margin: 8px 6px 0; font-size: 13.5px; line-height: 1.75; color: #4a403a; }
.rc-score { position: relative; margin: 10px 0 0; color: var(--red2); } .rc-score b { font-family: var(--serif); font-size: 52px; line-height: 1; } .rc-score small { font-size: 16px; margin-left: 2px; }
.rc-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.rc-stats li { padding: 7px 2px; border-radius: 10px; background: rgba(30,74,58,.07); border: 1px solid rgba(168,132,63,.35); font-size: 10.5px; color: var(--muted); } .rc-stats b { display: block; font-size: 16px; color: var(--green2); }
.rc-meters { position: relative; display: grid; gap: 6px; margin: 12px 4px 0; padding: 0; list-style: none; text-align: left; font-size: 12px; font-weight: 700; color: var(--green2); }
.rc-meters li { display: grid; grid-template-columns: 4.2em 1fr 2.4em; align-items: center; gap: 8px; } .rc-meters .bar { width: 100%; height: 8px; background: rgba(30,74,58,.12); } .rc-meters em { font-style: normal; text-align: right; color: var(--ink); }
.rc-meters li:nth-child(2) .bar i { background: linear-gradient(90deg, #c96a6a, #e89a8e); } .rc-meters li:nth-child(3) .bar i { background: linear-gradient(90deg, #2f6b55, #6fb08f); }
.rc-best { position: relative; margin: 10px 0 0; font-size: 12.5px; font-weight: 800; color: var(--red); min-height: 1em; }
.rc-url { position: relative; display: inline-block; margin: 8px 0 0; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--gold2); font-size: 12px; letter-spacing: .08em; color: var(--gold3); }
.moments { margin-top: 18px; } .moments h3, .share h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 16px; letter-spacing: .08em; color: var(--goldL); }
.moments ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: linear-gradient(180deg, var(--paper), var(--ivory)); color: var(--ink); box-shadow: 0 0 0 1px rgba(217,184,120,.7); animation: moIn .5s var(--pop) both; animation-delay: var(--d); }
@keyframes moIn { from { opacity: 0; transform: translateX(-16px); } }
.mo-face { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--gold); } .mo-face svg { width: 120%; height: 120%; margin: -4% 0 0 -10%; }
.mo-t { display: flex; flex-direction: column; min-width: 0; } .mo-t b { font-size: 14px; color: var(--green2); } .mo-t small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.mo.k-oops { background: linear-gradient(180deg, #fdf3ef, #f6e6df); } .mo.k-oops b { color: var(--red2); } .mo.empty { justify-content: center; font-size: 13px; }
.again, .share { margin-top: 16px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .row2 .sub { margin-top: 8px; }
@media (max-width: 360px) { .row2 .sub span { font-size: 12.5px; letter-spacing: 0; } }
.share { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(241,223,174,.22); }
.btn-x { width: 100%; min-height: 54px; border: 0; border-radius: 16px; background: #000; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.help { margin: 8px 0 0; font-size: 11.5px; color: rgba(247,240,225,.72); }
.ig-wrap { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: rgba(0,0,0,.2); overflow: hidden; } .ig-wrap img { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.5); margin: 10px 0; }
.ig-wait { margin: 0; padding: 20px; font-size: 13px; color: rgba(247,240,225,.8); text-align: center; }
.sub.wide { width: 100%; }
#b-ig-share[hidden] + #b-ig-save { grid-column: 1 / -1; }
.ft { margin: 28px 0 0; padding: 14px 0 24px; border-top: 1px solid rgba(241,223,174,.2); font-size: 11px; color: rgba(247,240,225,.6); } .ft p { margin: 0 0 6px; }
.link { border: 0; background: none; padding: 0; color: var(--goldL); text-decoration: underline; text-underline-offset: 3px; font-size: 11px; min-height: 32px; }
body[data-screen="s-play"] .ft { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40; max-width: calc(100% - 32px); margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--ivory); color: var(--ink); font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.toast.show { animation: toast 2.6s var(--pop) both; } @keyframes toast { 10%, 85% { transform: translate(-50%, 0); opacity: 1; } }
.nojs { padding: 20px; text-align: center; }
@keyframes oops { 25% { transform: translateX(-6px) rotate(-.8deg); } 60% { transform: translateX(5px) rotate(.6deg); } }

/* ================= 動きを控えめに：飛ぶ・揺れる・回る・降るを止め、色と文字の変化で伝える ================= */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.rm .flakes, html.rm .burst, html.rm .pf-snow, html.rm .pf-rain, html.rm .t-veil { display: none; }
html.rm .banner.show { animation: none !important; opacity: 1; transform: translate(-50%, -50%); }
html.rm .pf-runner { opacity: 1; transform: translateX(20px); }
/* PC・横向きタブレットで画面の高さが低いとき：開始ボタンを最初の画面に収める */
@media (min-width: 760px) and (max-height: 900px) { .app { margin-top: 12px; } .t-art { height: 30svh; } .t-how { margin: 10px auto 12px; } .t-how li { padding: 4px 10px; } .t-lead { margin-top: 6px; } }