:root {
  --night: 0;
  --dusk: 0;
  --ink: #2b1a0f;
  --paper: #fff8ec;
  --wood: #3a2414;
  --amber: #f0a042;
  --amber-deep: #c96f1c;
  --leaf: #1f6b45;
  --rose: #c8463c;
  --glass: rgba(255, 248, 236, 0.86);
  --glass-dark: rgba(30, 20, 12, 0.72);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --bw: min(calc(100vw - 32px), 600px);
  --hud-h: 112px;
  --dock-h: 96px;
}
* { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  background: #1c140d;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* ===== 空 ===== */
.sky, .sky > div { position: fixed; inset: 0; }
.sky-day { background: url(assets/bg_day.webp) center / cover no-repeat; }
.sky-night { background: url(assets/bg_night.webp) center / cover no-repeat; opacity: var(--night); }
.sky-dusk { background: linear-gradient(180deg, rgba(255, 120, 60, 0.45), rgba(255, 170, 90, 0.2) 60%, transparent); opacity: var(--dusk); }
.sky::after { content: ''; position: fixed; inset: 0; background: rgba(255, 248, 236, 0.18); opacity: calc(1 - var(--night)); }

/* ===== 上の情報 ===== */
.hud {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px rgba(30, 15, 5, 0.18);
}
.hud-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 8px; align-items: end; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: 0.8rem; font-weight: 700; color: #6b4a30; letter-spacing: 0.02em; }
.stat b { font-size: 1.12rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-money b { font-size: 1.3rem; color: #6b3a0c; }
.stat small { font-size: 0.8rem; font-weight: 700; color: var(--leaf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-sub { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.82rem; font-weight: 700; min-width: 0; }
.clock { padding: 3px 10px; border-radius: 999px; background: var(--wood); color: #ffe2b5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank { color: #8a4b10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rank-bar { flex: 1 1 40px; min-width: 40px; height: 6px; border-radius: 3px; background: rgba(58, 36, 20, 0.15); overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--amber-deep); transform-origin: left; transform: scaleX(0.02); transition: transform 600ms var(--out); }
.rank-next { color: #7a5a40; white-space: nowrap; }

/* ===== 建物 ===== */
.world {
  position: fixed; inset: 0; z-index: 1;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--hud-h) + 24px) 16px calc(var(--dock-h) + env(safe-area-inset-bottom) + 8px);
  outline: none;
}
.scene { min-height: 100%; margin: 0 -16px; padding: 0 16px; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; }
.building-wrap { width: var(--bw); margin: 0 auto; }
.roof { width: 106%; margin: 0 -3% -7.2%; position: relative; z-index: 2; pointer-events: none; }
.roof img, .ground img { width: 100%; height: auto; filter: brightness(calc(1 - 0.5 * var(--night))) saturate(calc(1 - 0.25 * var(--night))); }
.building {
  position: relative; z-index: 1;
  background: var(--wood);
  border: 5px solid var(--wood);
  border-bottom: 0;
  box-shadow: 0 30px 60px rgba(20, 10, 4, 0.45);
}
.ground { width: max(130%, 100vw); margin: -2px 0 0 50%; translate: -50% 0; position: relative; z-index: 0; pointer-events: none; }
.ground img { aspect-ratio: 1200 / 230; max-height: 240px; object-fit: cover; object-position: top; }

.floor { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.floor.is-rising { animation: rise 620ms var(--spring) both; transform-origin: bottom; }
@keyframes rise {
  from { opacity: 0; transform: translateY(40px) scaleY(0.6); }
  to { opacity: 1; transform: none; }
}
.floor-tag {
  position: absolute; z-index: 6; left: 4px; top: 4px;
  padding: 2px 7px; border-radius: 8px;
  background: var(--wood); color: #ffd9a0;
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.02em;
  pointer-events: none;
}

.room {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  padding: 0; border: 0; margin: 0; cursor: pointer; overflow: hidden;
  background: #241509;
  container-type: inline-size;
  touch-action: manipulation;
  transition: transform 140ms var(--out);
}
.room > img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.room:active { transform: scale(0.97); }
.room:focus-visible { outline: 4px solid var(--amber); outline-offset: -4px; z-index: 5; }
.room.is-new { animation: settle 520ms var(--spring) 100ms both; }
@keyframes settle {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}
/* 夜の暗さと窓の灯り */
.room::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #141a3c; mix-blend-mode: multiply; opacity: calc(0.45 * var(--night));
}
.room-glow {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(85% 75% at 50% 40%, rgba(255, 175, 75, 0.6), rgba(255, 140, 40, 0.18) 65%, transparent 90%);
  opacity: var(--night);
}
.room.is-empty .room-glow { opacity: 0; }
.room.is-empty > img { filter: saturate(0.7); }
.room-plus {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 2px;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.room-plus b {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(168, 88, 15, 0.94); font-size: 1.5rem; font-weight: 900; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}
.room-plus small { font-size: 0.8rem; font-weight: 900; }
.room-badge {
  position: absolute; z-index: 4; right: 4px; top: 4px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 900; line-height: 1.5;
  background: rgba(255, 248, 236, 0.92); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.room-badge::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; background: currentColor; }
.room-badge.good::before { background: var(--leaf); }
.room-badge.ok::before { background: var(--amber); }
.room-badge.bad::before { background: var(--rose); }

/* 歩く住人と猫 */
.walker {
  position: absolute; z-index: 2; left: 0; bottom: 6%;
  width: 22cqw; pointer-events: none;
  animation: walk 14s linear infinite;
}
.walker-cat { width: 18cqw; bottom: 5.5%; }
.walker img { width: 100%; height: auto; transform-origin: bottom; animation: bob 0.6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) brightness(calc(1 - 0.35 * var(--night))); }
@keyframes walk {
  0%    { transform: translateX(4cqw) scaleX(1); }
  47%   { transform: translateX(74cqw) scaleX(1); }
  50%   { transform: translateX(74cqw) scaleX(-1); }
  97%   { transform: translateX(4cqw) scaleX(-1); }
  100%  { transform: translateX(4cqw) scaleX(1); }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-4%); } }

.float-coin {
  position: absolute; z-index: 5; left: 50%; top: 55%;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 243, 210, 0.95); color: #6b3a0c;
  font-size: 0.8rem; font-weight: 900; white-space: nowrap; pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  animation: coin 1.4s var(--out) both;
}
@keyframes coin {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}

/* ===== 下の操作 ===== */
.dock {
  position: fixed; z-index: 20; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px);
  translate: -50% 0;
  display: flex; gap: 10px; padding: 8px;
  width: min(calc(100vw - 32px), 460px);
  border-radius: 24px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 12px 30px rgba(0, 0, 0, 0.35);
}
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 56px; padding: 8px 14px; border: 0; border-radius: 16px; cursor: pointer;
  touch-action: manipulation; user-select: none;
  transition: transform 120ms var(--out), background-color 160ms, opacity 160ms;
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sheet .btn:focus-visible { outline-color: var(--wood); }
.btn-title { font-size: 1.02rem; font-weight: 900; line-height: 1.2; }
.btn-sub { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dock .btn-primary { flex: 1.6; }
.dock .btn-ghost { flex: 1; }
.btn-primary { background: linear-gradient(180deg, #f6b04f, var(--amber-deep)); color: #2a1404; box-shadow: 0 3px 0 #8a4a10, 0 6px 16px rgba(201, 111, 28, 0.35); }
.btn-primary:active { box-shadow: 0 1px 0 #8a4a10; }
.btn-primary.is-short { background: #6b5545; color: #e9d8c4; box-shadow: 0 3px 0 #3d2c20; }
.btn-ghost { background: rgba(255, 255, 255, 0.12); color: #ffe9c9; }
.btn-ghost[aria-pressed='true'] { background: rgba(240, 160, 66, 0.3); }
.btn-danger { background: #f3e2d4; color: #8f2a20; }
.btn-danger.is-armed { background: #b23a31; color: #fff; }

/* ===== シート ===== */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(15, 8, 3, 0.45);
  opacity: 0; transition: opacity 320ms var(--out);
}
.scrim.is-open { opacity: 1; }
.sheet {
  position: fixed; z-index: 50; left: 50%; bottom: 0;
  width: min(100vw, 640px); max-height: min(86dvh, 820px);
  display: flex; flex-direction: column;
  margin-left: calc(min(100vw, 640px) / -2);
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(105%);
  transition: transform 440ms var(--spring);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }
.sheet-grip, .sheet-head { flex: none; }
.sheet-grip { display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.sheet-grip span { width: 40px; height: 5px; border-radius: 3px; background: rgba(58, 36, 20, 0.25); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 8px 20px; touch-action: none; }
.sheet-head h2 { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: 0; line-height: 1.3; }
.sheet-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(58, 36, 20, 0.08); font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.sheet-close { transition: transform 120ms var(--out); }
.sheet-close:active { transform: scale(0.95); }
.sheet-close:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 20px; }
.sheet-lead { margin: 0 4px 12px; font-size: 1rem; font-weight: 700; color: #6b4a30; }

.type-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.type-card {
  align-content: start;
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-align: left;
  padding: 8px; border: 0; border-radius: 18px; cursor: pointer;
  background: #fff; box-shadow: 0 1px 0 rgba(58, 36, 20, 0.08), 0 4px 14px rgba(58, 36, 20, 0.08);
  transition: transform 120ms var(--out);
}
.type-card:active { transform: scale(0.98); }
.type-card:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
.type-card.is-off .type-img { opacity: 0.5; filter: grayscale(0.6); }
.type-card.is-locked .type-img img { filter: brightness(0.25) blur(3px); }
.type-img { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: #241509; }
.type-img img { width: 100%; height: 100%; object-fit: cover; }
.type-info { display: grid; gap: 2px; min-width: 0; }
.type-name { font-size: 1.12rem; font-weight: 900; }
.type-cost { font-size: 1rem; font-weight: 900; color: #9a4f0c; font-variant-numeric: tabular-nums; }
.type-meta { font-size: 0.82rem; font-weight: 700; color: var(--leaf); }
.type-desc { font-size: 0.88rem; font-weight: 500; color: #5a4030; line-height: 1.5; }
.type-why { justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #f3e2d4; color: #8f2a20; font-size: 0.78rem; font-weight: 900; }

.detail-img { border-radius: 18px; overflow: hidden; aspect-ratio: 1; max-height: min(34dvh, 340px); margin: 0 auto 12px; background: #241509; }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.detail-stats div { padding: 10px; border-radius: 14px; background: #fff; display: grid; gap: 2px; }
.detail-stats span { font-size: 0.78rem; font-weight: 700; color: #7a5a40; }
.detail-stats b { font-size: 1.02rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.detail-h { margin: 0 4px 6px; font-size: 1rem; font-weight: 900; }
.reasons { list-style: none; margin: 0 0 12px; padding: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.reasons li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 1rem; font-weight: 700; }
.reasons li + li { border-top: 1px solid rgba(58, 36, 20, 0.08); }
.reasons .up { color: var(--leaf); }
.reasons .down { color: var(--rose); }
.detail-desc { margin: 0 4px 14px; font-size: 1rem; color: #5a4030; line-height: 1.6; }
.detail-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  position: sticky; bottom: -20px; margin: 0 -16px -20px; padding: 12px 16px 20px;
  background: var(--paper); box-shadow: 0 -8px 16px rgba(58, 36, 20, 0.06);
}

/* 昼夜の切り替えを4回/秒の段差にしない */
.sky-night, .sky-dusk, .sky::after, .room::before, .room-glow { transition: opacity 250ms linear; }
.roof img, .ground img { transition: filter 250ms linear; }

/* シート: 閉じる方は短く、閉じかけは押せない */
.sheet:not(.is-open) { transition-duration: 300ms; pointer-events: none; }
.scrim:not(.is-open) { transition-duration: 240ms; pointer-events: none; }
.sheet::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 240px; background: var(--paper); }

/* 満足度が変わった部屋の札を一瞬知らせる */
.room-badge.is-up { animation: badge-up 900ms var(--out); }
.room-badge.is-down { animation: badge-down 900ms var(--out); }
@keyframes badge-up { 0%, 40% { background: #d7f0e2; transform: scale(1.12); } 100% { transform: none; } }
@keyframes badge-down { 0%, 40% { background: #f7d9d4; transform: scale(1.12); } 100% { transform: none; } }

/* 目標 */
.goal {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0; min-width: 0;
  font-size: 0.88rem; font-weight: 700; line-height: 1.35;
}
.goal-label { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--leaf); color: #fff; font-size: 0.8rem; font-weight: 900; }
.goal-text { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.goal-reward { flex: none; color: #9a4f0c; font-weight: 900; font-variant-numeric: tabular-nums; }
.goal.is-done { animation: goal-done 700ms var(--out); }
@keyframes goal-done { 0% { transform: scale(0.96); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

/* 建てる前の見通し */
.type-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.type-pv { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.88rem; font-weight: 900; }
.pv-h.good { color: var(--leaf); }
.pv-h.ok { color: #8a5a10; }
.pv-h.bad { color: #a8322a; }
.pv-i { color: var(--leaf); font-variant-numeric: tabular-nums; }
.type-fx { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.82rem; font-weight: 700; color: #5a4030; }
.type-fx .up { color: var(--leaf); }
.type-fx .down { color: #a8322a; }
.type-meta { color: #5a4030; }
.sheet-lead, .type-meta, .type-desc, .detail-desc, .toast, .goal-text { word-break: auto-phrase; text-wrap: pretty; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== お知らせ（1つのピル） ===== */
.toasts {
  position: fixed; z-index: 60; left: 50%; translate: -50% 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-h) + 16px);
  width: max-content; max-width: min(calc(100vw - 32px), 460px);
  text-align: center;
  pointer-events: none;
}
body:has(.sheet.is-open) .toasts { bottom: auto; top: calc(env(safe-area-inset-top) + 8px); }
.toast {
  padding: 10px 16px; border-radius: 999px;
  background: rgba(36, 22, 12, 0.92); color: #fff3e0;
  font-size: 0.94rem; font-weight: 700; line-height: 1.4; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 200ms var(--out), transform 200ms var(--out);
}
.toast.is-on { opacity: 1; transform: none; transition-duration: 320ms; }
.toast:empty { display: none; }
.toast-good { background: rgba(28, 88, 58, 0.95); }
.toast-bad { background: rgba(150, 40, 32, 0.95); }

/* ===== 幅ごと ===== */
.hud-sub { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 429px) {
  .rank-bar { display: none; }
}
@media (max-width: 380px) {
  .hud { padding-left: 12px; padding-right: 12px; }
  .hud-main { gap: 6px; }
  .stat b { font-size: 1rem; }
  .stat-money b { font-size: 1.12rem; }
  .goal-reward { display: none; }
}
@media (min-width: 600px) and (min-height: 501px) {
  .type-grid { grid-template-columns: 1fr 1fr; }
  .type-card { grid-template-columns: 1fr; align-items: start; }
  .type-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  :root { --bw: min(calc(100vw - 680px), 600px, max(420px, calc((100dvh - 190px) / 1.45))); }
  .hud {
    top: 24px; left: 24px; right: auto; width: 300px; padding: 18px 20px;
    border-radius: 24px;
  }
  .hud-main { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .stat-money { grid-column: 1 / -1; }
  .stat-money b { font-size: 1.8rem; }
  .stat b { font-size: 1.3rem; }
  .hud-sub { margin-top: 16px; }
  .rank { flex: 1 1 100%; font-size: 1rem; white-space: normal; }
  .rank-next { flex: 1 1 100%; white-space: normal; }
  .goal { flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(58, 36, 20, 0.1); font-size: 1rem; }
  .goal-label { order: 1; }
  .goal-text { flex-basis: 100%; order: 2; }
  .goal-reward { order: 3; }
  .world { padding-top: 48px; }
}

/* スマホ横向き: 上の情報を詰める */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  :root { --dock-h: 0px; --bw: min(calc(100vw - 360px), 480px); }
  .hud { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; padding-top: 6px; padding-bottom: 6px; padding-left: calc(env(safe-area-inset-left) + 16px); padding-right: calc(env(safe-area-inset-right) + 16px); }
  .hud-main { flex: 1 1 auto; grid-template-columns: auto auto auto auto; gap: 18px; align-items: center; }
  .stat { flex-direction: row; align-items: baseline; gap: 6px; }
  .hud-sub { margin-top: 0; flex: none; }
  .rank-bar { display: none; }
  .goal { flex: 1 1 100%; margin-top: 4px; }
  .dock { left: auto; right: calc(env(safe-area-inset-right) + 12px); translate: 0 0; bottom: 12px; width: 150px; flex-direction: column; }
  .toasts { left: calc(env(safe-area-inset-left) + 16px); translate: 0 0; bottom: 12px; }
  .sheet { max-height: calc(100dvh - 56px); }
  .type-grid { grid-template-columns: 1fr 1fr; }
  .type-card { grid-template-columns: 72px 1fr; }
  .type-img { width: 72px; height: 72px; }
}

/* 閉じているシートと暗幕は、画面にもキーボードにも残さない */
.sheet[hidden], .scrim[hidden] { display: none; }
.type-why:empty { display: none; }

/* 夜は上の帯を暗い板にして、夜景の中で浮かせない */
.hud { transition: background-color 600ms var(--out), color 600ms var(--out); }
.is-night .hud { --glass: rgba(40, 26, 16, 0.84); color: #fff1dc; }
.is-night .stat-label, .is-night .rank-next { color: #e3c9a8; }
.is-night .stat-money b { color: #ffd28a; }
.is-night .stat small, .is-night .goal-label + .goal-text { color: #fff1dc; }
.is-night .stat small { color: #9be0b8; }
.is-night .rank { color: #ffc978; }
.is-night .goal-reward { color: #ffc978; }
.is-night .rank-bar { background: rgba(255, 241, 220, 0.18); }
.is-night .rank-bar i { background: #f0a042; }
.is-night .clock { background: #f0a042; color: #2a1404; }
.is-night .goal-label { background: #2f8a5c; }

/* マウスで使う時の反応 */
@media (hover: hover) and (pointer: fine) {
  .room:hover > img { filter: brightness(1.08); }
  .room.is-empty:hover .room-plus b { transform: scale(1.08); }
  .room-plus b { transition: transform 160ms var(--out); }
  .type-card:hover { box-shadow: 0 1px 0 rgba(58, 36, 20, 0.08), 0 8px 22px rgba(58, 36, 20, 0.14); }
  .btn-primary:hover { filter: brightness(1.05); }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }
}

@media (max-width: 380px) {
  .toasts { max-width: 288px; }
}

/* スマホ横向きの詳細: 絵を左、数字とわけを右 */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  .detail { display: grid; grid-template-columns: 38% 1fr; column-gap: 14px; align-items: start; }
  .detail-img { grid-row: 1 / span 4; max-height: 62dvh; margin: 0; }
  .detail-stats, .detail-h, .reasons, .detail-desc { grid-column: 2; }
  .detail-actions { grid-column: 1 / -1; }
}