:root {
    color-scheme: dark;
    --presentation-width: 800px;
    --classic-offset-x: 0px;
    --classic-offset-scale: 0;
    --safe-left: 0px;
    --safe-right: 0px;
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

html,
body,
#viewport {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    touch-action: none;
}

body {
    position: fixed;
    inset: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#suddenDeathBanner {
    position: absolute;
    z-index: 1400;
    left: 50%;
    top: 42%;
    min-width: 330px;
    padding: 13px 22px;
    border: 2px solid rgba(255, 207, 92, .9);
    border-radius: 12px;
    background: rgba(46, 8, 8, .9);
    color: #ffe479;
    font: 900 20px/24px Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 2px #250000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Classic lobby room filters. */
#lobbyRoomFilters {
    position: absolute;
    z-index: 2;
    left: 11px;
    right: 11px;
    top: 51px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    touch-action: pan-x;
}
#lobbyRoomFilters::-webkit-scrollbar { display: none; }
#lobbyRoomFilters button {
    flex: 0 0 auto;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(126, 188, 228, .17);
    border-radius: 8px;
    background: rgba(4, 18, 31, .55);
    color: #809aab;
    font-size: 7px;
    font-weight: 800;
}
#lobbyRoomFilters button.active { border-color: rgba(78, 216, 255, .55); background: rgba(26, 119, 156, .4); color: #e5f9ff; }
#lobbyMainPanel #roomsList { top: 82px; }
.device-phone #lobbyMainPanel #roomsList { top: 84px; }

/* The new classic room options use text controls; all imagery around them is
 * still the original room art on iPad and the approved phone composition. */
#roomFixedOptions button {
    min-width: 68px;
    height: 15px;
    padding: 0 4px;
    border: 1px solid rgba(112, 185, 221, .28);
    border-radius: 4px;
    background: rgba(4, 28, 50, .78);
    color: #d9f4ff;
    font-size: 7px;
    font-weight: 800;
    touch-action: manipulation;
}
#roomFixedOptions button:disabled { opacity: .72; }
.device-pad #roomFixedOptions { grid-template-rows: repeat(5, 15px); }
.device-pad #roomFixedOptions span:nth-child(3),
.device-pad #roomFixedOptions span:nth-child(4) { display: none; }
.device-phone #roomFixedOptions span:nth-child(3),
.device-phone #roomFixedOptions span:nth-child(4) { display: none; }
.device-phone #roomFixedOptions button {
    min-width: 78px;
    height: 36px;
    padding: 0 9px;
    border-radius: 10px;
    font-size: 8px;
}

/* Room creation now exposes the exact classic slot/sudden-death choices. */
#dialogCreateRoom { top: 20px; height: 560px; }
#createClassicOptions {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 360px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
#createClassicOptions button {
    position: static;
    height: 64px;
    padding: 9px 8px;
    text-align: left;
}
#createClassicOptions span,
#createClassicOptions strong { display: block; }
#createClassicOptions span { color: #819aab; font-size: 7px; text-transform: uppercase; }
#createClassicOptions strong { margin-top: 7px; color: #dff7ff; font-size: 10px; }
#createClassicOptions button:disabled { opacity: .45; }
#dialogCreateRoom #createRoomDialogMessage { bottom: 67px; }
#dialogCreateRoom footer { bottom: 14px; }
.device-phone #dialogCreateRoom { top: 15px; height: 570px; }
.device-phone #createClassicOptions button { height: 68px; }
.device-phone #createClassicOptions span { font-size: 8px; }
.device-phone #createClassicOptions strong { font-size: 11px; }

/* Clear shop statistics and type-filtered owned collection. */
.shopItemStats { font-size: 8px !important; line-height: 11px !important; font-weight: 750; }
.device-phone .shopItemStats { bottom: 31px; font-size: 10px !important; line-height: 13px !important; }
#shopInventoryFilters {
    position: absolute;
    left: 10px;
    right: 8px;
    top: 61px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    touch-action: pan-x;
}
#shopInventoryFilters::-webkit-scrollbar { display: none; }
#shopInventoryFilters button {
    flex: 0 0 auto;
    height: 23px;
    padding: 0 7px;
    border: 1px solid rgba(135, 197, 239, .16);
    border-radius: 7px;
    background: rgba(4, 14, 25, .5);
    color: var(--shop-muted);
    font-size: 7px;
    font-weight: 800;
}
#shopInventoryFilters button.active { border-color: rgba(79, 212, 255, .6); background: rgba(24, 112, 149, .43); color: #e8fbff; }
#shopOwnedPanel #shopInventory { top: 93px; }
.shopInventoryEmpty { padding: 18px 10px; color: var(--shop-muted); font-size: 8px; text-align: center; }
.device-phone #shopInventoryFilters { top: 61px; }
.device-phone #shopInventoryFilters button { height: 27px; padding: 0 9px; font-size: 8px; }
.device-phone #shopOwnedPanel #shopInventory { top: 100px; }

/* Responsive overall top-100 ladder and sourced performance counters. */
#rankingScreen {
    background: radial-gradient(circle at 70% -20%, rgba(34, 151, 207, .3), transparent 48%), linear-gradient(145deg, #071321, #0b2238 55%, #071522);
    color: #edfaff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#rankingShell { position: absolute; inset: 0; width: 800px; height: 600px; }
#rankingTopBar,
#rankingPanel,
#performancePanel {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(127, 192, 229, .2);
    border-radius: 16px;
    background: rgba(8, 25, 43, .92);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 35px rgba(0,0,0,.2);
}
#rankingTopBar { left: 14px; right: 14px; top: 12px; height: 66px; padding: 10px 16px; }
#rankingTopBar h1 { margin: 1px 0 0; font-size: 19px; line-height: 21px; }
#rankingTopBar p { margin: 2px 0 0; color: #7892a5; font-size: 8px; }
#rankingBack { position: absolute; right: 12px; top: 11px; height: 42px; padding: 0 14px; border: 1px solid rgba(91, 202, 244, .28); border-radius: 10px; background: rgba(20, 91, 124, .5); color: #e8faff; font-size: 9px; font-weight: 800; }
#rankingPanel { left: 14px; top: 90px; width: 520px; height: 494px; padding: 49px 10px 10px; }
#rankingColumns,
.rankingRow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 85px 58px 58px; align-items: center; column-gap: 7px; }
#rankingColumns { position: absolute; left: 11px; right: 11px; top: 12px; height: 27px; padding: 0 8px; color: #7894a7; font-size: 7px; font-weight: 850; text-transform: uppercase; }
#rankingList { height: 100%; overflow-y: auto; padding-right: 3px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.rankingRow { min-height: 38px; margin-bottom: 4px; padding: 0 8px; border: 1px solid rgba(127, 192, 229, .1); border-radius: 9px; background: rgba(4, 16, 29, .5); color: #abc0cf; font-size: 8px; }
.rankingRow.me { border-color: rgba(77, 218, 255, .58); background: rgba(22, 98, 130, .38); color: #fff; }
.rankingRow > strong { color: #67ddff; font-size: 10px; }
.rankingRow > div { display: flex; align-items: center; min-width: 0; gap: 7px; }
.rankingRow > div > span:last-child { overflow: hidden; color: #eefaff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rankingRow .rank { position: static; flex: 0 0 26px; width: 26px; height: 16px; }
#performancePanel { left: 548px; right: 14px; top: 90px; height: 494px; padding: 18px; }
#performancePanel h2 { margin: 5px 0 0; font-size: 16px; }
#performancePanel p { margin: 7px 0 15px; color: #829bad; font-size: 8px; line-height: 12px; }
#performanceStats { display: grid; grid-template-columns: 1fr; gap: 6px; }
#performanceStats div { display: flex; justify-content: space-between; padding: 8px 9px; border: 1px solid rgba(127, 192, 229, .12); border-radius: 8px; background: rgba(4, 16, 29, .48); font-size: 8px; }
#performanceStats span { color: #8ca5b6; }
#performanceStats strong { color: #e5f8ff; }
#rankingMessage { left: 20px; right: 20px; bottom: 5px; text-align: center; }
.device-phone #rankingShell { width: var(--presentation-width); }
.device-phone #rankingTopBar { left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); }
.device-phone #rankingPanel { left: calc(var(--safe-left) + 12px); width: calc(100% - var(--safe-left) - var(--safe-right) - 350px); }
.device-phone #performancePanel { left: auto; right: calc(var(--safe-right) + 12px); width: 320px; }
.device-phone .rankingRow { min-height: 43px; font-size: 9px; }
.device-phone #rankingColumns,
.device-phone .rankingRow { grid-template-columns: 43px minmax(0, 1fr) 100px 70px 70px; }
.device-phone #performancePanel p,
.device-phone #performanceStats div { font-size: 9px; }

button {
    border: 0;
    margin: 0;
    padding: 0;
    color: transparent;
    appearance: none;
    -webkit-appearance: none;
    touch-action: none;
}

.hidden {
    display: none !important;
}

.onlineScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    overflow: hidden;
    transform-origin: 0 0;
    contain: strict;
    color: #fff;
    font-size: 12px;
    text-shadow: 1px 1px 1px #001b42;
}

.classicFrame,
#lobbyMainPanel,
#lobbySidePanel,
#roomHeaderPanel,
#roomPlayersPanel {
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
}

.classicFrame {
    left: var(--classic-offset-x);
    z-index: 1;
}

#loginScreen {
    background: #000;
}

#LoginWindowBG {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
}

#LoginWindow {
    position: absolute;
    width: 700px;
    height: 300px;
    left: 50px;
    top: 142px;
    border: 5px solid #000;
    border-radius: 20px;
    box-shadow: #000 10px 10px 50px 10px;
    background: linear-gradient(to bottom right, #03ffff 0, #05008f 100%);
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}

#loginTitle,
#registerTitle {
    position: absolute;
    top: 14px;
    width: 348px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

#loginTitle { left: 0; }
#registerTitle { left: 352px; }

#LoginSap {
    position: absolute;
    left: 347px;
    top: 0;
    width: 5px;
    height: 290px;
    background: #000;
}

#LoginPart,
#RegisterPart {
    position: absolute;
}

#LoginPart {
    left: 30px;
    top: 108px;
}

#RegisterPart {
    left: 374px;
    top: 54px;
}

.inputField {
    height: 34px;
    margin: 5px;
    padding: 4px 10px;
    border: 2px inset #bdc7d8;
    border-radius: 5px;
    background: #fff;
    color: #111;
    font-size: 18px;
    -webkit-user-select: text;
    user-select: text;
}

#LoginUsername { width: 250px; }
#LoginPass { width: 175px; }
#RegisterName,
#RegisterEmail,
#RegisterPassword { width: 270px; }

.blueBtn {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #057ed0;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    background: linear-gradient(#33bcef, #019ad2);
    color: #fff !important;
    font: 700 13px/18px Arial, sans-serif;
}

.blueBtn:active { background: linear-gradient(#0271bf, #2daddc); }

#LoginResetA {
    margin: 1px 0 0 8px;
    background: transparent;
    color: #0cf;
    font-size: 14px;
    text-decoration: underline;
}

.registerButton {
    margin: 5px;
    padding: 7px 25px;
    border: 1px solid #3b6e22;
    border-radius: 20px;
    box-shadow: inset 0 1px 1px #a4e388;
    background: linear-gradient(#67ae55, #578843);
    color: #fff;
    font: 19px/126% "lucida grande", tahoma, verdana, arial, sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.screenMessage {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 7px;
    min-height: 16px;
    color: #ffec59;
    text-align: center;
    z-index: 1100;
}

#authMessage {
    left: 360px;
    width: 325px;
    color: #ffec59;
}

.overlayDialog,
#dialogCreateRoomWarp {
    position: absolute;
    inset: 0;
    z-index: 1000;
}

.dialogShade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65);
}

.simpleDialog {
    position: absolute;
    left: 230px;
    top: 170px;
    width: 341px;
    min-height: 230px;
    padding: 52px 25px 46px;
    border: 3px solid #00162f;
    border-radius: 8px;
    background: linear-gradient(#365d8b, #102d57);
    box-shadow: 5px 10px 30px 10px #000, inset 1px 2px 4px #7394b5;
    color: #fff;
    text-align: center;
}

.simpleDialogTitle {
    position: absolute;
    left: 0;
    top: 12px;
    width: 100%;
    font-size: 20px;
}

.simpleDialog .inputField { width: 270px; }
.dialogOK,
.dialogCancel,
#dialogCreateRoomButtonOK,
#dialogCreateRoomButtonCancel {
    position: absolute;
    bottom: -7px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 90px 30px;
}
.dialogOK,
#dialogCreateRoomButtonOK {
    right: -32px;
    width: 90px;
    background-image: url("assets/lobby/ok.png");
}
.dialogCancel,
#dialogCreateRoomButtonCancel {
    left: -39px;
    width: 105px;
    background-image: url("assets/lobby/cancel.png");
    background-size: 105px 30px;
}

#BrokerScreen {
    --server-panel: rgba(5, 39, 60, .94);
    --server-row: rgba(8, 67, 92, .88);
    --server-row-pressed: rgba(12, 85, 112, .96);
    --server-line: rgba(113, 222, 242, .25);
    --server-accent: #4de7f4;
    --server-green: #65e3af;
    --server-text: #f4fdff;
    --server-muted: #9fc2ce;
    background:
        radial-gradient(circle at 14% 4%, rgba(76, 214, 232, .26), transparent 34%),
        radial-gradient(circle at 88% 105%, rgba(49, 128, 173, .3), transparent 40%),
        linear-gradient(145deg, #061827 0%, #07334b 53%, #071a2b 100%);
    color: var(--server-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
#BrokerScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 8% 84%, transparent 0 41px, rgba(125, 222, 237, .04) 42px 43px, transparent 44px),
        radial-gradient(circle at 91% 18%, transparent 0 55px, rgba(125, 222, 237, .04) 56px 57px, transparent 58px),
        linear-gradient(rgba(113, 208, 229, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113, 208, 229, .025) 1px, transparent 1px);
    background-size: auto, auto, 36px 36px, 36px 36px;
    pointer-events: none;
}
#serverShell { position: absolute; inset: 0; width: 800px; height: 600px; }
#serverTopBar {
    position: absolute;
    left: 56px;
    right: 56px;
    top: 20px;
    height: 78px;
}
#serverWorldMark {
    position: absolute;
    left: 0;
    top: 4px;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(111, 231, 244, .48);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 47%, rgba(151, 242, 249, .42) 48% 52%, transparent 53%),
        linear-gradient(transparent 47%, rgba(151, 242, 249, .42) 48% 52%, transparent 53%),
        radial-gradient(circle, rgba(44, 183, 210, .85), rgba(10, 90, 124, .92));
    box-shadow: inset 0 0 0 5px rgba(4, 32, 50, .45), 0 8px 22px rgba(0, 0, 0, .2);
}
#serverWorldMark::before,
#serverWorldMark::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(170, 246, 250, .34);
    border-radius: 50%;
    pointer-events: none;
}
#serverWorldMark::before { inset: 12px 22px; }
#serverWorldMark::after { inset: 22px 12px; }
#serverWorldMark span {
    position: absolute;
    left: 22px;
    top: 18px;
    width: 20px;
    height: 13px;
    border-radius: 50% 44% 58% 38%;
    background: rgba(210, 251, 245, .76);
    transform: rotate(-14deg);
}
.serverEyebrow { display: block; color: var(--server-accent); font-size: 8px; font-weight: 850; letter-spacing: 1.45px; }
#serverBrand { position: absolute; left: 82px; top: 4px; }
#serverBrand h1 { margin: 3px 0 0; font-size: 25px; line-height: 28px; letter-spacing: -.45px; }
#serverBrand p { margin: 4px 0 0; color: var(--server-muted); font-size: 10px; line-height: 13px; }
#BrokerTotalPlayers {
    position: absolute;
    right: 0;
    top: 17px;
    min-width: 150px;
    padding: 11px 16px;
    border: 1px solid rgba(102, 227, 175, .24);
    border-radius: 22px;
    background: rgba(21, 112, 89, .24);
    color: #cef9e6;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.serverPanel {
    border: 1px solid var(--server-line);
    background: var(--server-panel);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .035);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
#BrokerDeleteAccount {
    min-width: 126px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 143, 153, .24);
    border-radius: 12px;
    background: rgba(85, 25, 37, .28);
    color: #eab8be;
    font-size: 10px;
    font-weight: 720;
}
#deleteAccountDialog .simpleDialog {
    left: 50%;
    top: 145px;
    width: 390px;
    min-height: 280px;
    transform: translateX(-50%);
}
#deleteAccountDialog label { display: block; margin: 18px 0 7px; color: #c7dbea; font-size: 11px; }
#deleteAccountMessage { min-height: 20px; margin: 10px 0; color: #ffdf66; }
.dangerDialogActions { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.dangerDialogActions button {
    min-width: 128px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #6a91ad;
    border-radius: 9px;
    background: #173d60;
    color: #fff;
    font-weight: 800;
}
#deleteAccountConfirm { border-color: #e76d7a; background: #8c2635; }
#serverPasscodeDialog { z-index: 1700; }
#serverPasscodeForm {
    left: 50%;
    top: 154px;
    width: 410px;
    min-height: 292px;
    padding: 72px 28px 70px;
    transform: translateX(-50%);
    border-color: rgba(255, 196, 86, .55);
    background: linear-gradient(155deg, rgba(20, 53, 78, .99), rgba(5, 23, 39, .99));
    text-align: left;
}
#serverPasscodeForm .serverEyebrow { position: absolute; left: 28px; top: 22px; color: #ffd27a; }
#serverPasscodeForm .simpleDialogTitle { left: 28px; top: 38px; width: auto; font-size: 23px; font-weight: 850; }
#serverPasscodeForm > p { margin: 0 0 19px; color: var(--server-muted); font-size: 10px; }
#serverPasscodeForm > label { display: block; margin-bottom: 7px; color: #c7dbea; font-size: 9px; font-weight: 800; text-transform: uppercase; }
#serverPasscodeInput { width: 100% !important; height: 48px; box-sizing: border-box; padding: 0 14px; border-radius: 9px; font-size: 14px; -webkit-user-select: text; user-select: text; }
#serverPasscodeMessage { min-height: 18px; margin-top: 9px; color: #ffd27a; font-size: 9px; }
.serverPasscodeActions { position: absolute; left: 28px; right: 28px; bottom: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.serverPasscodeActions button { min-width: 116px; height: 44px; padding: 0 15px; border: 1px solid rgba(110, 197, 231, .3); border-radius: 9px; background: rgba(12, 48, 73, .94); color: #fff; font-size: 10px; font-weight: 850; }
#serverPasscodeEnter { border-color: rgba(255, 196, 86, .48); background: linear-gradient(145deg, #b27827, #744410); }
#BrokerWindow {
    position: absolute;
    left: 56px;
    right: 56px;
    top: 112px;
    width: auto;
    height: 384px;
    border-radius: 20px;
    overflow: hidden;
}
#serverPanelHeading {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#serverPanelHeading h2 { margin: 4px 0 0; font-size: 19px; line-height: 22px; }
#BrokerServerCount { color: var(--server-muted); font-size: 9px; font-weight: 700; }
#BrokerServersList {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 86px;
    bottom: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 116px;
    gap: 12px;
    align-content: start;
    overflow-y: auto;
    padding: 1px 3px 10px 1px;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
#BrokerServersList::-webkit-scrollbar { display: none; }
.BrokerServerEntry { min-width: 0; height: 116px; }
.BrokerChannel {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 72px 18px;
    align-items: center;
    width: 100%;
    height: 116px;
    padding: 13px 14px;
    gap: 11px;
    overflow: hidden;
    border: 1px solid rgba(83, 222, 239, .34);
    border-radius: 15px;
    background:
        radial-gradient(circle at 8% 20%, rgba(87, 229, 238, .15), transparent 34%),
        linear-gradient(145deg, var(--server-row), rgba(5, 47, 70, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 9px 20px rgba(0, 0, 0, .17);
    color: var(--server-text);
    text-align: left;
    touch-action: manipulation;
}
.BrokerChannel:active { border-color: var(--server-accent); background: var(--server-row-pressed); transform: scale(.994); }
.BrokerChannel:focus-visible { outline: 2px solid var(--server-accent); outline-offset: 2px; }
.BrokerChannel:disabled { opacity: .5; }
.BrokerChannel.locked { border-color: rgba(255, 196, 86, .42); }
.BrokerChannel.locked .BrokerAvailability { color: #ffd987; }
.BrokerChannel.locked .BrokerAvailability::before {
    background: #ffc45d;
    box-shadow: 0 0 0 3px rgba(255, 196, 93, .12);
}
.BrokerServerNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 72px;
    border: 1px solid rgba(111, 232, 244, .3);
    border-radius: 13px;
    background: rgba(4, 33, 51, .72);
}
.BrokerServerNumber small { color: #81b7c5; font-size: 6px; font-weight: 850; letter-spacing: .75px; }
.BrokerServerNumber strong { margin-top: 3px; color: #dffcff; font-size: 24px; line-height: 27px; }
.BrokerChannelCopy { min-width: 0; }
.BrokerChannelName { display: block; overflow: hidden; color: #fff; font-size: 17px; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
.BrokerDesc { display: block; min-height: 26px; margin-top: 7px; overflow: hidden; color: var(--server-muted); font-size: 9px; line-height: 13px; }
.BrokerAvailability { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #a7e8cb; font-size: 7px; font-weight: 800; }
.BrokerAvailability::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--server-green); box-shadow: 0 0 0 3px rgba(101, 227, 175, .1); }
.BrokerPopulation { min-width: 0; padding-left: 11px; border-left: 1px solid rgba(120, 208, 225, .14); text-align: center; }
.BrokerPopulation strong { display: block; color: #fff; font-size: 18px; line-height: 21px; }
.BrokerPopulation span { display: block; margin-top: 4px; color: var(--server-muted); font-size: 7px; line-height: 10px; }
.BrokerEnter { color: var(--server-accent); font-size: 24px; line-height: 24px; text-align: right; }
#BrokerLoading,
#BrokerEmpty {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 86px;
    min-height: 116px;
    padding: 45px 18px 18px;
    border: 1px dashed rgba(121, 206, 224, .2);
    border-radius: 15px;
    color: var(--server-muted);
    font-size: 10px;
    text-align: center;
}
#BrokerLoading::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 19px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 2px solid rgba(77, 231, 244, .18);
    border-top-color: var(--server-accent);
    border-radius: 50%;
    animation: serverLoadingSpin .8s linear infinite;
}
@keyframes serverLoadingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #BrokerLoading::before { animation: none; border-color: var(--server-accent); }
}
#BrokerEmpty strong,
#BrokerEmpty span { display: block; }
#BrokerEmpty strong { color: #e9fbff; font-size: 12px; }
#BrokerEmpty span { margin-top: 7px; }
#brokerMessage { position: absolute; left: 24px; right: 24px; bottom: 9px; color: #ffd790; font-size: 9px; text-align: center; }
#serverFooter {
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#BrokerLogout {
    min-width: 154px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(118, 238, 248, .5);
    border-radius: 13px;
    background: linear-gradient(180deg, #1496ba, #0b6f96);
    box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 8px 18px rgba(0, 0, 0, .18);
    color: #f5feff;
    font-size: 12px;
    font-weight: 830;
}
#BrokerLogout:active,
#BrokerDeleteAccount:active { transform: translateY(1px); }

:is(#channelScreen,#socialScreen) {
    background: #06101d;
}

#channelName { position: absolute; left: 18px; top: 430px; width: 537px; font-size: 15px; }
#roomsList { position: absolute; left: 15px; top: 156px; width: 540px; color: #fff; }
.lobbyRoom {
    position: absolute;
    width: 251px;
    height: 62px;
    background: transparent;
    color: #fff;
    text-align: left;
}
.lobbyRoom:nth-child(2n) { left: 265px; }
.lobbyRoom:nth-child(1), .lobbyRoom:nth-child(2) { top: 0; }
.lobbyRoom:nth-child(3), .lobbyRoom:nth-child(4) { top: 70px; }
.lobbyRoom:nth-child(5), .lobbyRoom:nth-child(6) { top: 140px; }
.lobbyRoom:nth-child(7), .lobbyRoom:nth-child(8) { top: 210px; }
.lobbyRoomNumber { position: absolute; left: 2px; top: 7px; width: 30px; text-align: center; }
.lobbyRoomTitle { position: absolute; left: 36px; top: 4px; width: 170px; overflow: hidden; white-space: nowrap; }
.lobbyRoomPlayers { position: absolute; right: 8px; top: 6px; color: #18243a; text-shadow: 0 0 2px #fff; }
.lobbyRoomMap { position: absolute; left: 36px; top: 28px; width: 130px; color: #fff; }
.lobbyRoomMode { position: absolute; right: 10px; top: 31px; color: #35f78c; }

#playersList {
    position: absolute;
    left: 584px;
    top: 305px;
    width: 211px;
    height: 223px;
    overflow: hidden;
    color: #fff;
}
.lobbyPlayer { position: relative; height: 18px; padding-left: 22px; }
.lobbyPlayer::before { content: ""; position: absolute; left: 2px; top: 1px; width: 15px; height: 15px; background: url("assets/lobby/ranks2.png") 0 0 / 168.5px 377px no-repeat; }

#myInfoBox { position: absolute; left: 584px; top: 89px; width: 207px; height: 180px; border-radius: 10px; background: rgba(140, 140, 140, .5); }
#lobbyAvatarPreview { position: absolute; left: 584px; top: 105px; width: 207px; height: 108px; pointer-events: none; }
#myName2 { position: absolute; left: 592px; top: 97px; color: #fff; pointer-events: none; }
#myGP2 { position: absolute; right: 84px; top: 221px; color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
#myCash2 { position: absolute; right: 70px; top: 235px; color: #8bc2ee; text-align: right; font-size: 11px; font-weight: 700; pointer-events: none; }
#myGold2 { position: absolute; right: 70px; top: 250px; color: #ffea4a; text-align: right; font-size: 11px; font-weight: 700; pointer-events: none; }
.lobby_account_rank { display: inline-block; margin-right: 4px; vertical-align: middle; }

.LobbyButton { position: absolute; background-image: none; background-repeat: no-repeat; }
#buttonCreateRoom { left: 144px; top: 7px; width: 62px; height: 62px; background-position: 0 -177px; }
#buttonChannels {
    left: 706px;
    top: 558px;
    width: 82px;
    height: 29px;
    border: 1px solid #8ed6ff;
    border-radius: 4px;
    background-image: none;
    background: linear-gradient(#2d84c7, #0b3d78);
    box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 1px 2px #001326;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 1px 1px #052a52;
}
#buttonChannels:active { transform: translate(1px, 1px); }
#lobbyRefresh { display: none; }
#roomsPage { position: absolute; left: 492px; top: 118px; color: #fff; }

#dialogCreateRoom {
    position: absolute;
    left: calc(50% - 170.5px);
    top: 71px;
    width: 341px;
    height: 258px;
    border-radius: 6px;
    background: transparent;
    box-shadow: 3px 3px 10px 0 #000;
    transform: scale(1.5);
    transform-origin: 50% 50%;
}

#createRoomTitle { position: absolute; left: 114px; top: 41px; width: 190px; height: 15px; border: 0; background: transparent; color: #acf2f6; padding-left: 4px; -webkit-user-select: text; user-select: text; }
#CreateRoomPlayers { position: absolute; left: 190px; top: 112px; width: 100px; color: #ff6; font-weight: 900; text-align: center; }
#CreateRoomNumPlayersPrev, #CreateRoomNumPlayersNext {
    position: absolute;
    top: 103px;
    width: 28px;
    height: 28px;
    background: transparent;
}
#CreateRoomNumPlayersPrev { left: 153px; }
#CreateRoomNumPlayersNext { left: 299px; }
#CreateRoomModePrev, #CreateRoomModeNext {
    position: absolute;
    top: 123px;
    width: 28px;
    height: 28px;
    background: transparent;
}
#CreateRoomModePrev { left: 153px; }
#CreateRoomModeNext { left: 299px; }
#CreateRoomNumPlayersPrev::before,
#CreateRoomModePrev::before,
#CreateRoomNumPlayersNext::before,
#CreateRoomModeNext::before {
    content: "";
    position: absolute;
    top: 7px;
    width: 0;
    height: 0;
    filter: drop-shadow(1px 1px 0 #071a38);
}
#CreateRoomNumPlayersPrev::before,
#CreateRoomModePrev::before {
    left: 6px;
    border-top: 7px solid transparent;
    border-right: 12px solid #d6fbff;
    border-bottom: 7px solid transparent;
}
#CreateRoomNumPlayersNext::before,
#CreateRoomModeNext::before {
    right: 6px;
    border-top: 7px solid transparent;
    border-left: 12px solid #d6fbff;
    border-bottom: 7px solid transparent;
}
#CreateRoomMode { position: absolute; left: 190px; top: 132px; width: 100px; color: #35f78c; font-weight: 900; text-align: center; }
#CreateRoomModeIcon { position: absolute; left: 45px; top: 164px; width: 44px; height: 41px; background: transparent; }

#roomButtonBack {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 57px;
    height: 54px;
    background: url("assets/room/room_stuff.png") 0 -66px no-repeat;
    z-index: 20;
}
#roomButtonBack:active { background-position: -116px -66px; }
#roomMessage { left: 120px; right: 120px; bottom: 6px; }

#roomScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    overflow: hidden;
    transform-origin: 0 0;
    contain: strict;
    background: url("assets/room/room_bg.png") no-repeat;
    color: #fff;
    font-size: 12px;
    text-shadow: 1px 1px 1px #001b42;
}

#roomNumber {
    position: absolute;
    left: 50px;
    top: 5px;
    width: 30px;
    height: 12px;
}

#roomTitle {
    position: absolute;
    left: 93px;
    top: 5px;
    width: 450px;
    height: 15px;
}

#roomFixedOptions {
    position: absolute;
    left: 383px;
    top: 29px;
    display: grid;
    grid-template-rows: repeat(4, 15px);
    color: #fff;
    font-weight: bold;
}

.playerInRoom {
    position: absolute;
    width: 223px;
    height: 95px;
    overflow: visible;
    color: #fff;
    background: transparent;
    text-align: left;
    z-index: 2;
}

.playerInRoom:active {
    filter: brightness(1.25);
}

#playerInRoom0 { left: 5px; top: 113px; }
#playerInRoom1 { left: 336px; top: 113px; }
#playerInRoom2 { left: 5px; top: 210px; }
#playerInRoom3 { left: 336px; top: 210px; }
#playerInRoom4 { left: 5px; top: 307px; }
#playerInRoom5 { left: 336px; top: 307px; }
#playerInRoom6 { left: 5px; top: 404px; }
#playerInRoom7 { left: 336px; top: 404px; }
.roomSlotEmpty .roomPlayerMaster,
.roomSlotEmpty .roomPlayerShadow,
.roomSlotEmpty .roomPlayerReady,
.roomSlotEmpty .roomPlayerNotReady { display: none; }

.roomPlayerName {
    position: absolute;
    left: 10px;
    top: 0;
    width: 203px;
    height: 15px;
    color: #fff;
    z-index: 4;
}

.roomPlayerMaster,
.roomPlayerNotReady,
.roomPlayerReady,
.roomPlayerShadow {
    position: absolute;
    background: url("assets/room/room_stuff.png") no-repeat;
    z-index: 2;
}

.roomPlayerMaster,
.roomPlayerNotReady,
.roomPlayerReady {
    bottom: 0;
    width: 77px;
    height: 78px;
}

.SideA .roomPlayerMaster { right: 0; background-position: -156px -121px; }
.SideB .roomPlayerMaster { left: 0; background-position: -156px -200px; }
.SideA .roomPlayerNotReady { right: 0; background-position: 0 -121px; }
.SideB .roomPlayerNotReady { left: 0; background-position: 0 -200px; }
.SideA .roomPlayerReady { right: 0; background-position: -78px -121px; }
.SideB .roomPlayerReady { left: 0; background-position: -78px -200px; }

.roomPlayerShadow {
    bottom: 0;
    width: 78px;
    height: 10px;
    background-position: -155px 0;
}

.SideA .roomPlayerShadow { left: 58px; }
.SideB .roomPlayerShadow { right: 58px; }

.roomPlayerMobile {
    position: absolute;
    inset: 0;
    width: 223px;
    height: 95px;
    z-index: 3;
    pointer-events: none;
}

#roomButtonStart {
    position: absolute;
    left: 234px;
    top: 209px;
    width: 96px;
    height: 85px;
    background: url("assets/room/start2.gif") no-repeat;
    z-index: 10;
}

#roomButtonReady {
    position: absolute;
    left: 234px;
    top: 209px;
    width: 96px;
    height: 85px;
    background: url("assets/room/ready2.gif") no-repeat;
    z-index: 20;
    display: none;
    transition: filter 120ms ease-out;
}

/* Preserve the supplied READY art and shift only its selected-state palette. */
#roomButtonReady.roomReadyActive {
    filter: hue-rotate(72deg) saturate(1.35) brightness(1.02);
}

#roomButtonReady.roomReadyActive:active {
    filter: hue-rotate(72deg) saturate(1.35) brightness(1.18);
}

#roomButtonChangeTeam {
    position: absolute;
    left: 297px;
    top: 351px;
    width: 28px;
    height: 27px;
    background: url("assets/room/room_stuff.png") 0 0 no-repeat;
    z-index: 10;
}
#roomButtonChangeTeam:active { background-position: -57px 0; }

#roomButtonInvite {
    position: absolute;
    left: 238px;
    top: 160px;
    width: 76px;
    height: 28px;
    z-index: 12;
    border: 2px solid #fff;
    border-radius: 5px;
    background: linear-gradient(#43bdf7, #116bb8);
    box-shadow: 0 2px 0 #073f7a;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-shadow: 1px 1px #00407d;
}

#roomBattleItems {
    position: absolute;
    left: 580px;
    top: 252px;
    width: 210px;
    height: 220px;
    z-index: 16;
    box-sizing: border-box;
    padding: 7px;
    border: 1px solid rgba(200, 244, 255, .7);
    border-radius: 8px;
    background: rgba(0, 39, 76, .72);
}
#roomBattleItemSlots { display: flex; align-items: center; gap: 3px; min-height: 40px; padding: 2px; overflow-x: auto; overflow-y: hidden; border-radius: 5px; background: rgba(1, 17, 42, .8); }
#roomBattleItemCatalog { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; height: 127px; margin-top: 6px; overflow-y: auto; }
.battleItemIcon {
    --item-scale: 1.075;
    position: relative;
    flex: 0 0 auto;
    height: 36px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(195, 238, 255, .35);
    border-radius: 5px;
    background: rgba(6, 41, 75, .9);
    image-rendering: auto;
}
.battleItemIcon.itemOneSlot { width: 37px; min-width: 37px; }
.battleItemIcon.itemTwoSlots { --item-scale: 1.055; width: 73px; min-width: 73px; }
.battleItemIcon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 31px;
    background-image: url("assets/shop/items.png");
    background-position: calc(var(--item-sprite-x) * -1px) 0;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(var(--item-scale));
    transform-origin: center;
    pointer-events: none;
}
.battleItemIcon.itemTwoSlots::before { width: 69px; }
#roomBattleItemCatalog .battleItemIcon { flex: 0 0 auto; }
#roomBattleItemCatalog .battleItemIcon.roomItemLocked { position: relative; filter: grayscale(1) brightness(.55); box-shadow: inset 0 0 0 2px rgba(255, 86, 86, .78); }
#roomBattleItemCatalog .battleItemIcon.roomItemLocked::after { content: "LOCK"; position: absolute; z-index: 2; inset: 0; color: #fff; font-size: 6px; font-weight: 950; line-height: 36px; text-align: center; text-shadow: 0 1px 2px #000; }
#roomBattleItemHelp { margin-top: 4px; color: #d8f6ff; font-size: 7px; text-align: center; text-shadow: 1px 1px #00192f; }

#roomInviteDialog,
#incomingRoomInviteDialog { position: absolute; inset: 0; z-index: 1800; }
#roomInviteDialog .dialogShade,
#incomingRoomInviteDialog .dialogShade { background: rgba(1, 7, 14, .78); backdrop-filter: blur(6px); }
.roomInvitePanel {
    position: absolute;
    left: 50%;
    top: 105px;
    width: 410px;
    height: 390px;
    box-sizing: border-box;
    padding: 24px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .6);
    color: #f4fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
.roomInvitePanel h2 { margin: 5px 0 14px; font-size: 22px; }
#roomInviteFriends { height: 250px; overflow-y: auto; }
.roomInviteFriend { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; min-height: 47px; padding: 0 10px; border-bottom: 1px solid rgba(130, 190, 225, .13); }
.roomInviteFriend strong, .roomInviteFriend span { display: block; }
.roomInviteFriend strong { font-size: 10px; }
.roomInviteFriend span { margin-top: 3px; color: #91a9bb; font-size: 8px; }
.roomInviteFriend button,
.roomInvitePanel footer button { height: 34px; border: 1px solid rgba(78, 216, 255, .4); border-radius: 8px; background: linear-gradient(145deg, #1983ab, #11557d); color: #fff; font-weight: 800; }
.roomInviteFriend button:disabled { opacity: .38; }
.roomInvitePanel .screenMessage { left: 24px; right: 24px; bottom: 61px; font-size: 8px; text-align: center; }
.roomInvitePanel footer { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; justify-content: flex-end; gap: 9px; }
.roomInvitePanel footer button { min-width: 100px; }
.incomingInvitePanel { top: 145px; width: 430px; height: 290px; }
.incomingInvitePanel p { margin-top: 24px; color: #c5dae8; font-size: 12px; line-height: 19px; }

#roomButtonStart:active {
    filter: brightness(1.25);
}

#roomMobileSelect {
    position: absolute;
    left: 25px;
    top: 105px;
    width: 515px;
    height: 408px;
    padding: 10px 14px 48px;
    background: rgba(0, 30, 50, .75);
    border-radius: 15px;
    z-index: 99;
}

#mobileSelectGrid {
    display: grid;
    grid-template-columns: repeat(5, 70px);
    gap: 24px;
    height: 350px;
    overflow-y: auto;
    scrollbar-width: none;
}

#mobileSelectGrid::-webkit-scrollbar { display: none; }

.mobileSelectBtn {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: visible;
    background: rgba(0, 70, 30, .75);
    border: 3px solid #0f9;
    border-radius: 15px;
    color: #ff0;
}

.mobileSelectBtn.selected { box-shadow: 0 0 8px 4px #4f4; }
.mobileSelectBtn:active { background: rgba(40, 120, 0, .75); }
.mobileSelectBtn canvas { position: absolute; inset: 0; width: 64px; height: 64px; }

.mobileName {
    position: absolute;
    left: -15px;
    top: 73px;
    width: 100px;
    color: #ff0;
    text-align: center;
    font-size: 14px;
    text-shadow: 1px 1px #000;
}

#roomMobileSelectCancel {
    position: absolute;
    right: -39px;
    bottom: -3px;
    width: 105px;
    height: 30px;
    background: url("assets/room/cancel.png") no-repeat;
    background-size: 105px 30px;
}

#mobileSelectTagSlots {
    position: absolute;
    left: 4px;
    top: 4px;
    z-index: 2;
}

.mobileSelectSlot {
    width: 35px;
    height: 35px;
    margin-right: 3px;
    background-image: url("assets/ui/game_stuff6.png");
    background-repeat: no-repeat;
    color: #fff;
    font-size: 0;
}

#mobileSelectPrimary { background-position: 0 -115px; }
#mobileSelectSecondary { background-position: 0 -151px; }
#mobileSelectPrimary.selected { background-position: -108px -115px; }
#mobileSelectSecondary.selected { background-position: -108px -151px; }

#stage {
    position: fixed;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    overflow: hidden;
    transform-origin: 0 0;
    will-change: transform;
    backface-visibility: hidden;
    contain: strict;
    background: #ac5008;
}

#gameCanvas {
    position: absolute;
    inset: 0;
    width: 800px;
    height: 600px;
}

#match_loading {
    position: absolute;
    inset: 0;
    z-index: 1200;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 16%, rgba(39, 157, 207, .28), transparent 43%),
        linear-gradient(155deg, #081929 0%, #0b2338 48%, #07131f 100%);
    color: #eefaff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-shadow: none;
}
#match_loading::before {
    content: "MATCH SYNC";
    position: absolute;
    left: 50%;
    top: 208px;
    width: min(520px, calc(100% - 80px));
    height: 154px;
    box-sizing: border-box;
    padding-top: 35px;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 190, 229, .27);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(17, 49, 74, .96), rgba(6, 21, 35, .96));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.38);
    color: #58d8ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
#match_loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 275px;
    width: 210px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, #45d5ff 45%, #68f0b6 55%, transparent);
    box-shadow: 0 0 18px rgba(70, 216, 255, .5);
}

#match_loading_status {
    position: absolute;
    z-index: 1;
    left: 140px;
    right: 140px;
    top: 310px;
    min-height: 24px;
}

#gameui,
#powerBar,
#walkBar,
#powerMark,
#last_power_mark,
#btnShot1,
#btnShot2,
#btnShotSS,
#btnPass,
#btnEsc {
    background-image: url("assets/ui/game_stuff6.png");
    background-repeat: no-repeat;
}

#battleModePanel {
    position: absolute;
    left: 808px;
    top: 2px;
    width: 190px;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid rgba(105, 183, 224, .62);
    border-radius: 11px;
    background: linear-gradient(155deg, rgba(17, 46, 65, .96), rgba(4, 18, 30, .98));
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.42);
    color: #fff;
    z-index: 10;
}

#teamModePanel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.battleModeTeam {
    display: grid;
    grid-template-rows: 25px 1fr;
    align-items: center;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
}

.battleModeTeam + .battleModeTeam { border-left: 1px solid rgba(174, 213, 233, .22); }
.battleModeTeam span { font: 800 11px/25px Arial, sans-serif; }
.battleModeTeam strong { font: 900 31px/43px Arial, sans-serif; }
.battleModeTeam.localTeam { color: #62c9ff; }
.battleModeTeam.opponentTeam { color: #ff6969; }

#tagMobileCard {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 68px 1fr;
    grid-template-rows: 25px 20px 13px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 5px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #eaf9ff;
    text-align: left;
    touch-action: manipulation;
}
#tagMobileCard:active:not(:disabled) { background: rgba(83, 214, 255, .18); }
#tagMobileCard:disabled { opacity: .64; }
#tagMobileCard.used { filter: grayscale(.75); }
#tagMobileCanvas { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 62px; height: 44px; }
#tagMobileName { grid-column: 2; grid-row: 1; overflow: hidden; font: 900 11px/23px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#tagMobileHealthText { grid-column: 2; grid-row: 2; font: 800 10px/18px Arial, sans-serif; color: #d8eff7; }
#tagMobileHealthBar { position: relative; grid-column: 2; grid-row: 3; width: 100%; height: 8px; overflow: hidden; border: 1px solid #dcebf2; border-radius: 5px; background: #17242c; }
#tagMobileHpFill, #tagMobileShieldFill { position: absolute; top: 0; bottom: 0; }
#tagMobileHpFill { left: 0; background: #57bd55; }
#tagMobileShieldFill { background: #3289f4; }

.device-pad #battleModePanel {
    left: 648px;
    top: -82px;
    width: 146px;
    height: 74px;
}

#game_click_to_revive {
    position: absolute;
    top: 400px;
    width: 800px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    text-shadow: 2px 2px #000;
    pointer-events: none;
    z-index: 20;
}

#revive_hand {
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border: 2px solid #000;
    border-radius: 50%;
    background: rgba(255, 0, 0, .5);
    pointer-events: none;
    z-index: 21;
}

#revive_hand.CanRevive { background: rgba(0, 255, 0, .5); }

.blinkingGlow {
    border-radius: 10px;
    animation: 1s ease-in infinite alternate blinking_glow_anim;
}

@keyframes blinking_glow_anim {
    50% { box-shadow: 0 0 0 0 #ff0; transform: rotate(0); }
    100% { box-shadow: 0 0 8px 8px #ff0; transform: rotate(10deg); }
}

#weatherSlot0,
#weatherSlot1,
#weatherSlot2,
#weatherSlot3,
#weatherSlot4 {
    position: absolute;
    top: 13px;
    width: 19px;
    height: 19px;
    background-image: url("assets/ui/game_stuff6.png");
    background-repeat: no-repeat;
}

#weatherSlot0 { left: 522px; }
#weatherSlot1 { left: 544px; }
#weatherSlot2 { left: 567px; }
#weatherSlot3 { left: 589px; }
#weatherSlot4 { left: 612px; }

.weather-0 { background-position: -321px -115px; }
.weather-1 { background-position: -461px -155px; }
.weather-2 { background-position: -341px -115px; }
.weather-3 { background-position: -361px -115px; }
.weather-4 { background-position: -381px -115px; }
.weather-5 { background-position: -401px -115px; }
.weather-6 { background-position: -421px -115px; }
.weather-7 { background-position: -441px -115px; }
.weather-8 { background-position: -461px -115px; }
.weather-current {
    outline: 2px solid rgba(255, 229, 116, .96);
    outline-offset: 1px;
    box-shadow: 0 0 0 1px rgba(20, 20, 20, .92), 0 0 5px rgba(255, 224, 94, .78);
}
.grayscale { filter: grayscale(1); }

#gameui {
    position: absolute;
    left: 0;
    top: 516px;
    width: 800px;
    height: 85px;
    background-image: url("assets/iphone/gameplay_hud_base.svg");
    background-position: 0 0;
    background-size: 800px 85px;
    z-index: 3;
}

#btnShot1,
#btnShot2,
#btnShotSS {
    position: absolute;
    top: 21px;
    width: 35px;
    height: 35px;
}

#btnShot1 { left: 12px; background-position: 0 -115px; }
#btnShot2 { left: 55px; background-position: 0 -151px; }
#btnShotSS { left: 98px; background-position: 0 -187px; }
#btnShot1:active { background-position: -72px -115px; }
#btnShot2:active { background-position: -72px -151px; }
#btnShotSS:active { background-position: -72px -187px; }
#btnShot1.Pressed { background-position: -108px -115px; }
#btnShot2.Pressed { background-position: -108px -151px; }
#btnShotSS.Pressed { background-position: -108px -187px; }
#btnShotSS.grayscale { filter: grayscale(1); opacity: .65; }

#battleItems {
    position: absolute;
    left: 273px;
    top: 5px;
    width: 239px;
    height: 29px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    overflow: hidden;
    border-radius: 9px;
    background: repeating-linear-gradient(90deg,
        transparent 0,
        transparent calc(16.666% - 1px),
        rgba(167, 187, 196, .28) calc(16.666% - 1px),
        rgba(167, 187, 196, .28) 16.666%);
    z-index: 6;
}
#battleItems .battleItemIcon {
    --item-scale: .9;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#battleItems .battleItemIcon.itemOneSlot { --item-scale: .9; }
#battleItems .battleItemIcon.itemTwoSlots { --item-scale: .9; }
#battleItems .battleItemIcon.prepared { outline: 2px solid #fff45d; outline-offset: -2px; filter: brightness(1.22); }
#battleItems .battleItemIcon:disabled { filter: grayscale(1); opacity: .45; }

#btnPass {
    position: absolute;
    left: 732px;
    top: 35px;
    width: 58px;
    height: 21px;
    background-position: -144px -115px;
}

#btnEsc {
    position: absolute;
    left: 664px;
    top: 35px;
    width: 58px;
    height: 21px;
    background-position: -144px -137px;
    z-index: 8;
    touch-action: manipulation;
}

#powerBar,
#walkBar {
    position: absolute;
    left: 241px;
    width: 1px;
}

#powerBar {
    bottom: 17px;
    height: 19px;
    background-color: #de1821;
    background-position: 0 -223px;
}

#walkBar {
    bottom: 4px;
    height: 9px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAIAAAB8JNGzAAAAB3RJTUUH3gQLEAQia0vRrgAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAAAdSURBVHjaY+hZeo6JgYGB6f7zH2AaGb9/fx9EAwCckQeLx8doUQAAAABJRU5ErkJggg==) repeat-x #6b8cc6;
}

#powerMarkArea {
    position: absolute;
    left: 241px;
    bottom: 0;
    width: 400px;
    height: 38px;
    z-index: 2;
    cursor: crosshair;
    touch-action: none;
}

#powerMark {
    position: absolute;
    left: 201px;
    width: 11px;
    height: 23px;
    margin-left: -6px;
    background-position: -294px -166px;
    pointer-events: none;
}

#last_power_mark {
    position: absolute;
    left: 240px;
    top: 67px;
    margin-left: -4px;
    width: 9px;
    height: 6px;
    background-position: -294px -159px;
    transition: left 1s ease-out;
    z-index: 1;
}

#angleDisplay {
    position: absolute;
    left: 192px;
    top: 14px;
    width: 130px;
    height: 30px;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
}

#lastAngleDisplay {
    position: absolute;
    left: 181px;
    top: 16px;
    width: 29px;
    height: 15px;
    overflow: hidden;
    color: rgba(207, 214, 218, .72);
    font: 700 8px/15px Arial, sans-serif;
    text-align: center;
    text-shadow: 1px 1px #000;
    pointer-events: none;
}

#turn_timer {
    position: absolute;
    top: 0;
    left: 675px;
    width: 125px;
    height: 100px;
    background: url("assets/ui/turn_timer.png") 0 -1900px no-repeat;
    transition: background-position .2s linear;
    pointer-events: none;
    z-index: 4;
    display: none;
}

#turns_list {
    position: absolute;
    left: 2px;
    bottom: 128px;
    width: 200px;
    border: 1px solid #000;
    padding-bottom: 1px;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    z-index: 5;
}

.turn_line { position: relative; height: 15px; display: none; margin-left: 3px; margin-right: 2px; }
.turn_line_number { position: absolute; top: 0; left: 0; width: 11px; height: 15px; color: #102a43; font-size: 11px; font-weight: 700; text-align: center; line-height: 15px; }
.turn_line_number_a { background-color: #6fd7ff; }
.turn_line_number_b { background-color: #ff8e8e; }
.turn_line_rank { position: absolute; left: 13px; top: 0; width: 25px; height: 15px; }
.turn_line_name { position: absolute; left: 40px; top: 2px; margin-left: 1px; width: 121px; height: 15px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.turn_line_name_a { color: #6fd7ff; }
.turn_line_name_b { color: #ff8e8e; }
.turn_line_delay { position: absolute; right: 1px; top: 2px; color: #fff; font-size: 10px; }
.turn_line_me { background-color: rgba(148, 140, 132, .75); }
.turn_line_respawn { filter: grayscale(.8); opacity: .65; }

.rank { width: 25px; height: 15px; background: url("assets/lobby/ranks2.png") no-repeat; }

#uiGoldReadout {
    position: absolute;
    left: 663px;
    top: 61px;
    width: 133px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    border: 1px solid #181818;
    border-radius: 10px;
    background: #030303;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .12);
}

#uiGoldCoin,
#uiGoldUnit,
.UIGoldDigit {
    flex: 0 0 auto;
    background-image: url("assets/ui/game_stuff6.png");
    background-repeat: no-repeat;
}

#uiGoldCoin {
    width: 20px;
    height: 20px;
    background-position: -666px -93px;
}

#uiGoldDigits {
    width: 90px;
    height: 21px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

.UIGoldDigit {
    width: 20.25px;
    height: 20.25px;
    transition: background-position 1s ease-in-out;
}

#uiGoldUnit {
    width: 13px;
    height: 13px;
    background-position: -779px -94px;
}

#game_over {
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    display: none;
    background: url("assets/ui/scores_bg.webp") no-repeat;
    background-size: cover;
    transform: translate3d(0, 0, 0);
    z-index: 20;
}
#scores_lose_a, #scores_lose_b, .score, .score_me { background-image: url("assets/ui/scores_stuff2.png"); background-repeat: no-repeat; }
#scores_lose_a { position: absolute; left: 115px; top: 24px; background-position: -200px -708px; width: 200px; height: 64px; }
#scores_lose_b { position: absolute; left: 485px; top: 24px; background-position: -200px -708px; width: 200px; height: 64px; }
#scores_lose_a.win, #scores_lose_b.win { background-position: 0 -708px; }
.score { position: absolute; background-position: 0 -601px; width: 380px; height: 106px; display: none; }
#score0 { top: 151px; }
#score1 { left: 295px; top: 151px; }
#score2 { top: 257px; }
#score3 { left: 295px; top: 257px; }
#score4 { top: 359px; }
#score5 { left: 295px; top: 359px; }
#score6 { top: 465px; }
#score7 { left: 295px; top: 465px; }
.score_me { position: absolute; left: 0; top: 0; background-position: -381px -601px; width: 380px; height: 106px; }
.score_rank { position: absolute; left: 145px; top: 10px; }
.score_name { position: absolute; left: 180px; top: 11px; width: 300px; color: #ffca41; font-size: 11px; font-weight: 700; }
.score_gp { position: absolute; left: 140px; top: 33px; color: #fff; font-size: 11px; font-weight: 700; }
.score_gold { position: absolute; left: 190px; top: 33px; color: #ffd273; font-size: 11px; font-weight: 700; }
.score_bonus_gp { position: absolute; left: 285px; top: 29px; color: #f4c; font-size: 11px; font-weight: 700; }
.score_bonus_gold { position: absolute; left: 285px; top: 49px; color: #f96; font-size: 11px; font-weight: 700; }
.score_state { position: absolute; color: #f09; font-size: 38px; font-weight: 700; white-space: nowrap; text-shadow: 1px 1px #000; }
.score_state_left { left: 214px; top: 23px; transform: rotate(-20deg); }
.score_state_rankup { left: 160px; top: 40px; }

#wind_meter2 {
    position: absolute;
    top: -26px;
    left: 334px;
    width: 132px;
    height: 120px;
    opacity: .8;
    transform: scale(.5);
    transform-origin: 50% 50%;
    pointer-events: none;
    z-index: 4;
}

#touch_ui {
    position: absolute;
    right: 20px;
    top: 125px;
    bottom: auto;
    width: 350px;
    height: 350px;
    z-index: 6;
    pointer-events: none;
    transform-origin: 100% 50%;
}

#touch_ui.control-hidden { display: none !important; }
#touch_ui.control-small { transform: scale(.5); }
#touch_ui.control-medium { transform: scale(.75); }
#touch_ui.control-large { transform: scale(1); }

#btnLeft,
#btnRight,
#btnUp,
#btnDown,
#btnShoot {
    position: absolute;
    opacity: .4;
    background-image: url("assets/ui/touch_ui.png");
    background-repeat: no-repeat;
    pointer-events: auto;
}

#btnLeft,
#btnRight {
    top: 100px;
    width: 70px;
    height: 150px;
}

#btnUp,
#btnDown {
    left: 100px;
    width: 150px;
    height: 70px;
}

#btnLeft { left: 0; background-position: 0 -100px; }
#btnRight { left: 280px; background-position: -280px -100px; }
#btnUp { top: 0; background-position: -100px 0; }
#btnDown { top: 280px; background-position: -100px -280px; }
#btnShoot {
    left: 100px;
    top: 100px;
    width: 150px;
    height: 150px;
    background-position: -100px -100px;
}

#btnLeft.active,
#btnRight.active,
#btnUp.active,
#btnDown.active,
#btnShoot.active {
    opacity: .8;
}

#OptionsDialog {
    position: absolute;
    left: 241px;
    top: 221px;
    width: 317px;
    height: 247px;
    color: #cecece;
    background: #314a5a;
    border: 1px solid #000;
    box-shadow: 5px 5px 30px 10px #000, inset 0 2px 1px #7394b5;
    font: 12px Arial, sans-serif;
    z-index: 100;
}

.OptionsDialogTitle {
    position: absolute;
    left: 3px;
    top: 4px;
    width: 76px;
    height: 19px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAATCAMAAAANkRs7AAAAllBMVEUAAAAxMTH////GxsbOzs69vb0pQlopQlK1tbXv7++cnJyUlJRjY2OlpaVSWlhSUlJKUlIxQkopOUqMjIpzc3Otra2EhIRaWmMxQloxQlJKSkpCSko8Qko8QkIpOULn5+fe3t7W1tLGxs6YmJB7gIBra2taWlY5OTGlraVrc3NjY2taY2NKUlpCSlIpQkoxOUopOTkpKSHDpOH8AAAAAXRSTlMAQObYZgAAAT5JREFUOMutVNeOhDAMDNgh9N6Wsr1cL///c0fYSKFcdHuCebBkjz04kwgiUdbua0PWwSY8WNZTtIoWO1s7hP1pFbUtWpQC9RkrF2sZxQ4AISw/6mi5mGsdgdKX7bMZLlQyjDi3aHBLIAPwB4zW4Z92vRVhuj/dWq1HMNTSdZUcr8849u4B4iH/dvloN/w5GOBSukKsq0855lIEwLw687ExphWi5u5+NCbSo+kGic1Zx7v2+/EgoiYSsYnIJTfoJj4A0KtrO17HsDg2xNHmUYjxRNFBAgpopo7jZTyTXqijNtlURhIAgmk6HvbHfERMXMtvYiHN0osNgI6wdNo6P6zSAhIV7VdlI6BvDF0ficl6X5G5Nu4mhBnxhfvWEDK5aRGnD0H2ScgHHCV2kvobosT96w/+FuuqjZmaFyv+jR+G/Q6sEDWEjgAAAABJRU5ErkJggg==") no-repeat;
}

.OptionTitle1 { color: #ffc65a; text-shadow: 1px 1px #000; }

#OptionsTextControls {
    position: absolute;
    left: 14px;
    top: 34px;
    font-size: 12px;
    font-weight: 800;
}

#OptionsControlLayouts {
    position: absolute;
    left: 14px;
    top: 55px;
    width: 289px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px;
}

.controlLayoutChoice {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 0 0 25px;
    color: #cecece;
    background: none;
    text-align: left;
    text-shadow: 1px 1px #000;
}

.controlLayoutChoice .RadioOn,
.controlLayoutChoice .RadioOff {
    position: absolute;
    left: 0;
    top: 18px;
    transform: scale(1.2);
    transform-origin: 0 0;
}

#OptionsOK,
#OptionsLeave,
.RadioOn,
.RadioOff {
    background-image: url("assets/lobby/lobby_stuff.png");
    background-repeat: no-repeat;
}

#OptionsOK,
#OptionsLeave {
    position: absolute;
    top: 188px;
    width: 135px;
    height: 48px;
    background-image: none;
    overflow: visible;
}

#OptionsOK { left: 164px; }
#OptionsLeave { left: 18px; }
#OptionsOK::before,
#OptionsLeave::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 116px;
    height: 17px;
    background-image: url("assets/lobby/lobby_stuff.png");
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(1.1, 1.35);
    pointer-events: none;
}
#OptionsOK::before { background-position: -117px -1262px; }
#OptionsLeave::before { background-position: 0 -1262px; }
.RadioOn { width: 10px; height: 10px; background-position: -234px -1262px; }
.RadioOff { width: 10px; height: 10px; background-position: -245px -1262px; }

/*
 * Phone presentation uses approved wide redraws and independently scales the
 * sourced live UI. iPad never receives these overrides and retains the exact
 * original 800 x 600 art and coordinates above.
 */
.device-phone .onlineScreen,
.device-phone #roomScreen,
.device-phone #stage {
    width: var(--presentation-width);
}

.device-phone #channelScreen,
.device-phone #roomScreen {
    background-position: center top;
    background-size: 100% 100%;
}

.device-phone :is(#channelScreen,#socialScreen) {
    background-image: none;
}

.device-phone #roomScreen {
    background-image: url("assets/iphone/room_wide_3912x1800.png");
}

.device-phone #channelScreen::before,
.device-phone #channelScreen::after,
.device-phone #roomScreen::before,
.device-phone #roomScreen::after {
    content: none;
}

.device-phone #LoginWindow {
    transform: scale(1.18);
    transform-origin: 50% 50%;
}

.device-phone .simpleDialog {
    left: calc(50% - 170.5px);
    transform: scale(1.18);
    transform-origin: 50% 50%;
}

.device-phone #recoveryDialog,
.device-phone #dialogCreateRoomWarp {
    left: calc(0px - var(--classic-offset-x));
    right: auto;
    width: var(--presentation-width);
}

.device-phone #lobbyMainPanel {
    left: calc(0px - var(--classic-offset-x));
    width: var(--presentation-width);
    transform: none;
}

.device-phone #roomsList {
    left: calc(var(--safe-left) + 72px);
    top: 72px;
    width: 880px;
}

.device-phone .lobbyRoom {
    width: 390px;
    height: 75px;
    overflow: hidden;
    border: 1px solid #061b38;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(to bottom, #075ba7 0, #075ba7 34px, #aac3eb 35px, #88a9dd 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .58), 0 1px 2px rgba(0, 0, 0, .45);
    font-size: 17px;
}

.device-phone .lobbyRoom::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 34px;
    background: linear-gradient(135deg, transparent 0 23%, #dce8fb 24% 100%);
    pointer-events: none;
}

.device-phone .lobbyRoom > * {
    z-index: 1;
}

.device-phone .lobbyRoom:nth-child(2n) { left: 420px; }
.device-phone .lobbyRoom:nth-child(1),
.device-phone .lobbyRoom:nth-child(2) { top: 0; }
.device-phone .lobbyRoom:nth-child(3),
.device-phone .lobbyRoom:nth-child(4) { top: 82px; }
.device-phone .lobbyRoom:nth-child(5),
.device-phone .lobbyRoom:nth-child(6) { top: 164px; }
.device-phone .lobbyRoom:nth-child(7),
.device-phone .lobbyRoom:nth-child(8) { top: 246px; }

.device-phone .lobbyRoomNumber { left: 8px; top: 7px; width: 32px; }
.device-phone .lobbyRoomTitle { left: 46px; top: 5px; width: 248px; font-weight: 700; }
.device-phone .lobbyRoomPlayers { right: 10px; top: 6px; }
.device-phone .lobbyRoomMap { left: 46px; top: 43px; width: 220px; }
.device-phone .lobbyRoomMode { right: 12px; top: 42px; }

.device-phone #channelName {
    left: calc(var(--safe-left) + 75px);
    top: 497px;
    font-size: 20px;
}

.device-phone #roomsPage {
    left: calc(50% - 35px);
    top: 48px;
    width: 70px;
    font-size: 16px;
    text-align: center;
}

.device-phone #buttonCreateRoom {
    left: calc(var(--safe-left) + 34px);
    top: 8px;
    transform: scale(1.2);
    transform-origin: 0 0;
}

.device-phone #lobbySidePanel {
    left: calc(0px - var(--classic-offset-x));
    top: 0;
    width: var(--presentation-width);
    transform: none;
    pointer-events: none;
}

.device-phone #myInfoBox {
    left: 1026px;
    top: 18px;
    width: 260px;
    height: 222px;
    border-radius: 9px;
}

.device-phone #lobbyAvatarPreview {
    left: 1041px;
    top: 27px;
    width: 230px;
    height: 122px;
}

.device-phone #myName2 {
    left: 1042px;
    top: 153px;
    width: 225px;
    font-size: 15px;
}

.device-phone #myGP2,
.device-phone #myCash2,
.device-phone #myGold2 {
    left: 1042px;
    right: auto;
    width: 225px;
    font-size: 13px;
    text-align: center;
}

.device-phone #myGP2 { top: 181px; }
.device-phone #myCash2 { top: 198px; }
.device-phone #myGold2 { top: 215px; }

.device-phone #playersList {
    left: 1026px;
    top: 262px;
    width: 260px;
    height: 268px;
    padding: 4px 10px;
    font-size: 14px;
}

.device-phone .lobbyPlayer {
    height: 23px;
    padding-left: 24px;
    line-height: 21px;
}

/* Keep the grouping nodes out of iPad hit testing, matching the original DOM. */
.device-pad #lobbyMainPanel,
.device-pad #lobbySidePanel {
    display: contents;
}

.device-phone #buttonChannels {
    left: auto;
    right: calc(var(--safe-right) - var(--classic-offset-x) + 16px);
    bottom: 13px;
    top: auto;
    width: 100px;
    height: 34px;
    font-size: 15px;
}

.device-phone #dialogCreateRoom {
    left: calc(50% - 170.5px);
    top: 100px;
    transform: scale(1.77);
    transform-origin: 50% 50%;
}

.device-phone #roomHeaderPanel {
    left: calc(0px - var(--classic-offset-x));
    width: var(--presentation-width);
    transform: none;
}

.device-phone #roomPlayersPanel {
    left: calc(0px - var(--classic-offset-x));
    width: var(--presentation-width);
    transform: none;
}

.device-phone #roomNumber {
    left: calc(var(--safe-left) + 92px);
    top: 5px;
    font-size: 18px;
}

.device-phone #roomTitle {
    left: calc(var(--safe-left) + 150px);
    top: 4px;
    width: 620px;
    font-size: 18px;
}

.device-phone #roomFixedOptions {
    left: 405px;
    top: 27px;
    width: 380px;
    grid-template-rows: repeat(4, 20px);
    font-size: 15px;
    line-height: 20px;
}

.device-phone #roomFixedOptions span::before {
    content: attr(data-phone-label);
    display: inline-block;
    width: 135px;
    margin-right: 18px;
    color: #e7f3ff;
    text-align: right;
    text-shadow: 1px 1px #001b42;
}

.device-phone .playerInRoom {
    width: 320px;
    height: 95px;
}

.device-phone #playerInRoom0 { left: 15px; top: 94px; }
.device-phone #playerInRoom1 { left: 668px; top: 94px; }
.device-phone #playerInRoom2 { left: 15px; top: 191px; }
.device-phone #playerInRoom3 { left: 668px; top: 191px; }
.device-phone #playerInRoom4 { left: 15px; top: 288px; }
.device-phone #playerInRoom5 { left: 668px; top: 288px; }
.device-phone #playerInRoom6 { left: 15px; top: 385px; }
.device-phone #playerInRoom7 { left: 668px; top: 385px; }

.device-phone .roomPlayerMaster,
.device-phone .roomPlayerNotReady,
.device-phone .roomPlayerReady {
    bottom: 22px;
    width: 92px;
    height: 25px;
    background: none;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 25px;
    text-align: center;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
}

.device-phone .SideA .roomPlayerMaster,
.device-phone .SideA .roomPlayerNotReady,
.device-phone .SideA .roomPlayerReady { right: 6px; }
.device-phone .SideB .roomPlayerMaster,
.device-phone .SideB .roomPlayerNotReady,
.device-phone .SideB .roomPlayerReady { left: 6px; }

.device-phone .roomPlayerMaster::after { content: "Master"; color: #ffd53b; }
.device-phone .roomPlayerReady::after { content: "Ready"; color: #48dcff; }
.device-phone .roomPlayerNotReady::after { content: ""; }

.device-phone .roomPlayerName {
    top: 38px;
    font-size: 14px;
}

.device-phone .SideA .roomPlayerName {
    left: calc(var(--safe-left) + 4px);
}

.device-phone .SideA .roomPlayerShadow { left: 55px; }
.device-phone .SideB .roomPlayerShadow { right: 55px; }

.device-phone #roomButtonStart,
.device-phone #roomButtonReady {
    left: 455px;
    top: 208px;
}

.device-phone #roomButtonChangeTeam {
    left: 488px;
    top: 350px;
}

.device-phone #roomButtonInvite { left: 428px; top: 159px; transform: scale(1.12); }
.device-phone #roomBattleItems {
    left: calc(var(--presentation-width) - var(--classic-offset-x) - 240px);
    right: auto;
    width: 225px;
}
.device-phone #roomBattleItemCatalog { grid-template-columns: repeat(3, 1fr); }
.device-phone #roomInviteDialog { left: calc(0px - var(--classic-offset-x)); width: var(--presentation-width); }
.device-phone .roomInvitePanel { width: 470px; }

.device-phone #roomButtonBack {
    right: calc(var(--safe-right) - var(--classic-offset-x) + 12px);
    bottom: 10px;
    transform: scale(1.2);
    transform-origin: 100% 100%;
}

.device-phone #roomBuddyOpen {
    left: auto;
    right: calc(var(--safe-right) - var(--classic-offset-x) + 90px);
    bottom: 10px;
    transform: scale(.92);
    transform-origin: 100% 100%;
}

.device-phone #roomMobileSelect {
    left: 104px;
    top: 72px;
    transform: scale(1.15);
    transform-origin: 50% 50%;
}

.device-phone #gameCanvas {
    width: var(--presentation-width);
}

.device-phone #match_loading {
    background:
        radial-gradient(circle at 50% 8%, rgba(39, 157, 207, .3), transparent 42%),
        linear-gradient(155deg, #081929 0%, #0b2338 48%, #07131f 100%);
}

.device-phone #match_loading_status {
    left: calc(50% - 300px);
    right: auto;
    width: 600px;
    font-size: 22px;
}

.device-phone #gameui {
    left: calc(50% - 400px);
    top: auto;
    bottom: -1px;
    background-image: url("assets/iphone/gameplay_hud_base.svg");
    background-position: 0 0;
    background-size: 800px 85px;
    transform: scale(1.15);
    transform-origin: 50% 100%;
}

.device-phone #gameui::before {
    content: none;
}

.device-phone #turn_timer {
    left: auto;
    right: calc(var(--safe-right) + 12px);
    transform: scale(1.15);
    transform-origin: 100% 0;
}

.device-phone #turns_list {
    left: calc(var(--safe-left) + 12px);
    bottom: 105px;
    transform: scale(1.2) translateZ(0);
    transform-origin: 0 100%;
}

.device-phone #wind_meter2 {
    left: calc(50% - 66px);
    transform: scale(.65);
}

.device-phone #game_click_to_revive {
    width: var(--presentation-width);
    font-size: 42px;
}

.device-phone #touch_ui.control-large {
    right: calc(var(--safe-right) + 22px);
    top: 125px;
    bottom: auto;
    transform: scale(1.15);
}

.device-phone #touch_ui.control-medium {
    right: calc(var(--safe-right) + 22px);
    top: 125px;
    bottom: auto;
    transform: scale(.86);
}

.device-phone #touch_ui.control-small {
    right: calc(var(--safe-right) + 22px);
    top: 125px;
    bottom: auto;
    transform: scale(.575);
}

.device-phone #touch_ui.control-small #btnLeft,
.device-phone #touch_ui.control-small #btnRight,
.device-phone #touch_ui.control-small #btnUp,
.device-phone #touch_ui.control-small #btnDown,
.device-phone #touch_ui.control-small #btnShoot,
.device-phone #touch_ui.control-medium #btnLeft,
.device-phone #touch_ui.control-medium #btnRight,
.device-phone #touch_ui.control-medium #btnUp,
.device-phone #touch_ui.control-medium #btnDown,
.device-phone #touch_ui.control-medium #btnShoot,
.device-phone #touch_ui.control-large #btnLeft,
.device-phone #touch_ui.control-large #btnRight,
.device-phone #touch_ui.control-large #btnUp,
.device-phone #touch_ui.control-large #btnDown,
.device-phone #touch_ui.control-large #btnShoot {
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 18px;
    background-color: rgba(32, 32, 32, .46);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

.device-phone #btnShot1,
.device-phone #btnShot2,
.device-phone #btnShotSS {
    top: 16px;
    transform: scale(1.18);
    transform-origin: 0 0;
    touch-action: none;
}

.device-phone #btnShot1 { left: 10px; }
.device-phone #btnShot2 { left: 54px; }
.device-phone #btnShotSS { left: 98px; }

.device-phone #btnEsc,
.device-phone #btnPass {
    touch-action: none;
}

/* The responsive battle-mode card occupies the otherwise unused phone wing
   immediately to the right of the sourced ESC/F8/Gold stack. */
.device-phone #battleModePanel {
    left: 808px;
    top: 2px;
    width: clamp(116px, calc(var(--classic-offset-x) - var(--safe-right) - 16px), 190px);
}
.device-phone #tagMobileCard { grid-template-columns: minmax(48px, 68px) minmax(0, 1fr); padding-inline: 5px; }
.device-phone #tagMobileCanvas { width: min(62px, 100%); }

.device-phone #OptionsDialog {
    left: calc(50% - 158.5px);
    top: 166px;
    transform: scale(1.35);
    transform-origin: 50% 50%;
}

.device-phone #game_over {
    left: 0;
    width: var(--presentation-width);
    background: #000 url("assets/iphone/results_wide_3912x1800.png") center / 100% 100% no-repeat;
}

.device-phone #game_over::before {
    content: none;
}

.device-phone #game_over::after {
    content: none;
}

.device-phone #scores_lose_a,
.device-phone #scores_lose_b,
.device-phone #game_over > .score {
    transform: translateX(var(--classic-offset-x));
}

/* Avatar shop: positions and sprite rectangles follow the supplied classic
 * client. The phone override only rearranges those sourced pieces. */
#RegisterGender {
    width: 270px;
    margin: 1px 5px;
    display: flex;
    justify-content: center;
    gap: 28px;
    color: #fff;
    font-size: 15px;
}

#RegisterGender label,
#RegisterGender input { touch-action: manipulation; }

.avatarShopOpen {
    position: absolute;
    width: 62px;
    height: 62px;
    background: url("assets/lobby/lobby_stuff.png") -252px -177px no-repeat;
    z-index: 30;
}

#buttonAvatarShop { left: 472px; top: 7px; }
#roomBuddyOpen { left: 600px; bottom: 5px; transform: scale(.83); transform-origin: left bottom; }

#shopScreen {
    background: #071425;
}

#shopPlayerPreview {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 210px;
    height: 160px;
}

#shopMyStats {
    position: absolute;
    left: 12px;
    top: 209px;
    width: 220px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 8px);
    gap: 0 4px;
    color: #dff7ff;
    font-size: 8px;
    line-height: 8px;
    text-align: center;
}

#shopInventory {
    position: absolute;
    left: 11px;
    top: 227px;
    width: 219px;
    height: 248px;
    overflow-y: auto;
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

#shopInventory::-webkit-scrollbar { display: none; }

.shopInventoryItem {
    position: relative;
    width: 204px;
    height: 31px;
    background: transparent;
    color: #295a9c;
    font-size: 10px;
    text-align: left;
    touch-action: manipulation;
}

.shopInventoryItem.equipped::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 7px;
    width: 10px;
    height: 17px;
    background: transparent;
}

.shopInventoryItem span { position: absolute; left: 36px; top: 4px; color: #295a9c; }
.shopInventoryItem small { position: absolute; left: 36px; top: 16px; color: #4b6386; }
.shopInventoryItem:active,
.shopInventoryItem.selected { background-position: 0 -327px; }
.shopInventoryItem:active span,
.shopInventoryItem.selected span { color: #fff; }

#shopBalances span {
    position: absolute;
    right: 605px;
    width: 150px;
    height: 12px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
}

#shopCash { top: 143px; color: #8bc2ee; }
#shopGold { top: 157px; color: #ffd273; }

#shopItems { position: absolute; inset: 0; pointer-events: none; }

.shopItem {
    position: absolute;
    width: 169px;
    height: 148px;
    background: transparent;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    pointer-events: auto;
}

.shopItem:nth-child(1) { left: 259px; top: 26px; }
.shopItem:nth-child(2) { left: 434px; top: 26px; }
.shopItem:nth-child(3) { left: 609px; top: 26px; }
.shopItem:nth-child(4) { left: 259px; top: 178px; }
.shopItem:nth-child(5) { left: 434px; top: 178px; }
.shopItem:nth-child(6) { left: 609px; top: 178px; }
.shopItem:nth-child(7) { left: 259px; top: 330px; }
.shopItem:nth-child(8) { left: 434px; top: 330px; }
.shopItem:nth-child(9) { left: 609px; top: 330px; }
.shopItem.selected { background-position: -169px 0; }
.shopItem:active { transform: translate(2px, 2px); }

.shopItemName { position: absolute; left: 6px; top: 5px; width: 156px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.shopItemGender { position: absolute; left: 7px; top: 20px; color: #cfeaff; font-size: 9px; }
.shopItem canvas { position: absolute; left: 19px; top: 30px; width: 130px; height: 72px; }
.shopItemPrices { position: absolute; right: 10px; bottom: 5px; width: 150px; color: #ffd273; font-size: 10px; font-weight: 700; text-align: right; }
.shopItemPrices.cash { color: #8bc2ee; }
.shopItemStats { position: absolute; left: 8px; bottom: 17px; width: 153px; color: #e5f7ff; font-size: 9px; text-align: left; }
.shopItem.unavailable { filter: saturate(.35); }

#shopCategories { position: absolute; inset: 0; }
#shopCategories button,
#shopPrev,
#shopNext,
#shopBuy,
#shopExit {
    position: absolute;
    background-image: none;
    background-repeat: no-repeat;
    color: transparent;
}

#shopCategories button[data-avatar-category="head"] { left: 281px; top: 493px; width: 35px; height: 31px; background-position: 0 -202px; }
#shopCategories button[data-avatar-category="body"] { left: 344px; top: 493px; width: 37px; height: 31px; background-position: -35px -202px; }
#shopCategories button[data-avatar-category="eyes"] { left: 407px; top: 495px; width: 33px; height: 31px; background-position: -72px -204px; }
#shopCategories button[data-avatar-category="flag"] { left: 470px; top: 493px; width: 30px; height: 33px; background-position: -105px -200px; }
#shopCategories button[data-avatar-category="background"] { left: 285px; top: 551px; width: 57px; height: 26px; background-position: -253px -208px; }
#shopCategories button[data-avatar-category="foreground"] { left: 371px; top: 545px; width: 57px; height: 33px; background-position: -311px -201px; }
#shopCategories button.active { filter: drop-shadow(0 0 4px #fff) brightness(1.3); }

#shopPrev { left: 640px; top: 496px; width: 37px; height: 28px; background-position: -135px -202px; }
#shopNext { left: 710px; top: 496px; width: 37px; height: 28px; background-position: -172px -202px; }
#shopPages { position: absolute; left: 661px; top: 505px; width: 70px; color: #000; text-align: center; }
#shopBuy { left: 534px; top: 493px; width: 72px; height: 82px; background-position: -232px -245px; }
#shopExit { left: 14px; top: 541px; width: 36px; height: 50px; background-position: -91px -233px; }

#shopPurchaseDialog { position: absolute; inset: 0; z-index: 1000; }
#shopPurchasePanel {
    position: absolute;
    left: 207px;
    top: 124px;
    width: 386px;
    height: 353px;
    background: transparent;
    color: #fff;
}

#shopPurchaseName { position: absolute; left: 125px; top: 33px; width: 230px; color: #fff; font-weight: 700; }
#shopPurchasePreview { position: absolute; left: 149px; top: 72px; width: 170px; height: 130px; }
#shopPermanentPurchase {
    position: absolute;
    left: 47px;
    right: 47px;
    top: 205px;
    padding: 8px 10px;
}
#shopBuyCash,
#shopBuyGold,
#shopPurchaseCancel {
    border: 1px solid #142848;
    border-radius: 5px;
    padding: 6px 10px;
    background: linear-gradient(#e9f3ff, #7698c5);
    color: #10213f;
    font-weight: 700;
}
#shopBuyCash { position: absolute; left: 49px; top: 260px; width: 130px; color: #0b4c8d; }
#shopBuyGold { position: absolute; right: 49px; top: 260px; width: 130px; color: #715400; }
#shopPurchaseCancel { position: absolute; left: 143px; top: 309px; width: 100px; }

.device-phone #shopScreen {
    width: var(--presentation-width);
    background-image: none;
    background-position: center;
    background-size: 100% 100%;
}

.device-phone #shopScreen .classicFrame {
    left: 0;
    width: var(--presentation-width);
}

.device-phone #shopItems { left: 0; }
.device-phone .shopItem { transform: scale(1.16); transform-origin: 0 0; }
.device-phone .shopItem:active { transform: translate(2px, 2px) scale(1.16); }
.device-phone .shopItem:nth-child(1) { left: 330px; top: 45px; }
.device-phone .shopItem:nth-child(2) { left: 560px; top: 45px; }
.device-phone .shopItem:nth-child(3) { left: 790px; top: 45px; }
.device-phone .shopItem:nth-child(4) { left: 330px; top: 220px; }
.device-phone .shopItem:nth-child(5) { left: 560px; top: 220px; }
.device-phone .shopItem:nth-child(6) { left: 790px; top: 220px; }
.device-phone .shopItem:nth-child(7) { left: 330px; top: 395px; }
.device-phone .shopItem:nth-child(8) { left: 560px; top: 395px; }
.device-phone .shopItem:nth-child(9) { left: 790px; top: 395px; }

.device-phone #shopCategories { left: 0; }
.device-phone #shopCategories button { transform: scale(1.18); transform-origin: 50% 50%; }
.device-phone #shopCategories button[data-avatar-category="head"] { left: 1025px; top: 250px; }
.device-phone #shopCategories button[data-avatar-category="body"] { left: 1090px; top: 250px; }
.device-phone #shopCategories button[data-avatar-category="eyes"] { left: 1155px; top: 252px; }
.device-phone #shopCategories button[data-avatar-category="flag"] { left: 1220px; top: 250px; }
.device-phone #shopCategories button[data-avatar-category="background"] { left: 1040px; top: 315px; }
.device-phone #shopCategories button[data-avatar-category="foreground"] { left: 1150px; top: 309px; }
.device-phone #shopBuy { left: 1145px; top: 430px; transform: scale(1.15); }
.device-phone #shopPrev { left: 1015px; top: 500px; transform: scale(1.15); }
.device-phone #shopNext { left: 1095px; top: 500px; transform: scale(1.15); }
.device-phone #shopPages { left: 1045px; top: 507px; width: 60px; font-size: 15px; text-align: center; }
.device-phone #shopExit { left: calc(var(--safe-left) + 16px); }
.device-phone #shopBalances span { right: auto; left: 74px; }
.device-phone #shopCash { top: 142px; }
.device-phone #shopGold { top: 156px; }
.device-phone #shopMyStats {
    left: 12px;
    top: 172px;
    width: 220px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 8px);
    gap: 0 4px;
    font-size: 8px;
}
.device-phone .shopInventoryItem span,
.device-phone .shopInventoryItem small { left: calc(var(--safe-left) - 15px); }
.device-phone .shopInventoryItem.equipped::before { left: calc(var(--safe-left) - 27px); }
.device-phone #shopPurchasePanel { left: calc(50% - 193px); transform: scale(1.15); transform-origin: 50% 50%; }
.device-phone #shopPurchaseDialog { width: var(--presentation-width); }

/* Avatar Studio redesign. This interface intentionally does not use the
 * supplied fixed shop background or packed shop-control overlay. Avatar art,
 * catalog values, ownership and statistics remain sourced data. */
#shopScreen {
    --shop-bg: #071425;
    --shop-panel: rgba(18, 35, 57, .94);
    --shop-panel-soft: rgba(25, 48, 76, .88);
    --shop-line: rgba(132, 190, 236, .22);
    --shop-text: #f4f8fc;
    --shop-muted: #9eb3c9;
    --shop-accent: #4fd4ff;
    --shop-accent-dark: #0879a4;
    background-color: var(--shop-bg) !important;
    background-image:
        radial-gradient(circle at 72% -20%, rgba(28, 148, 211, .3), transparent 46%),
        radial-gradient(circle at 5% 100%, rgba(62, 88, 199, .2), transparent 42%),
        linear-gradient(140deg, #07111f, #0b1c31 48%, #091522) !important;
    color: var(--shop-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    text-shadow: none;
}

#shopScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}

#shopShell,
.device-phone #shopScreen #shopShell {
    left: 0;
    top: 0;
    width: 100%;
    height: 600px;
}

#shopTopBar {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    height: 62px;
    display: flex;
    align-items: center;
    padding: 0 14px 0 18px;
    border: 1px solid var(--shop-line);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(21, 45, 72, .98), rgba(13, 29, 48, .98));
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06);
}

#shopBrand h1,
#shopBrand p,
.shopPanelHeading h2,
.shopPanelHeading p { margin: 0; }

#shopBrand h1 { font-size: 20px; line-height: 23px; letter-spacing: -.4px; }
#shopBrand p { margin-top: 2px; color: var(--shop-muted); font-size: 10px; }

#shopBalances {
    position: static;
    margin-left: auto;
    display: flex;
    gap: 8px;
}

#shopBalances span {
    position: static;
    width: auto;
    height: 30px;
    min-width: 102px;
    padding: 7px 12px;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    background: rgba(4, 13, 25, .5);
    font-size: 11px;
    font-weight: 750;
    line-height: 14px;
    text-align: center;
}

#shopCash { color: #65c4ff; }
#shopGold { color: #ffd968; }

#shopExit,
#shopBuy,
#shopPrev,
#shopNext {
    position: static;
    width: auto;
    height: auto;
    background-image: none;
    color: var(--shop-text);
    touch-action: manipulation;
}

#shopExit {
    margin-left: 10px;
    min-width: 68px;
    padding: 9px 13px;
    border: 1px solid rgba(172, 207, 232, .26);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 750;
}

#shopExit:active { background: rgba(255, 255, 255, .15); }

.shopPanel {
    position: absolute;
    border: 1px solid var(--shop-line);
    border-radius: 16px;
    background: linear-gradient(155deg, var(--shop-panel-soft), var(--shop-panel));
    box-shadow: 0 16px 35px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .045);
    overflow: hidden;
}

.shopPanelHeading {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 13px;
}

.shopEyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--shop-accent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.shopPanelHeading h2 { font-size: 15px; line-height: 18px; }
.shopPanelHeading p { margin-top: 5px; color: var(--shop-muted); font-size: 9px; line-height: 12px; }

#shopProfilePanel { left: 14px; top: 86px; width: 218px; height: 234px; }

#shopPreviewStage {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 58px;
    height: 128px;
    border: 1px solid rgba(135, 197, 239, .18);
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% 68%, rgba(77, 194, 244, .19), transparent 48%),
        linear-gradient(180deg, rgba(10, 24, 40, .5), rgba(4, 12, 22, .72));
    overflow: hidden;
}

#shopPreviewStage::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 12px;
    height: 11px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    filter: blur(5px);
}

#shopPlayerPreview {
    position: absolute;
    z-index: 1;
    left: 0;
    top: -24px;
    width: 100%;
    height: 170px;
}

#shopMyStats {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 194px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 12px);
    gap: 3px;
    color: #c7d8e8;
    font-size: 7px;
    line-height: 12px;
    text-align: center;
}

#shopMyStats span {
    border-radius: 4px;
    background: rgba(4, 13, 24, .45);
}

#shopEquippedSummary,
#shopEquipGuide { display: none; }

#shopOwnedPanel { left: 14px; top: 332px; width: 218px; height: 252px; }

#shopInventory {
    position: absolute;
    left: 10px;
    right: 8px;
    top: 78px;
    bottom: 10px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 4px 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(81, 194, 242, .45) rgba(4, 13, 24, .35);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

#shopInventory::-webkit-scrollbar,
#shopItems::-webkit-scrollbar { width: 5px; display: block; }
#shopInventory::-webkit-scrollbar-track,
#shopItems::-webkit-scrollbar-track { background: rgba(4, 13, 24, .35); border-radius: 5px; }
#shopInventory::-webkit-scrollbar-thumb,
#shopItems::-webkit-scrollbar-thumb { background: rgba(81, 194, 242, .5); border-radius: 5px; }

.shopInventoryItem {
    position: relative;
    flex: 0 0 64px;
    width: 100%;
    height: 64px;
    padding: 7px 61px 7px 53px;
    border: 1px solid rgba(135, 197, 239, .16);
    border-radius: 11px;
    background: rgba(7, 18, 31, .63);
    color: var(--shop-text);
    text-align: left;
    touch-action: manipulation;
}

.shopInventoryItem.selected { border-color: rgba(79, 212, 255, .78); background: rgba(22, 69, 96, .65); }
.shopInventoryItem.equipped { border-color: rgba(81, 222, 159, .5); }
.shopInventoryItem.equipped::before { content: none; }

.shopInventoryPreview {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 44px;
    height: 52px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
}

.shopInventoryItem span,
.shopInventoryItem small {
    position: static;
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shopInventoryItem span { margin-top: 6px; font-size: 9px; font-weight: 750; }
.shopInventoryItem small { margin-top: 3px; color: var(--shop-muted); font-size: 7px; }
.shopInventoryItem:active span,
.shopInventoryItem.selected span { color: var(--shop-text); }

.shopInventoryEquip {
    position: absolute;
    right: 6px;
    top: 17px;
    min-width: 51px;
    height: 29px;
    padding: 0 7px;
    border: 1px solid rgba(79, 212, 255, .4);
    border-radius: 8px;
    background: linear-gradient(180deg, #168ebc, #08688e);
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    touch-action: manipulation;
}

.shopInventoryItem.equipped .shopInventoryEquip {
    border-color: rgba(83, 225, 163, .48);
    background: rgba(27, 100, 73, .74);
    color: #baf6d5;
}

.shopInventoryEquip:active { filter: brightness(1.2); }

#shopCatalogPanel { left: 244px; right: 14px; top: 86px; height: 498px; }

#shopCatalogPanel > .shopPanelHeading { height: 86px; }

#shopCategories {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    touch-action: pan-x;
}

#shopCategories::-webkit-scrollbar { display: none; }

#shopCategories button,
.device-phone #shopCategories button {
    position: static;
    flex: 0 0 auto;
    width: auto !important;
    height: 27px !important;
    padding: 0 10px;
    border: 1px solid rgba(135, 197, 239, .18);
    border-radius: 9px;
    background: rgba(5, 16, 29, .52);
    background-image: none;
    color: var(--shop-muted);
    font-size: 8px;
    font-weight: 700;
    transform: none;
    filter: none;
    touch-action: manipulation;
}

#shopCategories button.active {
    border-color: rgba(79, 212, 255, .7);
    background: rgba(28, 128, 169, .42);
    color: #eefdff;
    filter: none;
}

#shopItems {
    position: absolute;
    left: 12px;
    right: 9px;
    top: 105px;
    bottom: 60px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 158px;
    gap: 9px;
    padding: 0 4px 9px 0;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(81, 194, 242, .45) rgba(4, 13, 24, .35);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.shopItem,
.device-phone .shopItem {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 158px;
    padding: 0;
    border: 1px solid rgba(135, 197, 239, .17);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(34, 57, 83, .9), rgba(10, 24, 41, .94));
    background-image: none;
    color: var(--shop-text);
    text-shadow: none;
    transform: none;
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
}

.shopItem::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    pointer-events: none;
}

.shopItem.selected {
    border-color: var(--shop-accent);
    background: linear-gradient(155deg, rgba(27, 104, 139, .82), rgba(10, 36, 57, .96));
    background-image: none;
    box-shadow: 0 0 0 1px rgba(79, 212, 255, .18), 0 8px 18px rgba(0, 0, 0, .22);
}

.shopItem:active,
.device-phone .shopItem:active { transform: scale(.985); }
.shopItem.unavailable { filter: saturate(.45); opacity: .66; }
.shopItem.owned::before {
    content: "OWNED";
    position: absolute;
    z-index: 2;
    right: 7px;
    top: 7px;
    padding: 3px 5px;
    border-radius: 5px;
    background: #1e7d5b;
    color: #d2fbe6;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: .6px;
}

.shopItemName { left: 8px; top: 7px; width: calc(100% - 16px); font-size: 9px; font-weight: 750; }
.shopItemGender { left: 8px; top: 22px; color: var(--shop-muted); font-size: 7px; }
.shopItem canvas {
    left: 8px;
    top: 34px;
    width: calc(100% - 16px);
    height: 78px;
    border-radius: 8px;
    background: radial-gradient(circle, rgba(102, 193, 235, .12), rgba(3, 12, 23, .34));
}
.shopItemStats { left: 8px; bottom: 28px; width: calc(100% - 16px); color: #b8cada; font-size: 6px; line-height: 8px; }
.shopItemPrices { right: 8px; bottom: 7px; width: calc(100% - 16px); color: #ffd968; font-size: 8px; }
.shopItemPrices.cash { color: #65c4ff; }

#shopCatalogFooter {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 40px;
    display: flex;
    align-items: center;
}

#shopPager { display: flex; align-items: center; gap: 7px; }
#shopPrev,
#shopNext {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(135, 197, 239, .2);
    border-radius: 9px;
    background: rgba(5, 16, 29, .65);
    color: #cce8f8;
    font-size: 21px;
    line-height: 28px;
}
#shopPages { position: static; width: 48px; color: var(--shop-muted); font-size: 9px; text-align: center; }

#shopBuy {
    margin-left: auto;
    min-width: 126px;
    padding: 10px 15px;
    border: 1px solid rgba(79, 212, 255, .5);
    border-radius: 10px;
    background: linear-gradient(180deg, #159ac8, #08739c);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

#shopBuy:disabled { border-color: rgba(135, 197, 239, .12); background: rgba(255, 255, 255, .05); color: #71869a; }
#shopBuy:not(:disabled):active { filter: brightness(1.18); }

#shopMessage {
    left: 250px;
    right: 22px;
    bottom: 5px;
    min-height: 14px;
    color: #ffe57f;
    font-size: 9px;
    pointer-events: none;
}

#shopPurchaseDialog,
.device-phone #shopPurchaseDialog { position: absolute; inset: 0; width: 100%; z-index: 1200; }
#shopPurchaseDialog .dialogShade { background: rgba(2, 8, 15, .78); backdrop-filter: blur(4px); }

#shopPurchasePanel,
.device-phone #shopPurchasePanel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 430px;
    height: 386px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(126, 200, 242, .32);
    border-radius: 20px;
    background: linear-gradient(155deg, #183653, #0a1c30);
    background-image: none;
    color: var(--shop-text);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .06);
}

.shopPurchaseHeader { position: absolute; left: 22px; right: 22px; top: 18px; }
.shopPurchaseHeader > span { display: block; color: var(--shop-accent); font-size: 8px; font-weight: 800; letter-spacing: 1px; }
#shopPurchaseName { position: static; width: auto; margin-top: 4px; color: #fff; font-size: 17px; font-weight: 800; }
.shopPurchasePreviewStage {
    position: absolute;
    left: 22px;
    top: 72px;
    width: 170px;
    height: 150px;
    border: 1px solid rgba(135, 197, 239, .18);
    border-radius: 14px;
    background: radial-gradient(circle, rgba(102, 193, 235, .16), rgba(3, 12, 23, .48));
}
#shopPurchasePreview { position: static; width: 170px; height: 130px; margin-top: 10px; }
.shopPurchaseLabel { position: absolute; left: 212px; top: 80px; color: var(--shop-muted); font-size: 9px; }
#shopPermanentPurchase {
    position: absolute;
    left: 212px;
    right: 22px;
    top: 102px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 92px;
    box-sizing: border-box;
    border: 1px solid var(--shop-accent);
    border-radius: 12px;
    padding: 16px;
    background: rgba(23, 126, 165, .28);
    color: #fff;
}
#shopPermanentPurchase strong { font-size: 14px; }
#shopPermanentPurchase span { color: var(--shop-muted); font-size: 9px; line-height: 1.35; }
#shopBuyCash,
#shopBuyGold,
#shopPurchaseCancel {
    border: 1px solid rgba(135, 197, 239, .22);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(5, 16, 29, .63);
    color: #c7d8e8;
    font-size: 9px;
    font-weight: 750;
    touch-action: manipulation;
}
#shopBuyCash { left: 22px; top: 244px; width: 185px; height: 45px; color: #7ed1ff; }
#shopBuyGold { right: 22px; top: 244px; width: 185px; height: 45px; color: #ffe17d; }
#shopPurchaseCancel { left: 130px; top: 314px; width: 170px; height: 42px; }
#shopBuyCash:disabled,
#shopBuyGold:disabled { opacity: .35; }

.device-phone #shopTopBar { left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); }
.device-phone #shopBrand h1 { font-size: 22px; }
.device-phone #shopBrand p { font-size: 11px; }
.device-phone #shopBalances span { min-width: 118px; font-size: 12px; }
.device-phone #shopExit { min-width: 76px; font-size: 12px; }

.device-phone #shopProfilePanel {
    left: calc(var(--safe-left) + 12px);
    top: 86px;
    width: 250px;
    height: 498px;
}
.device-phone #shopPreviewStage { top: 62px; height: 238px; }
.device-phone #shopPlayerPreview { top: 2px; height: 220px; }
.device-phone #shopMyStats { top: 315px; grid-template-rows: repeat(2, 22px); font-size: 9px; line-height: 22px; gap: 6px; }
.device-phone #shopEquippedSummary {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 374px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}
.device-phone #shopEquippedSummary div {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(135, 197, 239, .13);
    border-radius: 7px;
    background: rgba(4, 13, 24, .4);
}
.device-phone #shopEquippedSummary span,
.device-phone #shopEquippedSummary strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.device-phone #shopEquippedSummary span { color: var(--shop-muted); font-size: 6px; text-transform: uppercase; }
.device-phone #shopEquippedSummary strong { margin-top: 2px; color: #eaf7ff; font-size: 7px; }
.device-phone #shopEquipGuide {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: block;
    padding: 9px 10px;
    border: 1px solid rgba(79, 212, 255, .24);
    border-radius: 10px;
    background: rgba(20, 91, 120, .25);
}
.device-phone #shopEquipGuide strong,
.device-phone #shopEquipGuide span { display: block; }
.device-phone #shopEquipGuide strong { color: #a8ebff; font-size: 8px; }
.device-phone #shopEquipGuide span { margin-top: 3px; color: #b9cad9; font-size: 7px; line-height: 10px; }

.device-phone #shopCatalogPanel {
    left: calc(var(--safe-left) + 274px);
    right: calc(var(--safe-right) + 332px);
    top: 86px;
    height: 498px;
}
.device-phone #shopItems { left: 12px; grid-auto-rows: 175px; }
.device-phone .shopItem { height: 175px; }
.device-phone .shopItemName { font-size: 10px; }
.device-phone .shopItem canvas { height: 90px; }
.device-phone .shopItemStats { bottom: 29px; font-size: 7px; }
.device-phone .shopItemPrices { font-size: 9px; }

.device-phone #shopOwnedPanel {
    left: auto;
    right: calc(var(--safe-right) + 12px);
    top: 86px;
    width: 308px;
    height: 498px;
}
.device-phone #shopInventory { top: 78px; }
.device-phone .shopInventoryItem { flex-basis: 72px; height: 72px; padding-left: 63px; padding-right: 79px; }
.device-phone .shopInventoryPreview { width: 54px; height: 60px; }
.device-phone .shopInventoryItem span { margin-top: 8px; font-size: 11px; }
.device-phone .shopInventoryItem small { font-size: 8px; }
.device-phone .shopInventoryEquip { right: 7px; top: 18px; min-width: 67px; height: 34px; font-size: 9px; }
.device-phone #shopMessage { left: calc(var(--safe-left) + 286px); right: calc(var(--safe-right) + 344px); }
.device-phone #shopBuy,
.device-phone #shopPrev,
.device-phone #shopNext { transform: none; }

/* Responsive Battle Lobby
 *
 * This user-directed presentation is code-native and deliberately does not
 * select the fixed classic lobby background/control overlay. Room, account,
 * avatar, rank, currency, presence, and game-state data remain live.
 */
:is(#channelScreen,#socialScreen) {
    --lobby-panel: rgba(9, 24, 42, .92);
    --lobby-panel-strong: rgba(12, 31, 53, .98);
    --lobby-line: rgba(128, 188, 228, .18);
    --lobby-line-strong: rgba(86, 209, 255, .52);
    --lobby-accent: #4ed8ff;
    --lobby-accent-2: #30e5a1;
    --lobby-text: #f4fbff;
    --lobby-muted: #91a9bb;
    background:
        radial-gradient(circle at 18% 8%, rgba(31, 122, 171, .25), transparent 34%),
        radial-gradient(circle at 78% 108%, rgba(17, 93, 122, .28), transparent 38%),
        linear-gradient(145deg, #07111f 0%, #0a1b2c 54%, #06101c 100%);
    color: var(--lobby-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}
#channelScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(106, 174, 213, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 174, 213, .025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
#lobbyShell { position: absolute; inset: 0; width: 100%; height: 600px; }
#lobbyTopBar,
.lobbyPanel {
    border: 1px solid var(--lobby-line);
    background: var(--lobby-panel);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#lobbyTopBar {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10px;
    height: 64px;
    border-radius: 16px;
}
.lobbyEyebrow {
    display: block;
    color: var(--lobby-accent);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.35px;
}
#lobbyBrand { position: absolute; left: 18px; top: 10px; }
#lobbyBrand h1 {
    margin: 2px 0 0;
    font-size: 19px;
    line-height: 21px;
    letter-spacing: -.35px;
}
#channelName {
    position: static;
    width: auto;
    margin: 2px 0 0;
    color: var(--lobby-muted);
    font-size: 8px;
}
#lobbyPresenceSummary {
    position: absolute;
    left: 188px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 27px;
    padding: 0 11px;
    border: 1px solid rgba(48, 229, 161, .18);
    border-radius: 20px;
    background: rgba(23, 91, 72, .22);
    color: #baf8dc;
    font-size: 8px;
}
.presenceDot,
.friendPresenceDot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #526270;
    box-shadow: 0 0 0 3px rgba(82, 98, 112, .12);
}
.presenceDot,
.lobbyFriend.online .friendPresenceDot {
    background: var(--lobby-accent-2);
    box-shadow: 0 0 0 3px rgba(48, 229, 161, .12), 0 0 10px rgba(48, 229, 161, .35);
}
#lobbyHeaderActions {
    position: absolute;
    right: 9px;
    top: 9px;
    display: flex;
    gap: 7px;
}
#lobbyHeaderActions button,
#buttonCreateRoom,
#lobbyChatSend,
#lobbyAddFriend,
.lobbyFriendRequest button,
#dialogCreateRoom button,
#friendDialogPanel button {
    border: 1px solid rgba(132, 194, 233, .22);
    border-radius: 10px;
    background: rgba(9, 28, 48, .82);
    color: #d8e8f4;
    font-family: inherit;
    font-weight: 780;
    touch-action: manipulation;
}
#lobbyHeaderActions button {
    position: static;
    width: auto;
    height: 44px;
    padding: 0 14px;
    font-size: 8px;
}
#lobbyHeaderActions #buttonAvatarShop {
    background: linear-gradient(145deg, rgba(30, 126, 164, .7), rgba(16, 72, 105, .74));
    border-color: rgba(78, 216, 255, .42);
    color: #fff;
}
#lobbyHeaderActions button:active,
#buttonCreateRoom:active,
#lobbyChatSend:active,
#lobbyAddFriend:active { transform: translateY(1px); }
#lobbyHeaderActions button:disabled { opacity: .45; }

.lobbyPanel { position: absolute; border-radius: 16px; overflow: hidden; }
.lobbyPanelHeading {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 11px;
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.lobbyPanelHeading h2 {
    margin: 2px 0 0;
    color: var(--lobby-text);
    font-size: 13px;
    line-height: 16px;
    letter-spacing: -.2px;
}
#lobbyMainPanel {
    display: block;
    left: 12px;
    top: 86px;
    width: 300px;
    height: 498px;
    transform: none;
}
#roomsPage,
#lobbyFriendsCount,
#lobbyChatAudience {
    position: static;
    width: auto;
    color: var(--lobby-muted);
    font-size: 7px;
    line-height: 18px;
    white-space: nowrap;
}
#roomsList {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 62px;
    bottom: 68px;
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 74px;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1px 3px 4px 1px;
    color: var(--lobby-text);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.lobbyRoom,
.device-phone .lobbyRoom {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 74px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 188, 228, .15);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(18, 46, 75, .9), rgba(8, 26, 45, .94));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color: var(--lobby-text);
    font-family: inherit;
    font-size: 8px;
    text-align: left;
    touch-action: manipulation;
}
.lobbyRoom::before,
.device-phone .lobbyRoom::before { content: none; }
.lobbyRoom:not(:disabled):active { border-color: var(--lobby-accent); background: rgba(16, 61, 89, .95); }
.lobbyRoom:disabled { opacity: .62; }
.lobbyRoomNumber {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 38px;
    color: var(--lobby-accent);
    font-size: 8px;
    font-weight: 850;
    text-align: left;
}
.lobbyRoomTitle {
    position: absolute;
    left: 50px;
    right: 60px;
    top: 9px;
    width: auto;
    overflow: hidden;
    color: #f6fbff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lobbyRoomPlayers {
    position: absolute;
    right: 10px;
    top: 9px;
    color: #c7d8e5;
    font-size: 8px;
    text-shadow: none;
}
.lobbyRoomMap {
    position: absolute;
    left: 50px;
    top: 33px;
    width: 95px;
    overflow: hidden;
    color: var(--lobby-muted);
    font-size: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lobbyRoomMode,
.lobbyRoomStatus {
    position: absolute;
    top: 49px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 6px;
    font-weight: 800;
}
.lobbyRoomMode { left: 50px; right: auto; color: #a8eaff; background: rgba(34, 134, 174, .2); }
.lobbyRoomStatus { left: 99px; color: #9af0c9; background: rgba(36, 140, 103, .18); }
.lobbyRoom.playing .lobbyRoomStatus,
.lobbyRoom.full .lobbyRoomStatus { color: #ffcb91; background: rgba(164, 91, 35, .2); }
.lobbyRoomJoin {
    position: absolute;
    right: 9px;
    bottom: 9px;
    min-width: 48px;
    padding: 6px 7px;
    border: 1px solid rgba(78, 216, 255, .36);
    border-radius: 8px;
    background: rgba(31, 128, 165, .28);
    color: #d9f7ff;
    font-size: 7px;
    font-weight: 850;
    text-align: center;
}
#lobbyRoomsFooter {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 47px;
}
#lobbyMessage {
    position: absolute;
    left: 2px;
    right: 120px;
    top: 9px;
    bottom: auto;
    min-height: 24px;
    color: #a8c0d0;
    font-size: 7px;
    line-height: 11px;
    text-align: left;
}
#buttonCreateRoom {
    position: absolute;
    right: 0;
    top: 0;
    width: 113px;
    height: 44px;
    border-color: rgba(78, 216, 255, .44);
    background: linear-gradient(145deg, #197fa7, #10527b);
    color: #fff;
    font-size: 8px;
}
#buttonCreateRoom span { margin-right: 5px; font-size: 13px; vertical-align: -1px; }

#lobbyChatPanel {
    left: 322px;
    top: 86px;
    width: 270px;
    height: 498px;
}
#lobbyChatMessages {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 62px;
    bottom: 66px;
    overflow-y: auto;
    padding: 0 3px 5px 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.lobbyChatMessage {
    margin: 0 0 7px;
    padding: 8px 9px;
    border: 1px solid rgba(126, 188, 228, .11);
    border-radius: 10px;
    background: rgba(4, 15, 27, .5);
}
.lobbyChatMessage.mine { border-color: rgba(78, 216, 255, .24); background: rgba(18, 75, 101, .25); }
.lobbyChatMessage > div { display: flex; justify-content: space-between; gap: 8px; }
.lobbyChatMessage strong { color: #9ee9ff; font-size: 7px; }
.lobbyChatMessage time { color: #607c91; font-size: 6px; }
.lobbyChatMessage p {
    margin: 4px 0 0;
    color: #d6e2eb;
    font-size: 8px;
    line-height: 11px;
    overflow-wrap: anywhere;
}
.chatSafetyActions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 6px;
}
.chatSafetyActions button {
    position: static;
    width: auto;
    min-width: 54px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(140, 184, 212, .24);
    border-radius: 6px;
    background: rgba(7, 25, 41, .82);
    color: #91aabc;
    font-size: 8px;
    font-weight: 800;
}
.chatSafetyActions button:first-child { color: #ffc88e; }
.lobbyEmptyState {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lobby-muted);
    text-align: center;
}
.lobbyEmptyState strong,
.lobbyEmptyState span { display: block; }
.lobbyEmptyState strong { color: #c8d8e4; font-size: 9px; }
.lobbyEmptyState span { margin-top: 4px; font-size: 7px; line-height: 11px; }
#lobbyChatForm {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 44px;
}
#lobbyChatInput,
#friendUsername,
#createRoomTitle {
    box-sizing: border-box;
    border: 1px solid rgba(129, 193, 231, .22);
    border-radius: 10px;
    outline: none;
    background: rgba(3, 13, 24, .7);
    color: #f4fbff;
    font-family: inherit;
    -webkit-user-select: text;
    user-select: text;
}
#lobbyChatInput {
    position: absolute;
    left: 0;
    right: 69px;
    top: 0;
    width: auto;
    height: 44px;
    padding: 0 34px 0 11px;
    font-size: 8px;
}
#lobbyChatInput:focus,
#friendUsername:focus,
#createRoomTitle:focus { border-color: var(--lobby-accent); box-shadow: 0 0 0 2px rgba(78, 216, 255, .09); }
#lobbyChatLimit { position: absolute; right: 78px; top: 16px; color: #5f788b; font-size: 6px; pointer-events: none; }
#lobbyChatSend { position: absolute; right: 0; top: 0; width: 62px; height: 44px; border-color: rgba(78, 216, 255, .4); color: #c8f5ff; font-size: 8px; }
#lobbyChatSend:disabled { opacity: .45; }

#lobbySidePanel {
    position: absolute;
    display: block;
    left: auto;
    right: 12px;
    top: 86px;
    width: 184px;
    height: 498px;
    pointer-events: auto;
    transform: none;
}
#lobbyAccountPanel { left: 0; top: 0; width: 184px; height: 190px; }
#myInfoBox { display: none; }
#lobbyAccountHeading { position: absolute; left: 11px; right: 11px; top: 10px; z-index: 2; }
#myName2 {
    position: static;
    width: auto;
    margin-top: 3px;
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 820;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
.lobby_account_rank { margin-right: 5px; }
#lobbyAvatarStage {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 47px;
    height: 91px;
    border: 1px solid rgba(126, 188, 228, .12);
    border-radius: 11px;
    background: radial-gradient(circle at 50% 80%, rgba(63, 166, 202, .15), rgba(2, 12, 22, .3));
    overflow: hidden;
}
#lobbyAvatarPreview {
    position: absolute;
    left: 50%;
    top: -18px;
    width: 175px;
    height: 110px;
    transform: translateX(-50%);
    pointer-events: none;
}
#lobbyBalances {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 9px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
#myGP2,
#myCash2,
#myGold2 {
    position: static;
    width: auto;
    min-width: 0;
    padding: 6px 2px;
    overflow: hidden;
    border: 1px solid rgba(126, 188, 228, .1);
    border-radius: 7px;
    background: rgba(2, 12, 22, .42);
    font-size: 6px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
#myGP2 { color: #e7f2f8; }
#myCash2 { color: #7fd7ff; }
#myGold2 { color: #ffe379; }

#lobbyFriendsPanel { left: 0; top: 202px; width: 184px; height: 296px; }
#lobbyFriendRequests {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 55px;
    max-height: 88px;
    overflow-y: auto;
    padding-right: 2px;
    touch-action: pan-y;
}
.lobbyFriendRequest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 5px;
    padding: 7px;
    border: 1px solid rgba(78, 216, 255, .2);
    border-radius: 9px;
    background: rgba(19, 76, 101, .25);
}
.lobbyFriendRequest > div:first-child { min-width: 0; }
.lobbyFriendRequest strong,
.lobbyFriendRequest span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lobbyFriendRequest strong { color: #dff8ff; font-size: 7px; }
.lobbyFriendRequest span { margin-top: 2px; color: var(--lobby-muted); font-size: 5px; }
.lobbyFriendRequest > div:last-child { display: flex; gap: 3px; }
.lobbyFriendRequest button { min-width: 34px; height: 25px; padding: 0 5px; border-color: rgba(48, 229, 161, .3); color: #baf8dc; font-size: 5px; }
.lobbyFriendRequest button.secondary { border-color: rgba(144, 168, 186, .18); color: #9eb2c1; }
#lobbyFriendsList {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 56px;
    bottom: 58px;
    overflow-y: auto;
    padding-right: 2px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
#lobbyFriendRequests:not(.hidden) + #lobbyFriendsList { top: 150px; }
.lobbyFriend {
    position: relative;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 25px;
    align-items: center;
    gap: 7px;
    min-height: 39px;
    margin-bottom: 5px;
    padding: 4px 4px 4px 8px;
    border: 1px solid rgba(126, 188, 228, .1);
    border-radius: 9px;
    background: rgba(3, 14, 25, .4);
}
.lobbyFriend strong,
.lobbyFriend div span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lobbyFriend strong { color: #c8d7e2; font-size: 7px; }
.lobbyFriend.online strong { color: #eefbff; }
.lobbyFriend div span { margin-top: 2px; color: #6f8798; font-size: 6px; }
.lobbyFriend.online div span { color: #7fdab3; }
.lobbyFriend > button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6e8798;
    font-size: 14px;
    touch-action: manipulation;
}
.lobbyFriend > button:active { background: rgba(255, 112, 112, .16); color: #ffaaaa; }
#lobbyAddFriend {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 9px;
    width: auto;
    height: 39px;
    border-color: rgba(78, 216, 255, .28);
    color: #bfefff;
    font-size: 7px;
}
#friendMessage { left: 10px; right: 10px; bottom: 51px; color: #9fc4d9; font-size: 6px; text-align: center; }
#playersList { display: none; }

#roomsList,
#lobbyChatMessages,
#lobbyFriendsList,
#lobbyFriendRequests { scrollbar-width: thin; scrollbar-color: rgba(91, 167, 207, .46) transparent; }
#roomsList::-webkit-scrollbar,
#lobbyChatMessages::-webkit-scrollbar,
#lobbyFriendsList::-webkit-scrollbar,
#lobbyFriendRequests::-webkit-scrollbar { width: 4px; }
#roomsList::-webkit-scrollbar-thumb,
#lobbyChatMessages::-webkit-scrollbar-thumb,
#lobbyFriendsList::-webkit-scrollbar-thumb,
#lobbyFriendRequests::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(91, 167, 207, .46); }

#dialogCreateRoomWarp,
#friendDialog {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 1600;
}
#dialogCreateRoomWarp .dialogShade,
#friendDialog .dialogShade {
    background: rgba(1, 7, 14, .76);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
#dialogCreateRoom,
#friendDialogPanel {
    box-sizing: border-box;
    border: 1px solid rgba(105, 188, 232, .32);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .04);
    color: var(--lobby-text);
    transform: none;
}
#dialogCreateRoom {
    position: absolute;
    left: 50%;
    top: 75px;
    width: 470px;
    height: 450px;
    padding: 24px;
    transform: translateX(-50%);
}
#dialogCreateRoom header h2,
#friendDialogPanel h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.4px; }
#dialogCreateRoom header p,
#friendDialogPanel p { margin: 5px 0 0; color: var(--lobby-muted); font-size: 9px; line-height: 13px; }
#createRoomTitleField,
#friendDialogPanel label {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 105px;
}
#createRoomTitleField > span,
#friendDialogPanel label > span,
.createRoomSelector > span {
    display: block;
    margin-bottom: 6px;
    color: #9bb1c2;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}
#createRoomTitle {
    position: static;
    width: 100%;
    height: 45px;
    padding: 0 13px;
    color: #fff;
    font-size: 10px;
}
.createRoomSelector {
    position: absolute;
    top: 186px;
    width: 202px;
}
#createRoomSizeSelector { left: 24px; }
#createRoomModeSelector { right: 24px; }
.createRoomSelector .buttonPrev,
.createRoomSelector .buttonNext {
    position: absolute;
    top: 21px;
    width: 43px;
    height: 45px;
    padding: 0;
    color: #bceeff;
    font-size: 22px;
}
.createRoomSelector .buttonPrev { left: 0; }
.createRoomSelector .buttonNext { right: 0; }
.createRoomSelector .buttonPrev::before,
.createRoomSelector .buttonNext::before { content: none; }
#CreateRoomPlayers,
#CreateRoomMode {
    position: absolute;
    left: 49px;
    top: 21px;
    width: 104px;
    height: 45px;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    line-height: 45px;
    text-align: center;
}
#CreateRoomMode { color: #a7f3ff; }
#CreateRoomModeIcon {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 278px;
    width: auto;
    height: 68px;
    padding: 13px 15px;
    border: 1px solid rgba(126, 188, 228, .14);
    border-radius: 12px;
    background: radial-gradient(circle at 88% 50%, rgba(40, 148, 181, .18), transparent 38%), rgba(3, 15, 27, .52);
}
#CreateRoomModeIcon strong,
#CreateRoomModeIcon span { display: block; }
#CreateRoomModeIcon strong { color: #eafaff; font-size: 10px; }
#CreateRoomModeIcon span { margin-top: 5px; color: var(--lobby-muted); font-size: 8px; }
#createRoomDialogMessage,
#friendDialogMessage {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 76px;
    color: #ffcf91;
    font-size: 8px;
    text-align: center;
}
#dialogCreateRoom footer,
#friendDialogPanel footer {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}
#dialogCreateRoomButtonCancel,
#dialogCreateRoomButtonOK,
#friendDialogPanel footer button {
    position: static;
    width: auto;
    min-width: 112px;
    height: 43px;
    padding: 0 16px;
    background-image: none;
    background-size: auto;
    font-size: 9px;
}
#dialogCreateRoomButtonOK,
#friendDialogSend { border-color: rgba(78, 216, 255, .45); background: linear-gradient(145deg, #1983ab, #11557d); color: #fff; }
#dialogCreateRoomButtonOK:disabled,
#friendDialogSend:disabled { opacity: .45; }

#friendDialogPanel {
    position: absolute;
    left: 50%;
    top: 145px;
    width: 400px;
    height: 310px;
    padding: 25px;
    transform: translateX(-50%);
}
#friendDialogPanel label { left: 25px; right: 25px; top: 126px; }
#friendUsername { width: 100%; height: 45px; padding: 0 13px; font-size: 10px; }
#friendDialogMessage { bottom: 81px; }
#friendDialogPanel footer { left: 25px; right: 25px; bottom: 24px; }

.device-phone #lobbyTopBar { left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px); }
.device-phone #lobbyBrand h1 { font-size: 21px; }
.device-phone #channelName { font-size: 9px; }
.device-phone #lobbyPresenceSummary { left: calc(var(--safe-left) + 205px); font-size: 9px; }
.device-phone #lobbyHeaderActions button { min-width: 74px; padding: 0 15px; font-size: 9px; }
.device-phone #lobbyMainPanel {
    left: calc(var(--safe-left) + 12px);
    top: 86px;
    width: 480px;
    height: 498px;
}
.device-phone #roomsList { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 86px; }
.device-phone .lobbyRoom { height: 86px; font-size: 9px; }
.device-phone .lobbyRoomTitle { top: 10px; font-size: 10px; }
.device-phone .lobbyRoomMap { top: 38px; font-size: 7px; }
.device-phone .lobbyRoomMode,
.device-phone .lobbyRoomStatus { top: 59px; }
.device-phone .lobbyRoomJoin { bottom: 10px; }
.device-phone #lobbyChatPanel {
    left: calc(var(--safe-left) + 504px);
    right: calc(var(--safe-right) + 344px);
    top: 86px;
    width: auto;
    height: 498px;
}
.device-phone .lobbyChatMessage { padding: 9px 10px; }
.device-phone .lobbyChatMessage strong { font-size: 8px; }
.device-phone .lobbyChatMessage p { font-size: 9px; line-height: 13px; }
.device-phone #lobbyChatInput { font-size: 9px; }
.device-phone #lobbySidePanel {
    left: auto;
    right: calc(var(--safe-right) + 12px);
    top: 86px;
    width: 320px;
    height: 498px;
    pointer-events: auto;
}
.device-phone #lobbyAccountPanel { width: 320px; height: 218px; }
.device-phone #lobbyAccountHeading { left: 14px; top: 12px; }
.device-phone #myName2 { font-size: 12px; }
.device-phone #lobbyAvatarStage { left: 14px; right: 14px; top: 50px; height: 115px; }
.device-phone #lobbyAvatarPreview { top: -16px; width: 230px; height: 137px; }
.device-phone #lobbyBalances { left: 14px; right: 14px; bottom: 12px; gap: 7px; }
.device-phone #myGP2,
.device-phone #myCash2,
.device-phone #myGold2 { width: auto; padding: 7px 4px; font-size: 7px; }
.device-phone #lobbyFriendsPanel { top: 230px; width: 320px; height: 268px; }
.device-phone #lobbyFriendRequests { left: 11px; right: 11px; max-height: 79px; }
.device-phone #lobbyFriendsList { left: 11px; right: 11px; }
.device-phone .lobbyFriendRequest strong,
.device-phone .lobbyFriend strong { font-size: 8px; }
.device-phone .lobbyFriendRequest span,
.device-phone .lobbyFriend div span { font-size: 6px; }
.device-phone .lobbyFriend { grid-template-columns: 10px minmax(0, 1fr) 28px; min-height: 43px; padding-left: 10px; }
.device-phone #lobbyAddFriend { left: 11px; right: 11px; font-size: 8px; }
.device-phone #dialogCreateRoomWarp,
.device-phone #friendDialog,
.device-phone #incomingRoomInviteDialog { left: calc(0px - var(--classic-offset-x)); right: auto; width: var(--presentation-width); }
.device-phone #dialogCreateRoom { top: 67px; width: 540px; height: 466px; }
.device-phone .createRoomSelector { width: 236px; }
.device-phone #CreateRoomPlayers,
.device-phone #CreateRoomMode { width: 138px; font-size: 12px; }
.device-phone #friendDialogPanel { top: 140px; width: 440px; height: 320px; }

/* Neutralize legacy fixed-coordinate selectors whose higher specificity would
 * otherwise leak into the new responsive composition. */
.device-pad #lobbyMainPanel,
.device-pad #lobbySidePanel { display: block; }
#lobbyHeaderActions #lobbyRefresh { display: block; }
.device-phone #roomsList {
    left: 10px;
    right: 10px;
    top: 62px;
    bottom: 68px;
    width: auto;
}
.device-phone .lobbyRoomTitle { left: 50px; right: 60px; width: auto; }
.device-phone .lobbyRoomMap { left: 50px; right: 60px; width: auto; }
.device-phone .lobbyRoomMode { left: 50px; right: auto; }
.device-phone #channelName,
.device-phone #roomsPage,
.device-phone #myName2,
.device-phone #myGP2,
.device-phone #myCash2,
.device-phone #myGold2 {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
}
.device-phone #buttonCreateRoom {
    left: auto;
    right: 0;
    top: 0;
    transform: none;
}
.device-phone #lobbyAvatarPreview {
    left: 50%;
    transform: translateX(-50%);
}
.device-phone #lobbyHeaderActions #buttonChannels,
.device-phone #lobbyHeaderActions #buttonAvatarShop,
.device-phone #lobbyHeaderActions #lobbyRefresh {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: 44px;
    transform: none;
}
.device-phone #dialogCreateRoom {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
#createRoomSizeSelector #CreateRoomNumPlayersPrev,
#createRoomSizeSelector #CreateRoomNumPlayersNext,
#createRoomModeSelector #CreateRoomModePrev,
#createRoomModeSelector #CreateRoomModeNext {
    top: 21px;
    width: 43px;
    height: 45px;
    background: rgba(9, 28, 48, .82);
}
#createRoomSizeSelector #CreateRoomNumPlayersPrev,
#createRoomModeSelector #CreateRoomModePrev { left: 0; right: auto; }
#createRoomSizeSelector #CreateRoomNumPlayersNext,
#createRoomModeSelector #CreateRoomModeNext { left: auto; right: 0; }
#CreateRoomNumPlayersPrev::before,
#CreateRoomNumPlayersNext::before,
#CreateRoomModePrev::before,
#CreateRoomModeNext::before { content: none; }

/* Supplied normal-map selector. The minimap sheet uses the source client's
 * exact 213 x 50 rows and GetMapImageOffset(-50 * (map + 1)). */
#CreateRoomModeIcon {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
}
#CreateRoomModeIcon > div { min-width: 0; text-align: center; }
#CreateRoomMapPrev,
#CreateRoomMapNext {
    position: static;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(103, 199, 239, .25);
    border-radius: 10px;
    background: rgba(9, 28, 48, .82);
    color: #bceeff;
    font-size: 22px;
    font-weight: 800;
}

.roomPanelEyebrow {
    color: #70dfff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
#roomMapPanel {
    position: absolute;
    left: 580px;
    top: 52px;
    width: 210px;
    height: 174px;
    z-index: 14;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid rgba(200, 244, 255, .7);
    border-radius: 8px;
    background: rgba(0, 39, 76, .72);
    text-align: center;
}
#roomMapPreview {
    width: 190px;
    height: 50px;
    margin: 8px auto 4px;
    background-image: url("assets/maps/minimaps.png");
    background-repeat: no-repeat;
    overflow: hidden;
}
#roomMapName { display: block; height: 22px; overflow: hidden; color: #fff; font-size: 11px; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
#roomButtonMap {
    width: 150px;
    height: 28px;
    border: 1px solid rgba(78, 216, 255, .5);
    border-radius: 7px;
    background: linear-gradient(145deg, #1983ab, #11557d);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}
#roomButtonMap:disabled { opacity: .52; }
#roomBattleItems > .roomPanelEyebrow { display: none; }

#roomMapSelect { position: absolute; inset: 0; z-index: 1900; }
.roomMapSelectPanel {
    position: absolute;
    left: 50%;
    top: 52px;
    width: 700px;
    height: 496px;
    box-sizing: border-box;
    padding: 22px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
    color: #f4fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
.roomMapSelectPanel header { height: 55px; }
.roomMapSelectPanel h2 { margin: 4px 0 0; font-size: 20px; }
#roomMapSelectCancel {
    position: absolute;
    right: 22px;
    top: 20px;
    width: 82px;
    height: 36px;
    border: 1px solid rgba(116, 191, 227, .32);
    border-radius: 9px;
    background: rgba(16, 43, 67, .9);
    color: #fff;
    font-weight: 800;
}
#roomMapSelectGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: 392px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.roomMapChoice {
    position: relative;
    height: 125px;
    overflow: hidden;
    border: 1px solid rgba(116, 191, 227, .22);
    border-radius: 10px;
    background: rgba(4, 19, 34, .84);
    color: #eafaff;
    touch-action: pan-y;
}
.roomMapChoice.selected { border-color: #53ddff; box-shadow: inset 0 0 0 1px #53ddff, 0 0 12px rgba(50, 201, 247, .2); }
.roomMapChoicePreview {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 213px;
    height: 50px;
    transform: translateX(-50%) scale(1);
    transform-origin: 50% 0;
    background-image: url("assets/maps/minimaps.png");
    background-repeat: no-repeat;
}
.roomMapChoice strong { position: absolute; left: 7px; right: 7px; bottom: 12px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.device-pad #roomButtonSettings { display: none; }
.device-phone #roomSlotMode,
.device-phone #roomSuddenType,
.device-phone #roomSuddenTurn { display: none; }

#roomSettingsDialog { position: absolute; inset: 0; z-index: 1950; }
#roomSettingsPanel {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 570px;
    height: 536px;
    box-sizing: border-box;
    padding: 24px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0,0,0,.65);
    color: #f4fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
#roomSettingsPanel header h2 { margin: 5px 0 3px; font-size: 22px; }
#roomSettingsPanel header p { margin: 0; color: #8fa9ba; font-size: 9px; }
#roomSettingsTitleField { display: block; margin-top: 18px; }
#roomSettingsTitleField span,
.roomSettingsSelector > span { display: block; margin-bottom: 5px; color: #9cb5c5; font-size: 8px; font-weight: 800; text-transform: uppercase; }
#roomSettingsTitle { width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(116,191,227,.32); border-radius: 8px; background: rgba(2,14,27,.75); color: #fff; font-size: 11px; }
.roomSettingsSelector { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 7px; margin-top: 14px; padding-top: 17px; }
.roomSettingsSelector > span { position: absolute; left: 0; top: 0; }
.roomSettingsSelector button { height: 36px; border: 1px solid rgba(78,216,255,.38); border-radius: 8px; background: linear-gradient(145deg,#1983ab,#11557d); color: #fff; font-size: 20px; }
.roomSettingsSelector strong { height: 36px; overflow: hidden; border: 1px solid rgba(116,191,227,.2); border-radius: 8px; background: rgba(3,20,35,.68); font-size: 11px; line-height: 36px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
#roomSettingsClassicOptions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 15px; }
#roomSettingsClassicOptions button { height: 49px; border: 1px solid rgba(116,191,227,.22); border-radius: 9px; background: rgba(5,27,45,.8); color: #fff; }
#roomSettingsClassicOptions span,
#roomSettingsClassicOptions strong { display: block; }
#roomSettingsClassicOptions span { color: #8fa9ba; font-size: 7px; text-transform: uppercase; }
#roomSettingsClassicOptions strong { margin-top: 4px; font-size: 9px; }
#roomSettingsPanel footer { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: flex-end; gap: 10px; }
#roomSettingsPanel footer button { min-width: 108px; height: 38px; border: 1px solid rgba(78,216,255,.35); border-radius: 9px; background: rgba(12,45,69,.92); color: #fff; font-weight: 850; }
#roomSettingsApply { background: linear-gradient(145deg,#1c97b9,#14618c) !important; }
#roomSettingsMessage { position: absolute; left: 24px; right: 250px; bottom: 25px; color: #ffd08a; font-size: 8px; }

/* The requested phone-only room rebuild. iPad selectors above retain the
 * original 800 x 600 room art and player-slot coordinates. */
.device-phone #roomScreen {
    background-image:
        radial-gradient(circle at 50% -20%, rgba(36, 150, 205, .28), transparent 46%),
        linear-gradient(155deg, #081929 0%, #0b2338 48%, #07131f 100%);
    color: #f2fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
.device-phone #roomScreen .classicFrame {
    position: absolute;
    inset: 0;
    width: var(--presentation-width);
}
.device-phone #roomHeaderPanel {
    left: calc(var(--safe-left) + 20px);
    right: calc(var(--safe-right) + 20px);
    top: 14px;
    width: auto;
    height: 66px;
    box-sizing: border-box;
    border: 1px solid rgba(111, 190, 229, .22);
    border-radius: 17px;
    background: linear-gradient(110deg, rgba(18, 52, 79, .94), rgba(9, 28, 45, .94));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.25);
}
.device-phone #roomNumber {
    left: 84px;
    top: 15px;
    width: 78px;
    height: 36px;
    border-right: 1px solid rgba(137, 196, 227, .18);
    color: #6edfff;
    font-size: 16px;
    font-weight: 900;
    line-height: 36px;
    text-align: center;
}
.device-phone #roomNumber::before { content: "ROOM "; font-size: 8px; letter-spacing: .7px; }
.device-phone #roomTitle {
    left: 180px;
    top: 15px;
    width: 520px;
    height: 36px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 850;
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-phone #roomFixedOptions {
    left: auto;
    right: calc(var(--safe-right) + 136px);
    top: 14px;
    width: auto;
    display: flex;
    gap: 7px;
    font-size: 8px;
}
.device-phone #roomFixedOptions span {
    min-width: 72px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(125, 188, 222, .15);
    border-radius: 10px;
    background: rgba(4, 20, 34, .66);
    color: #cfe9f6;
    line-height: 36px;
    text-align: center;
}
.device-phone #roomFixedOptions span::before { content: none; }
.device-phone #roomPlayersPanel {
    position: absolute;
    inset: 0;
    width: var(--presentation-width);
}
.device-phone #roomPlayersPanel::before,
.device-phone #roomPlayersPanel::after {
    position: absolute;
    top: 94px;
    width: 350px;
    color: #8caabc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.device-phone #roomPlayersPanel::before { content: "TEAM A"; left: max(calc(var(--safe-left) + 28px), 120px); color: #70dfff; }
.device-phone #roomPlayersPanel::after { content: "TEAM B"; right: max(calc(var(--safe-right) + 28px), 120px); color: #ff8f9e; text-align: right; }
.device-phone .playerInRoom {
    width: 310px;
    height: 88px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(109, 184, 220, .2);
    border-radius: 15px;
    background: linear-gradient(105deg, rgba(18, 53, 79, .9), rgba(7, 24, 39, .91));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18);
}
.device-phone .playerInRoom.SideA { border-left: 4px solid #42c8ef; }
.device-phone .playerInRoom.SideB { border-right: 4px solid #ef7187; }
.device-phone #playerInRoom0,
.device-phone #playerInRoom2,
.device-phone #playerInRoom4,
.device-phone #playerInRoom6 { left: max(calc(var(--safe-left) + 24px), 116px); right: auto; }
.device-phone #playerInRoom1,
.device-phone #playerInRoom3,
.device-phone #playerInRoom5,
.device-phone #playerInRoom7 { left: auto; right: max(calc(var(--safe-right) + 24px), 116px); }
.device-phone #playerInRoom0,
.device-phone #playerInRoom1 { top: 114px; }
.device-phone #playerInRoom2,
.device-phone #playerInRoom3 { top: 207px; }
.device-phone #playerInRoom4,
.device-phone #playerInRoom5 { top: 300px; }
.device-phone #playerInRoom6,
.device-phone #playerInRoom7 { top: 393px; }
.device-phone .roomPlayerMobile { width: 223px; height: 95px; }
.device-phone .SideA .roomPlayerMobile { left: 70px; right: auto; }
.device-phone .SideB .roomPlayerMobile { left: auto; right: 70px; }
.device-phone .roomPlayerShadow { bottom: 5px; opacity: .55; }
.device-phone .SideA .roomPlayerShadow { left: 128px; }
.device-phone .SideB .roomPlayerShadow { right: 128px; }
.device-phone .roomPlayerName {
    left: 14px;
    right: 14px;
    top: 10px;
    width: auto;
    height: 18px;
    overflow: hidden;
    color: #f3fbff;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-phone .SideB .roomPlayerName { text-align: right; }
.device-phone .roomPlayerMaster,
.device-phone .roomPlayerNotReady,
.device-phone .roomPlayerReady {
    top: 35px;
    bottom: auto;
    width: 68px;
    height: 23px;
    border: 1px solid rgba(131, 195, 227, .2);
    border-radius: 8px;
    background: rgba(4, 19, 33, .8);
    font-size: 8px;
    line-height: 23px;
}
.device-phone .SideA .roomPlayerMaster,
.device-phone .SideA .roomPlayerNotReady,
.device-phone .SideA .roomPlayerReady { left: 12px; right: auto; }
.device-phone .SideB .roomPlayerMaster,
.device-phone .SideB .roomPlayerNotReady,
.device-phone .SideB .roomPlayerReady { left: auto; right: 12px; }
.device-phone .roomPlayerMaster::after { content: "MASTER"; color: #ffd96c; }
.device-phone .roomPlayerReady::after { content: "READY"; color: #65e1ff; }
.device-phone .roomPlayerNotReady::after { content: "WAITING"; color: #8da5b5; }

.device-phone #roomMapPanel,
.device-phone #roomBattleItems {
    left: 50%;
    right: auto;
    width: 440px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 1px solid rgba(111, 190, 229, .2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(16, 46, 70, .985), rgba(6, 22, 36, .985));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 25px rgba(0,0,0,.2);
}
.device-phone #roomMapPanel {
    top: 101px;
    height: 185px;
    padding: 14px 16px;
    text-align: left;
}
.device-phone #roomMapPreview { position: absolute; left: 16px; top: 42px; width: 213px; margin: 0; }
.device-phone #roomMapName { position: absolute; left: 244px; right: 16px; top: 54px; height: 25px; font-size: 14px; line-height: 25px; }
.device-phone #roomButtonMap { position: absolute; left: 244px; top: 93px; width: 180px; height: 40px; font-size: 9px; }
.device-phone #roomMapPanel::after { content: "57 source-backed normal battle maps"; position: absolute; left: 244px; top: 142px; color: #809cad; font-size: 7px; }
.device-phone #roomBattleItems {
    top: 292px;
    height: 207px;
    padding: 14px 16px;
}
.device-phone #roomBattleItems > .roomPanelEyebrow { display: block; }
.device-phone #roomBattleItemSlots { position: absolute; left: 16px; right: 16px; top: 36px; width: auto; min-height: 45px; box-sizing: border-box; }
.device-phone #roomBattleItemSlots .battleItemIcon { height: 40px; }
.device-phone #roomBattleItemSlots .battleItemIcon.itemOneSlot { --item-scale: 1.18; width: 42px; min-width: 42px; }
.device-phone #roomBattleItemSlots .battleItemIcon.itemTwoSlots { --item-scale: 1.17; width: 84px; min-width: 84px; }
.device-phone #roomBattleItemCatalog { position: absolute; left: 16px; right: 16px; top: 88px; height: 96px; margin: 0; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; }
.device-phone #roomBattleItemCatalog .battleItemIcon { height: 45px; }
.device-phone #roomBattleItemCatalog .battleItemIcon.itemOneSlot { --item-scale: 1.35; width: 48px; min-width: 48px; }
.device-phone #roomBattleItemCatalog .battleItemIcon.itemTwoSlots { --item-scale: 1.32; width: 94px; min-width: 94px; }
.device-phone #roomBattleItemCatalog .battleItemIcon.roomItemLocked::after { font-size: 8px; line-height: 45px; }
.device-phone #roomBattleItemHelp { position: absolute; left: 16px; right: 16px; top: 188px; width: auto; font-size: 7px; line-height: 11px; }
.device-phone #roomButtonStart,
.device-phone #roomButtonReady {
    left: 50%;
    top: 506px;
    width: 112px;
    height: 82px;
    transform: translateX(-50%);
    background-position: center;
    background-size: contain;
}
.device-phone #roomButtonChangeTeam,
.device-phone #roomButtonInvite {
    top: 524px;
    width: 110px;
    height: 42px;
    border: 1px solid rgba(89, 198, 237, .36);
    border-radius: 10px;
    background-image: none;
    background: linear-gradient(145deg, #176c95, #103f64);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
    transform: none;
}
.device-phone #roomButtonChangeTeam { left: calc(50% - 238px); }
.device-phone #roomButtonChangeTeam::after { content: "Change team"; }
.device-phone #roomButtonInvite { left: calc(50% + 128px); }
.device-phone #roomButtonBack,
.device-phone #roomBuddyOpen {
    top: 27px;
    bottom: auto;
    height: 40px;
    border: 1px solid rgba(116, 191, 227, .28);
    border-radius: 10px;
    background-image: none;
    background: rgba(8, 27, 44, .92);
    color: #e9f8ff;
    font-size: 9px;
    font-weight: 850;
    transform: none;
}
.device-phone #roomButtonBack { left: calc(var(--safe-left) + 34px); right: auto; width: 62px; }
.device-phone #roomButtonBack::after { content: "Back"; }
.device-phone #roomBuddyOpen { left: auto; right: calc(var(--safe-right) + 34px); width: 76px; }
.device-phone #roomBuddyOpen::after { content: "Avatar"; }
.device-phone #roomMessage { left: calc(50% - 230px); right: auto; bottom: 10px; width: 460px; color: #ffd18f; font-size: 8px; text-align: center; }

.device-phone #roomMobileSelect {
    left: 50%;
    top: 54px;
    width: 900px;
    height: 492px;
    box-sizing: border-box;
    padding: 22px 26px 58px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
.device-phone #mobileSelectGrid { grid-template-columns: repeat(8, 70px); gap: 28px 34px; width: 100%; height: 395px; padding: 5px; }
.device-phone #roomMobileSelectCancel { right: 20px; bottom: 15px; }
.device-phone #roomInviteDialog,
.device-phone #roomMapSelect { left: 0; width: var(--presentation-width); }
.device-phone .roomMapSelectPanel { top: 46px; width: 1000px; height: 508px; }
.device-phone #roomMapSelectGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 405px; }
.device-phone .roomMapChoice { height: 145px; }
.device-phone .roomMapChoicePreview { top: 10px; transform: translateX(-50%) scale(1.28); }
.device-phone .roomMapChoice strong { bottom: 12px; font-size: 14px; }
.device-phone #roomSettingsDialog { left: 0; width: var(--presentation-width); }
.device-phone #roomSettingsPanel { top: 18px; width: 780px; height: 564px; padding: 28px; }
.device-phone #roomSettingsPanel header h2 { font-size: 26px; }
.device-phone #roomSettingsPanel header p { font-size: 12px; }
.device-phone #roomSettingsTitle { height: 48px; font-size: 14px; }
.device-phone #roomSettingsTitleField span,
.device-phone .roomSettingsSelector > span { font-size: 10px; }
.device-phone .roomSettingsSelector { grid-template-columns: 54px minmax(0,1fr) 54px; gap: 10px; margin-top: 12px; padding-top: 20px; }
.device-phone .roomSettingsSelector button,
.device-phone .roomSettingsSelector strong { height: 46px; line-height: 46px; }
.device-phone .roomSettingsSelector strong { font-size: 14px; }
.device-phone #roomSettingsClassicOptions button { height: 58px; }
.device-phone #roomSettingsClassicOptions span { font-size: 9px; }
.device-phone #roomSettingsClassicOptions strong { font-size: 12px; }
.device-phone #roomSettingsPanel footer { left: 28px; right: 28px; bottom: 18px; }
.device-phone #roomSettingsPanel footer button { min-width: 150px; height: 46px; font-size: 12px; }

/* Final cascade for the taller classic-options create-room form. */
#dialogCreateRoom { top: 20px; height: 560px; }
.device-phone #dialogCreateRoom { top: 15px; height: 570px; }
#dialogCreateRoom #createRoomDialogMessage { bottom: 67px; }
#dialogCreateRoom footer { bottom: 14px; }

/* Friend roster and one-to-one chat follow the supplied floating private-chat
 * interaction. They remain code-native so live presence and durable messages
 * can reflow without altering any original game artwork. */
#friendListDialog,
#directChatDialog {
    position: absolute;
    inset: 0;
    z-index: 1700;
    width: 100%;
    height: 600px;
    color: var(--lobby-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
#friendListDialog .dialogShade,
#directChatDialog .dialogShade { background: rgba(1, 7, 14, .78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#friendListPanel,
#directChatPanel {
    position: absolute;
    left: 50%;
    top: 70px;
    width: 520px;
    height: 460px;
    box-sizing: border-box;
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid rgba(105, 188, 232, .34);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .04);
}
#friendListPanel > header,
#directChatPanel > header { position: absolute; left: 22px; right: 22px; top: 18px; height: 58px; }
#friendListPanel h2,
#directChatPanel h2 { margin: 3px 0 0; font-size: 20px; line-height: 23px; }
#friendListPanel header p,
#directChatPanel header p { margin: 3px 0 0; color: var(--lobby-muted); font-size: 9px; }
#friendListClose,
#directChatClose,
#directChatBlock {
    position: absolute;
    right: 0;
    top: 4px;
    width: 82px;
    height: 40px;
    border: 1px solid rgba(132, 194, 233, .24);
    border-radius: 10px;
    background: rgba(9, 28, 48, .82);
    color: #e6f6ff;
    font-size: 9px;
    font-weight: 800;
}
#directChatBlock {
    right: 90px;
    color: #ffc68d;
}
#friendListRequests {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 88px;
    max-height: 92px;
    overflow-y: auto;
}
#friendListPopupRows {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 92px;
    bottom: 72px;
    overflow-y: auto;
    padding-right: 4px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
#friendListRequests:not(.hidden) + #friendListPopupRows { top: 190px; }
#friendListPanel > footer { position: absolute; left: 22px; right: 22px; bottom: 18px; }
#friendListAdd {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(78, 216, 255, .38);
    border-radius: 11px;
    background: linear-gradient(145deg, #197fa7, #10527b);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
.popupFriend {
    grid-template-columns: 10px minmax(0, 1fr) 70px 38px;
    min-height: 58px;
    padding: 7px 7px 7px 12px;
}
.popupFriend strong { font-size: 10px; }
.popupFriend div span { font-size: 8px; }
.lobbyFriend .friendChatButton,
.lobbyFriend .friendRemoveButton { position: static; width: auto; height: 30px; }
#lobbyFriendsList .friendChatButton { display: none; }
.lobbyFriend .friendChatButton {
    padding: 0 10px;
    border: 1px solid rgba(78, 216, 255, .34);
    border-radius: 8px;
    background: rgba(24, 109, 145, .42);
    color: #dff8ff;
    font-size: 7px;
    font-weight: 800;
}
.lobbyFriend .friendRemoveButton { width: 30px; color: #7992a4; font-size: 16px; }
.blockedPlayerRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 7px 10px 7px 14px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 169, 107, .18);
    border-radius: 11px;
    background: rgba(42, 24, 22, .44);
}
.blockedPlayerRow strong,
.blockedPlayerRow span { display: block; }
.blockedPlayerRow strong { color: #e7f2f8; font-size: 9px; }
.blockedPlayerRow span { margin-top: 3px; color: #bd927d; font-size: 7px; }
.blockedPlayerRow button {
    height: 32px;
    border: 1px solid rgba(255, 178, 117, .3);
    border-radius: 8px;
    background: rgba(75, 38, 30, .5);
    color: #ffd1a8;
    font-size: 7px;
    font-weight: 800;
}

#directChatMessages {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 92px;
    bottom: 84px;
    overflow-y: auto;
    padding: 0 4px 8px 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.directChatLine {
    position: relative;
    width: 78%;
    margin: 0 0 9px;
    padding: 9px 11px 17px;
    border: 1px solid rgba(126, 188, 228, .16);
    border-radius: 12px 12px 12px 3px;
    background: rgba(3, 15, 27, .66);
}
.directChatLine.mine { margin-left: auto; border-color: rgba(78, 216, 255, .3); border-radius: 12px 12px 3px 12px; background: rgba(19, 88, 118, .52); }
.directChatLine strong { display: block; color: #87e3ff; font-size: 8px; }
.directChatLine p { margin: 4px 0 0; color: #edf9ff; font-size: 10px; line-height: 14px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.directChatLine time { position: absolute; right: 9px; bottom: 5px; color: #728c9e; font-size: 6px; }
.directChatLine .chatSafetyActions { margin-right: 38px; }
#directChatForm { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 48px; }
#directChatInput {
    position: absolute;
    left: 0;
    right: 84px;
    width: auto;
    height: 48px;
    padding: 0 43px 0 13px;
    border: 1px solid rgba(129, 193, 231, .25);
    border-radius: 11px;
    outline: none;
    background: rgba(3, 13, 24, .8);
    color: #f4fbff;
    font-size: 10px;
    user-select: text;
    -webkit-user-select: text;
}
#directChatInput:focus { border-color: var(--lobby-accent); box-shadow: 0 0 0 2px rgba(78, 216, 255, .1); }
#directChatLimit { position: absolute; right: 95px; top: 18px; color: #668296; font-size: 7px; pointer-events: none; }
#directChatSend { position: absolute; right: 0; top: 0; width: 76px; height: 48px; border: 1px solid rgba(78, 216, 255, .44); border-radius: 11px; background: linear-gradient(145deg, #1983ab, #11557d); color: #fff; font-size: 10px; font-weight: 800; }
#directChatMessage { left: 22px; right: 22px; bottom: 70px; color: #ffd18d; font-size: 8px; text-align: center; }

/* The original game exposes a 600 x 111 top chat log and a 150-character
 * input that clears and blurs on Enter. */
#gameChatLog {
    position: absolute;
    z-index: 1040;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 111px;
    overflow: hidden auto;
    color: #fff;
    font: 700 12px/17px Arial, sans-serif;
    text-shadow: #000 -1px 0 2px, #000 0 1px 2px, #000 1px 0 2px, #000 0 -1px 2px;
    pointer-events: none;
}
.gameChatLine { position: relative; min-height: 25px; padding-right: 112px; overflow-wrap: anywhere; pointer-events: none; }
.gameChatLine strong { margin-right: 5px; color: #acf2f6; }
.gameChatLine.mine strong, .gameChatLine.localTeam strong { color: #6fd7ff; }
.gameChatLine.opponentTeam strong { color: #ff8e8e; }
.gameChatLine.gameBonusLine { color: #8ed9ff; font: inherit; }
.gameChatLine.gameBonusLine.penalty { color: #ff8b86; }
.gameChatLine .chatSafetyActions {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    margin: 0;
    pointer-events: auto;
}
.gameChatLine .chatSafetyActions button { height: 24px; min-width: 50px; padding: 0 6px; font-size: 7px; }
#gameChatButton {
    position: absolute;
    z-index: 1100;
    left: 10px;
    top: auto;
    bottom: 92px;
    width: 62px;
    height: 34px;
    border: 1px solid rgba(210, 244, 255, .58);
    border-radius: 8px;
    background: rgba(0, 24, 57, .78);
    color: #e8fbff;
    font-size: 10px;
    font-weight: 900;
    text-shadow: 1px 1px #00101f;
}
#gameChatComposer {
    position: absolute;
    z-index: 2100;
    left: 50%;
    bottom: 93px;
    width: 560px;
    height: 58px;
    padding: 5px;
    transform: translateX(-50%);
    border: 1px solid rgba(121, 218, 255, .72);
    border-radius: 12px;
    background: rgba(0, 24, 57, .96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
#gameChatInput { position: absolute; left: 6px; right: 154px; top: 6px; width: auto; height: 44px; padding: 0 42px 0 12px; border: 1px solid rgba(175, 227, 250, .35); border-radius: 8px; outline: none; background: #001839; color: #acf2f6; font-size: 12px; user-select: text; -webkit-user-select: text; }
#gameChatInput:focus { border-color: orange; }
#gameChatLimit { position: absolute; right: 164px; top: 21px; color: #7eabba; font-size: 8px; pointer-events: none; }
#gameChatCancel,
#gameChatSend { position: absolute; top: 6px; width: 66px; height: 44px; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 800; }
#gameChatCancel { right: 77px; border: 1px solid rgba(175, 205, 220, .28); background: rgba(25, 47, 67, .9); }
#gameChatSend { right: 6px; border: 1px solid rgba(94, 220, 255, .48); background: #126f9b; }
#gameChatStatus { position: absolute; left: 12px; right: 160px; bottom: -17px; color: #ffd27f; font-size: 8px; text-align: center; }

/* Final iPhone readability and hit-target pass. iPad deliberately receives
 * none of these overrides. */
.device-phone .lobbyEyebrow,
.device-phone .shopEyebrow { font-size: 9px; letter-spacing: 1.45px; }
.device-phone #lobbyTopBar { top: 9px; height: 72px; }
.device-phone #lobbyBrand { top: 10px; }
.device-phone #lobbyBrand h1 { font-size: 23px; line-height: 25px; }
.device-phone #channelName { font-size: 11px; }
.device-phone #lobbyPresenceSummary { top: 18px; height: 36px; padding: 0 13px; font-size: 11px; }
.device-phone #lobbyHeaderActions { top: 8px; gap: 8px; }
.device-phone #lobbyHeaderActions button,
.device-phone #lobbyHeaderActions #buttonChannels,
.device-phone #lobbyHeaderActions #buttonAvatarShop,
.device-phone #lobbyHeaderActions #lobbyRefresh { min-width: 84px; height: 54px; padding: 0 13px; font-size: 11px; border-radius: 12px; }
.device-phone #lobbyFriendsOpen { display: flex; align-items: center; justify-content: center; gap: 7px; }
#lobbyFriendsBadge { min-width: 18px; padding: 3px 5px; border-radius: 10px; background: rgba(78, 216, 255, .22); color: #9ceaff; font-size: 8px; }
.device-phone #lobbyMainPanel,
.device-phone #lobbyChatPanel,
.device-phone #lobbySidePanel { top: 91px; height: 493px; }
.device-phone #serverShell { width: var(--presentation-width); }
.device-phone #serverTopBar { left: calc(var(--safe-left) + 46px); right: calc(var(--safe-right) + 46px); top: 18px; height: 84px; }
.device-phone #serverWorldMark { top: 2px; width: 76px; height: 76px; }
.device-phone #serverWorldMark::before { inset: 14px 25px; }
.device-phone #serverWorldMark::after { inset: 25px 14px; }
.device-phone #serverWorldMark span { left: 25px; top: 21px; width: 23px; height: 15px; }
.device-phone #serverBrand { left: 96px; top: 2px; }
.device-phone .serverEyebrow { font-size: 11px; letter-spacing: 1.65px; }
.device-phone #serverBrand h1 { margin-top: 4px; font-size: 31px; line-height: 34px; }
.device-phone #serverBrand p { margin-top: 5px; font-size: 13px; line-height: 16px; }
.device-phone #BrokerTotalPlayers { top: 15px; min-width: 196px; padding: 14px 20px; border-radius: 27px; font-size: 13px; }
.device-phone #serverFooter { left: calc(var(--safe-left) + 46px); right: calc(var(--safe-right) + 46px); bottom: 10px; height: 76px; }
.device-phone #BrokerLogout { min-width: 196px; height: 66px; padding: 0 28px; border-radius: 16px; font-size: 16px; }
.device-phone #BrokerDeleteAccount { min-width: 184px; height: 66px; padding: 0 23px; border-radius: 16px; font-size: 13px; }
.device-phone #deleteAccountDialog .simpleDialog {
    left: 50%;
    top: 120px;
    width: 430px;
    min-height: 310px;
    transform: translateX(-50%) scale(1.12);
}
.device-phone #serverPasscodeForm {
    top: 116px;
    width: 570px;
    min-height: 360px;
    padding: 88px 34px 91px;
    border-radius: 18px;
}
.device-phone #serverPasscodeForm .serverEyebrow { left: 34px; top: 25px; font-size: 11px; }
.device-phone #serverPasscodeForm .simpleDialogTitle { left: 34px; top: 46px; font-size: 29px; }
.device-phone #serverPasscodeForm > p { margin-bottom: 23px; font-size: 14px; }
.device-phone #serverPasscodeForm > label { margin-bottom: 9px; font-size: 11px; }
.device-phone #serverPasscodeInput { height: 72px; padding: 0 18px; border-radius: 12px; font-size: 18px; }
.device-phone #serverPasscodeMessage { min-height: 22px; margin-top: 11px; font-size: 13px; }
.device-phone .serverPasscodeActions { left: 34px; right: 34px; bottom: 24px; gap: 12px; }
.device-phone .serverPasscodeActions button { min-width: 166px; height: 72px; border-radius: 12px; font-size: 16px; }
.device-phone #BrokerWindow { left: calc(var(--safe-left) + 46px); right: calc(var(--safe-right) + 46px); top: 116px; height: 392px; }
.device-phone #serverPanelHeading { left: 28px; right: 28px; top: 24px; }
.device-phone #serverPanelHeading h2 { font-size: 25px; line-height: 29px; }
.device-phone #BrokerServerCount { font-size: 13px; }
.device-phone #BrokerServersList { left: 28px; right: 28px; top: 98px; bottom: 25px; grid-auto-rows: 154px; gap: 16px; }
.device-phone .BrokerServerEntry { height: 154px; }
.device-phone .BrokerChannel { grid-template-columns: 76px minmax(0, 1fr) 98px 24px; height: 154px; padding: 18px; gap: 15px; border-radius: 18px; }
.device-phone .BrokerServerNumber { width: 76px; height: 94px; border-radius: 16px; }
.device-phone .BrokerServerNumber small { font-size: 8px; }
.device-phone .BrokerServerNumber strong { margin-top: 5px; font-size: 33px; line-height: 36px; }
.device-phone .BrokerChannelName { font-size: 24px; line-height: 28px; }
.device-phone .BrokerDesc { min-height: 34px; margin-top: 9px; font-size: 13px; line-height: 17px; }
.device-phone .BrokerAvailability { margin-top: 9px; gap: 7px; font-size: 10px; }
.device-phone .BrokerAvailability::before { width: 8px; height: 8px; }
.device-phone .BrokerPopulation { padding-left: 15px; }
.device-phone .BrokerPopulation strong { font-size: 26px; line-height: 29px; }
.device-phone .BrokerPopulation span { margin-top: 5px; font-size: 10px; line-height: 13px; }
.device-phone .BrokerEnter { font-size: 33px; line-height: 33px; }
.device-phone #BrokerLoading,
.device-phone #BrokerEmpty { left: 28px; right: 28px; top: 98px; min-height: 154px; padding-top: 63px; border-radius: 18px; font-size: 13px; }
.device-phone #BrokerLoading::before { top: 26px; width: 24px; height: 24px; margin-left: -12px; border-width: 3px; }
.device-phone #BrokerEmpty strong { font-size: 16px; }
.device-phone #brokerMessage { left: 28px; right: 28px; bottom: 9px; font-size: 12px; }
.device-phone .lobbyPanelHeading h2 { font-size: 16px; line-height: 20px; }
.device-phone #roomsPage,
.device-phone #lobbyFriendsCount,
.device-phone #lobbyChatAudience { font-size: 10px; line-height: 22px; }
.device-phone #lobbyRoomFilters { top: 58px; gap: 6px; }
.device-phone #lobbyRoomFilters button { min-width: 58px; height: 36px; padding: 0 11px; font-size: 10px; border-radius: 9px; }
.device-phone #lobbyMainPanel #roomsList { top: 102px; }
.device-phone #roomsList { grid-auto-rows: 94px; gap: 9px; }
.device-phone .lobbyRoom { height: 94px; }
.device-phone .lobbyRoomNumber { font-size: 11px; }
.device-phone .lobbyRoomTitle { font-size: 13px; }
.device-phone .lobbyRoomPlayers { font-size: 11px; }
.device-phone .lobbyRoomMap { top: 40px; font-size: 10px; }
.device-phone .lobbyRoomMode,
.device-phone .lobbyRoomStatus { top: 63px; padding: 3px 8px; font-size: 8px; }
.device-phone .lobbyRoomStatus { left: 112px; }
.device-phone .lobbyRoomJoin { min-width: 58px; padding: 8px; font-size: 10px; }
.device-phone #buttonCreateRoom { width: 142px; height: 50px; font-size: 11px; }
.device-phone #lobbyMessage { right: 150px; font-size: 10px; line-height: 14px; }
.device-phone #lobbyChatMessages { top: 64px; bottom: 76px; }
.device-phone .lobbyChatMessage { margin-bottom: 9px; padding: 10px 12px; }
.device-phone .lobbyChatMessage strong { font-size: 11px; }
.device-phone .lobbyChatMessage time { font-size: 8px; }
.device-phone .lobbyChatMessage p { font-size: 12px; line-height: 16px; }
.device-phone #lobbyChatForm { height: 54px; }
.device-phone #lobbyChatInput { right: 84px; height: 54px; padding-left: 14px; font-size: 12px; }
.device-phone #lobbyChatLimit { right: 94px; top: 20px; font-size: 8px; }
.device-phone #lobbyChatSend { width: 76px; height: 54px; font-size: 11px; }
.device-phone #lobbyFriendsPanel { display: none; }
.device-phone #lobbyAccountPanel { width: 320px; height: 493px; }
.device-phone #lobbyAccountHeading { top: 17px; }
.device-phone #myName2 { font-size: 16px; }
.device-phone #lobbyAvatarStage { top: 68px; height: 270px; }
.device-phone #lobbyAvatarPreview { top: 28px; width: 290px; height: 190px; }
.device-phone #lobbyBalances { bottom: 24px; grid-template-columns: 1fr; gap: 8px; }
.device-phone #myGP2,
.device-phone #myCash2,
.device-phone #myGold2 { padding: 11px 6px; font-size: 11px; border-radius: 9px; }

.device-phone #dialogCreateRoom { top: 12px; width: 620px; height: 576px; padding: 28px; }
.device-phone #dialogCreateRoom header h2,
.device-phone #friendDialogPanel h2 { font-size: 25px; }
.device-phone #dialogCreateRoom header p,
.device-phone #friendDialogPanel p { font-size: 12px; line-height: 16px; }
.device-phone #createRoomTitleField { left: 28px; right: 28px; top: 111px; }
.device-phone #createRoomTitleField > span,
.device-phone .createRoomSelector > span { font-size: 10px; }
.device-phone #createRoomTitle { height: 52px; font-size: 14px; }
.device-phone .createRoomSelector { top: 192px; width: 272px; }
.device-phone #createRoomSizeSelector { left: 28px; }
.device-phone #createRoomModeSelector { right: 28px; }
.device-phone .createRoomSelector .buttonPrev,
.device-phone .createRoomSelector .buttonNext { width: 54px; height: 54px; font-size: 27px; }
.device-phone #CreateRoomPlayers,
.device-phone #CreateRoomMode { left: 59px; width: 154px; height: 54px; font-size: 15px; line-height: 54px; }
.device-phone #CreateRoomModeIcon { left: 28px; right: 28px; top: 284px; height: 72px; }
.device-phone #CreateRoomModeIcon strong { font-size: 13px; }
.device-phone #CreateRoomModeIcon span { font-size: 10px; }
.device-phone #CreateRoomMapPrev,
.device-phone #CreateRoomMapNext { width: 50px; height: 50px; font-size: 27px; }
.device-phone #createClassicOptions { left: 28px; right: 28px; top: 370px; gap: 10px; }
.device-phone #createClassicOptions button { height: 72px; }
.device-phone #createClassicOptions span { font-size: 10px; }
.device-phone #createClassicOptions strong { font-size: 13px; }
.device-phone #dialogCreateRoomButtonCancel,
.device-phone #dialogCreateRoomButtonOK { min-width: 142px; height: 52px; font-size: 12px; }

.device-phone #roomHeaderPanel { height: 76px; }
.device-phone #roomNumber { top: 19px; font-size: 18px; }
.device-phone #roomNumber::before { font-size: 10px; }
.device-phone #roomTitle { top: 18px; right: calc(var(--safe-right) + 590px); width: auto; font-size: 20px; }
.device-phone #roomFixedOptions { top: 17px; gap: 8px; }
.device-phone #roomFixedOptions span,
.device-phone #roomFixedOptions button { min-width: 82px; height: 42px; padding: 0 9px; font-size: 10px; line-height: 42px; border-radius: 11px; }
.device-phone #roomPlayersPanel::before,
.device-phone #roomPlayersPanel::after { font-size: 11px; }
.device-phone .roomPlayerName { font-size: 15px; }
.device-phone .roomPlayerMaster,
.device-phone .roomPlayerNotReady,
.device-phone .roomPlayerReady { width: 82px; height: 30px; font-size: 10px; line-height: 30px; }
.device-phone #roomMapName { font-size: 16px; }
.device-phone #roomButtonMap { height: 48px; font-size: 12px; }
.device-phone #roomMapPanel::after,
.device-phone #roomBattleItemHelp { font-size: 10px; line-height: 14px; }
.device-phone #roomButtonChangeTeam,
.device-phone #roomButtonInvite { width: 126px; height: 50px; font-size: 12px; }
.device-phone #roomButtonChangeTeam { left: calc(50% - 258px); }
.device-phone #roomButtonInvite { left: calc(50% + 132px); }
.device-phone #roomButtonBack,
.device-phone #roomBuddyOpen { top: 24px; height: 48px; font-size: 12px; }
.device-phone #roomButtonBack { width: 72px; }
.device-phone #roomBuddyOpen { width: 90px; }
.device-phone #roomMessage { font-size: 11px; }

.device-phone #shopTopBar { height: 72px; }
.device-phone #shopBrand h1 { font-size: 25px; }
.device-phone #shopBrand p { font-size: 13px; }
.device-phone #shopBalances span { min-width: 126px; height: 42px; padding: 12px 13px; font-size: 14px; }
.device-phone #shopExit { min-width: 88px; min-height: 50px; padding: 0 16px; font-size: 14px; }
.device-phone #shopProfilePanel,
.device-phone #shopCatalogPanel,
.device-phone #shopOwnedPanel { top: 94px; height: 490px; }
.device-phone .shopPanelHeading h2 { font-size: 18px; line-height: 21px; }
.device-phone .shopPanelHeading p { font-size: 11px; line-height: 15px; }
.device-phone #shopPreviewStage { top: 62px; height: 180px; }
.device-phone #shopPlayerPreview { height: 178px; }
.device-phone #shopMyStats { top: 252px; grid-template-rows: repeat(2, 28px); gap: 7px; font-size: 11px; line-height: 28px; }
.device-phone #shopEquippedSummary { top: 320px; bottom: 14px; gap: 6px; overflow-y: auto; align-content: start; }
.device-phone #shopEquippedSummary div { padding: 7px 8px; }
.device-phone #shopEquippedSummary span { font-size: 8px; }
.device-phone #shopEquippedSummary strong { font-size: 10px; }
.device-phone #shopCategories { top: 47px; gap: 7px; }
.device-phone #shopCategories button { height: 42px !important; padding: 0 14px; font-size: 11px; }
.device-phone #shopItems { top: 111px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 194px; gap: 10px; }
.device-phone .shopItem { height: 194px; }
.device-phone .shopItemName { font-size: 13px; }
.device-phone .shopItemGender { top: 27px; font-size: 9px; }
.device-phone .shopItem canvas { top: 42px; height: 99px; }
.device-phone .shopItemStats { bottom: 33px; font-size: 10px !important; line-height: 13px !important; }
.device-phone .shopItemPrices { font-size: 11px; }
.device-phone #shopCatalogFooter { height: 48px; }
.device-phone #shopPrev,
.device-phone #shopNext { width: 46px; height: 46px; font-size: 25px; }
.device-phone #shopPages { width: 64px; font-size: 12px; }
.device-phone #shopBuy { min-width: 156px; min-height: 46px; font-size: 12px; }
.device-phone #shopInventoryFilters { top: 50px; gap: 6px; }
.device-phone #shopInventoryFilters button { height: 40px; padding: 0 12px; font-size: 10px; }
.device-phone #shopOwnedPanel #shopInventory { top: 99px; }
.device-phone .shopInventoryItem { flex-basis: 88px; height: 88px; padding-left: 76px; padding-right: 96px; }
.device-phone .shopInventoryPreview { width: 66px; height: 74px; }
.device-phone .shopInventoryItem span { margin-top: 12px; font-size: 13px; }
.device-phone .shopInventoryItem small { font-size: 10px; }
.device-phone .shopInventoryEquip { right: 8px; top: 19px; min-width: 82px; height: 48px; font-size: 11px; }

.device-phone #friendListDialog,
.device-phone #directChatDialog { left: calc(0px - var(--classic-offset-x)); width: var(--presentation-width); }
.device-phone #friendListPanel,
.device-phone #directChatPanel { top: 40px; width: 700px; height: 520px; }
.device-phone #friendListPanel h2,
.device-phone #directChatPanel h2 { font-size: 25px; }
.device-phone #friendListPanel header p,
.device-phone #directChatPanel header p { font-size: 12px; }
.device-phone #friendListClose,
.device-phone #directChatClose { width: 104px; height: 52px; font-size: 12px; }
.device-phone #friendListRequests { top: 100px; max-height: 108px; }
.device-phone #friendListRequests .lobbyFriendRequest strong { font-size: 12px; }
.device-phone #friendListRequests .lobbyFriendRequest span { font-size: 9px; }
.device-phone #friendListRequests .lobbyFriendRequest button { min-width: 72px; height: 42px; font-size: 10px; }
.device-phone #friendListPopupRows { top: 104px; bottom: 86px; }
.device-phone #friendListRequests:not(.hidden) + #friendListPopupRows { top: 220px; }
.device-phone .popupFriend { grid-template-columns: 12px minmax(0, 1fr) 92px 48px; min-height: 70px; }
.device-phone .popupFriend strong { font-size: 13px; }
.device-phone .popupFriend div span { font-size: 10px; }
.device-phone .lobbyFriend .friendChatButton { height: 44px; padding: 0 16px; font-size: 11px; }
.device-phone .lobbyFriend .friendRemoveButton { width: 44px; height: 44px; font-size: 20px; }
.device-phone #friendListAdd { height: 54px; font-size: 13px; }
.device-phone #directChatMessages { top: 106px; bottom: 102px; }
.device-phone .directChatLine { padding: 12px 14px 21px; }
.device-phone .directChatLine strong { font-size: 11px; }
.device-phone .directChatLine p { font-size: 13px; line-height: 18px; }
.device-phone .directChatLine time { font-size: 8px; }
.device-phone #directChatForm { height: 58px; }
.device-phone #directChatInput { right: 106px; height: 58px; font-size: 13px; }
.device-phone #directChatLimit { right: 119px; top: 22px; font-size: 9px; }
.device-phone #directChatSend { width: 96px; height: 58px; font-size: 13px; }

.device-phone #gameChatLog { left: calc(var(--safe-left) + 12px); width: min(800px, calc(100% - var(--safe-left) - var(--safe-right) - 24px)); height: 118px; font-size: 14px; line-height: 19px; }
.device-phone #gameChatButton {
    left: calc(var(--safe-left) + 12px);
    top: auto;
    bottom: 16px;
    width: 82px;
    height: 46px;
    font-size: 13px;
}
.device-phone #gameChatComposer { bottom: 105px; width: 720px; height: 68px; }
.device-phone #gameChatInput { right: 190px; height: 54px; font-size: 15px; }
.device-phone #gameChatLimit { right: 203px; top: 25px; font-size: 10px; }
.device-phone #gameChatCancel,
.device-phone #gameChatSend { width: 83px; height: 54px; font-size: 11px; }
.device-phone #gameChatCancel { right: 95px; }

/* Room interaction correction and the product-requested modern room on iPad.
 * The header must sit above the full-screen player grouping node or WebKit
 * targets that transparent grouping node instead of Room settings. */
#roomHeaderPanel { z-index: 40; }
#roomPlayersPanel { z-index: 10; }
#roomFixedOptions,
#roomFixedOptions button { pointer-events: auto; }
#roomButtonSettings {
    min-width: 104px;
    min-height: 38px;
    padding: 0 13px;
    font-size: 9px;
    line-height: normal;
}
.device-phone #roomButtonSettings {
    min-width: 132px;
    height: 48px;
    font-size: 12px;
}
.device-phone #roomButtonBack,
.device-phone #roomBuddyOpen,
.device-pad #roomButtonBack,
.device-pad #roomBuddyOpen { z-index: 50; }

.device-pad #roomScreen {
    background:
        radial-gradient(circle at 50% -18%, rgba(36, 150, 205, .28), transparent 46%),
        linear-gradient(155deg, #081929 0%, #0b2338 48%, #07131f 100%);
    color: #f2fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
.device-pad #roomScreen .classicFrame { left: 0; width: 800px; }
.device-pad #roomHeaderPanel {
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    height: 72px;
    box-sizing: border-box;
    border: 1px solid rgba(111, 190, 229, .22);
    border-radius: 16px;
    background: linear-gradient(110deg, rgba(18, 52, 79, .94), rgba(9, 28, 45, .94));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.25);
}
.device-pad #roomNumber {
    left: 78px;
    top: 18px;
    width: 72px;
    height: 36px;
    border-right: 1px solid rgba(137, 196, 227, .18);
    color: #6edfff;
    font-size: 14px;
    font-weight: 900;
    line-height: 36px;
    text-align: center;
}
.device-pad #roomNumber::before { content: "ROOM "; font-size: 7px; letter-spacing: .6px; }
.device-pad #roomTitle {
    left: 165px;
    top: 18px;
    width: 258px;
    height: 36px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 850;
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-pad #roomFixedOptions {
    left: auto;
    right: 88px;
    top: 16px;
    width: auto;
    display: flex;
    grid-template-rows: none;
    gap: 6px;
}
.device-pad #roomFixedOptions span {
    min-width: 54px;
    height: 40px;
    padding: 0 7px;
    border: 1px solid rgba(125, 188, 222, .15);
    border-radius: 9px;
    background: rgba(4, 20, 34, .66);
    color: #cfe9f6;
    font-size: 8px;
    line-height: 40px;
    text-align: center;
}
.device-pad #roomSlotMode,
.device-pad #roomSuddenType,
.device-pad #roomSuddenTurn { display: none; }
.device-pad #roomButtonSettings {
    display: block;
    min-width: 112px;
    height: 40px;
    border-radius: 9px;
    font-size: 10px;
}
.device-pad #roomPlayersPanel { left: 0; top: 0; width: 800px; }
.device-pad #roomPlayersPanel::before,
.device-pad #roomPlayersPanel::after {
    position: absolute;
    top: 94px;
    width: 205px;
    color: #8caabc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.device-pad #roomPlayersPanel::before { content: "TEAM A"; left: 18px; color: #70dfff; }
.device-pad #roomPlayersPanel::after { content: "TEAM B"; right: 18px; color: #ff8f9e; text-align: right; }
.device-pad .playerInRoom {
    width: 205px;
    height: 86px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(109, 184, 220, .2);
    border-radius: 13px;
    background: linear-gradient(105deg, rgba(18, 53, 79, .9), rgba(7, 24, 39, .91));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18);
}
.device-pad .playerInRoom.SideA { left: 16px; right: auto; border-left: 4px solid #42c8ef; }
.device-pad .playerInRoom.SideB { left: auto; right: 16px; border-right: 4px solid #ef7187; }
.device-pad #playerInRoom0,
.device-pad #playerInRoom2,
.device-pad #playerInRoom4,
.device-pad #playerInRoom6 { left: 16px; right: auto; }
.device-pad #playerInRoom1,
.device-pad #playerInRoom3,
.device-pad #playerInRoom5,
.device-pad #playerInRoom7 { left: auto; right: 16px; }
.device-pad #playerInRoom0,
.device-pad #playerInRoom1 { top: 110px; }
.device-pad #playerInRoom2,
.device-pad #playerInRoom3 { top: 201px; }
.device-pad #playerInRoom4,
.device-pad #playerInRoom5 { top: 292px; }
.device-pad #playerInRoom6,
.device-pad #playerInRoom7 { top: 383px; }
.device-pad .roomPlayerMobile { width: 223px; height: 95px; }
.device-pad .SideA .roomPlayerMobile { left: 52px; right: auto; }
.device-pad .SideB .roomPlayerMobile { left: auto; right: 52px; }
.device-pad .roomPlayerShadow { bottom: 4px; opacity: .52; }
.device-pad .SideA .roomPlayerShadow { left: 96px; }
.device-pad .SideB .roomPlayerShadow { right: 96px; }
.device-pad .roomPlayerName {
    left: 12px;
    right: 12px;
    top: 9px;
    width: auto;
    height: 17px;
    overflow: hidden;
    color: #f3fbff;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.device-pad .SideB .roomPlayerName { text-align: right; }
.device-pad .roomPlayerMaster,
.device-pad .roomPlayerNotReady,
.device-pad .roomPlayerReady {
    top: 33px;
    bottom: auto;
    width: 67px;
    height: 24px;
    border: 1px solid rgba(131, 195, 227, .2);
    border-radius: 7px;
    background: rgba(4, 19, 33, .82);
    font-size: 7px;
    line-height: 24px;
}
.device-pad .SideA .roomPlayerMaster,
.device-pad .SideA .roomPlayerNotReady,
.device-pad .SideA .roomPlayerReady { left: 10px; right: auto; }
.device-pad .SideB .roomPlayerMaster,
.device-pad .SideB .roomPlayerNotReady,
.device-pad .SideB .roomPlayerReady { left: auto; right: 10px; }
.device-pad .roomPlayerMaster::after { content: "MASTER"; color: #ffd96c; }
.device-pad .roomPlayerReady::after { content: "READY"; color: #65e1ff; }
.device-pad .roomPlayerNotReady::after { content: "WAITING"; color: #8da5b5; }

.device-pad #roomMapPanel,
.device-pad #roomBattleItems {
    left: 232px;
    right: auto;
    width: 336px;
    box-sizing: border-box;
    transform: none;
    border: 1px solid rgba(111, 190, 229, .2);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(16, 46, 70, .985), rgba(6, 22, 36, .985));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 25px rgba(0,0,0,.2);
}
.device-pad #roomMapPanel {
    top: 100px;
    height: 180px;
    padding: 13px 15px;
    text-align: center;
}
.device-pad #roomMapPreview { position: absolute; left: 61px; top: 36px; width: 213px; margin: 0; }
.device-pad #roomMapName { position: absolute; left: 15px; right: 15px; top: 93px; height: 24px; font-size: 13px; line-height: 24px; }
.device-pad #roomButtonMap { position: absolute; left: 93px; top: 126px; width: 150px; height: 38px; font-size: 10px; }
.device-pad #roomBattleItems { top: 288px; height: 212px; padding: 13px 15px; }
.device-pad #roomBattleItems > .roomPanelEyebrow { display: block; }
.device-pad #roomBattleItemSlots { position: absolute; left: 15px; right: 15px; top: 34px; width: auto; }
.device-pad #roomBattleItemCatalog { position: absolute; left: 15px; right: 15px; top: 82px; height: 102px; margin: 0; }
.device-pad #roomBattleItemHelp { position: absolute; left: 15px; right: 15px; top: 190px; width: auto; font-size: 7px; }
.device-pad #roomButtonStart,
.device-pad #roomButtonReady { left: 352px; top: 505px; width: 96px; height: 80px; background-position: center; background-size: contain; }
.device-pad #roomButtonChangeTeam,
.device-pad #roomButtonInvite {
    top: 524px;
    width: 108px;
    height: 42px;
    border: 1px solid rgba(89, 198, 237, .36);
    border-radius: 10px;
    background-image: none;
    background: linear-gradient(145deg, #176c95, #103f64);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}
.device-pad #roomButtonChangeTeam { left: 228px; }
.device-pad #roomButtonChangeTeam::after { content: "Change team"; }
.device-pad #roomButtonInvite { left: 464px; }
.device-pad #roomButtonBack,
.device-pad #roomBuddyOpen {
    top: 26px;
    bottom: auto;
    height: 42px;
    border: 1px solid rgba(116, 191, 227, .28);
    border-radius: 9px;
    background-image: none;
    background: rgba(8, 27, 44, .92);
    color: #e9f8ff;
    font-size: 10px;
    font-weight: 850;
}
.device-pad #roomButtonBack { left: 22px; right: auto; width: 58px; }
.device-pad #roomButtonBack::after { content: "Back"; }
.device-pad #roomBuddyOpen { left: auto; right: 22px; width: 68px; }
.device-pad #roomBuddyOpen::after { content: "Avatar"; }
.device-pad #roomMessage { left: 220px; right: 220px; bottom: 7px; color: #ffd18f; font-size: 8px; text-align: center; }

.device-pad #roomMobileSelect {
    left: 50%;
    top: 60px;
    width: 670px;
    height: 470px;
    box-sizing: border-box;
    padding: 22px 28px 58px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
.device-pad #mobileSelectGrid { grid-template-columns: repeat(6, 70px); gap: 25px 34px; width: 100%; height: 380px; padding: 5px; }
.device-pad #roomMobileSelectCancel { right: 18px; bottom: 14px; }
.device-pad #roomSettingsPanel footer button { min-width: 132px; height: 44px; font-size: 10px; }

/* Build 34 legibility and battle-item pass.
 * Item artwork still uses the exact classic sheet regions; the surrounding
 * cells and labels make one-slot versus two-slot occupancy unambiguous. */
#roomButtonMobile {
    position: absolute;
    display: none;
    z-index: 50;
    border: 1px solid rgba(89, 198, 237, .36);
    border-radius: 10px;
    background: linear-gradient(145deg, #176c95, #103f64);
    color: #fff;
    font-weight: 850;
}

#roomBattleItemSlots,
#battleItems {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
}

#roomBattleItemSlots {
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg,
            rgba(1, 17, 42, .9) 0,
            rgba(1, 17, 42, .9) calc(16.666% - 1px),
            rgba(93, 169, 208, .28) calc(16.666% - 1px),
            rgba(93, 169, 208, .28) 16.666%);
}

#roomBattleItemSlots .battleItemIcon,
#battleItems .battleItemIcon {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

#roomBattleItemSlots .battleItemIcon.itemOneSlot,
#battleItems .battleItemIcon.itemOneSlot { grid-column: span 1; }
#roomBattleItemSlots .battleItemIcon.itemTwoSlots,
#battleItems .battleItemIcon.itemTwoSlots { grid-column: span 2; }

#battleItems { gap: 0; }

.battleItemName,
.battleItemSlotCount { display: none; pointer-events: none; }

#roomBattleItemCatalog {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 56px;
    align-content: start;
    gap: 5px;
}

#roomBattleItemCatalog .battleItemIcon {
    width: auto !important;
    min-width: 0 !important;
    height: 56px !important;
    box-sizing: border-box;
    padding: 0 7px 0 80px;
    overflow: hidden;
    text-align: left;
}

#roomBattleItemCatalog .battleItemIcon::before {
    left: 7px;
    top: 50%;
    transform: translateY(-50%) scale(var(--item-scale));
    transform-origin: left center;
}

#roomBattleItemCatalog .battleItemName,
#roomBattleItemCatalog .battleItemSlotCount {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#roomBattleItemCatalog .battleItemName {
    color: #f0fbff;
    font-size: 9px;
    font-weight: 850;
    line-height: 14px;
}

#roomBattleItemCatalog .battleItemSlotCount {
    margin-top: 3px;
    color: #67d9ff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

#roomBattleItemCatalog .battleItemIcon.roomItemLocked::after {
    left: auto;
    right: 7px;
    top: auto;
    bottom: 4px;
    width: auto;
    height: auto;
    line-height: 11px;
}

/* Keep the sourced 35 x 35 and 58 x 21 sprite crops intact and enlarge the
 * complete controls, including their WebKit hit regions. */
#btnShot1,
#btnShot2,
#btnShotSS {
    top: 18px;
    transform: scale(1.12);
    transform-origin: 0 0;
}
#btnShot1 { left: 2px; }
#btnShot2 { left: 47px; }
#btnShotSS { left: 92px; }

#btnEsc,
#btnPass {
    --menu-art-scale: 1.16;
    top: 1px;
    width: 70px;
    height: 59px;
    background-image: none;
    background-color: transparent;
    border: 0;
    padding: 0;
    transform: none;
}
#btnEsc { left: 660px; }
#btnPass { left: 730px; }
#btnEsc::before,
#btnPass::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 39px;
    width: 58px;
    height: 21px;
    background-image: url("assets/ui/game_stuff6.png");
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(var(--menu-art-scale));
    pointer-events: none;
}
#btnEsc::before { background-position: -144px -137px; }
#btnPass::before { background-position: -144px -115px; }

/* The create dialog is a child of the full-width phone warp. Center it in
 * presentation space instead of the legacy 800 px classic frame. */
.device-phone #dialogCreateRoom {
    left: calc(50% + var(--classic-offset-x));
    right: auto;
    transform: translateX(-50%);
}

.device-phone #roomBattleItemCatalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 47px;
    height: 100px;
}
.device-phone #roomBattleItemCatalog .battleItemIcon {
    height: 47px !important;
    padding-left: 104px;
}
.device-phone #roomBattleItemCatalog .battleItemIcon::before { left: 9px; }
.device-phone #roomBattleItemCatalog .battleItemName { font-size: 11px; line-height: 15px; }
.device-phone #roomBattleItemCatalog .battleItemSlotCount { font-size: 9px; }

.device-phone #roomButtonChangeTeam,
.device-phone #roomButtonMobile,
.device-phone #roomButtonInvite {
    top: 524px;
    width: 126px;
    height: 50px;
    font-size: 12px;
}
.device-phone #roomButtonChangeTeam { left: calc(50% - 330px); }
.device-phone #roomButtonMobile { left: calc(50% - 192px); }
.device-phone #roomButtonInvite { left: calc(50% + 68px); transform: none; }

.device-pad #roomBattleItemCatalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 48px;
}
.device-pad #roomBattleItemCatalog .battleItemIcon { height: 48px !important; }
.device-pad #roomButtonChangeTeam,
.device-pad #roomButtonMobile,
.device-pad #roomButtonInvite {
    top: 524px;
    width: 108px;
    height: 42px;
    font-size: 9px;
}
.device-pad #roomButtonChangeTeam { left: 108px; }
.device-pad #roomButtonMobile { left: 228px; }
.device-pad #roomButtonInvite { left: 464px; }

.device-phone #btnShot1,
.device-phone #btnShot2,
.device-phone #btnShotSS {
    top: 13px;
    transform: scale(1.34);
}
.device-phone #btnShot1 { left: 0; }
.device-phone #btnShot2 { left: 49px; }
.device-phone #btnShotSS { left: 98px; }
.device-phone #btnEsc,
.device-phone #btnPass {
    --menu-art-scale: 1.24;
    top: 1px;
    transform: none;
}
.device-phone #btnEsc { left: 660px; }
.device-phone #btnPass { left: 730px; }

/* A restrained phone legibility pass: increase only text that remained below
 * a comfortable landscape reading size after the previous page redesigns. */
.device-phone .lobbyRoomMode,
.device-phone .lobbyRoomStatus { font-size: 9px; }
.device-phone .lobbyChatMessage time,
.device-phone #lobbyChatLimit { font-size: 9px; }
.device-phone #shopEquippedSummary span { font-size: 10px; }
.device-phone #shopEquippedSummary strong { font-size: 12px; }
.device-phone .shopItemGender { font-size: 10px; }
.device-phone #shopInventoryFilters button { min-height: 42px; font-size: 11px; }
.device-phone #rankingColumns { font-size: 9px; }
.device-phone .rankingRow { min-height: 46px; font-size: 10px; }
.device-phone #performancePanel p,
.device-phone #performanceStats div { font-size: 10px; line-height: 14px; }
.device-phone .directChatLine time { font-size: 9px; }

/* Build 38 canonical battle lobby.
 *
 * One adaptive grid owns the permanent lobby surface. The iPad and iPhone
 * variants share the same hierarchy, while phone geometry is enlarged before
 * the presentation scale so every interactive target remains at least 44 pt.
 */
:is(#channelScreen,#socialScreen) #lobbyShell {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 76px 76px 94px;
    grid-template-rows: 42px 40px minmax(0, 1fr);
    gap: 10px 8px;
    box-sizing: border-box;
}

:is(#channelScreen,#socialScreen) #lobbySideActions,
:is(#channelScreen,#socialScreen) #lobbyTopBar,
:is(#channelScreen,#socialScreen) #lobbyHeaderActions,
:is(#channelScreen,#socialScreen) #lobbyMainPanel,
:is(#channelScreen,#socialScreen) #lobbyChatPanel {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    transform: none;
}

:is(#channelScreen,#socialScreen) #lobbySideActions {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: repeat(2, 42px);
    gap: 8px;
    align-content: center;
}

:is(#channelScreen,#socialScreen) #lobbyTopBar {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: minmax(145px, .8fr) minmax(210px, 1.2fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    padding: 11px 14px;
    overflow: hidden;
    border-radius: 15px;
}

:is(#channelScreen,#socialScreen) #lobbyHeaderActions {
    grid-column: 3 / 6;
    grid-row: 1;
    display: grid !important;
    grid-template-columns: 76px 76px 94px;
    gap: 8px;
    align-content: start;
}

:is(#channelScreen,#socialScreen) #lobbyMainPanel {
    grid-column: 1 / 3;
    grid-row: 3;
    display: block;
    overflow: hidden;
    border-radius: 15px;
}

:is(#channelScreen,#socialScreen) #lobbyChatPanel {
    grid-column: 3 / 6;
    grid-row: 2 / 4;
    display: block;
    overflow: hidden;
    border-radius: 15px;
}

:is(#channelScreen,#socialScreen) #lobbyAvatarStage,
:is(#channelScreen,#socialScreen) #lobbyAvatarPreview,
:is(#channelScreen,#socialScreen) #lobbyFriendsPanel,
:is(#channelScreen,#socialScreen) #lobbyBottomBar,
:is(#channelScreen,#socialScreen) #lobbySidePanel,
:is(#channelScreen,#socialScreen) #lobbyHeaderActions #lobbyRefresh {
    display: none !important;
}

/* Permanent navigation and actions use one control family. */
:is(#channelScreen,#socialScreen) #lobbySideActions button,
:is(#channelScreen,#socialScreen) #lobbyHeaderActions button {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 0;
    padding: 0 7px;
    border: 1px solid rgba(132, 194, 233, .25);
    border-radius: 10px;
    background: rgba(9, 28, 48, .9);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    color: #dceef8;
    font-family: inherit;
    font-size: 9px;
    font-weight: 820;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: none;
    touch-action: manipulation;
}

:is(#channelScreen,#socialScreen) #lobbyHeaderActions #buttonAvatarShop {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 7px;
    background: rgba(15, 59, 84, .88);
    border-color: rgba(86, 174, 218, .3);
}

:is(#channelScreen,#socialScreen) #lobbyHeaderActions #buttonCreateRoom {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 7px;
    border-color: rgba(78, 216, 255, .52);
    background: linear-gradient(145deg, #1985ad, #10577f);
    color: #fff;
}

:is(#channelScreen,#socialScreen) #lobbySideActions button:active,
:is(#channelScreen,#socialScreen) #lobbyHeaderActions button:active,
:is(#channelScreen,#socialScreen) #lobbyRoomFilters button:active,
:is(#channelScreen,#socialScreen) #lobbyChatAudience:active,
:is(#channelScreen,#socialScreen) #lobbyChatSend:active,
:is(#channelScreen,#socialScreen) #friendListPanel button:active,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog button:active,
:is(#channelScreen,#socialScreen) #directChatPanel button:active {
    transform: translateY(1px);
}

:is(#channelScreen,#socialScreen) #lobbySideActions button:focus-visible,
:is(#channelScreen,#socialScreen) #lobbyHeaderActions button:focus-visible,
:is(#channelScreen,#socialScreen) #lobbyRoomFilters button:focus-visible,
:is(#channelScreen,#socialScreen) #lobbyChatAudience:focus-visible,
:is(#channelScreen,#socialScreen) #lobbyChatSend:focus-visible,
:is(#channelScreen,#socialScreen) .lobbyRoom:focus-visible {
    outline: 2px solid #87e6ff;
    outline-offset: 1px;
}

:is(#channelScreen,#socialScreen) #lobbyFriendsOpen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

:is(#channelScreen,#socialScreen) #lobbyFriendsBadge {
    display: inline-block;
    min-width: 16px;
    padding: 2px 5px;
    border-radius: 9px;
    background: rgba(78, 216, 255, .19);
    color: #a9efff;
    font-size: 7px;
    line-height: 12px;
    text-align: center;
}

/* Profile is one quiet surface with separators instead of nested cards. */
:is(#channelScreen,#socialScreen) #lobbyAccountHeading {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: start;
}

:is(#channelScreen,#socialScreen) #myName2 {
    position: static;
    width: auto;
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 830;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

:is(#channelScreen,#socialScreen) #channelName {
    position: static;
    width: auto;
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--lobby-muted);
    font-size: 7px;
    line-height: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) #lobbyPresenceSummary {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 25px;
    padding: 0 10px;
    font-size: 7px;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats,
:is(#channelScreen,#socialScreen) #lobbyBalances {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
}

:is(#channelScreen,#socialScreen) #lobbyBalances {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: .85fr 1.25fr 1fr;
    align-self: stretch;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats > div,
:is(#channelScreen,#socialScreen) #lobbyAccountStats > button,
:is(#channelScreen,#socialScreen) #myGP2,
:is(#channelScreen,#socialScreen) #myGold2,
:is(#channelScreen,#socialScreen) #myCash2 {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 5px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(126, 188, 228, .14);
    border-radius: 0;
    background: transparent;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats > button {
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats > button:focus-visible {
    outline: 2px solid #7fd7ff;
    outline-offset: -2px;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats span,
:is(#channelScreen,#socialScreen) #lobbyAccountStats strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats span {
    color: var(--lobby-muted);
    font-size: 6px;
    line-height: 9px;
}

:is(#channelScreen,#socialScreen) #lobbyAccountStats strong {
    margin-top: 2px;
    color: #eefaff;
    font-size: 8px;
    line-height: 11px;
}

:is(#channelScreen,#socialScreen) #myGP2,
:is(#channelScreen,#socialScreen) #myGold2,
:is(#channelScreen,#socialScreen) #myCash2 {
    align-self: end;
    font-weight: 820;
}

:is(#channelScreen,#socialScreen) #myGP2 span,
:is(#channelScreen,#socialScreen) #myGold2 span,
:is(#channelScreen,#socialScreen) #myCash2 span,
:is(#channelScreen,#socialScreen) #myGP2 strong,
:is(#channelScreen,#socialScreen) #myGold2 strong,
:is(#channelScreen,#socialScreen) #myCash2 strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) #myGP2 span,
:is(#channelScreen,#socialScreen) #myGold2 span,
:is(#channelScreen,#socialScreen) #myCash2 span {
    color: var(--lobby-muted);
    font-size: 6px;
    line-height: 8px;
}

:is(#channelScreen,#socialScreen) #myGP2 strong,
:is(#channelScreen,#socialScreen) #myGold2 strong,
:is(#channelScreen,#socialScreen) #myCash2 strong {
    margin-top: 2px;
    font-size: 8px;
    line-height: 11px;
}

:is(#channelScreen,#socialScreen) #myGP2 { color: #e7f2f8; }
:is(#channelScreen,#socialScreen) #myGold2 { color: #ffe379; }
:is(#channelScreen,#socialScreen) #myCash2 { color: #7fd7ff; }
:is(#channelScreen,#socialScreen) #myInfoBox { display: none; }

/* Panel toolbars. */
:is(#channelScreen,#socialScreen) .lobbyPanelHeading {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 12px;
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

:is(#channelScreen,#socialScreen) .lobbyPanelHeading h2 {
    margin: 2px 0 0;
    color: var(--lobby-text);
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -.2px;
}

:is(#channelScreen,#socialScreen) .lobbyHeadingCopy {
    min-width: 0;
}

:is(#channelScreen,#socialScreen) .lobbyTitleLine {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

:is(#channelScreen,#socialScreen) #roomsPage {
    position: static;
    width: auto;
    color: var(--lobby-muted);
    font-size: 7px;
    line-height: 14px;
    white-space: nowrap;
}

:is(#channelScreen,#socialScreen) #lobbyMainPanel > .lobbyPanelHeading {
    right: auto;
    width: 142px;
}

:is(#channelScreen,#socialScreen) #lobbyRoomFilters {
    position: absolute;
    z-index: 2;
    left: auto;
    right: 12px;
    top: 12px;
    width: 272px;
    height: 42px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(126, 188, 228, .17);
    border-radius: 10px;
    background: rgba(3, 15, 27, .42);
    touch-action: manipulation;
}

:is(#channelScreen,#socialScreen) #lobbyRoomFilters button {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 6px;
    border: 0;
    border-left: 1px solid rgba(126, 188, 228, .13);
    border-radius: 0;
    background: transparent;
    color: #8da7b9;
    font-family: inherit;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

:is(#channelScreen,#socialScreen) #lobbyRoomFilters button:first-child { border-left: 0; }

:is(#channelScreen,#socialScreen) #lobbyRoomFilters button.active {
    background: rgba(30, 130, 168, .46);
    color: #ecfbff;
    box-shadow: inset 0 -2px #54dfff;
}

/* The whole room row is the action; a redundant nested Join label is hidden. */
:is(#channelScreen,#socialScreen) #lobbyMainPanel #roomsList {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 66px;
    bottom: 12px;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 78px;
    align-content: start;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px 3px 4px 1px;
    color: var(--lobby-text);
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 167, 207, .46) transparent;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

:is(#channelScreen,#socialScreen) .lobbyRoom {
    position: relative;
    inset: auto;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 78px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(126, 188, 228, .17);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(17, 43, 70, .91), rgba(7, 24, 42, .95));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
    color: var(--lobby-text);
    font-family: inherit;
    text-align: left;
    transform: none;
    touch-action: manipulation;
}

:is(#channelScreen,#socialScreen) .lobbyRoom::before { content: none; }

:is(#channelScreen,#socialScreen) .lobbyRoom:not(:disabled):active {
    border-color: var(--lobby-accent);
    background: rgba(17, 65, 92, .96);
}

:is(#channelScreen,#socialScreen) .lobbyRoom:disabled { opacity: .62; }

:is(#channelScreen,#socialScreen) .lobbyRoom.hasFriend {
    border-color: rgba(255, 212, 94, .38);
}

:is(#channelScreen,#socialScreen) .lobbyRoomNumber,
:is(#channelScreen,#socialScreen) .lobbyRoomTitle,
:is(#channelScreen,#socialScreen) .lobbyRoomPlayers,
:is(#channelScreen,#socialScreen) .lobbyRoomMap,
:is(#channelScreen,#socialScreen) .lobbyRoomMode,
:is(#channelScreen,#socialScreen) .lobbyRoomStatus {
    position: absolute;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) .lobbyRoomNumber {
    left: 12px;
    top: 12px;
    width: 36px;
    color: var(--lobby-accent);
    font-size: 9px;
    font-weight: 850;
    text-align: left;
}

:is(#channelScreen,#socialScreen) .lobbyRoomTitle {
    left: 50px;
    right: 48px;
    top: 10px;
    color: #f6fbff;
    font-size: 10px;
    font-weight: 820;
}

:is(#channelScreen,#socialScreen) .lobbyRoomPlayers {
    right: 12px;
    top: 11px;
    color: #c7d8e5;
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) .lobbyRoomMap {
    left: 50px;
    right: 12px;
    top: 33px;
    color: var(--lobby-muted);
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) .lobbyRoomMode,
:is(#channelScreen,#socialScreen) .lobbyRoomStatus {
    top: auto;
    bottom: 10px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 7px;
    font-weight: 800;
    line-height: 10px;
}

:is(#channelScreen,#socialScreen) .lobbyRoomMode {
    left: 50px;
    color: #9ddff3;
}

:is(#channelScreen,#socialScreen) .lobbyRoomStatus {
    left: auto;
    right: 12px;
    max-width: 64px;
    color: #80e7b6;
    text-align: right;
}

:is(#channelScreen,#socialScreen) .lobbyRoom.playing .lobbyRoomStatus,
:is(#channelScreen,#socialScreen) .lobbyRoom.full .lobbyRoomStatus {
    color: #f2ba78;
}

:is(#channelScreen,#socialScreen) .lobbyRoomJoin { display: none !important; }

:is(#channelScreen,#socialScreen) .lobbyRoomFriend {
    display: none;
    position: absolute;
    right: 70px;
    bottom: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd45e;
    box-shadow: 0 0 0 2px rgba(255, 212, 94, .13);
}

:is(#channelScreen,#socialScreen) .lobbyRoom.hasFriend .lobbyRoomFriend { display: block; }

:is(#channelScreen,#socialScreen) .lobbyRoomFriend::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #70480a;
}

:is(#channelScreen,#socialScreen) .lobbyRoomFriend::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 2px;
    width: 10px;
    height: 5px;
    border-radius: 7px 7px 4px 4px;
    background: #70480a;
}

:is(#channelScreen,#socialScreen) #lobbyMessage { display: none; }

/* Global chat is a readable transcript, not a stack of cards. */
:is(#channelScreen,#socialScreen) #lobbyChatPanel .lobbyPanelHeading {
    left: 14px;
    right: 14px;
    top: 12px;
}

:is(#channelScreen,#socialScreen) #lobbyChatAudience {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 84px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid rgba(78, 216, 255, .2);
    border-radius: 10px;
    background: transparent;
    color: #99bdcf;
    font-family: inherit;
    font-size: 8px;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 66px;
    bottom: 68px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 3px 5px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 167, 207, .46) transparent;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 8px 3px 9px;
    border: 0;
    border-bottom: 1px solid rgba(126, 188, 228, .12);
    border-radius: 0;
    background: transparent;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage.mine {
    border-color: rgba(126, 188, 228, .12);
    background: transparent;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage strong {
    color: #9ee9ff;
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage time {
    color: #607c91;
    font-size: 7px;
}

:is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage p {
    margin: 4px 0 0;
    color: #d6e2eb;
    font-size: 9px;
    line-height: 12px;
    overflow-wrap: anywhere;
}

:is(#channelScreen,#socialScreen) #lobbyChatForm {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    height: 44px;
}

:is(#channelScreen,#socialScreen) #lobbyChatInput {
    position: absolute;
    left: 0;
    right: 70px;
    top: 0;
    width: auto;
    height: 44px;
    padding: 0 34px 0 11px;
    border-radius: 10px;
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) #lobbyChatLimit {
    position: absolute;
    right: 79px;
    top: 16px;
    color: #5f788b;
    font-size: 6px;
    pointer-events: none;
}

:is(#channelScreen,#socialScreen) #lobbyChatSend {
    position: absolute;
    right: 0;
    top: 0;
    width: 62px;
    height: 44px;
    border: 1px solid rgba(78, 216, 255, .4);
    border-radius: 10px;
    background: rgba(15, 74, 101, .72);
    color: #cef6ff;
    font-family: inherit;
    font-size: 8px;
    font-weight: 820;
}

/* Buddy, player, and direct-chat lists share one modal system. */
:is(#channelScreen,#socialScreen) #friendListDialog,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog,
:is(#channelScreen,#socialScreen) #directChatDialog {
    position: absolute;
    inset: 0;
    z-index: 1700;
    width: 100%;
    height: 600px;
    color: var(--lobby-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}

:is(#channelScreen,#socialScreen) #friendListDialog .dialogShade,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .dialogShade,
:is(#channelScreen,#socialScreen) #directChatDialog .dialogShade {
    background: rgba(1, 7, 14, .78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

:is(#channelScreen,#socialScreen) #friendListPanel,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList,
:is(#channelScreen,#socialScreen) #directChatPanel {
    position: absolute;
    display: block;
    left: 50%;
    right: auto;
    top: 70px;
    width: 520px;
    height: 460px;
    padding: 0;
    box-sizing: border-box;
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid rgba(105, 188, 232, .34);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .04);
}

:is(#channelScreen,#socialScreen) #friendListPanel > header,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList > header,
:is(#channelScreen,#socialScreen) #directChatPanel > header {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 18px;
    height: 58px;
}

:is(#channelScreen,#socialScreen) #friendListPanel h2,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList h2,
:is(#channelScreen,#socialScreen) #directChatPanel h2 {
    margin: 3px 0 0;
    font-size: 20px;
    line-height: 23px;
}

:is(#channelScreen,#socialScreen) #friendListPanel header p,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList header p,
:is(#channelScreen,#socialScreen) #directChatPanel header p {
    margin: 3px 0 0;
    color: var(--lobby-muted);
    font-size: 9px;
}

:is(#channelScreen,#socialScreen) #friendListClose,
:is(#channelScreen,#socialScreen) #lobbyPlayersClose,
:is(#channelScreen,#socialScreen) #directChatClose {
    position: absolute;
    right: 0;
    top: 4px;
    width: 88px;
    height: 44px;
    border: 1px solid rgba(132, 194, 233, .24);
    border-radius: 10px;
    background: rgba(9, 28, 48, .82);
    color: #e6f6ff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

:is(#channelScreen,#socialScreen) #friendListRequests {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 88px;
    max-height: 56px;
    overflow-y: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
}

:is(#channelScreen,#socialScreen) #friendListPopupRows {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 92px;
    bottom: 82px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

:is(#channelScreen,#socialScreen) #friendListRequests:not(.hidden) + #friendListPopupRows {
    top: 154px;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin: 0;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid rgba(126, 188, 228, .14);
    border-radius: 0;
    background: transparent;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest > div:first-child { min-width: 0; }
:is(#channelScreen,#socialScreen) .lobbyFriendRequest strong,
:is(#channelScreen,#socialScreen) .lobbyFriendRequest span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest strong {
    color: #dff8ff;
    font-size: 10px;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest span {
    margin-top: 3px;
    color: var(--lobby-muted);
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest > div:last-child {
    display: flex;
    gap: 6px;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest button {
    position: static;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(48, 229, 161, .3);
    border-radius: 10px;
    background: rgba(9, 28, 48, .82);
    color: #baf8dc;
    font-size: 17px;
    font-weight: 850;
}

:is(#channelScreen,#socialScreen) .lobbyFriendRequest button.secondary {
    border-color: rgba(144, 168, 186, .18);
    color: #9eb2c1;
}

:is(#channelScreen,#socialScreen) .popupFriend {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    margin: 0;
    padding: 7px 5px;
    border: 0;
    border-bottom: 1px solid rgba(126, 188, 228, .14);
    border-radius: 0;
    background: transparent;
}

:is(#channelScreen,#socialScreen) .popupFriend > div { min-width: 0; }
:is(#channelScreen,#socialScreen) .popupFriend strong,
:is(#channelScreen,#socialScreen) .popupFriend > div > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:is(#channelScreen,#socialScreen) .popupFriend strong {
    color: #eaf8ff;
    font-size: 10px;
}

:is(#channelScreen,#socialScreen) .popupFriend > div > span {
    margin-top: 3px;
    color: var(--lobby-muted);
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) .friendUnreadBadge {
    display: inline-block !important;
    width: max-content;
    min-width: 17px;
    margin-top: 4px !important;
    padding: 2px 5px;
    border-radius: 9px;
    background: #1d98c2;
    color: #fff !important;
    font-size: 7px !important;
    text-align: center;
}

:is(#channelScreen,#socialScreen) .popupFriend .friendChatButton {
    position: static;
    width: 78px;
    height: 44px;
    border: 1px solid rgba(78, 216, 255, .3);
    border-radius: 10px;
    background: rgba(18, 79, 107, .38);
    color: #d8f6ff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

:is(#channelScreen,#socialScreen) #friendListPanel > footer {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

:is(#channelScreen,#socialScreen) #friendListPanel > footer button {
    position: static;
    width: 104px;
    height: 44px;
    border: 1px solid rgba(78, 216, 255, .3);
    border-radius: 10px;
    background: rgba(9, 28, 48, .86);
    color: #d8f4ff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

:is(#channelScreen,#socialScreen) #friendMessage {
    left: 22px;
    right: 254px;
    bottom: 30px;
    color: #ffd18d;
    font-size: 8px;
    text-align: left;
}

:is(#channelScreen,#socialScreen) #lobbyPlayersDialog #channelPlayersListHtml {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 88px;
    bottom: 22px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    height: auto;
    margin: 0;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid rgba(126, 188, 228, .14);
    border-radius: 0;
    background: transparent;
    color: #e9f7ff;
    font-family: inherit;
    font-size: 10px;
    text-align: left;
}

:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer::before { content: none; }
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer.self {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    opacity: .62;
}
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer.self::after {
    content: "YOU";
    color: #82cfe5;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .4px;
}
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayerEmpty {
    padding: 24px 9px;
    color: var(--lobby-muted);
    font-size: 9px;
}

:is(#channelScreen,#socialScreen) #directChatMessages {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 92px;
    bottom: 84px;
    overflow-y: auto;
    padding: 0 4px 8px 0;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

:is(#channelScreen,#socialScreen) .directChatLine,
:is(#channelScreen,#socialScreen) .directChatLine.mine {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 9px 5px 18px;
    border: 0;
    border-bottom: 1px solid rgba(126, 188, 228, .13);
    border-radius: 0;
    background: transparent;
}

:is(#channelScreen,#socialScreen) .directChatLine strong {
    display: block;
    color: #87e3ff;
    font-size: 8px;
}

:is(#channelScreen,#socialScreen) .directChatLine p {
    margin: 4px 0 0;
    color: #edf9ff;
    font-size: 10px;
    line-height: 14px;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}

:is(#channelScreen,#socialScreen) .directChatLine time {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #728c9e;
    font-size: 7px;
}

:is(#channelScreen,#socialScreen) #directChatForm {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    height: 48px;
}

:is(#channelScreen,#socialScreen) #directChatInput {
    right: 84px;
    height: 48px;
}

:is(#channelScreen,#socialScreen) #directChatLimit {
    right: 95px;
    top: 18px;
}

:is(#channelScreen,#socialScreen) #directChatSend {
    width: 76px;
    height: 48px;
}

:is(#channelScreen,#socialScreen) #directChatMessage {
    left: 22px;
    right: 22px;
    bottom: 70px;
}

:is(#channelScreen,#socialScreen) #directChatBlock,
:is(#channelScreen,#socialScreen) .chatSafetyActions,
:is(#channelScreen,#socialScreen) .blockedPlayerRow {
    display: none !important;
}

/* Compact lobby prompts share one complete modal component. */
:is(#channelScreen,#socialScreen) #friendDialog,
:is(#channelScreen,#socialScreen) #removeFriendDialog,
:is(#channelScreen,#socialScreen) #goToRoomDialog,
:is(#channelScreen,#socialScreen) #lobbyPlayerDialog {
    position: absolute;
    inset: 0;
    z-index: 1800;
    width: 100%;
    height: 600px;
    color: var(--lobby-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}

:is(#channelScreen,#socialScreen) #friendDialog .dialogShade,
:is(#channelScreen,#socialScreen) #removeFriendDialog .dialogShade,
:is(#channelScreen,#socialScreen) #goToRoomDialog .dialogShade,
:is(#channelScreen,#socialScreen) #lobbyPlayerDialog .dialogShade {
    background: rgba(1, 7, 14, .8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

:is(#channelScreen,#socialScreen) #friendDialogPanel,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel {
    position: absolute;
    left: 50%;
    right: auto;
    top: 150px;
    width: 440px;
    height: 300px;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .34);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .04);
    color: var(--lobby-text);
}

:is(#channelScreen,#socialScreen) #lobbyPlayerDialogPanel {
    top: 165px;
    width: 480px;
    height: 270px;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel h2,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel h2 {
    margin: 5px 0 0;
    color: #f5fbff;
    font-size: 22px;
    line-height: 27px;
    letter-spacing: -.3px;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > p,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > p {
    margin: 7px 0 0;
    color: var(--lobby-muted);
    font-size: 10px;
    line-height: 15px;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > label,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > label {
    position: static;
    display: block;
    width: 100%;
    margin: 25px 0 0;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > label > span,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > label > span {
    display: block;
    margin: 0 0 7px;
    color: #9bb1c2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

:is(#channelScreen,#socialScreen) #friendUsername,
:is(#channelScreen,#socialScreen) #removeFriendUsername,
:is(#channelScreen,#socialScreen) #goToRoomNumber {
    position: static;
    display: block;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(105, 188, 232, .28);
    border-radius: 11px;
    outline: 0;
    background: rgba(3, 15, 27, .74);
    color: #f5fbff;
    font-family: inherit;
    font-size: 11px;
    box-shadow: inset 0 1px 7px rgba(0, 0, 0, .28);
    -webkit-user-select: text;
    user-select: text;
}

:is(#channelScreen,#socialScreen) #friendUsername:focus,
:is(#channelScreen,#socialScreen) #removeFriendUsername:focus,
:is(#channelScreen,#socialScreen) #goToRoomNumber:focus {
    border-color: rgba(78, 216, 255, .72);
    box-shadow: 0 0 0 2px rgba(78, 216, 255, .13), inset 0 1px 7px rgba(0, 0, 0, .28);
}

:is(#channelScreen,#socialScreen) #friendDialogMessage,
:is(#channelScreen,#socialScreen) #removeFriendDialogMessage,
:is(#channelScreen,#socialScreen) #goToRoomMessage,
:is(#channelScreen,#socialScreen) #lobbyPlayerDialogMessage {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 78px;
    min-height: 16px;
    color: #ffd18d;
    font-size: 8px;
    line-height: 12px;
    text-align: left;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > footer,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > footer button,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer button {
    position: static;
    flex: 1 1 0;
    width: auto;
    max-width: 150px;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(132, 194, 233, .25);
    border-radius: 10px;
    background: rgba(9, 28, 48, .9);
    background-image: none;
    color: #dceef8;
    font-family: inherit;
    font-size: 9px;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
    transform: none;
    touch-action: manipulation;
}

:is(#channelScreen,#socialScreen) #friendDialogSend,
:is(#channelScreen,#socialScreen) #removeFriendConfirm,
:is(#channelScreen,#socialScreen) #goToRoomConfirm,
:is(#channelScreen,#socialScreen) #lobbyPlayerDialogChat {
    border-color: rgba(78, 216, 255, .52);
    background: linear-gradient(145deg, #1985ad, #10577f);
    color: #fff;
}

:is(#channelScreen,#socialScreen) #lobbyPlayerDialogPanel > footer button {
    max-width: none;
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > footer button:active,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer button:active {
    transform: translateY(1px);
}

:is(#channelScreen,#socialScreen) #friendDialogPanel > footer button:disabled,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer button:disabled {
    opacity: .42;
}

/* Lobby-owned sheets remain centered in full presentation coordinates. */
:is(#channelScreen,#socialScreen) #dialogCreateRoomWarp,
:is(#channelScreen,#socialScreen) #friendDialog,
:is(#channelScreen,#socialScreen) #friendListDialog,
:is(#channelScreen,#socialScreen) #directChatDialog,
:is(#channelScreen,#socialScreen) #incomingRoomInviteDialog,
:is(#channelScreen,#socialScreen) #removeFriendDialog,
:is(#channelScreen,#socialScreen) #goToRoomDialog,
:is(#channelScreen,#socialScreen) #lobbyPlayerDialog,
:is(#channelScreen,#socialScreen) #lobbyPlayersDialog {
    left: 0;
    right: 0;
    width: 100%;
}

:is(#channelScreen,#socialScreen) #dialogCreateRoom,
:is(#channelScreen,#socialScreen) #friendDialogPanel,
:is(#channelScreen,#socialScreen) #friendListPanel,
:is(#channelScreen,#socialScreen) #directChatPanel,
:is(#channelScreen,#socialScreen) .lobbyPromptPanel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

:is(#channelScreen,#socialScreen) #channelPlayersListHtml,
:is(#channelScreen,#socialScreen) #friendListPopupRows,
:is(#channelScreen,#socialScreen) #friendListRequests,
:is(#channelScreen,#socialScreen) #lobbyChatMessages,
:is(#channelScreen,#socialScreen) #directChatMessages,
:is(#channelScreen,#socialScreen) #roomsList {
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 167, 207, .46) transparent;
}

/* Phone-specific geometry is expressed before the global presentation scale. */
.device-phone :is(#channelScreen,#socialScreen) #lobbyShell {
    padding: 12px calc(var(--safe-right) + 16px) 12px calc(var(--safe-left) + 16px);
    grid-template-columns: 116px minmax(440px, 1fr) 124px 116px 150px;
    grid-template-rows: 72px 68px minmax(0, 1fr);
    gap: 12px 8px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbySideActions {
    grid-template-rows: repeat(2, 72px);
    gap: 8px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyHeaderActions {
    grid-template-columns: 124px 116px 150px;
    gap: 8px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbySideActions button,
.device-phone :is(#channelScreen,#socialScreen) #lobbyHeaderActions button,
.device-phone :is(#channelScreen,#socialScreen) #lobbyHeaderActions #buttonAvatarShop,
.device-phone :is(#channelScreen,#socialScreen) #lobbyHeaderActions #buttonCreateRoom {
    width: 100%;
    min-width: 0;
    height: 72px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyFriendsOpen { gap: 8px; }

.device-phone :is(#channelScreen,#socialScreen) #lobbyFriendsBadge {
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyTopBar {
    grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);
    column-gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyEyebrow {
    font-size: 11px;
    letter-spacing: 1.55px;
}

.device-phone :is(#channelScreen,#socialScreen) #myName2 {
    margin-top: 6px;
    font-size: 22px;
    line-height: 27px;
}

.device-phone :is(#channelScreen,#socialScreen) #channelName {
    margin-top: 5px;
    font-size: 14px;
    line-height: 18px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPresenceSummary {
    height: 36px;
    padding: 0 13px;
    gap: 8px;
    font-size: 14px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyAccountStats > div,
.device-phone :is(#channelScreen,#socialScreen) #lobbyAccountStats > button,
.device-phone :is(#channelScreen,#socialScreen) #myGP2,
.device-phone :is(#channelScreen,#socialScreen) #myGold2,
.device-phone :is(#channelScreen,#socialScreen) #myCash2 {
    padding: 8px 7px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyAccountStats span {
    font-size: 12px;
    line-height: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyAccountStats strong {
    margin-top: 3px;
    font-size: 17px;
    line-height: 21px;
}

.device-phone :is(#channelScreen,#socialScreen) #myGP2,
.device-phone :is(#channelScreen,#socialScreen) #myGold2,
.device-phone :is(#channelScreen,#socialScreen) #myCash2 {
    padding-top: 7px;
    padding-bottom: 7px;
}

.device-phone :is(#channelScreen,#socialScreen) #myGP2 span,
.device-phone :is(#channelScreen,#socialScreen) #myGold2 span,
.device-phone :is(#channelScreen,#socialScreen) #myCash2 span {
    font-size: 11px;
    line-height: 13px;
}

.device-phone :is(#channelScreen,#socialScreen) #myGP2 strong,
.device-phone :is(#channelScreen,#socialScreen) #myGold2 strong,
.device-phone :is(#channelScreen,#socialScreen) #myCash2 strong {
    margin-top: 2px;
    font-size: 17px;
    line-height: 20px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyMainPanel,
.device-phone :is(#channelScreen,#socialScreen) #lobbyChatPanel {
    border-radius: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyPanelHeading {
    left: 18px;
    right: 18px;
    top: 14px;
    min-height: 72px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyPanelHeading h2 {
    margin-top: 3px;
    font-size: 23px;
    line-height: 27px;
}

.device-phone :is(#channelScreen,#socialScreen) #roomsPage {
    font-size: 14px;
    line-height: 20px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyMainPanel > .lobbyPanelHeading {
    right: auto;
    width: 148px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyRoomFilters {
    right: 16px;
    top: 12px;
    width: 378px;
    height: 72px;
    grid-template-columns: 76px 104px 98px 88px;
    gap: 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyRoomFilters button {
    height: 72px;
    padding: 0 8px;
    border: 1px solid rgba(126, 188, 228, .2);
    border-radius: 11px;
    background: rgba(3, 15, 27, .42);
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyRoomFilters button:first-child {
    border-left: 1px solid rgba(126, 188, 228, .2);
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyRoomFilters button.active {
    border-color: rgba(78, 216, 255, .52);
    background: rgba(30, 130, 168, .46);
    box-shadow: inset 0 -3px #54dfff;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyMainPanel #roomsList {
    left: 16px;
    right: 16px;
    top: 96px;
    bottom: 12px;
    grid-auto-rows: 94px;
    gap: 10px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoom {
    height: 94px;
    border-radius: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomNumber {
    left: 14px;
    top: 14px;
    width: 40px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomTitle {
    left: 58px;
    right: 108px;
    top: 12px;
    font-size: 18px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomPlayers {
    right: 14px;
    top: 13px;
    font-size: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomMap {
    left: 58px;
    right: 14px;
    top: 39px;
    font-size: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomMode,
.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomStatus {
    bottom: 13px;
    font-size: 13px;
    line-height: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomMode { left: 58px; }
.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomStatus { right: 14px; max-width: 92px; }

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomFriend {
    right: 112px;
    bottom: 12px;
    width: 20px;
    height: 20px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomFriend::before {
    left: 6px;
    top: 4px;
    width: 8px;
    height: 8px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyRoomFriend::after {
    left: 4px;
    bottom: 2px;
    width: 12px;
    height: 6px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatPanel .lobbyPanelHeading {
    left: 18px;
    right: 16px;
    top: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatAudience {
    min-width: 124px;
    height: 72px;
    padding: 0 13px;
    border-radius: 12px;
    font-size: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatMessages {
    left: 16px;
    right: 16px;
    top: 96px;
    bottom: 92px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage {
    padding: 11px 4px 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage strong {
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage time {
    font-size: 13px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatMessages .lobbyChatMessage p {
    margin-top: 5px;
    font-size: 16px;
    line-height: 21px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatForm {
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 72px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatInput {
    right: 112px;
    height: 72px;
    padding: 0 45px 0 16px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatLimit {
    right: 124px;
    top: 28px;
    font-size: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyChatSend {
    width: 104px;
    height: 72px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListDialog,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog,
.device-phone :is(#channelScreen,#socialScreen) #directChatDialog {
    left: 0;
    right: 0;
    width: 100%;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList,
.device-phone :is(#channelScreen,#socialScreen) #directChatPanel {
    left: 50%;
    top: 40px;
    width: 620px;
    height: 520px;
    transform: translateX(-50%);
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel > header,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList > header,
.device-phone :is(#channelScreen,#socialScreen) #directChatPanel > header {
    left: 26px;
    right: 26px;
    top: 22px;
    height: 76px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel h2,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList h2,
.device-phone :is(#channelScreen,#socialScreen) #directChatPanel h2 {
    margin-top: 4px;
    font-size: 26px;
    line-height: 31px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel header p,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog #playersList header p,
.device-phone :is(#channelScreen,#socialScreen) #directChatPanel header p {
    margin-top: 4px;
    font-size: 13px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListClose,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersClose,
.device-phone :is(#channelScreen,#socialScreen) #directChatClose {
    width: 96px;
    height: 72px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListRequests {
    left: 26px;
    right: 26px;
    top: 112px;
    max-height: 82px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPopupRows {
    left: 26px;
    right: 26px;
    top: 116px;
    bottom: 98px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListRequests:not(.hidden) + #friendListPopupRows {
    top: 204px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyFriendRequest {
    min-height: 82px;
    padding: 5px 4px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyFriendRequest strong {
    font-size: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyFriendRequest span {
    font-size: 14px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyFriendRequest > div:last-child {
    gap: 8px;
}

.device-phone :is(#channelScreen,#socialScreen) .lobbyFriendRequest button {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: 12px;
    font-size: 24px;
}

.device-phone :is(#channelScreen,#socialScreen) .popupFriend {
    grid-template-columns: 12px minmax(0, 1fr) 104px;
    gap: 12px;
    min-height: 76px;
    padding: 7px 5px;
}

.device-phone :is(#channelScreen,#socialScreen) .popupFriend strong {
    font-size: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) .popupFriend > div > span {
    font-size: 14px;
}

.device-phone :is(#channelScreen,#socialScreen) .friendUnreadBadge {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 12px !important;
}

.device-phone :is(#channelScreen,#socialScreen) .popupFriend .friendChatButton {
    width: 104px;
    height: 72px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel > footer {
    left: 26px;
    right: 26px;
    bottom: 20px;
    gap: 10px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendListPanel > footer button {
    width: 126px;
    height: 72px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendMessage {
    left: 26px;
    right: 300px;
    bottom: 43px;
    font-size: 13px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog #channelPlayersListHtml {
    left: 26px;
    right: 26px;
    top: 116px;
    bottom: 26px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
    padding: 10px 12px;
    font-size: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer.self {
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayer.self::after {
    font-size: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayersDialog .lobbyPlayerEmpty {
    padding: 30px 12px;
    font-size: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatMessages {
    left: 26px;
    right: 26px;
    top: 116px;
    bottom: 108px;
}

.device-phone :is(#channelScreen,#socialScreen) .directChatLine,
.device-phone :is(#channelScreen,#socialScreen) .directChatLine.mine {
    padding: 12px 6px 23px;
}

.device-phone :is(#channelScreen,#socialScreen) .directChatLine strong {
    font-size: 15px;
}

.device-phone :is(#channelScreen,#socialScreen) .directChatLine p {
    font-size: 17px;
    line-height: 22px;
}

.device-phone :is(#channelScreen,#socialScreen) .directChatLine time {
    font-size: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatForm {
    left: 26px;
    right: 26px;
    bottom: 22px;
    height: 72px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatInput {
    right: 112px;
    height: 72px;
    padding: 0 48px 0 16px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatLimit {
    right: 124px;
    top: 28px;
    font-size: 12px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatSend {
    width: 104px;
    height: 72px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #directChatMessage {
    left: 26px;
    right: 26px;
    bottom: 96px;
    font-size: 13px;
}

.device-phone :is(#channelScreen,#socialScreen) #dialogCreateRoomWarp,
.device-phone :is(#channelScreen,#socialScreen) #friendDialog,
.device-phone :is(#channelScreen,#socialScreen) #incomingRoomInviteDialog,
.device-phone :is(#channelScreen,#socialScreen) #removeFriendDialog,
.device-phone :is(#channelScreen,#socialScreen) #goToRoomDialog,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayerDialog {
    left: 0;
    right: 0;
    width: 100%;
}

.device-phone :is(#channelScreen,#socialScreen) #dialogCreateRoom,
.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel {
    top: 120px;
    width: 580px;
    height: 360px;
    padding: 28px;
    border-radius: 22px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayerDialogPanel {
    top: 145px;
    width: 620px;
    height: 310px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel h2,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel h2 {
    margin-top: 6px;
    font-size: 26px;
    line-height: 31px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel > p,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel > p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 19px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel > label,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel > label {
    margin-top: 26px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel > label > span,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel > label > span {
    margin-bottom: 9px;
    font-size: 11px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendUsername,
.device-phone :is(#channelScreen,#socialScreen) #removeFriendUsername,
.device-phone :is(#channelScreen,#socialScreen) #goToRoomNumber {
    height: 72px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 17px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogMessage,
.device-phone :is(#channelScreen,#socialScreen) #removeFriendDialogMessage,
.device-phone :is(#channelScreen,#socialScreen) #goToRoomMessage,
.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayerDialogMessage {
    left: 28px;
    right: 28px;
    bottom: 111px;
    min-height: 18px;
    font-size: 13px;
    line-height: 18px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel > footer,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer {
    left: 28px;
    right: 28px;
    bottom: 24px;
    gap: 10px;
}

.device-phone :is(#channelScreen,#socialScreen) #friendDialogPanel > footer button,
.device-phone :is(#channelScreen,#socialScreen) .lobbyPromptPanel > footer button {
    max-width: 180px;
    height: 72px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 16px;
}

.device-phone :is(#channelScreen,#socialScreen) #lobbyPlayerDialogPanel > footer button {
    max-width: none;
}

/* iPhone SE-class landscape widths need a denser header, while retaining
 * 72-logical-pixel (at least 44-point) controls. */
@media (max-width: 700px) and (orientation: landscape) {
    .device-phone :is(#channelScreen,#socialScreen) #lobbyShell {
        grid-template-columns: 108px minmax(0, 1fr) 112px 104px 132px;
    }

    .device-phone :is(#channelScreen,#socialScreen) #lobbyHeaderActions {
        grid-template-columns: 112px 104px 132px;
    }

    .device-phone :is(#channelScreen,#socialScreen) #lobbyTopBar {
        grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.2fr);
        column-gap: 8px;
        padding: 12px 10px;
    }
}

/* Source-native GitzWC icons: presentation only; catalog values are unchanged. */
#shopScreen .avatarSourceIcon {
    display: inline-block;
    position: static;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    vertical-align: middle;
}
#shopScreen .avatarTypeLabel,
#shopScreen .avatarStatChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}
#shopScreen #shopMyStats .avatarSourceIcon { width: 10px; height: 10px; }
#shopScreen .shopItemGender.avatarTypeLabel,
#shopScreen #shopEquippedSummary .avatarTypeLabel { justify-content: flex-start; }
#shopScreen .shopItemStats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}
#shopScreen .shopItemStats .avatarStatChip {
    position: static;
    width: auto;
    line-height: 14px;
    gap: 3px;
}
#shopScreen .shopItemStats .avatarSourceIcon { width: 12px; height: 12px; }
#shopScreen .shopItem canvas { height: 66px; }
.device-phone #shopScreen .avatarSourceIcon { width: 18px; height: 18px; }
.device-phone #shopScreen #shopMyStats .avatarSourceIcon { width: 16px; height: 16px; }
.device-phone #shopScreen .shopItemStats .avatarSourceIcon { width: 14px; height: 14px; }
.device-phone #shopScreen .shopItemStats .avatarStatChip { line-height: 16px; }
.device-phone #shopScreen .shopItem canvas { height: 83px; }
.device-phone #shopScreen #shopEquippedSummary .avatarSourceIcon { width: 14px; height: 14px; }
/* Keep the newly icon-bearing filter targets at least 44 pt after phone scaling. */
.device-phone #shopScreen #shopCategories button,
.device-phone #shopScreen #shopInventoryFilters button {
    min-width: 72px;
    height: 72px !important;
    font-size: 14px;
}
.device-phone #shopScreen #shopItems { top: 141px; }
.device-phone #shopScreen #shopCatalogPanel > .shopPanelHeading { height: 126px; }
.device-phone #shopScreen #shopCategories { bottom: auto; height: 76px; }
.device-phone #shopScreen #shopOwnedPanel #shopInventory { top: 131px; }
.device-pad #shopScreen #shopCategories button,
.device-pad #shopScreen #shopInventoryFilters button { min-height: 36px !important; }
.device-pad #shopScreen #shopItems { top: 114px; }
.device-pad #shopScreen #shopOwnedPanel #shopInventory { top: 106px; }
#shopScreen #shopCategories,
#shopScreen #shopCategories button { touch-action: pan-x; }

/* Build 40 room controls.
 * The source minimap sheet remains unchanged; its exact 213 x 50 crops are
 * now the map-selection affordance in both room creation and the room itself. */
:is(#channelScreen,#socialScreen) #CreateRoomModeIcon {
    display: grid;
    grid-template-columns: 213px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: none;
    color: #f3fbff;
    text-align: left;
}

:is(#channelScreen,#socialScreen) #CreateRoomMapImage {
    display: block;
    width: 213px;
    height: 50px;
    margin: 0;
    border-radius: 7px;
    background-image: url("assets/maps/minimaps.png");
    background-repeat: no-repeat;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .28);
}

:is(#channelScreen,#socialScreen) #CreateRoomModeIcon strong {
    display: block;
    overflow: hidden;
    color: #eafaff;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#channelScreen,#socialScreen) #createRoomMapSelect {
    position: absolute;
    inset: 0;
    z-index: 2050;
    width: 100%;
    height: 600px;
}

:is(#channelScreen,#socialScreen) #createRoomMapSelect .dialogShade {
    background: rgba(1, 7, 14, .82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#createRoomMapSelectCancel {
    position: absolute;
    right: 22px;
    top: 20px;
    width: 82px;
    height: 44px;
    border: 1px solid rgba(116, 191, 227, .32);
    border-radius: 9px;
    background: rgba(16, 43, 67, .94);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

#createRoomMapSelectGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: 392px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.createRoomMapChoice {
    position: relative;
    height: 125px;
    overflow: hidden;
    border: 1px solid rgba(116, 191, 227, .22);
    border-radius: 10px;
    background: rgba(4, 19, 34, .84);
    color: #eafaff;
    touch-action: pan-y;
}

.createRoomMapChoice.selected {
    border-color: #53ddff;
    box-shadow: inset 0 0 0 1px #53ddff, 0 0 12px rgba(50, 201, 247, .2);
}

.createRoomMapChoicePreview {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 213px;
    height: 50px;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    background-image: url("assets/maps/minimaps.png");
    background-repeat: no-repeat;
}

.createRoomMapChoice strong {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 12px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-phone :is(#channelScreen,#socialScreen) #createRoomMapSelect {
    left: 0;
    right: 0;
    width: 100%;
}

.device-phone :is(#channelScreen,#socialScreen) #createRoomMapSelectGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 405px;
}

.device-phone :is(#channelScreen,#socialScreen) .createRoomMapChoice { height: 145px; }
.device-phone :is(#channelScreen,#socialScreen) .createRoomMapChoicePreview { transform: translateX(-50%) scale(1.28); }
.device-phone :is(#channelScreen,#socialScreen) .createRoomMapChoice strong { bottom: 12px; font-size: 14px; }
.device-phone :is(#channelScreen,#socialScreen) #createRoomMapSelectCancel { width: 104px; height: 52px; font-size: 12px; }

/* The room header is one grid, so every option is a real master-only cycling
 * button and long room names cannot collide with navigation. */
.device-pad #roomHeaderPanel,
.device-phone #roomHeaderPanel {
    display: grid;
    align-items: center;
    box-sizing: border-box;
}

.device-pad #roomHeaderPanel {
    grid-template-columns: 70px 44px minmax(96px, 1fr) auto 76px;
    gap: 6px;
    padding: 10px;
}

.device-phone #roomHeaderPanel {
    height: 92px;
    grid-template-columns: 88px 56px minmax(130px, 1fr) auto 100px;
    gap: 10px;
    padding: 10px 12px;
}

.device-pad #roomHeaderPanel > #roomButtonBack,
.device-pad #roomHeaderPanel > #roomNumber,
.device-pad #roomHeaderPanel > #roomTitle,
.device-pad #roomHeaderPanel > #roomFixedOptions,
.device-pad #roomHeaderPanel > #roomBuddyOpen,
.device-phone #roomHeaderPanel > #roomButtonBack,
.device-phone #roomHeaderPanel > #roomNumber,
.device-phone #roomHeaderPanel > #roomTitle,
.device-phone #roomHeaderPanel > #roomFixedOptions,
.device-phone #roomHeaderPanel > #roomBuddyOpen {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    transform: none;
}

.device-pad #roomButtonBack::after,
.device-pad #roomBuddyOpen::after,
.device-phone #roomButtonBack::after,
.device-phone #roomBuddyOpen::after { content: none; }

.device-pad #roomHeaderPanel > #roomButtonBack,
.device-pad #roomHeaderPanel > #roomBuddyOpen,
.device-phone #roomHeaderPanel > #roomButtonBack,
.device-phone #roomHeaderPanel > #roomBuddyOpen {
    padding: 0 10px;
    border: 1px solid rgba(116, 191, 227, .3);
    background: rgba(8, 27, 44, .94);
    color: #e9f8ff;
    font-weight: 850;
}

.device-pad #roomHeaderPanel > #roomButtonBack,
.device-pad #roomHeaderPanel > #roomBuddyOpen {
    height: 48px;
    border-radius: 10px;
    font-size: 10px;
}

.device-phone #roomHeaderPanel > #roomButtonBack,
.device-phone #roomHeaderPanel > #roomBuddyOpen {
    height: 72px;
    border-radius: 13px;
    font-size: 14px;
}

.device-pad #roomHeaderPanel > #roomNumber,
.device-phone #roomHeaderPanel > #roomNumber {
    box-sizing: border-box;
    border: 1px solid rgba(94, 208, 244, .25);
    border-radius: 10px;
    background: rgba(4, 20, 34, .66);
    color: #6edfff;
    text-align: center;
}

.device-pad #roomHeaderPanel > #roomNumber { height: 48px; font-size: 14px; line-height: 46px; }
.device-phone #roomHeaderPanel > #roomNumber { height: 72px; font-size: 18px; line-height: 70px; }
.device-pad #roomNumber::before,
.device-phone #roomNumber::before { content: none; }

.device-pad #roomHeaderPanel > #roomTitle,
.device-phone #roomHeaderPanel > #roomTitle {
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 12px;
    border: 1px solid rgba(125, 188, 222, .15);
    background: rgba(4, 20, 34, .54);
    color: #f3fbff;
    font-weight: 850;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-pad #roomHeaderPanel > #roomTitle { height: 48px; border-radius: 10px; font-size: 12px; line-height: 46px; }
.device-phone #roomHeaderPanel > #roomTitle { height: 72px; border-radius: 13px; font-size: 17px; line-height: 70px; }
.device-pad #roomHeaderPanel > #roomTitle:disabled,
.device-phone #roomHeaderPanel > #roomTitle:disabled { opacity: 1; }

.device-pad #roomFixedOptions,
.device-phone #roomFixedOptions {
    display: grid;
    align-items: center;
    width: auto;
}

.device-pad #roomFixedOptions {
    grid-template-columns: 64px 64px 62px 90px 62px;
    grid-template-rows: 48px;
    gap: 5px;
}

.device-phone #roomFixedOptions {
    grid-template-columns: 88px 88px 78px 112px 88px;
    grid-template-rows: 72px;
    gap: 8px;
}

.device-pad #roomFixedOptions button,
.device-phone #roomFixedOptions button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 5px;
    overflow: hidden;
    border: 1px solid rgba(89, 198, 237, .3);
    background: linear-gradient(145deg, rgba(23, 108, 149, .96), rgba(16, 63, 100, .96));
    color: #f3fbff;
    font-weight: 850;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-pad #roomFixedOptions button { height: 48px; border-radius: 10px; font-size: 8px; }
.device-phone #roomFixedOptions button { height: 72px; border-radius: 13px; font-size: 12px; }
.device-pad #roomFixedOptions button:disabled,
.device-phone #roomFixedOptions button:disabled { opacity: .48; }

/* Only the sourced minimap image opens map selection. The released center
 * height belongs to the battle-item card. */
.device-pad #roomMapPanel,
.device-phone #roomMapPanel {
    left: 50%;
    right: auto;
    width: 233px;
    height: 70px;
    padding: 10px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.device-pad #roomMapPanel { top: 100px; }
.device-phone #roomMapPanel { top: 108px; }
.device-pad #roomMapPanel::after,
.device-phone #roomMapPanel::after { content: none; }

.device-pad #roomMapPreview,
.device-phone #roomMapPreview {
    position: static;
    display: block;
    width: 213px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(83, 221, 255, .45);
    border-radius: 8px;
    background-color: transparent;
    background-image: url("assets/maps/minimaps.png");
    background-repeat: no-repeat;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .32);
}

.device-pad #roomMapPreview:disabled,
.device-phone #roomMapPreview:disabled { opacity: .62; }

.device-pad #roomBattleItems {
    top: 178px;
    height: 322px;
}

.device-phone #roomBattleItems {
    top: 186px;
    height: 313px;
}

.device-pad #roomBattleItemCatalog,
.device-phone #roomBattleItemCatalog {
    top: 88px;
    bottom: 31px;
    height: auto;
}

.device-pad #roomBattleItemHelp,
.device-phone #roomBattleItemHelp {
    top: auto;
    bottom: 11px;
}

.device-pad #roomButtonChangeTeam { left: 228px; }
.device-pad #roomButtonInvite { left: 464px; }
.device-phone #roomButtonChangeTeam { left: calc(50% - 258px); }
.device-phone #roomButtonInvite { left: calc(50% + 132px); }

/* Title editing is intentionally separate from the removed settings sheet. */
#roomTitleDialog {
    position: absolute;
    inset: 0;
    z-index: 2000;
}

#roomTitleDialogPanel {
    position: absolute;
    left: 50%;
    top: 170px;
    width: 440px;
    height: 260px;
    box-sizing: border-box;
    padding: 24px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
    color: #f4fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}

#roomTitleDialogPanel h2 { margin: 6px 0 0; font-size: 22px; }
#roomTitleDialogPanel label { display: block; margin-top: 24px; }
#roomTitleDialogPanel label > span { display: block; margin-bottom: 7px; color: #9cb5c5; font-size: 8px; font-weight: 800; text-transform: uppercase; }
#roomTitleInput { width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px; border: 1px solid rgba(116, 191, 227, .32); border-radius: 9px; outline: 0; background: rgba(2, 14, 27, .75); color: #fff; font-size: 12px; -webkit-user-select: text; user-select: text; }
#roomTitleMessage { position: absolute; left: 24px; right: 220px; bottom: 29px; color: #ffd08a; font-size: 8px; }
#roomTitleDialogPanel footer { position: absolute; right: 24px; bottom: 20px; display: flex; gap: 9px; }
#roomTitleDialogPanel footer button { min-width: 92px; height: 44px; border: 1px solid rgba(78, 216, 255, .35); border-radius: 9px; background: rgba(12, 45, 69, .92); color: #fff; font-size: 9px; font-weight: 850; }
#roomTitleSave { background: linear-gradient(145deg, #1c97b9, #14618c) !important; }

.device-phone #roomTitleDialog { left: 0; width: var(--presentation-width); }
.device-phone #roomTitleDialogPanel { top: 135px; width: 620px; height: 330px; padding: 28px; }
.device-phone #roomTitleDialogPanel h2 { font-size: 27px; }
.device-phone #roomTitleDialogPanel label { margin-top: 28px; }
.device-phone #roomTitleDialogPanel label > span { font-size: 11px; }
.device-phone #roomTitleInput { height: 72px; padding: 0 18px; border-radius: 12px; font-size: 17px; }
.device-phone #roomTitleMessage { left: 28px; right: 260px; bottom: 37px; font-size: 12px; }
.device-phone #roomTitleDialogPanel footer { right: 28px; bottom: 24px; gap: 10px; }
.device-phone #roomTitleDialogPanel footer button { min-width: 116px; height: 72px; border-radius: 12px; font-size: 15px; }

/* Dragging may begin directly on an interactive child without selecting it. */
#shopInventoryFilters,
#shopInventoryFilters button { touch-action: pan-x; }
#shopInventoryFilters { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
#roomBattleItemCatalog,
#roomBattleItemCatalog .battleItemIcon { touch-action: pan-y; }
#roomBattleItemCatalog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Room chat occupies the former permanent item catalog. The six sourced item
 * slots remain visible and open the unchanged item/lock logic in one sheet. */
#roomBattleItems > .roomPanelEyebrow { display: block; }
#roomBattleItemSelection {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 34px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgba(97, 193, 231, .28);
    border-radius: 9px;
    background: rgba(2, 17, 31, .82);
    cursor: pointer;
}
#roomBattleItemSelection:focus-visible { outline: 2px solid #55d9ff; outline-offset: 2px; }
#roomBattleItemSelection #roomBattleItemSlots {
    position: absolute;
    left: 4px;
    right: 66px;
    top: 4px;
    width: auto;
    min-height: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}
#roomBattleItemSelection .battleItemIcon { height: 40px; pointer-events: none; }
#roomBattleItemEditLabel {
    position: absolute;
    right: 7px;
    top: 0;
    width: 53px;
    height: 48px;
    color: #70dcff;
    font-size: 8px;
    font-weight: 850;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
}
#roomChatMessages {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 92px;
    bottom: 65px;
    overflow: hidden auto;
    padding: 7px 8px;
    border: 1px solid rgba(97, 193, 231, .18);
    border-radius: 9px;
    background: rgba(2, 14, 27, .72);
    color: #eaf8ff;
    font: 700 9px/14px Arial, sans-serif;
    text-shadow: none;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.roomChatLine { margin: 0 0 5px; overflow-wrap: anywhere; }
.roomChatLine strong { margin-right: 5px; color: #82dcff; }
.roomChatLine.mine strong { color: #ffe07b; }
.roomChatBalloon {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 35;
    overflow: visible;
    pointer-events: none;
    text-shadow: none;
}
.roomChatBalloonFrame {
    --room-balloon-scale: 0;
    position: absolute;
    left: 0;
    bottom: 9px;
    display: block;
    box-sizing: border-box;
    transform: translateX(-50%) scale(var(--room-balloon-scale));
    transform-origin: 50% 100%;
    border: 1px solid rgba(13, 43, 66, .95);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}
.roomChatBalloonFrame::before,
.roomChatBalloonFrame::after {
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    content: "";
}
.roomChatBalloonFrame::before {
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: rgba(13, 43, 66, .95);
}
.roomChatBalloonFrame::after {
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #fff;
}
.roomChatBalloon.SideA .roomChatBalloonFrame::before,
.roomChatBalloon.SideA .roomChatBalloonFrame::after { left: calc(50% + 5px); }
.roomChatBalloon.SideB .roomChatBalloonFrame::before,
.roomChatBalloon.SideB .roomChatBalloonFrame::after { left: calc(50% - 5px); }
.roomChatBalloonText {
    position: absolute;
    inset: 5px 6px;
    display: block;
    overflow: hidden;
    color: #202830;
    font: 700 13px/16px Arial, sans-serif;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}
.roomChatBalloon.SideA .roomChatBalloonText,
.roomChatBalloon.SideB .roomChatBalloonText { color: #202830; }
#roomChatForm {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 13px;
    height: 44px;
}
#roomChatInput {
    position: absolute;
    left: 0;
    right: 69px;
    top: 0;
    width: auto;
    height: 44px;
    padding: 0 34px 0 10px;
    border: 1px solid rgba(116, 191, 227, .28);
    border-radius: 9px;
    outline: 0;
    background: rgba(2, 14, 27, .82);
    color: #fff;
    font-size: 10px;
    user-select: text;
    -webkit-user-select: text;
}
#roomChatInput:focus { border-color: #53ddff; }
#roomChatLimit { position: absolute; right: 77px; top: 17px; color: #6f8999; font-size: 7px; pointer-events: none; }
#roomChatSend {
    position: absolute;
    right: 0;
    top: 0;
    width: 61px;
    height: 44px;
    border: 1px solid rgba(78, 216, 255, .42);
    border-radius: 9px;
    background: linear-gradient(145deg, #1983ab, #11557d);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}
#roomChatStatus { left: 15px; right: 84px; bottom: 59px; color: #ffd18d; font-size: 7px; text-align: center; }

#roomBattleItemDialog { position: absolute; inset: 0; z-index: 2200; }
#roomBattleItemDialog .dialogShade { background: rgba(1, 7, 14, .8); backdrop-filter: blur(6px); }
#roomBattleItemDialogPanel {
    position: absolute;
    left: 50%;
    top: 50px;
    width: 660px;
    height: 500px;
    box-sizing: border-box;
    padding: 22px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 188, 232, .48);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(16, 42, 67, .99), rgba(6, 20, 35, .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
    color: #f4fbff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}
#roomBattleItemDialogPanel header { height: 62px; }
#roomBattleItemDialogPanel h2 { margin: 5px 0 0; font-size: 21px; }
#roomBattleItemDialogClose {
    position: absolute;
    right: 22px;
    top: 20px;
    width: 88px;
    height: 44px;
    border: 1px solid rgba(116, 191, 227, .32);
    border-radius: 9px;
    background: rgba(16, 43, 67, .9);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
}
#roomBattleItemDialogSlots {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 84px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
    height: 48px;
    overflow: hidden;
    padding: 3px;
    border-radius: 8px;
    background: repeating-linear-gradient(90deg, rgba(1,17,42,.9) 0, rgba(1,17,42,.9) calc(16.666% - 1px), rgba(93,169,208,.28) calc(16.666% - 1px), rgba(93,169,208,.28) 16.666%);
}
#roomBattleItemDialogSlots .battleItemIcon { width: auto !important; min-width: 0 !important; height: 42px; }
#roomBattleItemDialogSlots .battleItemIcon.itemOneSlot { grid-column: span 1; }
#roomBattleItemDialogSlots .battleItemIcon.itemTwoSlots { grid-column: span 2; }
#roomBattleItemDialog #roomBattleItemCatalog {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 145px;
    bottom: 48px;
    width: auto;
    height: auto;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 56px;
    overflow: hidden auto;
}
#roomBattleItemDialog #roomBattleItemHelp {
    position: absolute;
    left: 22px;
    right: 22px;
    top: auto;
    bottom: 20px;
    width: auto;
    margin: 0;
    color: #a9cfdf;
    font-size: 8px;
}

.device-phone #roomBattleItemSelection { left: 16px; right: 16px; top: 36px; height: 58px; }
.device-phone #roomBattleItemSelection #roomBattleItemSlots { left: 5px; right: 82px; top: 5px; height: 48px; min-height: 48px; }
.device-phone #roomBattleItemSelection .battleItemIcon { height: 48px; }
.device-phone #roomBattleItemEditLabel { right: 8px; width: 68px; height: 56px; font-size: 10px; line-height: 56px; }
.device-phone #roomChatMessages { left: 16px; right: 16px; top: 102px; bottom: 76px; padding: 8px 10px; font-size: 12px; line-height: 17px; }
.device-phone .roomChatLine { margin-bottom: 7px; }
.device-phone #roomChatForm { left: 16px; right: 16px; bottom: 12px; height: 56px; }
.device-phone #roomChatInput { right: 91px; height: 56px; padding: 0 42px 0 13px; border-radius: 11px; font-size: 13px; }
.device-phone #roomChatLimit { right: 101px; top: 22px; font-size: 9px; }
.device-phone #roomChatSend { width: 81px; height: 56px; border-radius: 11px; font-size: 12px; }
.device-phone #roomChatStatus { left: 16px; right: 106px; bottom: 70px; font-size: 10px; }
.device-phone #roomBattleItemDialog { left: 0; width: var(--presentation-width); }
.device-phone #roomBattleItemDialogPanel { top: 45px; width: min(760px, calc(var(--presentation-width) - 80px)); height: 510px; padding: 24px; }
.device-phone #roomBattleItemDialogPanel h2 { font-size: 25px; }
.device-phone #roomBattleItemDialogClose { right: 24px; top: 22px; width: 108px; height: 56px; border-radius: 11px; font-size: 13px; }
.device-phone #roomBattleItemDialogSlots { left: 24px; right: 24px; top: 92px; height: 58px; }
.device-phone #roomBattleItemDialogSlots .battleItemIcon { height: 52px; }
.device-phone #roomBattleItemDialog #roomBattleItemCatalog { left: 24px; right: 24px; top: 164px; bottom: 54px; grid-auto-rows: 62px; }
.device-phone #roomBattleItemDialog #roomBattleItemCatalog .battleItemIcon { height: 62px !important; }
.device-phone #roomBattleItemDialog #roomBattleItemHelp { left: 24px; right: 24px; bottom: 23px; font-size: 11px; }

/* Canonical battle menu. The palette and radio cells remain sourced from the
   classic dialog; the larger grid gives every iPad and iPhone choice an
   explicit readable label and dependable touch target. */
#btnEsc {
    z-index: 260;
    pointer-events: auto;
    touch-action: none;
}
#OptionsDialog {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-rows: 44px 140px 72px 72px 54px;
    gap: 8px;
    box-sizing: border-box;
    width: 460px;
    height: 462px;
    padding: 18px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 1px solid #07131d;
    border-radius: 14px;
    background: linear-gradient(155deg, #31566d 0%, #1d394c 48%, #122a3b 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72), inset 0 2px 1px rgba(173, 220, 247, .42);
    color: #f5fbff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-shadow: none;
    z-index: 2700;
}
#OptionsDialog.hidden { display: none !important; }
.OptionsDialogHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(150, 211, 239, .3);
}
.OptionsDialogHeader strong {
    color: #fff;
    font-size: 22px;
    line-height: 1;
}
.OptionsDialogHeader span {
    color: #b7d5e5;
    font-size: 13px;
    font-weight: 700;
}
.OptionsDialogSection {
    position: relative;
    display: grid;
    grid-template-rows: 22px minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 10px 9px;
    border: 1px solid rgba(130, 203, 237, .22);
    border-radius: 10px;
    background: rgba(4, 22, 34, .38);
}
.OptionsBackgroundSection,
.OptionsAudioSection {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
#OptionsDialog .OptionTitle1,
#OptionsTextControls {
    position: static;
    color: #ffd176;
    font-size: 14px;
    font-weight: 850;
    line-height: 22px;
    text-shadow: none;
}
#OptionsControlLayouts,
#OptionsBackgroundModes,
#OptionsAudioModes {
    position: static;
    display: grid;
    width: auto;
    min-width: 0;
    height: auto;
    gap: 7px;
}
#OptionsControlLayouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4px;
}
#OptionsBackgroundModes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#OptionsAudioModes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#OptionsDialog .controlLayoutChoice,
#OptionsDialog .backgroundModeChoice,
#OptionsDialog .audioModeChoice {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 46px;
    box-sizing: border-box;
    padding: 0 12px 0 39px;
    border: 1px solid rgba(135, 207, 238, .24);
    border-radius: 8px;
    background: rgba(5, 27, 43, .78);
    color: #f5fbff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: left;
    text-shadow: none;
    touch-action: manipulation;
}
#OptionsDialog [role="radio"][aria-checked="true"] {
    border-color: rgba(255, 209, 118, .78);
    background: linear-gradient(145deg, rgba(30, 104, 137, .96), rgba(14, 66, 94, .96));
    color: #fff7dc;
}
#OptionsDialog .RadioOn,
#OptionsDialog .RadioOff {
    position: absolute;
    left: 14px;
    top: 50%;
    flex: 0 0 10px;
    margin: 0;
    transform: translateY(-50%) scale(1.45);
    transform-origin: 50% 50%;
}
.OptionsDialogActions {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}
#OptionsDialog #OptionsOK,
#OptionsDialog #OptionsLeave {
    position: relative;
    left: auto;
    top: auto;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 54px;
    box-sizing: border-box;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(151, 216, 244, .35);
    border-radius: 10px;
    background: linear-gradient(145deg, #247fa8, #125174);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 1px 1px #07131d;
    touch-action: manipulation;
}
#OptionsDialog #OptionsLeave {
    border-color: rgba(255, 165, 137, .42);
    background: linear-gradient(145deg, #8f483c, #642d2a);
}
#OptionsDialog #OptionsOK::before,
#OptionsDialog #OptionsLeave::before { content: none; }

.device-phone #OptionsDialog {
    left: 50%;
    top: 50%;
    grid-template-rows: 54px 126px 92px 92px 72px;
    gap: 10px;
    width: 620px;
    height: 540px;
    padding: 20px;
    transform: translate(-50%, -50%);
    border-radius: 18px;
}
.device-phone .OptionsDialogHeader { padding: 0 6px 10px; }
.device-phone .OptionsDialogHeader strong { font-size: 28px; }
.device-phone .OptionsDialogHeader span { font-size: 17px; }
.device-phone .OptionsDialogSection {
    grid-template-rows: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px 10px;
    border-radius: 13px;
}
.device-phone .OptionsControlsSection { grid-template-rows: 26px minmax(0, 1fr); }
.device-phone .OptionsBackgroundSection,
.device-phone .OptionsAudioSection {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
}
.device-phone #OptionsControlLayouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.device-phone #OptionsDialog .OptionTitle1,
.device-phone #OptionsTextControls { font-size: 18px; line-height: 26px; }
.device-phone #OptionsDialog .controlLayoutChoice,
.device-phone #OptionsDialog .backgroundModeChoice,
.device-phone #OptionsDialog .audioModeChoice {
    height: 72px;
    padding: 0 16px 0 51px;
    border-radius: 11px;
    font-size: 18px;
}
.device-phone #OptionsDialog .RadioOn,
.device-phone #OptionsDialog .RadioOff {
    left: 19px;
    transform: translateY(-50%) scale(1.9);
}
.device-phone .OptionsDialogActions { gap: 12px; }
.device-phone #OptionsDialog #OptionsOK,
.device-phone #OptionsDialog #OptionsLeave {
    height: 72px;
    border-radius: 12px;
    font-size: 19px;
}

/* Build 65: readable shop data, icon-only category navigation, 100-item scroll pages. */
#shopScreen .shopAccessibleLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#shopScreen #shopCatalogPanel > .shopPanelHeading { height: 44px; }
#shopScreen #shopCategories { top: 0; bottom: auto; height: 44px; }
#shopScreen #shopCategories button,
#shopScreen #shopInventoryFilters button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px !important;
    padding: 0 8px;
}
#shopScreen #shopCategories .avatarSourceIcon,
#shopScreen #shopInventoryFilters .avatarSourceIcon { width: 25px; height: 25px; }
#shopScreen #shopInventoryFilters { top: 12px; height: 44px; }
#shopScreen #shopOwnedPanel #shopInventory { top: 65px; }
.device-pad #shopScreen #shopOwnedPanel #shopInventory { top: 65px; }
.device-pad #shopScreen #shopItems { top: 65px; }
#shopScreen #shopItems {
    top: 65px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    bottom: 65px;
}
#shopScreen .shopItem {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-content: start;
    height: auto;
    min-height: 210px;
    padding: 10px;
    touch-action: pan-y;
}
#shopScreen .shopItem > span,
#shopScreen .shopItem > canvas {
    position: static;
    inset: auto;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
    transform: none;
}
#shopScreen .shopItemName { min-height: 34px; font-size: 14px; line-height: 17px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
#shopScreen .shopItemGender { font-size: 11px; line-height: 18px; }
#shopScreen .shopItem canvas { height: 72px; object-fit: contain; }
#shopScreen .shopItemStats { font-size: 13px !important; line-height: 22px !important; gap: 4px 10px; }
#shopScreen .shopItemStats .avatarStatChip { font-size: inherit; line-height: 22px; gap: 4px; }
#shopScreen .shopItemStats .avatarSourceIcon { width: 18px; height: 18px; }
#shopScreen .shopItemPrices { margin-top: auto; font-size: 13px; line-height: 22px; }
#shopScreen .shopItem.owned::before { content: none; }
#shopScreen .shopItem.owned { border-bottom: 3px solid #3ca87f; }
#shopScreen #shopPreviewStage { top: 12px; height: 132px; }
#shopScreen #shopMyStats { top: 155px; grid-template-rows: repeat(2, 28px); font-size: 14px; line-height: 28px; gap: 5px; }
#shopScreen #shopMyStats .avatarSourceIcon { width: 18px; height: 18px; }
#shopScreen #shopMyStats .previewChanged { color: #8de7ff; box-shadow: inset 0 -2px #55c4e4; }
#shopScreen #shopPager.hidden { display: none; }
#shopScreen #shopCatalogFooter { height: 44px; }
#shopScreen #shopPrev,
#shopScreen #shopNext { width: 40px; height: 40px; }

.device-phone #shopScreen #shopCategories,
.device-phone #shopScreen #shopInventoryFilters { top: 0; height: 76px; gap: 6px; }
.device-phone #shopScreen #shopInventoryFilters { top: 12px; }
.device-phone #shopScreen #shopCatalogPanel > .shopPanelHeading { height: 76px; }
.device-phone #shopScreen #shopCategories button,
.device-phone #shopScreen #shopInventoryFilters button { min-width: 72px; height: 72px !important; padding: 0 12px; }
.device-phone #shopScreen #shopCategories .avatarSourceIcon,
.device-phone #shopScreen #shopInventoryFilters .avatarSourceIcon { width: 34px; height: 34px; }
.device-phone #shopScreen #shopItems { top: 95px; bottom: 96px; }
.device-phone #shopScreen .shopItem {
    min-height: 274px;
    padding: 12px;
    gap: 7px;
}
.device-phone #shopScreen .shopItemName { min-height: 48px; font-size: 21px; line-height: 24px; }
.device-phone #shopScreen .shopItemGender { font-size: 17px; line-height: 24px; }
.device-phone #shopScreen .shopItemGender .avatarSourceIcon { width: 22px; height: 22px; }
.device-phone #shopScreen .shopItem canvas { height: 80px; }
.device-phone #shopScreen .shopItemStats { font-size: 20px !important; line-height: 28px !important; gap: 5px 14px; }
.device-phone #shopScreen .shopItemStats .avatarStatChip { line-height: 28px; gap: 6px; }
.device-phone #shopScreen .shopItemStats .avatarSourceIcon { width: 26px; height: 26px; }
.device-phone #shopScreen .shopItemPrices { font-size: 20px; line-height: 28px; }
.device-phone #shopScreen #shopPreviewStage { top: 12px; height: 190px; }
.device-phone #shopScreen #shopPlayerPreview { top: 2px; height: 186px; }
#shopScreen #shopPlayerPreview.importedOutfit { top: 2px; height: calc(100% - 4px); object-fit: contain; }
.device-phone #shopScreen #shopMyStats { top: 215px; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(4,42px); gap: 6px; font-size: 22px; line-height: 42px; }
.device-phone #shopScreen #shopMyStats .avatarSourceIcon { width: 28px; height: 28px; }
.device-phone #shopScreen #shopEquippedSummary { top: 415px; grid-template-columns: 1fr; }
.device-phone #shopScreen #shopEquippedSummary .avatarSourceIcon { width: 20px; height: 20px; }
.device-phone #shopScreen #shopEquippedSummary strong { font-size: 18px; }
.device-phone #shopScreen #shopEquippedSummary span { font-size: 14px; }
.device-phone #shopScreen #shopOwnedPanel #shopInventory { top: 96px; }
.device-phone #shopScreen .shopInventoryItem { height: 106px; flex-basis: 106px; padding-left: 80px; padding-right: 107px; }
.device-phone #shopScreen .shopInventoryItem > span { font-size: 18px; line-height: 21px; white-space: normal; margin-top: 14px; max-height: 44px; overflow: hidden; }
.device-phone #shopScreen .shopInventoryItem small { font-size: 16px; margin-top: 5px; }
.device-phone #shopScreen .shopInventoryEquip { top: 17px; min-width: 94px; height: 72px; font-size: 17px; padding: 0 5px; }
.device-phone #shopScreen #shopCatalogFooter { height: 72px; gap: 8px; }
.device-phone #shopScreen #shopPrev,
.device-phone #shopScreen #shopNext { width: 72px; height: 72px; font-size: 36px; }
.device-phone #shopScreen #shopPages { width: 62px; font-size: 18px; }
.device-phone #shopScreen #shopBuy { min-width: 0; min-height: 72px; font-size: 18px; padding: 8px 14px; }
.device-phone #shopScreen #shopBalances span { font-size: 20px; }
.device-phone #shopScreen #shopExit { min-height: 72px; font-size: 20px; }

/* Build 67: one sort per list, with source stat icons and existing shop colors. */
#shopScreen #shopCategories,
#shopScreen #shopInventoryFilters { overflow: visible; align-items: center; }
#shopScreen .shopTypeScroll {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
#shopScreen .shopTypeScroll::-webkit-scrollbar { display: none; }
#shopScreen .shopSortActions { display: flex; flex: 0 0 auto; gap: 6px; }
#shopScreen #shopCategories .shopSortButton,
#shopScreen #shopInventoryFilters .shopSortButton {
    position: relative;
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
}
#shopScreen .shopSortBadge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #102639;
    font-size: 12px;
}
#shopScreen #shopCategories .shopSortBadge .avatarSourceIcon,
#shopScreen #shopInventoryFilters .shopSortBadge .avatarSourceIcon { width: 13px; height: 13px; }
#shopItems[aria-busy="true"] { opacity: .55; pointer-events: none; }
#shopSortDialog {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    color: var(--shop-text);
}
#shopSortDialog .dialogShade { position: absolute; inset: 0; background: rgba(0, 8, 17, .76); }
#shopSortPanel {
    position: relative;
    width: min(460px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--shop-line);
    border-radius: 16px;
    background: #11273b;
}
#shopSortPanel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
#shopSortTitle { margin: 0; font-size: 22px; font-weight: 750; }
#shopSortClose {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--shop-line);
    border-radius: 9px;
    background: rgba(5, 16, 29, .52);
    color: var(--shop-text);
    font-size: 30px;
}
#shopSortOptions {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.shopSortOption {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--shop-line);
    border-radius: 9px;
    background: rgba(5, 16, 29, .52);
    color: var(--shop-text);
    font-size: 16px;
    font-weight: 650;
    text-align: left;
    touch-action: pan-y;
}
.shopSortOption.clear { grid-column: 1 / -1; }
.shopSortOption.gold, #shopScreen .shopSortBadge.gold { color: #ffd968; }
.shopSortOption.cash, #shopScreen .shopSortBadge.cash { color: #65c4ff; }
#shopScreen .shopSortOption .avatarSourceIcon { flex: 0 0 23px; width: 23px; height: 23px; }
.shopSortOption[aria-pressed="true"] { border-color: #55c4e4; background: #16465f; }
.shopSortOption[aria-pressed="true"]::after { content: "✓"; margin-left: auto; }
.shopSortOption:active, #shopSortClose:active { background: #245470; }
#shopSortDialog button:focus-visible { outline: 2px solid #8de7ff; outline-offset: -3px; }
.device-phone #shopSortPanel { width: min(760px, calc(100% - 32px)); gap: 8px; padding: 12px; }
.device-phone #shopSortOptions { gap: 6px; }
.device-phone #shopSortTitle { font-size: 30px; }
.device-phone #shopSortClose { flex-basis: 72px; width: 72px; height: 72px; font-size: 40px; }
.device-phone .shopSortOption { min-height: 72px; font-size: 26px; padding: 10px 16px; gap: 14px; }
.device-phone #shopScreen .shopSortOption .avatarSourceIcon { flex-basis: 32px; width: 32px; height: 32px; }
.device-phone #shopScreen #shopCategories .shopSortButton,
.device-phone #shopScreen #shopInventoryFilters .shopSortButton { font-size: 44px; }
.device-phone #shopScreen .shopSortBadge { width: 25px; height: 25px; right: 3px; bottom: 3px; font-size: 20px; }
.device-phone #shopScreen #shopCategories .shopSortBadge .avatarSourceIcon,
.device-phone #shopScreen #shopInventoryFilters .shopSortBadge .avatarSourceIcon { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
    :is(#channelScreen,#socialScreen) *,
    :is(#channelScreen,#socialScreen) *::before,
    :is(#channelScreen,#socialScreen) *::after {
        scroll-behavior: auto !important;
    }
}