/* ============================================================
   CS2 Case Farm — clicker module (v2 layout)
   ============================================================ */

.clk-root {
    --clk-accent: #f0a020;
    --clk-accent-dim: rgba(240, 160, 32, 0.14);
    --clk-accent-2: #6cb4ee;
    --clk-accent-2-dim: rgba(108, 180, 238, 0.12);
    --clk-bg: rgba(255, 255, 255, 0.025);
    --clk-bg-2: rgba(255, 255, 255, 0.05);
    --clk-bg-3: rgba(0, 0, 0, 0.22);
    --clk-border: rgba(255, 255, 255, 0.08);
    --clk-border-hi: rgba(240, 160, 32, 0.35);
    --clk-radius: 16px;
    --clk-radius-sm: 12px;
    --clk-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.clk-root * { box-sizing: border-box; }

/* ---- hero ---- */
.clk-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: linear-gradient(135deg, var(--clk-accent-dim) 0%, var(--clk-accent-2-dim) 50%, transparent 100%);
    box-shadow: var(--clk-shadow);
    position: relative;
}
.clk-hero__main { flex: 1; min-width: 200px; padding-right: 48px; }
.clk-hero__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.clk-hero__icon { width: 26px; height: 26px; fill: var(--clk-accent); flex-shrink: 0; }
.clk-hero__subtitle { margin: 6px 0 0; font-size: 13px; opacity: 0.65; line-height: 1.45; max-width: 420px; }

.clk-hero__league {
    flex-shrink: 0;
    min-width: 200px;
    max-width: 280px;
    padding: 12px 14px;
    border: 1px solid var(--clk-border-hi);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-3);
}
.clk-hero__league-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
    margin-bottom: 2px;
}
.clk-hero__league-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--clk-accent);
    margin-bottom: 8px;
}
.clk-hero__league-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}
.clk-hero__league-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--clk-accent-2), var(--clk-accent));
    transition: width 0.35s ease;
}
.clk-hero__league-next { font-size: 11px; opacity: 0.6; line-height: 1.3; }

.clk-hero__admin {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clk-border-hi);
    border-radius: 50%;
    background: rgba(246, 131, 56, 0.18);
    color: #f68338;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.clk-hero__admin:hover {
    transform: scale(1.05);
    background: rgba(246, 131, 56, 0.28);
    border-color: #f68338;
}
.clk-hero__admin svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- auth ---- */
.clk-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 48px 24px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: var(--clk-bg);
}
.clk-auth__icon { width: 48px; height: 48px; fill: var(--clk-accent-2); }
.clk-auth__text { margin: 0; font-size: 15px; opacity: 0.85; }

/* ---- game shell ---- */
.clk-game {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: var(--clk-bg);
    box-shadow: var(--clk-shadow);
}

/* HUD stats strip */
.clk-hud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.clk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
    text-align: center;
}
.clk-stat__icon svg { width: 18px; height: 18px; fill: var(--clk-accent); opacity: 0.85; }
.clk-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
.clk-stat__value { font-size: 20px; font-weight: 800; line-height: 1.2; }

/* section nav (mobile tabs / desktop labels) */
.clk-nav {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-3);
}
.clk-nav__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.clk-nav__btn svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.75; flex-shrink: 0; }
.clk-nav__btn:hover { background: var(--clk-bg-2); }
.clk-nav__btn.is-active {
    background: var(--clk-accent-dim);
    color: var(--clk-accent);
    box-shadow: inset 0 0 0 1px var(--clk-border-hi);
}
.clk-nav__badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* panels */
.clk-panels { width: 100%; }
.clk-panel { display: none; animation: clk-fade 0.2s ease; }
.clk-panel.is-active { display: block; }
@keyframes clk-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.clk-panel__inner { display: flex; flex-direction: column; gap: 12px; }

/* shared card */
.clk-card {
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
    overflow: hidden;
}
.clk-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--clk-border);
    background: rgba(0, 0, 0, 0.15);
}
.clk-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
}
.clk-card__title svg { width: 16px; height: 16px; fill: var(--clk-accent); }
.clk-card__meta { font-size: 12px; opacity: 0.65; font-weight: 600; }
.clk-card__meta b { color: var(--clk-accent); }

/* ---- play panel ---- */
.clk-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 0 4px;
}

.clk-crate-wrap { position: relative; }
.clk-sound {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.88);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.clk-sound:hover { transform: scale(1.06); }
.clk-sound:active { transform: scale(0.94); }
.clk-sound__icon { width: 20px; height: 20px; display: block; }
.clk-sound.is-on {
    color: #2ecc71;
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.clk-sound.is-off {
    color: #e74c3c;
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.clk-sound.is-off::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.clk-crate {
    width: 220px;
    height: 220px;
    border-radius: 28px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #2a2418, #15120e 70%);
    box-shadow: 0 0 0 2px var(--clk-accent) inset, 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 48px rgba(240, 160, 32, 0.2);
    transition: transform 0.08s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    padding: 0;
}
.clk-crate:hover { box-shadow: 0 0 0 2px var(--clk-accent) inset, 0 22px 56px rgba(0, 0, 0, 0.55), 0 0 72px rgba(240, 160, 32, 0.35); }
.clk-crate:active { transform: scale(0.95); }
.clk-crate--pulse { animation: clk-pulse 0.18s ease; }
@keyframes clk-pulse { 0% { transform: scale(1); } 40% { transform: scale(0.92); } 100% { transform: scale(1); } }
.clk-crate__inner {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/clk-case.png) center/cover no-repeat;
    pointer-events: none;
}

.clk-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.clk-fx__pop {
    position: absolute;
    top: 30%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 22px;
    color: var(--clk-accent);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    animation: clk-pop 0.75s ease-out forwards;
}
@keyframes clk-pop {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -70px) scale(1.15); }
}

/* energy block */
.clk-energy {
    width: 100%;
    max-width: 400px;
    padding: 14px 16px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
}
.clk-energy__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}
.clk-energy__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; opacity: 0.9; }
.clk-energy__icon { width: 14px; height: 14px; fill: var(--clk-accent-2); }
.clk-energy__nums b { font-size: 16px; color: var(--clk-accent-2); }
.clk-energy__sep { opacity: 0.4; margin: 0 2px; }
.clk-energy__bar {
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--clk-border);
}
.clk-energy__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--clk-accent-2), var(--clk-accent));
    transition: width 0.25s linear;
}
.clk-energy__hint { margin: 8px 0 0; font-size: 12px; color: #ff6b6b; text-align: center; }
.clk-energy__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--clk-border);
}
.clk-passive { margin: 0; font-size: 12px; opacity: 0.75; }
.clk-passive b { color: var(--clk-accent); }

.clk-boost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.clk-boost svg { width: 14px; height: 14px; fill: var(--clk-accent); }
.clk-boost:disabled { opacity: 0.45; cursor: default; }

/* upgrades under energy (clicker tab) */
.clk-play__upgrades {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
    overflow: hidden;
}
.clk-play__upgrades-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clk-border);
    background: rgba(0, 0, 0, 0.15);
    font-size: 13px;
    font-weight: 800;
}
.clk-play__upgrades-head svg { width: 16px; height: 16px; fill: var(--clk-accent); }
.clk-play__upgrades .clk-shop__grid { padding: 10px; }

/* paid boosts (clicker tab) */
.clk-play__boosts {
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
    overflow: hidden;
}
.clk-play__boosts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--clk-border);
    background: rgba(0, 0, 0, 0.15);
    font-size: 13px;
    font-weight: 800;
}
.clk-play__boosts-head svg { width: 16px; height: 16px; fill: var(--clk-accent); }
.clk-play__boosts-balance { font-size: 11px; font-weight: 600; opacity: 0.75; }
.clk-play__boosts-balance b { color: var(--clk-accent-2); }

.clk-boosts__grid { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.clk-boost-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--clk-border);
    border-radius: 10px;
    background: var(--clk-bg-3);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.clk-boost-item--active {
    border-color: rgba(240, 160, 32, 0.45);
    box-shadow: inset 0 0 0 1px rgba(240, 160, 32, 0.15);
}
.clk-boost-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(240, 160, 32, 0.3), rgba(108, 180, 238, 0.2));
    border: 1px solid var(--clk-border);
}
.clk-boost-item__icon svg { width: 20px; height: 20px; fill: var(--clk-accent); }
.clk-boost-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clk-boost-item__name { font-weight: 700; font-size: 13px; }
.clk-boost-item__desc { font-size: 10px; opacity: 0.6; line-height: 1.35; }
.clk-boost-item__timer { font-size: 10px; color: var(--clk-accent); font-weight: 700; }
.clk-boost-item__timer b { font-variant-numeric: tabular-nums; }
.clk-boost-item__dur { font-size: 10px; opacity: 0.55; }
.clk-boost-item__limit { font-size: 10px; opacity: 0.55; line-height: 1.35; font-variant-numeric: tabular-nums; }
.clk-boost-item__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.clk-boost-item__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.clk-boost-item__buy svg { width: 12px; height: 12px; fill: currentColor; }
.clk-boost-item__buy--cash { background: rgba(76, 175, 80, 0.15); border-color: rgba(76, 175, 80, 0.35); }
.clk-boost-item__buy:disabled { opacity: 0.4; cursor: not-allowed; }

.clk-purchasing { pointer-events: none; opacity: 0.72; }
.clk-crate.clk-purchasing { cursor: wait; }

/* ---- daily (inside tasks) ---- */
.clk-daily__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.clk-daily__reward { font-size: 14px; opacity: 0.85; }
.clk-daily__reward b { font-size: 20px; font-weight: 800; color: var(--clk-accent); }
.clk-daily__btn { white-space: nowrap; }
.clk-daily__btn:disabled { opacity: 0.5; cursor: default; }

/* ---- quests ---- */
.clk-quests__list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.clk-quest {
    padding: 12px 14px;
    border: 1px solid var(--clk-border);
    border-radius: 10px;
    background: var(--clk-bg-3);
    transition: border-color 0.2s, opacity 0.2s;
}
.clk-quest--done { opacity: 0.65; border-color: rgba(76, 175, 80, 0.35); }
.clk-quest__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.clk-quest__name { font-weight: 700; font-size: 13px; }
.clk-quest__desc { margin: 0 0 8px; font-size: 11px; opacity: 0.65; line-height: 1.35; }
.clk-quest__bar { height: 5px; background: rgba(0, 0, 0, 0.35); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.clk-quest__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--clk-accent-2), var(--clk-accent)); transition: width 0.3s ease; }
.clk-quest__prog { font-size: 11px; opacity: 0.7; }
.clk-quest__prog b { color: var(--clk-accent); }
.clk-quest__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.clk-quest__btn svg { width: 13px; height: 13px; fill: currentColor; }
.clk-quest__btn:disabled { opacity: 0.4; cursor: default; }
.clk-quest--done .clk-quest__btn { opacity: 0.7; }

/* ---- shop ---- */
.clk-shop__grid { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.clk-shop__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--clk-border);
    border-radius: 10px;
    background: var(--clk-bg-3);
    transition: border-color 0.15s;
}
.clk-shop__item:hover { border-color: var(--clk-border-hi); }
.clk-shop__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 11px;
    border: 1px solid var(--clk-border);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.clk-shop__item[data-type="click"]   .clk-shop__icon { background-image: url(../img/upg-click.png); }
.clk-shop__item[data-type="energy"]  .clk-shop__icon { background-image: url(../img/upg-energy.png); }
.clk-shop__item[data-type="passive"] .clk-shop__icon { background-image: url(../img/upg-passive.png); }
.clk-shop__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clk-shop__name { font-weight: 700; font-size: 14px; }
.clk-shop__desc { font-size: 11px; opacity: 0.6; line-height: 1.35; }
.clk-shop__level { font-size: 11px; opacity: 0.7; }
.clk-shop__level b { color: var(--clk-accent-2); }
.clk-shop__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 88px;
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
}
.clk-shop__buy svg { width: 14px; height: 14px; fill: currentColor; }
.clk-shop__buy:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- leaderboard ---- */
.clk-board {
    padding: 18px 18px 22px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: var(--clk-bg);
    box-shadow: var(--clk-shadow);
    width: 100%;
}
.clk-board__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 800;
}
.clk-board__title svg { width: 18px; height: 18px; fill: var(--clk-accent); flex-shrink: 0; }

/* period tabs — one row (theme sets [role=tablist] to column — we avoid those roles) */
.clk-board__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2px;
}
.clk-board__tabs::-webkit-scrollbar { display: none; }
.clk-tab {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 8px 14px;
    border: 1px solid var(--clk-border);
    border-radius: 999px;
    background: var(--clk-bg-2);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.clk-tab:hover { border-color: var(--clk-border-hi); }
.clk-tab.is-active {
    background: var(--clk-accent-dim);
    border-color: var(--clk-border-hi);
    color: var(--clk-accent);
    box-shadow: inset 0 0 0 1px rgba(240, 160, 32, 0.2);
}

/* table layout — fixed columns for alignment */
.clk-board__table {
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    overflow: hidden;
    background: var(--clk-bg-3);
}
.clk-board__head,
.clk-row {
    display: grid;
    grid-template-columns: 40px 42px minmax(0, 1fr) minmax(88px, auto);
    align-items: center;
    column-gap: 10px;
    padding: 0 12px;
}
.clk-board__head {
    min-height: 36px;
    background: rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid var(--clk-border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
}
.clk-board__col--rank { text-align: center; }
.clk-board__col--score { text-align: right; padding-right: 2px; }

.clk-board__list { display: flex; flex-direction: column; }
.clk-board__empty {
    text-align: center;
    opacity: 0.5;
    padding: 24px 16px;
    font-size: 14px;
}

.clk-row {
    min-height: 48px;
    border-bottom: 1px solid var(--clk-border);
    background: transparent;
    transition: background 0.12s;
}
.clk-board__list .clk-row:last-child { border-bottom: none; }
.clk-row--me { background: var(--clk-accent-dim); box-shadow: inset 3px 0 0 var(--clk-accent); }
.clk-row--top { background: rgba(255, 255, 255, 0.04); }

.clk-row__rank {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    opacity: 0.75;
    flex-shrink: 0;
    border-radius: 8px;
}
.clk-rank--1, .clk-rank--2, .clk-rank--3 {
    opacity: 1;
    color: #1a1712;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.clk-rank--1 { background: linear-gradient(135deg, #ffd75e, #f0a020); }
.clk-rank--2 { background: linear-gradient(135deg, #e6e6e6, #aab2bd); }
.clk-rank--3 { background: linear-gradient(135deg, #e0a070, #b87333); }

.clk-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--clk-border);
    flex-shrink: 0;
    display: block;
}
.clk-row__name {
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clk-row__name:hover { color: var(--clk-accent); }
.clk-row__score {
    text-align: right;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--clk-accent);
    white-space: nowrap;
    padding-right: 2px;
    overflow: visible;
    min-width: 3.5em;
}

.clk-board__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}
.clk-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--clk-border);
    border-radius: 9px;
    background: var(--clk-bg-2);
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.clk-pager__btn:hover:not(:disabled) { border-color: var(--clk-border-hi); background: var(--clk-bg); }
.clk-pager__btn:disabled { opacity: 0.35; cursor: default; }
.clk-pager__btn svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
.clk-board__page { font-size: 13px; opacity: 0.75; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- rules ---- */
.clk-rules {
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: var(--clk-bg);
    padding: 2px 18px;
}
.clk-rules__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    list-style: none;
    user-select: none;
}
.clk-rules__summary::-webkit-details-marker { display: none; }
.clk-rules__summary svg { width: 16px; height: 16px; fill: var(--clk-accent); flex-shrink: 0; }
.clk-rules__summary::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
    transition: transform 0.2s;
}
.clk-rules[open] .clk-rules__summary::after { transform: rotate(225deg); }
.clk-rules__list { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.clk-rules__list li { font-size: 13px; line-height: 1.5; opacity: 0.78; }

.is-hidden { display: none !important; }

/* ============================================================
   Desktop: tabs always visible, single active panel
   ============================================================ */
@media (min-width: 860px) {
    .clk-game { max-width: 720px; margin-left: auto; margin-right: auto; }
    .clk-play__upgrades { max-width: 100%; }
    .clk-play__boosts { max-width: 100%; }
    .clk-crate { width: 240px; height: 240px; }
}

/* ============================================================
   Responsive — mobile / tablet
   ============================================================ */
@media (max-width: 859px) {
    .clk-hero { padding: 16px 18px; }
    .clk-hero__title { font-size: 21px; }
    .clk-hero__league { width: 100%; max-width: none; }
    .clk-game { padding: 14px 12px; }
    .clk-stat__value { font-size: 17px; }
}

@media (max-width: 560px) {
    .clk-root { gap: 10px; }
    .clk-hud { gap: 6px; }
    .clk-stat { padding: 10px 4px; }
    .clk-stat__value { font-size: 16px; }
    .clk-stat__label { font-size: 9px; }
    .clk-nav__btn { font-size: 11px; padding: 9px 4px; gap: 4px; }
    .clk-nav__btn svg { width: 14px; height: 14px; }
    .clk-nav__badge { top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; line-height: 16px; }
    .clk-crate { width: 180px; height: 180px; border-radius: 22px; }
    .clk-tab { font-size: 11px; padding: 7px 12px; }
    .clk-board { padding: 14px 12px 18px; }
    .clk-board__head,
    .clk-row {
        grid-template-columns: 34px 36px minmax(0, 1fr) minmax(64px, auto);
        column-gap: 8px;
        padding: 0 10px;
    }
    .clk-row { min-height: 44px; }
    .clk-row__avatar { width: 32px; height: 32px; }
    .clk-row__rank { width: 28px; height: 28px; font-size: 12px; }
    .clk-row__name, .clk-row__score { font-size: 13px; }
    .clk-shop__buy { min-width: 76px; font-size: 12px; }
    .clk-energy__foot { flex-direction: column; align-items: stretch; }
    .clk-boost { width: 100%; justify-content: center; }
    .clk-boost-item { flex-wrap: wrap; }
    .clk-boost-item__actions { flex-direction: row; width: 100%; }
    .clk-boost-item__buy { flex: 1; }
    .clk-daily__row { flex-direction: column; text-align: center; }
    .clk-quest__top { flex-wrap: wrap; }
    .clk-quest__btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
    .clk-crate { width: 160px; height: 160px; }
    .clk-fx__pop { font-size: 18px; }
    .clk-shop__icon { width: 44px; height: 44px; }
    .clk-board__head,
    .clk-row {
        grid-template-columns: 30px 32px minmax(0, 1fr) minmax(58px, auto);
        column-gap: 6px;
        padding: 0 8px;
    }
    .clk-row__avatar { width: 28px; height: 28px; }
    .clk-row__rank { width: 26px; height: 26px; font-size: 11px; }
}

/* ---- league ladder (Hamster-style) ---- */
.clk-leagues__sub {
    margin: 0;
    padding: 0 14px 10px;
    font-size: 12px;
    opacity: 0.65;
    line-height: 1.45;
}
.clk-leagues__list {
    list-style: none;
    margin: 0;
    padding: 0 8px 10px;
    max-height: 320px;
    overflow-y: auto;
}
.clk-league-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--clk-border);
    margin-bottom: 6px;
    background: var(--clk-bg);
}
.clk-league-step__tier {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
}
.clk-league-step__body { min-width: 0; }
.clk-league-step__name { display: block; font-size: 13px; font-weight: 700; }
.clk-league-step__need { display: block; font-size: 11px; opacity: 0.55; margin-top: 2px; }
.clk-league-step__badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.clk-league-step--passed { border-color: rgba(100, 206, 130, 0.35); background: rgba(100, 206, 130, 0.08); }
.clk-league-step--passed .clk-league-step__badge { background: rgba(100, 206, 130, 0.2); color: #64ce82; }
.clk-league-step--current { border-color: var(--clk-border-hi); background: var(--clk-accent-dim); box-shadow: inset 0 0 0 1px var(--clk-border-hi); }
.clk-league-step--current .clk-league-step__tier { background: var(--clk-accent); color: #1a1208; }
.clk-league-step--current .clk-league-step__badge { background: rgba(240, 160, 32, 0.25); color: var(--clk-accent); }
.clk-league-step--locked { opacity: 0.55; }
.clk-league-step--locked .clk-league-step__badge { background: rgba(255, 255, 255, 0.06); opacity: 0.8; }

/* ---- shop tabs (legacy) + cards panel ---- */
.clk-cards__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 10px;
}
.clk-cards__filter {
    padding: 6px 12px;
    border: 1px solid var(--clk-border);
    border-radius: 999px;
    background: var(--clk-bg);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.clk-cards__filter:hover { background: var(--clk-bg-2); }
.clk-cards__filter.is-active {
    background: var(--clk-accent-dim);
    border-color: var(--clk-border-hi);
    color: var(--clk-accent);
}

.clk-cards__hint {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 12px;
    opacity: 0.65;
    line-height: 1.45;
}
.clk-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 10px 8px;
}
.clk-card-item.is-hidden-page { display: none !important; }
.clk-card-item.is-hidden-cat { display: none !important; }

.clk-cards__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 10px 12px;
}
.clk-cards__page {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.75;
    min-width: 52px;
    text-align: center;
}
.clk-card-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
}
.clk-card-item--locked { opacity: 0.72; }
.clk-card-item--maxed { border-color: rgba(100, 206, 130, 0.3); }
.clk-card-item__head { display: flex; gap: 10px; align-items: flex-start; }
.clk-card-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(240, 160, 32, 0.25), rgba(108, 180, 238, 0.15));
    border: 1px solid var(--clk-border);
}
.clk-card-item__icon svg { width: 22px; height: 22px; fill: var(--clk-accent); }
.clk-card-item__icon--farm { background: linear-gradient(135deg, rgba(100, 206, 130, 0.35), rgba(50, 120, 80, 0.2)); }
.clk-card-item__icon--farm svg { fill: #64ce82; }
.clk-card-item__icon--trade { background: linear-gradient(135deg, rgba(108, 180, 238, 0.35), rgba(50, 90, 140, 0.2)); }
.clk-card-item__icon--trade svg { fill: #6cb4ee; }
.clk-card-item__icon--pro { background: linear-gradient(135deg, rgba(240, 160, 32, 0.4), rgba(180, 90, 20, 0.25)); }
.clk-card-item__icon--pro svg { fill: #f0a020; }
.clk-card-item--locked .clk-card-item__icon svg { fill: rgba(255, 255, 255, 0.35); }
.clk-card-item__name { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; }
.clk-card-item__cat { display: block; font-size: 11px; opacity: 0.6; margin-top: 2px; }
.clk-card-item__unlock {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 11px;
    opacity: 0.75;
    line-height: 1.35;
}
.clk-card-item__unlock li { margin-bottom: 2px; }
.clk-card-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.clk-card-item__level { font-size: 12px; opacity: 0.75; }
.clk-card-item__buy {
    min-width: 88px;
    justify-content: center;
    padding: 7px 10px;
    font-size: 12px;
}

@media (max-width: 560px) {
    .clk-cards__grid { grid-template-columns: 1fr; }
    .clk-leagues__list { max-height: 260px; }
}

@media (min-width: 561px) {
    .clk-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .clk-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- admin panel (site admins) ---- */
.clk-admin-fab {
    position: fixed;
    right: 72px;
    bottom: 15px;
    z-index: 10051;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f68338;
    color: #fff;
    box-shadow: 0 4px 12px rgba(246, 131, 56, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.clk-admin-fab:hover {
    transform: scale(1.08);
    background: #ff8a4d;
    box-shadow: 0 6px 16px rgba(246, 131, 56, 0.45);
}
.clk-admin-fab__icon { width: 24px; height: 24px; fill: currentColor; }

.clk-admin { max-width: 960px; }
.clk-admin__search {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--br-10, 10px);
    background: var(--card, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--transparent-10-w, rgba(255, 255, 255, 0.08));
}
.clk-admin__search-title {
    margin: 0 0 0.75rem;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-default);
}
.clk-admin__search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
}
.clk-admin__search-field { flex: 1 1 220px; margin: 0; }
.clk-admin__search-field input { width: 100%; }
.clk-admin__search-result { margin-top: 0.85rem; }
.clk-admin__search-card {
    border-radius: var(--br-8, 8px);
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.clk-admin__row--lookup { border-bottom: none; }
.clk-admin__search-stats {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0.65rem 1rem 0.85rem;
    border-top: 1px solid var(--transparent-10-w, rgba(255, 255, 255, 0.08));
}
.clk-admin__search-stats div { display: flex; gap: 0.4rem; align-items: baseline; }
.clk-admin__search-stats dt { margin: 0; font-size: 12px; opacity: 0.65; }
.clk-admin__search-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.clk-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}
.clk-admin__wipe {
    padding: 0.35rem 0.65rem;
    font-size: 12px;
    white-space: nowrap;
}
.clk-admin__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius);
    background: var(--clk-bg);
    box-shadow: var(--clk-shadow);
}
.clk-admin__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}
.clk-admin__title svg { width: 22px; height: 22px; fill: var(--clk-accent); }
.clk-admin__sub { margin: 6px 0 0; font-size: 13px; opacity: 0.65; max-width: 520px; line-height: 1.45; }
.clk-admin__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.clk-admin__back svg { width: 14px; height: 14px; fill: currentColor; }

.clk-admin__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-sm);
    background: var(--clk-bg-2);
}
.clk-admin__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
}
.clk-admin__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--clk-border);
    border-radius: 999px;
    background: var(--clk-bg-3);
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
}
.clk-admin__tab.is-active {
    background: var(--clk-accent-dim);
    border-color: var(--clk-border-hi);
    color: var(--clk-accent);
}
.clk-admin__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 11px;
    text-align: center;
}
.clk-admin__hint { margin: 0; font-size: 12px; opacity: 0.65; }
.clk-admin__hint b { color: var(--clk-accent); }

.clk-admin__table-wrap { width: 100%; }
.clk-admin__table { overflow-x: auto; }
.clk-admin__row,
.clk-board__head.clk-admin__row {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) 72px 88px 88px 100px;
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--clk-border);
}
.clk-admin__list .clk-admin__row:last-child { border-bottom: none; }
.clk-admin__row--flagged { background: rgba(231, 76, 60, 0.08); }
.clk-admin__col--player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.clk-admin__player { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clk-admin__sid { font-size: 10px; opacity: 0.5; font-variant-numeric: tabular-nums; }
.clk-admin__col--num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.clk-admin__susp { font-weight: 800; color: #ff6b6b; }
.clk-admin__col--act { text-align: right; }
.clk-admin__reset {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .clk-admin__row,
    .clk-board__head.clk-admin__row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px;
    }
    .clk-admin__col--num,
    .clk-admin__col--act { text-align: left; }
    .clk-admin__actions { justify-content: flex-start; }
    .clk-admin-fab { right: 62px; bottom: 10px; width: 45px; height: 45px; }
    .clk-admin-fab__icon { width: 22px; height: 22px; }
    .clk-hero__admin { width: 36px; height: 36px; }
    .clk-hero__admin svg { width: 18px; height: 18px; }
}