/* ========== GLOBAL UI SCALE ==========
   The HUD is authored at fixed pixel sizes and then scaled as a whole. The
   factors are recomputed by updateUIScale() in game.js on every resize, from
   the *measured* size of the panels — media-query steps used to do this, so a
   frame that fell between them (CrazyGames embeds at 1019x528) got the full
   desktop HUD and pushed the paint menu off the bottom of the screen.
     --ui-scale    HUD panels: left stats, paint menu, match banner, tutorial
     --ctl-scale   round corner buttons — floored so they stay tappable
     --card-scale  modal cards: overlay, shop, audio, private room, sitelock */
:root {
    --ui-scale: 1;
    --ctl-scale: 1;
    --card-scale: 1;
}

body {
    margin: 0;
    overflow: hidden;
    background-color: #1e272e;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    /* Switched to a chunkier stack, adjust if you import a custom cartoon font! */
    font-family: 'Fredoka One', 'Comic Sans MS', 'Segoe UI', Tahoma, sans-serif;
    user-select: none;
    /* the page itself must never pan or zoom under a finger; scrollable
       panels opt back in with their own touch-action (see the bottom) */
    touch-action: none;
}

canvas {
    display: block;
    background: transparent; 
    touch-action: none; 
}

/* ========== MAIN UI PANELS ========== */
#ui-container {
    position: absolute;
    top: 15px;
    left: 15px;
    pointer-events: none;
    background: #341f53;
    padding: 10px 12px; /* Slimmer padding */
    border-radius: 10px;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    width: 190px; /* Slimmed down from 220px */
    transform: scale(var(--ui-scale));
    transform-origin: top left;
    z-index: 10;
}

#how-to-play h2 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #00d2d3;
    text-shadow: 2px 2px 0px #000;
}

#how-to-play p {
    font-size: 11px;
    margin: 3px 0;
    color: #fff;
    font-weight: bold;
}

h2 { 
    margin: 0 0 10px 0; 
    font-size: 22px; 
    color: #00d2d3; 
    text-shadow: 2px 2px 0px #000; /* Cartoon text drop shadow */
}
p { 
    margin: 5px 0; 
    color: #fff; 
    font-size: 13px; 
    font-weight: bold;
}

.ink-container { margin-top: 15px; }
.ink-title {
    font-weight: 900; 
    font-size: 14px; 
    color: #feca57;
    margin-bottom: 5px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000;
}

/* CARTOON PROGRESS BARS */
#ink-bar-bg {
    width: 100%; 
    height: 16px; 
    background: #2d3436;
    border-radius: 8px; 
    overflow: hidden; 
    border: 3px solid #000; /* Thick outline */
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.3); /* Inner shadow for depth */
}
#ink-bar-fill {
    width: 100%; 
    height: 100%; 
    background: #feca57; /* Flat bright color, no gradient */
    border-radius: 4px; 
    transition: width 0.1s linear, background-color 0.3s;
}

/* ========== PAINT MENU ========== */
#paintMenu {
    /* --paint-top keeps the menu clear of the round buttons in the corner */
    position: absolute; top: var(--paint-top, 20px); right: 20px;
    background: #205c6b; /* Solid teal/blue */
    padding: 20px; 
    border-radius: 16px; 
    display: flex; flex-direction: column; gap: 15px; align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0; transform: scale(calc(var(--paint-scale, var(--ui-scale)) * 0.9)); pointer-events: none;
    transform-origin: top right;
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000; /* Hard offset shadow */
    box-sizing: border-box;
    /* Last resort on frames too short to scale the menu down and still read it:
       --ui-scale bottoms out and the rest of the list scrolls. updateUIScale()
       sets max-height, in the menu's own pre-scale pixels. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* above the virtual JUMP button (z 20): while the menu is open it wins the
       overlap — painters are stationary, so JUMP being covered costs nothing */
    z-index: 25;
}
#paintMenu.visible { opacity: 1; transform: scale(var(--paint-scale, var(--ui-scale))); pointer-events: auto; }
.menu-title {
    font-weight: 900; font-size: 14px; text-transform: uppercase;
    letter-spacing: 1.5px; color: #fff;
    text-shadow: 2px 2px 0px #000;
}

input[type="color"] {
    -webkit-appearance: none; border: none; width: 46px; height: 46px;
    border-radius: 50%; cursor: pointer; padding: 0; background: none;
    transition: transform 0.2s ease;
}
input[type="color"]:hover { transform: scale(1.1); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
    border: 3px solid #000; /* Black outline */
    border-radius: 50%; 
    box-shadow: 3px 3px 0px #000;
}

/* ---- paint menu tabs ---- */
.pm-tabs { display: flex; gap: 8px; width: 100%; }
.pm-tab {
    flex: 1;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bfe3ea;
    background: #17454f;
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px 0 #000;
    cursor: pointer;
}
.pm-tab.active {
    color: #1e272e;
    background: #feca57;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 #000;
}
.pm-pane { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; }

/* ---- inline custom color picker ---- */
.cc-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
#cc-eyedrop {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #17454f;
    border: 2px solid #000; border-radius: 8px;
    box-shadow: 2px 2px 0 #000;
    cursor: pointer; padding: 0;
}
#cc-eyedrop:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
#cc-preview {
    display: inline-block;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #000;
    box-shadow: 2px 2px 0 #000;
}
#custom-color-row { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 6px; box-sizing: border-box; }
#cc-hue, #cc-light { width: 100%; height: 18px; cursor: pointer; -webkit-appearance: none; appearance: none; border: 2px solid #000; border-radius: 9px; }
#cc-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
#cc-light { background: linear-gradient(90deg, #000, #808080, #fff); }
#cc-hue::-webkit-slider-thumb, #cc-light::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 3px solid #000;
}

/* HEXAGONAL PALETTE */
#hex-palette { display: flex; flex-direction: column; align-items: center; }
.hex-row { display: flex; justify-content: center; margin-top: -6px; }
.hex-row:first-child { margin-top: 0; }
.hex-cell {
    width: 24px; height: 27px; margin: 0 1px; cursor: pointer;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: transform 0.1s ease;
    /* Note: CSS clip-path removes borders. If you want black borders on hexes, 
       consider using an SVG background image for the hexes instead. */
}
.hex-cell:hover { transform: scale(1.25); z-index: 2; }
.gray-row { margin-top: 6px; }
.custom-color-row { display: flex; align-items: center; gap: 10px; }
.menu-subtitle {
    font-size: 12px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; color: #feca57; text-shadow: 1px 1px 0px #000;
}

/* BRUSH BUTTONS */
.brush-container { display: flex; gap: 12px; align-items: flex-end; justify-content: center; height: 50px; }
.brush-btn {
    background: #636e72; 
    border: 3px solid #000;
    box-shadow: 3px 3px 0px #000;
    border-radius: 50%; cursor: pointer; display: flex; justify-content: center;
    align-items: center; color: white; transition: all 0.1s; font-weight: 900;
}
.brush-btn:hover { 
    background: #00d2d3;
    transform: translateY(-2px);
}
.brush-btn.active { 
    background: #feca57; 
    color: #000;
    transform: translate(3px, 3px); /* Press down effect */
    box-shadow: 0px 0px 0px #000; /* Remove shadow when pressed */
}

.brush-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}
#brush-slider {
    flex: 1;
    min-width: 0;
    accent-color: #feca57;
    cursor: pointer;
    height: 22px; /* generous touch target on phones */
}
.brush-preview {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #17323b;
    border: 2px solid #000;
    border-radius: 50%;
}
#brush-preview-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.4);
}
#brush-size-num {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: right;
    font-size: 12px;
    font-weight: 900;
    color: #feca57;
    font-variant-numeric: tabular-nums;
    text-shadow: 1px 1px 0 #000;
}

#btn-small { width: 32px; height: 32px; font-size: 12px; }
#btn-medium { width: 40px; height: 40px; font-size: 16px; }
#btn-large { width: 48px; height: 48px; font-size: 20px; }

/* VIRTUAL MOBILE CONTROLS */
#mobile-controls {
    display: none; 
    position: absolute; bottom: 30px; left: 0; width: 100%;
    pointer-events: none; z-index: 20;
}
#joystick-base {
    position: absolute; left: 40px; bottom: 0;
    width: 120px; height: 120px; 
    background: #fff; /* Solid white base */
    border: 4px solid #000; 
    border-radius: 50%;
    box-shadow: 4px 4px 0px #000;
    pointer-events: auto; 
    opacity: 0.8; /* Slight overall transparency instead of blur */
}
#joystick-stick {
    position: absolute; top: 35px; left: 35px;
    width: 50px; height: 50px; 
    background: #00d2d3;
    border: 3px solid #000;
    border-radius: 50%; 
    box-shadow: 3px 3px 0px #000;
    pointer-events: none;
}
#jump-btn {
    position: absolute; right: 40px; bottom: 10px;
    width: 90px; height: 90px; 
    background: #ff9f43;
    border: 4px solid #000; 
    border-radius: 50%;
    color: white; font-weight: 900; display: flex;
    justify-content: center; align-items: center;
    font-size: 24px; pointer-events: auto; 
    box-shadow: 5px 5px 0px #000;
    text-shadow: 2px 2px 0px #000;
}
#jump-btn:active {
    background: #feca57;
    transform: translate(5px, 5px);
    box-shadow: 0px 0px 0px #000;
}
/* 👊 seeker swing, stacked directly above JUMP so the same thumb reaches both.
   Only shown to a seeker on a touch device (see refreshTouchControls). */
#hit-btn {
    position: absolute; right: 40px; bottom: 118px;
    width: 84px; height: 84px;
    background: #ee5253;
    border: 4px solid #000;
    border-radius: 50%;
    color: #fff; font-weight: 900; display: none;
    justify-content: center; align-items: center;
    font-size: 22px; pointer-events: auto;
    box-shadow: 5px 5px 0px #000;
    text-shadow: 2px 2px 0px #000;
}
#hit-btn.visible { display: flex; }
#hit-btn:active {
    background: #ff6b6b;
    transform: translate(5px, 5px);
    box-shadow: 0px 0px 0px #000;
}
#hit-btn.spent { background: #6b4a4a; color: #c8b6b6; }

/* ========== MATCH HUD ========== */
#match-banner {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px) scale(var(--ui-scale));
    transform-origin: top center;
    display: flex;
    align-items: center;
    gap: 10px; /* Tighter gap */
    background: #341f53;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    padding: 6px 16px;
    border-radius: 10px; /* Slimmed padding */
    transition: transform 0.4s ease;
    z-index: 15;
    pointer-events: none;
}

    #match-banner.visible {
        transform: translateX(-50%) translateY(0) scale(var(--ui-scale));
    }

#match-role {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000;
}

    #match-role.hider {
        color: #feca57;
    }

    #match-role.seeker {
        color: #ff6b81;
    }

#match-phase {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
}

#match-timer {
    font-size: 42px; /* SHRUNK FROM 72px! */
    font-weight: 900;
    color: #00d2d3;
    min-width: 65px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    /* Scaled down the shadow to match the new font size */
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 4px 4px 0 #000;
}

/* ========== HIT CHARGES ========== */
#hit-ui {
    position: absolute;
    top: 0;
    left: 0; /* Reset anchor to top-left */
    display: none;
    align-items: center;
    gap: 8px;
    background: #341f53;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000;
    padding: 6px 14px; /* Slimmed down slightly for better visibility */
    border-radius: 12px;
    transform-origin: 0 0; /* game.js does the scale math against this corner */
    z-index: 15;
    pointer-events: none;
    will-change: transform; /* Tells the browser to optimize for constant movement */
}
#hit-ui.visible { display: flex; }
.hit-label {
    font-size: 13px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1.5px; color: #fff; margin-right: 4px;
    text-shadow: 1px 1px 0px #000;
}
#hit-count-num {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    min-width: 34px;
    text-align: center;
    color: #ff9f43;
    font-variant-numeric: tabular-nums;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
#hit-count-num.low { color: #ff6b81; }
#hit-count-num.out { color: #ff4757; }

/* ========== OVERLAY (start / end screen) ========== */
#overlay-screen {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    padding-top: 30px;
    opacity: 0;
    visibility: hidden; /* <--- ADD THIS */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s; /* <--- UPDATE THIS */
}

    #overlay-screen.visible {
        opacity: 1;
        visibility: visible; /* <--- ADD THIS */
    }

.overlay-card {
    pointer-events: auto;
    background: #205c6b; 
    border: 4px solid #000;
    border-radius: 16px; padding: 24px 34px; max-width: 420px;
    box-sizing: border-box;
    zoom: max(0.85, var(--card-scale));
    /* max-height is read in the card's own (zoomed) pixels, hence the divide */
    max-height: calc((100vh - 56px) / max(0.85, var(--card-scale)));
    overflow-y: auto;
    text-align: center; 
    box-shadow: 8px 8px 0px #000;
}
#overlay-title { margin: 0 0 12px 0; font-size: 32px; font-weight: 900; color: #feca57; text-shadow: 3px 3px 0px #000; }
#overlay-text { font-size: 16px; font-weight: bold; color: #fff; line-height: 1.6; margin: 0 0 24px 0; }

#overlay-coins {
    margin: 0 0 14px 0;
    font-size: 30px;
    font-weight: 900;
    color: #feca57;
    text-shadow: 2px 2px 0 #000;
    font-variant-numeric: tabular-nums;
}
#overlay-coins .coin-ico { width: 0.85em; height: 0.85em; }
#overlay-coins-tag {
    display: block;
    font-size: 13px;
    color: #2ed573;
    text-shadow: 1px 1px 0 #000;
    min-height: 16px;
}
#double-coins-btn, #perk-trial-btn, #seeker-hits-btn, .gift-btn {
    margin: 0 0 14px 0;
    padding: 11px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    color: #1e272e;
    background: linear-gradient(90deg, #2ed573, #7bed9f);
    border: 3px solid #000;
    border-radius: 12px;
    box-shadow: 3px 3px 0 #000;
    cursor: pointer;
}
#double-coins-btn:active, #perk-trial-btn:active, .gift-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000; }
#double-coins-btn:disabled, #perk-trial-btn:disabled, #seeker-hits-btn:disabled, .gift-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
#perk-trial-btn { background: linear-gradient(90deg, #54a0ff, #7ec3ff); }
/* the seeker's setup-phase offer floats over the dark waiting veil */
#seeker-hits-btn { position: fixed; left: 50%; bottom: 26%; transform: translateX(-50%); z-index: 30; margin: 0; }
#seeker-hits-btn:active { transform: translateX(-50%) translate(2px, 2px); box-shadow: 0 0 0 #000; }
/* 🎁 daily gift modal — same skeleton as achievements/quests */
#gift-screen { position: fixed; inset: 0; z-index: 96; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
#gift-screen.visible { display: flex; }
.gift-card { width: min(360px, 92vw); text-align: center; }
.gift-card .gift-btn { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
#gift-close { width: 38px; height: 38px; font-size: 18px; color: #fff; background: #576574; border: none; border-radius: 10px; cursor: pointer; }
.gift-day { font-size: 13px; color: #8395a7; margin: 2px 0 10px; letter-spacing: 1px; text-transform: uppercase; }
#gift-body { margin: 4px 0 16px; }
.gift-coins { font-size: 34px; font-weight: bold; color: #feca57; display: flex; align-items: center; justify-content: center; gap: 10px; }
.gift-coins .coin-ico { width: 26px; height: 26px; }
.gift-item { margin-top: 10px; font-size: 17px; font-weight: bold; color: #2ed573; }
.gift-item span { display: block; font-size: 12px; color: #8395a7; font-weight: normal; margin-top: 3px; }
.gift-note { font-size: 12px; color: #8395a7; margin: 0; }


#overlay-countdown {
    font-size: 24px; font-weight: 900; color: #00d2d3;
    margin: 0 0 20px 0; min-height: 24px;
    text-shadow: 2px 2px 0px #000;
}

/* ========== RANK / PROGRESS ========== */
.rank-container {
    margin-top: 5px;
}
/* Tighter top margin */
.rank-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px; /* Slimmed down from 5px */
}

#rank-name {
    font-weight: 900;
    font-size: 14px;
    color: #00d2d3; /* Scaled down slightly */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000;
}

#rank-points {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

#rank-bar-bg {
    width: 100%;
    height: 10px;
    background: #2d3436; /* Thinner bar (was 16px) */
    border-radius: 5px;
    overflow: hidden;
    border: 3px solid #000;
}

#rank-bar-fill {
    width: 0%;
    height: 100%;
    background: #00d2d3;
    border-radius: 2px;
    transition: width 0.4s ease;
}

#rank-next {
    font-size: 10px;
    font-weight: bold;
    color: #feca57;
    margin-top: 2px;
}

#overlay-rank { margin: 0 0 18px 0; }
#overlay-rank .or-name {
    font-size: 24px; font-weight: 900; color: #00d2d3; margin-bottom: 6px;
    text-shadow: 2px 2px 0px #000;
}
#overlay-rank .or-bar-bg {
    width: 100%; height: 18px; background: #2d3436;
    border-radius: 9px; overflow: hidden; border: 3px solid #000;
}
#overlay-rank .or-bar-fill {
    height: 100%; background: #00d2d3;
    border-radius: 6px; transition: width 0.5s ease;
}
#overlay-rank .or-next { font-size: 13px; font-weight: bold; color: #fff; margin-top: 6px; }
#overlay-rank .or-up {
    font-size: 15px; font-weight: 900; color: #feca57; margin-top: 6px;
    text-shadow: 1px 1px 0px #000;
}

/* PAINT MENU HINTS */
.menu-hint {
    font-size: 10px; font-weight: bold; color: #feca57;
    letter-spacing: 0.5px; margin-left: 4px;
}
.menu-tip {
    font-size: 11px; color: #fff; text-align: center; font-weight: bold;
    margin-top: 4px;
}
.brush-btn { position: relative; }
.brush-btn .key {
    position: absolute; bottom: -6px; right: -6px;
    font-size: 10px; font-weight: 900; background: #ff9f43; color: #000;
    border-radius: 4px; padding: 2px 4px; line-height: 1;
    border: 2px solid #000;
}

/* ========== POSES (tab; buttons carry a thumbnail of the pose) ========== */
.pose-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 5px;
    width: 100%;
}
.pose-btn canvas { width: 52px; height: 56px; }
.pose-name { display: block; font-size: 10px; margin-top: 2px; }

.pose-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 5px 4px;
    background: #636e72;
    border: 2px solid #000;
    border-radius: 8px;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.1s;
    text-transform: uppercase;
    box-shadow: 2px 2px 0px #000;
}

    .pose-btn:hover {
        background: #00d2d3;
        transform: translateY(-2px);
    }

    .pose-btn.active {
        background: #ff9f43;
        color: #000;
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px #000;
    }

/* ========== MOBILE & SMALL SCREEN SCALING ========== */
@media (max-width: 900px), (max-height: 500px) {
    /* Panel scaling lives in --ui-scale now; only the virtual controls, which
       are sized for thumbs rather than for the layout, are stepped here. */
    #joystick-base {
        width: 100px;
        height: 100px;
        left: 20px;
        bottom: 20px;
    }

    #joystick-stick {
        width: 40px;
        height: 40px;
        top: 30px;
        left: 30px;
    }

    #jump-btn {
        width: 70px;
        height: 70px;
        font-size: 18px;
        right: 20px;
        bottom: 20px;
    }
}

/* ========== TUTORIAL SCREEN ========== */
#tutorial-screen {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85); /* Darken the background */
    backdrop-filter: blur(4px);
}

    #tutorial-screen.visible {
        display: flex;
    }

.tutorial-card {
    max-width: 450px;
    text-align: left;
    box-sizing: border-box;
    zoom: max(0.85, var(--card-scale));
    max-height: calc(94vh / max(0.85, var(--card-scale)));
    overflow-y: auto;
}

.tut-role {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 12px;
    text-shadow: 2px 2px 0px #000;
}

    .tut-role.hider {
        color: #feca57;
    }

    .tut-role.seeker {
        color: #ff6b81;
    }

.tut-text {
    font-size: 15px;
    line-height: 1.6;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
}

    .tut-text b {
        color: #00d2d3;
    }

.tut-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

.tut-btn {
    background: #00d2d3;
    border: 3px solid #000;
    padding: 10px 24px;
    font-size: 18px;
    font-weight: 900;
    color: #000;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s;
}

    .tut-btn:active {
        transform: translate(4px, 4px);
        box-shadow: 0px 0px 0px #000;
    }


/* ========== INTERACTIVE TUTORIAL ========== */
#tutorial-banner {
    display: none;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%) scale(var(--ui-scale));
    transform-origin: top center;
    background: rgba(32, 92, 107, 0.95);
    padding: 20px 30px;
    border: 4px solid #000;
    border-radius: 12px;
    box-shadow: 6px 6px 0px #000;
    z-index: 100;
    text-align: center;
    pointer-events: auto;
    width: 80%;
    /* border-box so --tut-max-w caps the visible width, padding included */
    box-sizing: border-box;
    max-width: min(500px, var(--tut-max-w, 500px));
}

    #tutorial-banner.visible {
        display: block;
    }

#tut-banner-text {
    font-size: 22px;
    font-weight: 900;
    color: #feca57;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 15px;
}

    #tut-banner-text span {
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        text-shadow: 1px 1px 0px #000;
        display: block;
        margin-top: 6px;
    }

#tut-skip-btn {
    background: #ff4757;
    color: white;
    border: 3px solid #000;
    padding: 6px 12px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: transform 0.1s;
}

    #tut-skip-btn:active {
        transform: translate(3px, 3px);
        box-shadow: 0px 0px 0px #000;
    }
/* Custom color row visibility is controlled by JS (the "Custom Color Picker"
   perk) via refreshPerkTools() — no static override here. */

/* Slim down and move the tutorial banner up */
#tutorial-banner {
    display: none;
    position: absolute;
    top: 10px; /* Moved from 15% to snug against the top */
    left: 50%;
    transform: translateX(-50%) scale(var(--ui-scale));
    transform-origin: top center;
    background: rgba(32, 92, 107, 0.95);
    padding: 10px 20px; /* Slimmer padding */
    border: 4px solid #000;
    border-radius: 12px;
    box-shadow: 6px 6px 0px #000;
    z-index: 100;
    text-align: center;
    pointer-events: auto;
    width: 80%;
    /* border-box so --tut-max-w caps the visible width, padding included */
    box-sizing: border-box;
    max-width: min(500px, var(--tut-max-w, 500px));
}

#tut-banner-text {
    margin-bottom: 10px;
    font-size: 18px;
}

/* CrazyGames login button — top-right, never a blocking CTA */
#cg-login-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 60;
    padding: 8px 14px;
    background: rgba(30, 39, 46, 0.85);
    color: #feca57;
    border: 2px solid #feca57;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transform: scale(var(--ctl-scale));
    transform-origin: top right;
}
#cg-login-btn:hover { background: #feca57; color: #1e272e; }

/* ============ COINS HUD ============ */
#coin-hud {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) scale(var(--ctl-scale));
    transform-origin: top center;
    z-index: 55;
    display: none;
    padding: 6px 16px;
    background: rgba(30, 39, 46, 0.85);
    color: #feca57;
    border: 2px solid #feca57;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    backdrop-filter: blur(4px);
}

/* ============ PAINT / ZOOM-OUT BUTTONS (touch hiders) ============
   They share one spot and never show together: PAINT while zoomed out,
   the magnifier-minus while zoomed in. */
#paint-btn,
#zoom-out-btn {
    position: fixed;
    /* Bottom centre, in the gap between the joystick and JUMP. This used to be
       left:12px/top:45% — precisely the zoom panel's lane — so on every phone
       size the two sat on top of each other, and on short frames it fouled the
       joystick as well. */
    left: 50%;
    bottom: 18px;
    z-index: 55;
    display: none;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    background: rgba(30, 39, 46, 0.85);
    border: 3px solid #feca57;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transform: translateX(-50%) scale(var(--ctl-scale));
    transform-origin: center bottom;
}

/* ============ MAGNIFIER BUTTON (seeker) ============ */
#magnifier-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 55;
    display: none;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 28px;
    background: rgba(30, 39, 46, 0.8);
    border: 3px solid #54a0ff;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transform: scale(var(--ctl-scale));
    transform-origin: bottom left;
}
#magnifier-btn.active { background: #54a0ff; }

/* ============ FILL TOOL (hider) ============ */
.fill-row { margin-top: 6px; display: none; }
/* 🔒 a paid tool the player does not own yet: still there, still tappable,
   visibly not theirs. */
.fill-btn.locked, #cc-eyedrop.locked { filter: grayscale(1); opacity: 0.55; }
.fill-btn.locked::after { content: ' 🔒'; font-size: 12px; }
.fill-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(90deg, #ff9f43, #feca57);
    color: #1e272e;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
.custom-color-locked {
    display: none;
    font-size: 12px;
    opacity: 0.6;
    padding: 4px 0;
}

/* ============ MAIN MENU ============ */
#main-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    pointer-events: none;
    padding: 30px;
    box-sizing: border-box;
}
#main-menu.visible { display: block; }
.mm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.mm-title {
    margin: 0;
    font-size: clamp(28px, min(6vw, 9vh), 64px);
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 0 30px rgba(84,160,255,0.4);
}
.mm-coins {
    pointer-events: auto;
    padding: 8px 18px;
    margin-right: 40px; /* clear of the fixed sound button in the corner */
    background: rgba(0,0,0,0.4);
    border: 2px solid #feca57;
    border-radius: 20px;
    color: #feca57;
    font-size: 22px;
    font-weight: bold;
    transform: scale(var(--ctl-scale));
    transform-origin: top right;
}
.mm-actions {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    /* stretch, not flex-end: every button then takes the column's width, so
       the stack reads as one block instead of a ragged edge */
    align-items: stretch;
    gap: 14px;
    transform: scale(var(--ui-scale));
    transform-origin: bottom right;
}
.mm-shop {
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 26px;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: rgba(45, 52, 70, 0.9);
    border: 2px solid #576574;
    border-radius: 14px;
    cursor: pointer;
}
.mm-shop:hover { border-color: #c8d6e5; }
/* 👍/👎 strip for a just-played community map */
#map-like { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; }
#map-like span { font-size: 13px; color: #dfe6ee; }
#map-like button { width: 40px; height: 34px; border-radius: 9px; border: 2px solid rgba(255,255,255,0.25);
    background: rgba(20,26,34,0.85); color: #aab8c8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#map-like button:hover { border-color: #c8d6e5; color: #fff; }
#ml-up.picked { background: #2ed573; color: #10141c; border-color: #2ed573; }
#ml-down.picked { background: #ff6b81; color: #10141c; border-color: #ff6b81; }

/* 🧟 the mode selector: a menu button with an accent, and a sheet of four.
   Reminder: anything interactive inside #main-menu needs pointer-events:auto
   (mm-shop already carries it). */
.mode-accent { border-color: #a55eea !important; color: #d3a8ff; }
/* 🎲 a rolled zombie round wears the horde's green, so the rotation reads as
   an offer rather than a setting the player forgot to change */
.mode-rolled { border-color: #2ed573 !important; color: #7bed9f; }
#mode-screen { position: fixed; inset: 0; z-index: 96; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
#mode-screen.visible { display: flex; }
.mode-card { width: min(420px, 92vw); }
#mode-close { width: 38px; height: 38px; font-size: 18px; color: #fff; background: #576574; border: none; border-radius: 10px; cursor: pointer; }
#mode-list { display: flex; flex-direction: column; gap: 8px; }
.mode-row { text-align: left; padding: 11px 14px; border-radius: 12px; background: #1e2533; border: 2px solid #3a4560;
    color: #dfe6e9; font-family: inherit; cursor: pointer; }
.mode-row b { font-size: 16px; }
.mode-row span { display: block; font-size: 12px; color: #8395a7; margin-top: 3px; }
.mode-row:hover { border-color: #c8d6e5; }
.mode-row.active { border-color: #a55eea; }
.mode-row.active b { color: #d3a8ff; }
/* 🎭 the role row at the bottom of the mode sheet */
.mode-role { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mr-label { font-size: 13px; color: #8395a7; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; }
#role-pref { flex: 1; display: flex; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,0.25); }
.rp-btn { flex: 1; padding: 8px 4px; border: 0; background: #1e2533; color: #aab8c8;
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.4px; }
.rp-btn + .rp-btn { border-left: 1px solid rgba(255,255,255,0.15); }
.rp-btn.active { background: #54a0ff; color: #10141c; }

/* 🗓️ today's quests, as small pills above the menu buttons; tap opens the panel */
#quest-pills { pointer-events: auto; display: flex; flex-direction: column; gap: 6px; }
.q-pill { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 13px; border-radius: 999px; background: rgba(20,26,34,0.85);
    border: 2px solid rgba(255,255,255,0.2); color: #c9d6e2; font-size: 12px;
    font-family: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.q-pill:hover { border-color: #c8d6e5; }
.q-pill b { color: #feca57; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-pill.done { border-color: #2ed573; }
.q-pill.done, .q-pill.done b { color: #2ed573; }


.mm-play {
    pointer-events: auto;
    /* PLAY sets the width of the whole stack; the others stretch to match */
    width: 100%;
    box-sizing: border-box;
    padding: 22px 70px;
    font-family: inherit;
    font-size: 34px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #2ed573, #1da355);
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 0 #158a44, 0 12px 24px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
.mm-play:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #158a44, 0 4px 12px rgba(0,0,0,0.4);
}

/* ============ RANK LADDER (main menu, left column) ============ */
/* 🧱 the whole left stack scales and is positioned as one; the ladder inside
   it is what gives up height when the frame is short. */
#mm-left {
    position: absolute;
    left: 30px;
    top: clamp(118px, 24vh, 170px);
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    transform: scale(max(0.85, var(--ui-scale)));
    transform-origin: top left;
    box-sizing: border-box;
    /* divided by the scale because max-height is measured before the transform */
    max-height: calc((100vh - clamp(118px, 24vh, 170px) - 14px) / max(0.85, var(--ui-scale)));
    pointer-events: auto;
}
#main-menu.visible #mm-left { display: flex; }
.mm-side {
    flex: none;
    background: rgba(30, 39, 46, 0.82);
    border: 2px solid #576574;
    border-radius: 12px;
    color: #dfe6e9;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    padding: 9px 12px;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.mm-side:hover { border-color: #54a0ff; color: #fff; }
#rank-ladder {
    /* a flex child now, not positioned: it shrinks first and scrolls inside
       itself so the buttons above and below are never pushed off screen */
    flex: 0 1 auto;
    min-height: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(30, 39, 46, 0.82);
    border: 2px solid #576574;
    border-radius: 14px;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: thin;
    /* #main-menu is pointer-events:none and its children opt back in — the
       ladder never did, so it LOOKED scrollable but no touch, drag or wheel
       ever reached it: the hit test landed on the canvas behind. */
    pointer-events: auto;
}
#main-menu.visible #rank-ladder { display: flex; }
.rl-title {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c8d6e5;
    margin-bottom: 4px;
}
.rl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid transparent;
}
.rl-row canvas { width: 22px; height: 22px; flex: 0 0 auto; }
.rl-name { font-size: 14px; font-weight: bold; color: #dfe6e9; min-width: 96px; }
.rl-pts { font-size: 12px; color: #8395a7; font-variant-numeric: tabular-nums; }
.rl-row.locked .rl-name { color: #8395a7; }
.rl-row.locked canvas { opacity: 0.45; filter: grayscale(0.4); }
.rl-row.done .rl-pts::after { content: ' ✓'; color: #2ed573; }
.rl-row.cur {
    border-color: #feca57;
    background: rgba(254, 202, 87, 0.14);
}
.rl-row.cur .rl-name { color: #feca57; }
.rl-row.cur .rl-pts { color: #dfe6e9; }

/* ============ ACHIEVEMENTS ============ */
#ach-screen {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
}
#ach-screen.visible { display: flex; }
/* 🗓️ daily quests — same modal skeleton and row look as achievements */
#quest-screen { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
#quest-screen.visible { display: flex; }
#quest-timer { color: #feca57; font-variant-numeric: tabular-nums; }
/* one modal, two tabs: Quests | Achievements (the merged menu button) */
.qa-tabs { display: flex; gap: 6px; }
.qa-tabs button { padding: 8px 14px; border-radius: 10px; border: 2px solid transparent; background: none;
    color: #8395a7; font-family: inherit; font-size: 17px; font-weight: bold; cursor: pointer; }
.qa-tabs button.active { color: #fff; background: #1e2533; border-color: #3a4560; cursor: default; }
.qa-tabs button:not(.active):hover { color: #c8d6e5; }

.quest-sub { font-size: 12px; color: #8395a7; margin: 2px 0 10px; }
#quest-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scrollbar-width: thin; }
#quest-close { width: 38px; height: 38px; font-size: 18px; color: #fff; background: #576574; border: none; border-radius: 10px; cursor: pointer; }

.ach-card {
    width: min(460px, 92vw);
    background: #2d3446;
    border: 2px solid #576574;
    border-radius: 18px;
    padding: 18px 22px 22px 22px;
    box-sizing: border-box;
    zoom: max(0.85, var(--card-scale));
    max-height: calc(88vh / max(0.85, var(--card-scale)));
    display: flex;
    flex-direction: column;
}
#ach-close {
    width: 38px; height: 38px;
    font-size: 18px;
    color: #fff;
    background: #576574;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
#ach-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scrollbar-width: thin; }
.ach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e2533;
    border: 2px solid #3a4560;
    border-radius: 12px;
    padding: 8px 12px;
}
.ach-row.done { border-color: #2ed573; }
.ach-info { flex: 1; min-width: 0; }
.ach-name { font-size: 15px; font-weight: bold; color: #dfe6e9; }
.ach-row.done .ach-name { color: #2ed573; }
.ach-desc { font-size: 12px; color: #8395a7; }
.ach-bar { height: 6px; background: #12161f; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.ach-fill { height: 100%; background: #54a0ff; border-radius: 3px; }
.ach-row.done .ach-fill { background: #2ed573; }
.ach-right { flex: 0 0 auto; text-align: right; font-size: 12px; color: #feca57; font-weight: bold; white-space: nowrap; }
.ach-prog { display: block; color: #8395a7; font-weight: normal; font-variant-numeric: tabular-nums; }
/* how many players hold this one. Sits on the description line so 28 rows do
   not each grow taller; it wraps to its own line on a narrow phone. */
.ach-rare { color: #6b7c8c; font-weight: 600; font-variant-numeric: tabular-nums; }
.ach-rare.rare { color: #feca57; }
.si-buy.si-locked { background: #2d3446; color: #8395a7; border: 2px solid #576574; font-size: 11px; }

/* ============ SHOP ============ */
#shop-screen {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
}
#shop-screen.visible { display: flex; }
.shop-card {
    width: min(680px, 92vw);
    zoom: max(0.85, var(--card-scale));
    max-height: calc(88vh / max(0.85, var(--card-scale)));
    display: flex;
    flex-direction: column;
    background: #2d3446;
    border: 2px solid #576574;
    border-radius: 18px;
    padding: 18px;
    box-sizing: border-box;
}
.shop-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.shop-head h2 { margin: 0; flex: 0 0 auto; font-size: 26px; }
.shop-coins {
    margin-left: auto;
    color: #feca57;
    font-size: 20px;
    font-weight: bold;
}
#shop-close {
    width: 38px; height: 38px;
    font-size: 18px;
    color: #fff;
    background: #576574;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.shop-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.shop-tab {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: #c8d6e5;
    background: #1e2533;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.shop-tab.active { color: #fff; border-color: #54a0ff; background: #34405a; }
#shop-items {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 4px;
}
.shop-item {
    background: #1e2533;
    border: 2px solid #3a4560;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-item .si-icon { font-size: 40px; }
.shop-item .si-name { font-weight: bold; font-size: 15px; }
.shop-item .si-desc { font-size: 11px; opacity: 0.7; min-height: 30px; }
.shop-item button {
    margin-top: auto;
    padding: 9px;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.si-buy { background: #feca57; color: #1e272e; }
.si-buy:disabled { background: #576574; color: #95a5a6; cursor: not-allowed; }
.si-equip { background: #54a0ff; color: #fff; }
.si-equipped { background: #2ed573; color: #fff; }

#overlay-shop-btn {
    margin-top: 12px;
    padding: 12px 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    color: #1e272e;
    background: #feca57;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}
#overlay-shop-btn:hover { background: #ffd97a; }

#overlay-menu-btn {
    margin: 12px 0 0 10px;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    color: #c8d6e5;
    background: #2d3446;
    border: 2px solid #576574;
    border-radius: 12px;
    cursor: pointer;
}
#overlay-menu-btn:hover { border-color: #c8d6e5; color: #fff; }
#overlay-menu-btn:disabled, #home-btn:disabled { opacity: 0.35; cursor: default; }
#overlay-menu-btn:disabled:hover { border-color: #576574; color: #c8d6e5; }

/* ============ AUDIO SETTINGS POPUP ============ */
#audio-screen {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}
#audio-screen.visible { display: flex; }
.audio-card {
    width: min(360px, 92vw);
    zoom: max(0.85, var(--card-scale));
    max-height: calc(94vh / max(0.85, var(--card-scale)));
    overflow-y: auto;
    background: #2d3446;
    border: 2px solid #576574;
    border-radius: 18px;
    padding: 18px 22px 22px 22px;
    box-sizing: border-box;
}
.audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.audio-head h2 { margin: 0; }
#audio-close {
    width: 38px; height: 38px;
    font-size: 18px;
    color: #fff;
    background: #576574;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.audio-track {
    text-align: center;
    color: #feca57;
    font-weight: bold;
    font-size: 16px;
    margin: 8px 0 14px 0;
    min-height: 20px;
}
.audio-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.audio-btn {
    padding: 9px 14px;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    color: #c8d6e5;
    background: #1e2533;
    border: 2px solid #3a4560;
    border-radius: 10px;
    cursor: pointer;
}
.audio-btn:hover { border-color: #54a0ff; color: #fff; }
.audio-btn.active { background: #54a0ff; border-color: #54a0ff; color: #fff; }
.audio-btn.off { background: #ff4757; border-color: #ff4757; color: #fff; }
.audio-play { min-width: 76px; }
.audio-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #c8d6e5;
    margin: 12px 2px 6px 2px;
}
#audio-screen input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: #54a0ff;
}
.audio-mute-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #3a4560;
    font-weight: bold;
    font-size: 15px;
}

/* ============ BOTTOM BANNER AD (320x50, stuck to the frame bottom) ============ */
#banner-holder {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 320px;
    height: 50px;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
}
#banner-container { width: 320px; height: 50px; }

/* the result card shrinks as a whole (zoom keeps the layout intact) on short
   frames and when the banner strip claims the bottom — see --card-scale. */

/* ============ 🏆 CHAMPIONSHIP ============ */
/* it sits right above PLAY and has to read as connected to it */
.champ-accent { border-color: #feca57 !important; color: #ffe9a8 !important; }
.champ-accent.champ-off { border-color: #576574 !important; color: #8b97ab !important; }
.champ-sub { display: block; font-size: 11px; font-weight: normal; opacity: 0.85; }


#champ-screen {
    position: fixed; inset: 0; z-index: 95; display: none;
    align-items: center; justify-content: center; background: rgba(8, 11, 18, 0.82);
}
#champ-screen.visible { display: flex; }
#champ-list {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; flex: 1 1 auto; min-height: 0;
    padding-right: 4px; scrollbar-width: thin;
    overscroll-behavior: contain;   /* the page behind must not scroll with it */
}
#champ-note { flex: none; }
.cp-row {
    display: flex; align-items: center; gap: 10px;
    background: #232c3d; border: 2px solid #000; border-radius: 9px; padding: 7px 10px;
}
.cp-row.me { border-color: #54a0ff; }
.cp-place { font-weight: 900; font-size: 15px; min-width: 30px; text-align: center; color: #8b97ab; }
.cp-row.p1 .cp-place { color: #ffd32a; }
.cp-row.p2 .cp-place { color: #dfe6e9; }
.cp-row.p3 .cp-place { color: #e58e26; }
.cp-name { flex: 1; font-weight: bold; color: #fff; overflow-wrap: anywhere; }
.cp-wins { font-weight: 900; color: #2ed573; }
.cp-note { font-size: 12px; color: #8b97ab; padding: 6px 2px; }
.cp-live { color: #2ed573; font-weight: 900; }

/* ============ SITELOCK SCREEN ============ */
#lock-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: #161b26;
}
#lock-screen.visible { display: flex; }
.lock-card {
    text-align: center;
    zoom: max(0.85, var(--card-scale));
    background: #205c6b;
    border: 4px solid #000;
    border-radius: 16px;
    padding: 34px 44px;
    box-shadow: 8px 8px 0px #000;
    max-width: min(420px, 88vw);
}
.lock-card h1 {
    margin: 0 0 14px 0;
    font-size: 30px;
    color: #feca57;
    text-shadow: 3px 3px 0px #000;
}
.lock-card p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px 0;
}
.lock-btn {
    display: inline-block;
    padding: 14px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #2ed573, #1da355);
    border-radius: 14px;
    box-shadow: 0 6px 0 #158a44, 0 10px 20px rgba(0,0,0,0.4);
}
.lock-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #158a44; }

/* ============ HOME BUTTON (in-game, back to menu) ============ */
#home-btn {
    position: fixed;
    top: 12px;
    right: 64px;
    z-index: 60;
    width: 42px;
    height: 42px;
    background: rgba(30, 39, 46, 0.85);
    border: 2px solid #576574;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transform: scale(var(--ctl-scale));
    transform-origin: top right;
}
#home-btn:hover { border-color: #c8d6e5; }

/* ============ 😀 EMOTE REACTIONS ============ */
#emote-wrap {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: scale(var(--ctl-scale));
    transform-origin: bottom right;
}
#emote-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(30, 39, 46, 0.85);
    border: 2px solid #576574;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: border-color 0.15s, transform 0.15s;
}
#emote-toggle:hover { border-color: #c8d6e5; }
#emote-toggle.open { border-color: #feca57; transform: scale(1.05); }
/* never sit under the banner ad (bottom-center) — hide the button while it shows */
body.banner-on #emote-wrap { display: none !important; }
/* on touch devices the bottom corners belong to the joystick + jump button, so
   move the reaction button to the top-right (below the mute button) and open the
   palette DOWNWARD (column-reverse keeps the toggle pinned in place) */
/* On touch the reactions move under the mute button. --ctl-scale bottoms out
   at 0.75, which shrank a 46px button to 35px — under the 44px floor and easy
   to miss entirely. Hold it at a real tap target. */
body.touch #emote-wrap { top: 58px; right: 10px; bottom: auto; flex-direction: column-reverse;
    transform-origin: top right; transform: scale(max(0.96, var(--ctl-scale))); }
#emote-palette {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(30, 39, 46, 0.92);
    border: 2px solid #576574;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    width: min(312px, 72vw);
    max-height: calc(46vh / var(--ctl-scale));
    overflow-y: auto;
}
#emote-palette.open { display: flex; }
.emote-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(72, 84, 96, 0.6);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.emote-btn:hover { background: rgba(102, 118, 138, 0.9); border-color: #feca57; transform: scale(1.08); }
.emote-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.emote-btn img { width: 32px; height: 32px; object-fit: contain; image-rendering: auto; pointer-events: none; }
.emote-btn.sel { border-color: #2ed573; background: rgba(46, 213, 115, 0.25); }
@media (max-height: 620px) {
    #emote-wrap { right: 8px; bottom: 8px; }
}

/* ---- shop "Reactions" tab: auto-reaction slot config + unlock grid ---- */
/* these rows sit inside the shop's item grid, so they must span every column */
.emoji-slots, .emoji-choose-hint, .emoji-chooser { grid-column: 1 / -1; }
.emoji-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 4px 0 10px;
}
.emoji-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(72, 84, 96, 0.35);
    border: 2px solid #576574;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}
.emoji-slot:hover { border-color: #c8d6e5; }
.emoji-slot.active { border-color: #feca57; background: rgba(254, 202, 87, 0.16); }
.emoji-slot-face {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1;
}
.emoji-slot-face img { width: 30px; height: 30px; object-fit: contain; }
.emoji-slot-label { font-size: 13px; color: #dfe6e9; font-weight: 600; line-height: 1.2; }
.emoji-choose-hint { font-size: 13px; color: #feca57; margin: 2px 0 6px; font-weight: 600; }
.emoji-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.emoji-ico {
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1;
}
.emoji-ico img { width: 40px; height: 40px; object-fit: contain; }
@media (min-width: 620px) {
    .emoji-slots { grid-template-columns: repeat(4, 1fr); }
    .emoji-slot { flex-direction: column; text-align: center; gap: 5px; }
}

/* ============ PRIVATE ROOM MODAL ============ */
#private-screen {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}
#private-screen.visible { display: flex; }
.prv-card {
    width: min(380px, 92vw);
    zoom: max(0.85, var(--card-scale));
    max-height: calc(94vh / max(0.85, var(--card-scale)));
    overflow-y: auto;
    background: #2d3446;
    border: 2px solid #576574;
    border-radius: 18px;
    padding: 18px 22px 22px 22px;
    box-sizing: border-box;
}
.prv-text { font-size: 13px; line-height: 1.5; color: #c8d6e5; margin: 4px 0 16px 0; }
/* ⏱️ the two round-length sliders in the private-room modal */
.prv-time { margin: 0 2px 12px 2px; }
.prv-time label { display: block; font-size: 13px; font-weight: bold; color: #c8d6e5; margin-bottom: 8px; }
.prv-time b { color: #feca57; font-variant-numeric: tabular-nums; }
.prv-time input[type="range"] { width: 100%; margin-top: 4px; accent-color: #54a0ff; }
.prv-bots {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #c8d6e5;
    margin: 0 2px 12px 2px;
    cursor: pointer;
}
.prv-bots input { accent-color: #54a0ff; margin-right: 6px; }
.prv-big {
    width: 100%;
    padding: 14px;
    font-family: inherit;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #2ed573, #1da355);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 0 #158a44;
}
.prv-big:active { transform: translateY(3px); box-shadow: 0 1px 0 #158a44; }
.prv-divider {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #95a5a6;
    margin: 16px 0 10px 0;
}
.prv-join-row { display: flex; gap: 8px; }
#prv-code {
    flex: 1;
    min-width: 0;
    padding: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: #1e2533;
    border: 2px solid #3a4560;
    border-radius: 10px;
    outline: none;
}
#prv-code:focus { border-color: #54a0ff; }
#prv-join {
    padding: 12px 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: #54a0ff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

/* ============ PRIVATE ROOM BAR (menu, top-center) ============ */
#room-bar {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) scale(var(--ctl-scale));
    transform-origin: top center;
    z-index: 85;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 18px;
    background: rgba(30, 39, 46, 0.9);
    border: 2px solid #feca57;
    border-radius: 16px;
    backdrop-filter: blur(4px);
}
#room-bar-code {
    color: #feca57;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
}
#room-bar button {
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}
#room-copy { background: #feca57; color: #1e272e; }
#room-copy:hover { background: #ffd97a; }
#room-leave { background: #2d3446; color: #c8d6e5; border: 2px solid #576574 !important; }
#room-leave:hover { color: #fff; border-color: #c8d6e5 !important; }

/* private-room members: PLAY is replaced by this pulsing wait pill */
#wait-host {
    pointer-events: none;
    padding: 20px 44px;
    font-size: 22px;
    font-weight: bold;
    color: #feca57;
    background: rgba(45, 52, 70, 0.92);
    border: 2px solid #feca57;
    border-radius: 18px;
    animation: wait-pulse 1.6s ease-in-out infinite;
}
@keyframes wait-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* spectator attention bounce — any input while WATCHING pops the banner */
@keyframes spec-bounce {
    0%   { transform: translateX(-50%) translateY(0) scale(var(--ui-scale)); }
    30%  { transform: translateX(-50%) translateY(0) scale(calc(var(--ui-scale) * 1.18)); }
    60%  { transform: translateX(-50%) translateY(0) scale(calc(var(--ui-scale) * 0.94)); }
    100% { transform: translateX(-50%) translateY(0) scale(var(--ui-scale)); }
}
#match-banner.spec-bounce { animation: spec-bounce 0.5s ease; }

/* ============ IN-GAME ROOM CODE TAG (with Invite) ============ */
#room-code-tag {
    position: fixed;
    left: 20px;
    bottom: 90px;
    z-index: 55;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 14px;
    background: rgba(30, 39, 46, 0.85);
    color: #feca57;
    border: 2px solid #feca57;
    border-radius: 14px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    transform: scale(var(--ctl-scale));
    transform-origin: bottom left;
}
#room-tag-invite {
    pointer-events: auto;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    color: #1e272e;
    background: #feca57;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}
#room-tag-invite:hover { background: #ffd97a; }

/* disabled menu buttons (e.g. invite while still connecting) */
.mm-shop:disabled { opacity: 0.45; cursor: default; }
.mm-shop:disabled:hover { border-color: #576574; }

/* ============ CUSTOM SCROLLBARS (shop, overlay) ============ */
#shop-items::-webkit-scrollbar,
.overlay-card::-webkit-scrollbar,
.shop-card::-webkit-scrollbar {
    width: 10px;
}
#shop-items::-webkit-scrollbar-track,
.overlay-card::-webkit-scrollbar-track,
.shop-card::-webkit-scrollbar-track {
    background: #1e2533;
    border-radius: 5px;
}
#shop-items::-webkit-scrollbar-thumb,
.overlay-card::-webkit-scrollbar-thumb,
.shop-card::-webkit-scrollbar-thumb {
    background: #576574;
    border-radius: 5px;
    border: 2px solid #1e2533;
}
#shop-items::-webkit-scrollbar-thumb:hover,
.overlay-card::-webkit-scrollbar-thumb:hover,
.shop-card::-webkit-scrollbar-thumb:hover {
    background: #54a0ff;
}
#shop-items, .overlay-card { scrollbar-width: thin; scrollbar-color: #576574 #1e2533; }

/* Small frames (e.g. Chromebook 764x385): the banner stays centred and scales
   with the rest of the HUD, and --tut-max-w keeps it clear of the palette. */
@media (max-width: 900px), (max-height: 500px) {
    #tutorial-banner { padding: 8px 12px; }
}

/* Short frames: --ui-scale / --ctl-scale / --card-scale already shrink every
   panel continuously, so all that is left here is pulling things in off the
   edges so the smaller HUD does not float in the corners. */
@media (max-height: 620px) {
    #ui-container { top: 8px; left: 8px; }
    #paintMenu { right: 10px; }
    #mute-btn { right: 8px; }
    #home-btn { right: 48px; }
    #cg-login-btn { top: 64px; right: 12px; }
    #room-code-tag { bottom: 74px; left: 12px; }
    #magnifier-btn { bottom: 12px; left: 12px; }
    #overlay-screen { padding-top: 10px; }
    .mm-actions { right: 14px; bottom: 12px; }
    #main-menu { padding: 14px; }
    #toast { bottom: 60px; }
}

/* ============ MUTE BUTTON ============ */
#mute-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 60;
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 1;
    background: rgba(30, 39, 46, 0.85);
    border: 2px solid #576574;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transform: scale(var(--ctl-scale));
    transform-origin: top right;
}
#mute-btn:hover { border-color: #c8d6e5; }
/* login button lives on the MENU only, below the coin pill so nothing overlaps */
#cg-login-btn { top: 84px; right: 30px; }

/* ============ EARLY-OUT OFFER (caught/disarmed with >60s left) ============ */
#requeue-panel {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 105;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: rgba(32, 92, 107, 0.96);
    border: 3px solid #000;
    border-radius: 14px;
    box-shadow: 5px 5px 0 #000;
    text-align: center;
    zoom: max(0.85, var(--card-scale));
}
#requeue-panel.visible { display: flex; }
#rq-title { font-size: 18px; font-weight: 900; color: #feca57; text-shadow: 2px 2px 0 #000; }
.rq-text { font-size: 13px; font-weight: bold; color: #fff; }
.rq-btns { display: flex; gap: 10px; }
#rq-yes {
    padding: 9px 18px;
    font-family: inherit; font-size: 14px; font-weight: bold;
    color: #1e272e;
    background: linear-gradient(90deg, #2ed573, #7bed9f);
    border: 3px solid #000; border-radius: 10px;
    box-shadow: 3px 3px 0 #000; cursor: pointer;
}
#rq-yes:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000; }
#rq-no {
    padding: 9px 16px;
    font-family: inherit; font-size: 14px; font-weight: bold;
    color: #c8d6e5;
    background: #2d3446;
    border: 3px solid #000; border-radius: 10px;
    box-shadow: 3px 3px 0 #000; cursor: pointer;
}

/* ============ AFK WARNING ============ */
#idle-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 115;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 44px;
    background: rgba(30, 39, 46, 0.96);
    border: 4px solid #ff4757;
    border-radius: 18px;
    box-shadow: 0 0 0 6px rgba(255, 71, 87, 0.25), 8px 8px 0 rgba(0,0,0,0.6);
    text-align: center;
    pointer-events: none;
    zoom: max(0.85, var(--card-scale));
    animation: iw-pulse 1s ease-in-out infinite;
}
#idle-warning.visible { display: flex; }
@keyframes iw-pulse {
    0%, 100% { border-color: #ff4757; }
    50% { border-color: #feca57; }
}
.iw-title {
    font-size: 30px;
    font-weight: 900;
    color: #ff6b81;
    text-shadow: 2px 2px 0 #000;
}
.iw-text { font-size: 14px; font-weight: bold; color: #dfe6e9; }
#iw-count {
    font-size: 56px;
    font-weight: 900;
    color: #feca57;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/* ============ TOAST ============ */
#toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%) translateY(20px) scale(var(--ctl-scale));
    transform-origin: bottom center;
    z-index: 120;
    max-width: min(520px, 86vw);
    padding: 12px 22px;
    background: rgba(30, 39, 46, 0.95);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border: 2px solid #feca57;
    border-radius: 14px;
    text-align: center;
    word-break: break-all;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(var(--ctl-scale)); }

/* ============ REWARDED AD BUTTON (Shop) ============ */
#reward-ad-btn {
    margin: 0 4px 12px 4px;
    padding: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    color: #1e272e;
    background: linear-gradient(90deg, #2ed573, #7bed9f);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
#reward-ad-btn:disabled { opacity: 0.5; cursor: wait; }

/* ============ EMOJI-FREE ICONOGRAPHY ============ */
/* Gold coin icon used everywhere a coin amount is shown */
.coin-ico {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, #feca57 55%, #d99a2b);
    border: 0.12em solid #8a5f16;
    box-sizing: border-box;
    vertical-align: -0.08em;
    margin-right: 0.32em;
}

/* Online/offline status dot on the start overlay */
#net-status.online::before,
#net-status.offline::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    border: 2px solid rgba(0, 0, 0, 0.35);
    box-sizing: content-box;
    vertical-align: 0;
}
#net-status.online::before { background: #2ed573; }
#net-status.offline::before { background: #ff4757; }

/* Full-width hint line at the top of the Customize tab */
.shop-note {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: bold;
    color: #c8d6e5;
    opacity: 0.75;
    text-align: center;
    padding: 2px 8px 6px 8px;
}

/* Shop item SVG icons */
.shop-item .si-icon { font-size: 0; line-height: 0; }
.shop-item .si-icon svg { width: 44px; height: 44px; }

/* Mute + magnifier buttons center their SVGs */
#mute-btn { display: flex; align-items: center; justify-content: center; padding: 0; }
#magnifier-btn svg { vertical-align: middle; }

/* UI panels fade out when the player's stickman is behind them (JS toggles
   .ui-peek); hovering restores them so they stay usable. */
#ui-container { transition: opacity 0.25s ease; }
#match-banner { transition: transform 0.4s ease, opacity 0.25s ease; }
.ui-peek { opacity: 0.12 !important; }
.ui-peek:hover { opacity: 1 !important; }

/* CSS-drawn play arrow on the PLAY button */
.mm-play::after {
    content: '';
    display: inline-block;
    margin-left: 16px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    vertical-align: -1px;
}

/* ---- team-count pills in the match banner ---- */
.mb-count { padding: 3px 10px; border-radius: 10px; font-weight: bold; font-size: 14px; color: #fff; white-space: nowrap; }
.mb-count:empty { display: none; }
.mbh { background: #3867d6; }
.mbs { background: #e84118; }

/* ---- hider "zoom in & paint" nudge ---- */
#paint-hint { position: fixed; left: 50%; bottom: 23%; background: rgba(18, 23, 33, 0.93); color: #fff; padding: 10px 18px; border-radius: 12px; border: 2px solid #2ed573; font-size: 15px; display: none; z-index: 40; pointer-events: none; text-align: center; animation: ph-pulse 1.6s ease-in-out infinite; max-width: 86vw; }
#paint-hint.visible { display: block; }
#paint-hint b { color: #2ed573; }
@keyframes ph-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.045); } }

/* ---- round-end scoreboard ---- */
#overlay-board { margin: 10px auto 2px; max-width: 350px; max-height: 176px; overflow-y: auto; text-align: left; }
.ob-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.07); border-radius: 8px; padding: 5px 10px; margin-bottom: 4px; font-size: 14px; }
.ob-row.me { outline: 2px solid #f1c40f; }
.ob-name { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-rank { font-style: normal; font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 6px; color: #10141c; flex: none; }
.ob-stat { flex: none; font-weight: bold; }
.ob-stat.win { color: #2ed573; }
.ob-stat.lose { color: #ff4757; }
.ob-stat.seek { color: #ff9f43; }

/* ---- quick-chat row in the reaction palette ---- */
.qc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; max-width: 264px; }
.qc-btn { background: #2f3640; color: #fff; border: 2px solid #000; border-radius: 14px; padding: 5px 11px; font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }
.qc-btn:hover { background: #3d4654; }
.qc-btn:disabled { opacity: 0.45; cursor: default; }

/* ---- 👻 warm-up ghost badge ---- */
#match-role.ghost { color: #10141c; background: #a4b0be; }

/* the badge is one word, never two lines */
#match-role { white-space: nowrap; }

/* ---- Discord link in the settings panel ---- */
#discord-link { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; padding: 10px 14px; background: #5865f2; color: #fff; border: 2px solid #000; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: bold; text-decoration: none; cursor: pointer; }
#discord-link:hover { background: #6c78f5; }
#discord-link svg { flex: none; }


/* ---- touch scrolling for panels ----
   body carries touch-action:none, which the spec applies to touches STARTING
   on any descendant, so a scrollable panel must opt back in explicitly or a
   finger cannot pan it. (The class ladder ALSO needed pointer-events:auto —
   see #rank-ladder — without which no gesture reached it at all.) */
#mobile-controls, #joystick-base, #joystick-stick, #jump-btn { touch-action: none; }
#rank-ladder, #ach-list, #overlay-board, .shop-items, .shop-card, .audio-card,
.overlay-card, #paintMenu, #shop-screen, #ach-screen {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* ---- 🗺️ next-map vote (beside the result card) ---- */
#overlay-screen { flex-wrap: wrap; gap: 12px; align-content: flex-start; }
/* PORTRAIT PHONES: there is no second column, so "beside the result card"
   becomes "wrapped underneath, stretched to a 59px sliver" — the ballot was
   there but unreadable, which reads as the map choice being missing. Stack it
   properly at full width and let the overlay scroll to reach it. */
@media (orientation: portrait) and (max-width: 820px) {
    #overlay-screen {
        flex-direction: column; flex-wrap: nowrap;
        align-items: center; align-content: normal;
        overflow-y: auto;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    #map-vote {
        align-self: auto; flex: 0 0 auto;
        width: min(440px, 94vw);
    }
}
#map-vote {
    pointer-events: auto;
    /* fill the column beside the result card instead of hugging six tiny
       thumbnails — the ballot is a headline feature, not a footnote */
    align-self: stretch;
    width: min(390px, 38vw);
    display: flex;
    flex-direction: column;
    background: #205c6b;
    border: 4px solid #000;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 8px 8px 0 #000;
    box-sizing: border-box;
    zoom: max(0.85, var(--card-scale));
    max-height: calc((100vh - 56px) / max(0.85, var(--card-scale)));
    overflow-y: auto;
    touch-action: pan-y;
}
.mv-title { font-size: 17px; font-weight: 900; color: #feca57; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; text-align: center; flex: none; }
/* the six tiles share the leftover height evenly, so the ballot always fills
   the card's column whatever the frame size */
#mv-list { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 10px; }
.mv-item {
    position: relative;
    width: 100%; height: 100%; min-height: 62px;
    padding: 0; margin: 0;
    border: 3px solid #000; border-radius: 11px;
    overflow: hidden; cursor: pointer; background: #123;
    font-family: inherit;
}
.mv-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mv-item:hover { border-color: #c8d6e5; }
.mv-item.mine { border-color: #2ed573; box-shadow: 0 0 0 3px #2ed573; }
.mv-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.66); color: #fff;
    font-size: 13px; font-weight: bold; line-height: 1.7;
    text-transform: capitalize; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.mv-count {
    position: absolute; top: 4px; right: 4px;
    min-width: 24px; padding: 0 6px;
    background: #feca57; color: #10141c;
    font-size: 15px; font-weight: 900; line-height: 24px;
    border: 2px solid #000;
    border-radius: 12px; text-align: center;
    pointer-events: none;
}
/* narrow frames: the ballot goes under the card as one wide row */
/* Only PORTRAIT phones wrap the ballot under the card — a short landscape
   frame has no vertical room for a second row, so there it stays beside the
   card and simply narrows. */
@media (max-width: 560px) {
    #map-vote { align-self: auto; width: min(420px, 94vw); }
    #mv-list { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 62px; }
    .mv-title { font-size: 14px; margin-bottom: 7px; }
    .mv-name { font-size: 11px; line-height: 1.6; }
}

/* ---- warm-up notice: its own full-width line under the banner row ---- */
#match-banner { flex-wrap: wrap; justify-content: center; }
/* the pills keep their size and the phase text gives way instead, so
   "2 seekers" can never be pushed onto a second line */
#match-banner > span { flex: none; }
#match-phase { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* narrow frames: tighter spacing, and the pills carry bare counts (set in
   updateMatchHud) so the row still fits on one line */
/* Narrow OR short: a landscape phone is 844 wide and 390 tall, so a
   width-only breakpoint gave it the roomy desktop banner and it wrapped to
   three lines. updateMatchHud() gates its bare-count pills on the same pair. */
@media (max-width: 700px), (max-height: 520px) {
    /* NOT nowrap. #mb-note is a full-width child that needs its own row, and
       forcing one line pushed it straight out of the banner background — the
       "banner does not cover all the text" report. The pill wording is what
       keeps the main row to one line (see `tight` in updateMatchHud). */
    #match-banner {
        gap: 6px; padding: 5px 10px;
        /* left:50% means the layout box only gets the RIGHT HALF of the screen
           to size itself in, so the seeker pill wrapped to a second row on
           every portrait phone. max-content ignores that squeeze; the cap
           keeps it inside the frame, and divides by the scale because the
           banner is transform-scaled after layout. */
        width: max-content;
        max-width: calc(94vw / var(--ui-scale, 1));
    }
    #mb-note { white-space: normal; overflow-wrap: anywhere; }
    #match-timer { font-size: 34px; min-width: 44px; }
    .mb-count { padding: 3px 8px; }
}
#mb-note {
    display: none;
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #dfe4ea;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 4px;
    margin-top: 2px;
}
#mb-note.visible { display: block; }

/* Very narrow frames (portrait phones): the flavour line is the first thing
   to go — the role badge, the two count pills and the timer already say
   everything it does, and keeping it forced the row onto two lines. */
@media (max-width: 430px) {
    #match-phase { display: none; }
    #match-banner { gap: 5px; padding: 5px 9px; }
}

/* ---- 🔍 zoom panel (left edge, opposite the paint menu) ---- */
#zoom-panel {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%) scale(max(0.95, var(--ui-scale)));
    transform-origin: left center;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 176px;
    padding: 14px 14px 13px;
    background: rgba(30, 39, 46, 0.9);
    border: 2px solid #576574;
    border-radius: 14px;
    z-index: 16;
    /* The panel sits at top:50% — right in the left playfield. A solid
       pointer-events slab there ATE a seeker's hits on any hider behind it
       (the click never reached the canvas, so no swing happened at all) and
       :hover flicked it back to full opacity mid-swing. Same convention as
       #ui-container and #main-menu: the panel is inert, controls opt back in. */
    pointer-events: none;
    box-sizing: border-box;
}
#zoom-panel.visible { display: flex; }
.zp-title { font-size: 15px; font-weight: 900; color: #feca57; text-transform: uppercase; letter-spacing: 0.5px; }
#zoom-slider { width: 100%; margin: 0; accent-color: #54a0ff; height: 22px; pointer-events: auto; }
#zoom-val { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
#zoom-auto-row { pointer-events: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; color: #dfe4ea; cursor: pointer; }
#zoom-auto-row input { margin: 0; flex: none; accent-color: #2ed573; width: 18px; height: 18px; }
/* Short frames (any landscape phone): park it at the top-left, and make it
   COMPACT. At the old size it still reached down into the joystick — there is
   only ~145px of clear left edge between the HUD and the thumb zone on a
   844x390 screen, so the caption goes and the rows tighten. */
@media (max-height: 500px) {
    #zoom-panel { top: 94px; transform: translateY(0) scale(max(0.82, var(--ui-scale))); transform-origin: top left; width: 150px; padding: 8px; gap: 4px; }
    #zoom-panel .zp-title { display: none; }
    #zoom-panel #zoom-val { font-size: 16px; }
    #zoom-panel #zoom-auto-row { font-size: 10px; line-height: 1.2; }
    #zoom-panel #zoom-auto-row input { width: 16px; height: 16px; }
}

/* ---- 🎨 map painter ---- */
#map-editor {
    position: fixed; inset: 0; z-index: 120; display: none;
    flex-direction: column; background: #10141c;
}
#map-editor.visible { display: flex; }
.me-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; background: #1e272e; border-bottom: 2px solid #576574; flex: none;
}
.me-title { font-size: 18px; font-weight: 900; color: #feca57; }
.me-status { font-size: 12px; color: #7f8fa6; position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: help; }
/* 📐 the complexity meter: a bar and a number, no words. The words live in a
   popover: hover on desktop, tap on touch (the .show-tip class). */
.me-cx-bar { width: 74px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; display: inline-block; }
.me-cx-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.25s; }
.me-status b { font-size: 13px; }
.me-cx-tip { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    width: 230px; padding: 9px 11px; border-radius: 10px; background: #1e272e; color: #dfe6ee;
    border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    font-size: 12px; line-height: 1.35; cursor: default; }
.me-cx-tip span { display: block; }
.me-cx-tip span + span { margin-top: 6px; }
.me-status:hover .me-cx-tip, .me-status.show-tip .me-cx-tip { display: block; }
.me-spacer { flex: 1; }
.me-btn {
    font-family: inherit; font-size: 13px; font-weight: bold; color: #fff;
    background: #2f3640; border: 2px solid #000; border-radius: 9px;
    padding: 7px 13px; cursor: pointer;
}
.me-btn:hover { background: #3d4654; }
.me-btn.me-go { background: #2ed573; color: #10141c; }
.me-tool.active { background: #54a0ff; color: #10141c; }
.me-body { flex: 1; display: flex; min-height: 0; }
.me-tools {
    width: 190px; flex: none; padding: 12px; box-sizing: border-box;
    background: #1a222c; border-right: 2px solid #576574;
    overflow-y: auto; touch-action: pan-y;
    display: flex; flex-direction: column; gap: 14px;
}
.me-group { display: flex; flex-direction: column; gap: 6px; }
.me-label { font-size: 11px; font-weight: 900; color: #feca57; text-transform: uppercase; letter-spacing: .5px; }
#me-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.me-swatch { width: 100%; aspect-ratio: 1; border: 2px solid #000; border-radius: 5px; cursor: pointer; padding: 0; }
.me-swatch.sel { outline: 2px solid #fff; outline-offset: 1px; }
#me-size { width: 100%; accent-color: #54a0ff; }
.me-toolrow { display: flex; gap: 6px; flex-wrap: wrap; }
.me-toolrow .me-btn { flex: 1; padding: 7px 6px; }
.me-hint { font-size: 11px; color: #7f8fa6; line-height: 1.4; margin-top: auto; }
/* NO justify-content/align-items centring here. With overflow:auto, centring
   an oversized flex item spills it equally both ways and the start side
   becomes unreachable — you can scroll right and down, never left and up, so
   a zoomed-in painter simply could not reach two edges of their own map.
   margin:auto on the canvas centres it while it fits and stops clipping once
   it does not. */
.me-stage { flex: 1; min-width: 0; display: flex; padding: 12px; }
#me-canvas {
    background: #000; border: 2px solid #576574; border-radius: 8px;
    max-width: 100%; max-height: 100%; image-rendering: auto;
    cursor: crosshair; touch-action: none;
    /* the stage is a flexbox: without these, a zoomed canvas gets shrunk
       right back to fit. margin:auto centres it without clipping the start
       edges once it overflows (see .me-stage) */
    margin: auto;
    flex: none;
    margin: auto;
}
@media (max-width: 700px) {
    .me-body { flex-direction: column-reverse; }
    .me-tools { width: 100%; border-right: none; border-top: 2px solid #576574; flex-direction: row; flex-wrap: wrap; gap: 10px; max-height: 42vh; }
    .me-group { flex: 1 1 140px; }
    .me-hint { display: none; }
}

/* ---- map test bar: a second row INSIDE the match banner ---- */
#map-test-bar {
    display: none;
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 5px;
    margin-top: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #9fd0ff;
    pointer-events: none; /* the banner is inert — only the button acts */
}
#map-test-bar.visible { display: flex; }
#map-test-bar button { pointer-events: auto; }
#mt-back {
    font-family: inherit; font-size: 13px; font-weight: bold;
    background: #10141c; color: #fff; border: 2px solid #000;
    border-radius: 8px; padding: 5px 11px; cursor: pointer;
}

/* ---- submissions gallery inside the painter ---- */
#me-gallery-pane {
    display: none; width: 260px; flex: none; box-sizing: border-box;
    padding: 12px; background: #1a222c; border-left: 2px solid #576574;
    overflow-y: auto; touch-action: pan-y;
}
#me-gallery-pane.open { display: block; }
#me-gallery-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mg-row { background: #232c3d; border: 2px solid #000; border-radius: 9px; padding: 8px 10px; }
.mg-row.approved { border-color: #2ed573; }
.mg-row.gallery { border-color: #b4791f; }
.mg-row.rejected { border-color: #ffa502; /* amber, not alarm-red: these notes go to children */ }
.mg-title { font-size: 13px; font-weight: bold; color: #fff; }
.mg-status { font-size: 11px; color: #b8c2cf; line-height: 1.4; margin-top: 3px; }
.mg-redo { margin-top: 7px; width: 100%; padding: 6px; font-size: 12px; }
@media (max-width: 700px) {
    #me-gallery-pane { width: 100%; border-left: none; border-top: 2px solid #576574; max-height: 40vh; }
}

/* ---- painter: custom colour mixer, brush shapes, pixel mode ---- */
.me-custom { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.me-custom input[type=range] { width: 100%; margin: 0; height: 18px; }
#me-hue { accent-color: #ff7675; }
#me-light { accent-color: #dfe6e9; }
#me-swatch-preview {
    display: block; height: 22px; border: 2px solid #000; border-radius: 6px; background: #1d6f85;
}
.me-shape.active { background: #54a0ff; color: #10141c; }
.me-check {
    display: flex; align-items: center; gap: 7px; font-size: 11px;
    color: #cfd8e6; cursor: pointer; margin-top: 6px; line-height: 1.3;
}
.me-check input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: #2ed573; }
#me-pixel-size { width: 100%; margin: 4px 0 0; accent-color: #54a0ff; }

/* ---- editor v2: zoom, collapsible sections, brush ring ---- */
.me-zoom-wrap { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #cfd8e6; }
.me-zoom-wrap input { width: 110px; accent-color: #54a0ff; margin: 0; }
#me-zoom-val { font-size: 12px; font-weight: bold; min-width: 34px; }
.me-stage { overflow: auto; }
.me-group > .me-label { cursor: pointer; user-select: none; }
.me-group > .me-label::after { content: ' ▾'; opacity: 0.55; }
.me-group.collapsed > .me-label::after { content: ' ▸'; }
/* !important: children like #me-palette carry id-specificity that would
   otherwise beat this class rule and refuse to collapse */
#map-editor .me-group.collapsed > :not(.me-label) { display: none !important; }
#me-ring {
    position: fixed; display: none; pointer-events: none; z-index: 130;
    border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.75), inset 0 0 0 1.5px rgba(0,0,0,0.75);
    box-sizing: border-box;
}

/* ---- 🪙 extra review slot offer ---- */
#map-sent {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.72);
}
#map-sent .mp-card { text-align: center; }
#ms-discord {
    display: block;
    text-decoration: none;
    background: #5865F2;   /* Discord blurple — it reads as "that button" */
    color: #fff;
}
#me-pay {

    position: absolute; inset: 0; z-index: 10;
    display: none; align-items: center; justify-content: center;
    background: rgba(10, 13, 20, 0.75);
}
.mp-card {
    display: flex; flex-direction: column; gap: 10px;
    width: min(320px, 88vw); padding: 20px 22px;
    background: #1e2734; border: 3px solid #000; border-radius: 16px;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.45); text-align: center;
}
.mp-big { font-size: 30px; font-weight: 900; color: #feca57; }
.mp-text { font-size: 13px; color: #cfd8e6; line-height: 1.5; }
.mp-card .me-btn { padding: 11px; font-size: 14px; }
.mp-card .me-btn:disabled { opacity: 0.4; cursor: default; }
.mp-balance { font-size: 12px; color: #8b97ab; }

/* ---- 🗳️ community ballot pane + next-map art thumbs ---- */
#me-vote-pane {
    display: none; width: 300px; flex: none; box-sizing: border-box;
    padding: 12px; background: #1a222c; border-left: 2px solid #576574;
    overflow-y: auto; touch-action: pan-y;
}
#me-vote-pane.open { display: block; }
.mvp-title { font-size: 15px; font-weight: 900; color: #feca57; }
.mvp-sub { font-size: 11px; color: #8b97ab; margin: 4px 0 10px; }
#me-vote-list { display: flex; flex-direction: column; gap: 10px; }
.mvp-row { background: #232c3d; border: 2px solid #000; border-radius: 10px; overflow: hidden; }
.mvp-thumb { width: 100%; display: block; image-rendering: auto; }
.mvp-meta { font-size: 12px; font-weight: bold; color: #fff; padding: 6px 9px 0; }
.mvp-btns { display: flex; gap: 8px; padding: 7px 9px 9px; }
.mvp-btns button {
    flex: 1; font-size: 20px; padding: 7px 0; cursor: pointer;
    background: #2f3640; border: 2px solid #000; border-radius: 9px;
}
.mvp-btns button.on { background: #2ed573; }
.mvp-btns button:last-child.on { background: #ff4757; }
.mv-art { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
@media (max-width: 700px) {
    #me-vote-pane { width: 100%; border-left: none; border-top: 2px solid #576574; max-height: 45vh; }
}

/* ---- 🖼️ the gallery, in the editor's right-hand column ---- */
#me-wall-pane {
    display: none; width: 300px; flex: none; box-sizing: border-box;
    padding: 12px; background: #1a222c; border-left: 2px solid #576574;
    overflow-y: auto; touch-action: pan-y;
}
#me-wall-pane.open { display: block; }
#me-wall-list { display: flex; flex-direction: column; gap: 10px; }
.mw-row {
    background: #232c3d; border: 2px solid #000; border-radius: 10px;
    overflow: hidden; cursor: pointer;
}
.mw-thumb { width: 100%; display: block; image-rendering: auto; }
.mw-meta { font-size: 12px; font-weight: bold; color: #fff; padding: 6px 9px 8px; }
.mw-by { font-size: 11px; font-weight: normal; color: #8b97ab; }
#me-wall-view {
    position: absolute; inset: 0; z-index: 31;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.82);
}
/* the picture is the point, so it takes the room and the chrome shrinks
   around it — the same trap the player card fell into, capped up front */
/* .mp-card is 320px wide by design — a picture is the one thing in this
   game that deserves the whole window, so this one overrides that outright */
.mwv-card { text-align: center; width: min(1100px, 94vw); max-height: 92vh;
    display: flex; flex-direction: column; gap: 8px; }
.mwv-canvas {
    align-self: center;
    width: auto; height: auto; max-width: 100%; max-height: 66vh;
    border: 3px solid #000; border-radius: 8px; background: #0d1017;
}
.mwv-name { font-size: 17px; font-weight: 900; color: #fff; }
.mwv-by { font-size: 13px; color: #8b97ab; }
@media (max-width: 700px) {
    #me-wall-pane { width: 100%; border-left: none; border-top: 2px solid #576574; max-height: 45vh; }
    .mwv-canvas { max-height: 52vh; }
}

/* ---- 🕷️ Spider Sense button ---- */
#spider-btn {
    position: absolute; right: 20px; bottom: 210px;
    width: 62px; height: 62px; display: none;
    align-items: center; justify-content: center;
    font-size: 26px; font-family: inherit; font-weight: 900;
    background: #2f3640; color: #fff;
    border: 3px solid #000; border-radius: 50%;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
    transform: scale(var(--ctl-scale)); transform-origin: bottom right;
    z-index: 18; cursor: pointer; pointer-events: auto;
}
#spider-btn.ready { background: #8e44ad; animation: sp-pulse 1.3s ease-in-out infinite; }
@keyframes sp-pulse {
    0%, 100% { box-shadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 0 0 rgba(142,68,173,0.6); }
    50% { box-shadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 0 12px rgba(142,68,173,0); }
}

/* ---- 📊 camo score on the result card ---- */
#overlay-camo { margin: 6px 0 12px; line-height: 1; }
.oc-label { display: block; font-size: 13px; font-weight: 900; letter-spacing: 2px; color: #8fa4bb; }
.oc-num { display: block; font-size: 54px; font-weight: 900; color: #fff; text-shadow: 3px 3px 0 #000; }
.oc-pct { font-size: 26px; margin-left: 2px; }
.oc-grade { display: block; font-size: 13px; font-weight: bold; color: #c8d6e5; margin-top: 2px; }
#overlay-camo.great .oc-num { color: #2ed573; }
#overlay-camo.perfect .oc-num { color: #feca57; text-shadow: 3px 3px 0 #000, 0 0 22px rgba(254,202,87,0.75); }
#overlay-camo.slam { animation: oc-slam 0.42s cubic-bezier(.2,1.4,.4,1); }
@keyframes oc-slam {
    0% { transform: scale(2.1); opacity: 0; }
    60% { transform: scale(0.94); opacity: 1; }
    100% { transform: scale(1); }
}

/* camo readout docked in the map-vote panel (it has the spare room) */
#map-vote #overlay-camo {
    margin: 0 0 10px; padding-bottom: 9px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
#overlay-camo-slot:empty { display: none; }

/* On touch the bottom half of the screen belongs to the joystick, the zoom
   panel and the paint button, so the nudge cannot live down there — it landed
   on top of all three on small frames. Put it in the clear band under the
   match banner instead, and keep it narrow enough to miss the left lane. */
/* On a phone there is no free band for a floating nudge — every candidate
   spot belonged to the joystick, the zoom panel, the paint button or the
   palette, at one size or another. So on touch it stops floating and becomes
   the first line of the paint menu, which is exactly where the tools it talks
   about live. moveHintIntoMenu() does the reparenting. */
#paint-hint.in-menu {
    position: static;
    max-width: none; width: 100%;
    margin: 0; padding: 7px 9px;
    font-size: 12px; line-height: 1.35;
    border-width: 2px;
    animation: none;
    order: -1;
}

/* Finger-sized paint controls. These bases are chosen so that AFTER the touch
   --ui-scale floor (UI_TOUCH_ACROSS_FLOOR) they land back at roughly the
   desktop sizes — a 24px hex and a ~22px slider — instead of the 9px hexes and
   8px sliders a portrait phone was getting. */
body.touch .hex-cell { width: 30px; height: 34px; margin: 0 2px; }
body.touch .hex-row { margin-top: -7px; }
body.touch #cc-hue,
body.touch #cc-light,
body.touch #brush-slider { height: 28px; border-radius: 14px; }
body.touch #cc-hue::-webkit-slider-thumb,
body.touch #cc-light::-webkit-slider-thumb,
body.touch #brush-slider::-webkit-slider-thumb { width: 28px; height: 28px; }

/* 🏁 TIME'S UP — the 2s beat over the map before the result card appears.
   pointer-events:none so it never eats a tap, and it sits under the overlay's
   z-index so the card can come up on top of it if the two ever race. */
#time-up {
    position: fixed; inset: 0; z-index: 28;
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none; text-align: center;
}
#time-up.visible { display: flex; }
#time-up span {
    font-size: clamp(38px, 11vw, 120px);
    font-weight: 900; letter-spacing: 2px; color: #feca57;
    -webkit-text-stroke: 3px #000;
    text-shadow: 6px 6px 0 #000;
    animation: tu-pop 0.45s cubic-bezier(.2,1.6,.4,1) both;
}
#time-up small {
    margin-top: 10px; font-size: clamp(13px, 3.2vw, 20px);
    font-weight: 800; color: #fff;
    background: rgba(18, 23, 33, 0.85);
    border: 2px solid #000; border-radius: 10px; padding: 5px 14px;
    animation: tu-pop 0.45s 0.12s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes tu-pop {
    from { opacity: 0; transform: scale(0.55) translateY(18px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 🏅 RANK UP — the loudest moment in the game. Sits above the result card but
   pointer-events:none, so it can never swallow a tap on the buttons beneath. */
#rank-up {
    position: fixed; left: 0; right: 0; top: 16%;
    z-index: 45; display: none;
    flex-direction: column; align-items: center;
    pointer-events: none; text-align: center;
}
#rank-up.visible { display: flex; }
.ru-kicker {
    font-size: clamp(14px, 3.4vw, 22px); font-weight: 900; letter-spacing: 6px;
    color: #fff; background: #ee5253;
    border: 3px solid #000; border-radius: 8px; padding: 3px 16px;
    box-shadow: 4px 4px 0 #000;
    animation: ru-in 0.4s cubic-bezier(.2,1.7,.4,1) both;
}
.ru-name {
    margin-top: 8px;
    font-size: clamp(34px, 9vw, 86px); font-weight: 900; letter-spacing: 1px;
    color: #feca57; -webkit-text-stroke: 3px #000;
    text-shadow: 6px 6px 0 #000;
    animation: ru-in 0.5s 0.08s cubic-bezier(.2,1.7,.4,1) both, ru-glow 1.1s 0.55s ease-in-out infinite alternate;
}
.ru-sub {
    margin-top: 6px; font-size: clamp(12px, 2.8vw, 17px); font-weight: 800;
    color: #fff; background: rgba(18,23,33,.85);
    border: 2px solid #000; border-radius: 9px; padding: 4px 13px;
    animation: ru-in 0.45s 0.18s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes ru-in {
    from { opacity: 0; transform: scale(0.5) translateY(24px) rotate(-4deg); }
    to   { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
@keyframes ru-glow {
    from { filter: drop-shadow(0 0 0 rgba(254,202,87,0)); }
    to   { filter: drop-shadow(0 0 18px rgba(254,202,87,.85)); }
}
/* the camo grade word lands only once the number has finished climbing */
.oc-grade { transition: opacity 0.25s ease; }
.oc-grade.pop { animation: ru-in 0.35s cubic-bezier(.2,1.7,.4,1) both; }

/* the card's own promotion chip — the banner is gone by the time this shows,
   so this is what the player actually reads */
.or-up {
    display: inline-block; margin-top: 7px;
    background: #ee5253; color: #fff;
    border: 3px solid #000; border-radius: 9px;
    padding: 4px 14px; font-weight: 900; letter-spacing: .5px;
    box-shadow: 3px 3px 0 #000;
    animation: ru-in .4s cubic-bezier(.2,1.7,.4,1) both;
}

/* ==========================================================================
   📱 TOUCH LAYOUT
   The palette used to be a floating box scaled to fit BESIDE everything else.
   On a landscape phone that meant a 361x190 window holding 704px of content —
   two thirds of the colours unreachable, and every control finger-hostile.
   It is a full-height drawer on the right now, at natural size, opened by the
   PAINT button. Nothing has to share that space, so nothing has to shrink.
   ========================================================================== */
body.touch #paintMenu {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(330px, 76vw);
    height: 100%;
    max-height: none !important;
    border-radius: 16px 0 0 16px;
    border-width: 0 0 0 4px;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 10px;
    overflow-y: auto;
    z-index: 58;
    opacity: 1;
    transform: translateX(102%);          /* closed */
    transition: transform 0.22s ease;
    box-shadow: -6px 0 0 rgba(0,0,0,.45);
    pointer-events: auto;
}
body.touch #paintMenu.visible { transform: translateX(0); }
/* inside the drawer nothing is scaled, so the hit targets are the real ones */
body.touch #paintMenu .menu-tip { display: none; }

/* ---- the right-hand column: JUMP and HIT live in the thumb arc, the panel
   button sits above them so opening the drawer is never a mis-tap on JUMP --- */
#paint-btn, #zoom-out-btn, body.touch #magnifier-btn {
    position: fixed;
    right: 16px;
    left: auto;
    bottom: 150px;                         /* clears JUMP */
    top: auto;
    z-index: 57;
    transform: scale(var(--ctl-scale));
    transform-origin: bottom right;
}
/* seekers keep HIT under it, so the panel button steps up a slot */
#paint-btn.above-hit, #zoom-out-btn.above-hit, body.touch #magnifier-btn.above-hit {
    bottom: 258px;
}
body.touch #magnifier-btn {
    width: 74px; height: 74px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: rgba(30, 39, 46, 0.9); border: 3px solid #54a0ff;
    box-shadow: 4px 4px 0 #000;
}
body.touch #magnifier-btn.shown { display: flex; }
body.touch #magnifier-btn.active { background: #54a0ff; }
/* a word under the glyph — "PEEK"/"PAINT" is clearer than an icon alone */
.rc-label {
    position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
    font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #fff;
    text-shadow: 2px 2px 0 #000; pointer-events: none;
}

/* the panel buttons are real tap targets, and DONE floats ABOVE the open
   drawer — it is the only way back out, so it cannot sit behind it */
body.touch #paint-btn, body.touch #zoom-out-btn {
    width: 74px; height: 74px;
}
body.touch #zoom-out-btn { z-index: 59; border-color: #2ed573; }
body.touch #paint-btn { border-color: #feca57; }

/* DONE steps out of the drawer's way — floating it on top of the palette put
   it straight over the swatches it is meant to let you pick from */
body.touch #paintMenu.visible ~ #zoom-out-btn,
body.touch #zoom-out-btn { right: calc(min(330px, 76vw) + 16px); }

/* the left panel has room for its caption again now that the palette moved
   off to the right — an unlabelled slider and a checkbox told nobody anything */
@media (max-height: 500px) {
    body.touch #zoom-panel .zp-title { display: block; font-size: 12px; }
    body.touch #zoom-panel { gap: 6px; padding: 9px 10px; }
    body.touch #zoom-panel #zoom-auto-row { font-size: 11px; }
}

/* icon over word, not word across icon */
body.touch #paint-btn, body.touch #zoom-out-btn, body.touch #magnifier-btn {
    flex-direction: column; gap: 1px; padding-top: 4px;
}
body.touch .rc-label { position: static; transform: none; bottom: auto; left: auto; }
body.touch #magnifier-btn svg, body.touch #paint-btn svg, body.touch #zoom-out-btn svg {
    width: 24px; height: 24px;
}

/* 🎯 the eyedropper, armed. It is a mode, so it has to look like one — and
   the whole canvas gets a crosshair so it is obvious what to do next. */
#cc-eyedrop.armed {
    background: #feca57; border-color: #feca57;
    animation: ed-pulse 1s ease-in-out infinite;
}
#cc-eyedrop.armed svg path { fill: #1a1408; stroke: #1a1408; }
body.eyedropping #gameCanvas { cursor: crosshair; }
@keyframes ed-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(254,202,87,.7); }
    50%      { box-shadow: 0 0 0 9px rgba(254,202,87,0); }
}
body.touch #cc-eyedrop { width: 44px; height: 44px; }

/* ---- seeker's secondary column ----
   Five controls do not fit in one right-hand column on a 360px-tall frame:
   measured, spider overlapped HIT at every size, and PEEK ran into the
   reaction button and the mute button on short ones. PEEK and Spider Sense
   move inboard into their own column instead of stacking higher. */
body.touch #magnifier-btn,
body.touch #magnifier-btn.above-hit {
    right: 150px; bottom: 50px; top: auto;
    width: 62px; height: 62px;
}
body.touch #spider-btn {
    position: fixed;
    right: 150px; bottom: 122px; top: auto;
    transform: scale(var(--ctl-scale));
    transform-origin: bottom right;
}

/* DONE goes to the top: at mid-height it sat right on the character you are
   trying to paint, which is the one thing that must stay visible */
body.touch #zoom-out-btn, body.touch #zoom-out-btn.above-hit {
    top: 16px; bottom: auto;
    transform-origin: top right;
}

/* DONE as the drawer's own header button — full width, first thing in it */
body.touch #zoom-out-btn.in-menu {
    position: static; top: auto; right: auto; bottom: auto;
    width: 100%; height: 46px;
    flex: none; flex-direction: row; gap: 8px;
    border-radius: 10px; border: 3px solid #000;
    background: #2ed573; transform: none;
    order: -2; margin-bottom: 2px;
}
body.touch #zoom-out-btn.in-menu .rc-label { font-size: 15px; letter-spacing: 2px; }
body.touch #zoom-out-btn.in-menu svg { width: 20px; height: 20px; }

/* corner buttons stand down while the paint drawer is open */
body.touch.drawer-open #emote-wrap,
body.touch.drawer-open #mute-btn,
body.touch.drawer-open #home-btn { display: none !important; }

/* the paint phase is timed, so the countdown must survive the drawer opening.
   The banner is small once scaled, so re-centre it in the strip the drawer
   leaves rather than letting it disappear underneath. */
@media (orientation: landscape) {
    /* biased right of centre in the strip: dead-centre put it on the rank and
       ink panel in the top-left corner. Portrait has no strip worth using —
       the drawer takes 76vw there and the banner stays where it is. */
    body.touch.drawer-open #match-banner {
        left: calc((100vw - min(330px, 76vw)) * 0.72);
    }
}

/* 📬 map news on the main menu — the verdict on a map you sent in. It waits
   for you rather than arriving while you are mid-round, and it is the only
   place a player ever finds out. */
#map-news {
    position: fixed; left: 50%; top: 14px;
    transform: translateX(-50%);
    z-index: 118; display: none;
    width: min(430px, 92vw);
    background: #1b2a3a; color: #e6ebf2;
    border: 4px solid #000; border-radius: 14px;
    box-shadow: 6px 6px 0 #000;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    pointer-events: auto;
    max-height: 70vh; overflow-y: auto;
}
#map-news.visible { display: block; }
.mn-head {
    font-weight: 900; font-size: 15px; letter-spacing: .5px;
    color: #feca57; margin-bottom: 8px;
}
.mn-row {
    background: #223448; border: 2px solid #000; border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px;
}
.mn-row b { display: block; font-size: 14px; margin-bottom: 2px; }
.mn-row span { font-size: 12.5px; line-height: 1.4; color: #cfd8e6; }
.mn-live { color: #7ee59a; }
.mn-vote { color: #8ec3ff; }
.mn-back { color: #ffc978; }
#mn-ok {
    width: 100%; min-height: 44px;
    background: #feca57; color: #1a1408;
    border: 3px solid #000; border-radius: 10px;
    font-weight: 900; font-size: 15px; cursor: pointer;
    box-shadow: 3px 3px 0 #000;
}

/* 🌍 language picker, styled to match the audio sliders it sits with */
.audio-select {
    width: 100%; margin: 2px 0 10px; padding: 7px 9px;
    background: #12161f; color: #dfe6e9;
    border: 1px solid #2d3646; border-radius: 8px;
    font-family: inherit; font-size: 14px; cursor: pointer;
}
.audio-select:focus { outline: none; border-color: #54a0ff; }

/* 🎲 the mode announcement at the top of a round. Never takes a click — the
   player is painting underneath it. */
#mode-card {
    position: fixed; left: 50%; top: 11%;
    transform: translate(-50%, -14px);
    background: rgba(18, 22, 31, 0.92);
    border: 2px solid #54a0ff; border-radius: 14px;
    padding: 12px 22px; text-align: center;
    max-width: min(560px, 88vw);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .35s ease, transform .35s ease;
}
#mode-card.show { opacity: 1; transform: translate(-50%, 0); }
#mode-card .mc-name {
    font-size: clamp(20px, 4.2vw, 30px); font-weight: bold;
    color: #54a0ff; letter-spacing: .5px;
}
#mode-card .mc-blurb { font-size: clamp(12px, 2.4vw, 15px); color: #dfe6e9; margin-top: 3px; }
#overlay-mode-btn { background: #2d3646; border-color: #54a0ff; }

/* 🏆 achievement celebration. Sits a little above centre so it never lands on
   the result card's headline, and never takes a tap. */
#ach-pop {
    position: fixed; left: 50%; top: 26%;
    transform: translate(-50%, 10px) scale(.92);
    background: linear-gradient(180deg, #1b2130, #12161f);
    border: 3px solid #feca57; border-radius: 18px;
    padding: 14px 30px; text-align: center;
    max-width: min(520px, 90vw);
    box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 22px rgba(254,202,87,.28);
    opacity: 0; pointer-events: none; z-index: 70;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,1.4,.5,1);
}
#ach-pop.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#ach-pop .ap-kicker {
    font-size: clamp(10px, 2.2vw, 13px); font-weight: 900; letter-spacing: 3px;
    text-transform: uppercase; color: #feca57;
}
#ach-pop .ap-name {
    font-size: clamp(22px, 5vw, 34px); font-weight: bold; color: #fff; margin: 2px 0 1px;
}
#ach-pop .ap-reward { font-size: clamp(13px, 2.6vw, 17px); color: #dfe6e9; }

/* 🚪 lobby browser — same sheet look as the mode picker */
/* 95, with the other sheets that open FROM the menu. At 62 it opened UNDER
   #main-menu (80): the room list drew behind the rank ladder and the button
   column, which reads as the panel being broken rather than badly stacked.
   Same fault the player card had at 63. */
#lobby-screen { position: fixed; inset: 0; z-index: 95; display: none;
    align-items: center; justify-content: center; background: rgba(6,9,14,.72); }
#lobby-screen.visible { display: flex; }
#lobby-screen .sheet-card {
    background: #12161f; border: 2px solid #2d3646; border-radius: 16px;
    width: min(460px, 92vw); max-height: 82vh; display: flex; flex-direction: column; padding: 12px; }
#lobby-screen .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#lobby-screen .sheet-title { font-size: 18px; font-weight: bold; color: #dfe6e9; flex: 1; }
#lobby-list { overflow-y: auto; flex: 1; min-height: 90px; }
.lobby-empty { color: #8395a7; font-size: 13px; text-align: center; padding: 22px 8px; }
.lobby-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border: 1px solid #2d3646; border-radius: 10px; margin-bottom: 7px; background: #171d28; }
.lobby-row.locked { opacity: .58; }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-size: 15px; font-weight: bold; color: #dfe6e9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { font-size: 12px; color: #8395a7; }
.lb-n { font-size: 13px; color: #feca57; font-variant-numeric: tabular-nums; flex: none; }
.lb-go { flex: none; }
.lobby-join { display: flex; gap: 8px; margin-top: 8px; }
.lobby-join input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid #2d3646; background: #0d1017; color: #dfe6e9; font-family: inherit; font-size: 14px; }

/* 🎨 menu backdrop panel */
#menubg-screen { position: fixed; inset: 0; z-index: 95; display: none;
    align-items: center; justify-content: center; background: rgba(6,9,14,.72); }
#menubg-screen.visible { display: flex; }
#menubg-screen .sheet-card {
    background: #12161f; border: 2px solid #2d3646; border-radius: 16px;
    width: min(420px, 92vw); padding: 12px;
    max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
#menubg-screen .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#menubg-screen .sheet-title { font-size: 18px; font-weight: bold; color: #dfe6e9; flex: 1; }
.mbg-note { font-size: 12.5px; color: #8395a7; margin: 0 0 9px; }
#menubg-preview { width: 100%; height: auto; display: block; border-radius: 10px; box-sizing: border-box;
    border: 1px solid #2d3646; background: #0d1017; image-rendering: pixelated; }
.mbg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mbg-acts .me-btn { flex: 1 1 auto; }

/* 🖌️ body paint editor — with the other sheets that open from the menu */
#cpaint-screen { position: fixed; inset: 0; z-index: 95; display: none;
    align-items: center; justify-content: center; background: rgba(6,9,14,.72); }
#cpaint-screen.visible { display: flex; }
#cpaint-screen .sheet-card {
    background: #12161f; border: 2px solid #2d3646; border-radius: 16px;
    width: min(420px, 92vw); padding: 12px;
    max-height: 92vh; overflow-y: auto; box-sizing: border-box; }
#cpaint-screen .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#cpaint-screen .sheet-title { font-size: 18px; font-weight: bold; color: #dfe6e9; flex: 1; }
#cpaint-canvas {
    display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
    background: #0d1017; border: 2px solid #2d3646; border-radius: 10px; box-sizing: border-box;
    touch-action: none; cursor: crosshair; }
#cpaint-swatches { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 10px 0 2px; }
.cp-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #000; cursor: pointer; padding: 0; }
.cp-sw.on { outline: 3px solid #fff; outline-offset: 1px; }

/* 🪪 player card */
/* ABOVE EVERY OTHER SHEET. This was 63 while the mode, quest and gift screens
   sit at 95-130, so any of those covered the card outright if one was open.
   Only the sitelock at 500 is allowed to win, because that one exists to stop
   the game rather than to sit beside it. */
#card-screen { position: fixed; inset: 0; z-index: 140; display: none;
    align-items: center; justify-content: center; background: rgba(6,9,14,.78); }
#card-screen.visible { display: flex; }
#card-screen .sheet-card {
    background: #12161f; border: 2px solid #2d3646; border-radius: 16px;
    width: min(940px, 94vw); padding: 12px;
    /* THE CARD HAS TO FIT THE WINDOW. Unconstrained, a 900x500 canvas at 94vw
       of a 1064px window renders ~555px tall — taller than the window on its
       own — so the header and the Save button were pushed clean outside the
       viewport. What was left visible was a full-bleed canvas with no chrome,
       which reads exactly like the card rendering in the background with no
       download button. */
    max-height: 92vh;
    display: flex; flex-direction: column; box-sizing: border-box; }
#card-screen .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex: none; }
#card-screen .sheet-title { font-size: 18px; font-weight: bold; color: #dfe6e9; flex: 1; }
/* width and height both auto with both maxima set: the canvas shrinks inside
   whatever room is left and keeps its own 9:5 aspect without being told */
#card-canvas {
    width: auto; height: auto;
    max-width: 100%;
    max-height: calc(92vh - 120px);
    margin: 0 auto; display: block; border-radius: 10px; flex: 0 1 auto; }
#card-screen .mbg-acts { flex: none; }