:root {
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-bg-safe: clamp(80%, var(--bg-light, 90%), 94%);
    --ui-shadow-soft: 0 10px 28px rgba(42, 18, 32, 0.09);
    --ui-shadow-press: 0 5px 14px rgba(42, 18, 32, 0.10);
    --ui-line: color-mix(in srgb, var(--border, var(--bd, rgba(0,0,0,.12))) 82%, transparent);
    --ui-surface: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 92%, var(--accent, var(--ac, #d75b94)) 8%);
    --ui-surface-soft: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 68%, var(--accent, var(--ac, #d75b94)) 32%);
    --ui-accent-soft: color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 26%, var(--bg-secondary, var(--bg2, #fff)));
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f7f9;
    --bg-secondary: #ffffff;
    --bg2: #ffffff;
    --text: #17171b;
    --tx: #17171b;
    --text-secondary: #707078;
    --tx2: #707078;
    --accent: hsl(var(--hue, 335), 62%, 54%);
    --ac: hsl(var(--hue, 335), 62%, 54%);
    --accent-hover: hsl(var(--hue, 335), 64%, 47%);
    --acH: hsl(var(--hue, 335), 64%, 47%);
    --border: rgba(20, 20, 28, .09);
    --bd: rgba(20, 20, 28, .09);
    --btn-hover: rgba(20, 20, 28, .045);
    --bh: rgba(20, 20, 28, .045);
    --card-shadow: 0 10px 28px rgba(18, 18, 28, .075);
    --sh: 0 10px 28px rgba(18, 18, 28, .075);
    --ui-shadow-soft: 0 10px 28px rgba(18, 18, 28, .075);
    --ui-shadow-press: 0 5px 14px rgba(18, 18, 28, .09);
    --ui-line: rgba(20, 20, 28, .085);
    --ui-surface: #ffffff;
    --ui-surface-soft: #fafafd;
    --ui-accent-soft: color-mix(in srgb, var(--accent) 13%, #ffffff);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #000000;
    --bg-secondary: #0b0b0d;
    --bg2: #0b0b0d;
    --text: #f4f4f6;
    --tx: #f4f4f6;
    --text-secondary: #9999a2;
    --tx2: #9999a2;
    --accent: hsl(var(--hue, 335), 72%, 64%);
    --ac: hsl(var(--hue, 335), 72%, 64%);
    --accent-hover: hsl(var(--hue, 335), 74%, 70%);
    --acH: hsl(var(--hue, 335), 74%, 70%);
    --border: rgba(255, 255, 255, .105);
    --bd: rgba(255, 255, 255, .105);
    --btn-hover: rgba(255, 255, 255, .07);
    --bh: rgba(255, 255, 255, .07);
    --card-shadow: 0 14px 34px rgba(0, 0, 0, .62);
    --sh: 0 14px 34px rgba(0, 0, 0, .62);
    --ui-shadow-soft: 0 14px 34px rgba(0, 0, 0, .62);
    --ui-shadow-press: 0 7px 18px rgba(0, 0, 0, .72);
    --ui-line: rgba(255, 255, 255, .105);
    --ui-surface: #0b0b0d;
    --ui-surface-soft: #121216;
    --ui-accent-soft: color-mix(in srgb, var(--accent) 19%, #0b0b0d);
}

html {
    background: var(--bg);
}

body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 11%, transparent) 0%, transparent 230px),
        var(--bg) !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body[data-theme="light"] {
    background: radial-gradient(circle at 50% -60px, color-mix(in srgb, var(--accent) 5%, transparent), transparent 260px), #f7f7f9 !important;
}

body[data-theme="dark"] {
    background: radial-gradient(circle at 50% -80px, color-mix(in srgb, var(--accent) 6%, transparent), transparent 280px), #000000 !important;
}

.header,
.hdr {
    min-height: 62px;
    border-bottom: 1px solid var(--ui-line);
    background: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 88%, transparent) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.055) !important;
}

.header-title,
.hdr-t {
    letter-spacing: 0;
    line-height: 1.15;
}

.content,
.main,
.page {
    width: 100%;
}

.content,
.main {
    padding-top: 18px !important;
}

.page-title,
.pg-t {
    line-height: 1.15;
    letter-spacing: 0;
}

.page-desc,
.pg-s,
.menu-desc,
.active-opp,
.invite-from,
.modal-desc,
.wish-hint,
.notif-text {
    line-height: 1.45;
}

.menu-list,
.menu-grid,
.gm-l,
.shop-list,
.notif-list,
.test-list {
    gap: 12px !important;
}

.menu-card,
.gm-c,
.shop-card,
.notif-card,
.profile-header,
.stat-card,
.order-card,
.test-card,
.trick-card,
.active-card,
.invite-card,
.game-info,
.game-chat,
.gallery-card,
.gal-card,
.question-card,
.result-card {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.menu-card,
.gm-c,
.test-card,
.trick-card,
.shop-card,
.notif-card,
.active-card,
.invite-card {
    position: relative;
    overflow: hidden;
}

.menu-card,
.gm-c {
    min-height: 78px;
    padding: 16px 17px !important;
}

.menu-card:active,
.gm-c:active,
.shop-card:active,
.test-card:active,
.trick-card:active,
.active-card:active {
    transform: scale(.985) !important;
    box-shadow: var(--ui-shadow-press) !important;
}

.menu-icon,
.gm-i {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--ui-accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 16%, transparent);
    font-size: 24px !important;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: -0.08em;
    text-align: center;
}

.menu-info,
.menu-label,
.gm-n {
    min-width: 0;
}

.menu-name,
.menu-label,
.gm-n {
    line-height: 1.2;
}

.menu-desc {
    margin-top: 3px;
}

.header-btn,
.burger-btn,
.account-btn,
.bell-btn,
.hdr-b,
.back-btn,
.back-link,
.bkLink,
.btnBk,
.theme-btn,
.th-b,
.tab,
.emoji-quick {
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.header-btn,
.burger-btn,
.bell-btn,
.hdr-b {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 75%, transparent) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .045);
}

.header-btn:active,
.burger-btn:active,
.bell-btn:active,
.hdr-b:active,
.back-link:active,
.bkLink:active {
    transform: scale(.96);
}

.btn-primary,
.btn-secondary,
.btn-alarm,
.btn-cancel-alarm,
.read-all-btn,
.suggest-btn,
.buy-btn,
.modal-btn,
.action-btn,
.admin-btn,
.edit-btn,
.prev-btn,
.answer-btn,
.action-btn,
.btnP,
.btnS,
.btnD,
.bt-b,
.chB,
.size-btn,
.chat-send-btn {
    min-height: 46px;
    border-radius: var(--ui-radius-md) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn-primary,
.read-all-btn,
.suggest-btn,
.buy-btn,
.modal-btn.confirm,
.action-btn.primary,
.edit-btn.save,
.btnP,
.chat-send-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 88%, white), var(--accent-hover, var(--acH, #c84b85))) !important;
    color: white !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.btn-secondary,
.modal-btn.cancel,
.action-btn.secondary,
.edit-btn.cancel,
.btnS,
.bt-b,
.chB {
    background: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 78%, transparent) !important;
    border-color: var(--ui-line) !important;
}

.theme-btn,
.th-b {
    background: color-mix(in srgb, var(--bg-secondary, var(--bg2, #fff)) 78%, transparent) !important;
    border-color: var(--ui-line) !important;
}

.theme-btn.active,
.th-b.on {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 88%, white), var(--accent-hover, var(--acH, #c84b85))) !important;
    border-color: color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 72%, var(--ui-line)) !important;
    color: white !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-alarm:active,
.btn-cancel-alarm:active,
.read-all-btn:active,
.suggest-btn:active,
.buy-btn:active,
.modal-btn:active,
.action-btn:active,
.admin-btn:active,
.edit-btn:active,
.prev-btn:active,
.answer-btn:active,
.btnP:active,
.btnS:active,
.btnD:active,
.bt-b:active,
.chB:active,
.size-btn:active,
.chat-send-btn:active {
    transform: scale(.975) !important;
    filter: brightness(.98);
}

.sidebar,
.side {
    border-left: 1px solid var(--ui-line);
    background: var(--ui-surface) !important;
    box-shadow: -14px 0 34px rgba(0,0,0,.12) !important;
}

.sidebar-header,
.side-h {
    line-height: 1.15;
}

.sidebar-item,
.side-i {
    border-radius: var(--ui-radius-md) !important;
}

.sidebar-item:active,
.side-i:active {
    transform: scale(.985);
}

.modal,
.edit-modal-box,
.price-modal-box,
.confirm-box,
.result-box,
.gArea {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.18) !important;
}

.modal-overlay,
.edit-modal,
.price-modal,
.result-overlay,
.confirm-overlay {
    backdrop-filter: blur(8px);
}

input,
textarea,
.chat-input,
.modal-input,
.edit-input,
.price-input,
.wish-area,
.alarm-area,
.text-area,
.text-input,
.emoji-input,
.word-input {
    border-radius: var(--ui-radius-md) !important;
    border-color: var(--ui-line) !important;
    background: color-mix(in srgb, var(--bg, #f7e9f0) 88%, var(--bg-secondary, var(--bg2, #fff)) 12%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

input:focus,
textarea:focus,
.chat-input:focus,
.modal-input:focus,
.edit-input:focus,
.price-input:focus,
.wish-area:focus,
.alarm-area:focus,
.text-area:focus,
.text-input:focus,
.emoji-input:focus,
.word-input:focus {
    border-color: color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 72%, var(--ui-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 13%, transparent) !important;
}

.balance-badge,
.bal-b,
.bell-badge,
.badge,
.turn-badge {
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 16%, transparent);
}

.toast,
.toastMsg {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
}

.game-board {
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.cell,
.bb-cell,
.bb-piece,
.solo-memory-card,
.memory-card {
    border-radius: var(--ui-radius-sm) !important;
}

.arcade-panel {
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.arcade-title {
    letter-spacing: 0;
}

.player-chip,
.secret-status,
.turn-indicator {
    border-radius: var(--ui-radius-md) !important;
}

.shop-price,
.order-price,
.record-value,
.result-reward,
.stat-value,
.handT,
.hiNum,
.crNum {
    color: var(--accent, var(--ac, #d75b94)) !important;
}

.notif-card.unread {
    border-left-color: var(--accent, var(--ac, #d75b94)) !important;
    background: linear-gradient(90deg, var(--ui-accent-soft), var(--ui-surface) 28%) !important;
}

.notif-card.read {
    opacity: .72 !important;
}

.gallery-list,
.shop-list,
.notif-list {
    padding-bottom: 20px;
}

.gal-card img,
.gallery-card img {
    border-radius: var(--ui-radius-md);
}

.theme-btn.active,
.th-b.on,
.tab.active,
.size-btn.active {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 20%, transparent);
}

@media (hover: hover) {
    .menu-card:hover,
    .gm-c:hover,
    .shop-card:hover,
    .test-card:hover,
    .trick-card:hover,
    .active-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent, var(--ac, #d75b94)) 28%, var(--ui-line)) !important;
    }

    .btn-primary:hover,
    .btnP:hover,
    .suggest-btn:hover,
    .buy-btn:hover,
    .read-all-btn:hover {
        filter: brightness(1.03);
    }
}

@media (max-width: 380px) {
    .menu-card,
    .gm-c {
        padding: 14px !important;
        gap: 12px !important;
    }

    .menu-icon,
    .gm-i {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}