:root {
  --bg: #0d0a14;
  --panel: #1c1628;
  --panel2: #2a2140;
  --line: #e8dcc0;
  --line-dim: #6a5a80;
  --text: #fff6e4;
  --sub: #b8a8d0;
  --accent: #ffd24a;
  --hp: #ff5a6a;
  --xp: #5ab0ff;
  --darkness: 0.15;
  --vig: #0e1a10;
  --px: 50%;
  --py: 50%;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --fs: clamp(13px, 3.6vmin, 18px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--bg); color: var(--text);
  overflow: hidden; overscroll-behavior: none;
  font-family: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', monospace;
  font-size: var(--fs);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
button { font-family: inherit; }

#app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }
#gl {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* 雰囲気レイヤー */
#darkness {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--px) var(--py), rgba(8, 6, 20, 0) 0, rgba(8, 6, 20, 0) 18vmin, rgba(8, 6, 20, 0.92) 75vmin);
  opacity: var(--darkness);
  transition: opacity 1s;
}
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 18vmin 4vmin var(--vig);
  opacity: 0.85;
}
#mist {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 40% 20% at 20% 30%, rgba(200, 230, 240, 0.18), transparent 70%),
    radial-gradient(ellipse 35% 18% at 70% 60%, rgba(200, 230, 240, 0.16), transparent 70%),
    radial-gradient(ellipse 30% 15% at 40% 85%, rgba(200, 230, 240, 0.14), transparent 70%);
  animation: mist 24s linear infinite alternate;
  transition: opacity 1s;
}
#mist.on { opacity: 1; }
@keyframes mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
#flash.go { animation: flash 0.35s ease-out; }
@keyframes flash { from { opacity: 0.8; } to { opacity: 0; } }
#hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 12vmin rgba(255, 40, 60, 0.7); }
#hurt.go { animation: flash 0.4s ease-out; }

/* タッチ操作 */
#touch { position: absolute; inset: 0; display: none; }
#touch.on { display: block; }
#joy-base {
  position: absolute; width: 104px; height: 104px; margin: 0; border-radius: 50%;
  border: 3px solid rgba(255, 246, 228, 0.35); background: rgba(20, 14, 30, 0.25);
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.12s;
}
#joy-base.on { opacity: 1; }
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 246, 228, 0.55); border: 3px solid rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
}

/* 共通パーツ */
.hidden { display: none !important; }
.pxbtn {
  display: block; width: 100%; margin: 8px 0; padding: 0.7em 1em;
  font-size: 1em; color: var(--text); background: var(--panel2);
  border: 3px solid var(--line); border-radius: 0;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #000;
  cursor: pointer; letter-spacing: 0.05em;
}
.pxbtn:active { transform: translateY(3px); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), 0 1px 0 #000; }
.pxbtn.big { font-size: 1.25em; background: #8e2b3d; }
.pxbtn.dim { background: transparent; border-color: var(--line-dim); color: var(--sub); }
.pxbtn.small { width: auto; padding: 0.3em 0.7em; margin: 0; }
.pxbtn.tiny { width: auto; padding: 0.25em 0.6em; margin: 0; font-size: 0.75em; border-width: 2px; }
.pxbtn.on { background: #3d6a4a; }
#shop-toggle { width: 100%; margin-bottom: 8px; }
#shop-list.off .shop-item:not(.locked) .grow { opacity: 0.45; }
.pxbtn:disabled { opacity: 0.4; }
.panel {
  background: var(--panel); border: 3px solid var(--line);
  box-shadow: 0 0 0 3px #000, 0 8px 0 3px rgba(0, 0, 0, 0.5);
  padding: 16px 18px;
}
.panel.wide { width: min(92vw, 520px); max-height: 88dvh; overflow-y: auto; touch-action: pan-y; }
h1, h2 { margin: 0 0 10px; font-weight: normal; text-align: center; }
h2 { font-size: 1.4em; }
.sub { text-align: center; color: var(--sub); margin: 0 0 12px; font-size: 0.9em; }
.glow { color: var(--accent); text-shadow: 0 0 8px rgba(255, 210, 74, 0.6), 2px 2px 0 #000; }
.cnt { display: inline-flex; align-items: center; gap: 4px; }
.ic { display: inline-block; width: 1.1em; height: 1.1em; image-rendering: pixelated; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ic canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.ic-skull::before { content: '\2620\FE0E'; font-style: normal; color: #e0d8f0; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#xpbar {
  position: absolute; left: 0; right: 0; top: 0; height: calc(15px + var(--safe-t));
  background: #120e1c; border-bottom: 2px solid #000;
}
#xpfill { position: absolute; left: 0; bottom: 0; height: 15px; width: 0; background: linear-gradient(#8ad0ff, var(--xp)); transition: width 0.15s; }
#lv { position: absolute; left: calc(8px + var(--safe-l)); bottom: 0; font-size: 12px; line-height: 15px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
#hud-top {
  position: absolute; top: calc(21px + var(--safe-t)); left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
#hpbox { display: flex; align-items: center; gap: 6px; width: 34%; max-width: 220px; }
.bar { flex: 1; height: 12px; background: #120e1c; border: 2px solid #000; box-shadow: 0 0 0 2px var(--line); position: relative; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(#ff8a8a, var(--hp)); transition: width 0.12s; }
#timer { font-size: 1.5em; text-shadow: 2px 2px 0 #000; padding: 0 10px; background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.15); }
#timer.boss { color: #ff6a7a; }
#timerbox { display: flex; flex-direction: column; align-items: center; }
#difftag { font-size: 0.75em; text-shadow: 1px 1px 0 #000; margin-top: 2px; }
#counters { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-shadow: 1px 1px 0 #000; margin-right: 40px; }
#slots { position: absolute; top: calc(64px + var(--safe-t)); left: calc(10px + var(--safe-l)); display: flex; flex-wrap: wrap; gap: 3px; max-width: 72vw; }
.slot { width: 26px; height: 26px; background: rgba(20, 14, 30, 0.7); border: 2px solid var(--line-dim); position: relative; display: flex; align-items: center; justify-content: center; }
.slot canvas { width: 18px; height: 18px; image-rendering: pixelated; }
.slot b { position: absolute; right: -2px; bottom: -4px; font-size: 9px; font-weight: normal; text-shadow: 1px 1px 0 #000; }
.slot.passive { border-color: #4a6a8a; }
.slot:not(.passive) + .slot.passive { margin-left: 7px; } /* 武器とパッシブの境目 */
.slot.empty { background: rgba(20, 14, 30, 0.35); border-style: dashed; opacity: 0.7; }
.slot.evo { border-color: var(--accent); box-shadow: 0 0 6px rgba(255, 210, 74, 0.6); }
#bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(98px + var(--safe-t)); width: min(80vw, 420px); text-align: center; }
#bossname { font-size: 0.9em; color: #ffb0c0; text-shadow: 2px 2px 0 #000; margin-bottom: 3px; }
#bossbar .bar { height: 10px; }
#bossfill { height: 100%; width: 100%; background: linear-gradient(#ff8ad0, #c02a6a); }
#btn-pause { position: absolute; top: calc(20px + var(--safe-t)); right: calc(8px + var(--safe-r)); pointer-events: auto; font-size: 0.85em; }
#btn-dash {
  position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(22px + var(--safe-b));
  width: 76px; height: 76px; border-radius: 50%; pointer-events: auto;
  background: rgba(142, 43, 61, 0.85); color: var(--text); border: 3px solid var(--line);
  box-shadow: 0 4px 0 #000; font-size: 0.85em; overflow: hidden; touch-action: none;
}
#btn-dash.left { right: auto; left: calc(18px + var(--safe-l)); }
#btn-dash span { position: relative; z-index: 1; }
#dashcd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, 0.55); }
@media (hover: hover) and (pointer: fine) { #btn-dash { opacity: 0.55; } }

/* 演出テキスト */
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; }
#banner .b1 { font-size: 1em; color: var(--sub); letter-spacing: 0.4em; }
#banner .b2 { font-size: 2em; text-shadow: 3px 3px 0 #000; color: var(--text); }
#banner.go { animation: banner 2.8s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(10px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#warning { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; opacity: 0; }
#warning .w1 { font-size: 2.2em; color: #ff4a5a; letter-spacing: 0.3em; text-shadow: 3px 3px 0 #000; }
#warning .w2 { font-size: 1.2em; text-shadow: 2px 2px 0 #000; }
#warning.go { animation: warn 2.6s steps(1) forwards; }
@keyframes warn { 0%, 20%, 40%, 60% { opacity: 1; } 10%, 30%, 50% { opacity: 0.2; } 85% { opacity: 1; } 100% { opacity: 0; } }
#toast {
  position: absolute; left: 50%; top: calc(26% + var(--safe-t)); transform: translateX(-50%);
  padding: 6px 14px; background: rgba(20, 14, 30, 0.85); border: 2px solid var(--line);
  pointer-events: none; opacity: 0; white-space: nowrap; text-shadow: 1px 1px 0 #000;
}
#toast.go { animation: toast 2.2s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 会話ウィンドウ */
#dialogue { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 10px calc(14px + var(--safe-b)); }
#dialogue.bark { pointer-events: none; justify-content: flex-start; padding-top: calc(78px + var(--safe-t)); }
#dialogue.bark #dlg-tools, #dialogue.bark #dlg-next { display: none; }
#dialogue.bark #dlg-box { width: min(86vw, 460px); min-height: 0; padding: 8px 10px; opacity: 0.94; }
#dialogue.bark #dlg-portrait { width: 44px; height: 44px; }
#dialogue.bark #dlg-text { min-height: 0; font-size: 0.9em; }
#dlg-box {
  position: relative; width: min(94vw, 680px); min-height: 104px;
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: rgba(22, 16, 34, 0.94); border: 3px solid var(--line);
  box-shadow: 0 0 0 3px #000, 0 6px 0 3px rgba(0, 0, 0, 0.5);
}
#dlg-portrait { flex: none; width: 72px; height: 72px; border: 2px solid var(--line-dim); background: #2a2140; display: flex; align-items: center; justify-content: center; }
#dlg-portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; }
#dlg-portrait.none { display: none; }
#dlg-body { flex: 1; min-width: 0; }
#dlg-name { font-size: 0.85em; margin-bottom: 4px; }
#dlg-text { line-height: 1.6; min-height: 3.2em; white-space: pre-wrap; word-break: break-all; }
#dlg-box.narration #dlg-text { color: #e0d4f0; }
#dlg-next { position: absolute; right: 12px; bottom: 6px; font-size: 0.8em; animation: blink 0.8s steps(1) infinite; opacity: 0; }
#dlg-next.on { opacity: 1; }
@keyframes blink { 50% { visibility: hidden; } }
#dlg-tools { display: flex; gap: 8px; justify-content: flex-end; width: min(94vw, 680px); margin-top: 8px; }
#dlg-auto.on { background: #3d6a4a; }

/* モーダル */
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 16, 0.6); padding: 12px; }
.modal-inner { width: min(94vw, 760px); max-height: 92dvh; overflow-y: auto; }
.modal-inner.panel { width: min(90vw, 420px); }
#cards { display: flex; gap: 10px; justify-content: center; }
.card .cd { white-space: pre-line; }
.card {
  flex: 1; max-width: 230px; text-align: left; color: var(--text);
  background: var(--panel); border: 3px solid var(--line); padding: 12px;
  box-shadow: 0 0 0 3px #000, 0 6px 0 3px rgba(0, 0, 0, 0.5); cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; font-size: 0.95em;
  animation: cardin 0.25s ease backwards;
}
.card:nth-child(2) { animation-delay: 0.06s; }
.card:nth-child(3) { animation-delay: 0.12s; }
@keyframes cardin { from { opacity: 0; transform: translateY(14px); } }
.card.sel { background: var(--panel2); border-color: var(--accent); }
.card .ch { display: flex; align-items: center; gap: 10px; }
.card .ci { width: 40px; height: 40px; flex: none; background: #120e1c; border: 2px solid var(--line-dim); display: flex; align-items: center; justify-content: center; }
.card .ci canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.card .cn { font-size: 1.05em; }
.card .cl { font-size: 0.8em; color: var(--accent); }
.card .cl.new { color: #8affc0; }
.card .cd { color: var(--sub); font-size: 0.85em; line-height: 1.5; }
@media (orientation: portrait) {
  #cards { flex-direction: column; align-items: stretch; }
  .card { max-width: none; }
}
#chest-list { margin: 8px 0 12px; }
.row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-dim); }
.row canvas { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.row .grow { flex: 1; }
.row small { color: var(--sub); display: block; font-size: 0.8em; }
#pause-build { margin-bottom: 8px; }

/* 画面 */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(10px + var(--safe-t)) 12px calc(10px + var(--safe-b)); background: rgba(8, 6, 16, 0.45); }
#title { flex-direction: column; justify-content: space-between; background: linear-gradient(rgba(8, 6, 16, 0.55), rgba(8, 6, 16, 0) 40%, rgba(8, 6, 16, 0) 55%, rgba(8, 6, 16, 0.7)); }
.title-logo { text-align: center; margin-top: 6vh; }
.title-logo h1 { font-size: clamp(30px, 9vmin, 60px); color: #ffe7a0; text-shadow: 0 0 14px rgba(255, 200, 80, 0.55), 4px 4px 0 #3a1a2a, 6px 6px 0 #000; letter-spacing: 0.06em; }
.t-sub { color: #ffd0a0; letter-spacing: 0.3em; font-size: 0.85em; margin-bottom: 6px; text-shadow: 2px 2px 0 #000; }
.t-sub2 { color: var(--sub); text-shadow: 2px 2px 0 #000; }
#title .menu { width: min(80vw, 320px); margin: auto 0 1vh; }
#title .menu .pxbtn { margin: 6px 0; padding: 0.55em 1em; }
.title-foot { width: 100%; display: flex; justify-content: space-between; color: var(--sub); font-size: 0.8em; padding: 0 6px; text-shadow: 1px 1px 0 #000; }
/* 横画面：主人公が見えるようにメニューを下に2列で並べる */
@media (orientation: landscape) {
  .title-logo { margin-top: 1vh; }
  #title .menu { width: min(90vw, 520px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 4px; }
  #title .menu .pxbtn { margin: 0; padding: 0.5em 1em; }
  #t-new, #t-continue, #t-ach { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .title-logo h1 { font-size: clamp(26px, 8vmin, 48px); margin-bottom: 4px; }
  #title .menu .pxbtn { padding: 0.35em 1em; }
  /* 横持ちは縦が短いので2列にして、ボタンが画面外に出ないようにする */
  .panel.wide { width: min(96vw, 860px); padding: 10px 14px; }
  h2 { font-size: 1.15em; margin-bottom: 6px; }
  #shop-list, #chapter-list, #diff-list, #ach-list, #r-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  #ach-list .ach-cat { grid-column: 1 / -1; }
  #r-buttons { display: flex; gap: 8px; }
  #r-buttons .pxbtn { margin: 4px 0; }
  .modal-inner.panel { width: min(94vw, 760px); padding: 10px 14px; }
  #pm-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #pm-buttons .pxbtn { margin: 0; padding: 0.4em 0.3em; font-size: 0.9em; }
  #pause-build { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; margin-top: 8px; }
}
/* 長い一覧でも「もどる」は常に見える */
.panel.wide > .back { position: sticky; bottom: -16px; z-index: 1; background: var(--panel); box-shadow: 0 -8px 12px var(--panel), 0 8px 0 var(--panel); }
#pause-build { margin-top: 10px; }
.chapter { display: flex; align-items: center; gap: 10px; text-align: left; }
.chapter .grow { flex: 1; }
.chapter small { color: var(--sub); display: block; font-size: 0.8em; }
.chapter .badge { color: var(--accent); font-size: 0.8em; }
.shop-coins { text-align: center; color: var(--accent); margin-bottom: 8px; font-size: 1.1em; }
.shop-item .pips { color: var(--accent); letter-spacing: 2px; font-size: 0.8em; }
.shop-item .pips i { font-style: normal; }
.shop-item .pips .over { color: #ff5a6a; }
.shop-item .pips .shut { opacity: 0.35; }
.shop-item button.over { border-color: #ff5a6a; box-shadow: 0 0 0 2px #ff5a6a; }
.shop-item button { width: auto; margin: 0; padding: 0.4em 0.7em; font-size: 0.85em; white-space: nowrap; }
.howto { line-height: 1.8; padding-left: 1.2em; margin: 0 0 12px; }
.howto b { color: var(--accent); font-weight: normal; }
#r-stats { margin: 6px 0 14px; }
#r-stats .row b { font-weight: normal; color: var(--accent); }
#ending { background: #000; flex-direction: column; overflow: hidden; }
#credits { text-align: center; line-height: 2.2; font-size: 1.1em; animation: none; }
#credits.go { animation: credits 16s linear forwards; }
@keyframes credits { from { transform: translateY(60vh); } to { transform: translateY(-110%); } }

#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); letter-spacing: 0.3em; }

/* デバッグ */
#debug { position: absolute; left: calc(6px + var(--safe-l)); bottom: 28%; z-index: 50; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; max-width: min(92vw, 520px); pointer-events: none; }
#debug > * { pointer-events: auto; }
#debug button { font-family: inherit; font-size: 11px; padding: 5px 7px; background: rgba(0, 0, 0, 0.75); color: #8affc0; border: 1px solid #8affc0; }
#debug .dbg-toggle { font-size: 12px; padding: 6px 10px; }
#debug .dbg-panel { display: flex; flex-wrap: wrap; gap: 4px; max-height: 55vh; overflow-y: auto; padding: 6px; background: rgba(0, 0, 0, 0.55); border: 1px solid #2a6a4a; }
#debug .dbg-panel.hidden { display: none; }
#debug .dbg-h { width: 100%; font-size: 10px; color: #6ac0a0; margin-top: 2px; }
#debug .fps { font-size: 11px; color: #8affc0; padding: 3px 5px; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
@media (hover: hover) { .card:hover { background: var(--panel2); border-color: var(--accent); } }

/* 難易度・クリア印 */
.chapter .badge .mark { display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; font-style: normal; margin-left: 3px; border: 2px solid var(--line-dim); color: var(--line-dim); font-size: 1.15em; }
.chapter .badge .mark.on { color: #120e1c; border-color: #000; }
.pxbtn.diff.sel, .pxbtn.chapter.sel { box-shadow: 0 0 0 3px var(--accent), inset -3px -3px 0 rgba(0, 0, 0, 0.35); }
#ch-diff { margin-bottom: 8px; }
#r-say { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px; background: rgba(0, 0, 0, 0.3); border: 2px solid var(--line-dim); }
#r-say:empty { display: none; }
#r-say canvas { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
#t-crown { margin-top: 6px; font-size: 0.9em; text-shadow: 2px 2px 0 #000; }

/* 実績 */
.ach-cat { margin: 14px 0 2px; font-size: 0.95em; color: var(--accent); border-bottom: 2px solid var(--line-dim); padding-bottom: 2px; }
.ach { opacity: 0.55; }
.ach canvas { filter: grayscale(1); }
.ach.got { opacity: 1; }
.ach.got canvas { filter: none; }
.ach-mark { color: var(--accent); flex: none; width: 1.2em; text-align: center; }
.ach-bar { position: relative; height: 12px; margin-top: 3px; background: #120e1c; border: 1px solid var(--line-dim); }
.ach-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--line-dim); }
.ach-bar em { position: relative; display: block; font-style: normal; font-size: 0.65em; line-height: 12px; text-align: center; color: #fff; }
#r-stats .ach-new span { color: var(--accent); }
.shop-item.locked { opacity: 0.5; }
.shop-item.locked canvas { filter: grayscale(1); }
#reroll { width: auto; margin: 12px auto 0; display: block; font-size: 0.85em; padding: 0.4em 1em; }
#reroll.hidden { display: none; }
.hero canvas { width: 48px; height: 48px; image-rendering: pixelated; flex: none; background: #120e1c; border: 2px solid var(--line-dim); }
.hero { display: flex; align-items: center; gap: 10px; text-align: left; }
.hero small { display: block; }
#rename-input { user-select: text; -webkit-user-select: text; touch-action: auto; display: block; width: 100%; margin: 4px 0 12px; padding: 0.5em 0.6em; font: inherit; font-size: max(16px, 1.2em); text-align: center; color: var(--text); background: #120e1c; border: 3px solid var(--line); outline: none; }
#rename-input:focus { border-color: var(--accent); }
.rename-buttons { display: flex; gap: 8px; }
.rename-buttons .pxbtn { flex: 1; margin: 0; }
#rename-cancel { margin-top: 8px; }
#rename { z-index: 70; }

/* オープニング */
#opening { position: absolute; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
#opening .op-stage { position: relative; }
#opening canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; box-sizing: content-box; border: 3px solid #efe4cc; margin: -3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
#opening .op-back { filter: brightness(0.7); visibility: hidden; }
#opening .op-cap { min-height: 3.2em; color: #f3ead8; text-align: center; font-size: 16px; line-height: 1.6; letter-spacing: 0.06em; white-space: pre-line; padding: 0 12px; }
#opening .op-cap.pop { animation: op-pop 0.23s ease-out; }
@keyframes op-pop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
#opening .op-skip { position: absolute; right: calc(10px + var(--safe-r, 0px)); top: calc(10px + var(--safe-t, 0px)); opacity: 0.55; }

/* 真夜中の月のバー */
#moon .panel { text-align: center; }
#moon-icon { width: 96px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: 6px auto; filter: drop-shadow(0 0 8px rgba(255, 242, 192, 0.35)); }
#moon-name { font-size: 1.3em; color: #ff5a6a; margin-bottom: 8px; }
#moon-range { width: 100%; accent-color: #ff5a6a; }
.moon-ends { display: flex; justify-content: space-between; color: var(--sub); font-size: 0.8em; }
#moon-info { display: block; color: var(--sub); margin: 10px 0; }

/* Xでシェア */
.pxbtn.share { background: #111; border-color: #e8e8e8; color: #fff; }

/* 宝箱のスロット */
#chest-reels { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.reel { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #120e1c; border: 3px solid var(--line-dim); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8); }
.reel canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.reel.spin canvas { filter: blur(0.6px) brightness(0.85); transform: translateY(-2px); }
.reel.num { font-size: 24px; color: var(--accent); }
.reel.stop { animation: reel-stop 0.25s ease-out; border-color: var(--accent); }
@keyframes reel-stop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
#chest-banner { min-height: 1.6em; text-align: center; font-size: 1.3em; color: var(--accent); text-shadow: 0 0 10px rgba(255, 210, 74, 0.8), 2px 2px 0 #000; }
#chest-banner.pop { animation: reel-stop 0.35s ease-out; }
#chest .modal-inner.jackpot, #chest .modal-inner.boss { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(255, 210, 74, 0.5); }
#chest .modal-inner.evolve { box-shadow: 0 0 0 3px #fff, 0 0 24px rgba(255, 255, 255, 0.6); }

/* ポーズ画面の「手放す」 */
#pause-build .discard { width: auto; margin: 0; padding: 0.3em 0.6em; font-size: 0.8em; white-space: nowrap; }
#pause-build .discard.sure { background: #8a2a3a; border-color: #ff5a6a; color: #fff; }

/* データの引っ越し */
#transfer h3 { margin: 14px 0 6px; font-size: 1em; font-weight: normal; color: var(--accent); }
#transfer textarea { user-select: text; -webkit-user-select: text; touch-action: auto; display: block; box-sizing: border-box; width: 100%; margin: 4px 0 8px; padding: 0.5em 0.6em; font: inherit; font-size: 16px; line-height: 1.3; word-break: break-all; color: var(--text); background: #120e1c; border: 3px solid var(--line); border-radius: 0; outline: none; resize: none; }
#transfer textarea:focus { border-color: var(--accent); }
#tr-msg { margin: 0 0 8px; min-height: 1.2em; color: #ff8a8a; font-size: 0.9em; }
#trc { z-index: 70; }
#trc p { margin: 0 0 10px; }
#trc .trc-label { margin-bottom: 2px; color: var(--sub); font-size: 0.85em; }
#trc-warn { color: #ff8a8a; }