/* Room controls share the lobby's cream, teal and gold button materials. */
.room-action-label{display:none}
body.in-room{--room-header-height:64px}
body.in-room .app-header{height:var(--room-header-height);min-height:var(--room-header-height);padding:0 22px;gap:18px;background:linear-gradient(#fffef4,#fff6df);border-bottom:2px solid #d4c49a;box-shadow:0 3px 0 #8eaa7e18;flex-wrap:nowrap}
body.in-room .game-view{height:calc(100dvh - var(--room-header-height))}
body.in-room .brand{font-size:24px;letter-spacing:-.7px;gap:10px;flex-shrink:0}
body.in-room .brand-mark{width:37px;height:40px;border-radius:14px;border-color:#b1ebdb;background:linear-gradient(#37c5bd,#0a949e);box-shadow:0 4px 0 #08697430}
body.in-room .brand-mark .icon{width:27px;height:27px}
body.in-room .header-tools{gap:9px;flex-shrink:0;margin-left:auto}
body.in-room .language-picker{display:none}
body.in-room .header-tools .icon-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-width:44px;width:44px;height:44px;min-height:44px;padding:9px;border:2px solid #dac797;border-bottom:4px solid #b29b64;border-radius:14px;background:linear-gradient(#fffdf0,#f3e6bd);box-shadow:inset 0 2px #fffefa,0 3px 0 #c0b58815;color:#52765e;transition:transform .12s,filter .12s}
body.in-room .header-tools .icon-button .icon{width:21px;height:21px;flex-shrink:0}
body.in-room .header-tools .room-action,body.in-room .header-tools .room-setting{width:auto;padding:9px 14px;font-size:14px;font-weight:800;white-space:nowrap}
body.in-room .room-action-label{display:inline}
body.in-room #pauseButton{min-width:112px;background:linear-gradient(#39c4b6,#0b9b9e);border-color:#159b95;border-bottom-color:#07767b;color:#fffdf0;box-shadow:inset 0 2px #9ce5cb,0 3px 0 #086f7915}
body.in-room #pauseButton[aria-pressed="true"]{background:linear-gradient(#ffe098,#edbf5e);border-color:#d3a549;border-bottom-color:#ae8336;color:#6d562d;box-shadow:inset 0 2px #fff2c7}
body.in-room #leaveButton{border-color:#d2bd88;border-bottom-color:#aa935b;background:linear-gradient(#fff7d7,#efddaa);color:#6c7953;margin-left:5px}
body.in-room #soundButton[aria-pressed="false"]{color:#8e8b75;background:linear-gradient(#f4f0df,#e8e4d1);border-color:#cfccba;border-bottom-color:#afab91}
body.in-room .header-tools .icon-button:hover{transform:translateY(-1px);filter:brightness(1.035)}
body.in-room .header-tools .icon-button:active{transform:translateY(2px);filter:brightness(.99)}
body.in-room .header-tools .icon-button:focus-visible{outline:3px solid #42b9a5;outline-offset:3px}
body.in-room .game-topline{height:43px;min-height:43px;gap:17px;padding:4px 16px;background:#faf8e9;border-bottom:1px solid #ded8b8;font-size:12px;color:#5b775e;letter-spacing:0}
body.in-room .game-topline>span{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:28px}
body.in-room .game-topline .icon{display:block;width:17px;height:17px;color:#64a38a}
body.in-room #modeLabel{font-weight:800}
body.in-room #roomBadge{color:#7c8c70;font-size:11px}
body.in-room #districtCount{padding:5px 9px;border-radius:9px;background:#e9f3df;color:#5a8059;font-size:11px}
body.in-room .game-topline .compact-clock{font-size:23px!important;line-height:1;min-width:86px;padding:5px 11px;min-height:33px;border:1px solid #b8d8bc;border-bottom:3px solid #99bf9f;border-radius:11px;background:linear-gradient(#edf8df,#dcefd2);color:#118b83;font-variant-numeric:tabular-nums;box-shadow:inset 0 2px #faffee}
body.in-room .game-topline .compact-clock.urgent{color:#a66326;background:linear-gradient(#fff1d0,#f4ddac);border-color:#e2c58a;border-bottom-color:#c5a064}
body.in-room .campaign-hud{min-height:42px;gap:15px;padding:5px 16px;background:#eff3e2;border-bottom:2px solid #c6d6b2;color:#5e795a}
body.in-room .level-hud{gap:9px}
body.in-room .level-hud b{padding:5px 9px;border-radius:8px;border-color:#d6c68f;background:#fff5cf;font-size:12px;color:#98723b}
body.in-room .level-hud>span{font-size:13px;color:#537659}
body.in-room .objective-hud{font-size:12px;color:#719266}
body.in-room .campaign-hud>.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;width:auto;min-height:32px;height:32px;padding:5px 10px;border:1px solid #c3cba7;border-bottom:3px solid #a3b487;border-radius:10px;background:linear-gradient(#fffdeb,#e9edcf);color:#66825b;box-shadow:inset 0 1px #fffff4;font-size:11px;font-weight:800;flex-shrink:0}
body.in-room .campaign-hud>.icon-button .icon{width:17px;height:17px}
@media(max-width:1000px){body.in-room .header-tools .room-setting .room-action-label,body.in-room #fullscreenButton .room-action-label{display:none}body.in-room .header-tools .room-setting,body.in-room #fullscreenButton{width:44px;padding:9px}body.in-room .app-header{padding-inline:16px;gap:12px}}
@media(max-width:700px){body.in-room{--room-header-height:60px}body.in-room .app-header{padding:0 10px;gap:10px}body.in-room .brand{font-size:21px;gap:7px}body.in-room .brand-mark{width:31px;height:35px;border-radius:12px}body.in-room .brand-mark .icon{width:24px;height:24px}body.in-room .header-tools{gap:5px}body.in-room .header-tools .icon-button,body.in-room .header-tools .room-action,body.in-room .header-tools .room-setting{width:44px;min-width:44px;height:44px;min-height:44px;padding:9px;border-radius:13px;gap:0}body.in-room .header-tools .room-action-label{display:none}body.in-room #leaveButton{margin-left:0}body.in-room .game-topline{height:35px;min-height:35px;padding:3px 8px;gap:12px;font-size:11px}body.in-room #roomBadge{display:none}body.in-room #districtCount{font-size:10px;padding:4px 6px;gap:4px}body.in-room .game-topline .icon{width:15px;height:15px}body.in-room .game-topline .compact-clock{font-size:20px!important;min-width:74px;min-height:28px;padding:3px 8px;border-radius:9px}body.in-room .campaign-hud{min-height:37px;gap:6px;padding:3px 8px}body.in-room .level-hud{gap:5px}body.in-room .level-hud b{font-size:10px;padding:4px 6px}body.in-room .level-hud>span{font-size:11px;max-width:32vw}body.in-room .objective-hud{font-size:10px;gap:4px}body.in-room .campaign-hud .room-action-label{display:none}body.in-room .campaign-hud>.icon-button{width:34px;height:31px;min-height:31px;padding:5px}}
@media(max-width:359px){body.in-room .brand-name{display:none}body.in-room .header-tools{gap:5px!important}body.in-room .app-header{padding-inline:9px}body.in-room .game-topline{gap:8px}body.in-room #districtCount{font-size:9px}}
@media(max-height:650px) and (orientation:portrait){body.in-room{--room-header-height:54px}body.in-room .game-topline{height:32px;min-height:32px}body.in-room .campaign-hud{min-height:33px;padding-block:2px}}
@media(max-height:500px) and (orientation:landscape){body.in-room{--room-header-height:48px}body.in-room .brand{font-size:20px}body.in-room .brand-mark{width:29px;height:32px;border-radius:10px}body.in-room .header-tools{gap:7px}body.in-room .header-tools .icon-button,body.in-room .header-tools .room-action,body.in-room .header-tools .room-setting{height:36px;min-height:36px;width:38px;min-width:38px;padding:7px;border-radius:11px}body.in-room .header-tools .room-action-label{display:none}body.in-room .game-topline{height:28px;min-height:28px;font-size:10px;padding-block:2px}body.in-room .game-topline .compact-clock{font-size:18px!important;min-height:23px;padding:2px 8px;border-radius:8px}body.in-room .campaign-hud{min-height:29px;padding:2px 10px}body.in-room .level-hud b{padding:2px 6px;font-size:10px}body.in-room .level-hud>span{font-size:11px}body.in-room .campaign-hud>.icon-button{height:25px;min-height:25px;padding:3px 7px}body.in-room .campaign-hud .room-action-label{display:none}}
@media(prefers-reduced-motion:reduce){body.in-room .header-tools .icon-button{transition:none}}
body.in-room #fullscreenButton:not([hidden]){display:inline-flex}
@media(max-width:700px){body.in-room #pauseButton{width:44px;min-width:44px;padding:9px}}
@media(max-height:500px) and (orientation:landscape){body.in-room #pauseButton{width:38px;min-width:38px;padding:7px}}
@media(min-width:360px) and (max-width:700px){body.in-room .brand-name{font-size:18px;max-width:65px;white-space:normal;line-height:1.05}}