#cheese-touch-app { position: relative; background: #ffffff; min-height: 80vh; padding: 40px 0; }
.cheese-sky { position: absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.cheese-emoji { position: absolute; transform: translateY(-10vh); z-index:0; }
.cheese-panel { position: relative; z-index:10; background: linear-gradient(180deg, #fff59d 0%, #fff176 100%); padding: 20px; border-radius: 8px; max-width:720px; margin:20px auto; box-shadow:0 4px 12px rgba(0,0,0,0.12); color: #222; }
.cheese-holder { display:flex; gap:12px; align-items:center; }
.cheese-avatar img{ border-radius:50%; width:96px; height:96px; }
.cheese-name { font-weight:700; font-size:1.25rem; }
.cheese-you { color: #333; font-weight:700; }
.ct-people { margin-top:10px; }
.ct-person { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.ct-person .ct-person-name { flex:1; }
.ct-message { margin-top:8px; color: #c00; }
.ct-leaderboards { margin-top:18px; display:flex; gap:20px; }
.ct-leaderboard { flex:1; }

/* make cheese emojis more visible */
.cheese-emoji { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }

/* admin reset button styling */
.ct-admin-reset { margin: 10px 0; }

/* Players panel styling added for the 'Players in the Game' title and avatars */
.ct-players-panel {
    background: rgba(255, 250, 205, 0.95); /* slightly different pale yellow */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.ct-players-title {
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 241, 118, 0.6); /* a slightly stronger yellow for the title */
    color: #222;
    font-size: 0.95rem;
}

/* Ensure the avatars grid is horizontal and each mini-card keeps its size */
.ct-players-panel .ct-all-users {
    display: flex !important;
    flex-flow: row wrap !important;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

/* Strongly enforce a fixed-ish card width so they sit side-by-side */
.ct-players-panel .ct-user-mini {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 64px !important; /* fixed card width to keep them side-by-side */
    max-width: 64px !important;
    box-sizing: border-box;
}

/* Prevent theme styles from scaling images to container width */
.ct-players-panel .ct-user-mini img {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    max-width: none !important; /* prevent theme max-width:100% from forcing layout */
    display: block !important;
    margin: 0 auto;
}

/* also target direct children to avoid unexpected wrappers */
.ct-players-panel .ct-all-users > .ct-user-mini { display:inline-flex !important; }

/* fallback: if something forces .ct-user-mini to be width:100%, override it */
.ct-players-panel .ct-user-mini[style] { max-width:64px !important; }

/* keep the small name truncation */
.ct-players-panel .ct-user-mini .ct-user-mini-name { font-size:0.65rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Make players panel more visually distinct */
.ct-players-panel {
    background: #fff3a6 !important; /* stronger pale yellow */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.ct-players-title {
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 214, 79, 0.95) !important; /* more visible yellow */
    color: #222 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Enforce horizontal grid and correct order: image on top, name below */
.ct-players-panel .ct-all-users { display:flex !important; flex-flow: row wrap !important; gap:8px !important; align-items:center !important; }
.ct-players-panel .ct-user-mini { flex: 0 0 64px !important; max-width:64px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; text-align:center !important; }
.ct-players-panel .ct-user-mini img { order:0 !important; width:48px !important; height:48px !important; display:block !important; margin:0 auto 6px auto !important; border-radius:50% !important; max-width:none !important; }
.ct-players-panel .ct-user-mini .ct-user-mini-name { order:1 !important; display:block !important; font-size:0.72rem !important; color:#222 !important; margin:0 !important; padding:0 !important; }

/* Defensive: prevent theme rules targeting img or div from breaking layout */
.ct-players-panel img { max-width:none !important; }
.ct-players-panel .ct-user-mini, .ct-players-panel .ct-all-users, .ct-players-panel .ct-user-mini * { box-sizing: border-box !important; }

/* responsive reductions */
@media (max-width: 600px) {
    .ct-players-panel .ct-user-mini { flex: 0 0 56px !important; max-width:56px !important; }
    .ct-players-panel .ct-user-mini img { width:40px !important; height:40px !important; margin-bottom:4px !important; }
    .ct-players-title { font-size:0.95rem !important; }
}

@media (max-width: 420px) {
    #cheese-touch-app { padding: 20px 0; }
    .cheese-panel { padding:10px; margin:8px; }
    .cheese-avatar img { width:56px; height:56px; }
    .cheese-name { font-size:0.95rem; }
    .cheese-you { font-size:0.9rem; }
    .ct-person { gap:6px; font-size:0.95rem; }
    /* Make give buttons easier to tap on very small screens */
    .ct-give { padding:8px 10px; font-size:0.95rem; }
    .ct-user-mini { width:56px; }
    .ct-user-mini img { width:40px; height:40px; }
    .ct-user-mini-name { font-size:0.60rem; }
}

@media (max-width: 360px) {
    .ct-user-mini { width:48px; }
    .ct-user-mini img { width:36px; height:36px; }
    .ct-user-mini-name { font-size:0.55rem; }
}

/* --- Responsive / Mobile improvements --- */
/* Keep layout readable on narrow screens without changing markup or functionality. */

/* Make the panel use the available width on small screens */
.cheese-panel { width: calc(100% - 40px); }

/* Ensure avatars and text wrap nicely */
.cheese-holder { flex-wrap: wrap; }
.cheese-avatar { flex: 0 0 auto; }
.cheese-avatar img { width:96px; height:96px; }
.cheese-info { flex: 1 1 auto; min-width:0; }
.cheese-name, .cheese-you, .cheese-they { word-break:break-word; }

/* People list: allow names to wrap and buttons to remain usable */
.ct-person .ct-person-name { white-space: normal; }
.ct-person .ct-give { flex: 0 0 auto; }

/* Leaderboards: make chart responsive and stack on small screens */
.ct-leaderboards { align-items:flex-start; }
.ct-leaderboard canvas { max-width:100%; height:auto !important; }

/* Improve tap targets on mobile */
button, .button { touch-action: manipulation; }

/* Media queries for smaller devices */
@media (max-width: 600px) {
    .cheese-panel { padding: 14px; margin:12px; }
    .cheese-avatar img { width:72px; height:72px; }
    .cheese-name { font-size:1rem; }
    .ct-people { margin-top:8px; }
    .ct-person { gap:6px; }
    .ct-leaderboards { flex-direction:column; gap:12px; }
    .ct-leaderboard { width:100%; }
    /* Make the show people button full width and centered for easier tapping */
    #ct-toggle-people { width:100%; display:block; }
}

@media (max-width: 420px) {
    #cheese-touch-app { padding: 20px 0; }
    .cheese-panel { padding:10px; margin:8px; }
    .cheese-avatar img { width:56px; height:56px; }
    .cheese-name { font-size:0.95rem; }
    .cheese-you { font-size:0.9rem; }
    .ct-person { gap:6px; font-size:0.95rem; }
    /* Make give buttons easier to tap on very small screens */
    .ct-give { padding:8px 10px; font-size:0.95rem; }
    .ct-user-mini { width:56px; }
    .ct-user-mini img { width:40px; height:40px; }
    .ct-user-mini-name { font-size:0.60rem; }
}

@media (max-width: 360px) {
    .ct-user-mini { width:48px; }
    .ct-user-mini img { width:36px; height:36px; }
    .ct-user-mini-name { font-size:0.55rem; }
}

@media (max-width: 480px) {
    /* Keep player avatars on a single horizontal row on small screens */
    .ct-players-panel .ct-all-users {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
    }
    .ct-players-panel .ct-user-mini {
        flex: 0 0 auto !important;
        max-width: none !important;
        margin-right: 8px !important;
    }
    /* Slightly reduce name size to avoid big vertical text */
    .ct-players-panel .ct-user-mini .ct-user-mini-name { font-size:0.7rem !important; }
}

/* Cheese crown overlay for current holder */
.cheese-avatar-wrapper { position: relative; display: inline-block; }
.cheese-avatar-wrapper .cheese-crown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
    font-size: 28px;
    line-height: 1;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18));
    animation: ct-crown-pulse 1800ms ease-in-out infinite;
}

/* smaller crown for mini avatars */
.ct-user-mini .cheese-crown {
    top: -6px !important;
    font-size: 16px !important;
}

@keyframes ct-crown-pulse {
    0% { transform: translateX(-50%) translateY(0) scale(1); }
    50% { transform: translateX(-50%) translateY(-6px) scale(1.06); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* Subtle shine effect on the crown (optional) */
.cheese-crown::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
    opacity: 0.85;
    pointer-events: none;
}

@media (max-width: 600px) {
    .cheese-avatar-wrapper .cheese-crown { font-size:22px; top:-10px; }
    .ct-user-mini .cheese-crown { font-size:14px; top:-5px; }
}