/* BLOB interface: shared tokens, restrained materials, and a scene-first HUD. */
:root {
  color-scheme: dark;
  --bg: #0b1118;
  --surface: #17212c;
  --surface-raised: #202e3b;
  --surface-tonal: #293e43;
  --material: rgba(16, 24, 33, .88);
  --scrim: rgba(3, 9, 16, .64);
  --text: #f3f7fb;
  --text-secondary: #bfccd8;
  --accent: #a2efce;
  --on-accent: #0b2920;
  --gold: #ffe099;
  --violet: #d7b9ff;
  --blue: #a4d2ff;
  --danger: #ffb4b4;
  --line: rgba(214, 232, 248, .18);
  --line-strong: #768b9d;
  --focus: #c0e5ff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-title: clamp(1.75rem, 4vw, 2.25rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --elevation-1: 0 2px 8px #0003, inset 0 1px 0 #ffffff06;
  --elevation-2: 0 16px 48px #0005, inset 0 1px 0 #ffffff0b;
  --motion-fast: 140ms;
  --motion-normal: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 400 var(--text-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }
.hidden { display: none !important; }
button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { min-width: 44px; min-height: 44px; font: inherit; color: inherit; cursor: pointer; }
button, summary, a { -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; opacity: .65; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
button { transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast) var(--ease); }
button:not(:disabled):active { transform: scale(.98); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h2 { font-size: var(--text-title); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 var(--space-4); }
h3 { font-size: var(--text-lg); line-height: 1.35; }
b, strong { font-weight: 650; }
.ui-button, .langbadge, .awaken-controls button, [data-pause-awaken] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--text); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; text-align: center;
}
.ui-button.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 750; box-shadow: var(--elevation-1); }
.text-button, button.langbadge { background: transparent; border-color: transparent; color: var(--text-secondary); }
@media (hover: hover) {
  .ui-button:not(:disabled):hover, .langbadge:hover, .awaken-controls button:not(:disabled):hover, [data-pause-awaken]:hover { background: #344554; border-color: var(--line-strong); }
  .ui-button.primary:not(:disabled):hover { background: #c3f8e2; color: var(--on-accent); border-color: transparent; }
}
/* Materials keep enough dark tint for text contrast even over a white scene. */
.menu-panel, .shop-panel, #build-details, #topright, #build-toggle, .ab, #stomach, #toast:not(:empty) {
  background: var(--material); border: 1px solid var(--line); box-shadow: var(--elevation-1);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
}
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; background: var(--scrim); text-align: center; padding: calc(var(--space-4) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-4) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left)); }
.overlay, #awaken { touch-action: pan-y; overscroll-behavior: contain; scrollbar-color: var(--line-strong) var(--bg); }
.menu-panel { width: min(100%, 640px); flex: none; margin-block: auto; padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--elevation-2); }
.title-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#title h1 { font-size: clamp(4rem, 10vw, 6rem); line-height: 1; font-weight: 850; letter-spacing: -.07em; margin: var(--space-2) 0 0; color: var(--text); }
#title .sub { font-size: var(--text-lg); line-height: 1.4; color: var(--text-secondary); margin: 0; }
.langbadge { align-self: flex-end; padding: 8px 12px; font-size: var(--text-xs); }
.hint, .howto, #t-resume, .blink { font-size: var(--text-sm); line-height: 1.65; color: var(--text-secondary); }
.hint { margin: var(--space-3) 0 0; }
#title .hint, #title .blink { margin: 0; }
.blink { animation: none; margin: var(--space-3) 0 0; }
.title-actions { display: flex; justify-content: center; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
#title-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
#start-run { grid-column: 1 / -1; min-height: 56px; font-size: var(--text-md); }
#claim-daily { grid-column: 1 / -1; }
#prep-toggle { grid-column: 1 / -1; font-size: var(--text-xs); }
#prep-toggle[aria-pressed="true"] { background: #3c3523; color: var(--gold); border-color: var(--gold); }
#rush-badge { display: inline-block; font-size: var(--text-xs); font-weight: 650; color: var(--gold); background: #3c3523; border-radius: var(--radius-pill); border: 1px solid #766749; padding: 4px 12px; margin: 0; }
.wallet { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.wallet small { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-secondary); font-weight: 400; }
.coin-balance { color: var(--gold); }
.emerald-balance { color: var(--accent); }
#title-wallet { width: 100%; padding: var(--space-3); background: #ffffff04; border: 1px solid var(--line); border-radius: var(--radius-md); }
#current-creature { color: var(--accent); }
.howto { width: 100%; text-align: left; border-block: 1px solid var(--line); }
.howto summary { cursor: pointer; min-height: 48px; padding: 12px 8px; color: var(--text); }
.howto p { margin: var(--space-2) var(--space-2) var(--space-3); }
.howto b { color: var(--accent); }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
.legal-links button { background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-xs); padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
.legal-links span { display: none; }
/* HUD: narrow corner instruments leave the centre of the scene unobstructed. */
#hud { position: fixed; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
#topleft { position: absolute; left: calc(16px + var(--safe-left)); top: calc(16px + var(--safe-top)); width: clamp(160px, 27vw, 248px); }
.bar { position: relative; height: 24px; background: #101821ed; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-2); box-shadow: 0 2px 8px #0003; }
.bar.xp { height: 20px; }
.bar.small { height: 8px; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; line-height: 1; font-weight: 650; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.fill { height: 100%; width: 0%; transition: width var(--motion-fast) linear; }
.fill.hp { background: linear-gradient(90deg, #216c57, #2d7e65); }
.fill.xpf { background: linear-gradient(90deg, #674582, #825898); }
#topright { position: absolute; top: calc(16px + var(--safe-top)); right: calc(76px + var(--safe-right)); width: 184px; border-radius: var(--radius-md); padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; text-align: left; }
#tier { font-size: 12px; color: var(--gold); font-weight: 650; align-self: center; }
#timer { text-align: right; font-size: 14px; font-weight: 650; }
#score { grid-column: 1 / -1; font-size: 18px; line-height: 1.2; font-weight: 750; }
#eaten { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); }
#hud-build { position: absolute; top: calc(80px + var(--safe-top)); left: calc(16px + var(--safe-left)); pointer-events: auto; }
#build-toggle { padding: 8px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 650; }
#build-toggle::after { content: '⌄'; margin-left: 8px; color: var(--accent); }
#build-toggle[aria-expanded="true"]::after { content: '⌃'; }
#build-details { position: absolute; top: calc(100% + 8px); left: 0; width: min(360px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); max-height: calc(100dvh - 304px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: var(--space-3); border-radius: var(--radius-md); }
#stats { font-size: 12px; line-height: 1.8; color: var(--text-secondary); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
#owned-panel { display: flex; flex-direction: column; gap: var(--space-3); }
#owned-panel .row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12px; color: var(--text-secondary); }
#owned-panel .row-label { width: 100%; color: var(--text); font-size: 12px; font-weight: 650; }
.ab-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #22313d; color: var(--text); font-size: 12px; }
.ab-chip.stat { border-left-color: var(--blue); }
.ab-chip.skill { border-left-color: var(--violet); }
.stars, .omen-dots { color: var(--gold); letter-spacing: 1px; }
.stars .off, .omen-dots .off { color: #94a1b1; }
.stars .next { color: #fff; }
.ab-chip.hint, .ab-chip.maxed, .ab-chip.sealed { border-color: #c7ab69; }
.ab-chip.maxed::after { content: '最終'; color: var(--gold); font-size: 11px; }
:root[lang="en"] .ab-chip.maxed::after { content: 'MAX'; }
.mut-chip { display: flex; align-items: center; gap: 8px; color: var(--gold); padding: 8px; background: #383024; border: 1px solid #ad945b; border-radius: 8px; font-size: 12px; font-weight: 650; }
.seal-mark { display: inline-grid; place-items: center; min-width: 16px; color: var(--gold); border: 1px solid #ad945b; border-radius: 50%; font-size: 10px; }
.hex { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--gold); color: #30220b; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.hex::before { content: '★'; font-size: 14px; }
.sparkle { display: inline-flex; }
.sparkle i { display: none; }
#owned-panel .fx-flash { animation: abilityFlash .3s ease-out; }
#owned-panel .mutation.fx-flash { animation: mutationFlash .3s ease-out; }
@keyframes abilityFlash { from { box-shadow: 0 0 0 2px var(--accent); background-color: #3c685a; } }
@keyframes mutationFlash { from { box-shadow: 0 0 0 2px var(--gold); background-color: #6b572b; } }
#owned-panel [data-cooldown]:not([data-cooldown=""])::after { content: attr(data-cooldown); color: var(--gold); font-size: 12px; }
#abilities { position: absolute; left: 50%; bottom: calc(16px + var(--safe-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.ab { position: relative; isolation: isolate; width: 96px; min-height: 56px; padding: 8px; border-radius: var(--radius-sm); overflow: hidden; text-align: center; font-size: 12px; }
.ab .key { font-size: 14px; font-weight: 700; display: block; }
.ab .cd { position: absolute; z-index: -1; inset: auto 0 0; background: #111923c9; border-top: 1px solid var(--line); }
.ab.super.ready { border-color: var(--accent); }
#stomach { position: absolute; left: 50%; bottom: calc(80px + var(--safe-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; text-align: center; }
#stomach .slot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--danger); margin: 0 2px; vertical-align: middle; }
#stomach .slot.full { background: var(--danger); }
#toast { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 32px)); text-align: center; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-md); font-weight: 600; opacity: 0; transition: opacity var(--motion-normal); }
.combo { position: absolute; left: 50%; top: calc(24px + var(--safe-top)); transform: translateX(-50%); min-width: 160px; color: var(--gold); font-size: 18px; font-weight: 750; text-align: center; text-shadow: 0 1px 3px #000, 0 0 8px #000; transition: opacity var(--motion-normal); }
.combo.expired, .combo:has(#combo-text:empty) { opacity: 0; }
#combo-fill { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--gold); }
.combo.bump { animation: combo-bump .3s ease-out; }
@keyframes combo-bump { 50% { transform: translateX(-50%) scale(1.08); } }
#frenzy-hud { position: absolute; top: calc(72px + var(--safe-top)); left: 50%; transform: translateX(-50%); max-width: 90%; text-align: center; font-size: 16px; font-weight: 700; color: var(--violet); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
#frenzy-edge { position: fixed; inset: 0; box-shadow: inset 0 0 48px 8px #a63dff; opacity: 0; }
/* Touch targets sit inside safe areas and remain apart from the telemetry. */
#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#btn-dash, #btn-super, #stick-base { display: none; }
body.touch #btn-dash, body.touch #btn-super, body.touch #stick-base:not(.hidden) { display: block; }
body.touch { -webkit-user-select: none; user-select: none; }
#btn-dash, #btn-super, #btn-pause { position: absolute; pointer-events: auto; color: var(--text); background: var(--material); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); box-shadow: var(--elevation-1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#btn-dash { width: 80px; height: 80px; bottom: calc(24px + var(--safe-bottom)); right: calc(16px + var(--safe-right)); font-size: 32px; }
#btn-super { width: 72px; height: 72px; bottom: calc(112px + var(--safe-bottom)); right: calc(24px + var(--safe-right)); font-size: 28px; border: 0; background: radial-gradient(circle, #17212c 62%, transparent 64%), conic-gradient(var(--accent) calc(var(--g, 0) * 360deg), #566776 0); }
#btn-super.ready { box-shadow: 0 0 0 2px var(--accent), 0 4px 24px #a2efce33; }
#btn-pause, body:not(.touch) #btn-pause { width: 44px; height: 44px; top: calc(16px + var(--safe-top)); right: calc(16px + var(--safe-right)); font-size: 16px; font-weight: 700; }
#stick-base { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1px solid #dbeaff88; background: #17212c66; }
#stick-knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border: 1px solid #ffffffaa; border-radius: 50%; background: #dcecff66; }
body.ui-menu #touch-ui, body.ui-menu #hud { visibility: hidden; }
#hud.hidden ~ #touch-ui { display: none; }
body.touch #abilities { left: calc(16px + var(--safe-left)); transform: none; gap: 8px; }
body.touch .ab { width: 88px; }
body.touch #stomach { left: calc(16px + var(--safe-left)); transform: none; text-align: left; max-width: calc(100% - 128px - var(--safe-left) - var(--safe-right)); }
.pop { animation: superPop .3s ease-out; }
@keyframes superPop { 50% { transform: scale(1.08); } }
.shake { animation: superShake .3s linear; }
@keyframes superShake { 25% { translate: -4px; } 75% { translate: 4px; } }
/* Choice screens share card geometry and type with the rest of the app. */
.choice-panel { width: min(100%, 1040px); }
#cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.card { position: relative; overflow: hidden; width: 100%; min-height: 208px; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); text-align: left; }
.card.stat { border-top: 3px solid var(--blue); }
.card.skill { border-top: 3px solid var(--violet); }
.card.heal { border-top: 3px solid var(--accent); }
.card.newskill, .card.rare { border-color: var(--gold); background: #302d28; }
.card .num { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #0e1825; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.card .kind { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding-right: 32px; }
.card h3 { margin: 8px 0 12px; padding-right: 16px; font-size: 20px; letter-spacing: -.02em; }
.card .stars { font-size: 16px; margin: 8px 0; }
.card .next-text { font-size: 15px; line-height: 1.6; }
.card .desc { font-size: var(--text-sm); line-height: 1.6; }
.card .lv, .card .awaken { color: var(--gold); margin-top: 8px; font-size: 12px; }
.card .final-band, .rare-banner { font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 12px; }
.rare-banner { margin: 0 32px 8px 0; }
@media (hover: hover) { .card:hover, .awaken-option:hover { background: #314352; border-color: var(--accent); } }
#lvhint { margin: var(--space-4) 0 var(--space-3); }
#choice-reroll { min-width: 160px; }
.pause-panel { width: min(100%, 920px); }
#pause .langbadge { display: flex; margin: -8px -8px 8px auto; }
#pause .title-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; margin-inline: auto; }
#quit-run[data-confirm] { color: var(--danger); border-color: var(--danger); }
#pausecards { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; text-align: left; }
/* いま持っている能力の一文（2026-11-08）: 名前と★、その下（広い画面では横）に効果 */
.pause-ability { display: grid; grid-template-columns: 22px auto 1fr; column-gap: 8px; align-items: baseline; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; background: var(--surface); font-size: 13px; line-height: 1.5; }
.pause-ability .pa-icon { grid-row: span 2; opacity: .85; }
.pause-ability .pa-star { color: var(--gold); font-size: 12px; justify-self: start; }
.pause-ability .pa-text { grid-column: 2 / 4; color: var(--text-secondary); }
.pause-ability.maxed { border-color: #ad945b; }
.pause-ability.mutation b { color: var(--gold); }
.pause-ability.trait .pa-text { grid-column: 2 / 4; grid-row: 1; color: var(--text); }
.recipe { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; line-height: 1.7; background: var(--surface); }
#recipes { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
#recipes h3, #recipes .omen-note { grid-column: 1 / -1; margin: 0 0 8px; }
#recipes .recipe { min-width: 0; }
.recipe.done, .recipe.discovered { border-color: #ad945b; }
.recipe.done, .omen-note { color: var(--gold); }
.recipe.infeasible { color: var(--text-secondary); }
.recipe-reason { margin-top: 8px; color: var(--text-secondary); }
#recipes .effect, #recipes .tip { margin: 8px 0; }
.result-panel { max-width: 720px; }
#gostats { font-size: var(--text-sm); line-height: 1.8; }
#gostats .go-score { margin: 16px 0 8px; font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.2; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.go-parts { color: var(--text-secondary); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.new-record, .new-discovery { color: var(--gold); font-size: 20px; font-weight: 700; }
.best-score { color: var(--text-secondary); }
.run-reward { color: var(--accent); font-size: var(--text-sm); line-height: 1.7; margin: 16px 0; padding: 16px; border-radius: var(--radius-md); background: #ffffff05; }
.run-reward:empty { display: none; }
.run-reward strong { color: var(--gold); font-size: 24px; }
#result-actions { margin-top: 24px; }
/* Shop and reward sheets. Only the catalogue scrolls under the fixed header. */
.shop-overlay { z-index: 60; background: #030910b8; }
.shop-panel { display: flex; flex-direction: column; width: min(1040px, 100%); max-height: 100%; min-height: 0; margin-block: auto; padding: var(--space-4); border-radius: var(--radius-lg); text-align: left; box-shadow: var(--elevation-2); }
.shop-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.shop-header h2 { flex: 1; margin: 0 auto 0 0; min-width: 160px; font-size: 28px; }
.shop-header button { flex-shrink: 0; padding: 10px 12px; font-size: 12px; }
.shop-panel .wallet { padding: 16px 0; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.shop-status { margin: 12px 0; flex-shrink: 0; color: var(--gold); font-size: 13px; line-height: 1.6; }
.shop-status:empty { margin: 8px 0 0; }
.shop-content { overflow-y: auto; min-height: 0; padding: 8px 4px; scrollbar-color: var(--line-strong) var(--bg); }
.shop-content > p { font-size: 14px; line-height: 1.7; }
.shop-section { font-size: 20px; margin: 16px 0; color: var(--text); }
.skin-grid, .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.skin-card, .product-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: left; }
.skin-card.equipped { border-color: var(--accent); background: #203b35; }
.skin-card h3, .product-card h3 { margin: 12px 0 8px; font-size: 18px; }
.skin-card p { margin: 4px 0; font-size: 13px; line-height: 1.7; }
.skin-card .skin-bonus { color: var(--text-secondary); }
.skin-card .creature-role { color: var(--gold); font-size: 12px; }
.skin-card .species { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
.skin-card .skin-tier { font-size: 12px; font-weight: 650; }
.skin-tier.tier-rare { color: var(--blue); }
.skin-tier.tier-epic { color: var(--violet); }
.skin-tier.tier-legend, .skin-state { color: var(--gold); }
.skin-card button { width: 100%; margin-top: auto; }
.skin-card .skin-state { margin-bottom: 12px; }
.skin-swatch { flex-shrink: 0; margin: 0; width: 64px; height: 48px; border-radius: 48% 52% 38% 40%; border: 1px solid #ffffff45; box-shadow: inset -8px -8px 14px #0007; background: radial-gradient(at 32% 25%, #65746a, #090c0a 65%); }
.product-card h3 { color: var(--accent); }
.purchase-result { color: var(--gold); font-size: 13px; }
.shop-content .mock-note { color: var(--gold); font-weight: 650; }
.exchange-panel { margin-block: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.exchange-panel h3 { margin: 0 0 16px; }
.exchange-panel .title-actions { justify-content: flex-start; }
.revive-panel { width: min(560px, 100%); text-align: center; overflow-y: auto; }
.revive-panel h2 { font-size: 28px; }
.revive-panel p { font-size: 14px; color: var(--text-secondary); }
#revive-countdown { color: var(--gold); font-weight: 650; }
.shop-notice { position: fixed; z-index: 80; left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); width: max-content; max-width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); margin: auto; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); box-shadow: var(--elevation-2); font-size: 14px; text-align: center; pointer-events: none; }
/* Awakening, threat markers and other scene feedback retain their existing hooks. */
#awaken { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow-y: auto; padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left)); background: var(--scrim); }
#awaken:empty { display: none; }
.awaken-modal { width: min(1040px, 100%); max-height: 100%; overflow-y: auto; padding: 32px; border: 1px solid #ad945b; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elevation-2); text-align: center; animation: awakenPop var(--motion-normal) var(--ease); }
.awaken-modal .big { font-size: var(--text-title); font-weight: 750; color: var(--gold); }
.awaken-modal p { font-size: 14px; color: var(--text-secondary); }
.awaken-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.awaken-option { min-width: 0; border: 1px solid #ad945b; border-radius: var(--radius-md); padding: 20px; background: var(--surface-raised); color: var(--text); text-align: left; }
.awaken-option h3 { margin: 0 0 12px; color: var(--gold); }
.awaken-modal .from { font-size: 13px; color: var(--text-secondary); }
.awaken-modal .effect { font-size: 16px; color: var(--text); font-weight: 650; }
.awaken-modal .tip b { color: var(--gold); }
.awaken-controls { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 24px; }
#awaken .box { text-align: center; color: var(--gold); animation: awakenIn 2.6s ease-out forwards; }
#awaken .box .big { font-size: 40px; font-weight: 800; }
@keyframes awakenPop { from { opacity: 0; transform: translateY(8px); } }
@keyframes awakenIn { 0%,100% { opacity: 0; } 15%,80% { opacity: 1; } }
#arrows, #echo, .fx-numbers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.threat { position: absolute; color: #ff6d6d; font-size: 30px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.threat.recharge { color: var(--gold); font-size: 18px; }
.threat.crowd { color: var(--gold); font-size: 23px; }
.threat.crowd::after { white-space: nowrap; }
.echo-arrow { position: absolute; color: var(--blue); font-size: 26px; text-shadow: 0 1px 3px #000; }
.fx-number { position: absolute; font-weight: 700; font-size: 12px; text-shadow: 0 1px 2px #000; transform: translate(-50%,-50%); white-space: nowrap; }
.fx-number.player { font-size: 16px; }
@media (max-width: 600px) {
  .overlay { padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
  .menu-panel { padding: 24px 16px; }
  .title-panel { gap: 12px; }
  #title h1 { font-size: 64px; }
  #title .sub { font-size: 17px; }
  #title-wallet { padding: 12px 8px; }
  #touch-help { font-size: 12px; }
  #topleft { width: calc((100vw - var(--safe-left) - var(--safe-right) - 40px) * .5); left: calc(12px + var(--safe-left)); top: calc(12px + var(--safe-top)); }
  #topright { width: calc((100vw - var(--safe-left) - var(--safe-right) - 40px) * .5); right: calc(12px + var(--safe-right)); top: calc(12px + var(--safe-top)); padding: 8px 10px; gap: 4px; }
  #score { font-size: 16px; }
  #hud-build { left: calc(12px + var(--safe-left)); top: calc(72px + var(--safe-top)); }
  #build-details { width: min(352px, calc(100vw - 80px - var(--safe-left) - var(--safe-right))); }
  #btn-pause, body:not(.touch) #btn-pause { top: calc(120px + var(--safe-top)); right: calc(12px + var(--safe-right)); }
  .combo { top: calc(174px + var(--safe-top)); font-size: 16px; min-width: 140px; }
  #frenzy-hud { top: calc(216px + var(--safe-top)); font-size: 14px; }
  #cards { grid-template-columns: 1fr; gap: 12px; }
  .card { min-height: 144px; padding: 16px; }
  .card h3 { font-size: 18px; margin: 4px 0 8px; }
  .card .stars { margin: 4px 0; }
  .card .next-text { font-size: 14px; }
  #lvhint { margin-top: 16px; font-size: 12px; }
  #pause .title-actions, #recipes { grid-template-columns: 1fr; }
  .shop-panel { padding: 16px 12px; }
  .shop-header { justify-content: flex-end; }
  .shop-header h2 { flex-basis: 100%; font-size: 26px; white-space: normal; }
  .skin-grid, .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .skin-card, .product-card { padding: 16px; }
  .awaken-modal { padding: 24px 16px; }
  .awaken-candidates { grid-template-columns: 1fr; }
  #awaken { padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
}
@media (min-width: 601px) and (max-width: 900px) { .combo { top: calc(136px + var(--safe-top)); } #frenzy-hud { top: calc(180px + var(--safe-top)); } }
@media (max-height: 500px) {
  .overlay { padding-top: calc(8px + var(--safe-top)); padding-bottom: calc(8px + var(--safe-bottom)); }
  .menu-panel { padding: 16px; }
  #cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .card { min-height: 156px; padding: 12px; }
  .card h3 { font-size: 16px; }
  .card .next-text { font-size: 13px; }
  #build-details { max-height: calc(100dvh - 152px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --material: #17212c; --scrim: #0b1118; }
}
@media (forced-colors: active) {
  button, .bar, .card, .menu-panel, .shop-panel { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* Catalogue artwork */
.skin-cloud { background: radial-gradient(at 30% 25%, #fff, #c8d8dc 65%); }
.skin-lava { background: repeating-linear-gradient(35deg, transparent 0 8px, #ff7932 9px 11px, transparent 12px 19px), #6a140f; }
.skin-abyss { background: radial-gradient(at 30% 25%, #509dc2b3, #12406bb3 65%); }
.skin-forest { background: radial-gradient(at 30% 25%, #b2cd58, #265738 65%); }
.skin-gold { background: linear-gradient(125deg, #836114, #ffe69c 35%, #b9871c 60%, #ffde76); }
.skin-nebula { background: radial-gradient(circle at 30% 25%, white 1px, transparent 2px), radial-gradient(circle at 65% 60%, #fff 1px, transparent 2px), radial-gradient(at 40% 30%, #be80ed, #382369 70%); }
.creature-alien { background: radial-gradient(at 32% 25%, #65746a, #090c0a 65%); }
.creature-ghost { border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 36% 40%, #1b2a30 0 7%, transparent 8%), radial-gradient(circle at 64% 40%, #1b2a30 0 7%, transparent 8%), linear-gradient(180deg, #f2fdffee, #a9e6f5aa 70%, #a9e6f522); box-shadow: 0 0 18px #9fe9ff55; }
/* クリーチャーの見本（絵文字＋色）。ゴーストは形を CSS で描く */
.skin-swatch[class*="creature-"]:not(.creature-alien):not(.creature-ghost) { display: grid; place-items: center; font-size: 30px; line-height: 1; }
.creature-spider { background: radial-gradient(#4a3a30, #120c09 70%); } .creature-spider::after { content: "🕷️"; }
.creature-ironMaiden { border-radius: 30% 30% 12% 12%; background: linear-gradient(#6b5a50, #2a2420); } .creature-ironMaiden::after { content: "⛓️"; }
.creature-sandworm { background: radial-gradient(#c9a26a, #6a4a25 70%); } .creature-sandworm::after { content: "🪱"; }
.creature-mimic { border-radius: 10px; background: linear-gradient(#9a6a3a, #4a2c14); } .creature-mimic::after { content: "🧰"; }
.creature-plant { background: radial-gradient(#6fbf4a, #1f4a16 70%); } .creature-plant::after { content: "🪴"; }
.creature-vampireMist { background: radial-gradient(#d23a4a, #3a0610 70%); } .creature-vampireMist::after { content: "🦇"; }
.creature-swarm { background: radial-gradient(#e0a92e, #4a3008 70%); } .creature-swarm::after { content: "🐝"; }
.skin-ice { background: linear-gradient(135deg, #d6ffff99, #74c7e7b3 40%, #def9ffcc 42%, #68b5d699 80%); }
.skin-shadow { background: radial-gradient(at 30% 25%, #66778466, #111a2444 65%); border-color: #8b9eaa88; }
.skin-king { background: repeating-linear-gradient(60deg, transparent 0 15px, #e4be54 16px 18px, transparent 19px 26px), #141a15; }
.skin-cyber { background: linear-gradient(135deg, #0b1f2e, #123a55); box-shadow: inset 0 0 0 2px #35f2ff; } .skin-cyber::after { content: "🥽"; }
.skin-shark { background: radial-gradient(#7d98ad, #2b3d4d 70%); } .skin-shark::after { content: "🦈"; }
.skin-goldDragon { background: radial-gradient(#ffd85c, #b0261b 70%); } .skin-goldDragon::after { content: "🐉"; }

/* キーボードの操作案内はタッチ端末では出さない（スマホでは押せないキーの説明になるため） */
@media (pointer: coarse) {
  #t-resume, #t-start, #t-again, #lvhint { display: none; }
}
@media (pointer: fine) {
  #touch-help { display: none; }
}
/* 使用中はボタンに出るので、カードの状態の文は重ねて出さない */
.skin-card.equipped .skin-state { display: none; }

/* Second pass: vivid rewards, decisive actions, and short non-blocking feedback. */
:root {
  --accent: #a8ff60;
  --on-accent: #132b08;
  --blue: #72d7ff;
  --violet: #d5a1ff;
  --gold: #ffdc78;
  --display: "Arial Black", "SF Pro Display", "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  --spring: cubic-bezier(.2, 1.35, .35, 1);
}
h1, h2, .card-gain, .go-score, .new-record { font-family: var(--display); font-weight: 900; }
button:not(:disabled):active { transform: scale(.96); transition-duration: 120ms; }
.ui-button.primary { background: linear-gradient(135deg, #c6ff87, #a8ff60 60%, #6feea7); box-shadow: 0 3px 0 #4e8737, 0 6px 22px #a8ff601f; }
.ui-button.primary:not(:disabled):hover { background: #c6ff87; }
#start-run, #resume-run, #retry-run { min-height: 60px; font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
#start-run::after, #resume-run::after, #retry-run::after { content: '➜'; margin-left: 12px; }
#pause .title-actions #resume-run, #result-actions #retry-run { grid-column: 1 / -1; width: 100%; }
#result-actions { display: grid; grid-template-columns: 1fr; }
#start-run:not(:disabled) { animation: startPulse 280ms ease-out 1.8s 3; }
@keyframes startPulse { 50% { box-shadow: 0 3px 0 #4e8737, 0 0 0 5px #a8ff6025, 0 0 30px #a8ff6030; } }
#title { background: radial-gradient(ellipse at 25% 15%, #2c47645c, transparent 60%), radial-gradient(ellipse at 85% 80%, #6e236137, transparent 60%), #050b12bb; }
.title-panel { position: relative; border-color: #8da7c83d; gap: 8px; background: linear-gradient(150deg, #1b2a3af5, #101b26f5 55%, #202234f5); }
.title-hero { position: relative; width: 100%; height: 176px; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
#title h1 { position: relative; font-size: 88px; line-height: .95; letter-spacing: -.075em; color: #f6ffea; text-shadow: 0 3px 0 #3d6640, 0 8px 30px #030910; margin: 0; }
.hero-kicker { position: relative; order: 2; margin: 10px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.hero-orbit { position: absolute; z-index: -1; width: 280px; height: 160px; top: -18px; border-radius: 50%; background: repeating-conic-gradient(from 15deg, #a8ff6000 0deg 25deg, #a8ff6012 26deg 29deg, #a8ff6000 30deg 45deg), radial-gradient(ellipse, #9efa6030, #96ff6000 68%); }
.hero-orbit::before { content: ''; position: absolute; inset: 24px 20px; border: 1px solid #a8ff6040; border-radius: 50%; transform: rotate(-18deg); }
.hero-orbit > span { position: absolute; right: 30px; top: 50px; font-size: 32px; color: var(--gold); transform: rotate(12deg); }
.hero-blob { position: absolute; width: 100px; height: 88px; top: 4px; left: 90px; border-radius: 48% 52% 35% 40%; transform: rotate(-10deg); background: radial-gradient(ellipse at 30% 20%, #e6ffbb, #a8ff60 40%, #4ebc6c 78%); box-shadow: inset -8px -6px 12px #1c654e66, 0 0 28px #a8ff6035; }
.hero-blob i { position: absolute; width: 14px; height: 23px; top: 29px; left: 27px; background: #10252c; border-radius: 50%; transform: rotate(-15deg); box-shadow: inset 3px 3px 0 #fff6; }
.hero-blob i + i { left: 58px; transform: rotate(15deg); }
#title .sub { font-size: 17px; }
#title-wallet { padding: 10px; }
#t-start { display: none; }
#title .legal-links { width: 100%; }
#title .legal-links button { padding: 8px 6px; }
#rush-badge { color: #ffdc78; background: #49351e; border-color: #a47b3e; }
#current-creature { color: #c5e8dc; font-size: 12px; }
#title-help { margin-top: 4px; }
/* Each category has its own reward colour; rarity adds gold without losing type. */
.card, .choice-burst { --card-color: #72d7ff; --card-tint: #183948; }
.card.skill, .choice-burst.skill { --card-color: #d5a1ff; --card-tint: #362447; }
.card.newskill, .choice-burst.newskill { --card-color: #d5a1ff; --card-tint: #362447; }
.card.heal, .choice-burst.heal { --card-color: #a8ff60; --card-tint: #243c29; }
.card.mutation, .awaken-option.mutation, .choice-burst.mutation { --card-color: #ffb675; --card-tint: #472e2a; }
#lvtitle { color: #edffcf; font-size: clamp(26px, 4vw, 42px); text-shadow: 0 2px 18px #a8ff6025; margin-bottom: 22px; }
.choice-panel { background: linear-gradient(155deg, #192b3cf5, #121a29f5); }
.card { min-width: 0; min-height: 300px; border: 1px solid var(--card-color); border-top-width: 3px; background: radial-gradient(ellipse at 5% 0, var(--card-tint), transparent 85%), #1a2533; padding: 22px; box-shadow: 0 5px 0 #050b1277, inset 0 1px 0 #ffffff18; animation: cardSpring 220ms var(--spring) backwards; animation-delay: calc(var(--card-order, 0) * 50ms); }
.card.stat, .card.skill, .card.heal, .card.newskill { border-top-color: var(--card-color); }
.card .ability-icon, .awaken-option .ability-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; color: var(--card-color); background: var(--card-tint); border: 1px solid var(--card-color); border-radius: 16px; font: 900 36px/1 var(--font); text-shadow: 0 0 18px #ffffff28; box-shadow: inset 0 1px 0 #ffffff15; }
.card .kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--card-color); font-size: 11px; padding-right: 0; }
.card-state { display: inline-block; border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.card.newskill .card-state { background: var(--card-color); color: #271238; }
.card h3 { font-size: 23px; line-height: 1.15; font-weight: 850; margin: 8px 0; padding: 0; }
.card .card-gain { color: var(--card-color); font-size: 38px; line-height: 1.15; letter-spacing: -.04em; margin: 10px 0; font-variant-numeric: tabular-nums; }
.star-track { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
.star-change { font-size: 15px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.star-change > span { color: var(--text-secondary); padding-inline: 3px; }
.card .stars { font-size: 12px; margin: 0; letter-spacing: 0; }
.card .stars .next { color: #fff7c9; text-shadow: 0 0 8px #ffdf70; }
.card .next-text { font-size: 14px; line-height: 1.5; color: #e1e9f3; }
.card .num { top: 18px; right: 18px; border: 1px solid #8a9aaf; color: #eff5fc; box-shadow: 0 2px 0 #0006; }
.card.rare { border: 2px solid var(--gold); border-top-width: 3px; background: radial-gradient(ellipse at 0 0, var(--card-tint), transparent 80%), #292739; box-shadow: 0 0 0 1px #ffd97722, 0 0 24px #ffd9772b, 0 6px 0 #080d17; }
.card.rare::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 25%, #ffecb333 45%, #fff8 50%, #ffecb333 55%, transparent 75%); transform: translateX(-120%); animation: rareSheen 280ms ease-out 150ms 2; }
.card.rare .rare-banner { color: #ffdc78; font-size: 12px; margin-top: 12px; padding-top: 8px; border-top: 1px solid #ffdc784d; }
@keyframes rareSheen { to { transform: translateX(120%); } }
@keyframes cardSpring { from { opacity: .2; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (hover: hover) { .card:hover { background-color: var(--card-tint); border-color: var(--card-color); box-shadow: 0 0 18px #ffffff12; } .card.rare:hover { border-color: var(--gold); } }
.card:not(:disabled):active { transform: scale(.96); }
#choice-reroll { min-height: 48px; border-color: #8196aa; background: #263747; margin-top: 12px; }
#choice-reroll::before { content: '↻'; font-size: 22px; }
#lvhint { margin: 18px 0 0; }
.choice-burst { position: fixed; z-index: 55; pointer-events: none; display: grid; place-items: center; text-align: center; padding: 16px; border: 2px solid var(--card-color); border-radius: 16px; background: var(--card-tint); color: var(--card-color); font-size: 24px; font-weight: 900; animation: choiceBurst 240ms ease-out forwards; }
.choice-burst.rare { border-color: var(--gold); color: var(--gold); }
@keyframes choiceBurst { 0% { opacity: 1; box-shadow: inset 0 0 80px #fff8, 0 0 0 3px #fff8; } 45% { opacity: .9; box-shadow: inset 0 0 0 #fff0, 0 0 0 10px #fff0; } 100% { opacity: 0; transform: scale(1.05); } }
#choice-feedback { position: fixed; z-index: 56; top: calc(28% + var(--safe-top)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); pointer-events: none; padding: 10px 18px; border-radius: 999px; background: #172d23f5; border: 1px solid #a8ff60; color: #d9ffad; box-shadow: 0 6px 24px #0005; font-weight: 800; text-align: center; }
#choice-feedback:empty { display: none; }
#hp-bar .fill { position: absolute; inset: 0 auto 0 0; }
.fill.hp { background: linear-gradient(90deg, #14755a, #24825e); transition: width 120ms linear; }
.fill.hp-trail { background: #9a4f32; transition: width 240ms ease-out 50ms; }
#hp-bar.healing .hp-trail { transition: none; }
.damage-hit { animation: hpHit 180ms ease-out; }
@keyframes hpHit { from { border-color: #ffb066; box-shadow: 0 0 12px #ff856666; } }
.fill.xpf { background: linear-gradient(90deg, #6540a0, #8b4db4); box-shadow: 2px 0 12px #de9cff99; }
.xp-gain { animation: xpGlow 180ms ease-out; }
.level-flash { animation: levelFlash 260ms ease-out; }
@keyframes xpGlow { from { box-shadow: 0 0 12px #d5a1ff88; border-color: #e3baff; } }
@keyframes levelFlash { 0%, 35% { box-shadow: 0 0 20px #edff9cbb; border-color: #f2ffcf; background: #e6ff9640; } }
#gostats .go-score { font-size: clamp(30px, 5vw, 52px); color: #f2ffde; }
.new-record { font-size: 24px; letter-spacing: -.03em; }
.skin-card.equipped { box-shadow: inset 0 3px 0 var(--accent), 0 0 18px #a8ff6012; }
.skin-card.equipped .ui-button:disabled { opacity: 1; color: var(--accent); background: #183024; border-color: #a8ff6080; }
.skin-card .ui-button { margin-top: 12px; font-weight: 750; }
.skin-card:has(.tier-rare) { border-top: 3px solid var(--blue); }
.skin-card:has(.tier-epic) { border-top: 3px solid var(--violet); }
.skin-card:has(.tier-legend) { border-top: 3px solid var(--gold); }
.awaken-option.mutation { border-color: var(--card-color); background: linear-gradient(145deg, var(--card-tint), #1a2333); }
@media (min-width: 760px) {
  .title-panel { width: min(850px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px 28px; text-align: left; padding: 28px; }
  .title-panel > * { grid-column: 2; }
  .title-panel .title-hero { grid-column: 1; grid-row: 2 / 8; height: 300px; justify-content: center; text-align: center; }
  .title-panel .hero-orbit { top: 8px; transform: scale(1.15); }
  #title h1 { font-size: 100px; margin-top: 52px; }
  .title-panel .langbadge { justify-self: end; }
  .title-panel .hero-kicker { font-size: 10px; }
  .title-panel #title-help, .title-panel .legal-links { grid-column: 1 / -1; }
  #title .sub, #rush-badge { justify-self: start; }
}
@media (max-width: 600px) {
  .title-panel { gap: 6px; padding: 12px 16px; }
  .title-hero { height: 126px; }
  .hero-orbit { top: -16px; height: 136px; transform: scale(.84); }
  #title h1 { font-size: 72px; }
  .hero-kicker { font-size: 10px; margin-top: 6px; }
  #title-wallet { padding: 6px 8px; gap: 2px 10px; }
  #title .sub { font-size: 15px; }
  #current-creature { font-size: 11px; }
  #title .legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  #title .legal-links button { font-size: 10px; line-height: 1.3; }
  #title-actions { gap: 6px; }
  #start-run { min-height: 56px; }
  #claim-daily, #prep-toggle { padding-block: 8px; }
  .choice-panel { padding: 20px 14px; }
  #lvtitle { font-size: 26px; margin-bottom: 16px; }
  #cards { gap: 10px; }
  .card { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; align-content: center; min-height: 160px; padding: 14px; }
  .card .ability-icon { width: 50px; height: 50px; margin: 0; grid-column: 1; grid-row: 1 / 4; font-size: 30px; border-radius: 14px; }
  .card .kind { grid-column: 2; padding-right: 0; font-size: 10px; }
  .card h3 { grid-column: 2; font-size: 19px; margin: 5px 0; }
  .card .card-gain { grid-column: 2; font-size: 29px; margin: 2px 0; }
  .card .star-track, .card .next-text, .card .rare-banner, .card .final-band, .card .awaken { grid-column: 1 / -1; }
  .card .star-track { margin: 6px 0 3px; }
  .card .next-text { font-size: 12px; line-height: 1.45; }
  .card .rare-banner { padding-top: 4px; margin: 6px 0 0; font-size: 11px; }
  .card .num { display: none; }
  #lvhint { font-size: 11px; margin-top: 10px; }
  #choice-reroll { width: 100%; margin-top: 12px; }
}
@media (min-width: 601px) and (max-height: 500px) {
  .card { min-height: 240px; padding: 14px; }
  .card .ability-icon { width: 44px; height: 44px; margin-bottom: 8px; font-size: 28px; }
  .card .card-gain { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; animation-delay: 0s !important; }
  .card { opacity: 1; transform: none; }
  .choice-burst { display: none; }
  button:not(:disabled):active { transform: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .title-panel { gap: 4px; padding-block: 8px; }
  .title-hero { height: 110px; }
  .card { min-height: 148px; padding: 12px; }
  .card .kind { line-height: 1.3; }
  .card h3 { margin-block: 3px; }
  .card .card-gain { line-height: 1.05; }
  .card .star-track { margin: 4px 0; }
  .star-change { font-size: 13px; }
}
.card .card-gain small { display: inline-block; vertical-align: middle; max-width: 110px; margin: 0 0 0 8px; font: 650 12px/1.3 var(--font); letter-spacing: 0; color: #d5e4f2; }
.skin-card:focus-visible { outline-offset: -4px; }
.skin-card.equipped { animation: equipFlash 180ms ease-out; }
@keyframes equipFlash { from { box-shadow: inset 0 0 40px #a8ff6030, 0 0 0 2px #a8ff60; } }

/* シークレットスキン（要件 §22）: 解放前は黒い影、解放後は神＝白金・悪魔＝深紅 */
.skin-tier.tier-secret { color: #e9d7ff; letter-spacing: .12em; }
.skin-card.secret-card { border-top: 3px solid #b48cff; background: linear-gradient(180deg, rgba(120, 80, 200, .16), transparent 60%); }
.secret-swatch { position: relative; overflow: hidden; }
.secret-card.locked .secret-swatch { background: radial-gradient(circle at 50% 60%, #050508 38%, #1b1426 39%, #0a0a10 70%); filter: blur(.4px); }
.secret-card.locked .secret-swatch::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: rgba(233, 215, 255, .55); }
.secret-card.locked h3 { color: #b9a6d6; }
.secret-swatch.secret-god.unlocked { background: radial-gradient(circle at 50% 35%, #fffbe8 0 18%, #f3d27a 19% 24%, transparent 25%), radial-gradient(circle at 50% 70%, #fff7d6, #e7c35a 60%, #8a6a1e); }
.secret-swatch.secret-devil.unlocked { background: radial-gradient(circle at 50% 65%, #ff5a3c 0 8%, transparent 9%), conic-gradient(from 200deg at 35% 30%, transparent 0 40deg, #1a0306 40deg 60deg, transparent 60deg), conic-gradient(from 100deg at 65% 30%, transparent 0 40deg, #1a0306 40deg 60deg, transparent 60deg), radial-gradient(circle at 50% 70%, #5a0b12, #1a0306 65%, #000); }
.secret-unlock { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(180, 140, 255, .28), rgba(255, 215, 120, .12)); animation: secret-in .8s ease-out; }
.secret-unlock b { color: #f4e9ff; }
@keyframes secret-in { from { transform: scale(.9); opacity: 0; filter: brightness(2.5); } to { transform: none; opacity: 1; filter: none; } }
/* キャラごとの得意・苦手なステータス（/debate 20261108-121450-3297） */
.stat-tag { display: inline-block; margin-left: 4px; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.stat-tag.strong { background: #ffd24a; color: #2a1d00; }
.stat-tag.weak { background: #5a6270; color: #e6ebf2; }