@font-face{font-family:'Game Room Pixel';src:url('assets/brand/game-room-pixel.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
:root{--menu-surface:#bfbfbb;--menu-ink:#073e45;--menu-teal:#06464a;--menu-light:#f2f2ec;--menu-shadow:#595b59;--menu-font:'Game Room Pixel','Courier New',monospace}
body.welcome-open{background:var(--menu-surface)}
body.welcome-open #room-app{visibility:hidden}
#welcome{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;padding:9px 10px 12px;background:var(--menu-surface);color:#181d1e;border:2px solid;border-color:var(--menu-light) var(--menu-shadow) var(--menu-shadow) var(--menu-light);overflow:auto;overscroll-behavior:contain;font-family:var(--menu-font);transition:opacity .22s ease;outline:none}
#welcome[hidden],#welcome [hidden]{display:none}
#welcome.leaving{opacity:0;pointer-events:none}
#welcome button{border-radius:0;backdrop-filter:none;font-family:var(--menu-font);font-weight:400;letter-spacing:0;transition:none;touch-action:manipulation}
#welcome button:focus-visible{outline:2px dotted currentColor;outline-offset:-7px}
#welcome button:disabled{cursor:wait}
.window-titlebar{height:clamp(34px,4.6vh,44px);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 7px 3px 16px;background:var(--menu-teal);color:#fff;border:1px solid;border-color:#676b68 var(--menu-light) var(--menu-light) #676b68}
.creator-credit{font:clamp(13px,1.5vw,23px)/1.2 var(--menu-font);white-space:nowrap}
#welcome .window-close{position:relative;flex:0 0 auto;width:32px;min-height:0;height:30px;padding:0;background:var(--menu-surface);color:#111;border:2px solid;border-color:var(--menu-light) var(--menu-shadow) var(--menu-shadow) var(--menu-light);box-shadow:1px 1px 0 #252525}
.window-close span:before,.window-close span:after{content:'';position:absolute;left:5px;right:5px;top:12px;height:3px;background:currentColor;transform:rotate(45deg)}
.window-close span:after{transform:rotate(-45deg)}
#welcome .window-close:active{border-color:var(--menu-shadow) var(--menu-light) var(--menu-light) var(--menu-shadow);box-shadow:none}
#welcome .window-close:disabled{color:#818581;box-shadow:none}
.mood-screen{flex:1;min-height:0;display:grid;grid-template-columns:minmax(240px,26.2%) minmax(0,1fr);gap:1.8%;padding:18px 7px 22px 20px}
.mood-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0}
.mood-identity{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center;padding:8px 20px 24px}
.mood-logo{display:block;width:min(100%,330px);height:auto;max-height:31vh;object-fit:contain}
.mood-controls{flex:0 0 auto}
#mood-title{margin:0 0 clamp(20px,3.2vh,34px);font:clamp(22px,2.3vw,38px)/1 var(--menu-font);font-weight:400;letter-spacing:.1em;text-align:center;color:var(--menu-ink)}
.room-list{padding:8px 6px;border:3px solid;border-color:var(--menu-shadow) var(--menu-light) var(--menu-light) var(--menu-shadow)}
#welcome .room-choice{display:flex;align-items:center;gap:clamp(18px,1.9vw,32px);width:100%;min-height:48px;height:clamp(48px,7.5vh,72px);padding:9px clamp(13px,1.4vw,23px);border:1px solid transparent;background:transparent;color:#171b1b;font-size:clamp(20px,2.2vw,37px);line-height:1;text-align:left;white-space:nowrap}
#welcome .room-choice:hover{background:#d1d1cb}
#welcome .room-choice[aria-checked=true]{background:var(--menu-teal);color:#fff;border-color:#eff0e9}
.room-diamond{display:block;flex:0 0 auto;width:.42em;height:.42em;background:currentColor;transform:rotate(45deg)}
#welcome .retro-button{min-height:48px;padding:15px 12px;background:var(--menu-surface);color:var(--menu-ink);border:3px solid;border-color:var(--menu-light) var(--menu-shadow) var(--menu-shadow) var(--menu-light);box-shadow:1px 1px 0 #90918b;font-size:22px;line-height:1.1}
#welcome .retro-button:hover{background:#ccccc6}
#welcome .retro-button:active{border-color:var(--menu-shadow) var(--menu-light) var(--menu-light) var(--menu-shadow);box-shadow:none;padding:17px 10px 13px 14px}
#welcome .start-button{display:block;width:100%;margin-top:clamp(20px,3.5vh,34px);min-height:clamp(62px,9vh,88px);font-size:clamp(24px,2.5vw,42px)}
#welcome .start-button:disabled{color:#555b58;background:var(--menu-surface)}
#mood-status{min-height:1.5em;margin:12px 0 0;font:12px/1.5 'Courier New',monospace;text-align:center;color:#273f41}
.menu-keyhint{display:flex;justify-content:space-between;gap:12px;margin:20px 5px 0;font:clamp(11px,1.25vw,20px)/1.3 var(--menu-font);letter-spacing:.05em;color:#393e3d;white-space:nowrap}
.room-preview{position:relative;min-width:0;min-height:0;background:#2a3332;border:3px solid;border-color:var(--menu-shadow) var(--menu-light) var(--menu-light) var(--menu-shadow);overflow:hidden}
.room-preview-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#preview-unavailable{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#f1f1e9;font:20px/1.5 var(--menu-font)}
#preview-unavailable span{margin-top:12px;font:13px/1.5 'Courier New',monospace}
.boot-screen{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center}
#boot-title{width:min(290px,64vw,40vh);margin:0;line-height:0;letter-spacing:0}
.boot-logo img{display:block;width:100%;height:auto}
.boot-loading{width:min(360px,72vw);margin-top:38px}
#boot-progress{display:block;appearance:none;width:100%;height:26px;padding:4px;border:2px solid;border-color:var(--menu-shadow) var(--menu-light) var(--menu-light) var(--menu-shadow);border-radius:0;background:var(--menu-surface)}
#boot-progress::-webkit-progress-bar{background:var(--menu-surface)}
#boot-progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--menu-teal) 0 13px,var(--menu-surface) 13px 16px)}
#boot-progress::-moz-progress-bar{background:repeating-linear-gradient(90deg,var(--menu-teal) 0 13px,var(--menu-surface) 13px 16px)}
#boot-status{font:14px/1.6 var(--menu-font);color:var(--menu-ink);margin:20px -20px 0}
#boot-retry{margin:20px auto 0}
@media(max-width:1050px) and (min-width:701px){
 .mood-screen{grid-template-columns:minmax(225px,27%) minmax(0,1fr);padding-left:8px;gap:16px}
 #welcome .room-choice{font-size:clamp(18px,2.25vw,25px);gap:15px;padding-left:10px;padding-right:6px}
 #mood-title{font-size:clamp(19px,2.3vw,25px);letter-spacing:.04em}
 .mood-identity{padding-left:10px;padding-right:10px}
 .menu-keyhint{font-size:10px;letter-spacing:0;gap:6px;margin-left:0;margin-right:0}
}
@media(max-height:650px) and (min-width:701px){
 #welcome{padding:6px}.mood-screen{padding-top:12px;padding-bottom:8px}
 .mood-identity{min-height:80px;padding:0 16px 10px}.mood-logo{max-height:26vh;width:230px}
 #mood-title{margin-bottom:14px;font-size:25px}
 #welcome .room-choice{height:44px;min-height:40px;font-size:clamp(18px,2.2vw,26px)}
 #welcome .start-button{margin-top:15px;min-height:50px;font-size:28px;padding:10px}
 #mood-status{margin-top:6px;font-size:10px}.menu-keyhint{margin-top:8px;font-size:11px}
}
@media(max-width:700px){
 #welcome{padding:6px;min-height:100%;height:100dvh}
 .window-titlebar{height:34px;padding-left:9px;gap:8px}.creator-credit{font-size:clamp(11px,3vw,17px)}
 #welcome .window-close{width:25px;height:24px}.window-close span:before,.window-close span:after{left:4px;right:4px;top:9px;height:2px}
 .mood-screen{flex:none;min-height:calc(100% - 34px);grid-template-columns:1fr;grid-template-rows:auto minmax(180px,1fr);gap:14px;padding:16px 8px 10px}
 .mood-sidebar{display:grid;grid-template-columns:clamp(76px,24vw,150px) minmax(0,1fr);align-items:center;column-gap:16px}
 .mood-identity{padding:0;min-height:0}.mood-logo{width:100%;max-height:140px}
 #mood-title{font-size:clamp(20px,5vw,28px);letter-spacing:.04em;margin-bottom:13px}
 .room-list{padding:4px;border-width:2px}
 #welcome .room-choice{height:44px;min-height:44px;padding:8px 9px;gap:12px;font-size:clamp(17px,4.35vw,27px)}
 #welcome .start-button{margin-top:12px;min-height:48px;padding:12px 8px;font-size:clamp(20px,5vw,28px);border-width:2px}
 #mood-status{font-size:10px;margin-top:7px;min-height:0}#mood-status:empty{display:none}
 .menu-keyhint{display:none}.room-preview{min-height:180px;aspect-ratio:1.4;border-width:2px}
 .boot-loading{margin-top:30px}
}
@media(max-width:370px){.mood-sidebar{grid-template-columns:70px minmax(0,1fr);gap:10px}.mood-screen{padding-left:3px;padding-right:3px}#welcome .room-choice{font-size:17px;gap:10px;padding-left:8px}}
@media(prefers-reduced-motion:reduce){#welcome{transition:none}}