/* DIG OUT (web) */
@font-face {
  font-family: 'PixelMplus';
  src: url('../fonts/PixelMplus10-Regular.ttf') format('truetype');
  font-display: swap;
}
:root {
  --void: #06080c;
  --ink: #e8f1f8;
  --face: #2b3038;
  --light: #4a515c;
  --dark: #16191e;
  --edge: #050607;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; color: var(--ink); overflow: hidden;
  font-family: 'PixelMplus', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', monospace;
  -webkit-user-select: none; user-select: none; touch-action: none;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #08090c; }
#stage { position: relative; overflow: hidden; background: var(--void); }
#stage > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#gl { image-rendering: auto; }
#fx { pointer-events: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: #7d8a99; font-size: 16px; letter-spacing: 2px; background: #000; z-index: 50; }
#boot.err { white-space: pre-line; text-align: center; padding: 24px; line-height: 1.7; }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

.screens { position: absolute; inset: 0; pointer-events: none; }
.screens > * { pointer-events: auto; }
.jt { font-family: 'PixelMplus', 'Hiragino Kaku Gothic ProN', monospace; line-height: 1.35; text-shadow: 1.33px 1.33px 0 #000; }
.jt.pre { white-space: pre-line; }
.jt.nowrap { white-space: nowrap; }
.jt.left { align-self: stretch; text-align: left; }

/* 角ばったボタン・板（Theme.swift BlockFace / BlockPanel） */
.block {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit; cursor: pointer;
  border: 2px solid var(--edge); border-radius: 0; background: var(--face);
  box-shadow: inset 3px 3px 0 var(--light), inset -3px -3px 0 var(--dark);
  outline-offset: -2px;
}
.block:active:not(:disabled) { box-shadow: inset 3px 3px 0 var(--dark), inset -3px -3px 0 var(--light); transform: translateY(1px); }
.block:disabled { cursor: default; }
.btn { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 8px; }
.btn.big { padding: 17px 8px; }
.btn .sub { font-size: 10px; }
.panel { border: 2px solid var(--edge); background: #14171c; box-shadow: inset 3px 3px 0 #262a31, inset -3px -3px 0 #0b0d10; }

.col { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
.row { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.grow { flex: 1 1 auto; }
.spacer { flex: 1 1 auto; }
.spacer.min20 { min-height: 20px; }
.spacer.h130 { flex: 0 0 130px; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.overlay.center { justify-content: center; }
.dim70 { background: rgba(0, 0, 0, 0.7); }
.dim75 { background: rgba(0, 0, 0, 0.75); }
.dim80 { background: rgba(0, 0, 0, 0.8); }
.dim85 { background: rgba(0, 0, 0, 0.85); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; touch-action: pan-y; }
.scroll::-webkit-scrollbar { display: none; }

/* タイトル */
.title { position: absolute; inset: 0; }
.title-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.35), rgba(0,0,0,0.05)); }
.title-col { position: absolute; inset: 0; padding: 0 40px; }
.best { margin-bottom: 16px; }
.buttons { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.narrow { width: 100%; max-width: 420px; padding: 0 40px; height: auto; gap: 12px; }

/* 遊び方・設定 */
.howto, .settings { margin: 40px auto; width: calc(100% - 36px); max-width: 560px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.howto-row { display: flex; flex-direction: column; gap: 5px; }
.settings { padding: 18px; gap: 12px; width: calc(100% - 28px); }
.set-head { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.two { gap: 10px; }
.two .btn { flex: 1; }
.tracks { border: 2px solid var(--edge); background: #101317; box-shadow: inset 2px 2px 0 #0b0d10, inset -2px -2px 0 #1e2228; }
.track { display: flex; align-items: center; padding-left: 10px; padding-right: 2px; }
.track button { appearance: none; background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
.track-toggle { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 0 !important; text-align: left; }
.track-play { width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; }
.check { width: 16px; height: 16px; border: 2px solid #7d8a99; flex: 0 0 16px; position: relative; }
.check.on { border-color: #5be2ff; }
.check.on::after { content: ''; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; background: #5be2ff; }

/* 結果 */
.depth { margin-top: 30px; align-items: flex-end; gap: 6px; }
.pop { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.panel.small { padding: 8px 12px; margin-top: 12px; }
.stats { width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.stat { display: flex; align-items: center; gap: 8px; }

/* BASE（強化） */
.base, .pu { padding: 14px 18px 10px; gap: 16px; }
.head { width: 100%; }
.gems { padding: 8px 12px; gap: 8px; }
.tiles { display: flex; gap: 10px; width: 100%; }
.card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; color: var(--ink); }
.card .icon { height: 64px; display: flex; align-items: center; justify-content: center; }
.card .icon.small { height: 30px; }
.card .effect { text-align: center; height: 28px; overflow: hidden; padding: 0 4px; }
.meter { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.meter span { width: 8px; height: 8px; outline: 1px solid #000; }
.pricebox { height: 24px; display: flex; align-items: center; justify-content: center; }
.price { display: flex; align-items: center; gap: 5px; }
.pu .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 auto; }
.card.meta { padding: 8px 4px; gap: 6px; }
.card.meta .effect { height: 26px; }
.pu > .btn, .base > .btn { flex: 0 0 auto; }

/* 曲名（画面の下） */
.banner { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); padding: 8px 12px; background: rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.6s ease-in, transform 0.6s ease-in; pointer-events: none; white-space: nowrap; z-index: 5; }
.banner.show { opacity: 1; transform: translate(-50%, 0); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }