/* 作業の音の部屋 — 見た目
 * 色: シリーズの地色 #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; }
/* ふりがなはスマホでも読める大きさ（最低 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, #cvGL { position: absolute; left: 0; top: 0; pointer-events: none; }
/* 第3室: 光と空気を重ねた絵（WebGL）。用意ができるまでは同じ基本背景の画像が見えている */
#cvGL { opacity: 0; transition: opacity .6s ease; }
#cvGL.ready { opacity: 1; }
#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; }


/* ---------------- 第3回で足した物 ---------------- */
/* 廊下: #r=… のリンクから来た時の、選ばれた扉と「03 森の朝の窓辺へ」 */
.door.selected { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent, #A6C88C) 55%, transparent)); }
.door.selected .doorGlow { opacity: 1; animation: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, color-mix(in srgb, var(--accent, #A6C88C) 45%, transparent), transparent 100%); }
#enterSel { position: absolute; left: 50%; transform: translateX(-50%); min-height: 48px; padding: 0 22px; border-radius: 24px;
  max-width: calc(100vw - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--title); font-weight: 500; font-size: 16px; letter-spacing: .06em; color: #1b2112;
  background: var(--accent, #A6C88C); box-shadow: 0 4px 22px rgba(0,0,0,.45); }
html[data-lang="en"] #enterSel { letter-spacing: .01em; font-size: 17px; }
#enterSel:hover { filter: brightness(1.06); }
#hint { bottom: auto; }
/* 再訪の 1 行（選んだ部屋の分だけ。扉の中には置かない） */
#welcome { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; width: min(560px, calc(100vw - 24px));
  font-size: 12.5px; line-height: 1.6; text-align: center; color: var(--on-soft); pointer-events: none;
  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); }
#welcome .w2 { font-size: 12px; opacity: .8; margin-left: .5em; white-space: nowrap; }
/* フッター: 動画版（準備中）と、音の出どころ（開くと読める） */
#ytPrep { color: rgba(242,237,228,.55); }
#credits { margin: 2px auto 0; max-width: 640px; }
#credits summary { cursor: pointer; display: inline-block; min-height: 32px; padding: 6px 10px; color: rgba(255,201,122,.85); list-style: none; }
#credits summary::-webkit-details-marker { display: none; }
#credits summary::after { content: " ▾"; font-size: 10px; }
#credits[open] summary::after { content: " ▴"; }
#credits .credits-body { text-align: left; max-height: 42vh; overflow-y: auto; padding: 10px 14px 6px; margin: 4px 0 2px;
  border-radius: 12px; background: rgba(9,11,17,.82); font-size: 11.5px; line-height: 1.6; }
#credits h3 { font-size: 12px; font-weight: 500; margin: 8px 0 2px; color: var(--on); }
#credits ul { margin: 0 0 4px; padding-left: 1.2em; }
#credits li { overflow-wrap: anywhere; }
#credits a { padding: 0; min-height: 0; display: inline; }

/* 部屋: 第3室の操作バー。狭い画面では「音の配合・タイマー・再生」を手前の段、「朝の変化・暗く・音だけ・共有」を補助の段に */
#room.r3 #bar { max-width: 640px; }
@media (max-width: 520px) {
  #room.r3 #bar { flex-wrap: wrap; justify-content: center; row-gap: 2px; border-radius: 26px; padding: 6px 8px 4px; }
  #room.r3 #bar .side.left { order: 1; }
  #room.r3 #bar #bPlay { order: 2; margin-left: 6px; }
  #room.r3 #bar .side.right { order: 3; flex-basis: 100%; justify-content: center; border-top: 1px solid rgba(242,237,228,.08); padding-top: 2px; }
  #room.r3 #barHint, #room.r3 #toast { bottom: calc(var(--sab) + 140px); }
}
/* 朝の変化（小さなパネル） */
.sheet.small { max-width: 460px; }
#sheetMorning .m-desc { font-size: 13.5px; line-height: 1.75; color: rgba(242,237,228,.86); margin: 4px 2px 12px; }
#sheetMorning .m-now { font-family: var(--title); font-weight: 500; font-size: 19px; margin: 0 2px 4px; color: var(--on); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; }
html[data-lang="en"] #sheetMorning .m-now { letter-spacing: 0; font-size: 20px; }
#sheetMorning .m-next { font-size: 14.5px; margin: 0 2px 4px; color: #cfe2b8; }
#sheetMorning .m-dawn { font-size: 13px; margin: 2px 2px 0; color: rgba(242,237,228,.72); }
/* 第3室にはじめて入った時の案内 */
#morningNote { position: absolute; left: 50%; top: calc(var(--sat) + 64px); transform: translateX(-50%); width: min(440px, calc(100% - 32px));
  padding: 16px 18px 12px; border-radius: 18px; background: rgba(10,12,18,.80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4); animation: cardIn 1.2s ease both; }
#morningNote .mn-title { margin: 0 0 6px; font-family: var(--title); font-weight: 500; font-size: 16px; color: #cfe2b8; letter-spacing: .06em; }
#morningNote .mn-body { margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: var(--on); }
#morningNote .mn-close { display: block; margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 22px;
  border: 1px solid var(--line); font-size: 14px; color: var(--on); }
#morningNote .mn-close:hover { background: rgba(242,237,228,.08); }
/* 音が出なかった時: 「タップして音を再生」 */
#tapPlay { position: absolute; left: 50%; bottom: calc(var(--sab) + 92px); transform: translateX(-50%); margin: 0; cursor: pointer;
  padding: 10px 18px; border-radius: 20px; background: var(--panel-strong); color: var(--amber); font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) { #room.r3 #tapPlay { bottom: calc(var(--sab) + 140px); } }
/* 音の配合: ときどき鳴く鳥の下の 1 行（注釈と「試しに聞く」） */
.calls-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 6px 38px; flex-wrap: wrap; }
.calls-note { font-size: 11.5px; color: rgba(242,237,228,.62); }
.calls-try { min-height: 40px; border: 1px solid var(--line); padding: 0 14px; font-size: 12.5px; }
.calls-try:disabled { opacity: .55; cursor: default; border-style: dashed; }
#room.r3 .pill[aria-pressed="true"] { background: #A6C88C; border-color: #A6C88C; color: #17200f; }
#room.r3 input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #A6C88C 0 var(--p, 50%), rgba(242,237,228,.18) var(--p, 50%) 100%); }
#room.r3 input[type="range"]::-webkit-slider-thumb { background: #A6C88C; box-shadow: 0 0 0 1px rgba(166,200,140,.6); }
#room.r3 input[type="range"]::-moz-range-progress { background: #A6C88C; }
#room.r3 input[type="range"]::-moz-range-thumb { background: #A6C88C; }
.row .name { overflow-wrap: anywhere; }
#toast.top { top: calc(var(--sat) + 16px); bottom: auto; white-space: nowrap; }
/* 第3室の選択色（若草）: 押されている札・はじめる・再生 */
#room.r3 .pill[aria-checked="true"] { background: #A6C88C; border-color: #A6C88C; color: #17200f; }
#room.r3 .main-btn { background: #A6C88C; color: #17200f; }
#room.r3 #bPlay { color: #c4dcae; background: rgba(166,200,140,.14); border-color: rgba(166,200,140,.6); }
#room.r3 #bPlay:hover { background: rgba(166,200,140,.22); }
#room.r3 .ib[aria-pressed="true"] { color: #c4dcae; }
#room.r3 .ib.dim-1::after, #room.r3 .ib.dim-2::after { background: #c4dcae; }
#room.r3 .ib.dim-2::after { box-shadow: 6px 0 0 #c4dcae, -6px 0 0 #c4dcae; }
#room.r3 .custom.on .custom-label { color: #c4dcae; }
#room.r3 #alarmOn { accent-color: #A6C88C; }
#room.r3 .card-actions button.primary { background: #A6C88C; border-color: #A6C88C; color: #17200f; }
#room.r3 .card-actions button.saved { color: #c4dcae; border-color: rgba(166,200,140,.5); }
/* 札: 英語の名前は 2 行まで折り返す */
html[data-lang="en"] .plate .plate-name { white-space: normal; max-width: calc(100% - 14px); line-height: 1.12; }
/* 縦の画面: 第3室の初めての案内は、時計にかからないよう下のほうに */
@media (max-aspect-ratio: 85/100) { #morningNote { top: auto; bottom: calc(var(--sab) + 156px); } }
/* 第3室: パネルは画面の高さの 75% まで（中はスクロール）。タイマーの目標は、狭い画面で 2 行まで */
#room.r3 .sheet { max-height: min(75vh, 680px); }
#timerBadge .g::before { content: " — "; }
@media (max-width: 520px) {
  #room.r3 #timerBadge { white-space: normal; max-width: calc(100% - 132px); border-radius: 16px; text-align: center; line-height: 1.35; padding: 6px 12px; }
  #room.r3 #timerBadge .t { display: block; }
  #room.r3 #timerBadge .g { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12.5px; opacity: .9; }
  #room.r3 #timerBadge .g::before { content: none; }
}
#hall.credits-open #welcome, #hall.credits-open #hint, #hall.credits-open #enterSel { visibility: hidden; }
#hall.credits-open #footer { background: linear-gradient(to bottom, rgba(9,11,17,0) 0, rgba(9,11,17,.88) 40px); padding-top: 44px; }

/* ---------------- 第3回の直し: 廊下へ戻る ---------------- */
/* 部屋の左上。操作バーと同じく、しばらく触らないと消え、画面に触れるとまた出る */
#bHall { position: absolute; top: calc(var(--sat) + 8px); left: calc(var(--sal) + 10px); min-height: 44px; min-width: 44px;
  padding: 0 16px 0 11px; border-radius: 22px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--on-soft); background: rgba(9,11,17,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, background .2s; letter-spacing: .04em; }
html[data-lang="en"] #bHall { letter-spacing: 0; }
#bHall .ico svg { width: 21px; height: 21px; }
#bHall:hover { color: var(--on); background: rgba(9,11,17,.62); }
#room.idle #bHall { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* 狭い画面では印（アイコン）だけ（タイマーの表示と重ならないように） */
@media (max-width: 520px) { #bHall { padding: 0; width: 44px; justify-content: center; } #bHall .lbl { display: none; } }
/* タイマーの途中で廊下へ戻ろうとした時の確かめ */
#leaveAsk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 32px));
  padding: 22px 20px 18px; border-radius: 18px; background: rgba(10,12,18,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: cardIn .5s ease both; z-index: 5; }
#leaveAsk .la-text { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--on); }
#leaveAsk .la-actions { display: grid; gap: 8px; }
#leaveAsk button { min-height: 48px; border-radius: 24px; border: 1px solid var(--line); font-size: 15px; color: var(--on); }
#leaveAsk button:hover { background: rgba(242,237,228,.06); }
#leaveAsk .la-no { background: var(--amber); color: #1d160c; border-color: var(--amber); }
#room.r3 #leaveAsk .la-no { background: #A6C88C; color: #17200f; border-color: #A6C88C; }