* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --ui: 1;
  --pix: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --ink: #0b1020;
  --card: rgba(13, 20, 40, .82);
  --card-2: rgba(20, 30, 56, .9);
  --edge: rgba(140, 170, 220, .22);
  --edge-2: rgba(140, 170, 220, .38);
  --text: #eef2fb;
  --dim: #9db0d0;
  --cyan: #6ee7e0;
  --amber: #ffd166;
  --red: #ff5e6c;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #000; color: var(--text);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
button { font-family: inherit; color: var(--text); cursor: pointer; }
.hidden { display: none !important; }
body:not(.playing) .ingame { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }

/* ---------- スロット ---------- */
.slot {
  --s: min(46px, 9vw);
  width: var(--s); height: var(--s); position: relative;
  background: var(--card-2);
  border: 1px solid var(--edge); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.slot img { width: 78%; height: 78%; image-rendering: pixelated; pointer-events: none; }
.slot .cnt { position: absolute; right: 4px; bottom: 1px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
.slot .dur { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; background: rgba(0,0,0,.6); border-radius: 2px; pointer-events: none; }
.slot .dur i { display: block; height: 100%; border-radius: 2px; }

#hotbar {
  position: fixed; left: 50%; transform: translateX(-50%) scale(var(--ui)); transform-origin: bottom center;
  bottom: calc(env(safe-area-inset-bottom) + 8px);
  display: flex; gap: 4px; padding: 5px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  z-index: 5;
}
#hotbar .slot .key { position: absolute; left: 4px; top: 1px; font: 700 10px/1 var(--pix); color: rgba(255,255,255,.55); pointer-events: none; }
body.touch #hotbar .slot .key { display: none; }
#hotbar .slot.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 12px rgba(255,209,102,.35); transform: translateY(-2px); }

#item-name {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 76px);
  font-size: 15px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.8); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5;
}
#item-name.show { opacity: 1; }

/* ---------- 右上のメニューボタン ---------- */
#top-buttons {
  position: fixed; top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px);
  display: flex; gap: 6px; z-index: 6; transform: scale(var(--ui)); transform-origin: top right;
}
.menu-btn {
  position: relative; height: 42px; min-width: 42px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--text);
  background: rgba(8,10,20,.74); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .12s, transform .12s;
}
.menu-btn:hover { border-color: var(--amber); transform: translateY(-1px); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn svg, .tbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn kbd { min-width: 18px; height: 18px; font-size: 10px; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(8,10,20,.9); }
.badge.on { display: flex; animation: badgePop .4s ease-out; }
@keyframes badgePop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (max-width: 1180px) { .menu-btn .ml, .menu-btn kbd { display: none; } .menu-btn { padding: 0; width: 42px; } }
body.touch .menu-btn kbd { display: none; }

/* ---------- タッチ操作 ---------- */
#touch-controls { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#stick {
  position: absolute; left: calc(env(safe-area-inset-left) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px);
  width: 136px; height: 136px; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,.04) 62%, rgba(255,255,255,0) 72%);
  border: 2px solid rgba(255,255,255,.2); transform: scale(var(--ui)); transform-origin: bottom left;
}
#stick::before, #stick::after { content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; opacity: .45; }
#stick::before { left: 8px; border-right-color: #fff; }
#stick::after { right: 8px; border-left-color: #fff; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.6), rgba(150,170,215,.38));
  border: 2px solid rgba(255,255,255,.55); box-shadow: 0 4px 10px rgba(0,0,0,.4); pointer-events: none;
}
#stick.on #stick-knob { background: radial-gradient(circle at 40% 35%, rgba(170,255,250,.75), rgba(110,231,224,.4)); border-color: var(--cyan); }
.pad-right, body.touch #skill-bar {
  position: fixed; right: calc(env(safe-area-inset-right) + 10px); bottom: calc(env(safe-area-inset-bottom) + 10px);
  width: 236px; height: 206px; pointer-events: none; transform: scale(var(--ui)); transform-origin: bottom right;
}
.tbtn {
  position: absolute; pointer-events: auto; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: rgba(8,10,20,.58); border: 2px solid rgba(255,255,255,.26); color: #fff;
  font-size: 18px; font-weight: 900; line-height: 1; touch-action: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tbtn small { font-size: 9px; font-weight: 800; margin-top: 2px; opacity: .85; }
.tbtn.on, .tbtn:active { background: rgba(110,231,224,.3); border-color: var(--cyan); }
#btn-jump { right: 0; bottom: 0; width: 82px; height: 82px; font-size: 24px; }
#btn-attack { right: 92px; bottom: 6px; width: 76px; height: 76px; border-color: rgba(255,94,108,.75); color: #ffd0d4; }
#btn-attack svg { width: 26px; height: 26px; }
#btn-use { right: 176px; bottom: 6px; width: 60px; height: 60px; border-color: rgba(255,209,102,.7); color: var(--amber); }
#btn-use small { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-use.idle { opacity: .45; }
#btn-mode { right: 186px; bottom: 76px; width: 44px; height: 44px; font-size: 11px; }
#btn-mode.place { border-color: var(--cyan); color: var(--cyan); }
#btn-dodge { right: 8px; bottom: 94px; width: 54px; height: 54px; border-color: rgba(110,231,224,.65); }
#btn-special { right: 70px; bottom: 92px; width: 54px; height: 54px; border-color: rgba(255,209,102,.75); color: var(--amber); }
#btn-special.full { box-shadow: 0 0 16px rgba(255,209,102,.8); animation: sgPulse 1s infinite; }
body.flip #stick { left: auto; right: calc(env(safe-area-inset-right) + 16px); transform-origin: bottom right; }
body.flip .pad-right, body.flip.touch #skill-bar { right: auto; left: calc(env(safe-area-inset-left) + 10px); transform: scale(var(--ui)) scaleX(-1); transform-origin: bottom left; }
body.flip .pad-right .tbtn > *, body.flip.touch #skill-bar .sk-slot > * { transform: scaleX(-1); }

@media (max-width: 420px) {
  #stick { width: 116px; height: 116px; left: calc(env(safe-area-inset-left) + 10px); }
  #stick-knob { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
}
@media (orientation: portrait) {
  body.touch #hotbar { bottom: calc(env(safe-area-inset-bottom) + 14px + 214px * var(--ui)); }
  body.touch #item-name { bottom: calc(env(safe-area-inset-bottom) + 70px + 214px * var(--ui)); }
  .slot { --s: min(40px, 9.6vw); }
}
@media (orientation: landscape) and (max-width: 950px) {
  body.touch .slot { --s: min(40px, 5.2vw); }
}

/* ---------- 画面全体のメニュー ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, .55);
}
#title { background: linear-gradient(rgba(5,8,18,.05), rgba(5,8,18,.45)); }
.title-box { text-align: center; padding: 16px; max-width: 760px; width: 100%; max-height: 100%; overflow: auto; }
.title-box h1 {
  font-weight: 900;
  font-size: clamp(38px, 8vw, 68px); margin: 0 0 4px; color: #fff; letter-spacing: 4px;
  text-shadow: 0 0 24px rgba(110, 231, 224, .4), 0 4px 0 rgba(11, 16, 32, .9), 0 8px 20px rgba(0,0,0,.5);
}
.title-box h2 { font-size: 32px; font-weight: 900; margin: 0 0 16px; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.title-box .sub { color: var(--amber); font-size: 17px; font-weight: 700; margin: 10px 0 20px; letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.red { color: var(--red); }
button.big {
  display: block; width: min(320px, 80vw); margin: 10px auto; padding: 12px; font-size: 18px; font-weight: 800; letter-spacing: 1px;
  background: var(--card-2); border: 1px solid var(--edge-2); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
button.big:active { transform: translateY(2px); border-color: var(--cyan); }
button.big:disabled { opacity: .4; }
.help { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; line-height: 1.8; }
.help-col { background: var(--card); padding: 10px 16px; border: 1px solid var(--edge); border-radius: 12px; text-align: left; }
.help-col b { color: var(--cyan); }

/* ---------- 持ち物・クラフト ---------- */
.panel {
  width: min(900px, 96vw); height: min(560px, 92vh);
  min-width: 0; max-width: 96vw;
  background: var(--card); color: var(--text);
  border: 1px solid var(--edge-2); border-radius: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; padding: 14px;
}
.panel.inv-panel { width: min(1180px, 97vw); height: min(780px, 95vh); max-width: 97vw; }
.panel-head { display: flex; justify-content: space-between; align-items: center; font-size: 19px; font-weight: 800; margin-bottom: 8px; border-bottom: 1px solid var(--edge); padding-bottom: 8px; }
.close { width: 40px; height: 36px; font-size: 20px; background: rgba(255,94,108,.2); border: 1px solid rgba(255,94,108,.4); border-radius: 10px; color: var(--red); }
.inv-body { flex: 1; display: flex; gap: 14px; min-height: 0; min-width: 0; }
.inv-left {
  flex: 0 0 min(390px, 38%); min-height: 0; overflow-y: auto;
  background: rgba(8, 13, 28, .45); border: 1px solid var(--edge); border-radius: 12px; padding: 10px;
}
.inv-right { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.inv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.label { font-size: 11px; margin-bottom: 5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.inv-section-head .label { margin: 0; }
.inv-count { font-size: 11px; color: var(--dim); }
#inv-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
#inv-grid .slot { width: 100%; height: auto; aspect-ratio: 1; --s: 100%; }
#inv-grid .slot.hot { border-color: var(--edge-2); }
#inv-grid .slot.pick { border-color: var(--amber); box-shadow: 0 0 10px rgba(255,209,102,.4); }
.inv-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 9px; }
.inv-stat-grid div { background: var(--card-2); border: 1px solid var(--edge); border-radius: 8px; padding: 4px 6px; }
.inv-stat-grid span { display: block; font-size: 9.5px; color: var(--dim); }
.inv-stat-grid b { display: block; font-size: 12px; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-meta, .inv-life { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; font-size: 10.5px; color: var(--dim); line-height: 1.5; }
.inv-life span { color: var(--cyan); font-weight: 700; }
.inv-link { margin-top: 7px; padding: 5px 8px; font-size: 11px; font-weight: 700; border-radius: 8px; background: rgba(110,231,224,.14); border: 1px solid rgba(110,231,224,.4); color: var(--cyan); }
#recipes { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; min-height: 0; }
#recipes::-webkit-scrollbar, .inv-left::-webkit-scrollbar { width: 6px; }
#recipes::-webkit-scrollbar-thumb, .inv-left::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 3px; }
.recipe-group {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 8px; padding: 5px 2px 4px;
  background: linear-gradient(var(--card) 70%, rgba(13,20,40,0)); font-size: 11px; color: var(--dim);
}
.recipe-group b { font-size: 12px; color: var(--cyan); letter-spacing: .5px; }
.recipe-group span { margin-left: auto; font-size: 10px; }
.recipe {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 9px; align-items: center;
  background: var(--card-2); border: 1px solid var(--edge); border-radius: 10px; padding: 6px 8px;
}
.recipe.craftable { border-color: rgba(123, 226, 160, .32); }
.recipe.off { opacity: .55; }
.recipe > .slot { grid-row: 1 / 3; --s: 38px; width: 38px; height: 38px; }
.recipe .rname { grid-column: 2; font-size: 13px; font-weight: 700; min-width: 0; }
.recipe .rname b { display: block; font-size: 13px; }
.recipe .rname small { display: block; font-size: 10.5px; font-weight: 400; color: var(--dim); }
.recipe-badges { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.station-badge { display: inline-block; padding: 1px 5px; border-radius: 5px; font-size: 9.5px; font-weight: 700; color: var(--dim); background: rgba(140,170,220,.1); border: 1px solid var(--edge); }
.station-badge.table { color: var(--amber); border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.08); }
.station-badge.star { color: var(--amber); }
.recipe .req { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.recipe .ing { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 5px; background: rgba(140,170,220,.08); font-size: 10px; color: var(--dim); white-space: nowrap; }
.recipe .ing img { width: 16px; height: 16px; image-rendering: pixelated; }
.recipe .ing em { font-style: normal; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.recipe .ing b { font-size: 10px; color: #9de2a8; }
.recipe .ing.lack { background: rgba(255,94,108,.08); }
.recipe .ing.lack b { color: var(--red); }
.recipe button { grid-column: 3; grid-row: 1; padding: 6px 11px; font-size: 12px; font-weight: 700; background: rgba(110,231,224,.18); border: 1px solid rgba(110,231,224,.45); border-radius: 9px; color: var(--cyan); white-space: nowrap; }
.recipe button:disabled { background: var(--card-2); border-color: var(--edge); color: var(--dim); }

.inv-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.inv-tabs button, .tabs button {
  padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--edge); color: var(--dim);
}
.tabs button.on, .inv-tabs button.on { color: var(--amber); border-color: var(--amber); background: rgba(255,209,102,.12); }
.inv-tabs .tab-badge { margin-left: 4px; font-size: 9px; color: var(--dim); }
.inv-tabs .tab-badge.zero { color: var(--red); opacity: .8; }
.inv-tabs button.on .tab-badge { color: var(--amber); }
.craft-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 5px; min-width: 0; }
.craft-tools input[type="search"], .craft-tools select {
  min-width: 0; height: 30px; padding: 4px 8px; font-size: 12px; color: var(--text);
  background: var(--card-2); border: 1px solid var(--edge); border-radius: 8px; outline: none;
}
.craft-tools input[type="search"] { flex: 1 1 150px; }
.craft-tools input[type="search"]:focus, .craft-tools select:focus { border-color: var(--cyan); }
.craft-tools .chk { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); white-space: nowrap; flex: 0 1 auto; }
.craft-tools .chk input { accent-color: var(--cyan); }
.table-status { font-size: 10.5px; color: var(--dim); margin-bottom: 5px; }
.table-status.ok { color: #9de2a8; }
#inv-stats { font-size: 11px; color: var(--dim); margin-bottom: 0; line-height: 1.5; }

@media (orientation: portrait) {
  .inv-body { flex-direction: column; overflow-y: auto; }
  .inv-left { flex: 0 0 auto; width: 100%; overflow: visible; }
  .inv-right { flex: 1 1 auto; min-height: 260px; }
}
@media (max-width: 720px) {
  .recipe { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .recipe .req { grid-column: 1 / -1; }
  .recipe .rname { grid-column: 2; }
  .recipe button { grid-column: 3; }
  .inv-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- お知らせ ---------- */
#toast {
  position: fixed; top: calc(env(safe-area-inset-top) + 74px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 4px; align-items: center; z-index: 20; pointer-events: none;
}
#toast div {
  background: var(--card); border: 1px solid var(--edge-2); border-radius: 10px; color: var(--amber); padding: 6px 18px; font-size: 15px; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: toastIn .25s ease-out;
}
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===================== 拡張UI（P1〜P11） ===================== */
#context-hint {
  position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: none; align-items: center; gap: 6px; padding: 4px 10px;
  transform: translate(-50%, calc(-100% - 8px));
  border-radius: 8px; background: rgba(8,10,20,.85); border: 1px solid rgba(255,209,102,.55);
  color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
#context-hint.show { display: flex; animation: hintIn .15s ease-out; }
#context-hint kbd { min-width: 18px; height: 18px; font-size: 10px; }
#context-hint::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(255,209,102,.55); }
@keyframes hintIn { from { opacity: 0; margin-top: 4px; } to { opacity: 1; margin-top: 0; } }
.panel.wide { width: min(1080px, 97vw); height: min(720px, 94vh); }
.panel-head span { letter-spacing: 1px; }
.tabs, .inv-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tabs button, .inv-tabs button {
  padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--edge); color: var(--dim);
}
.tabs button.on, .inv-tabs button.on { color: var(--amber); border-color: var(--amber); background: rgba(255,209,102,.12); }
#inv-stats { font-size: 11px; color: var(--dim); margin-bottom: 5px; line-height: 1.5; }
#dialog-text { flex: 1; overflow-y: auto; font-size: 16px; line-height: 1.9; padding: 10px 4px; white-space: pre-wrap; }
#dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--edge); }
#dialog-actions button, .list-row button, .npc-card button, .animal-card button, .shop-row button, .skill-node button {
  padding: 7px 12px; font-size: 13px; font-weight: 700; border-radius: 9px;
  background: rgba(110,231,224,.16); border: 1px solid rgba(110,231,224,.42); color: var(--cyan);
}
#dialog-actions button:disabled, .list-row button:disabled, .skill-node button:disabled { opacity: .35; }
#journal-body, #skills-body, #shop-body, #map-body, #chest-body, #festival-body, #uipanel-body {
  flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 4px;
}
.list-row, .shop-row, .skill-node, .npc-card, .animal-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--card-2); border: 1px solid var(--edge); border-radius: 10px;
}
.list-row .name, .shop-row .name, .skill-node .name { flex: 1; font-size: 14px; font-weight: 700; }
.list-row .sub, .shop-row .sub, .skill-node .sub { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }
.list-row .meta, .shop-row .meta { font-size: 12px; color: var(--dim); text-align: right; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.journal-cell { background: var(--card-2); border: 1px solid var(--edge); border-radius: 9px; padding: 7px 9px; font-size: 12px; }
.journal-cell b { display: block; font-size: 13px; color: var(--amber); }
.journal-cell.unknown { opacity: .4; }
.skill-node.locked { opacity: .5; }
.skill-node.max { border-color: rgba(255,209,102,.55); }
#skills-summary { font-size: 13px; color: var(--amber); margin-bottom: 8px; }
#skills .panel { width: min(1140px, 97vw); height: min(790px, 95vh); }
.skill-summary-main { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.skill-sp {
  flex: 0 0 auto; min-width: 84px; padding: 7px 12px; border-radius: 10px;
  background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.35);
  display: flex; flex-direction: column; justify-content: center;
}
.skill-sp span { font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.skill-sp b { font-size: 30px; line-height: 1; color: var(--amber); }
.skill-sp small { font-size: 9.5px; color: var(--dim); }
.skill-player { flex: 1 1 220px; min-width: 180px; padding: 7px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--edge); }
.skill-player b { font-size: 13px; }
.skill-player small { display: block; font-size: 10px; color: var(--dim); margin-top: 1px; }
.skill-xp { height: 5px; margin-top: 5px; background: rgba(140,170,220,.15); border-radius: 3px; overflow: hidden; }
.skill-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--amber)); border-radius: 3px; }
.skill-life { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 4px; align-content: center; }
.skill-life span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; font-size: 10px; color: var(--dim); background: rgba(140,170,220,.08); border: 1px solid var(--edge); }
.skill-life b { color: var(--cyan); font-size: 11px; }
.skill-branch {
  border: 1px solid var(--edge); border-left: 3px solid var(--branch, var(--cyan)); border-radius: 12px;
  background: rgba(8, 13, 28, .35); padding: 9px 10px;
}
.skill-branch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.skill-branch-icon {
  width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--branch, var(--cyan)); background: rgba(140,170,220,.08);
  border: 1px solid var(--branch, var(--edge)); font-weight: 900; font-size: 14px;
}
.skill-branch-title b { display: block; font-size: 13px; color: var(--branch, var(--text)); }
.skill-branch-title small { display: block; font-size: 10px; color: var(--dim); }
.skill-branch-progress { margin-left: auto; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.skill-path { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 3px; }
.skill-path { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 2px 2px 4px; }
.skill-col { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.skill-card {
  width: 128px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center;
  padding: 6px 7px; text-align: left; color: var(--text);
  background: var(--card-2); border: 1px solid var(--edge); border-radius: 10px;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.skill-card:hover { transform: translateY(-1px); border-color: var(--edge-2); }
.skill-card .skill-icon { grid-row: 1 / 3; }
.skill-node-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-node-lv { font-size: 10px; color: var(--dim); }
.skill-card.ready { border-color: rgba(110,231,224,.55); box-shadow: 0 0 10px rgba(110,231,224,.18); }
.skill-card.ready .skill-node-lv { color: var(--cyan); }
.skill-card.max { border-color: rgba(255,209,102,.6); background: rgba(255,209,102,.07); }
.skill-card.max .skill-icon { background: var(--branch, var(--cyan)); color: #10131f; }
.skill-card.locked { opacity: .45; }
.skill-card.active .skill-icon { border-radius: 50%; }
.skill-card.ougi { border-style: double; border-width: 3px; }
.skill-card.sel { border-color: var(--branch, var(--cyan)); box-shadow: 0 0 0 1px var(--branch, var(--cyan)), 0 0 14px rgba(255,255,255,.12); }
.skill-icon {
  width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--branch, var(--cyan)); background: rgba(140,170,220,.08);
  border: 1px solid var(--branch, var(--edge)); font-size: 14px; font-weight: 900;
}
.skill-pips { display: flex; gap: 3px; align-items: center; }
.skill-pips i { flex: 0 0 22px; height: 6px; border-radius: 3px; background: rgba(140,170,220,.16); }
.skill-pips i.on { background: var(--branch, var(--cyan)); }
.skill-pips span { margin-left: 6px; font-size: 11px; color: var(--dim); }
.skill-req { font-size: 10.5px; color: var(--dim); }
.skill-req.ok { color: #9de2a8; }
.skill-link { flex: 0 0 18px; width: 18px; align-self: center; height: 2px; background: rgba(140,170,220,.28); position: relative; }
.skill-link::after { content: ''; position: absolute; right: 0; top: -4px; border: 4px solid transparent; border-left-color: rgba(140,170,220,.55); }
.skill-link.on { background: var(--branch, var(--cyan)); }
.skill-link.on::after { border-left-color: var(--branch, var(--cyan)); }
.skill-hint { font-size: 10.5px; color: var(--dim); padding: 2px 4px; }
.skill-detail {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--branch, var(--edge-2));
  background: linear-gradient(135deg, rgba(20,30,56,.97), rgba(13,20,40,.97));
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.skill-detail-icon {
  width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #10131f; background: var(--branch, var(--cyan));
}
.skill-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.skill-detail-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.skill-detail-title b { font-size: 16px; }
.skill-detail-title small { font-size: 11px; color: var(--dim); }
.skill-detail p { margin: 0; font-size: 12.5px; color: var(--text); }
.skill-kind { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: var(--dim); border: 1px solid var(--edge-2); }
.skill-kind.active { color: #10131f; background: var(--cyan); border-color: var(--cyan); }
.skill-kind.ougi { color: #10131f; background: var(--amber); border-color: var(--amber); }
.skill-param { font-size: 11px; color: var(--amber); }
.skill-param.next { color: var(--cyan); }
.skill-learn {
  align-self: center; padding: 10px 16px; font-size: 13px; font-weight: 800; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(110,231,224,.35), rgba(110,231,224,.15)); border: 1px solid rgba(110,231,224,.6); color: #e8fffd;
}
.skill-learn:disabled { opacity: .35; }
.skill-assign { grid-column: 2 / 4; display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--dim); }
.skill-assign button { min-width: 34px; padding: 4px 8px; font-size: 12px; font-weight: 800; border-radius: 7px; background: rgba(140,170,220,.1); border: 1px solid var(--edge-2); }
.skill-assign button.on { background: var(--amber); color: #10131f; border-color: var(--amber); }
.skill-assign button:disabled { opacity: .3; }
.active-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.active-slot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); border: 1px solid rgba(255,209,102,.4); min-width: 0; }
.active-slot.empty { border-style: dashed; border-color: var(--edge-2); color: var(--dim); }
.active-slot b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.active-slot button { padding: 3px 8px; font-size: 11px; border-radius: 6px; background: rgba(255,94,108,.15); border: 1px solid rgba(255,94,108,.4); color: var(--red); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font: 800 11px/1 inherit; color: #10131f; background: #e8ecf8; box-shadow: 0 2px 0 #8a94b0; }
.active-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--edge); border-left: 3px solid var(--branch); background: rgba(8,13,28,.35); }
.active-row.locked { opacity: .55; }
.active-row .skill-assign { grid-column: auto; }
.active-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.active-info b { font-size: 13px; }
.active-info b small { font-size: 10.5px; color: var(--dim); font-weight: 400; }
.active-info small { font-size: 11px; color: var(--dim); }
.active-info small.param { color: var(--amber); }
@media (max-width: 780px) {
  .skill-card { width: 112px; }
  .skill-detail { grid-template-columns: 42px 1fr; }
  .skill-detail-icon { width: 42px; height: 42px; font-size: 20px; }
  .skill-learn { grid-column: 1 / 3; }
  .skill-assign { grid-column: 1 / 3; }
  .active-slots { grid-template-columns: 1fr; }
  .active-row { grid-template-columns: 30px 1fr; }
  .active-row .skill-assign { grid-column: 1 / 3; }
}

/* ---------- 技スロット ---------- */
#skill-bar {
  position: fixed; z-index: 5; display: flex; gap: 6px;
  bottom: calc(env(safe-area-inset-bottom) + 13px);
  left: calc(50% + 4.5 * min(46px, 9vw) + 34px);
}
.sk-slot {
  --cd: 0; position: relative; width: 50px; height: 50px; padding: 0;
  border-radius: 12px; border: 1px solid rgba(255,209,102,.55);
  background: radial-gradient(circle at 50% 35%, rgba(60,70,110,.95), rgba(13,20,40,.95));
  box-shadow: 0 4px 12px rgba(0,0,0,.4); overflow: hidden;
}
.sk-slot .sk-ico { font-size: 21px; font-weight: 900; color: var(--amber); text-shadow: 0 0 8px rgba(255,209,102,.45); }
.sk-slot .sk-key { position: absolute; left: 3px; top: 2px; font-size: 10px; font-weight: 800; color: var(--dim); }
.sk-slot .sk-cd { position: absolute; inset: 0; background: conic-gradient(rgba(5,8,18,.78) calc(var(--cd) * 360deg), transparent 0); pointer-events: none; }
.sk-slot.empty { border-style: dashed; border-color: var(--edge-2); opacity: .55; }
.sk-slot.empty .sk-ico { color: var(--dim); text-shadow: none; }
.sk-slot.low .sk-ico { color: var(--red); }
.sk-slot.ready-flash { animation: skReady .45s ease-out; }
@keyframes skReady { 0% { box-shadow: 0 0 0 0 rgba(255,209,102,.9); } 100% { box-shadow: 0 0 0 12px rgba(255,209,102,0); } }
body.touch #skill-bar { left: auto; display: block; z-index: 5; }
body.touch .sk-slot { position: absolute; width: 46px; height: 46px; border-radius: 50%; pointer-events: auto; }
body.touch .sk-slot .sk-ico { font-size: 18px; }
body.touch .sk-slot[data-slot="0"] { right: 184px; bottom: 128px; }
body.touch .sk-slot[data-slot="1"] { right: 130px; bottom: 148px; }
body.touch .sk-slot[data-slot="2"] { right: 70px; bottom: 154px; }
body.touch .sk-slot .sk-key { display: none; }
@media (max-width: 900px) { body:not(.touch) #skill-bar { left: auto; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 72px); } }

.npc-card { flex-direction: column; align-items: flex-start; }
.npc-card .npc-head { display: flex; width: 100%; gap: 8px; align-items: center; }
.npc-card .hearts { margin-left: auto; color: #ff7a8a; letter-spacing: 2px; }
.npc-card .acts { display: flex; gap: 6px; margin-top: 6px; }
.chest-grid { display: grid; grid-template-columns: repeat(9, auto); gap: 4px; margin: 6px 0 12px; }
.chest-grid .slot { --s: min(42px, 8vw); }
.ending-eval { font-size: 15px; line-height: 2; }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.cyan { color: var(--cyan); }
.red { color: var(--red); }
.small { font-size: 12px; }
.hr { height: 1px; background: var(--edge); margin: 6px 0; }
@media (max-width: 640px) {
  .panel.wide { width: 98vw; height: 95vh; }
  #dialog-text { font-size: 14px; }
  .tabs button, .inv-tabs button { padding: 5px 8px; font-size: 11px; }
}


/* ===================== HUD（P14） ===================== */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: var(--pix); }
#hud-left {
  position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px);
  display: flex; flex-direction: column; gap: 6px; transform: scale(var(--ui)); transform-origin: top left;
}
#hud-player { display: flex; gap: 8px; align-items: flex-start; }
.hud-lv {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #44558a, #141a30); border: 2px solid var(--amber);
  box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 0 8px rgba(255,209,102,.25);
}
.hud-lv small { font-size: 9px; color: var(--amber); line-height: 1; }
.hud-lv b { font-size: 21px; line-height: 1.05; color: #fff; text-shadow: 0 2px 0 #000; }
.hud-bars { display: flex; flex-direction: column; gap: 3px; width: 236px; }
.hud-bar { position: relative; height: 15px; border-radius: 4px; background: rgba(8,10,20,.74); border: 1px solid rgba(255,255,255,.2); overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.hud-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .15s; }
.hud-bar.hp { height: 19px; }
.hud-bar.hp .fill { background: linear-gradient(180deg, #ff9a9a, #e4404e 50%, #a81e2c); }
.hud-bar.hp .lag { background: #fff0b8; transition: none; }
.hud-bar.st .fill { background: linear-gradient(180deg, #b4f4aa, #44b552); }
.hud-bar.mp { height: 12px; }
.hud-bar.mp .fill { background: linear-gradient(180deg, #b8c8ff, #6a6af0 55%, #4a3ab8); }
.hud-bar.mp span { font-size: 9.5px; }
.hud-bar.en .fill { background: linear-gradient(180deg, #b0e0ff, #3a86e0); }
.hud-bar.sg { height: 11px; }
.hud-bar.sg .fill { background: linear-gradient(90deg, #ff8a2a, #ffd166); }
.hud-bar.sg.full { border-color: var(--amber); animation: sgPulse 1s infinite; }
@keyframes sgPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,209,102,0); } 50% { box-shadow: 0 0 12px rgba(255,209,102,.85); } }
.hud-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.hud-bar span em { font-style: normal; font-size: 9.5px; opacity: .85; }
.hud-bar span b { font-weight: 400; }
.hud-bar.sg span { font-size: 9px; }
.hud-sub { display: flex; gap: 3px; }
.hud-sub .hud-bar { flex: 1; }
.hud-xp { height: 4px; border-radius: 2px; background: rgba(8,10,20,.65); overflow: hidden; }
.hud-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #c8f8ff); transition: width .3s; }
#hud-player.danger .hud-bar.hp { animation: danger .7s infinite; }
@keyframes danger { 50% { border-color: #ff5e6c; box-shadow: 0 0 10px rgba(255,94,108,.8); } }
#hud-effects { display: flex; flex-wrap: wrap; gap: 3px; min-height: 0; }
.fx { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; font-size: 10px; background: rgba(8,10,20,.78); border: 1px solid var(--c, rgba(255,255,255,.3)); color: var(--c, #fff); }
.fx.bad { animation: danger 1s infinite; }
#hud-clock {
  position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%) scale(var(--ui)); transform-origin: top center;
  display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 99px;
  background: rgba(8,10,20,.74); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-size: 13px; white-space: nowrap; color: #e8ecf8;
}
#hud-clock .sep { width: 1px; height: 14px; background: rgba(255,255,255,.22); }
#hud-time { font-size: 16px; color: #fff; font-weight: 400; letter-spacing: 1px; }
#hud-date { color: var(--season, #9fe8ff); }
#hud-gold { color: var(--amber); }
#hud-right {
  position: absolute; top: calc(env(safe-area-inset-top) + 58px); right: calc(env(safe-area-inset-right) + 8px);
  width: 214px; display: flex; flex-direction: column; gap: 6px; transform: scale(var(--ui)); transform-origin: top right;
}
#minimap-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: #070a14; box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: auto; cursor: pointer; }
#minimap { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; }
#hud-zone { position: absolute; left: 6px; bottom: 3px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#tracker { padding: 7px 10px; border-radius: 10px; background: rgba(8,10,20,.7); border: 1px solid rgba(255,255,255,.14); pointer-events: auto; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.tr-head { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--cyan); cursor: pointer; }
.tr-fold { transition: transform .15s; }
#tracker.collapsed .tr-fold { transform: rotate(-90deg); }
#tracker.collapsed .tr-body { display: none; }
.tr-goal { margin-top: 4px; font-size: 12px; line-height: 1.45; color: #fff; }
.tr-goal::before { content: '◆ '; color: var(--amber); }
.tr-bar { height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.tr-bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .3s; }
.tr-q { margin-top: 4px; font-size: 11px; line-height: 1.35; color: #ffd8a8; }
.tr-q b { color: var(--amber); font-weight: 400; }
#boss-bar { position: fixed; top: calc(env(safe-area-inset-top) + 52px); left: 50%; width: min(520px, 56vw); transform: translateX(-50%) scale(var(--ui)); transform-origin: top center; text-align: center; animation: hintIn .3s ease-out; }
#boss-bar b { font-family: 'Zen Old Mincho', serif; font-size: 16px; letter-spacing: 3px; color: #ffb4b4; text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,80,80,.6); }
#boss-bar.elite b { color: var(--amber); text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,209,102,.6); }
.boss-hp { position: relative; height: 12px; margin-top: 3px; border-radius: 3px; background: rgba(8,10,20,.85); border: 1px solid rgba(255,120,120,.7); overflow: hidden; }
#boss-bar.elite .boss-hp { border-color: rgba(255,209,102,.8); }
.boss-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.boss-hp .fill { background: linear-gradient(180deg, #ff8a8a, #c42a3a); transition: width .15s; }
.boss-hp .lag { background: #ffe0a0; }

@media (max-width: 860px) {
  #hud-clock { position: absolute; top: calc(env(safe-area-inset-top) + 8px + 70px * var(--ui)); left: calc(env(safe-area-inset-left) + 8px); transform: scale(var(--ui)); transform-origin: top left; padding: 3px 10px; font-size: 11px; gap: 6px; }
  #hud-time { font-size: 13px; }
  #boss-bar { top: calc(env(safe-area-inset-top) + 112px * var(--ui)); left: calc(env(safe-area-inset-left) + 8px); width: 52vw; transform: scale(var(--ui)); transform-origin: top left; }
  #boss-bar b { font-size: 13px; letter-spacing: 1px; }
}
@media (max-width: 560px) {
  .hud-lv { width: 42px; height: 42px; flex-basis: 42px; }
  .hud-lv b { font-size: 17px; }
  .hud-bars { width: 38vw; }
  .hud-sub { flex-direction: column; gap: 3px; }
  .hud-sub .hud-bar { flex: none; height: 12px; }
  .hud-bar span { font-size: 9.5px; }
  #hud-clock { top: calc(env(safe-area-inset-top) + 8px + 92px * var(--ui)); }
  #hud-effects:empty + * { margin: 0; }
  #boss-bar { top: calc(env(safe-area-inset-top) + 126px * var(--ui)); }
  .hud-bar span em { display: none; }
  #top-buttons { gap: 4px; }
  #btn-map { display: none; }
  .menu-btn { width: 38px; height: 38px; min-width: 38px; }
  #hud-right { width: 40vw; top: calc(env(safe-area-inset-top) + 52px); }
  .tr-goal { font-size: 11px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #hud-right { width: 170px; }
  #tracker .tr-body { display: none; }
}

/* ---------- 通知 ---------- */
#toast div { font-family: var(--pix); font-weight: 400; color: #fff; border-color: rgba(255,209,102,.4); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
body:not(.playing) #banner { display: none; }
#banner { position: fixed; left: 0; right: 0; top: 24%; z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: center; opacity: 0; }
#banner.show { animation: bannerIn 2.6s ease-out forwards; }
#banner b {
  font-family: 'Zen Old Mincho', serif; font-size: clamp(26px, 5.5vw, 46px); letter-spacing: 6px; color: #fff; font-weight: 700;
  padding: 6px 60px; text-shadow: 0 0 18px var(--bc, rgba(110,231,224,.7)), 0 3px 0 rgba(0,0,0,.85);
  background: linear-gradient(90deg, transparent, rgba(8,10,20,.78) 22%, rgba(8,10,20,.78) 78%, transparent);
}
#banner small { margin-top: 6px; font-family: var(--pix); font-size: 15px; color: var(--bc, var(--cyan)); text-shadow: 0 2px 0 #000; }
#banner.level { --bc: #ffd166; }
#banner.boss { --bc: #ff6a6a; }
#banner.chapter { --bc: #8fd8ff; }
#banner.achieve { --bc: #c8e86a; }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.35); } 9% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
#pickup-log { position: fixed; left: calc(env(safe-area-inset-left) + 10px); bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 6; display: flex; flex-direction: column; gap: 3px; pointer-events: none; font-family: var(--pix); transform: scale(var(--ui)); transform-origin: bottom left; }
body.touch #pickup-log { bottom: auto; top: 46%; }
.pk { display: flex; align-items: center; gap: 6px; padding: 2px 14px 2px 3px; border-radius: 7px; font-size: 13px; color: #fff; text-shadow: 0 1px 0 #000; background: linear-gradient(90deg, rgba(8,10,20,.82), rgba(8,10,20,0)); animation: pkIn .2s ease-out; transition: opacity .5s, transform .5s; }
.pk img { width: 22px; height: 22px; image-rendering: pixelated; }
.pk b { color: var(--amber); font-weight: 400; }
.pk.bump { animation: pkBump .25s ease-out; }
.pk.out { opacity: 0; transform: translateX(-12px); }
@keyframes pkIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes pkBump { 50% { transform: scale(1.08); } }
#fade { position: fixed; inset: 0; z-index: 25; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; }
#fade.on { opacity: 1; }

/* ---------- メニュー共通 ---------- */
.overlay:not(.hidden) > .panel, .overlay:not(.hidden) > .title-box { animation: panelIn .18s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.menu-nav button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 800; color: var(--dim); background: transparent; border: 1px solid transparent;
}
.menu-nav button:hover { color: var(--text); background: rgba(140,170,220,.08); }
.menu-nav button.on { color: var(--amber); background: rgba(255,209,102,.1); border-color: rgba(255,209,102,.45); }
.menu-nav kbd { min-width: 18px; height: 18px; font-size: 10px; }
body.touch .menu-nav kbd { display: none; }
@media (max-width: 640px) { .menu-nav button { padding: 5px 8px; font-size: 12px; } .menu-nav kbd { display: none; } }
.head-btn { height: 34px; padding: 0 12px; margin-right: 6px; font-size: 12px; font-weight: 800; border-radius: 9px; background: rgba(110,231,224,.12); border: 1px solid rgba(110,231,224,.4); color: var(--cyan); }
.slot.r1 { border-color: rgba(120,220,140,.55); }
.slot.r2 { border-color: rgba(110,170,255,.7); box-shadow: inset 0 0 8px rgba(110,170,255,.25); }
.slot.r3 { border-color: rgba(220,140,255,.8); box-shadow: inset 0 0 10px rgba(220,140,255,.3); }
#tooltip {
  position: fixed; z-index: 40; pointer-events: none; width: 230px; padding: 9px 11px; border-radius: 10px;
  background: rgba(10,14,28,.96); border: 1px solid var(--rc, var(--edge-2)); box-shadow: 0 8px 22px rgba(0,0,0,.55);
  font-size: 11.5px; line-height: 1.5; color: var(--text);
}
#tooltip .tt-name { font-size: 14px; font-weight: 800; color: var(--rc, #fff); }
#tooltip .tt-cat { font-size: 10.5px; color: var(--dim); margin-bottom: 4px; }
#tooltip .tt-row { display: flex; justify-content: space-between; gap: 8px; }
#tooltip .tt-row b { color: var(--amber); font-weight: 700; }
#tooltip .tt-desc { margin-top: 4px; color: #cfe; font-size: 11px; }
#tooltip.r1 { --rc: #8ee8a0; } #tooltip.r2 { --rc: #8ab8ff; } #tooltip.r3 { --rc: #e0a0ff; }

/* ---------- タイトル・設定 ---------- */
.logo { position: relative; display: inline-block; }
.logo-sub { display: block; font-family: var(--pix); font-size: 14px; letter-spacing: 10px; color: var(--cyan); text-shadow: 0 2px 0 #000; }
.title-box h1 {
  font-family: 'Zen Old Mincho', serif;
  background: linear-gradient(100deg, #fff 30%, #ffe6a0 45%, #fff 60%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 4s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(11,16,32,.9)) drop-shadow(0 0 18px rgba(110,231,224,.35));
}
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.title-menu { display: flex; flex-direction: column; align-items: center; }
button.big { transition: transform .12s, border-color .12s, background .12s; }
button.big:hover, button.big:focus-visible { outline: none; border-color: var(--amber); background: linear-gradient(90deg, rgba(255,209,102,.18), rgba(20,30,56,.9)); transform: translateX(4px); }
button.big:focus-visible::before, button.big:hover::before { content: '▶ '; color: var(--amber); }
.settings-panel { width: min(560px, 94vw); height: auto; max-height: 92vh; }
#settings { z-index: 30; }
#settings-body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--edge); }
.set-row label { font-size: 14px; font-weight: 800; }
.set-row small { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }
.set-row input[type=range] { width: 180px; accent-color: var(--amber); }
.seg { display: flex; border: 1px solid var(--edge-2); border-radius: 9px; overflow: hidden; }
.seg button { padding: 6px 14px; font-size: 13px; font-weight: 800; background: transparent; border: 0; color: var(--dim); }
.seg button + button { border-left: 1px solid var(--edge-2); }
.seg button.on { background: var(--amber); color: #10131f; }
.keys-help { font-size: 12px; line-height: 1.9; color: var(--dim); padding: 8px 12px; }
.keys-help kbd { margin: 0 2px; }

/* ---------- チュートリアル（P15） ---------- */
#coach {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 104px); z-index: 7;
  transform: translateX(-50%) scale(var(--ui)); transform-origin: bottom center;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; width: max-content; max-width: calc(100vw - 24px);
  border-radius: 14px; background: linear-gradient(135deg, rgba(30,40,76,.95), rgba(10,14,28,.95));
  border: 1px solid rgba(255,209,102,.6); box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,209,102,.2);
  font-family: var(--pix); font-size: 14px; color: #fff;
}
#coach.pop { animation: coachIn .35s ease-out; }
#coach.hidden { display: none; }
@keyframes coachIn { 0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(var(--ui)); } 100% { opacity: 1; transform: translateX(-50%) scale(var(--ui)); } }
.coach-step { flex: 0 0 auto; padding: 2px 7px; border-radius: 99px; font-size: 11px; color: #10131f; background: var(--amber); }
.coach-text { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.coach-text kbd { margin-right: 2px; }
.coach-skip { flex: 0 0 auto; padding: 5px 10px; font-size: 11px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: var(--dim); }
@media (orientation: portrait) { body.touch #coach { bottom: calc(env(safe-area-inset-bottom) + 70px + 214px * var(--ui)); font-size: 12px; } }

/* ---------- 生活と経済の画面（P22） ---------- */
.ui-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 2px 10px; font-size: 12.5px; color: var(--dim); }
.ui-head b { color: var(--amber); font-size: 14px; }
.ui-sec { margin: 10px 0 6px; font-size: 12px; font-weight: 800; color: var(--cyan); letter-spacing: 1px; }
.shop-row .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; min-width: 64px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--edge); font-size: 11px; }
.swatch i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.swatch.on { border-color: var(--amber); }
.swatch small { color: var(--dim); font-size: 9.5px; }