/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  小忧的房间 · room.imxiaoyou.online                             ║
 * ║  style.css  —  只有你知道的那间深夜的屋子                       ║
 * ║                                                                  ║
 * ║  光源逻辑：全场只有一盏夜灯 + 窗外天色                           ║
 * ║  那把空椅子：干净、木质、空着，不点任何东西                     ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; background: #1a1008; }
body {
  min-height: 100dvh;
  background: #1a1008;
  overflow-x: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: #d4b896;
}
body.sheet-on { overflow: hidden; }

:root {
  --wood-light:#c4915a; --wood-mid:#9b6c3e; --wood-dark:#6b4423; --wood-shadow:#3a2010;
  --wall-base:#2c1f12; --wall-mid:#241a0e;
  --lamp-warm:rgba(255,200,100,.18); --lamp-core:rgba(255,220,140,.55);
  --paper:#f2e8d5; --paper-aged:#e4d5b8; --ink:#2c1f12; --ink-faint:#7a5c3a;
  --sky-top:#050a1a; --sky-bot:#0d1535; --sky-glow:rgba(40,60,140,.35); --win-opacity:.92;
}
html[data-sky="night"] { --sky-top:#040912; --sky-bot:#0d1535; --sky-glow:rgba(30,50,130,.4); --win-opacity:.9; }
html[data-sky="dawn"]  { --sky-top:#1a0d2e; --sky-bot:#e07050; --sky-glow:rgba(200,100,60,.35); --win-opacity:.7; }
html[data-sky="day"]   { --sky-top:#87ceeb; --sky-bot:#ddf0ff; --sky-glow:rgba(180,220,255,.5); --win-opacity:.45;
                         --lamp-warm:rgba(255,200,100,.08); --lamp-core:rgba(255,220,140,.28); }
html[data-sky="dusk"]  { --sky-top:#1a0a18; --sky-bot:#d4501a; --sky-glow:rgba(210,90,20,.5); --win-opacity:.7; }

.room {
  position: relative; width: 100%; min-height: 100dvh; max-width: 900px; margin: 0 auto;
  overflow: hidden; background: var(--wall-base); transition: background 3s ease;
}
.wall {
  position: absolute; inset: 0 0 32% 0; z-index: 0;
  background:
    repeating-linear-gradient(97deg, transparent 0 3px, rgba(0,0,0,.04) 3px 4px),
    repeating-linear-gradient(173deg, transparent 0 5px, rgba(255,200,120,.025) 5px 6px),
    radial-gradient(ellipse 120% 80% at 30% 110%, #3d2510 0%, #251608 55%, #1a0f06 100%);
  transition: background 3s ease;
}
.wall-glow {
  position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 22% 92%, var(--lamp-core) 0%, var(--lamp-warm) 40%, transparent 70%);
  transition: opacity 2s ease, background 3s ease;
}
.floor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 34%; z-index: 1;
  background:
    radial-gradient(ellipse 90% 120% at 20% 120%, rgba(180,110,40,.55) 0%, rgba(80,40,10,.6) 45%, rgba(30,15,5,.8) 100%),
    repeating-linear-gradient(180deg, rgba(255,180,80,.06) 0 1px, transparent 1px 11px, rgba(0,0,0,.12) 11px 12px, transparent 12px 24px),
    repeating-linear-gradient(87deg, transparent 0 60px, rgba(100,50,10,.07) 60px 62px, transparent 62px 140px),
    linear-gradient(180deg, #7a4e24 0%, #5a3515 40%, #3a2010 100%);
  transition: background 3s ease;
}

/* 窗户 */
.win { position: absolute; top: 6%; right: 8%; width: clamp(120px,22%,200px); aspect-ratio: 3/4; z-index: 10; }
.win-sky {
  position: absolute; inset: 4px 4px 18px 4px; border-radius: 1px; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%); transition: background 3s ease;
}
.win-sky::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 100%, var(--sky-glow) 0%, transparent 70%); transition: background 3s ease;
}
.win-star { position: absolute; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 2s ease; z-index: 2; }
.win-star.s1 { width: 2px; height: 2px; top: 18%; left: 25%; }
.win-star.s2 { width: 1px; height: 1px; top: 30%; left: 65%; }
.win-star.s3 { width: 2px; height: 2px; top: 10%; left: 55%; }
html[data-sky="night"] .win-star, html[data-sky="dawn"] .win-star.s1 { opacity: 1; animation: star-twinkle 4s ease-in-out infinite alternate; }
html[data-sky="night"] .win-star.s2 { animation-delay: 1.3s; }
html[data-sky="night"] .win-star.s3 { animation-delay: 2.7s; }
@keyframes star-twinkle { from { opacity:.5; transform:scale(.8);} to { opacity:1; transform:scale(1.2);} }
.win-frame {
  position: absolute; inset: 0 0 16px 0; border: 6px solid var(--wood-mid); border-bottom-width: 3px;
  border-radius: 2px; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 2px var(--wood-dark), inset 0 0 0 3px var(--wood-light), 0 2px 8px rgba(0,0,0,.6);
}
.win-frame::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:5px; transform:translateX(-50%);
  background: var(--wood-mid); box-shadow: inset 1px 0 0 var(--wood-light), inset -1px 0 0 var(--wood-dark); }
.win-frame::after { content:""; position:absolute; top:50%; left:0; right:0; height:5px; transform:translateY(-50%);
  background: var(--wood-mid); box-shadow: inset 0 1px 0 var(--wood-light), inset 0 -1px 0 var(--wood-dark); }
.win-sill {
  position: absolute; bottom: 0; left: -6px; right: -6px; height: 18px; z-index: 4;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 60%, var(--wood-dark) 100%);
  border-radius: 1px 1px 2px 2px; box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,160,.3);
}
.win-clock {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; z-index: 5; pointer-events: none;
  font-size: .65rem; letter-spacing: .12em; color: rgba(220,240,255,.7);
  text-shadow: 0 0 6px rgba(100,160,255,.6); font-variant-numeric: tabular-nums; transition: color 2s ease;
}
html[data-sky="day"] .win-clock { color: rgba(40,80,120,.8); text-shadow: none; }
html[data-sky="dawn"] .win-clock, html[data-sky="dusk"] .win-clock { color: rgba(255,180,100,.85); text-shadow: 0 0 6px rgba(255,140,60,.5); }
.win-sky-name { position:absolute; top:8px; right:10px; z-index:5; pointer-events:none;
  font-size:.6rem; letter-spacing:.08em; color: rgba(200,220,255,.5); transition: color 2s ease; }
html[data-sky="day"] .win-sky-name { color: rgba(60,120,180,.6); }
html[data-sky="dawn"] .win-sky-name, html[data-sky="dusk"] .win-sky-name { color: rgba(255,160,80,.7); }

/* 可点物件 */
.thing { position: absolute; background: none; border: none; padding: 0; cursor: pointer; z-index: 20;
  -webkit-tap-highlight-color: transparent; outline: none; }
.thing:focus-visible .thing-art { outline: 2px dashed rgba(255,200,100,.6); outline-offset: 3px; }

/* 书架 */
.shelf { top: 8%; left: 3%; width: clamp(90px,16%,150px); }
.shelf .thing-art { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; row-gap: 0; column-gap: 1px; }
.shelf .thing-art .shelf-board { grid-column: 1 / -1; }
.shelf-board {
  display: block; width: 100%; height: 5px; margin: 2px 0; border-radius: 1px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 50%, var(--wood-dark) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,180,.3);
}
.shelf-book { display:block; width:100%; height: clamp(20px,4.5vw,36px); border-radius: 1px 1px 0 0; position: relative; }
.shelf-book.b1 { background: linear-gradient(170deg,#8b4513 0%,#6b3410 60%,#4a2008 100%); box-shadow: inset -2px 0 3px rgba(0,0,0,.4), inset 1px 0 2px rgba(255,180,80,.15); }
.shelf-book.b2 { background: linear-gradient(170deg,#2d4a3e 0%,#1e3328 60%,#122018 100%); height: clamp(28px,5.5vw,44px); box-shadow: inset -2px 0 3px rgba(0,0,0,.4), inset 1px 0 2px rgba(100,200,120,.1); }
.shelf-book.b3 { background: linear-gradient(170deg,#5c4a1e 0%,#3e3010 60%,#281e08 100%); box-shadow: inset -2px 0 3px rgba(0,0,0,.35); }
.shelf-book.b4 { background: linear-gradient(170deg,#7a3535 0%,#5a2020 60%,#3a1010 100%); height: clamp(24px,4vw,32px); box-shadow: inset -2px 0 3px rgba(0,0,0,.4); }
.shelf-book.b5 { background: linear-gradient(170deg,#3a3a5c 0%,#252540 60%,#161628 100%); height: clamp(30px,5.8vw,46px); box-shadow: inset -2px 0 3px rgba(0,0,0,.4), inset 1px 0 2px rgba(150,150,255,.1); }
.shelf-book.b6 { background: linear-gradient(170deg,#4a3c1a 0%,#2e2508 60%,#1e1805 100%); box-shadow: inset -2px 0 3px rgba(0,0,0,.35); }
.shelf-book::before { content:""; position:absolute; top:0; bottom:0; left:0; width:2px;
  background: linear-gradient(180deg, rgba(255,220,160,.25) 0%, rgba(255,200,100,.08) 100%); }

/* 书桌 */
.desk {
  position: absolute; bottom: 32%; left: 0; width: 42%; height: clamp(28px,5%,44px); z-index: 15;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 30%, var(--wood-dark) 100%);
  border-radius: 0 3px 0 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,180,.35), inset 0 -1px 0 rgba(0,0,0,.3);
}
.desk::before { content:""; position:absolute; inset:0; border-radius:inherit;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.05) 18px 19px); }
.desk::after { content:""; position:absolute; top:100%; left:0; right:0; height:10px;
  background: linear-gradient(180deg, var(--wood-dark) 0%, var(--wood-shadow) 100%); border-radius: 0 0 2px 0; }

/* 唱片机 */
.speaker { bottom: calc(32% + clamp(28px,5%,44px) + 2px); left: 4%; width: clamp(44px,8%,72px); z-index: 16; }
.speaker .thing-art { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; }
.sp-horn {
  display:block; width: clamp(28px,5.5vw,48px); height: clamp(28px,5.5vw,48px); border-radius:50%;
  background: conic-gradient(from 200deg, #2a1e0a 0deg, #c8a050 40deg, #e8c070 60deg, #b89040 90deg, #7a5820 130deg,
    #c09040 160deg, #e0b860 200deg, #9a7030 240deg, #2a1e0a 360deg);
  box-shadow: 0 2px 8px rgba(0,0,0,.6), inset 0 0 12px rgba(0,0,0,.5), 0 0 0 2px rgba(100,70,20,.6);
  position: relative; margin-bottom: -4px; z-index: 1;
}
.sp-horn::after { content:""; position:absolute; inset:30%; border-radius:50%;
  background: radial-gradient(circle, #1a1008 30%, #3a2a10 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.sp-body {
  display:block; width:100%; height: clamp(28px,5vw,44px); border-radius: 3px 3px 2px 2px; position: relative;
  background: linear-gradient(135deg, var(--wood-light) 0%, var(--wood-mid) 40%, var(--wood-dark) 80%, var(--wood-shadow) 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.3), inset 1px 0 0 rgba(255,200,100,.2), inset -1px 0 0 rgba(0,0,0,.3);
}
.sp-body::before { content:""; position:absolute; inset:4px; border-radius:1px; border:1px solid rgba(100,70,30,.5);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
.sp-body::after { content:""; position:absolute; top:3px; left:3px; width:30%; height:30%; border-radius:50%;
  background: radial-gradient(ellipse, rgba(255,230,150,.15) 0%, transparent 70%); }
.sp-arm { display:block; width:3px; height: clamp(16px,3vw,24px); border-radius:2px;
  background: linear-gradient(180deg,#c0a050 0%,#8a6020 100%);
  position:absolute; bottom: clamp(28px,5vw,44px); right:15%; transform: rotate(20deg); transform-origin: bottom center;
  box-shadow: 1px 0 3px rgba(0,0,0,.4); z-index: 2; }

/* 手账 */
.diary { bottom: calc(32% + clamp(28px,5%,44px) + 2px); left: 22%; width: clamp(52px,10%,88px); z-index: 16; }
.diary .thing-art { position: relative; width: 100%; height: clamp(36px,7vw,58px); display: block; }
.dg-page { display:block; position:absolute; top:4px; bottom:0; width:48%; }
.dg-page.l { left:0; transform: rotate(-2deg); transform-origin: right bottom; border-radius: 1px 0 0 2px;
  background: linear-gradient(108deg,#f0e4cc 0%,#e8d8bc 50%,#d8c8a8 100%);
  box-shadow: -1px 1px 4px rgba(0,0,0,.35), inset 0 0 8px rgba(0,0,0,.06); }
.dg-page.r { right:0; transform: rotate(2deg); transform-origin: left bottom; border-radius: 0 1px 2px 0;
  background: linear-gradient(72deg,#eddfc4 0%,#e4d4b0 50%,#d4c49a 100%);
  box-shadow: 1px 1px 4px rgba(0,0,0,.35), inset 0 0 8px rgba(0,0,0,.06); }
.dg-page.l::before, .dg-page.r::before { content:""; position:absolute; left:10%; right:10%; top:25%; height:1px;
  background: rgba(120,90,50,.15); box-shadow: 0 5px 0 rgba(120,90,50,.12), 0 10px 0 rgba(120,90,50,.1), 0 15px 0 rgba(120,90,50,.08); }
.dg-page.r::after { content:""; position:absolute; bottom:0; right:0; width:10px; height:10px;
  background: linear-gradient(135deg, transparent 50%, rgba(180,140,80,.5) 50%); border-radius: 0 0 2px 0; }
.diary .thing-art::before { content:""; position:absolute; top:0; bottom:0; left: calc(50% - 3px); width:6px; z-index:5; border-radius:1px;
  background: linear-gradient(90deg, rgba(80,50,20,.4) 0%, rgba(140,100,50,.3) 30%, rgba(80,50,20,.5) 70%, rgba(50,30,10,.3) 100%); }
.dg-ribbon { display:block; position:absolute; top:-4px; left: calc(50% + 4px); width:4px; height: clamp(18px,3.5vw,28px); z-index:6;
  background: linear-gradient(180deg,#8b2020 0%,#6b1818 100%); border-radius: 0 0 2px 2px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.dg-ribbon::after { content:""; position:absolute; bottom:0; left:-2px; right:-2px; height:6px;
  clip-path: polygon(0 0, 50% 100%, 100% 0); background: inherit; }

/* 门 */
.door { bottom: 0; right: 10%; width: clamp(56px,10%,90px); height: clamp(100px,20%,160px); z-index: 18; }
.door .thing-art { position: relative; width: 100%; height: 100%; display: block; }
.door-leaf { display:block; position:absolute; inset:0; border-radius: 2px 2px 0 0;
  background: linear-gradient(160deg,#8a5c28 0%,#7a4e20 20%,#6a4018 60%,#5a3210 80%,#4a2808 100%);
  box-shadow: -2px 0 6px rgba(0,0,0,.5), inset 2px 0 4px rgba(255,200,100,.08), inset -2px 0 4px rgba(0,0,0,.3); }
.door-leaf::before { content:""; position:absolute; left:12%; right:12%; top:8%; height:38%; border-radius:1px;
  border: 2px solid rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,200,120,.12); }
.door-leaf::after { content:""; position:absolute; left:12%; right:12%; top:52%; bottom:8%; border-radius:1px;
  border: 2px solid rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,200,120,.12); }
.door .thing-art::after { content:""; position:absolute; top:5%; bottom:0; right:-1px; width:2px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,150,80,.12) 20%, rgba(200,150,80,.25) 50%, rgba(200,150,80,.12) 80%, transparent 100%); }
.door-knob { display:block; position:absolute; top:48%; left:16%; width: clamp(6px,1.2vw,10px); height: clamp(6px,1.2vw,10px);
  border-radius:50%; background: radial-gradient(circle at 35% 35%, #e8c870 0%, #c0a040 45%, #8a7020 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 -1px 1px rgba(0,0,0,.3); }
.door-plate { display:flex; align-items:center; justify-content:center; position:absolute; bottom:30%; left:50%;
  transform: translateX(-50%); width:80%; padding:3px 4px; border-radius:1px;
  background: linear-gradient(135deg,#c8a040 0%,#a08030 50%,#c0a040 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,160,.3); }
.door-plate b { font-size:.38rem; font-weight:400; color:#3a2808; letter-spacing:.04em; white-space:nowrap;
  font-family: Georgia, "Noto Serif SC", serif; }

/* 夜灯 ★全屋唯一光源 */
.lamp { position: absolute; bottom: calc(32% + clamp(28px,5%,44px)); left: 0; width: clamp(28px,5%,44px); z-index: 30; pointer-events: none; }
.lamp-halo { position:absolute; bottom:0; left:50%; width: clamp(180px,45vw,400px); height: clamp(180px,45vw,400px);
  border-radius:50%; pointer-events:none; transform: translateX(-50%) translateY(30%);
  background: radial-gradient(circle at center, rgba(255,220,130,.28) 0%, rgba(255,190,80,.15) 25%, rgba(255,160,60,.07) 50%, transparent 70%);
  animation: lamp-breathe 4s ease-in-out infinite; }
@keyframes lamp-breathe {
  0%,100% { opacity:.85; transform: translateX(-50%) translateY(30%) scale(1); }
  50%     { opacity:1;   transform: translateX(-50%) translateY(30%) scale(1.05); }
}
.lamp-body { position: relative; width: 100%; }
.lamp-body::before { content:""; display:block; width:100%; aspect-ratio:1.2;
  background: linear-gradient(160deg, rgba(255,240,200,.9) 0%, rgba(255,200,100,.8) 50%, rgba(180,120,40,.7) 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 0 8px rgba(255,200,80,.7)); }
.lamp-body::after { content:""; display:block; width:25%; height: clamp(30px,5vw,50px); margin:0 auto;
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood-dark) 100%); border-radius:1px;
  box-shadow: inset 1px 0 1px rgba(255,200,100,.2); }

/* 椅子 ★灵魂 */
.chair { position: absolute; bottom: 32%; right: 22%; width: clamp(52px,9%,80px); z-index: 19; pointer-events: none; }
.chair-back { position:relative; width:100%; height: clamp(40px,7.5vw,64px); border-radius: 3px 3px 1px 1px;
  background: linear-gradient(160deg, var(--wood-light) 0%, var(--wood-mid) 40%, var(--wood-dark) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 1px 0 2px rgba(255,220,150,.2), inset -1px 0 2px rgba(0,0,0,.25); }
.chair-back::before { content:""; position:absolute; left:12%; right:12%; top:30%; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--wood-dark) 0%, var(--wood-mid) 50%, var(--wood-dark) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 -1px 0 rgba(255,200,100,.1); }
.chair-back::after { content:""; position:absolute; left:12%; right:12%; top:62%; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--wood-dark) 0%, var(--wood-mid) 50%, var(--wood-dark) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 -1px 0 rgba(255,200,100,.1); }
.chair-seat { position:relative; width:108%; margin-left:-4%; height: clamp(8px,1.5vw,12px); border-radius:2px;
  background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 50%, var(--wood-dark) 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,160,.25); }
.chair-leg { position:absolute; top:100%; width:7%; height: clamp(22px,4vw,34px);
  background: linear-gradient(180deg, var(--wood-mid) 0%, var(--wood-dark) 100%); border-radius: 0 0 2px 2px; }
.chair-leg.l1 { left: 10%; } .chair-leg.l2 { right: 10%; }
.chair-leg::after { content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:200%; height:4px;
  background: radial-gradient(ellipse, rgba(0,0,0,.4) 0%, transparent 70%); }
.chair::before { content:""; position:absolute; top:50%; left:50%; transform: translate(-50%,-60%); width:120%; height:60%;
  background: radial-gradient(ellipse at center, rgba(255,210,140,.04) 0%, transparent 70%); pointer-events:none; }

/* 提示标签 */
.thing-tip { position:absolute; bottom: calc(100% + 6px); left:50%; transform: translateX(-50%) translateY(4px);
  background: rgba(30,18,6,.88); color: rgba(220,190,140,.95); font-size:.7rem; letter-spacing:.08em;
  padding: 3px 8px 3px 7px; border-radius:2px; white-space:nowrap; pointer-events:none; opacity:0; z-index:50;
  transition: opacity .2s ease, transform .2s ease; border:1px solid rgba(160,110,50,.3); backdrop-filter: blur(4px); }
.thing:hover .thing-tip, .thing:focus-visible .thing-tip { opacity:1; transform: translateX(-50%) translateY(0); }
.door .thing-tip { bottom:auto; top:20%; left:auto; right: calc(100% + 8px); transform: translateX(4px) translateY(0); }
.door:hover .thing-tip, .door:focus-visible .thing-tip { transform: translateX(0) translateY(0); }
.tip-go { display:inline-block; margin-left:3px; transition: transform .2s ease; }
.thing:hover .tip-go { transform: translateX(3px); }

/* 低语 */
.whisper { position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; z-index:50; pointer-events:none;
  font-size:.68rem; color: rgba(180,140,90,.45); letter-spacing:.12em;
  font-family: Georgia, "Noto Serif SC", serif; font-style: italic; }

/* 手账浮层 */
.sheet-scrim { position:fixed; inset:0; z-index:100; background: rgba(20,12,4,.7); backdrop-filter: blur(2px);
  animation: scrim-in .25s ease forwards; }
@keyframes scrim-in { from{opacity:0} to{opacity:1} }
.sheet { position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); z-index:101;
  width: min(88vw,520px); max-height:80dvh; display:flex; flex-direction:column; border-radius:2px; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(120,90,50,.08) 23px 24px),
    linear-gradient(160deg,#f4ebd8 0%,#ede0c4 40%,#e6d5b2 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(160,120,60,.2), 4px 0 0 0 rgba(100,60,20,.15);
  animation: sheet-in .3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes sheet-in { from{opacity:0; transform:translate(-50%,-48%) scale(.97)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
.sheet-top { display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  padding: .9rem 1.2rem .6rem; border-bottom:1px solid rgba(120,90,50,.18); }
.sheet-title { font-family: Georgia,"Noto Serif SC",serif; font-size:1.05rem; font-weight:400; color:#3a2808; letter-spacing:.15em; }
.sheet-close { background:none; border:1px solid rgba(120,90,50,.25); border-radius:50%; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: rgba(80,50,20,.7);
  font-size:.75rem; transition: background .15s ease,color .15s ease; flex-shrink:0; }
.sheet-close:hover { background: rgba(120,90,50,.12); color:#3a2808; }
.sheet-body { flex:1; overflow-y:auto; padding: 1.2rem 1.4rem; scrollbar-width:thin; scrollbar-color: rgba(120,90,50,.3) transparent; }
.sheet-body p { font-family: Georgia,"Noto Serif SC",serif; font-size:.9rem; line-height:1.85; color:#3e2c10;
  margin-bottom:.9rem; text-indent:2em; }
.sheet-body p:last-child { margin-bottom:0; }
.sheet-nav { display:flex; align-items:center; justify-content:center; gap:8px; padding:.7rem 1rem;
  border-top:1px solid rgba(120,90,50,.15); flex-shrink:0; }
.sheet-dot { width:7px; height:7px; border-radius:50%; border:1px solid rgba(120,90,50,.45); background:transparent;
  cursor:pointer; padding:0; transition: background .2s ease, transform .2s ease; }
.sheet-dot.on, .sheet-dot.active, .sheet-dot:hover { background: rgba(120,90,50,.55); transform: scale(1.2); }

/* 手机 */
@media (max-width: 640px) {
  .win { top:5%; right:5%; width: clamp(90px,30vw,130px); }
  .shelf { top:5%; left:2%; width: clamp(80px,28vw,110px); }
  .desk { bottom:30%; width:60%; height:26px; }
  .speaker { left:3%; width: clamp(40px,11vw,58px); bottom: calc(30% + 28px); }
  .diary { left:28%; width: clamp(48px,14vw,68px); bottom: calc(30% + 28px); }
  .door { right:4%; width: clamp(52px,14vw,72px); height: clamp(90px,22vw,130px); }
  .lamp { bottom: calc(30% + 26px); width: clamp(24px,7vw,36px); }
  .chair { bottom:30%; right:24%; width: clamp(44px,13vw,64px); }
  .thing-tip { font-size:.65rem; padding:3px 6px; }
  .door .thing-tip { top:auto; bottom: calc(100% + 4px); right:auto; left:50%; transform: translateX(-50%) translateY(4px); }
  .door:hover .thing-tip, .door:focus-visible .thing-tip { transform: translateX(-50%) translateY(0); }
  .sheet { width:94vw; max-height:88dvh; }
  .whisper { font-size:.6rem; bottom:.7rem; }
}

/* 无障碍 */
:focus-visible { outline: 2px solid rgba(255,200,100,.8); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .win-star { opacity:.9; }
  .lamp-halo { opacity:.9; }
}