/* 机とCRTモニタ。部屋そのものは room.js がCanvasに描く。 */
html, body { margin: 0; height: 100%; overflow: hidden; background: #171310; }
#room { position: fixed; inset: 0; overflow: hidden; background: #171310; }
#stage { position: absolute; left: 0; top: 0; width: 2400px; height: 1560px; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.45,.05,.2,1); }
#stage.nomove { transition: none; }
#roombg { position: absolute; left: 0; top: 0; width: 2400px; height: 1560px; }
#glow { position: absolute; left: 500px; top: 1130px; width: 1400px; height: 420px; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, rgba(140,185,255,.3), rgba(140,185,255,0) 70%); }
#glow.on { opacity: 1; }
#monitor { position: absolute; left: 528px; top: 20px; width: 1344px; height: 1250px; z-index: 3; }
#moncv { position: absolute; left: 0; top: 0; width: 1344px; height: 1250px; }
#tube {
  position: absolute; left: 160px; top: 124px; width: 1024px; height: 768px; border-radius: 16px / 13px; overflow: hidden; background: #0b0d0b;
  isolation: isolate;
}
#screen { position: absolute; inset: 0; transform-origin: 50% 50%; filter: blur(.32px) contrast(1.05) saturate(1.1); }
#screen.off { visibility: hidden; }
#osdbtns { position: absolute; left: 396px; top: 1046px; display: flex; gap: 38px; }
#osdbtns i { width: 52px; height: 19px; border-radius: 10px; display: block; cursor: pointer;
  background: linear-gradient(#f4f1e7, #d3cfc1); box-shadow: 0 1px 2px rgba(80,75,60,.7), inset 0 1px 0 #fff; }
#osdbtns i:active { box-shadow: inset 0 1px 2px rgba(80,75,60,.7); }
#powerled { position: absolute; right: 196px; top: 1050px; width: 9px; height: 5px; border-radius: 3px; background: #5a4a20; }
#powerled.standby { background: #ffb020; box-shadow: 0 0 6px #ffb020; animation: blink 1.6s steps(2) infinite; }
#powerled.on { background: #48ff60; box-shadow: 0 0 6px #48ff60; }
@keyframes blink { 50% { opacity: .35; } }
#powerbtn { position: absolute; right: 130px; top: 1028px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #f7f4ea, #cfcbbc); box-shadow: 0 0 0 2px #c9c5b6, 0 0 0 3px rgba(255,255,255,.7), 0 2px 3px rgba(80,75,60,.8); }
#powerbtn:active { box-shadow: 0 0 0 2px #c9c5b6, inset 0 2px 3px rgba(80,75,60,.8); }

#kbd { position: absolute; left: 640px; top: 1212px; width: 1120px; height: 411px; z-index: 4; transform: perspective(1300px) rotateX(50deg); transform-origin: 50% 0; }
#mousecv { position: absolute; left: 1800px; top: 1190px; width: 420px; height: 452px; z-index: 4; transform: perspective(1300px) rotateX(50deg); transform-origin: 50% 0; }
#hddled { position: absolute; left: 2120px; top: 745px; width: 9px; height: 4px; background: #5a4a18; z-index: 2; }
#hddled.on { background: #ffcf40; box-shadow: 0 0 6px #ffb010; animation: hdd .12s steps(2) infinite; }
@keyframes hdd { 50% { opacity: .3; } }

/* ガラス */
#glass, #glass i { position: absolute; inset: 0; pointer-events: none; display: block; }
#glass { z-index: 5; border-radius: inherit; }
.scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.09) 0, rgba(0,0,0,.02) 1.5px, rgba(0,0,0,.09) 3px); }
.grille { background: repeating-linear-gradient(to right, rgba(255,60,60,.05) 0 1px, rgba(60,255,60,.05) 1px 2px, rgba(60,60,255,.05) 2px 3px); }
.vig { background: radial-gradient(ellipse 72% 72% at 50% 50%, rgba(0,0,0,0) 66%, rgba(0,0,0,.16) 88%, rgba(0,0,0,.42) 100%); box-shadow: inset 0 0 22px 6px rgba(0,0,0,.42); border-radius: inherit; }
.roll { height: 180px !important; bottom: auto !important; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.022), rgba(255,255,255,0)); animation: roll 9s linear infinite; }
@keyframes roll { from { transform: translateY(-200px); } to { transform: translateY(800px); } }
.refl { background:
  radial-gradient(ellipse 34% 22% at 22% 12%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%),
  linear-gradient(118deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 26%); }

#off { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background:
  radial-gradient(ellipse 60% 40% at 30% 20%, #2a2e2a 0%, #141714 55%, #0b0d0b 100%); transition: opacity .25s; }
#off.on { opacity: 1; pointer-events: auto; }
#beam { display: none; }

#screen.warmup { animation: warm 1.4s ease-out; }
@keyframes warm { 0% { filter: brightness(2.2) contrast(.4) blur(2px); transform: scale(1, .004); } 16% { transform: scale(1, 1.01); filter: brightness(1.6) contrast(.7) blur(1px); } 60% { filter: brightness(.9) contrast(.95); transform: scale(1, 1); } 100% { filter: blur(.32px) contrast(1.05) saturate(1.1); } }
#screen.shutdown { animation: shut .34s ease-in forwards; }
@keyframes shut { 0% { transform: scale(1, 1); filter: brightness(1); } 70% { transform: scale(1, .006); filter: brightness(3); } 100% { transform: scale(.0, .004); filter: brightness(4); } }
#tube.degauss #screen { animation: degauss 1.1s ease-out; }
@keyframes degauss {
  0% { transform: scale(1); filter: hue-rotate(0); } 8% { transform: scale(1.012) skewX(.7deg); filter: hue-rotate(50deg) saturate(2); }
  18% { transform: scale(.992) skewX(-.6deg); filter: hue-rotate(-40deg) saturate(1.8); } 30% { transform: scale(1.007) skewX(.4deg); filter: hue-rotate(30deg); }
  46% { transform: scale(.996) skewX(-.2deg); filter: hue-rotate(-16deg); } 70% { transform: scale(1.002); filter: hue-rotate(6deg); } 100% { transform: scale(1); filter: blur(.32px) contrast(1.05) saturate(1.1); } }

#osd { position: absolute; z-index: 7; left: 90px; bottom: 80px; color: #5cff6a; font: bold 22px "MS Gothic", monospace; text-shadow: 0 0 6px #2cff40; pointer-events: none; }

#hint { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; color: #e8e0cf; font: bold 14px "MS UI Gothic", sans-serif; text-shadow: 0 1px 2px #000; pointer-events: none; transition: opacity .5s; z-index: 10; }
#hint a { color: #e8e0cf !important; }
#hint.gone { opacity: 0; }
#cambtn { position: fixed; right: 10px; bottom: 8px; z-index: 11; color: #e8e0cf; background: rgba(20,16,12,.55); border: 1px solid rgba(232,224,207,.35); padding: 3px 8px; font: 12px "MS UI Gothic", sans-serif; cursor: pointer; }
#cambtn:hover { background: rgba(20,16,12,.85); }

/* ガラス面: 画面より一回り大きく、縁の影と部屋の映り込みを載せる */
#faceglass { position: absolute; left: 148px; top: 112px; width: 1048px; height: 792px; border-radius: 24px; pointer-events: none; z-index: 6;
  box-shadow: inset 0 16px 20px -6px rgba(0,0,0,.72), inset 12px 0 16px -8px rgba(0,0,0,.5), inset -12px 0 16px -8px rgba(0,0,0,.5), inset 0 -8px 12px -6px rgba(0,0,0,.4);
  background:
    radial-gradient(ellipse 26% 11% at 24% 9%, rgba(255,246,225,.11), rgba(255,246,225,0) 70%),
    radial-gradient(ellipse 90% 80% at 50% 46%, rgba(255,255,255,.018), rgba(255,255,255,0) 60%),
    linear-gradient(112deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.02) 100%); }
/* 画面の光が斜面に当たる */
#lipglow { position: absolute; left: 110px; top: 74px; width: 1124px; height: 868px; border-radius: 44px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .8s;
  box-shadow: inset 0 0 40px 12px rgba(165,195,255,.2); }
#monitor.lit #lipglow { opacity: 1; }
#off { background:
  radial-gradient(ellipse 30% 14% at 24% 10%, rgba(255,240,215,.16), rgba(255,240,215,0) 75%),
  radial-gradient(ellipse 70% 62% at 50% 52%, #262b28 0%, #161a18 58%, #0a0c0b 100%); }

#pcbtn { position: absolute; left: 2150px; top: 722px; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; z-index: 3; }
#pcbtn:hover { box-shadow: 0 0 10px 2px rgba(255,240,200,.45); }
#pcbtn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }

/* 机の上の雑誌の付録CD */
#magcd { position: absolute; left: 362px; top: 540px; width: 74px; height: 74px; border-radius: 50%; cursor: pointer; z-index: 3; background: conic-gradient(from 20deg,#dfe4ea,#b9d4ec,#e8d2ee,#f4ecc8,#cfe9d8,#dfe4ea,#c6cdd8,#e8d2ee,#dfe4ea); box-shadow: 2px 3px 7px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
#magcd:after { content: ''; position: absolute; left: 30px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: #3a3024; box-shadow: 0 0 0 7px rgba(235,238,242,.75), 0 0 0 8px rgba(150,155,165,.6); }
#magsheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 99998; width: 400px; padding: 18px 22px; background: #fbf8ee; color: #222; font: 13px/1.7 "MS PGothic",sans-serif; box-shadow: 0 6px 30px rgba(0,0,0,.7); user-select: text; -webkit-user-select: text; }
#magsheet .x { position: absolute; right: 8px; top: 4px; cursor: pointer; font-size: 16px; color: #666; }

/* 軽量モード */
html.lite #screen { filter: none; }
html.lite #faceglass, html.lite #lipglow, html.lite #glass { display: none; }
html.lite #kbd, html.lite #mousecv { transform: none; }
html.lite #stage { transition: none; }
html.lite #glow { display: none; }