:root {
    color-scheme: only light;
    --br-950: #261711;
    --br-900: #342119;
    --br-800: #4a2d21;
    --br-700: #65402d;
    --br-600: #82583d;
    --br-500: #a66f49;
    --br-400: #c28a5d;
    --br-300: #ddb58d;
    --br-200: #ead2b8;
    --br-100: #f3e4d2;
    --br-50: #fbf5ec;
    --cream: #fffaf3;
    --copper: #c45f36;
    --copper-dark: #984323;
    --mint: #65b99d;
    --ink: #2d211b;
    --muted: #78675d;
    --line: rgba(74, 45, 33, .20);
    --shadow: 0 14px 36px rgba(45, 27, 19, .16);
    --shadow-soft: 0 7px 18px rgba(45, 27, 19, .12);
}

.app-exit-btn {
    position: fixed !important; top: max(12px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important; left: auto !important;
    z-index: 12000 !important; width: 42px !important; height: 42px !important;
    display: grid !important; place-items: center !important; padding: 0 !important;
    border: 2px solid rgba(92, 49, 29, .35) !important; border-radius: 50% !important;
    background: linear-gradient(145deg, #fff8ed, #dfc5a9) !important; color: #613d29 !important;
    box-shadow: 0 5px 0 rgba(88, 50, 30, .22), 0 8px 18px rgba(45, 26, 17, .22) !important;
    font: 900 28px/1 Arial, sans-serif !important; text-decoration: none !important;
    cursor: pointer !important; transform: none !important;
}
.app-exit-btn:hover { filter: brightness(1.05); transform: none !important; }
.app-exit-btn:active { transform: translateY(2px) !important; box-shadow: 0 2px 0 rgba(88, 50, 30, .22) !important; }
.overlay-panel .app-exit-btn { display: none !important; }
.lobby-panel-shell > .app-exit-btn { display: grid !important; }
.roomlist-top { grid-template-columns: minmax(0, 1fr) !important; }
.create-room-top, .setting-header { grid-template-columns: minmax(0, 1fr) !important; }
.ranking-header { grid-template-columns: minmax(0, 1fr) auto !important; }
.mobile-room-page .room-top-bar { grid-template-columns: minmax(0, 1fr) auto !important; }
.shop-top { grid-template-columns: minmax(0, 1fr) auto auto !important; }
.ranking-header .ranking-head-text { padding-left: 0 !important; text-align: left !important; align-items: flex-start !important; }
.inventory-top .inventory-actions { margin-right: 52px !important; }
.shop-top .top-btn.inv { margin-right: 52px !important; }

/* Lobby: slightly deeper brown/cream tone */
body .mobile-land-lobby {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.34), transparent 27%),
        linear-gradient(145deg, #e8d5bc 0%, #d7b996 56%, #cba77d 100%) !important;
}

.mobile-land-lobby .lobby-top {
    background: linear-gradient(105deg, #2a1913, #573522) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 28px rgba(38,23,17,.28) !important;
}

.mobile-land-lobby .lobby-side-card,
.mobile-land-lobby .lobby-menu-card {
    background: linear-gradient(155deg, #f1e1cd, #dfc5a6) !important;
    border-color: rgba(74,45,33,.30) !important;
    box-shadow: 0 9px 22px rgba(45,27,19,.18) !important;
}

.mobile-land-lobby .mini-stat,
.mobile-land-lobby .ability-row,
.mobile-land-lobby .lobby-menu-grid button {
    background: #d9c0a3 !important;
    border-color: rgba(74,45,33,.27) !important;
}

.mobile-land-lobby .lobby-logo-ball {
    background: #d8bea0 !important;
    border-color: rgba(74,45,33,.32) !important;
}

html,
body {
    background: #efe1cf !important;
    color: var(--ink) !important;
}

body,
button,
input,
select,
textarea {
    font-family: "Pretendard", "Segoe UI", "맑은 고딕", sans-serif !important;
}

.game-bg,
.mobile-land-lobby,
.mobile-land-roomlist,
.mobile-land-create-room,
.mobile-room-page,
.shop-page,
.inventory-page,
.ranking-page,
.setting-page,
.ui-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.66), transparent 27%),
        linear-gradient(145deg, #f8efe3 0%, #ead6bd 55%, #dfc19e 100%) !important;
    color: var(--ink) !important;
}

.main-shell {
    background: transparent !important;
}

/* Cards and elevated surfaces */
.lobby-side-card,
.lobby-menu-card,
.room-mobile-card,
.empty-room-card,
.create-form-card,
.create-preview-card,
.room-top-bar,
.room-player-card,
.room-action-panel,
.shop-card,
.inventory-item,
.king-card,
.podium-card,
.rank-row,
.my-ranking-bar,
.setting-card,
.setting-option,
.ui-card {
    background: linear-gradient(155deg, rgba(255,250,243,.98), rgba(245,231,214,.96)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--ink) !important;
}

.create-form-card,
.create-preview-card,
.setting-card {
    border-radius: 22px !important;
}

.lobby-menu-card,
.room-mobile-card,
.shop-card,
.inventory-item,
.rank-row,
.setting-option {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.lobby-menu-card:hover,
.room-mobile-card:hover,
.shop-card:hover,
.inventory-item:hover,
.rank-row:hover {
    transform: translateY(-2px);
    border-color: rgba(130, 88, 61, .42) !important;
    box-shadow: var(--shadow) !important;
}

/* Headers */
.lobby-top,
.roomlist-top,
.create-room-top,
.shop-top,
.inventory-top,
.ranking-header,
.setting-header {
    background: linear-gradient(105deg, var(--br-900), var(--br-700)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: var(--shadow) !important;
    color: var(--cream) !important;
}

.lobby-logo,
.roomlist-title,
.create-title,
.shop-title,
.inventory-title,
.ranking-title,
.setting-title,
.room-title {
    color: inherit !important;
    letter-spacing: -.02em;
}

.roomlist-sub,
.create-sub,
.inventory-sub,
.ranking-sub,
.hero-subtitle,
.brand-desc,
.item-desc,
.room-card-meta {
    color: var(--muted) !important;
}

.lobby-top .lobby-nick,
.lobby-top .lobby-id,
.lobby-top .lobby-money,
.roomlist-top .roomlist-sub,
.shop-top .shop-money,
.inventory-top .inventory-sub,
.ranking-header .ranking-sub {
    color: var(--br-100) !important;
}

/* Inputs */
.login-input,
.register-field input,
.create-input,
.ui-input,
.setting-option select,
input,
select,
textarea {
    background: rgba(255,250,243,.94) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(101,64,45,.35) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(52,33,25,.06) !important;
}

input:focus,
select:focus,
textarea:focus,
.login-input:focus,
.create-input:focus,
.ui-input:focus {
    border-color: var(--br-500) !important;
    box-shadow: 0 0 0 3px rgba(166,111,73,.18) !important;
    outline: none !important;
}

/* Primary actions */
.login-main-btn,
.register-main-btn,
.create-submit-btn,
.room-create-btn,
.room-join-btn,
.buy-btn,
.equip-btn,
.setting-save-btn,
.start-btn,
.side-shot-btn,
.ui-btn-primary {
    background: linear-gradient(135deg, var(--copper), #d78252) !important;
    border: 1px solid rgba(91,42,23,.28) !important;
    color: #fffaf4 !important;
    box-shadow: 0 6px 14px rgba(152,67,35,.24) !important;
}

.login-main-btn:hover,
.register-main-btn:hover,
.create-submit-btn:hover,
.room-create-btn:hover,
.room-join-btn:hover,
.buy-btn:hover,
.equip-btn:hover,
.setting-save-btn:hover,
.start-btn:hover,
.side-shot-btn:hover {
    background: linear-gradient(135deg, var(--copper-dark), var(--copper)) !important;
    transform: translateY(-1px);
}

/* Keep the fixed, centered button anchored in every interaction state. */
.setting-save-btn,
.setting-save-btn:hover,
.setting-save-btn:active {
    transform: translateX(-50%) !important;
}

.top-btn,
.ui-back-btn,
.room-back-btn,
.create-back-btn,
.ranking-back-btn,
.setting-back,
.room-back-link,
.mobile-leave,
.leave-btn,
.unequip-btn,
.register-sub-btn {
    background: rgba(74,45,33,.10) !important;
    border: 1px solid rgba(74,45,33,.20) !important;
    color: var(--br-800) !important;
    box-shadow: none !important;
}

.room-join-btn:disabled,
.start-btn:disabled,
button:disabled {
    background: #cbb9a7 !important;
    color: #786a60 !important;
    box-shadow: none !important;
}

/* Tabs and badges */
.shop-tabs,
.inventory-tabs,
.ranking-tabs {
    background: rgba(74,45,33,.08) !important;
    border: 1px solid var(--line) !important;
}

.shop-tabs button,
.inventory-tabs button,
.ranking-tab,
.stat-chip,
.room-badge,
.ranking-season-badge,
.equipped-badge,
.hero-badge {
    color: var(--br-700) !important;
}

.shop-tabs .active,
.inventory-tabs .active,
.ranking-tab.active,
.player-state.ready,
.equipped-badge {
    background: var(--br-700) !important;
    color: var(--cream) !important;
    border-color: var(--br-700) !important;
}

.coin,
.item-price,
.rank-money,
.king-money,
.podium-money,
.lobby-money,
.shop-money {
    color: #a45a27 !important;
}

/* Waiting room */
.mobile-room-page .room-top-bar {
    position: relative !important;
    background: linear-gradient(105deg, var(--br-900), var(--br-700)) !important;
    color: var(--cream) !important;
}

.room-player-card.host {
    border-color: rgba(196,95,54,.55) !important;
}

.room-player-card.guest {
    border-color: rgba(101,185,157,.55) !important;
}

.player-label,
.room-vs-sub,
.hud-label,
.power-label,
.spin-title {
    color: var(--br-500) !important;
}

.room-vs {
    color: var(--copper) !important;
}

/* Ranking */
.king-card,
.podium-card {
    background: linear-gradient(145deg, #fff7e8, #e9cfaa) !important;
}

.rank-row.mine,
.my-ranking-bar {
    border-color: var(--copper) !important;
    background: linear-gradient(145deg, #fff2e8, #f1d1bc) !important;
}

/* Game */
body.game-body,
body.game-body .game-page {
    background:
        radial-gradient(circle at 50% -20%, rgba(221,181,141,.32), transparent 42%),
        linear-gradient(145deg, var(--br-950), var(--br-800)) !important;
    color: var(--cream) !important;
}

body.game-body .mobile-hud,
body.game-body .fixed-spin-panel,
body.game-body .left-ui-panel,
body.game-body .right-ui-panel,
body.game-body .fine-aim-row {
    background: linear-gradient(145deg, rgba(255,250,243,.98), rgba(235,213,188,.96)) !important;
    border: 1px solid rgba(221,181,141,.45) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--ink) !important;
}

body.game-body .hud-center {
    background: var(--br-800) !important;
    border-color: var(--br-600) !important;
}

body.game-body .hud-target,
body.game-body .hud-turn {
    color: var(--br-100) !important;
}

body.game-body .hud-score {
    color: var(--copper) !important;
}

body.game-body .canvas-stage,
body.game-body #gameCanvas {
    background: transparent !important;
}

body.game-body .skill-circle-btn,
body.game-body .fine-aim-btn,
body.game-body .util-icon-btn {
    background: linear-gradient(145deg, #fffaf3, #e8cfb2) !important;
    border: 1px solid rgba(101,64,45,.28) !important;
    color: var(--br-800) !important;
}

body.game-body .skill-circle-btn.active,
body.game-body .masse-btn.active {
    background: linear-gradient(135deg, var(--copper), #d78252) !important;
    color: white !important;
}

body.game-body .power-cell.on {
    background: linear-gradient(180deg, #f2b36f, var(--copper)) !important;
}

.score-flash,
.match-found {
    color: #f5bd78 !important;
    text-shadow: 0 3px 14px rgba(38,23,17,.55) !important;
}

/* Consistent typography */
.room-card-title,
.item-name,
.rank-nick,
.king-name,
.podium-name,
.player-name,
.hud-name {
    color: var(--ink) !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    .lobby-menu-card,
    .room-mobile-card,
    .shop-card,
    .inventory-item,
    .setting-card {
        box-shadow: 0 5px 14px rgba(45,27,19,.13) !important;
    }
}

/* Back navigation: inventory-style high-contrast coral button */
.ui-back-btn,
.room-back-btn,
.create-back-btn,
.ranking-back-btn,
.setting-back,
.room-back-link {
    min-width: 42px !important;
    width: 42px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f36f5f, #c9543f) !important;
    border: 1px solid rgba(119, 45, 31, .42) !important;
    color: #ffffff !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(75, 27, 17, .30) !important;
    box-shadow: 0 4px 0 rgba(119,45,31,.30), 0 7px 14px rgba(74,45,33,.18) !important;
}

.ui-back-btn:hover,
.room-back-btn:hover,
.create-back-btn:hover,
.ranking-back-btn:hover,
.setting-back:hover,
.room-back-link:hover {
    background: linear-gradient(135deg, #ff806e, #d75b45) !important;
    transform: translateY(-1px) !important;
}

.ui-back-btn:active,
.room-back-btn:active,
.create-back-btn:active,
.ranking-back-btn:active,
.setting-back:active,
.room-back-link:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(119,45,31,.30) !important;
}

/* Text contrast */
.lobby-menu-card,
.lobby-side-card,
.room-mobile-card,
.create-form-card,
.create-preview-card,
.room-player-card,
.room-action-panel,
.shop-card,
.inventory-item,
.rank-row,
.podium-card,
.king-card,
.setting-card,
.setting-option {
    --local-text: #2b1c16;
    --local-muted: #65554b;
}

.lobby-menu-card,
.lobby-side-card,
.room-card-title,
.create-label,
.item-name,
.item-type,
.item-stat,
.rank-nick,
.rank-record,
.king-name,
.king-record,
.podium-name,
.podium-card,
.setting-section-title,
.option-title,
.player-name {
    color: var(--local-text, var(--ink)) !important;
}

.room-card-meta,
.item-desc,
.item-stats,
.option-desc,
.register-sub,
.room-sub-info,
.player-state.wait,
.empty-sub,
.future-row,
.my-right,
.grade-line {
    color: var(--local-muted, #65554b) !important;
    opacity: 1 !important;
}

.lobby-top,
.roomlist-top,
.create-room-top,
.shop-top,
.inventory-top,
.ranking-header,
.setting-header,
.mobile-room-page .room-top-bar {
    --local-text: #fffaf3;
    --local-muted: #ead2b8;
}

.lobby-top *,
.roomlist-top *,
.create-room-top *,
.shop-top *,
.inventory-top *,
.ranking-header *,
.setting-header *,
.mobile-room-page .room-top-bar * {
    color: inherit;
}

.lobby-top,
.roomlist-top,
.create-room-top,
.shop-top,
.inventory-top,
.ranking-header,
.setting-header,
.mobile-room-page .room-top-bar {
    color: var(--local-text) !important;
}

.lobby-top .lobby-id,
.lobby-top .lobby-money,
.roomlist-top .roomlist-sub,
.create-room-top .create-sub,
.shop-top .shop-money,
.inventory-top .inventory-sub,
.ranking-header .ranking-sub,
.setting-header .setting-sub,
.mobile-room-page .room-sub-info {
    color: var(--local-muted) !important;
}

::placeholder {
    color: #88786d !important;
    opacity: 1 !important;
}

/* Shop top navigation */
.shop-top .shop-money {
    min-width: 118px !important;
    height: 40px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #fffaf3, #ead2b8) !important;
    border: 1px solid rgba(221,181,141,.58) !important;
    color: #7c3f20 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: 0 4px 0 rgba(38,23,17,.22), 0 7px 14px rgba(38,23,17,.20) !important;
}

.shop-top .shop-money .coin {
    color: #d88935 !important;
    filter: drop-shadow(0 1px 1px rgba(92,48,19,.28));
}

.shop-top .shop-money #moneyText {
    color: #b87508 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 0 9px rgba(245,189,46,.24) !important;
}

.shop-top .shop-money .gold-coin {
    border-color: #9c6205 !important;
    background: #f6bd2d !important;
    color: #724405 !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.58), 0 2px 0 #754708, 0 0 11px rgba(255,198,47,.42) !important;
}

.shop-top .shop-gold-label {
    color: #74512c !important;
}

.shop-top .top-btn {
    min-width: 92px !important;
    height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f36f5f, #c9543f) !important;
    border: 1px solid rgba(119,45,31,.48) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(75,27,17,.30) !important;
    box-shadow: 0 4px 0 rgba(119,45,31,.30), 0 7px 14px rgba(38,23,17,.22) !important;
}

.shop-top .top-btn.inv {
    background: linear-gradient(135deg, #65b99d, #3c8f78) !important;
    border-color: rgba(32,92,76,.55) !important;
    box-shadow: 0 4px 0 rgba(32,92,76,.35), 0 7px 14px rgba(38,23,17,.22) !important;
}

.shop-top .top-btn:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.shop-top .top-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(38,23,17,.28) !important;
}

@media (max-width: 760px) {
    .shop-top .shop-money {
        min-width: 96px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
    }

    .shop-top .top-btn {
        min-width: 78px !important;
        height: 36px !important;
        padding: 0 11px !important;
        font-size: 12px !important;
    }
}

/* Inventory top navigation */
.inventory-top .inventory-actions a {
    min-width: 92px !important;
    height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f36f5f, #c9543f) !important;
    border: 1px solid rgba(119,45,31,.48) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(75,27,17,.30) !important;
    box-shadow: 0 4px 0 rgba(119,45,31,.30), 0 7px 14px rgba(38,23,17,.22) !important;
}

.inventory-top .inventory-actions a[href*="Lobby"] {
    background: linear-gradient(135deg, #65b99d, #3c8f78) !important;
    border-color: rgba(32,92,76,.55) !important;
    box-shadow: 0 4px 0 rgba(32,92,76,.35), 0 7px 14px rgba(38,23,17,.22) !important;
}

.inventory-top .inventory-actions a:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.inventory-top .inventory-actions a:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(38,23,17,.28) !important;
}

@media (max-width: 760px) {
    .inventory-top .inventory-actions a {
        min-width: 78px !important;
        height: 36px !important;
        padding: 0 11px !important;
        font-size: 12px !important;
    }
}

/* Lobby exit */
.mobile-land-lobby .lobby-quit-btn {
    right: 18px !important;
    bottom: 18px !important;
    min-width: 112px !important;
    height: 50px !important;
    padding: 0 17px 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #fffaf3, #ead2b8) !important;
    border: 1px solid rgba(101,64,45,.38) !important;
    color: #482c21 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 5px 0 rgba(74,45,33,.24), 0 10px 22px rgba(38,23,17,.24) !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}

.mobile-land-lobby .lobby-quit-btn span {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #f36f5f, #c9543f) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(75,27,17,.32) !important;
    box-shadow: 0 3px 8px rgba(145,55,37,.30) !important;
}

.mobile-land-lobby .lobby-quit-btn b {
    color: #482c21 !important;
    font-size: 14px !important;
    letter-spacing: .04em !important;
}

.mobile-land-lobby .lobby-quit-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 rgba(74,45,33,.22), 0 13px 25px rgba(38,23,17,.26) !important;
}

.mobile-land-lobby .lobby-quit-btn:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 rgba(74,45,33,.24), 0 5px 10px rgba(38,23,17,.18) !important;
}

@media (orientation: landscape) and (max-height: 430px) {
    .mobile-land-lobby .lobby-quit-btn {
        right: 10px !important;
        bottom: 10px !important;
        min-width: 98px !important;
        height: 44px !important;
        padding: 0 13px 0 7px !important;
        border-radius: 14px !important;
    }

    .mobile-land-lobby .lobby-quit-btn span {
        width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
    }
}

/* Ranking header readability */
.ranking-page .ranking-header {
    min-height: 62px !important;
    height: 62px !important;
    grid-template-columns: 42px minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    border-radius: 18px !important;
}

.ranking-header .ranking-head-text {
    height: 48px !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: rgba(255,250,243,.09) !important;
    border: 1px solid rgba(255,250,243,.16) !important;
    box-shadow: none !important;
}

.ranking-header .ranking-title {
    color: #fffaf3 !important;
    font-size: 25px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-shadow: 0 2px 4px rgba(20,10,6,.34) !important;
}

.ranking-header .ranking-sub {
    margin-top: 5px !important;
    color: #efd8bf !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    opacity: 1 !important;
}

.ranking-header .ranking-season-badge {
    width: 48px !important;
    height: 40px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #f36f5f, #c9543f) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    box-shadow: 0 4px 10px rgba(25,12,7,.28) !important;
}

/* Fixed personal ranking card */
.ranking-page .my-ranking-bar {
    min-height: 68px !important;
    padding: 10px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(120deg, #342119, #65402d) !important;
    border: 2px solid #d98a56 !important;
    color: #fffaf3 !important;
    box-shadow: 0 10px 26px rgba(38,23,17,.34) !important;
}

.my-ranking-bar .my-left,
.my-ranking-bar .my-right {
    min-width: 0 !important;
}

.my-ranking-bar .my-label {
    color: #f4be82 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: .12em !important;
    opacity: 1 !important;
}

.my-ranking-bar .my-main {
    margin-top: 4px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    text-shadow: 0 2px 3px rgba(18,8,4,.32) !important;
}

.my-ranking-bar .my-right {
    min-width: 132px !important;
    text-align: right !important;
    color: #fffaf3 !important;
    opacity: 1 !important;
}

.my-ranking-bar .my-right div {
    color: #ffc08d !important;
    font-size: 19px !important;
    font-weight: 1000 !important;
    font-variant-numeric: tabular-nums !important;
}

.my-ranking-bar .my-right div::before {
    content: "MONEY  ";
    color: #ead2b8;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.my-ranking-bar .my-right span {
    display: block !important;
    margin-top: 4px !important;
    color: #f4e5d5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

@media (orientation: landscape) and (max-height: 520px) {
    .ranking-page .ranking-header {
        min-height: 52px !important;
        height: 52px !important;
        grid-template-columns: 38px minmax(0, 1fr) 44px !important;
        padding: 4px 8px !important;
    }

    .ranking-header .ranking-head-text {
        height: 42px !important;
    }

    .ranking-header .ranking-title {
        font-size: 21px !important;
    }

    .ranking-header .ranking-sub {
        font-size: 10px !important;
    }

    .ranking-header .ranking-season-badge {
        width: 42px !important;
        height: 36px !important;
    }

    .ranking-page .my-ranking-bar {
        min-height: 58px !important;
        padding: 8px 13px !important;
    }

    .my-ranking-bar .my-main {
        font-size: 15px !important;
    }

    .my-ranking-bar .my-right div {
        font-size: 16px !important;
    }
}

/* Waiting room header */
.mobile-room-page {
    grid-template-rows: 68px minmax(0, 1fr) 58px !important;
}

.mobile-room-page .room-top-bar {
    min-height: 68px !important;
    height: 68px !important;
    grid-template-columns: 42px minmax(0, 1fr) 112px !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 19px !important;
    background: linear-gradient(110deg, #342119, #65402d) !important;
    border: 1px solid rgba(255,250,243,.16) !important;
    box-shadow: 0 10px 24px rgba(38,23,17,.25) !important;
}

.mobile-room-page .room-title-wrap {
    min-width: 0 !important;
    height: 50px !important;
    padding: 6px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(90px, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #fffaf3, #ecd8bf) !important;
    border: 1px solid rgba(221,181,141,.58) !important;
    color: #2b1c16 !important;
    box-shadow: 0 4px 10px rgba(24,12,7,.20) !important;
}

.mobile-room-page .room-title-wrap .room-title {
    color: #2b1c16 !important;
    display: block !important;
    min-width: 0 !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
}

.mobile-room-page .room-title-wrap .room-sub-info {
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    color: #6b4b39 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.mobile-room-page .room-title-wrap #playerCount {
    color: #a44c29 !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.mobile-room-page .room-status {
    width: 112px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #65b99d, #3c8f78) !important;
    border: 1px solid rgba(25,78,64,.58) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(14,53,43,.35) !important;
    box-shadow: 0 4px 0 rgba(25,78,64,.36), 0 7px 13px rgba(19,9,5,.22) !important;
}

@media (orientation: landscape) and (max-height: 430px) {
    .mobile-room-page {
        grid-template-rows: 54px minmax(0, 1fr) 50px !important;
    }

    .mobile-room-page .room-top-bar {
        min-height: 54px !important;
        height: 54px !important;
        grid-template-columns: 38px minmax(0, 1fr) 94px !important;
        padding: 5px 7px !important;
        border-radius: 16px !important;
    }

    .mobile-room-page .room-title-wrap {
        height: 44px !important;
        padding: 5px 11px !important;
        border-radius: 12px !important;
        grid-template-columns: minmax(70px, 1fr) auto !important;
        gap: 4px !important;
    }

    .mobile-room-page .room-title-wrap .room-title {
        font-size: 15px !important;
    }

    .mobile-room-page .room-title-wrap .room-sub-info {
        margin-top: 0 !important;
        font-size: 8px !important;
    }

    .mobile-room-page .room-status {
        width: 94px !important;
        height: 44px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }
}

/* Refined lobby surfaces and live presence */
body .mobile-land-lobby {
    background:
        radial-gradient(circle at 18% 10%, rgba(255,247,235,.30), transparent 30%),
        radial-gradient(circle at 82% 88%, rgba(87,53,34,.18), transparent 32%),
        linear-gradient(145deg, #e4cfb4 0%, #d2b18c 56%, #bf956c 100%) !important;
}

.mobile-land-lobby .lobby-top {
    background: linear-gradient(110deg, #24150f, #573521 68%, #70472d) !important;
    border: 1px solid rgba(255,244,230,.14) !important;
    box-shadow: 0 10px 0 rgba(62,37,24,.15), 0 16px 32px rgba(38,23,17,.28) !important;
}

.mobile-land-lobby .lobby-user,
.mobile-land-lobby .lobby-online,
.mobile-land-lobby .lobby-money,
.mobile-land-lobby .lobby-setting {
    background: rgba(255,250,243,.08) !important;
    border: 1px solid rgba(255,250,243,.15) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.mobile-land-lobby .lobby-top-quit {
    background: linear-gradient(180deg, #8d3933 0%, #662824 100%) !important;
    border-color: rgba(255,116,103,.72) !important;
    color: #fff4ef !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 7px 16px rgba(47,12,10,.26) !important;
}

.mobile-land-lobby .lobby-top-quit:hover {
    background: linear-gradient(180deg, #a7443c 0%, #742d28 100%) !important;
}

/* Waiting-room tier frames must override the generic brown card skin. */
.mobile-room-page .room-player-card.active[class*="tier-"] {
    border: 7px solid var(--tier-main) !important;
    background: var(--tier-surface) !important;
    color: var(--tier-main) !important;
    box-shadow: 0 0 0 3px var(--tier-ring), 0 12px 28px var(--tier-shadow), inset 0 0 0 2px rgba(255, 255, 255, .82), inset 0 0 30px var(--tier-glow) !important;
}

/* 상단 중앙 장식 완전 제거 */
.mobile-room-page .room-player-card.active[class*="tier-"]::before,
.mobile-room-page .room-player-card.active[class*="tier-"]::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
}

/* 브론즈 */
.mobile-room-page .room-player-card.active.tier-bronze {
    --tier-main: #91451f;
    --tier-ring: #e1a06f;
    --tier-shadow: rgba(103, 50, 25, .42);
    --tier-glow: rgba(176, 85, 39, .16);
    --tier-surface: linear-gradient( 145deg, #fffaf3 0%, #f1d4ba 100% );
}

/* 실버 */
.mobile-room-page .room-player-card.active.tier-silver {
    --tier-main: #5d6c7c;
    --tier-ring: #cbd4dd;
    --tier-shadow: rgba(57, 71, 87, .40);
    --tier-glow: rgba(95, 113, 132, .16);
    --tier-surface: linear-gradient( 145deg, #ffffff 0%, #dce3ea 100% );
}

/* 골드 */
.mobile-room-page .room-player-card.active.tier-gold {
    --tier-main: #b87900;
    --tier-ring: #ffdc58;
    --tier-shadow: rgba(163, 107, 0, .43);
    --tier-glow: rgba(222, 157, 16, .20);
    --tier-surface: linear-gradient( 145deg, #fffdf0 0%, #f5d982 100% );
}

/* 플래티넘 */
.mobile-room-page .room-player-card.active.tier-platinum {
    --tier-main: #087f79;
    --tier-ring: #80ddd6;
    --tier-shadow: rgba(15, 112, 105, .41);
    --tier-glow: rgba(31, 164, 154, .18);
    --tier-surface: linear-gradient( 145deg, #f4fffe 0%, #bce7e3 100% );
}

/* 다이아몬드 */
.mobile-room-page .room-player-card.active.tier-diamond {
    --tier-main: #2864c9;
    --tier-ring: #8db7ff;
    --tier-shadow: rgba(39, 88, 176, .45);
    --tier-glow: rgba(62, 116, 214, .20);
    --tier-surface: linear-gradient( 145deg, #f6fbff 0%, #c9ddff 100% );
}

/* 챌린저 */
.mobile-room-page .room-player-card.active.tier-challenger {
    --tier-main: #7d37c5;
    --tier-ring: #ffd45f;
    --tier-shadow: rgba(76, 24, 126, .50);
    --tier-glow: rgba(145, 61, 211, .24);
    --tier-surface: linear-gradient( 145deg, #fff8ff 0%, #e4cdf8 58%, #f6dba9 100% );
}

/* Waiting room image cards: the supplied tier artwork is the complete card. */
.mobile-room-page .room-player-card.active[class*="tier-"] {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-room-page .room-player-card.active[class*="tier-"]::before,
.mobile-room-page .room-player-card.active[class*="tier-"]::after {
    display: none !important;
}

.mobile-room-page .room-action-panel .leave-btn {
    background: linear-gradient(180deg, #e64c43 0%, #bd2824 100%) !important;
    color: #fff !important;
    border: 2px solid #941b19 !important;
    box-shadow: 0 5px 14px rgba(154, 30, 27, .35) !important;
}

.mobile-room-page .room-action-panel .leave-btn:active {
    background: #a91f1c !important;
}

.mobile-land-lobby .lobby-online b {
    color: #78dfbd !important;
    text-shadow: 0 0 10px rgba(101,214,173,.35) !important;
}

.mobile-land-lobby .lobby-money b {
    color: #ffd35a !important;
    text-shadow: 0 1px 0 #6b3f08, 0 0 10px rgba(255,197,48,.36) !important;
}

/* Final header layout corrections. */
.shop-top .shop-title {
    font-size: 22px !important; font-weight: 1000 !important;
    letter-spacing: 1.4px !important; line-height: 1 !important;
}
.mobile-room-page .room-top-bar {
    grid-template-columns: minmax(0, 1fr) 112px !important;
}
.mobile-room-page .room-title-wrap {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: center !important;
    gap: 3px !important;
}
.mobile-room-page .room-title-wrap .room-title {
    width: 100% !important; min-width: 0 !important;
}
.mobile-room-page .room-title-wrap .room-sub-info {
    width: 100% !important; justify-content: flex-start !important;
}
.mobile-room-page .room-info-chip {
    border-color: rgba(105,66,42,.32) !important;
    background: rgba(255,255,255,.84) !important;
    color: #543725 !important;
    text-shadow: none !important;
}
.mobile-room-page .room-info-chip.target { color:#8b5700 !important; background:#fff0bd !important; }
.mobile-room-page .room-info-chip.people { color:#17684f !important; background:#dff6eb !important; }
@media (orientation: landscape) and (max-height: 430px) {
    .mobile-room-page .room-top-bar { grid-template-columns:minmax(0,1fr) 94px !important; }
    .mobile-room-page .room-title-wrap { gap:2px !important; }
}

/* Waiting-room header: title/settings, status, and close control each own a lane. */
.mobile-room-page .room-top-bar {
    grid-template-columns: minmax(0, 1fr) 112px 46px !important;
    gap: 8px !important;
}
.mobile-room-page .room-title-wrap {
    height: 50px !important;
    padding: 5px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
}
.mobile-room-page .room-title-wrap .room-title {
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}
.mobile-room-page .room-title-wrap .room-sub-info {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    overflow: visible !important;
}
.mobile-room-page .room-info-chip {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
}
.mobile-room-page .room-top-bar > .app-exit-btn {
    position: absolute !important;
    top: 13px !important;
    right: 15px !important;
}
@media (orientation: landscape) and (max-height: 430px) {
    .mobile-room-page .room-top-bar {
        grid-template-columns: minmax(0, 1fr) 94px 40px !important;
        gap: 5px !important;
    }
    .mobile-room-page .room-title-wrap {
        height: 44px !important;
        grid-template-columns: minmax(120px, 1fr) auto !important;
        padding: 4px 9px !important;
        gap: 5px !important;
    }
    .mobile-room-page .room-title-wrap .room-title { font-size: 15px !important; }
    .mobile-room-page .room-info-chip { height: 20px !important; padding: 0 5px !important; font-size: 8px !important; }
    .mobile-room-page .room-top-bar > .app-exit-btn { top: 8px !important; right: 10px !important; width: 36px !important; height: 36px !important; font-size: 24px !important; }
}

.mobile-land-lobby .lobby-gold-label {
    color: #f1ddbd !important;
}

.mobile-land-lobby .gold-coin {
    border-color: #9c6205 !important;
    background: #f6bd2d !important;
    color: #724405 !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.58), 0 2px 0 #754708, 0 0 11px rgba(255,198,47,.42) !important;
}

.mobile-land-lobby .lobby-side-card,
.mobile-land-lobby .lobby-menu-card {
    background: linear-gradient(155deg, rgba(242,225,204,.98), rgba(216,187,153,.97)) !important;
    border: 1px solid rgba(74,45,33,.32) !important;
    box-shadow: 0 8px 0 rgba(93,59,38,.12), 0 16px 30px rgba(45,27,19,.20) !important;
}

.mobile-land-lobby .lobby-menu-grid button {
    background: rgba(255,248,238,.44) !important;
    border: 1px solid rgba(91,55,35,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(74,45,33,.10) !important;
}

.mobile-land-lobby .lobby-menu-grid button:hover {
    transform: translateY(-2px) !important;
    background: rgba(255,250,243,.66) !important;
    border-color: rgba(152,67,35,.48) !important;
    box-shadow: 0 8px 18px rgba(74,45,33,.18) !important;
}

.mobile-land-lobby .mini-stat,
.mobile-land-lobby .ability-row {
    background: rgba(255,248,238,.38) !important;
    border-color: rgba(91,55,35,.22) !important;
}

/* Lobby visual system refresh */
.mobile-land-lobby .lobby-main {
    gap: 14px !important;
}

.mobile-land-lobby .lobby-side-card,
.mobile-land-lobby .lobby-menu-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.mobile-land-lobby .lobby-side-card::before,
.mobile-land-lobby .lobby-menu-card::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: 0 !important;
    height: 3px !important;
    border-radius: 0 0 999px 999px !important;
    background: linear-gradient(90deg, transparent, #b9693f, transparent) !important;
    opacity: .78 !important;
}

.mobile-land-lobby .lobby-side-card h3 {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    background: rgba(74,45,33,.10) !important;
    border: 1px solid rgba(74,45,33,.15) !important;
    color: #3d291f !important;
    letter-spacing: .02em !important;
}

.mobile-land-lobby .mini-stat,
.mobile-land-lobby .ability-row {
    min-height: 40px !important;
    padding-inline: 13px !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.mobile-land-lobby .mini-stat b,
.mobile-land-lobby .ability-row b {
    min-width: 42px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    background: rgba(255,250,243,.45) !important;
    text-align: center !important;
}

.mobile-land-lobby .lobby-menu-grid {
    gap: 11px !important;
}

.mobile-land-lobby .lobby-menu-grid button {
    border-radius: 18px !important;
    padding: 15px 17px !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.mobile-land-lobby .lobby-menu-grid button span {
    right: 12px !important;
    bottom: 9px !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    background: rgba(255,250,243,.50) !important;
    border: 1px solid rgba(74,45,33,.13) !important;
    opacity: .72 !important;
    font-size: 27px !important;
}

.mobile-land-lobby .lobby-menu-grid button b {
    font-size: 19px !important;
    letter-spacing: -.02em !important;
}

.mobile-land-lobby .lobby-menu-grid button small {
    max-width: calc(100% - 44px) !important;
    color: #776252 !important;
}

.mobile-land-lobby .lobby-money {
    min-width: 0 !important;
    padding-inline: 13px !important;
}

.mobile-land-lobby .lobby-money b {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(13px, 1.45vw, 18px) !important;
}