:root {
  --paper: #f2e9d8;
  --paper-deep: #e6dac2;
  --ink: #23201c;
  --ink-soft: #5a5348;
  --wave: #2f5d73;
  --vermilion: #a8402d;
  --line: #c9b99a;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--ink);
  font-family: var(--gothic); font-size: 16px; line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }

#town {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none;
}

.hud {
  position: fixed; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) 8px calc(env(safe-area-inset-left) + 12px);
  pointer-events: none;
}
.hud h1 {
  margin: 0; padding: 2px 10px; font: 700 15px/1.6 var(--mincho); letter-spacing: .08em;
  color: var(--paper); background: rgba(35, 32, 28, .78);
}
.hud-btn, .live-badge { pointer-events: auto; }
.hud-btn {
  margin-left: auto; min-width: 64px; min-height: 44px; padding: 0 14px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink);
  font-family: var(--mincho); font-weight: 700;
}
.live-badge { padding: 2px 8px; font-size: 13px; font-weight: 700; color: #fff; background: var(--vermilion); }

.controls {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);
  pointer-events: none;
}
.is-locked .controls { display: none; }
.stick {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  background: rgba(35, 32, 28, .34); border: 2px solid rgba(242, 233, 216, .6);
  pointer-events: auto; touch-action: none;
}
.stick-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(242, 233, 216, .92); border: 2px solid var(--ink);
}
.act-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 58%; }
.near-name {
  margin: 0; padding: 0 8px; font: 700 13px/1.7 var(--mincho); color: var(--paper);
  background: rgba(35, 32, 28, .8);
}
.near-name:empty { display: none; }
.act {
  width: 84px; height: 84px; border-radius: 50%;
  color: var(--paper); background: var(--vermilion); border: 3px solid var(--paper);
  font: 700 20px/1 var(--mincho); pointer-events: auto; touch-action: manipulation;
}
.act:disabled { background: rgba(35, 32, 28, .5); border-color: rgba(242, 233, 216, .5); }

@media (hover: hover) and (pointer: fine) {
  .stick { display: none; }
  .controls { justify-content: flex-end; }
}

.talk {
  position: fixed; z-index: 8;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  max-width: 680px; margin: 0 auto;
  display: flex; gap: 10px; padding: 12px;
  background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
}
.talk-face { flex: none; width: 84px; height: 84px; object-fit: cover; object-position: 50% 0; background: var(--paper-deep); }
.talk-main { flex: 1; min-width: 0; }
.talk-name { margin: 0; font: 700 14px/1.5 var(--mincho); color: var(--vermilion); }
.talk-text { margin: 2px 0 8px; font-size: 16px; }
.talk-choices { display: flex; flex-direction: column; gap: 6px; }
.choice, .talk-next {
  min-height: 44px; padding: 4px 12px; text-align: left;
  background: var(--paper-deep); border: 2px solid var(--ink); font-family: var(--mincho); font-weight: 700;
}
.talk-next { display: block; margin-left: auto; min-width: 88px; text-align: center; }

.sheet {
  position: fixed; z-index: 10; inset: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
}
.sheet-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 18px) 20px calc(env(safe-area-inset-left) + 18px);
}
.kicker { margin: 0; font: 700 12px/1.5 var(--gothic); letter-spacing: .2em; color: var(--vermilion); }
.sheet h2 { margin: 2px 0 6px; font: 700 26px/1.4 var(--mincho); letter-spacing: .06em; }
.intro { margin: 0 0 8px; color: var(--ink-soft); }
.sheet-section { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.sheet-section h3 { margin: 0 0 8px; font: 700 17px/1.5 var(--mincho); color: var(--wave); }
.sheet-section p { margin: 0 0 8px; }
.muted { color: var(--ink-soft); }
.live-on { padding: 6px 10px; color: #fff; background: var(--vermilion); font-weight: 700; }
.entry { border-bottom: 1px solid var(--line); }
.entry summary { min-height: 44px; padding: 9px 2px; font-weight: 700; cursor: pointer; }
.link-card, .game-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; margin-bottom: 8px; padding: 8px 12px;
  color: var(--ink); background: #fbf6ea; border: 2px solid var(--ink);
  text-decoration: none; text-align: left; font-weight: 700;
}
.link-card small, .game-card small { flex: none; color: var(--wave); font-size: 13px; }
.link-card.is-off { color: var(--ink-soft); background: var(--paper-deep); border-color: var(--line); }
.link-card.is-off small { color: var(--ink-soft); }
.game-card { display: block; }
.game-card strong { display: block; font: 700 17px/1.5 var(--mincho); }
.game-card span { display: block; margin: 2px 0 4px; font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.game-card small { font-weight: 700; color: var(--vermilion); }
.records, .plain { margin: 0; padding: 0; list-style: none; }
.records li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.records p { margin: 0; }
.record-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.tag { padding: 0 6px; color: var(--paper); background: var(--wave); }
.sheet-close {
  flex: none; width: 100%; min-height: 54px;
  padding-bottom: env(safe-area-inset-bottom);
  color: var(--paper); background: var(--ink); border: 0;
  font: 700 17px/1.4 var(--mincho); letter-spacing: .1em;
}

.loading {
  position: fixed; z-index: 20; inset: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  color: var(--paper); background: var(--ink); font-family: var(--mincho);
}
.loading .hud-btn { margin: 0; }
.noscript { position: fixed; z-index: 30; inset: 0; margin: 0; padding: 24px; background: var(--paper); }

@media (max-height: 420px) {
  .talk-choices { flex-direction: row; }
  .choice { flex: 1; }
  .talk-face { width: 64px; height: 64px; }
  .stick { width: 104px; height: 104px; }
  .act { width: 72px; height: 72px; }
}

.hud-status {
  position: fixed; z-index: 5; left: calc(env(safe-area-inset-left) + 12px);
  top: calc(env(safe-area-inset-top) + 42px); max-width: calc(100% - 100px);
  margin: 0; padding: 2px 8px; font-size: 13px; line-height: 1.6;
  color: var(--paper); background: rgba(35, 32, 28, .78); pointer-events: none;
}
.is-locked .hud-status { display: none; }
.toast {
  position: fixed; z-index: 12; left: 50%; top: 96px; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 6px 14px;
  color: var(--paper); background: var(--wave); font-weight: 700; pointer-events: none;
}
.quest-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.quest-row p { margin: 0 0 4px; font-weight: 700; }
.quest-row small { color: var(--ink-soft); }
.do-btn {
  min-height: 44px; padding: 6px 16px; color: var(--paper); background: var(--vermilion);
  border: 2px solid var(--ink); font-family: var(--mincho); font-weight: 700;
}
.do-btn:disabled { color: var(--ink-soft); background: var(--paper-deep); }
.dial { position: relative; height: 30px; margin: 8px 0; background: var(--paper-deep); border: 2px solid var(--ink); }
.dial-zone { position: absolute; top: 0; bottom: 0; background: var(--wave); }
.dial-needle { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--vermilion); }
.danger-link { margin-top: 18px; min-height: 44px; color: var(--ink-soft); background: none; border: 1px solid var(--line); width: 100%; }

/* テイルズ系の窓: 濃紺の地に金の縁 */
:root { --win: #16264a; --win-deep: #0e1a36; --gold: #d8b866; --win-text: #f4f0e2; }
.talk, .toast, .near-name, .hud h1, .hud-status {
  color: var(--win-text);
  background: linear-gradient(180deg, rgba(36, 60, 110, .96), rgba(14, 26, 54, .96));
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 1px rgba(14, 26, 54, .9), 0 2px 6px rgba(0, 0, 0, .4);
}
.talk { border-width: 2px; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(14, 26, 54, .9), inset 0 0 0 3px rgba(216, 184, 102, .35), 0 3px 10px rgba(0, 0, 0, .5); }
.talk-face { background: var(--win-deep); border: 1px solid var(--gold); image-rendering: pixelated; }
.talk-name { color: var(--gold); }
.choice, .talk-next, .hud-btn {
  color: var(--win-text); background: linear-gradient(180deg, #2c4a86, #182c58); border: 1px solid var(--gold); font-family: var(--gothic);
}
.choice:focus, .choice:hover, .talk-next:focus, .talk-next:hover { background: linear-gradient(180deg, #4a70b4, #2c4a86); outline: none; }
.act { color: var(--win-text); background: radial-gradient(circle at 35% 30%, #3a5c9c, #142850); border: 2px solid var(--gold); }
.act:disabled { background: rgba(14, 26, 54, .55); border-color: rgba(216, 184, 102, .45); }
.stick { background: rgba(14, 26, 54, .4); border-color: rgba(216, 184, 102, .7); }
.stick-knob { background: linear-gradient(180deg, #3a5c9c, #182c58); border-color: var(--gold); }
.sheet { background: linear-gradient(180deg, #1c3364, #0e1a36); color: var(--win-text); }
.kicker, .sheet-section h3 { color: var(--gold); }
.sheet h2 { color: #fff; }
.intro, .muted, .quest-row small, .record-head { color: #c4cce0; }
.sheet-section, .entry, .quest-row, .records li { border-color: rgba(216, 184, 102, .35); }
.link-card, .game-card { color: var(--win-text); background: rgba(44, 74, 134, .55); border: 1px solid var(--gold); }
.game-card span { color: #c4cce0; }
.link-card small, .game-card small { color: var(--gold); }
.link-card.is-off { color: #a4aec6; background: rgba(14, 26, 54, .6); border-color: rgba(216, 184, 102, .3); }
.link-card.is-off small { color: #a4aec6; }
.do-btn { color: var(--win-text); background: linear-gradient(180deg, #4a70b4, #2c4a86); border: 1px solid var(--gold); font-family: var(--gothic); }
.do-btn:disabled { color: #8a94ac; background: rgba(14, 26, 54, .6); }
.dial { background: var(--win-deep); border-color: var(--gold); }
.dial-zone { background: #3a7ec0; }
.dial-needle { background: #f2c35c; }
.sheet-close { color: var(--win-text); background: linear-gradient(180deg, #2c4a86, #142850); border-top: 1px solid var(--gold); }
.danger-link { color: #c4cce0; border-color: rgba(216, 184, 102, .35); }
.hud h1 { font-size: 14px; }
.loading { background: var(--win-deep); }

.char-list { display: flex; flex-wrap: wrap; gap: 12px; }
.char-card {
  flex: 1 1 130px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 130px; padding: 14px 8px;
  color: var(--win-text); background: rgba(44, 74, 134, .55); border: 1px solid var(--gold);
}
.char-card.is-on { background: linear-gradient(180deg, #4a70b4, #2c4a86); }
.char-card strong { font-family: var(--mincho); font-size: 17px; }
.char-face { display: block; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }