@font-face {
  font-family: 'Cubic11';
  src: url('assets/fonts/Cubic_11.woff2') format('woff2');
  font-display: swap;
}

:root {
  --ui-font: 'Cubic11', system-ui, sans-serif;
  --ui-border: 16px; /* 2x the 8px source slice */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  background: #1d1a16;
  font-family: var(--ui-font);
  color: #f4ecd8;
}

#game {
  position: fixed;
  inset: 0;
}

#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 10;
  max-width: 100vw;
}

#hud button, #hud .hud-item {
  pointer-events: auto;
}

.hud-status {
  background: rgba(29, 26, 22, 0.82);
  border: 2px solid #6b5a3a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1.45;
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop (playtest 4): the status box is read-only text over the map, so clicks go through it to the map
   (the shop sits under it at the start); only its toggles take clicks. Phones keep the tap-to-open box. */
@media (min-width: 601px) {
  #hud .hud-status { pointer-events: none; }
  #hud .hud-status summary, #hud .hud-status .hud-raid, #hud .hud-status .hud-omen, #hud .hud-status .hud-form, #hud .hud-status .hud-offer, #hud .hud-status .hud-guard, #hud .hud-status .hud-visit, #hud .hud-status .hud-board, #hud .hud-status .hud-vow, #hud .hud-status .hud-vowdot { pointer-events: auto; }
}

.hud-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hud-shrine { margin-top: 4px; }
.hud-shrine summary { cursor: pointer; }
.hud-quest { margin-top: 4px; color: #f2c46d; }
.hud-quest.done { color: #ffe08a; font-weight: bold; text-shadow: 0 0 6px rgba(255, 200, 60, 0.8); border-radius: 3px; }
.hud-quest.flash { animation: quest-flash 0.9s ease-out; }
@keyframes quest-flash {
  0%, 40% { background: rgba(255, 200, 60, 0.55); box-shadow: 0 0 14px rgba(255, 200, 60, 0.9); }
  100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .hud-quest.flash { animation: none; } }

.hud-buttons {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap; /* never wider than the screen: wrap instead of running off the right edge */
  justify-content: flex-end;
  max-width: 100%;
  gap: 8px;
  align-items: flex-start;
}

.conds { list-style: none; margin: 0; padding: 0; }
.conds li { color: #d9a08a; }
.conds li.ok { color: #9fd38a; }
.panel .conds li { color: #b3261e; }
.panel .conds li.ok { color: #2e7d32; }

button {
  font-family: var(--ui-font);
  font-size: 16px;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  color: #2b2519;
  background: #f4ecd8;
  border: 2px solid #6b5a3a;
  border-radius: 4px;
}
button:disabled { opacity: 0.45; cursor: default; }
button.secondary { background: #b9ad92; }

.panel h3 { font-size: 1em; margin: 10px 0 6px; color: #a4471f; }
.panel p { margin: 6px 0; }
.panel p.say { color: #6b4a2a; } /* a villager's / the crows' spoken line */
.panel ul { margin: 6px 0; padding-left: 1.2em; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
.row-buttons { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.row-buttons button { padding: 4px 10px; min-height: 34px; }
.offer-warn { color: #b3261e; font-size: 0.9em; }
.rank { font-size: 1.3em; color: #a4471f; }

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.panel {
  max-width: min(92vw, 520px);
  max-height: 80vh;
  overflow: auto;
  padding: 8px 12px;
  border-style: solid;
  border-width: var(--ui-border);
  border-image-source: url('assets/ui/DialogueBoxSimple.png');
  border-image-slice: 8 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  background-color: #efe8f0; /* matches the frame fill if the image fails */
  background-clip: padding-box; /* keep the frame's rounded corners transparent */
  color: #3a2a1c;
  font-size: 16px;
}

.panel-title {
  font-size: 1.2em;
  margin-bottom: 8px;
}

.panel-body {
  margin-bottom: 12px;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


#toasts {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  pointer-events: none;
  z-index: 30;
}

.toast {
  padding: 8px 14px;
  border-radius: 6px;
  background: #2b2519;
  color: #f4ecd8;
  font-size: 16px;
}

.toast.warn {
  background: #5a2a20;
}


.build-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.build-row.off { opacity: 0.55; }
.build-info { font-size: 0.9em; }
.build-why { font-size: 0.9em; color: #b3261e; }

#modebar, .room-mode {
  position: fixed;
  left: 12px;
  right: 12px;
  width: fit-content;
  margin: 0 auto;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(29, 26, 22, 0.88);
  border: 2px solid #6b5a3a;
  border-radius: 6px;
  z-index: 15;
}
#modebar[hidden], .room-mode[hidden] { display: none; }
#modebar button, .room-mode button { flex-shrink: 0; }
.mode-link { color: #f2c46d; } /* 石燈籠相連 + 共鳴 (ui/build.js) */
.reso { color: #b8862b; } /* 共鳴 lines in a building's panel (ui/menus.js) */

/* Phone HUD one-liner (hud.js); desktop never shows it. */
.hud-line { display: none; }
.hud-more { margin-left: 6px; color: #f2c46d; }

/* Phones (playtest #7): the status box shrinks to one line (tap to open the rest) and the buttons move to a
   bottom bar above the home indicator. */
@media (max-width: 600px) {
  .hud-status { font-size: 14px; padding: 5px 9px; cursor: pointer; }
  .hud-line { display: block; white-space: nowrap; }
  .hud-line, .hud-more { font-size: 13px; } /* opf-fix2: 14 px ran past 390 px with 淨玉 and 百夜祭 */
  .hud-row, .hud-status:not(.open) > :not(.hud-line):not(.hud-quest) { display: none; }
  /* collapsed: the crow quest / errand stays visible on one line (the intro points players at it) */
  .hud-status:not(.open) .hud-quest { margin-top: 2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* opf-fix2 (playtest 7: 7 lines over the shrine, the second cut off): closed it is at most 3 lines, like desktop:
     day + resources, shrine + raid, then one task (raid day: the offering line instead); the rest under 更多. */
  .hud-status:not(.open) > .hud-quest ~ .hud-quest, .hud-status:not(.open):has(.phone-offer) > .hud-quest { display: none; }
  .hud-status:not(.open):has(.phone-offer) > .hud-invite { display: block; } /* r8-1: still shown on a raid day */
  .hud-status:not(.open):has(.phone-offer) > .hud-invite ~ .hud-invite { display: none; }
  .hud-status:not(.open) { max-width: calc(100vw - 16px); }
  .hud-status.open .hud-line { margin-bottom: 4px; border-bottom: 1px solid #6b5a3a; padding-bottom: 3px; }
  /* r7-1 (pt9: a tap on the shrine under the closed box opened the box): closed, only its text rows and tappable lines
     take taps; the box's padding and a plain task line let the tap through to the map. */
  #hud .hud-status:not(.open) { pointer-events: none; }
  #hud .hud-status:not(.open) .hud-line > div, #hud .hud-status:not(.open) [role=button], #hud .hud-status:not(.open) .phone-offer { pointer-events: auto; }

  .hud-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(29, 26, 22, 0.9);
    border-top: 2px solid #6b5a3a;
  }
  .hud-buttons button { flex: 1 1 0; padding: 6px 4px; }
  #toasts { bottom: calc(58px + env(safe-area-inset-bottom)); }
  #modebar { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .intro-backdrop { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Opening crow dialogue (morning.js): a dialogue box at the bottom, the village visible above it. */
.intro-backdrop { align-items: flex-end; padding: 16px; background: rgba(0, 0, 0, 0.35); }
.panel.intro { display: flex; align-items: flex-start; gap: 14px; max-width: min(94vw, 640px); padding: 10px 16px; }
.intro-crow { width: 132px; height: auto; image-rendering: pixelated; flex-shrink: 0; margin-top: 6px; }
.intro-text p { margin: 0 0 6px; line-height: 1.5; }
.intro-text .panel-actions { justify-content: flex-end; margin-top: 10px; }
/* Member visits (visits.js): same box, her face-aligned portrait (192x240 webp) on a dark frame, one line per page. */
.panel.intro.visit { width: min(94vw, 580px); }
.panel.intro.visit .intro-text { flex: 1; }
.panel.intro.visit .intro-text p { min-height: 4.5em; }
.intro-portrait { width: 120px; height: 150px; flex-shrink: 0; border-radius: 6px; background: #2a231c; }
.hud-visit { cursor: pointer; color: #f7b6c8; }

/* Shop tabs (menus.js). */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #6b5a3a; margin-bottom: 8px; }
.tabs .tab { flex: 1; border-bottom: none; border-radius: 4px 4px 0 0; background: #cfc3a6; color: #6b5a3a; margin-bottom: -2px; }
.tabs .tab.on { background: #f4ecd8; color: #2b2519; border-bottom: 2px solid #f4ecd8; }

@media (max-width: 480px) {
  body, .panel, .panel-actions button, .toast {
    font-size: 16px;
  }

  .hud-status { font-size: 16px; }

  #hud { gap: 6px; }

  button { min-height: 44px; }
  .row-buttons button { min-height: 44px; }
}

/* Mine minigame (src/scenes/mine.js): village HUD hidden, one bar with shovels/loot and a leave button. */
body.mining #hud, body.mining #modebar { display: none; } /* fishing (src/scenes/fishing.js) reuses both */
.mine-bar {
  position: fixed;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(29, 26, 22, 0.88);
  border: 2px solid #6b5a3a;
  border-radius: 6px;
  font-size: 18px;
  z-index: 10;
}

/* Purification effect (src/scenes/village.js): the HUD and panels ignore clicks while it plays. */
body.purifying #hud button, body.purifying #panels, body.purifying #modebar { pointer-events: none; }

/* Dev-only A/B art trials (spec 3.1.1), switched on by ?warm=1 / ?sysfont=1; off by default. */
body.warm #game::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #ffb060;
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}
body.sysfont { --ui-font: system-ui, sans-serif; }

@media (max-width: 600px) {
  .panel.intro { gap: 8px; padding: 8px 10px; }
  .intro-crow { width: 66px; }
  .intro-portrait { width: 76px; height: 95px; }
}
.panel:has(.tabs) { width: min(92vw, 440px); } /* same width on both shop tabs */
.sell-item + .sell-item { border-top: 1px dashed #b9ad92; padding-top: 4px; }

/* ---- Night (src/ui/night.js): the day HUD hides; a top bar and a bottom row of cards and crow buttons. ---- */
body.night #hud, body.night #modebar { display: none; }
body.night #toasts { bottom: 104px; }
body.aiming #game { cursor: crosshair; }
#night { position: fixed; inset: 0; pointer-events: none; z-index: 12; }
#night[hidden] { display: none; }
#night button, #night .night-top, #night .night-hint { pointer-events: auto; }
.night-top, .night-bottom, .night-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 16px);
  background: rgba(14, 16, 34, 0.88);
  border: 2px solid #5a4f86;
  border-radius: 6px;
}
.night-top { top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; padding: 6px 12px; font-size: 16px; }
.night-top button { min-height: 34px; padding: 4px 12px; }
.night-top button.on { background: #f2c46d; }
.night-ctrl { display: flex; gap: 6px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 12px; height: 16px; background: #3a2a44; border: 1px solid #8a6aa8; }
.pips i.on { background: #9fd8ff; border-color: #dff3ff; box-shadow: 0 0 4px #6fc0ff; }
.pips i.shield { border-radius: 50%; margin-left: 2px; }
.pips i.shield.on { background: #f2e7a0; border-color: #fff8d0; box-shadow: 0 0 5px #ffe27a; }
.night-rest { color: #ffb08a; font-weight: bold; }
.night-paused { color: #f2c46d; }
.night-prep { flex-direction: column; gap: 4px; width: min(760px, calc(100vw - 16px)); }
.night-title { font-size: 20px; color: #ffb0a0; }
.night-enemies { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.enemy { display: inline-flex; align-items: center; gap: 4px; }
.enemy small { color: #ffb0a0; font-size: 14px; }
/* 熄燈夜: the spark (assets/fx/spark.png, 7 frames of 10x8; the 4th, x2) tinted to a flame, as over the hunters on the map */
.enemy.hunters { color: #ffc27a; cursor: pointer; }
.hunter-flame { width: 20px; height: 16px; background: url(assets/fx/spark.png) -60px 0 / 140px 16px; image-rendering: pixelated;
  filter: sepia(1) saturate(6) hue-rotate(-25deg) brightness(1.1); }
.icon-box { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; pointer-events: none; }
.icon-box img { image-rendering: pixelated; }
.enemy-icon { width: 36px; height: 36px; }
.enemy-icon img { height: 64px; filter: brightness(0.75) sepia(0.6) hue-rotate(215deg) saturate(1.8) drop-shadow(0 0 1px #c9a0ff); }
.enemy-icon.bigSquirrel { width: 44px; height: 44px; }
.enemy-icon.bigSquirrel img { height: 84px; }
.enemy-icon.slimelet img { height: 44px; }
.night-gates { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.chip { min-height: 32px; padding: 2px 10px; font-size: 14px; }
.night-tip, .night-tip-short { font-size: 14px; color: #c8c0e0; text-align: center; }
.night-tip-short { display: none; }
.night-hint { bottom: 104px; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; color: #fff3b0; }
.night-hint[hidden] { display: none; }
.night-bottom { bottom: 8px; display: flex; align-items: stretch; gap: 8px; padding: 6px 8px; overflow-x: auto; width: max-content; }
.night-bottom > * { flex-shrink: 0; }
.night-cards, .night-actions { display: flex; align-items: stretch; gap: 8px; }
.night-sep { width: 2px; background: #5a4f86; }
.unit-card {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  column-gap: 6px;
  align-items: center;
  min-width: 104px;
  padding: 4px 8px;
  text-align: left;
  touch-action: pan-x;
  user-select: none;
}
.unit-card .unit-icon { grid-row: 1 / 4; width: 40px; height: 40px; }
.unit-card .unit-icon img { height: 64px; }
.unit-card .state { font-size: 13px; color: #2e7d32; }
.unit-card .hp { height: 4px; background: #cdbf9e; }
.unit-card .hp i { display: block; height: 100%; background: #4caf50; }
.unit-card.field { background: #d8e8c8; }
.unit-card.field .state { color: #a0452a; font-weight: bold; } /* reads 撤下: pressing the card withdraws */
.unit-card.cool { background: #b9ad92; }
.unit-card.cool .state { color: #6b5a3a; }
.unit-card.tired { background: #8a8070; opacity: 0.6; }
.unit-card.tired .state { color: #b3261e; }
.unit-card.sel { outline: 3px solid #9fe38a; outline-offset: 1px; background: #f0ffd8; }
.crow-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; }
.crow-btn img { height: 36px; margin: -4px 0; image-rendering: pixelated; }
.crow-btn.aim { background: #fff3b0; outline: 3px solid #f2c46d; }
.night-start { padding: 6px 28px; font-size: 20px; background: #f2c46d; }
body:has(.intro-backdrop) .night-start { opacity: 0.45; pointer-events: none; } /* fix-pt8: not under an explanation (ui/night.js) */
.night-ghost { position: fixed; z-index: 40; height: 48px; transform: translate(-50%, -80%); pointer-events: none; image-rendering: pixelated; opacity: 0.85; }
.night-ghost[hidden] { display: none; }
.night-result { min-width: min(92vw, 320px); }
.night-result .panel-title { font-size: 1.5em; }
.night-result .panel-actions { justify-content: center; }
.night-result .panel-actions button { padding: 8px 36px; font-size: 18px; }
/* 繪馬結果卡 (OPF proposal 8): the two extra buttons, the preview and its download link */
.night-result .panel-actions button.secondary { padding: 8px 14px; font-size: 16px; }
.ema-preview img { display: block; max-width: 100%; max-height: 38vh; margin: 10px auto 6px; }
.ema-preview .panel-actions { justify-content: center; }
.ema-preview a.button { font-size: 16px; padding: 8px 14px; color: #2b2519; background: #f4ecd8; border: 2px solid #6b5a3a; border-radius: 4px; text-decoration: none; }
.night-result.won .panel-title { color: #2e7d32; }
.night-result.lost .panel-title { color: #b3261e; }
.morning-night h3 { margin-top: 12px; }
/* day side of the night (plan C task 9) */
.hud-raid { color: #f0a080; cursor: pointer; }
.hud-raid.routes-on { text-decoration: underline dotted; }
.hud-raid.tonight { color: #ff6b5a; font-weight: bold; }
.hud-omen, .night-omen b { color: #c9a0ff; cursor: pointer; }
.omen-luck { color: #8a5a00; font-weight: bold; }
/* agy 1 + 5: 白日靈感 line (omikuji, mine / pond panels), 福德迴向 in the shrine panel */
.inspire { color: #8a5a00; font-weight: bold; background: #fff4d0; border-left: 3px solid #e8b83a; padding: 2px 6px; }
.saisen-glow { color: #8a5a00; }
details.saisen { margin: 2px 0 6px; }
details.saisen summary { cursor: pointer; font-weight: bold; color: #8a5a00; }
.night-omen { cursor: pointer; }
.night-omen .omen-luck { color: #ffd27a; }
.build-night { font-size: 0.9em; color: #3d5a8a; }
.sleep-raid, .broken-note { color: #b3261e; font-weight: bold; }
.night-up h3 { margin: 12px 0 2px; }
.night-up-type { border-bottom: 1px dashed rgba(90, 60, 30, 0.3); padding-bottom: 4px; }
.lv3-option { margin-left: 18px; font-size: 0.92em; opacity: 0.8; }
.lv3-option.on { opacity: 1; font-weight: bold; color: #7a4a00; }
.lv3-option.on .build-info { font-weight: normal; }
@media (max-width: 600px) {
  .night-top { gap: 4px 8px; padding: 3px 6px; font-size: 14px; top: 4px; }
  .night-top:not(.night-prep) { left: 4px; right: 4px; transform: none; max-width: none; flex-wrap: nowrap; justify-content: space-between; white-space: nowrap; }
  .night-top .lbl, .night-paused { display: none; }
  .night-top .night-rest { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 10px; background: rgba(16, 19, 28, 0.85); border-radius: 6px; } /* no room in the one-line bar */
  .night-top button { min-height: 44px; padding: 2px 10px; }
  .pips i { width: 6px; height: 14px; }
  .pips { gap: 2px; }
  .night-prep { gap: 2px; }
  .night-title { font-size: 16px; }
  .enemy-icon { width: 30px; height: 30px; }
  .enemy-icon img { height: 52px; }
  .chip { min-height: 44px; }
  .night-tip { display: none; }
  .night-tip-short { display: block; font-size: 13px; }
  /* Two rows (playtest 2): villager cards, then the crow buttons (or 開始), each the full width. */
  .night-bottom { left: 0; right: 0; transform: none; max-width: none; bottom: 0; border-radius: 0; border-width: 2px 0 0;
    width: auto; flex-direction: column; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); overflow: visible; }
  .night-sep { display: none; }
  /* nd-5: three (or four) cards share the width, no sideways scroll: a smaller icon leaves the name its room. */
  .night-cards > * { flex: 1 1 0; min-width: 0; }
  .night-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; }
  .unit-card { min-height: 52px; padding: 2px 3px; column-gap: 2px; grid-template-columns: auto minmax(0, 1fr); }
  .unit-card .unit-icon { width: 24px; height: 24px; }
  .unit-card .unit-icon img { height: 40px; }
  /* opf-fix2 (playtest 7: 「黛菈之」 with 4 villagers): a smaller name and icon, and a second row before any clipping */
  .unit-card .name { font-size: 11.5px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .crow-btn, .night-start { min-height: 48px; }
  .crow-btn { padding: 4px; gap: 2px; } /* 落石 makes four: a smaller crow leaves each name its room */
  .crow-btn img { height: 28px; }
  .night-hint { bottom: calc(126px + env(safe-area-inset-bottom)); font-size: 14px; }
  body.night #toasts { bottom: calc(126px + env(safe-area-inset-bottom)); }
}

/* Offerings and the night rating (night-depth spec 1, 4). */
.hud-offer { color: #9fe38a; cursor: pointer; }
.phone-offer { display: block; }
/* 夜路護持點 (codex 1): day chip, prep line, fight chip, result line */
.hud-guard { color: #ffe27a; cursor: pointer; }
.night-guard { display: flex; align-items: center; justify-content: center; gap: 6px; color: #ffe27a; font-size: 14px; cursor: pointer; }
.guard-mark { flex: none; width: 12px; height: 12px; border: 2px solid #ffe27a; background: rgba(255, 226, 122, 0.25); transform: rotate(45deg); }
.night-guard-chip { color: #ffe27a; }
.night-guard-chip.lost { color: #ff9a8a; }
.night-guard-result { color: #b8860b; font-weight: bold; }
.guard-short { display: none; }
@media (max-width: 600px) { .night-guard { font-size: 13px; } .guard-long { display: none; } .guard-short { display: inline; } }
.offer-list li.ok b { color: #2e7d32; }
.night-offer { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.offer-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 100%; }
.offer-chips > b { color: #f2c46d; }
.offer-chip { white-space: nowrap; }
.offer-chip small { margin-left: 4px; font-size: 12px; color: #6b5a3a; }
.offer-chip.short { opacity: 0.5; }
.offer-chip.on { background: #f2c46d; outline: 2px solid #fff3b0; }
.offer-what { font-size: 14px; color: #fff3b0; text-align: center; }
.night-offer-used { color: #f2c46d; }
.night-grade { font-size: 1.3em; font-weight: bold; margin-bottom: 4px; }
.night-grade small { font-size: 0.7em; font-weight: normal; color: #2b2519; }
.night-grade.great { color: #b8860b; }
.night-grade.good { color: #2e7d32; }
.night-grade.ok { color: #6b5a3a; }
.night-hero { color: #3d5a8a; font-weight: bold; }
.night-bonus { color: #8a5a00; }
@media (max-width: 600px) {
  .offer-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; padding-bottom: 2px; }
  .offer-chips > * { flex-shrink: 0; }
  .offer-what { font-size: 13px; }
  .night-offer-used { display: none; }
}

/* Okami's 祓令 (night-depth spec 3): points and two order buttons after the crows; their own row on phones. */
.night-orders { display: flex; align-items: stretch; gap: 8px; }
.order-label { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffe27a; font-size: 13px; line-height: 1.1; }
.order-pts { font-size: 18px; }
.order-btn { display: flex; align-items: center; gap: 5px; padding: 4px 10px; }
.order-btn small { font-size: 12px; color: #8a5a00; }
.order-btn kbd { font: inherit; font-size: 11px; border: 1px solid #8a7a5a; border-radius: 3px; padding: 0 4px; color: #6b5a3a; }
.order-btn.short { opacity: 0.55; }
.order-btn.aim { background: #fff3b0; outline: 3px solid #ffe27a; }
@media (max-width: 600px) {
  .night-orders > button { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; }
  .order-label { flex-direction: row; gap: 4px; min-width: 64px; }
  .order-btn kbd { display: none; }
  .night-hint { width: max-content; } /* the longer 祓令 hints use the screen's width, not half of it */
  body.orders-on .night-hint, body.night.orders-on #toasts { bottom: calc(176px + env(safe-area-inset-bottom)); }
}

/* nd-7 polish (playtest 5): same-level escalation warning, the next grade's conditions, 稻米's pip breaking, 祓令 full. */
.hud-hard, .night-hard { color: #ff9a6a; font-weight: bold; }
.night-hard { text-align: center; }
.night-next { font-size: 0.9em; color: #6b5a3a; margin-bottom: 4px; }
.pips i.shield:not(.on) { background: linear-gradient(135deg, #3a2a44 42%, #8a6aa8 42% 58%, #3a2a44 58%); } /* cracked */
.pips i.shield.pop { animation: shield-break 0.7s ease-out; }
@keyframes shield-break {
  0% { transform: scale(1); background: #fff8d0; box-shadow: 0 0 10px 4px #ffe27a; }
  40% { transform: scale(2) rotate(25deg); background: #ffe27a; box-shadow: 0 0 16px 8px #ffe27a; opacity: 0.9; }
  100% { transform: scale(1); }
}
.order-btn.full { animation: order-full 1.1s ease-in-out infinite; border-color: #ffe27a; }
@keyframes order-full {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 226, 122, 0.5); }
  50% { box-shadow: 0 0 14px 5px rgba(255, 226, 122, 0.95); background: #fff3b0; }
}
@media (prefers-reduced-motion: reduce) {
  .pips i.shield.pop { animation: none; }
  .order-btn.full { animation: none; box-shadow: 0 0 10px 3px #ffe27a; } /* still marked, just steady */
}

/* 百夜祭 (more-play 2): HUD chip, the result line, the shrine panel's records and colour picks. */
.hud-festival { color: #e8b0ff; font-weight: bold; }
.night-festival { color: #7a3a9a; font-weight: bold; margin: 4px 0; }
.night-stake { font-weight: bold; }
.night-stake-lost { color: #6b5a4a; }
.stake-odds { font-size: 13px; color: #e8dcc0; text-align: center; }
.festival-panel h3 { margin: 8px 0 2px; }
.festival-look .row-buttons { flex-wrap: wrap; }
.festival-look .chip { display: inline-flex; align-items: center; gap: 4px; }
.festival-look .chip.on { background: #f2c46d; outline: 2px solid #8a5a00; }
.festival-look .chip small { font-size: 11px; color: #6b5a3a; }
.festival-look .swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #2b2519; border-radius: 2px; }

/* 村民專屬技能 (more-play 4): a skill button under each villager card in the fight; it fills as the meter charges and
   glows when full. Tapping the card itself still withdraws. */
.unit-slot { display: flex; flex-direction: column; gap: 4px; }
.unit-slot .unit-card { flex: 1 1 auto; }
.skill-btn { --charge: 0%; min-height: 30px; padding: 2px 6px; font-size: 13px; font-weight: bold; color: #5a4a2a;
  background: linear-gradient(to right, #f2d98a var(--charge), #d8ccb0 var(--charge)); }
.skill-btn.off { opacity: 0.45; }
.skill-btn.ready { color: #3a2a00; background: #ffe27a; border-color: #fff3b0; animation: order-full 1.1s ease-in-out infinite; }
body.skills-on .night-hint { bottom: 140px; }
@media (max-width: 600px) {
  .skill-btn { min-height: 44px; font-size: 13px; white-space: nowrap; overflow: hidden; }
  body.skills-on .night-hint, body.night.skills-on #toasts { bottom: calc(176px + env(safe-area-inset-bottom)); }
  body.skills-on.orders-on .night-hint, body.night.skills-on.orders-on #toasts { bottom: calc(226px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .skill-btn.ready { animation: none; box-shadow: 0 0 10px 3px #ffe27a; } }

/* 御朱印帳 (more-play 5): text-only stamps. Earned = a red seal, slightly tilted; locked = grey, dashed, with its hint. */
.panel:has(.stamp-book) { width: min(94vw, 560px); max-width: min(94vw, 560px); }
.stamp-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px;
  padding: 6px; border: 2px dashed #a9a29a; border-radius: 6px; color: #8a847c; text-align: center; background: #e6e0e4; }
.stamp small { font-size: 12px; line-height: 1.3; }
.stamp-name { font-size: 15px; }
.stamp.on { border: 3px double #c0281d; color: #c0281d; background: #fbeee6; transform: rotate(-2deg); }
.stamp.on .stamp-name { padding: 2px 8px; border: 2px solid #c0281d; border-radius: 4px; letter-spacing: 2px; }
.stamp.on:nth-child(even) { transform: rotate(1.5deg); }
.toast.seal { background: #8e1f16; border: 2px solid #f0c08a; color: #fff6e8; font-weight: bold; }
@media (max-width: 480px) { .stamp-book { grid-template-columns: 1fr 1fr; gap: 6px; } .stamp { min-height: 70px; } }

/* r6-2 (pt9: 40+ controls over most of the map). Prep panel: a summary (one line each: the most dangerous gap, flyers,
   omen, 護持點, 還沒擺) and folded groups whose headers carry their state; an open group's body sits under the headers.
   While a villager waits for its tile (.picking) the bodies step aside. 看缺口 / 看神社 float at the right edge. */
.prep-sum, .prep-body { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.prep-body[hidden] { display: none; }
.prep-body { padding-top: 4px; border-top: 1px dashed #5a4f86; }
.night-prep.picking .prep-body { display: none; }
.sum-line { max-width: 100%; font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sum-line[hidden] { display: none; }
.sum-danger { color: #ffb08a; font-weight: bold; }
.sum-danger.calm { color: #9fd8a8; }
.sum-fly { color: #9fd8ff; }
.sum-fly.bare::after { content: ' ⚠'; color: #ffb08a; }
.sum-line.night-guard { display: block; }
.sum-line .guard-mark { display: inline-block; vertical-align: middle; margin-right: 6px; }
.chip.sum-idle { min-height: 30px; background: #ffd9a0; border-color: #b4441e; color: #6a2a10; font-weight: bold; }
.chip.sum-idle[hidden] { display: none; }
.offer-warn { color: #ffb08a; }
.prep-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.prep-group { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; }
.prep-group .group-sum { color: #2b6a2b; font-weight: bold; }
.prep-group .group-sum:empty { display: none; }
.prep-group.unset .group-sum { color: #8a5a3a; font-weight: normal; }
.prep-group.warn .group-sum { color: #b4441e; }
.prep-group .group-arrow { font-style: normal; font-size: 12px; color: #6b5a3a; }
.prep-group.on { outline: 3px solid #ffe27a; }
.prep-again { min-height: 30px; font-size: 14px; border-style: dashed; }
.night-look[hidden] { display: none; }
.night-look { position: fixed; right: 8px; bottom: calc(var(--nb, 96px) + 8px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.night-look .chip { background: rgba(14, 16, 34, 0.88); color: #fff3b0; border: 2px solid #5a4f86; }
body.aiming .night-look { bottom: calc(var(--nb, 96px) + 56px); }
@media (min-width: 601px) { .night-look { top: 50%; bottom: auto; transform: translateY(-50%); } body.aiming .night-look { bottom: auto; } }
/* 誓願札 by day (round-4 proposal 3): the HUD line under 更多 */
.hud-vowline { color: #c9b6ff; }
.hud-vow { margin-right: 8px; cursor: pointer; text-decoration: underline dotted; }
.hud-vow small { margin-left: 3px; font-size: 0.85em; opacity: 0.8; }
.hud-vow.on { color: #9fe38a; font-weight: bold; text-decoration: none; }
.hud-vow.on::before { content: '✔'; }
@media (max-width: 600px) {
  .sum-line { font-size: 13px; }
  .prep-groups { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px; }
  .prep-group { min-height: 38px; padding: 2px 6px; justify-content: center; white-space: nowrap; overflow: hidden; min-width: 0; }
  .prep-group .group-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .prep-again { min-height: 36px; font-size: 13px; }
  .chip.sum-idle { min-height: 36px; font-size: 13px; }
  .night-look .chip { min-height: 36px; padding: 2px 8px; font-size: 13px; }
  /* phones: a row just under the panel (night.js inset: --pt); hidden when the open groups leave no map to look at */
  .night-look { flex-direction: row; top: calc(var(--pt, 120px) + 6px); bottom: auto; }
  body.aiming .night-look { bottom: auto; }
}
.offer-warn { font-size: 14px; font-weight: bold; text-align: center; }
.offer-warn[hidden] { display: none; }
/* Bottom bar: wraps to rows instead of scrolling sideways (4 villagers + 祓令 at 1280 px); the hint bar and the
   toasts sit just above it (--nb, set by night.js from its height). */
.night-bottom { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 6px; }
.night-hint, body.skills-on .night-hint { bottom: calc(var(--nb, 96px) + 6px); }
/* 注入神力 / 陣亡殘火 (agy 3, 6): glowing buttons at the right, just above the bottom bar (above the hint while aiming) */
.night-ctx { position: fixed; right: 8px; bottom: calc(var(--nb, 96px) + 6px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100vw - 16px); }
.night-ctx[hidden] { display: none; }
body.aiming .night-ctx { bottom: calc(var(--nb, 96px) + 52px); }
#night .ctx-btn { display: flex; flex-direction: column; align-items: center; min-height: 40px; padding: 3px 12px; background: #2b2550; color: #fff3b0;
  border: 2px solid #ffe27a; border-radius: 6px; box-shadow: 0 0 10px rgba(255, 226, 122, 0.55); animation: ctx-glow 0.9s ease-in-out infinite alternate; }
#night .ctx-btn.ember { border-color: #7fe8ff; color: #dff9ff; box-shadow: 0 0 10px rgba(127, 232, 255, 0.6); }
#night .ctx-btn small { font-size: 12px; opacity: 0.85; }
#night .ctx-btn.short { opacity: 0.55; animation: none; }
#night .ctx-btn.on { background: #ffe27a; color: #1a1430; animation: none; }
#night .ctx-btn.ember.on { background: #7fe8ff; }
.ctx-pair { display: flex; gap: 6px; }
#night .ctx-btn.burst { border-color: #ff9a5a; color: #ffd9b8; box-shadow: 0 0 10px rgba(255, 154, 90, 0.55); }
@keyframes ctx-glow { to { box-shadow: 0 0 2px rgba(255, 255, 255, 0.2); } }
body.night #toasts { bottom: calc(var(--nb, 96px) + 6px); }
@media (max-width: 600px) {
  .unit-card { min-width: 0; } /* the 4th card fits at 390 px */
  .night-bottom > * { flex-shrink: 1; min-width: 0; }
  .night-hint, body.skills-on .night-hint, body.orders-on .night-hint, body.skills-on.orders-on .night-hint,
  body.night #toasts, body.night.skills-on #toasts, body.night.orders-on #toasts, body.night.skills-on.orders-on #toasts {
    bottom: calc(var(--nb, 126px) + 6px);
  }
}
/* Day HUD (desktop): the status box shrinks and wraps beside the buttons, which stay in the top-right corner. */
@media (min-width: 601px) {
  #hud { flex-wrap: nowrap; align-items: flex-start; }
  .hud-status { flex: 0 1 auto; min-width: 0; max-width: 620px; }
  .hud-buttons { flex: 0 0 auto; flex-wrap: nowrap; }
  /* opf-fix (playtest 6: 6-7 lines covered the shop and its rows took the clicks): 3 lines (day + resources, the raid
     line, one quest line) until ▾ 更多 opens the rest. */
  #hud .hud-status .hud-toggle { pointer-events: auto; cursor: pointer; color: #f2c46d; margin-left: auto; }
  .hud-status.compact > .hud-full, .hud-status.compact > .hud-shrine, .hud-status.compact > .hud-quest ~ .hud-quest { display: none; }
  .hud-status.compact > .hud-quest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-status.compact .hud-raidbox { flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* r7-1: closed, the lines below the first are glass for the map until the pointer comes in over the first line (hud.js);
     r8-1 (pt10: the routes were out of reach closed): the 夜襲 countdown itself always takes the click */
  /* r9-1 (code review #4): only where a mouse hovers; a touch screen this wide taps the lower lines at once */
  @media (hover: hover) and (pointer: fine) {
    #hud .hud-status.compact:not(.armed) :is(.hud-omen, .hud-form, .hud-offer, .hud-guard, .hud-visit, .hud-board, .hud-vow, .hud-almanac) { pointer-events: none; }
    #hud .hud-status.compact:not(.armed) .hud-invite { pointer-events: auto; } /* r8-1: a waiting visitor, a ready request */
  }
  .hud-status.compact.armed { border-color: #f2c46d; }
}
/* opf-fix (playtest 6): no toast over the night result's 天亮 (phones put toasts at the bottom, where its buttons are). */
body:has(.night-result) #toasts { display: none; }

/* ---- 每日布告板 (more-play 8, ui/menus.js board): three paper slips pinned to the board. ---- */
.hud-board { cursor: pointer; color: #9fd8a8; }
.hud-invite { color: #f2c46d; font-weight: bold; } /* r8-1 */
.panel:has(.board-cards) { width: min(94vw, 600px); max-width: min(94vw, 600px); }
.board-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.board-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fbf4e2; border: 2px solid #b08a58;
  border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); position: relative; }
.board-card::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #c0281d; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } /* the pin */
.board-tier { align-self: flex-start; padding: 0 6px; border-radius: 3px; color: #fff; font-size: 12px; }
.tier0 .board-tier { background: #5b9a5f; }
.tier1 .board-tier { background: #c08a2a; }
.tier2 .board-tier { background: #b0402e; }
.board-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.board-card.on { border-color: #d4a020; background: #fff6cf; box-shadow: 0 0 0 2px #f2c46d; }
.board-card.off { opacity: 0.5; }
.board-done { color: #3f8a46; }
/* r5-1 (codex round 5 A): total, why it can't be taken, the folded money split */
.board-total { font-weight: bold; color: #6a4a1c; }
.board-luck, .board-short { color: #8a6a3a; font-size: 12px; }
.board-why { color: #b0402e; font-size: 12px; }
.board-more summary { cursor: pointer; font-size: 12px; color: #8a6a3a; }
.board-more .build-info { margin-top: 2px; }
.board-shop { margin-top: 4px; border-top: 1px dashed #c9ad7e; padding-top: 3px; }
.board-less { color: #b0402e; }
.almanac h4 { margin: 10px 0 2px; }
.almanac ul { margin: 0; padding-left: 18px; }
.hud-almanac { cursor: pointer; color: #b8d8f0; }
@media (max-width: 480px) { .board-cards { grid-template-columns: 1fr; gap: 10px; } }

/* ---- 選單 volume sliders (more-play 11, ui/hud.js) ---- */
.vols { display: grid; gap: 8px; }
.vol { display: flex; align-items: center; gap: 10px; }
.vol span { min-width: 3em; }
.vol input { flex: 1; min-width: 0; accent-color: #b8862e; }

/* 室內佈置 (more-play 13): furniture pictures in the shop's 家具 tab (ui/menus.js) and the room's bar (scenes/room.js). */
.furn-icon { display: inline-block; vertical-align: middle; background-repeat: no-repeat; image-rendering: pixelated; }
/* 染色 (polish-1, scenes/room.js dye panel) */
.tint-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tint-btn { display: inline-flex; align-items: center; gap: 6px; }
.tint-swatch { display: inline-block; width: 14px; height: 14px; border: 2px solid #5a3d1e; border-radius: 3px; }
.room-bar .row-buttons { flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 480px) { .room-bar .room-name { display: none; } }
/* 派 59 選去處 (opf 4) */
.trip { display: flex; flex-direction: column; text-align: left; }
.trip-odds { color: #6b5a4a; }
.trip-last { color: #b5651d; font-size: 0.8em; }
.loot-gold { color: #b8860b; font-weight: bold; }

/* opf 3: 百夜祭「重夜」 (prep line: the rules on tonight; a heads-up the night before) and 夜主 (prep line, the bar under the fight's top bar). */
.night-heavy { text-align: center; font-size: 15px; color: #c8c0e0; }
.night-heavy.on { color: #ffb36a; font-weight: bold; }
.bless-boost { color: #ffb36a; font-weight: bold; }
.night-boss { display: flex; align-items: center; justify-content: center; gap: 6px; color: #ff9ab4; font-weight: bold; font-size: 15px; }
.enemy-icon.boss { width: 52px; height: 52px; }
.enemy-icon.boss img { height: 104px; filter: brightness(0.7) sepia(0.8) hue-rotate(300deg) saturate(2.5) drop-shadow(0 0 2px #ff6a8a); }
.boss-bar { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 3px 12px; background: rgba(16, 19, 28, 0.9); border: 2px solid #ff6a8a; border-radius: 8px; color: #ffd0dc; white-space: nowrap; pointer-events: none; }
.boss-bar[hidden] { display: none; }
.boss-hp { width: 240px; height: 10px; background: #3a2030; border-radius: 3px; overflow: hidden; }
.boss-hp i { display: block; height: 100%; background: #e8483a; transition: width 0.15s linear; }
.boss-bar.down .boss-hp i { background: #d8c6ff; }
.boss-bar.purifying { border-color: #ffe27a; box-shadow: 0 0 12px #ffe27a; }
.boss-bar.purifying .boss-hp i { background: #ffe27a; }
.boss-bar small { color: #fff3b0; font-size: 14px; }
@media (max-width: 600px) {
  .night-heavy, .night-boss { font-size: 13px; }
  .night-boss { text-align: left; }
  .enemy-icon.boss { width: 36px; height: 36px; }
  .enemy-icon.boss img { height: 72px; }
  .boss-bar { gap: 6px; padding: 2px 8px; font-size: 13px; }
  .boss-hp { width: 110px; }
  .night-top.boss-on .night-rest { top: calc(100% + 40px); }
}

/* opf-fix2 (playtest 7): blessing chips say their good and cost on the chip (phones too); 重抽祝福 beside them;
   the 奉納 row stays out of 展開 (closed: just its chips). */
.bless-chip { display: inline-flex; flex-direction: column; align-items: center; white-space: normal; max-width: 220px; line-height: 1.25; }
.bless-chip .bless-fx { margin: 2px 0 0; font-size: 12px; color: #6b5a3a; }
.bless-chip.on .bless-fx { color: #2b2519; }
.reroll-chip { white-space: nowrap; }
.reroll-chip.short { opacity: 0.5; }
@media (max-width: 600px) {
  .night-bless .offer-chips { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .night-bless .offer-chips > b, .night-bless .bless-boost { grid-column: 1 / -1; text-align: center; }
  .bless-chip { max-width: none; width: 100%; padding: 3px 6px; }
  .night-stake-row .offer-chips { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 4px; }
  .stake-chip { padding: 2px 10px; }
}

/* 誓願札 + 百夜札 (codex 2, 6): the prep row reuses the blessing chips; fight chip, result lines, 百夜祭兌換 rows */
.night-vow-chip { color: #c9b6ff; }
.night-vow-chip.met { color: #9fe38a; }
.night-vow-chip.lost { color: #ff9a8a; }
.night-vow-result { color: #6b4fb0; }
.night-vow-result.kept { color: #6b4fb0; font-weight: bold; }
.festival-purse { font-weight: bold; }
.festival-shop .swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #2b2519; border-radius: 2px; margin-right: 4px; }
@media (max-width: 600px) {
  .night-vow .offer-chips { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .night-vow .offer-chips > b { grid-column: 1 / -1; text-align: center; }
}
/* 粉絲值班表 (codex 3): the duty row on a villager's panel (by day), the card's corner tag, a 59 keeping the points */
.duty-row { margin-top: 10px; border-top: 1px dashed rgba(90, 60, 30, 0.3); padding-top: 6px; }
.duty-title { display: block; margin-bottom: 4px; }
.duty-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.duty-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; line-height: 1.25; white-space: normal; }
.duty-chip small { font-size: 12px; color: #6b5a3a; }
.duty-chip.on { outline: 3px solid #9fe38a; background: #f0ffd8; }
.duty-chip.on small { color: #2b2519; }
.duty-all { display: block; margin-top: 4px; color: #6b5a3a; }
.unit-card { position: relative; }
.duty-tag { position: absolute; top: -7px; right: -4px; padding: 0 4px; border-radius: 6px; background: #4a3a7a; color: #fff3b0; font-size: 11px; line-height: 15px; pointer-events: none; }
.unit-card.home { background: #b9ad92; }
.unit-card.home .state { color: #4a3a7a; font-weight: bold; }
@media (max-width: 480px) { .duty-chips { grid-template-columns: 1fr; } .duty-chip { flex-direction: row; justify-content: space-between; text-align: left; } }
/* The phone prep panel (cx-3: a full screen tall at 重夜 tiers): folded, the omen / 重夜 / 夜主 lines keep two lines
   each (a tap on the omen still explains it all; 展開 shows everything) and the enemy rows pack tighter. */
@media (max-width: 600px) {
  .night-enemies { gap: 0 10px; font-size: 13px; }
  .night-prep .enemy-icon { width: 24px; height: 24px; }
  .night-prep .enemy-icon img { height: 42px; }
  .night-prep .enemy small { font-size: 12px; }
  .night-prep .enemy-icon.boss { width: 28px; height: 28px; }
  .night-prep .enemy-icon.boss img { height: 56px; }
}

/* cx-4: 夜主型態 (prep line: long, or one short line on folded phones; day chip; fight bar), 神饌連攜's chip, the
   always-on core hint in the prep panel (Codex playtest), and the crow's paged talk (the first raid's three pages). */
.night-boss { cursor: pointer; }
.night-boss.form, .hud-form { color: #ffc27a; }
.hud-form { cursor: pointer; }
.boss-short { display: none; }
.boss-bar.form { border-color: #ffa040; }
.combo-chip { border-color: #9fe38a; }
.combo-chip b { color: #c8f5b0; }
.combo-chip.on b { color: inherit; }
.night-core { text-align: center; font-size: 14px; color: #c8f5b0; }
.intro-head { font-weight: bold; color: #ffe27a; margin-bottom: 4px; }
@media (max-width: 600px) {
  .night-core { font-size: 12px; }
}

/* fix-pt8 (playtest 8, 390x844: the 百夜祭 prep panel ran under the villager cards, its offerings untappable): the prep
   panel stops above the bottom bar (--nb, night.js) and scrolls inside; each row's rule text waits behind an ⓘ. */
.night-prep { max-height: calc(100vh - var(--nb, 126px) - 20px); max-height: calc(100dvh - var(--nb, 126px) - 20px);
  overflow-y: auto; overscroll-behavior: contain; flex-wrap: nowrap; justify-content: flex-start; }
.night-prep > * { flex-shrink: 0; }
@media (min-width: 601px) { .night-prep { max-height: min(calc(100vh - var(--nb, 126px) - 20px), 56vh); } } /* r6-2: groups open, the map still shows */
.offer-what:empty { display: none; }
.chip.info-chip { min-width: 0; min-height: 32px; margin-left: 4px; padding: 0 8px; font-size: 15px; background: transparent; color: #c8c0e0; border-color: #5a4f86; }
.night-tip-row { display: flex; justify-content: center; }
/* fix-pt8 (playtest 8: opened, the box reached 630 px and lay over the shrine hall): narrower when open (it wraps
   instead), and a tap on the map closes it first (ui/hud.js, scenes/village.js). */
@media (min-width: 601px) { .hud-status:not(.compact) { max-width: 460px; } }
/* 飛行航線 (round 4): the prep line; 夜後檢討: the result / morning rows */
.enemy.lanes { color: #9fd8ff; cursor: pointer; }
.enemy.lanes[hidden] { display: none; }
.night-review { margin: 6px 0; }
.review-worst { color: #c0392b; font-weight: bold; }
.review-hint { color: #7a5a1e; font-size: 0.95em; }
#night .ctx-btn:disabled { cursor: default; }

/* round-4 proposal 6. The 誓願札 cue on the HUD's collapsed row (the vows sit under 更多): a small round 「誓」. */
.hud-vowdot { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #6b4fa8; color: #fff3b0; font-size: 0.8em; line-height: 1.5; cursor: pointer; vertical-align: 1px; }
.hud-vowdot.on { background: #3f7a3a; }
/* 小烏鴉手帳: the explanations fold under their titles; omen / form pages reuse the 御朱印帳 grid (met = ink, unmet = grey ？？？). */
.handbook h3 { margin: 12px 0 6px; font-size: 15px; border-bottom: 1px solid #c9bfa8; }
.hb-intro { margin: 4px 0; padding: 4px 8px; border-radius: 6px; background: #f3ede0; }
.hb-intro summary { cursor: pointer; font-weight: bold; }
.hb-intro p { margin: 6px 0; line-height: 1.5; }
.hb-cell.met { border: 2px solid #4a3a7a; color: #2b2340; background: #f6f1ff; cursor: pointer; font: inherit; }
.hb-cell.met:hover { background: #ebe2ff; }
.hb-vows { display: block; width: 100%; margin: 6px 0; }
.hb-record { font-weight: bold; color: #4a3a7a; }
.hb-page h4 { margin: 10px 0 2px; font-size: 14px; }
.duty-tag.none { background: #8a847c; color: #fff; }
#hud .hud-row .hud-vowdot { margin-left: auto; }
#hud .hud-row .hud-vowdot + .hud-toggle { margin-left: 6px; }
#hud .hud-line .hud-vowdot { margin: 0 4px 0 0; }
/* round-4 leftover (tier 13 on a 390 px phone ran past the edge and cut the ▾): the raid row wraps between its chips
   (each chip stays whole) instead of running off; the 「誓」 starts it, so it is always on screen. */
@media (max-width: 600px) {
  .hud-line .hud-line2 { white-space: normal; }
  .hud-line .hud-line2 > * { white-space: nowrap; }
}
/* 回潮 (round-4 proposal 4): the prep line, the fight chip (who waits at which gap), the result line */
.night-rejoin { text-align: center; font-size: 14px; color: #c8c0e0; }
.night-rejoin-chip { color: #d9b8ff; }
.night-rejoin-result { color: #5b3fa0; } /* r9-1 (pt11): on the light result / morning panels (was #d9b8ff, unreadable on cream) */
@media (max-width: 600px) { .night-rejoin { font-size: 13px; } }
/* 白日差事 (opencode r5 4): a tired fan's card, top-left corner (the duty tag holds the right one) */
.tired-tag { position: absolute; top: -7px; left: -4px; padding: 0 4px; border-radius: 6px; background: #9a5a2a; color: #fff; font-size: 11px; line-height: 15px; pointer-events: none; }
.chore-cost { color: #8a4a1a; }
/* 季末市集 (r5-3, ui/fair.js): four stall slips (two by two, phones too), the 神社工程 bar */
.hud-fair { color: #f2c46d; }
.board-cards.fair-cards { grid-template-columns: repeat(2, 1fr); }
.fair-stall .board-tier { background: #b0702e; }
.fair-projects h3 { margin: 10px 0 4px; }
.fair-bar { height: 10px; margin: 4px 0; background: #e6dcc6; border-radius: 5px; overflow: hidden; }
.fair-bar i { display: block; height: 100%; background: #e0a020; }
.fair-give { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 480px) {
  .board-cards.fair-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .fair-cards .board-card { padding: 6px; font-size: 13px; }
}
/* 物資用途 (r5-3, ui/plan.js): one block per goal, ↑ / ↓ on its row; shortfalls in red */
.plan-goal { padding: 6px 0; border-top: 1px dashed #c9ad7e; }
.plan-goal .row { margin: 0; }
.plan-items { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.plan-short { color: #b3261e; }
.plan-ok { color: #3f8a46; }
.plan-move { min-width: 36px; padding: 2px 8px; }
.plan-offer { margin-top: 8px; }
.plan-offer .offer-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.plan-offer .chip.on { background: #f2c46d; outline: 2px solid #8a5a00; }
.plan-lost { color: #b3261e; font-size: 14px; margin: 2px 0; }
.visit-skip { margin-right: auto; opacity: 0.8; font-size: 0.9em; } /* r7-1: 略過 on member visits (visits.js) */
/* r9-1 (pt11): 深夜強化 — what a disabled star button lacks, and the jump chip at the shrine panel's top */
.festival-shop .deep-lack { display: block; color: #b3261e; font-size: 12px; }
.jump-deep { display: block; margin: 0 0 6px auto; color: #5b3fa0; }
/* r9-1 (pt11, 390x844: 加持 open took ~75% of the screen, its 供品 / 改修 chips scrolled sideways, clipped): on phones
   an open group's body wraps its chips and scrolls inside a capped height; the summary above stays put. */
@media (max-width: 600px) {
  .night-prep .prep-body { max-height: 24vh; max-height: 24dvh; overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; }
  .night-prep .prep-body > * { flex-shrink: 0; }
  .night-prep .offer-chips { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 4px; }
  .night-prep .offer-chips .chip { min-height: 36px; }
}