/* 音の部屋 — 見た目
 * 色: シリーズの地色 #F7F4EC（アイコン・ファビコン）/ 墨 #2B2B26 / 絵の上の文字 #F2EDE4 / 琥珀 #FFC97A / 夜の青灰 #141B2B
 * UI パネルは部屋の絵を透かす半透明の黒（絵を隠さないため・夜に眩しくないため）。 */
@font-face { font-family: "Shippori Mincho"; font-weight: 500; font-display: swap; src: url("fonts/ShipporiMincho-Medium.sub.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 400; font-display: swap; src: url("fonts/ZenMaruGothic-Regular.sub.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 500; font-display: swap; src: url("fonts/ZenMaruGothic-Medium.sub.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400 600; font-display: swap; src: url("fonts/EBGaramond.sub.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 600; font-display: swap; src: url("fonts/Inter.sub.woff2") format("woff2"); }

:root {
  --cream: #F7F4EC;
  --ink: #2B2B26;
  --on: #F2EDE4;
  --on-soft: rgba(242, 237, 228, .86);
  --amber: #FFC97A;
  --night: #141B2B;
  --panel: rgba(9, 11, 17, .62);
  --panel-strong: rgba(9, 11, 17, .80);
  --line: rgba(242, 237, 228, .16);
  --ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --title: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
html[data-lang="en"] {
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title: "EB Garamond", Garamond, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--on); }
body { font-family: var(--ui); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { display: block; }

#app { position: fixed; inset: 0; }
section { position: absolute; inset: 0; overflow: hidden; }

/* ---------------- 廊下 ---------------- */
#hall { background: #0c0f16; }
#hall::before, #stage::before { content: ""; position: absolute; inset: -60px; pointer-events: none;
  background: var(--bg) center / cover no-repeat; filter: blur(32px) brightness(.45) saturate(.9); }
#hallImg, #roomImg, #roomDarkImg { position: absolute; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
#roomDarkImg { transition: opacity .8s ease; }
#hallImg { opacity: 0; transition: opacity .7s ease; }
#hallImg.ready { opacity: 1; }
#hallShade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(4,6,10,.55) 100%); }
#doors { position: absolute; inset: 0; }
.door { position: absolute; transform-origin: 0 50%; transform-style: preserve-3d; perspective: none; opacity: 0;
  transition: opacity .7s ease; padding: 0; border: 0; background: none; cursor: pointer; }
.door.ready { opacity: 1; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.door .doorway { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 72%, #fff0d8 0%, var(--accent, #FFC97A) 36%, #c9803a 72%, #5e3d1d 100%); }
.door:focus-visible { outline: 2px solid rgba(255,201,122,.7); outline-offset: 4px; }
.plate { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #2a1d10; font-family: var(--title); font-weight: 500; line-height: 1.15; text-align: center;
  text-shadow: 0 1px 0 rgba(255, 236, 196, .35); pointer-events: none; }
.plate.big { border-radius: 2px; background: linear-gradient(175deg, #c9a45e 0%, #b08944 45%, #94702f 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,232,180,.45), inset 0 -1px 0 rgba(60,40,10,.4); }
.plate.big::before, .plate.big::after { content: ""; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: #5f4520; box-shadow: 0 0 0 .5px rgba(255,230,180,.4); }
.plate.big::before { left: 5px; } .plate.big::after { right: 5px; }
.plate .plate-no { font-size: .58em; letter-spacing: .2em; opacity: .9; }
.plate .plate-name { white-space: nowrap; letter-spacing: .06em; }
html[data-lang="en"] .plate .plate-name { letter-spacing: .02em; }
html[data-lang="en"] .plate .plate-name { white-space: normal; max-width: calc(100% - 14px); line-height: 1.12; }
/* ふりがなはスマホでも読める大きさ（最低 10px・名前の 0.7 倍。10/25 運営者「読める大きさにする」）。札は扉の一部として押せる（縦の画面で札が扉の外に出ても、札を押せば入れる） */
.plate .plate-ruby { font-family: var(--ui); font-weight: 400; font-size: max(10px, .7em); letter-spacing: .12em; padding-left: .12em; line-height: 1.1; opacity: .9; margin-top: .12em; }
.door .plate { pointer-events: auto; }
.door .doorGlow { position: absolute; left: -12%; right: -12%; top: 100%; height: 18%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,201,122,.22), rgba(255,201,122,0) 100%);
  animation: glow 7s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .45; } }
.door:hover .doorGlow, .door:focus-visible .doorGlow { opacity: 1; animation: none; }
#doors .welcome { position: absolute; margin: 0; font-size: 12.5px; line-height: 1.6; text-align: center; padding: 0 6px;
  color: var(--on-soft); pointer-events: none; width: min(300px, calc(100vw - 24px)); transform: translateX(-50%);
  text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.6); }
#doors .welcome .w2 { font-size: 12px; opacity: .8; margin-left: .5em; }
#hint { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 88px); margin: 0 auto; text-align: center; padding: 0 16px;
  color: var(--on-soft); pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  font-size: 15px; letter-spacing: .14em; animation: breathe 4.5s ease-in-out infinite; }
html[data-lang="en"] #hint { letter-spacing: .06em; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
#lang { position: absolute; top: calc(var(--sat) + 10px); right: calc(var(--sar) + 10px); min-height: 44px; min-width: 44px;
  padding: 0 16px; border-radius: 22px; font-size: 13px; color: var(--on-soft); background: rgba(9,11,17,.38);
  font-family: "Inter", "Zen Maru Gothic", system-ui, sans-serif; }
#lang:hover { color: var(--on); background: rgba(9,11,17,.6); }
#footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(var(--sab) + 12px); text-align: center;
  font-size: 11px; line-height: 1.6; color: rgba(242,237,228,.72); }
#footer p { margin: 0 auto; max-width: 640px; }
#footer .brand { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--on-soft); margin-right: 10px; vertical-align: -2px; }
#footer .brand .logo svg { width: 16px; height: 16px; }
#footer a { color: rgba(255,201,122,.9); text-decoration: none; display: inline-block; padding: 4px 2px; min-height: 24px; }
#footer a:hover { text-decoration: underline; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* ---------------- 部屋 ---------------- */
#room { background: #06080c; }
#stage { position: absolute; inset: 0; transition: opacity 1.2s ease, filter 1.2s ease; }
#cvOut, #cvFx { position: absolute; left: 0; top: 0; pointer-events: none; }
#vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 48%, rgba(0,0,0,0) 55%, rgba(5,6,10,.15) 82%, rgba(5,6,10,.32) 100%),
              url("img/grain.png"); background-size: auto, 256px 256px; opacity: 1; }
#nightShade { position: absolute; inset: 0; pointer-events: none; background: #05070c; opacity: 0; transition: opacity 3s; }
#room.night #nightShade { opacity: .1; }
#dimLayer { position: absolute; inset: 0; pointer-events: none; background: #000; opacity: 0; transition: opacity .8s ease; }
#hideLayer { position: absolute; inset: 0; background: #04060a; opacity: 0; pointer-events: none; transition: opacity 1.2s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(242,237,228,.6); }
#hideLayer .logo svg { width: 28px; height: 28px; }
#hideLayer #hideTime { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#hideLayer #hideTip { font-size: 11px; opacity: .6; margin-top: 18px; }
#room.hidden-scene #hideLayer { opacity: 1; }
#room.hidden-scene #stage { opacity: 0; }

#topRight { position: absolute; top: calc(var(--sat) + 12px); right: calc(var(--sar) + 16px); text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
#now { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--on-soft); letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }
#nightLine { font-size: 12px; color: rgba(242,237,228,.8); white-space: nowrap; line-height: 1.5; margin-top: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,.75); }
@media (max-width: 340px) { #nightLine { white-space: normal; max-width: calc(100vw - 40px); font-size: 11px; } }
@media (max-aspect-ratio: 85/100) { #topRight { top: calc(var(--sat) + 6px); gap: 0; } #nightLine { margin-top: 1px; font-size: 11.5px; } }
@media (max-width: 520px) { #room.has-timer #nightLine { display: none; } }
#room.hidden-scene #topRight { opacity: 0; }
#timerBadge { position: absolute; top: calc(var(--sat) + 12px); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 180px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 14px; border-radius: 18px; background: var(--panel); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 15px; font-variant-numeric: tabular-nums; color: var(--on); letter-spacing: .02em; }
@media (max-width: 520px) { #timerBadge { top: calc(var(--sat) + 8px); max-width: calc(100% - 196px); min-width: 120px; font-size: 14px; padding: 7px 12px; } }
#loading { position: absolute; left: 50%; bottom: calc(var(--sab) + 96px); transform: translateX(-50%); font-size: 12px;
  color: rgba(242,237,228,.7); display: flex; gap: 8px; align-items: center; }
#loading .dots { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: breathe 1.6s infinite; }

/* 星の名前トグル（第2室。右上の時刻と深夜の行の下） */
#starsWrap { position: absolute; top: calc(var(--sat) + 44px); right: calc(var(--sar) + 16px); }
#room.night #starsWrap { top: calc(var(--sat) + 66px); }
#bStars { min-height: 44px; min-width: 44px;
  padding: 0 14px; border-radius: 22px; font-size: 12.5px; color: var(--on-soft); background: rgba(9,11,17,.38);
  display: inline-flex; align-items: center; gap: 7px; }
#bStars svg { width: 19px; height: 19px; }
#bStars[aria-pressed="true"] { color: #1d160c; background: var(--amber); }
#bStars:hover { color: var(--on); background: rgba(9,11,17,.6); }
#bStars[aria-pressed="true"]:hover { color: #1d160c; background: var(--amber); filter: brightness(1.05); }
@media (max-aspect-ratio: 85/100) { #starsWrap { top: calc(var(--sat) + 38px); } #room.night #starsWrap { top: calc(var(--sat) + 58px); } #bStars { padding: 0 12px; font-size: 12px; } }

/* 「薪を 1 本、くべました。」の 2 秒表示（画面上中央・タイマー表示の下） */
#logLine { position: absolute; top: calc(var(--sat) + 64px); left: 50%; transform: translate(-50%, -6px); opacity: 0;
  padding: 8px 18px; border-radius: 18px; background: var(--panel-strong); font-family: var(--title); font-weight: 500;
  font-size: 15px; color: var(--on); letter-spacing: .04em; pointer-events: none; transition: opacity .35s, transform .35s; }
#logLine.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) { #logLine { top: calc(var(--sat) + 58px); font-size: 13.5px; } }

/* はじめて開いた時だけの 1 行（操作バーの消えたあとの戻し方） */
#barHint { position: absolute; left: 50%; bottom: calc(var(--sab) + 86px); transform: translateX(-50%); margin: 0;
  padding: 7px 16px; border-radius: 16px; background: var(--panel); font-size: 12.5px; color: var(--on-soft);
  pointer-events: none; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }

/* 音の配合: 「ときどき鳴る音」の注釈 */
.event-note { font-size: 11.5px; line-height: 1.6; color: rgba(242,237,228,.62); margin: 2px 2px 0; }

/* 操作バー（5 秒触らないと消える） */
#bar { position: absolute; left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + 10px);
  margin: 0 auto; max-width: 560px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 6px 8px; border-radius: 34px; background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .7s ease, transform .7s ease; }
#bar .side { display: flex; gap: 2px; }
#room.idle #bar, #room.idle #timerBadge.fade { opacity: 0; transform: translateY(8px); pointer-events: none; }
#room.idle { cursor: none; }
.ib { width: 48px; height: 48px; min-width: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--on); transition: background .2s; position: relative; }
.ib:hover { background: rgba(242,237,228,.08); }
.ib[aria-pressed="true"] { color: var(--amber); }
.ib.dim-1::after, .ib.dim-2::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }
.ib.dim-2::after { box-shadow: 6px 0 0 var(--amber), -6px 0 0 var(--amber); }
#bPlay { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber); background: rgba(255,201,122,.14); border: 1.5px solid rgba(255,201,122,.55); flex: none; }
#bPlay svg { width: 26px; height: 26px; }
#bPlay:hover { background: rgba(255,201,122,.22); }
@media (max-width: 359px) { .ib { width: 44px; height: 44px; } #bar { padding: 5px 4px; gap: 0; } #bPlay { width: 54px; height: 54px; } }

/* シート（下からせり上がる） */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: min(80vh, 680px);
  overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px calc(var(--sab) + 18px);
  background: var(--panel-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.sheet.open { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
  position: sticky; top: -15px; z-index: 2; padding: 15px 0 8px; background: rgba(11,14,20,.97);
  border-bottom: 1px solid rgba(242,237,228,.08); margin: -15px -4px 8px; padding-left: 4px; padding-right: 4px; }
.sheet-head h2 { font-family: var(--title); font-weight: 500; font-size: 19px; margin: 0; letter-spacing: .06em; }
html[data-lang="en"] .sheet-head h2 { letter-spacing: .01em; font-size: 21px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
@media (max-width: 400px) { .presets { grid-template-columns: repeat(2, 1fr); } }
.pill { min-height: 44px; padding: 6px 10px; border-radius: 22px; border: 1px solid var(--line); font-size: 13px; color: var(--on-soft);
  line-height: 1.25; }
.pill:hover { border-color: rgba(242,237,228,.35); }
.pill[aria-pressed="true"], .pill[aria-checked="true"] { color: #1d160c; background: var(--amber); border-color: var(--amber); }
.row { display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; column-gap: 10px; padding: 2px 0; }
.row .ico { color: var(--on-soft); }
.row .ico svg { width: 22px; height: 22px; }
.row .name { font-size: 14px; color: var(--on); }
.row .val { font-size: 12px; text-align: right; color: rgba(242,237,228,.7); font-variant-numeric: tabular-nums; }
.row input { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--amber) 0 var(--p, 50%), rgba(242,237,228,.18) var(--p, 50%) 100%); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(242,237,228,.18); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--amber); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: var(--amber); border: 3px solid #2a2117; box-shadow: 0 0 0 1px rgba(255,201,122,.6); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); border: 3px solid #2a2117; }
.text-btn { min-height: 44px; padding: 0 12px; border-radius: 22px; font-size: 13px; color: rgba(242,237,228,.8);
  display: inline-flex; align-items: center; gap: 6px; }
.text-btn:hover { color: var(--on); background: rgba(242,237,228,.06); }
.text-btn svg { width: 18px; height: 18px; }
#bReset { margin-top: 6px; }
.sheet-foot { font-size: 10.5px; line-height: 1.6; color: rgba(242,237,228,.5); margin: 10px 0 0; }

.mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 8px; }
.custom { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.custom-label { font-size: 13px; color: rgba(242,237,228,.75); margin-right: auto; }
.custom.on .custom-label { color: var(--amber); }
#cVal { min-width: 72px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.goal-label { display: block; font-size: 13px; color: rgba(242,237,228,.8); margin: 4px 0 6px; }
#goal { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(242,237,228,.06); color: var(--on); font: inherit; font-size: 16px; }
#goal::placeholder { color: rgba(242,237,228,.4); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; min-height: 0; }
.chip { min-height: 44px; max-width: 100%; padding: 6px 14px; border-radius: 22px; background: rgba(242,237,228,.08); font-size: 13px;
  color: var(--on-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { background: rgba(242,237,228,.14); }
.sheet-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.main-btn { min-height: 48px; padding: 0 28px; border-radius: 24px; background: var(--amber); color: #1d160c; font-size: 15px; font-weight: 500; }
.main-btn:hover { filter: brightness(1.06); }

/* くわしく（アラーム・薪のこと）: たたんだままでも薪の 1 行が薄く見える */
#moreBox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
#bMore { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13.5px; color: var(--on-soft); text-align: left; }
#bMore::after { content: "▾"; font-size: 12px; opacity: .7; transition: transform .25s; }
#bMore[aria-expanded="true"]::after { transform: rotate(180deg); }
#bMore:hover { color: var(--on); }
#logHint { font-size: 11.5px; color: rgba(242,237,228,.58); margin: -2px 2px 10px; }
#moreBody { padding-bottom: 6px; }
.more-sec { margin: 10px 0 14px; }
.more-sec h3 { font-size: 13px; font-weight: 500; color: var(--on); margin: 0 0 6px; }
.alarm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#alarmOn { width: 22px; height: 22px; accent-color: var(--amber); }
#alarmTime { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(242,237,228,.06); color: var(--on); font: inherit; font-size: 16px; }
#alarmTime:disabled { opacity: .45; }
.alarm-example { font-size: 12px; color: rgba(242,237,228,.75); margin: 4px 0 2px; }
.alarm-note { font-size: 11px; color: rgba(242,237,228,.5); margin: 0 0 4px; }
.logs-body { font-size: 12.5px; line-height: 1.7; color: rgba(242,237,228,.8); margin: 0 0 4px; }
.logs-count { font-size: 12.5px; color: var(--amber); margin: 0; }

/* 終わりのカード */
#card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 40px); overflow-y: auto;
  padding: 26px 22px 20px; border-radius: 20px; background: rgba(10,12,18,.80); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: cardIn 1.6s ease both; }
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }
.card-title { font-family: var(--title); font-weight: 500; font-size: 21px; line-height: 1.6; margin: 0 0 6px; letter-spacing: .04em; }
html[data-lang="en"] .card-title { font-size: 24px; letter-spacing: 0; }
.card-goal { margin: 0 0 18px; font-size: 14px; color: rgba(242,237,228,.8); word-break: break-all; }
.card-log { margin: 14px 0 0; font-size: 12.5px; color: var(--amber); letter-spacing: .06em; }
.card-actions { display: grid; gap: 8px; }
.card-actions button { min-height: 48px; border-radius: 24px; border: 1px solid var(--line); font-size: 15px; color: var(--on); }
.card-actions button:hover { background: rgba(242,237,228,.06); }
.card-actions button.primary { background: var(--amber); color: #1d160c; border-color: var(--amber); }
.card-actions button.saved { color: var(--amber); border-color: rgba(255,201,122,.5); }
#room.card-open #dimCard { opacity: 1; }

#toast { position: absolute; left: 50%; bottom: calc(var(--sab) + 92px); transform: translate(-50%, 8px); opacity: 0;
  padding: 9px 16px; border-radius: 18px; background: var(--panel-strong); font-size: 13px; pointer-events: none;
  transition: opacity .35s, transform .35s; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast .url { display: block; margin-top: 6px; font-size: 12px; user-select: all; -webkit-user-select: all; word-break: break-all; color: var(--amber); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  #hint, #doorGlow { animation: none; }
  .sheet { transition-duration: .2s; }
}
/* 英語版のロゴは "SOUND ROOMS"（企画書 1-2） */
html[data-lang="en"] #footer .brand .site { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }