html { height: 100%; overflow: hidden; overscroll-behavior: none; }

:root {
  color-scheme: light;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #f7edf1;
  color: #392b34;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100svh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #151827;
}

button { font: inherit; }

.game-shell {
  width: min(100%, 480px);
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.game-shell * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.game-shell img { -webkit-user-drag: none; }
.app-screen { min-height: calc(100svh - max(16px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))); width: 100%; }
.bgm-choice-screen { display: grid; min-height: calc(100svh - max(16px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))); padding: 24px; place-items: center; background: #f5f5f3; color: #303030; text-align: center; }
.bgm-choice-content { display: grid; justify-items: center; gap: 18px; }
.bgm-choice-content p { margin: 0; font-size: .8rem; line-height: 1.5; }
.bgm-choice-actions { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bgm-choice-content .bgm-choice-note { color: #8a8a8a; font-size: .72rem; line-height: 1.65; }
.bgm-choice-actions button { position: relative; display: grid; width: 64px; height: 44px; padding: 0; place-items: center; border: 0; background: transparent; color: inherit; font-size: .76rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bgm-choice-actions button::before { position: absolute; width: 48px; height: 26px; border: 1px solid #8b8b8b; content: ""; }
.bgm-choice-actions button:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
.game-screen { position: relative; display: flex; flex-direction: column; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); min-height: 0; margin: calc(-1 * max(16px, env(safe-area-inset-top))) auto calc(-1 * max(18px, env(safe-area-inset-bottom))); padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); aspect-ratio: 9 / 16; overflow: hidden; background: url("assets/backgrounds/ゲーム背景.png") center / cover no-repeat; }
.is-hidden { display: none !important; }
.title-screen, .clear-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.title-screen { position: relative; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); min-height: 0; margin: calc(-1 * max(16px, env(safe-area-inset-top))) auto calc(-1 * max(18px, env(safe-area-inset-bottom))); padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); aspect-ratio: 9 / 16; overflow: hidden; background: url("assets/misaki-background.png") center / cover no-repeat; }
.title-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(88%, 340px); height: 100%; margin: 0 auto; }
.title-visual { position: relative; flex: 0 0 60%; width: 100%; }
.title-art { position: absolute; top: -15%; left: -11%; width: 122%; height: 122%; object-fit: contain; pointer-events: none; }
.best-record { margin: 2px 0 8px; color: #fff6fb; font-size: .9rem; font-weight: 800; text-shadow: 0 1px 3px #241839; }
.title-screen #title-best { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 280px); margin: -12px 0 5px; padding: 5px 12px 6px; border: 1px solid #8290b7; border-radius: 8px; background: #0b1937d9; box-shadow: 0 2px 5px #06091480; }
.title-screen #title-best .best-label { color: #ffe19a; font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.title-screen #title-best .best-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.title-screen #title-best strong { color: #fff; font-family: Arial, "Hiragino Sans", sans-serif; font-size: 1.42rem; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.title-screen #title-best .best-unit { color: #fff; font-family: Arial, "Hiragino Sans", sans-serif; font-size: .72rem; font-weight: 700; line-height: 1; }
.title-actions { display: grid; width: min(100%, 280px); gap: 8px; }
.title-screen #start-button, .title-screen #collection-button { width: 100%; border: 2px solid #ffffffcc; color: #fff; text-shadow: 0 1px 1px #241839; }
.title-screen #start-button { padding: 14px 20px; background: linear-gradient(#d25b71, #9e3453); font-size: 1.08rem; box-shadow: 0 4px 0 #67223b, 0 5px 9px #21152a66; }
.title-screen #collection-button { background: linear-gradient(#4d8fc3, #2d5f98); box-shadow: 0 3px 0 #20436e, 0 4px 8px #21152a66; }
.title-link { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); min-height: 44px; padding: 9px 12px; border: 0; background: transparent; color: #fff; font-size: .88rem; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-shadow: 0 1px 3px #241839; cursor: pointer; }
.title-footer { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; display: flex; align-items: center; gap: 10px; color: #fff; font-size: .62rem; font-weight: 700; text-shadow: 0 1px 3px #241839; white-space: nowrap; transform: translateX(-50%); }
.title-footer button { padding: 3px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.title-footer #credits-button { touch-action: manipulation; }
.secret-mode-notice { position: absolute; z-index: 5; top: 50%; left: 50%; margin: 0; padding: 7px 12px; border-radius: 999px; background: #0b1937df; color: #ffe19a; font-size: .76rem; font-weight: 900; line-height: 1; opacity: 0; pointer-events: none; text-shadow: 0 1px 2px #060914; transform: translate(-50%, -50%); transition: opacity .16s ease; }
.secret-mode-notice.is-visible { opacity: 1; }
.bgm-toggle { position: absolute; z-index: 12; top: max(9px, calc(env(safe-area-inset-top) + 5px)); left: max(9px, calc(env(safe-area-inset-left) + 5px)); right: auto; bottom: auto; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff0b4; font-size: 1rem; font-weight: 900; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bgm-toggle::before { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border: 1px solid #eac76e; border-radius: 50%; background: #0b173bd9; box-shadow: 0 2px 5px #05091488; content: ""; transform: translate(-50%, -50%); }
.bgm-toggle span { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; place-items: center; }
.bgm-toggle.is-off::after { position: absolute; z-index: 1; top: 50%; left: 50%; width: 20px; height: 1px; border-radius: 999px; background: #fff0b4; content: ""; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 1px #0b173b; }
.bgm-toggle:focus-visible { outline: 3px solid #fff4c8; outline-offset: 2px; }
.bgm-toggle:active { transform: translateY(1px); }
.album-screen { position: relative; display: flex; flex-direction: column; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); min-height: 0; margin: calc(-1 * max(16px, env(safe-area-inset-top))) auto calc(-1 * max(18px, env(safe-area-inset-bottom))); padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); aspect-ratio: 9 / 16; overflow: hidden; background: #e9d5a9; color: #3f241d; }
.album-screen::before { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #8b5c2510 0 1px, transparent 1px 8px), radial-gradient(circle at 10% 92%, #b9834533 0 1px, transparent 1px 9px); content: ""; pointer-events: none; }
.album-header, .album-page, .album-navigation { position: relative; z-index: 1; }
.album-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; color: #fff3d3; }
.album-header button, .album-navigation button { min-height: 40px; padding: 7px 14px; border: 1px solid #dcb864; border-radius: 999px; background: linear-gradient(#71203a, #461124); color: #fff7df; font-size: .78rem; font-weight: 800; box-shadow: 0 2px 0 #2d0915; cursor: pointer; }
.album-header p { min-width: 54px; margin: 0; padding: 5px 8px; border: 1px solid #dcb864; border-radius: 999px; background: #4c1325e8; color: #ffe6a6; font-size: .72rem; font-weight: 800; text-align: center; }
.album-page { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; perspective: 1200px; touch-action: pan-y; }
.album-page > .album-sheet { position: absolute; inset: 8px 0; width: min(100%, 350px); height: auto; min-height: 0; margin: auto; transform-style: preserve-3d; will-change: transform; }
.album-sheet-front, .album-sheet-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.album-sheet-front { transform: rotateY(0); }
.album-sheet-back { display: grid; place-items: center; border: 1px solid #a77b42; border-radius: 4px; background: repeating-linear-gradient(0deg, #93672a0a 0 1px, transparent 1px 7px), radial-gradient(circle at 18% 14%, #d5b36b24 0 2px, transparent 3px 26px), linear-gradient(105deg, #f7e9c5, #efe0b7); box-shadow: inset 0 0 0 5px #fcf3da, inset 0 0 0 6px #b9883e; transform: rotateY(180deg); }
.album-sheet-back::before { position: absolute; inset: 12px; border: 1px solid #ba914d66; content: ""; }
.album-sheet.is-cover-sheet .album-sheet-back { border-color: #e1bc62; background: linear-gradient(90deg, #250511 0, #59152a 8px, #c7953e 9px, #7f501a 11px, #59152a 15px, transparent 25px), repeating-linear-gradient(45deg, #ffffff08 0 2px, transparent 2px 12px), linear-gradient(135deg, #6d1931, #3d0a1b 58%, #67162f); box-shadow: inset 7px 0 9px #1d0611a8, inset -4px -5px 12px #27051366; }
.album-page.is-turning { pointer-events: none; }
.album-sheet.is-turn-incoming { pointer-events: none; }
.album-sheet-front::after { position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #29170500 30%, #4b2b1070 100%); content: ""; opacity: 0; pointer-events: none; }
.album-sheet.is-turn-forward .album-sheet-front::after, .album-sheet.is-cover-opening .album-sheet-front::after { animation: album-page-face-shadow .68s ease-in-out forwards; }
.album-sheet.is-turn-returning .album-sheet-front::after, .album-sheet.is-cover-closing .album-sheet-front::after { animation: album-page-face-shadow-return .68s ease-in-out forwards; }
.album-sheet.is-cover-opening .album-sheet-front::after, .album-sheet.is-cover-closing .album-sheet-front::after { animation-duration: .82s; }
.album-sheet.is-turn-incoming .album-sheet-front::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #3f281212, #3f28124d); content: ""; animation: album-page-cast-shadow .68s ease-out forwards; pointer-events: none; }
.album-sheet.is-cover-sheet.is-turn-incoming .album-sheet-front::before { background: linear-gradient(90deg, #22051122, #22051166); }
.album-sheet.is-turn-forward { transform-origin: left center; animation: album-turn-forward .68s cubic-bezier(.25, .72, .25, 1) forwards; }
.album-sheet.is-turn-returning { transform-origin: left center; animation: album-turn-returning .68s cubic-bezier(.25, .72, .25, 1) forwards; }
.album-sheet.is-cover-opening { transform-origin: left center; animation: album-cover-open .82s cubic-bezier(.18, .7, .2, 1) forwards; }
.album-sheet.is-cover-closing { transform-origin: left center; animation: album-cover-close .82s cubic-bezier(.18, .7, .2, 1) forwards; }
@keyframes album-turn-forward { 0% { transform: rotateY(0); } 45% { transform: rotateY(-58deg); } 100% { transform: rotateY(-180deg); } }
@keyframes album-turn-returning { 0% { transform: rotateY(-180deg); } 55% { transform: rotateY(-58deg); } 100% { transform: rotateY(0); } }
@keyframes album-cover-open { 0% { transform: rotateY(0) translateZ(0); } 42% { transform: rotateY(-52deg) translateZ(4px); } 100% { transform: rotateY(-180deg) translateZ(2px); } }
@keyframes album-cover-close { 0% { transform: rotateY(-180deg) translateZ(2px); } 58% { transform: rotateY(-52deg) translateZ(4px); } 100% { transform: rotateY(0) translateZ(0); } }
@keyframes album-page-face-shadow { 0%, 100% { opacity: .04; } 48% { opacity: .62; } }
@keyframes album-page-face-shadow-return { 0%, 100% { opacity: .04; } 52% { opacity: .62; } }
@keyframes album-page-cast-shadow { 0% { opacity: .38; } 55% { opacity: .18; } 100% { opacity: 0; } }
.album-cover, .album-card-page { width: min(100%, 350px); height: 100%; min-height: 0; overflow: hidden; }
.album-cover { position: relative; display: grid; align-content: center; justify-items: center; padding: 26px 24px 26px 31px; border: 2px solid #e6c46f; outline: 1px solid #8f5d1e; outline-offset: -8px; background: linear-gradient(90deg, #270512 0, #5c152b 8px, #d1a14a 9px, #8f5e1f 11px, #5e162c 15px, transparent 25px), repeating-linear-gradient(45deg, #ffffff09 0 2px, transparent 2px 12px), linear-gradient(135deg, #741c35, #4e0d22 55%, #701c34); color: #ffe9ae; box-shadow: inset 8px 0 10px #1d0611a8, inset -4px -5px 12px #27051366, 0 7px 18px #2a0b1677; text-align: center; }
.album-cover > * { position: relative; z-index: 1; }
.album-cover-kicker { margin: 0 0 8px; color: #f5d685; font-size: .62rem; font-weight: 900; letter-spacing: .22em; }
.album-cover h1 { width: 100%; margin: 0 0 24px; color: #fff0b7; font-family: Georgia, "Hiragino Mincho ProN", serif; font-size: clamp(1.62rem, 7.1vw, 2.2rem); line-height: .98; letter-spacing: .06em; text-shadow: 0 2px 0 #7d431b, 0 4px 10px #17040ccc; }
.album-complete-badge { position: absolute !important; z-index: 2 !important; top: 20%; left: 50%; display: block; width: min(76%, 270px); height: auto; max-height: 34%; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%); }
.album-summary { display: grid; width: min(100%, 250px); margin: 0; border-top: 1px solid #e8c66c88; border-bottom: 1px solid #e8c66c88; }
.album-summary div { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid #e8c66c55; }
.album-summary div:last-child { border-bottom: 0; }
.album-summary dt { color: #f8dda0; font-size: .78rem; font-weight: 800; }
.album-summary dd { margin: 0; color: #fff6d5; font-family: Arial, sans-serif; font-size: 1.2rem; font-weight: 900; }
.album-summary dd span { margin-left: 2px; font-size: .72em; }
.album-card-page { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; padding: 14px 16px 16px; border: 1px solid #9e7137; border-radius: 4px; background: repeating-linear-gradient(0deg, #93672a0a 0 1px, transparent 1px 7px), linear-gradient(105deg, #f7e9c5, #efe0b7); box-shadow: inset 0 0 0 5px #fcf3da, inset 0 0 0 6px #b9883e, 0 6px 16px #54341855; text-align: center; }
.album-page-type { margin: 0 0 clamp(42px, 5svh, 64px); color: #7a4d28; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.album-card-page > img { width: min(100%, 230px); max-height: 43svh; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 4px 5px #6a442755); }
.album-card-copy h2 { margin: 3px 0 4px; color: #4c2530; font-size: clamp(1.08rem, 5vw, 1.36rem); }
.album-card-copy { min-width: 0; }
.album-card-copy p { max-width: 100%; margin: 0 auto 12px; color: #66452d; font-size: .75rem; line-height: 1.55; overflow-wrap: anywhere; text-align: left; }
.album-card-copy strong { color: #5c3440; font-size: .78rem; }
.album-card-copy strong span { margin-left: 4px; color: #8d2539; font-family: Arial, sans-serif; font-size: 1.12rem; }
.album-card-count { display: inline-flex; align-items: center; gap: 3px; }
.album-voice-button { position: relative; display: grid; width: 40px; height: 40px; margin: -10px -10px -10px 0; padding: 0; place-items: center; border: 0; background: transparent; color: #714d2e; cursor: pointer; }
.album-voice-button::before { position: absolute; width: 26px; height: 26px; border: 1px solid #9a7040; border-radius: 50%; background: #fff8e588; content: ""; }
.album-voice-button svg { position: relative; z-index: 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.album-voice-button:active { transform: translateY(1px); }
.album-card-page:not(.is-locked) { display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; padding-top: clamp(52px, 7.5svh, 92px); }
.album-card-page:not(.is-locked) > img { flex: 0 1 auto; min-height: 0; max-height: 43svh; margin: 0 auto 8px; }
.album-card-info { align-self: stretch; min-width: 0; margin: auto 0; }
.album-card-page:not(.is-locked) .album-card-copy { margin: 0; }
.album-card-page.is-locked { display: flex; align-items: center; justify-content: center; border: 1px solid #9e7137; border-radius: 4px; background: repeating-linear-gradient(0deg, #93672a0a 0 1px, transparent 1px 7px), linear-gradient(105deg, #f7e9c5, #efe0b7); box-shadow: inset 0 0 0 5px #fcf3da, inset 0 0 0 6px #b9883e, 0 6px 16px #54341855; }
.album-locked-card { position: relative; display: grid; flex: 0 0 auto; width: auto; height: min(68%, 360px); max-width: 74%; aspect-ratio: 720 / 1146; place-items: center; border: 2px solid #877045; border-radius: 12px; outline: 1px solid #d2bd82; outline-offset: -7px; background: repeating-linear-gradient(135deg, #e5d3a71b 0 2px, transparent 2px 10px), linear-gradient(145deg, #655544, #3d3841); box-shadow: inset 0 0 0 10px #232a32aa, 0 6px 12px #513d2c55; }
.album-locked-card::before { position: absolute; inset: 15px; border: 1px solid #c9ad6d88; border-radius: 7px; content: ""; }
.album-locked-card span { position: relative; color: #e9d9ad; font-family: Georgia, serif; font-size: clamp(6rem, 29vw, 9rem); line-height: 1; text-shadow: 0 2px 0 #302a2d, 0 0 9px #eee0b488; }
.album-card-page.is-sign-card { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, #d5a94c4d 0 2px, transparent 3px 34px), radial-gradient(circle at 86% 78%, #d5a94c42 0 2px, transparent 3px 30px), repeating-linear-gradient(0deg, #93672a0a 0 1px, transparent 1px 7px), linear-gradient(105deg, #f7e9c5, #efe0b7); }
.album-card-page.is-sign-card::before { position: absolute; inset: 10px; border: 1px solid #c99d4588; border-radius: 2px; content: ""; pointer-events: none; }
.album-card-page.is-sign-card > * { position: relative; z-index: 1; }
.album-card-page.is-sign-card > img { padding: 7px; border: 2px solid #9e7529; border-radius: 3px; outline: 1px solid #f6df97; outline-offset: -6px; background: linear-gradient(135deg, #704a1c, #d3a953 45%, #754f1d); box-shadow: 0 3px 0 #754c19, 0 7px 14px #5d421e66; }
.album-complete-message { margin: 6px 0 0; color: #8a3a29; font-size: .8rem; font-weight: 900; }
.album-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 300px); margin: 4px auto 0; }
.album-navigation button:disabled { cursor: default; opacity: .38; }
.primary-button, .sub-button { width: min(100%, 260px); padding: 11px 18px; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; }
.primary-button { background: #a84261; color: #fff; box-shadow: 0 3px 0 #7e3149; }
.sub-button { background: #fff; color: #7e4555; border: 1px solid #dfc3ce; }
.pressable-button { transition: transform .08s ease, filter .08s ease; }
.pressable-button:active:not(:disabled) { transform: translateY(2px); filter: brightness(.96); }
.title-dialog { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(calc(100% - 40px), 340px); max-height: calc(100% - 40px); margin: 0; padding: 14px; overflow-y: auto; border: 1px solid #dfc3ce; border-radius: 15px; background: #fffafc; color: #4b3640; font-size: .83rem; line-height: 1.65; transform: translate(-50%, -50%); }
.title-dialog-text { white-space: pre-line; }
.title-dialog p { margin: 0 0 10px; white-space: pre-line; }
.title-dialog.is-misaki-info { width: min(calc(100% - 34px), 370px); padding: 18px; }
.title-dialog.is-misaki-info .title-dialog-text { display: block; width: 100%; margin: 0 auto; text-align: left; white-space: normal; }
.title-dialog.is-misaki-info .title-dialog-title { margin: 0 0 12px; color: #4b3640; font-size: 1.08rem; font-weight: 900; line-height: 1.3; text-align: center; white-space: nowrap; }
.title-dialog.is-misaki-info .title-dialog-title-small { display: inline-block; margin-right: .08em; font-size: .62em; vertical-align: .12em; }
.title-dialog.is-misaki-info .title-dialog-body { display: block; width: 100%; margin: 0 0 9px; color: #4b3640; font-size: .78rem; line-height: 1.72; text-align: left; white-space: normal; }
.title-dialog.is-misaki-info .title-dialog-source { display: block; width: 100%; margin: 8px 0 0; color: #806b74; font-size: .68rem; line-height: 1.4; text-align: right; white-space: normal; }
.title-dialog.is-misaki-info .draw-card-button { display: block; margin: 14px auto 0; }
.title-dialog.is-credits { width: min(calc(100% - 34px), 370px); padding: 18px; }
.title-dialog.is-credits .title-dialog-text { width: 100%; margin: 0 auto; white-space: normal; }
.credits-title { margin: 0 0 14px; color: #4b3640; font-size: 1.08rem; font-weight: 900; line-height: 1.3; text-align: center; }
.credits-grid { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); column-gap: 12px; row-gap: 8px; width: 100%; margin: 0; color: #4b3640; font-size: clamp(.69rem, 3.25vw, .8rem); line-height: 1.5; }
.credits-grid dt, .credits-grid dd { min-width: 0; margin: 0; text-align: left; white-space: nowrap; }
.credits-grid dt { font-weight: 800; }
.title-dialog.is-credits .draw-card-button { display: block; margin: 14px auto 0; }
.album-screen .collection-reset-dialog { z-index: 5; }
.album-summary [data-collection-reset-target] { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.reset-best-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reset-best-actions .primary-button, .reset-best-actions .sub-button { width: 100%; padding: 9px 6px; }

.game-header { display: grid; place-items: center; min-height: 105px; text-align: center; }
.game-logo { display: block; width: min(42%, 160px); height: auto; }
.eyebrow { margin: 0; color: #ae627a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; }
h1 { margin: 3px 0 14px; font-size: clamp(1.25rem, 5.4vw, 1.75rem); line-height: 1.28; }
h1 span { color: #c24f73; white-space: nowrap; }

.stats { align-self: center; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: min(calc(100% + 8px), 369px); height: 63.55px; margin: 0 auto; padding: 14px 20px 12px; background: url("assets/パネル.png") center / 100% 100% no-repeat; transform: translateX(-4px); }
.stats div { display: grid; min-width: 0; padding: 0 1px; text-align: center; align-content: center; justify-items: center; }
.stats div + div { border-left: 1px solid #a97b28; box-shadow: -1px 0 0 #fff2c6; }
.stats span { display: block; color: #26365e; font-size: clamp(0.58rem, 2.6vw, 0.66rem); font-weight: 800; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; transform: translateY(2px); }
.stats strong { display: block; margin-top: 3px; color: #18284b; font-size: clamp(0.94rem, 4.2vw, 1.12rem); line-height: 1; text-shadow: 0 1px 0 #fff8df; white-space: nowrap; }
.stats strong.is-danger { color: #ff6868; }
.stats .stat-total { display: inline; color: #695321; font-size: .6em; }

.message { min-height: 1.5em; margin: 12px 0 10px; padding: 2px 8px; border-radius: 999px; background: #101a3ec9; color: #fff7d5; text-align: center; font-size: 0.82rem; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 2px #050814; transform: translateY(-15px); }
.message.is-clear { color: #ffe19a; }
.message.is-over { color: #ffd5db; }

.board-stage { position: relative; flex: 0 0 auto; width: min(100%, 420px); aspect-ratio: 1; margin: auto; transform: translateY(-44px); }
.board { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 2vw, 10px); }
.card { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; perspective: 650px; -webkit-tap-highlight-color: transparent; }
.card:focus-visible { outline: 3px solid #6c96b9; outline-offset: 2px; }
.card-inner { position: absolute; inset: 0; transition: transform 0.32s ease; transform-style: preserve-3d; }
.card.is-flipped .card-inner, .card.is-matched .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back { overflow: visible; border-radius: 0; background: #091946 url("assets/プレイカード裏.png") center / contain no-repeat; box-shadow: 0 2px 5px #07132c99; }
.card-debug-label { z-index: 1; padding: 4px 7px; border: 1px solid #f2d378; border-radius: 999px; background: #181339d9; color: #fff4bf; font-size: clamp(.56rem, 2.7vw, .74rem); font-weight: 900; line-height: 1; text-shadow: 0 1px 1px #070614; white-space: nowrap; }
.card-front { transform: rotateY(180deg); background: #fff; border: 3px solid #fff; box-shadow: 0 2px 5px #74425233; }
.card-front img { width: 100%; height: 100%; object-fit: cover; }
.card.is-matched { cursor: default; filter: grayscale(1); opacity: 1; }
.board.is-clear-flash .card.is-matched { animation: clear-flash 1.65s ease-in forwards; }
@keyframes clear-flash {
  0%, 24% { filter: grayscale(.8) brightness(1.08); opacity: 1; box-shadow: 0 0 0 0 #fff8cf; }
  46% { filter: grayscale(.2) brightness(1.5) sepia(.25); opacity: 1; box-shadow: 0 0 7px 3px #fffbe8, 0 0 17px 7px #f7d46f; }
  70% { filter: grayscale(0) brightness(2.15) sepia(.35); opacity: 1; box-shadow: 0 0 12px 5px #fff, 0 0 28px 12px #ffe68f, 0 0 48px 18px #f6c95b99; }
  100% { filter: grayscale(0) brightness(3); opacity: 1; box-shadow: 0 0 20px 10px #fff, 0 0 48px 24px #ffeaa3; }
}
.card.is-special { cursor: pointer; }

.shuffle-overlay { position: absolute; z-index: 10; inset: -8px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: #211c52df; color: #fff; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.shuffle-overlay img { grid-area: 1 / 1; width: min(66%, 240px); aspect-ratio: 1; object-fit: contain; transform: scale(.94); transition: transform .25s ease; }
.shuffle-overlay span { position: relative; z-index: 1; grid-area: 1 / 1; padding: 10px 16px; border-radius: 999px; background: #17133fdb; color: #fff; font-size: clamp(1.75rem, 10vw, 3rem); font-weight: 900; letter-spacing: .08em; line-height: 1.1; text-shadow: 0 3px 0 #09071f; white-space: nowrap; }
.shuffle-overlay.is-visible { opacity: 1; }
.shuffle-overlay.is-visible img { transform: scale(1); }
.board.is-shuffling .card:not(.is-matched) { visibility: hidden; pointer-events: none; }

.dobon-overlay { position: absolute; z-index: 10; inset: -8px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: #3a1024e6; color: #fff; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.dobon-overlay img { grid-area: 1 / 1; width: min(66%, 240px); aspect-ratio: 1; object-fit: contain; transform: scale(.94); transition: transform .25s ease; }
.dobon-overlay-copy { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.dobon-overlay-copy strong { padding: 10px 18px; border-radius: 999px; background: #270817dc; color: #fff; font-size: clamp(2.625rem, 15vw, 4.5rem); font-weight: 900; letter-spacing: .08em; line-height: 1.1; text-shadow: 0 3px 0 #12030a; white-space: nowrap; }
.dobon-warning { padding: 6px 12px; border-radius: 999px; background: #fff0dce8; color: #7d1731; font-size: clamp(.78rem, 3.6vw, 1rem); font-weight: 900; line-height: 1.25; white-space: nowrap; }
.dobon-overlay.is-final .dobon-warning { display: none; }
.dobon-overlay.is-visible { opacity: 1; }
.dobon-overlay.is-visible img { transform: scale(1); }

.clear-transition { position: absolute; z-index: 15; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.clear-transition.is-active { animation: clear-whiteout 1.65s ease-in forwards; }
@keyframes clear-whiteout { 0%, 58% { opacity: 0; } 82% { opacity: .35; } 100% { opacity: 1; } }

.game-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; width: min(100%, 250px); margin: 8px auto 0; gap: 8px; transform: translateY(-25px); }
.game-action-button { min-height: 46px; padding: 9px 6px; border: 1px solid #eac76e; border-radius: 999px; color: #fff; font-weight: 800; text-shadow: 0 1px 1px #151827; box-shadow: 0 3px 0 #1b2140, 0 4px 7px #06091466; cursor: pointer; }
.title-action { background: linear-gradient(#4a82b9, #285580); }
.retry-action { background: linear-gradient(#c75b69, #923345); }
.game-action-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1b2140; }
.end-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: #17152bd9; text-align: center; }
.end-content { width: min(84%, 340px); padding: 22px 18px 20px; border: 1px solid #e5c66d; border-radius: 16px; background: linear-gradient(145deg, #38233f, #292346 62%, #34203b); color: #fff; box-shadow: inset 0 0 0 1px #ffffff1f, 0 8px 20px #0a071799; }
.end-content h2 { display: inline-block; max-width: 100%; margin: 0; color: #f7dda0; font-size: clamp(1.5rem, 6.8vw, 2.05rem); font-weight: 900; letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 0 #64233c, 0 3px 7px #160918; white-space: nowrap; }
.end-content p { margin: 16px 0 16px; color: #fff3d5; font-size: .86rem; font-weight: 700; line-height: 1.5; }
.game-over-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 250px); margin: 0 auto; gap: 8px; }
.clear-screen { position: relative; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); min-height: 0; margin: calc(-1 * max(16px, env(safe-area-inset-top))) auto calc(-1 * max(18px, env(safe-area-inset-bottom))); justify-content: stretch; padding: max(16px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); aspect-ratio: 9 / 16; overflow: hidden; background: url("assets/backgrounds/クリア画面背景.png") center / cover no-repeat; color: #fff; }
.clear-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#07112940, #07112912 42%, #0711299c); pointer-events: none; }
.clear-content { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(4, auto); align-content: center; align-items: center; width: min(100%, 370px); height: 100%; margin: 0 auto; gap: 5px; }
.clear-logo { width: min(94%, 360px); max-height: 18svh; margin: 0 auto; object-fit: contain; }
.clear-image { width: min(94%, 350px); max-height: 42svh; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 5px 8px #12072299); }
.collection-reward { position: relative; isolation: isolate; margin: -2px 0 0; }
.collection-reward p { margin: 0; color: #ffe49c; font-size: clamp(1rem, 4.8vw, 1.35rem); font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 0 #9a611d, 0 0 6px #6f3d1a; animation: collection-reward-pulse 1.8s ease-in-out infinite; }
.collection-reward::before, .collection-reward::after { position: absolute; z-index: -1; top: 50%; color: #ffe49c; font-size: .9rem; letter-spacing: .38em; text-shadow: 0 0 6px #ffe49c; content: "✦ · ✧"; animation: collection-sparkle 2.2s ease-in-out infinite; transform: translateY(-50%); }
.collection-reward::before { right: calc(100% + 7px); }
.collection-reward::after { left: calc(100% + 7px); animation-delay: 1.1s; }
@keyframes collection-reward-pulse { 50% { opacity: .68; text-shadow: 0 1px 0 #9a611d, 0 0 12px #ffe49c; } }
@keyframes collection-sparkle { 50% { opacity: .3; transform: translateY(-50%) scale(.72); } }
.draw-card-button { width: min(100%, 230px); min-height: 44px; margin: 0 auto; border: 1px solid #fff0b4; border-radius: 999px; background: linear-gradient(#e7b951, #aa6c24); color: #fffdf0; font-weight: 900; text-shadow: 0 1px 1px #634019; box-shadow: 0 3px 0 #704114, 0 4px 8px #06091466; cursor: pointer; }
.clear-actions button:disabled { cursor: default; opacity: .45; }
.clear-screen.has-collection-reward .clear-image { width: min(84%, 310px); max-height: 34svh; }
.collection-picker { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-content: center; padding: max(20px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); background: #071129d9; color: #fff; text-align: center; }
.collection-picker h2 { margin: 0; color: #ffe49c; font-size: clamp(1.35rem, 6vw, 1.8rem); }
.collection-picker > p { margin: 5px 0 10px; font-size: .8rem; font-weight: 700; }
.collection-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: center; gap: 8px; width: min(86vw, 304px, calc((100svh - 104px) * .628)); margin: 0 auto; }
.collection-card-choice { grid-column: span 2; }
.collection-card-choice:nth-child(7) { grid-column: 2 / span 2; }
.collection-card-choice:nth-child(8) { grid-column: 4 / span 2; }
.collection-card-choice { position: relative; min-width: 0; aspect-ratio: 720 / 1146; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; perspective: 650px; }
.collection-card-choice:disabled { cursor: default; }
.collection-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .36s ease; }
.collection-card-choice.is-revealed .collection-card-inner { transform: rotateY(180deg); }
.collection-card-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid #f7d984; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 5px #0008; }
.collection-card-back { border-color: #765018; background: url("assets/ui/裏面デザイン.png") center / cover no-repeat; box-shadow: inset 0 0 0 1px #ffe7a5, inset 0 0 0 2px #a56c1e, inset 0 0 0 3px #f2cf78, 0 2px 5px #0008; }
.collection-card-secret-preview { --collection-secret-preview-opacity: .28; position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: var(--collection-secret-preview-opacity); pointer-events: none; }
.collection-card-front { display: grid; place-items: center; background: #fff7e5; transform: rotateY(180deg); }
.collection-card-front img { width: 100%; height: 100%; object-fit: contain; }
.collection-reveal { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); overflow: hidden; background: #071129eb; text-align: center; }
.collection-reveal-card { flex: 0 0 auto; width: min(68vw, 250px); aspect-ratio: 1624 / 2222; perspective: 900px; }
.collection-reveal-card.is-sign-card { aspect-ratio: 1; }
.collection-reveal-inner { position: relative; width: 100%; height: 100%; transform: rotateY(180deg); transform-style: preserve-3d; }
.collection-reveal.is-spinning .collection-reveal-inner { animation: collection-card-spin 2.5s cubic-bezier(.08, .82, .2, 1) forwards; }
.collection-reveal-face { position: absolute; inset: 0; overflow: hidden; border: 2px solid #ffe49c; border-radius: 15px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 14px #ffe49caa, 0 8px 20px #000a; }
.collection-reveal-back { background: url("assets/ui/裏面デザイン.png") center / cover no-repeat; }
.collection-reveal-front { display: grid; place-items: center; background: #fff7e5; transform: rotateY(180deg); }
.collection-reveal-front img { width: 100%; height: 100%; object-fit: contain; }
.collection-reveal.is-revealed .collection-reveal-face { animation: collection-card-gold-glow 2.8s ease-in-out infinite; }
.collection-reveal.is-revealed .collection-reveal-front::after { position: absolute; inset: -35% -70%; content: ""; pointer-events: none; background: linear-gradient(112deg, transparent 44%, #fff9ca00 47%, #fff9cacc 50%, #ffffff 51%, #fff9cacc 52%, #fff9ca00 55%, transparent 58%); opacity: 0; transform: translateX(-45%) rotate(8deg); animation: collection-card-glint 3.8s ease-in-out infinite; }
@keyframes collection-card-spin { 0% { transform: rotateY(180deg) scale(.72); } 100% { transform: rotateY(1260deg) scale(1); } }
@keyframes collection-card-gold-glow { 0%, 100% { border-color: #eecb72; box-shadow: 0 0 11px #ffe49c99, 0 8px 20px #000a; } 50% { border-color: #fff2ad; box-shadow: 0 0 19px #ffe49ce6, 0 0 6px #fff5bf, 0 8px 20px #000a; } }
@keyframes collection-card-glint { 0%, 67%, 100% { opacity: 0; transform: translateX(-45%) rotate(8deg); } 74% { opacity: .85; } 88% { opacity: 0; transform: translateX(45%) rotate(8deg); } }
.collection-new { margin: 0 0 10px; color: #ffe49c; font-size: 1.3rem; font-weight: 900; line-height: 1.1; letter-spacing: .1em; text-shadow: 0 0 8px #d8872f; }
.collection-name { margin: 12px 0 0; color: #ffe49c; font-size: 1.3rem; font-weight: 900; line-height: 1.2; letter-spacing: .04em; text-shadow: 0 0 8px #d8872f; }
.collection-quote { width: min(100%, 310px); margin: 8px 0 0; color: #fff; font-size: .88rem; font-weight: 800; line-height: 1.5; white-space: pre-line; text-shadow: 0 1px 3px #000; }
.collection-added { margin: 8px 0 0; color: #d7ddea; font-size: .68rem; font-weight: 700; line-height: 1.3; }
.collection-reveal .draw-card-button { margin-top: 10px; }
.collection-reveal .collection-name.is-hidden,
.collection-reveal .collection-quote.is-hidden,
.collection-reveal .collection-added.is-hidden { display: block !important; visibility: hidden; }
.clear-records { width: min(100%, 280px); margin: 0 auto; padding: 6px 12px; border: 1px solid #f7d87c; border-radius: 10px; background: #081733d9; box-shadow: 0 2px 6px #03060d99; }
.clear-result { display: flex; align-items: baseline; justify-content: center; gap: clamp(16px, 6vw, 28px); margin: 0; color: #fff; font-family: Arial, "Hiragino Sans", sans-serif; text-shadow: 0 1px 2px #000; }
.score-group { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.score-group strong { font-size: clamp(1.35rem, 6.4vw, 1.85rem); font-weight: 800; line-height: 1; }
.score-group span { font-size: clamp(.65rem, 3vw, .82rem); font-weight: 700; line-height: 1; }
.new-record { margin: 0; color: #ffe19a; font-size: 1.05rem; font-weight: 900; letter-spacing: .08em; text-shadow: 0 1px 3px #7f1436; }
.clear-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 250px); margin: 0 auto; gap: 8px; }

@media (max-height: 680px) {
  .game-shell { padding-top: 10px; padding-bottom: 12px; }
  .game-screen { margin: -10px auto -12px; }
  h1 { margin-bottom: 8px; }
  .message { margin: 7px 0; }
  .game-actions { margin-top: 10px; }
  .game-action-button { min-height: 42px; padding: 7px 6px; }
  .title-content { width: min(84%, 300px); }
}

@media (max-width: 480px) {
  .album-complete-badge { top: calc(20% - 54px); }
  .game-screen .message { margin: 6px 0 8px; transform: none; }
  .game-screen .board-stage { margin: 0 auto; transform: none; }
  .game-screen .game-actions { width: min(100%, 250px); margin-right: auto; margin-left: auto; transform: none; }
  .game-screen .end-content p { word-break: keep-all; }

  .collection-reveal { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .collection-reveal-card { width: min(64vw, 236px); }
  .collection-new { margin-bottom: 7px; }
  .collection-name { margin-top: 8px; }
  .collection-quote { margin-top: 6px; }
  .collection-added { margin-top: 6px; }
  .collection-reveal .draw-card-button { margin-top: 8px; }

  .album-card-page:not(.is-locked) { padding-top: 20px; }
  .album-card-page:not(.is-locked) .album-page-type { margin-bottom: 14px; }
  .album-card-page:not(.is-locked) > img { width: min(100%, 275px); max-height: 51svh; margin-bottom: 6px; }
}

@media (min-width: 700px) {
  html { overflow: visible; }
  body { display: grid; place-items: center; height: auto; min-height: 100svh; overflow: visible; }
  .game-shell { width: 480px; height: auto; min-height: 0; padding: 0; overflow: visible; }
  .bgm-choice-screen { min-height: 100svh; }
  .title-screen, .game-screen, .clear-screen, .album-screen { width: min(460px, calc((100svh - 36px) * 9 / 16), calc(100vw - 36px)); height: auto; min-height: 0; margin: 0 auto; }
}