/* ============================================================================
   Patron Stickers — Complete Styles
   Extracted from debug tool test-sticker-effect.html (Phase 4 v1)
   ============================================================================ */

/* ============================================================================
   FONTS — all local, no Google Fonts dependency
   ============================================================================ */

@font-face {
    font-family: 'Alegreya Sans SC';
    font-style: italic;
    font-weight: 900;
    src: url('../../fonts/alegreya-sans-sc-italic-900.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Bangers';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/bangers-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Luckiest Guy';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/luckiest-guy-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Barrio';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/barrio-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/permanent-marker-regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'ByteBounce';
    src: url('../../fonts/ByteBounce.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/press-start-2p-regular.woff2') format('woff2');
    font-display: swap;
}

/* ============================================================================
   DIE-CUT TEXT STICKER — base effect
   Uses CSS grid stacking: shadow (::after) + white stroke (::before) + gradient (span)
   ============================================================================ */

.sticker {
    --c1: #ef548f;
    --c2: #ef8b6d;
    --c3: #cfef6b;
    --c4: #3bf0c1;
    --c5: #bb4af0;
    --shine-angle: 15deg;
    --shine-pos: 50%;
    --rotate-x: 0deg;
    --rotate-y: 0deg;

    display: inline-grid;
    grid-template-areas: "text";
    place-items: center;
    font-family: "Alegreya Sans SC", sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(3rem, 12vw, 7rem);
    text-transform: uppercase;
    color: var(--c5);
    cursor: default;
    line-height: 1;

    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    transition: transform 0.15s ease-out;
}

.sticker > *,
.sticker::before,
.sticker::after {
    grid-area: text;
}

/* Bottom layer: dark shadow for depth/outline */
.sticker::after {
    content: attr(data-text);
    color: #fff;
    text-shadow:
        0.07em 0.08em 0.05em rgba(0, 0, 0, 0.75),
        -0.07em -0.05em 0.05em rgba(0, 0, 0, 0.75);
    z-index: -2;
}

/* Middle layer: white die-cut border */
.sticker::before {
    content: attr(data-text);
    color: #fff;
    -webkit-text-stroke: 0.21em white;
}

/* Top layer: rainbow gradient + shine stripe, clipped to text */
.sticker span {
    background:
        linear-gradient(
            var(--shine-angle),
            rgba(255,0,0,0) 0%,
            rgba(255,0,0,0) 35%,
            rgba(255,255,255,0.98) 49.95%,
            rgba(255,255,255,0.98) 50.15%,
            rgba(255,0,0,0) 65%,
            rgba(255,0,0,0)
        ),
        repeating-linear-gradient(
            to right,
            var(--c1), var(--c2), var(--c3), var(--c4), var(--c5),
            var(--c1) 50%
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.6);
    background-clip: text;
    padding: 0 0.12em;
    margin: 0 -0.12em;
}

/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */

.sticker-lg {
    font-size: clamp(5rem, 20vw, 12rem);
}

.sticker-sm {
    font-size: clamp(1.5rem, 6vw, 3rem);
}

.sticker-sm::before {
    -webkit-text-stroke: 0.12em white;
}

/* ============================================================================
   FONT VARIANTS
   ============================================================================ */

.sticker-bangers {
    font-family: "Bangers", cursive;
    font-style: normal;
    letter-spacing: 0.04em;
}

.sticker-marker {
    font-family: "Permanent Marker", cursive;
    font-style: normal;
}

.sticker-barrio {
    font-family: "Barrio", cursive;
    font-style: normal;
}

.sticker-luckiest {
    font-family: "Luckiest Guy", cursive;
    font-style: normal;
}

.sticker-bytebounce {
    font-family: "ByteBounce", "Press Start 2P", monospace;
    font-style: normal;
    letter-spacing: 0.06em;
    word-spacing: -0.7em;
}

.sticker-pressstart {
    font-family: "Press Start 2P", monospace;
    font-style: normal;
    letter-spacing: 0.02em;
    font-size: 0.7em;
}
/* Override .sticker-combo .sticker { font-size: inherit } for Press Start */
.sticker-combo .sticker.sticker-pressstart {
    font-size: 0.7em;
}

/* ============================================================================
   COLOR PALETTES
   ============================================================================ */

.sticker-rainbow {
    --c1: #ff0000; --c2: #ff8800; --c3: #ffff00; --c4: #00cc00; --c5: #0066ff;
}

.sticker-pink {
    --c1: #ff69b4; --c2: #ef548f; --c3: #e91e90; --c4: #ff1493; --c5: #ff69b4;
}

.sticker-gold {
    --c1: #f7ce68; --c2: #e5b84a; --c3: #ffd700; --c4: #daa520; --c5: #b8860b;
}

.sticker-fire {
    --c1: #ff4500; --c2: #ff6347; --c3: #ffd700; --c4: #ff4500; --c5: #dc143c;
}

.sticker-ice {
    --c1: #00bfff; --c2: #87ceeb; --c3: #e0ffff; --c4: #00ced1; --c5: #4169e1;
}

.sticker-toxic {
    --c1: #39ff14; --c2: #7fff00; --c3: #adff2f; --c4: #00ff7f; --c5: #32cd32;
}

.sticker-solid-red {
    --c1: #e53935; --c2: #e53935; --c3: #e53935; --c4: #e53935; --c5: #e53935;
}
.sticker-solid-blue {
    --c1: #1e88e5; --c2: #1e88e5; --c3: #1e88e5; --c4: #1e88e5; --c5: #1e88e5;
}
.sticker-solid-green {
    --c1: #43a047; --c2: #43a047; --c3: #43a047; --c4: #43a047; --c5: #43a047;
}
.sticker-solid-purple {
    --c1: #8e24aa; --c2: #8e24aa; --c3: #8e24aa; --c4: #8e24aa; --c5: #8e24aa;
}
.sticker-solid-pink {
    --c1: #e91e90; --c2: #e91e90; --c3: #e91e90; --c4: #e91e90; --c5: #e91e90;
}
.sticker-solid-orange {
    --c1: #f57c00; --c2: #f57c00; --c3: #f57c00; --c4: #f57c00; --c5: #f57c00;
}
.sticker-solid-white {
    --c1: #ffffff; --c2: #ffffff; --c3: #ffffff; --c4: #ffffff; --c5: #ffffff;
}

/* ============================================================================
   CONCEPT 4: Die-Cut Combo — icon + original sticker text in flex wrapper
   This is the flagship die-cut sticker with pre-stroked image
   ============================================================================ */

.sticker-combo {
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    transition: transform 0.15s ease-out;
    cursor: default;
    font-size: clamp(3rem, 12vw, 7rem);
    position: relative;
}

/* Elevate sticker above surrounding content on hover (tooltip + controls visibility) */
.sticker-combo:hover {
    z-index: 20;
}

/* Disable inner sticker's own tilt when inside combo */
.sticker-combo .sticker {
    transform: none;
    font-size: inherit;
}

.combo-img {
    height: 1.1em;
    width: auto;
    object-fit: contain;
    margin-right: -0.08em;
    position: relative;
    z-index: 4;
}

.sticker-combo-lg {
    font-size: clamp(5rem, 20vw, 12rem);
}

/* Per-font icon gap adjustments */
.sticker-combo:has(.sticker-bangers) .combo-img {
    margin-right: -0.04em;
}
.sticker-combo:has(.sticker-barrio) .combo-img {
    margin-right: -0.04em;
}
.sticker-combo:has(.sticker-luckiest) .combo-img {
    margin-right: 0.02em;
}
.sticker-combo:has(.sticker-bytebounce) .combo-img {
    height: 1.4em;
    margin-right: -0.12em;
}

/* Box art icon: rounded square with white border, tilted */
.combo-boxart {
    height: 1.4em;
    min-height: 60px;
    width: auto;
    min-width: 0.6em;
    max-width: 3em;
    object-fit: contain;
    border-radius: 0.1em;
    border: 0.08em solid white;
    margin-right: 0.08em;
    position: relative;
    z-index: 4;
    transform: rotate(-8deg);
}

/* Edit + Remove controls for own stickers — appears on hover */
.sticker-combo.sticker-own,
.sticker-card.sticker-own {
    position: relative;
}
.sticker-own-controls {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 200;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s;
    /* Break out of preserve-3d stacking so buttons are always in front */
    transform: translateZ(60px);
}
.sticker-edit-btn,
.sticker-remove-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    font-family: sans-serif;
    transform-style: flat;
}
.sticker-edit-btn {
    background: #1e88e5;
}
.sticker-remove-btn {
    background: #e53935;
    font-size: 14px;
}
/* Show controls on hover of sticker or controls themselves */
.sticker-combo.sticker-own:hover .sticker-own-controls,
.sticker-card.sticker-own:hover .sticker-own-controls,
.sticker-zone-positioned.sticker-own:hover .sticker-own-controls,
.sticker-own-controls:hover {
    opacity: 1;
}

/* No-holo: kill the shine stripe but keep 3D tilt */
.no-holo .sticker span,
.sticker.no-holo span {
    background:
        repeating-linear-gradient(
            to right,
            var(--c1), var(--c2), var(--c3), var(--c4), var(--c5),
            var(--c1) 50%
        ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ============================================================================
   WHITE CARD STICKER — Concept 1
   White (or colored) rounded card with icon + text, holo shine + glare
   ============================================================================ */

.sticker-card {
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --shine-pos: 50%;
    --shine-angle: 110deg;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px 18px 10px 10px;
    border-radius: 12px;
    cursor: default;
    overflow: visible;
    isolation: isolate;

    box-shadow:
        2px 3px 6px rgba(0, 0, 0, 0.5),
        -1px -1px 3px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);

    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    transition: transform 0.15s ease-out;
}

.sticker-card img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sticker-card-text {
    font-family: "Bangers", cursive;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--card-text-color, #222);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* Holographic shine overlay */
.sticker-card .card-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    mix-blend-mode: color-dodge;
    filter: brightness(0.7) contrast(3) saturate(0.6);
    background-image:
        repeating-linear-gradient(
            var(--shine-angle),
            #c929f1, #0dbde9, #21e985, #eedf10, #f80e35,
            #c929f1, #0dbde9, #21e985, #eedf10, #f80e35
        );
    background-size: 300% 300%;
    background-position: var(--shine-pos) 50%;
    border-radius: inherit;
}

/* Specular glare — white hotspot following mouse */
.sticker-card .card-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    mix-blend-mode: overlay;
    background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0,0%,100%,0.8) 10%,
        hsla(0,0%,100%,0.65) 20%,
        hsla(0,0%,0%,0.5) 90%
    );
    border-radius: inherit;
}

.sticker-card:hover .card-shine {
    opacity: 0.8;
}

.sticker-card:hover .card-glare {
    opacity: 0.6;
}

/* Card size variants */
.sticker-card-md {
    padding: 14px 24px 14px 14px;
    gap: 14px;
    border-radius: 16px;
}

.sticker-card-md img {
    width: 72px;
    height: 72px;
}

.sticker-card-md .sticker-card-text {
    font-size: 2.2rem;
}

.sticker-card-lg {
    padding: 20px 32px 20px 20px;
    gap: 18px;
    border-radius: 20px;
}

.sticker-card-lg img {
    width: 100px;
    height: 100px;
}

.sticker-card-lg .sticker-card-text {
    font-size: 3.2rem;
}

/* Box art overflow variant — image overhangs card edges */
.sticker-card-boxart-overflow {
    overflow: visible !important;
}

.sticker-card-boxart-overflow img.overflow-icon {
    width: 120px !important;
    height: 120px !important;
    margin: -40px 0 -40px -45px;
    object-fit: contain;
}
.sticker-card-boxart-overflow.sticker-card-md img.overflow-icon {
    width: 170px !important;
    height: 170px !important;
    margin: -55px 0 -55px -60px;
}
.sticker-card-boxart-overflow.sticker-card-lg img.overflow-icon {
    width: 240px !important;
    height: 240px !important;
    margin: -75px 0 -75px -85px;
}

.sticker-card-boxart-overflow img.overflow-boxart {
    width: auto;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    margin: -20px 0 -20px -15px;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    transform: rotate(-5deg);
}
.sticker-card-boxart-overflow.sticker-card-md img.overflow-boxart {
    max-height: 110px;
    margin: -28px 0 -28px -20px;
}
.sticker-card-boxart-overflow.sticker-card-lg img.overflow-boxart {
    max-height: 150px;
    margin: -40px 0 -40px -28px;
}

/* Icon-only sticker (circular) */
.sticker-card-icon-only {
    padding: 12px;
    border-radius: 50%;
}

.sticker-card-icon-only img {
    width: 80px;
    height: 80px;
}

/* Card font variants */
.sticker-card-luckiest .sticker-card-text {
    font-family: "Luckiest Guy", cursive;
}

.sticker-card-barrio .sticker-card-text {
    font-family: "Barrio", cursive;
}

.sticker-card-marker .sticker-card-text {
    font-family: "Permanent Marker", cursive;
}

.sticker-card-bytebounce .sticker-card-text {
    font-family: "ByteBounce", "Press Start 2P", monospace;
    font-size: 1.8rem;
    word-spacing: -0.7em;
}

.sticker-card-pressstart .sticker-card-text {
    font-family: "Press Start 2P", monospace;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* ============================================================================
   PATRON TOOLTIP — shows on sticker hover
   ============================================================================ */

.patron-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-44px);
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.sticker-combo:hover .patron-tooltip,
.sticker-card:hover .patron-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-40px);
}

/* Tooltip flipped below when sticker is near top of viewport */
.tooltip-below .patron-tooltip {
    bottom: auto;
    top: 100%;
    transform: translateX(-50%) translateY(44px);
}
.sticker-combo.tooltip-below:hover .patron-tooltip,
.sticker-card.tooltip-below:hover .patron-tooltip {
    transform: translateX(-50%) translateY(40px);
}
/* Flip arrow to point up */
.tooltip-below .patron-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #444;
}
.tooltip-below .patron-tooltip::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
}

.patron-tooltip-tier {
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    align-self: center;
}

.patron-tooltip-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.patron-tooltip-name {
    color: #4da44b;
    font-family: "Bangers", sans-serif;
    font-size: 18px;
    letter-spacing: 0.03em;
}

.patron-tooltip-meta {
    color: #888;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.patron-tooltip-meta img {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Animated sprite — 2-frame swap */
.patron-tooltip-sprite-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.patron-tooltip-sprite-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* 2-frame animation (monsters) */
.sprite-frames-2 img:nth-child(1) { animation: sprite-2f-a 0.5s steps(1) infinite; }
.sprite-frames-2 img:nth-child(2) { animation: sprite-2f-b 0.5s steps(1) infinite; }

@keyframes sprite-2f-a { 0% { opacity:1; } 50% { opacity:0; } }
@keyframes sprite-2f-b { 0% { opacity:0; } 50% { opacity:1; } }

/* 4-frame animation (players) */
.sprite-frames-4 img { opacity: 0; animation: sprite-4f 1.2s steps(1) infinite; }
.sprite-frames-4 img:nth-child(1) { animation-delay: 0s; }
.sprite-frames-4 img:nth-child(2) { animation-delay: 0.3s; }
.sprite-frames-4 img:nth-child(3) { animation-delay: 0.6s; }
.sprite-frames-4 img:nth-child(4) { animation-delay: 0.9s; }

@keyframes sprite-4f {
    0%    { opacity: 1; }
    25%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* Patron CTA — separate tooltip below the main one */
.patron-tooltip-cta {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px 12px;
    text-align: center;
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.patron-tooltip-cta a {
    color: #4da44b;
    text-decoration: none;
    font-weight: bold;
}

.patron-tooltip-cta a:hover {
    text-decoration: underline;
}

/* Speech bubble triangles */
.patron-tooltip-cta::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}
.patron-tooltip-cta::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #111;
    z-index: 1;
}

/* Arrow pointing down from tooltip */
.patron-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #444;
}
.patron-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    z-index: 1;
}

/* ============================================================================
   GAME PAGE SECTION — container, display, picker, CTA
   ============================================================================ */

.patron-stickers-section {
    margin: 30px 0 10px;
    padding: 0 20px;
}

/* Display: placed sticker badges (die-cut combos) */
.patron-stickers-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end;
    overflow: visible;
}

.patron-stickers-empty {
    color: #888;
    font-style: italic;
    font-size: 0.9em;
    margin: 0;
}

/* Legacy badge style (fallback) */
.patron-sticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: default;
    transition: border-color 0.2s;
}

.patron-sticker-badge:hover {
    border-color: #555;
}

.patron-sticker-badge .sticker-emoji {
    font-size: 1.2em;
}

.patron-sticker-badge .sticker-label {
    font-size: 0.85em;
    color: #ccc;
}

.patron-sticker-badge .sticker-count {
    font-size: 0.8em;
    color: #4da44b;
    font-weight: 700;
}

/* CTA for non-patrons */
.patron-sticker-cta {
    color: #888;
    font-size: 0.9em;
    margin: 0;
}

.patron-sticker-cta a {
    color: #4da44b;
    text-decoration: underline;
}

/* Picker */
.patron-sticker-picker {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.patron-sticker-picker .picker-heading {
    font-size: 1em;
    color: #aaa;
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patron-sticker-category {
    margin-bottom: 15px;
}

.patron-sticker-category .category-label {
    display: block;
    font-size: 0.75em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.category-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.patron-sticker-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #ccc;
    font-size: 0.85em;
    font-family: inherit;
}

.patron-sticker-option:hover {
    border-color: #555;
}

.patron-sticker-option.selected {
    border-color: #4da44b;
    box-shadow: 0 0 8px rgba(77, 164, 75, 0.3);
}

.patron-sticker-option .sticker-emoji {
    font-size: 1.2em;
}

.patron-sticker-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Remove button */
.patron-sticker-remove {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid #555;
    border-radius: 4px;
    color: #888;
    font-size: 0.85em;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}

.patron-sticker-remove:hover {
    border-color: #c44;
    color: #c44;
}

.patron-sticker-remove:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status message */
.patron-sticker-message {
    margin-top: 8px;
    font-size: 0.85em;
    min-height: 1.2em;
}

.patron-sticker-message.error {
    color: #c44;
}

.patron-sticker-message.success {
    color: #4da44b;
}

/* ============================================================================
   STICKER ZONES — Phase 4c zone-based placement system
   ============================================================================ */

/* Base zone container */
.sticker-zone {
    position: relative;
    min-height: 0;
    z-index: 15;
}

/* Filled inline zones — show stickers in flow */
.sticker-zone-filled.sticker-zone-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    overflow: visible;
    padding: 8px 0;
}

/* Overlay zones — stickers absolutely positioned within */
.sticker-zone-overlay {
    position: relative;
    min-height: 0;
    pointer-events: none;
}

/* Banner overlay — covers the right portion of the game banner (avoids text) */
.sticker-zone-overlay[data-zone-id="banner"] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 58%;
    z-index: 5;
}

.sticker-zone-overlay > * {
    pointer-events: auto;
}

/* Absolutely positioned sticker within overlay zone */
.sticker-zone-positioned {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: default;
    width: max-content;
    white-space: nowrap;
}

.sticker-zone-positioned.sticker-own {
    cursor: grab;
}

.sticker-zone-positioned.sticker-dragging {
    cursor: grabbing;
    z-index: 100;
    opacity: 0.85;
    transition: none;
}

body.sticker-drag-active {
    user-select: none;
    -webkit-user-select: none;
}

/* Float variants for inline zones */
.sticker-zone-float-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
    clear: right;
    z-index: 10;
}

.sticker-zone-float-left {
    float: left;
    margin-right: 20px;
    margin-left: 0;
    clear: left;
    z-index: 10;
}

/* Fan-out for multiple stickers in same inline zone */
.sticker-zone-fan {
    display: inline-flex;
    align-items: flex-end;
    margin-left: -8px;
}

.sticker-zone-fan-item {
    margin-left: -8px;
    transition: transform 0.2s;
}

.sticker-zone-fan-item:first-child {
    margin-left: 0;
}

.sticker-zone-fan-item:hover {
    z-index: 10;
}

/* ============================================================================
   ZONE MARKERS — faded dotted-pink "Add Sticker" buttons for patrons
   ============================================================================ */

.sticker-zone-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1.5px dotted var(--wakasm-patreon, #f96854);
    border-radius: 999px;
    background: rgba(249, 104, 84, 0.06);
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    font-family: inherit;
    flex-shrink: 0;
    z-index: 20;
    pointer-events: auto;
}

.sticker-zone-marker:hover,
.sticker-zone-marker:focus-visible {
    background: rgba(249, 104, 84, 0.22);
    border-color: var(--wakasm-patreon, #f96854);
    outline: none;
}

.zone-marker-label {
    color: var(--wakasm-patreon, #f96854);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* Back-compat: legacy "+" span if any cached templates still emit it */
.zone-marker-plus {
    color: var(--wakasm-patreon, #f96854);
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
}

/* Overlay zone markers: position in center-bottom */
.sticker-zone-overlay .sticker-zone-marker {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.sticker-zone-overlay .sticker-zone-marker:hover {
    transform: translateX(-50%) scale(1.1);
}

/* Hover explainer for pink "add sticker" markers. Replaces the native title=
   tooltip so the bubble matches the rest of the patron UI. Driven by
   data-sticker-tip on the marker button. */
.sticker-zone-marker[data-sticker-tip] { position: relative; }
.sticker-zone-marker[data-sticker-tip]:hover,
.sticker-zone-marker[data-sticker-tip]:focus-visible { z-index: 50; }
.sticker-zone-marker[data-sticker-tip]:hover::after,
.sticker-zone-marker[data-sticker-tip]:focus-visible::after {
    content: attr(data-sticker-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    background: #fff8e7;
    color: var(--wakasm-patreon, #f96854);
    font-family: 'Changa', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 60;
    pointer-events: none;
}
.sticker-zone-marker[data-sticker-tip]:hover::before,
.sticker-zone-marker[data-sticker-tip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff8e7;
    z-index: 60;
    pointer-events: none;
}

/* Deep-link target: the "Place Stickers" action button on /community-requests/
   anchors to #add-sticker-here, which is set on .prv2-thanks-wall. The wall
   gets scroll-margin so it clears the 88px fixed nav, and the marker inside
   pulses coral so the user spots it as the call-to-action. */
#add-sticker-here {
    scroll-margin-top: 100px;
}
#add-sticker-here:target .sticker-zone-marker {
    animation: wakasm-add-sticker-target-pulse 1.4s ease-out 0s 3;
}
@keyframes wakasm-add-sticker-target-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 104, 84, 0.65); background: rgba(249, 104, 84, 0.35); }
    100% { box-shadow: 0 0 0 14px rgba(249, 104, 84, 0);  background: rgba(249, 104, 84, 0.06); }
}

/* Empty inline zones: just show the marker */
.sticker-zone-empty.sticker-zone-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

/* ============================================================================
   STICKER DESIGNER MODAL
   ============================================================================ */

.sticker-designer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sticker-designer-modal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    color: #e0e0e0;
}

/* Header */
.designer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.designer-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    margin: 0;
    flex: 1;
}

.designer-credits {
    font-size: 0.85em;
    color: #888;
}

.credits-balance {
    color: #4da44b;
    font-weight: 700;
}

.credits-cost {
    color: #e91e90;
    font-weight: 700;
}

.designer-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.6em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    font-family: inherit;
    transition: color 0.2s;
}

.designer-close:hover {
    color: #fff;
}

/* Header right side: credits + profile link */
.designer-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
    margin-right: 8px;
}

.designer-patreon-link {
    color: #4da44b;
    font-size: 0.8em;
    text-decoration: none;
    border: 1px solid #4da44b;
    border-radius: 6px;
    padding: 3px 10px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.designer-patreon-link:hover {
    background: #4da44b;
    color: #fff;
}

/* Design style options */
.designer-design-options {
    display: flex;
    gap: 8px;
}

.designer-design-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #222;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 12px 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #ccc;
    font-family: inherit;
}

.designer-design-option:hover {
    border-color: #555;
}

.designer-design-option.selected {
    border-color: #e91e90;
    box-shadow: 0 0 8px rgba(233, 30, 144, 0.3);
}

.design-option-name {
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
}

.design-option-desc {
    font-size: 0.68em;
    color: #888;
    text-align: center;
}

/* Mini preview icons inside design style buttons */
.design-mini {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 2px;
}

.design-mini-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #e91e90;
    flex-shrink: 0;
}

.design-mini-text {
    font-family: "Bangers", cursive;
    font-size: 14px;
    letter-spacing: 0.04em;
    background: linear-gradient(90deg, #ef548f, #cfef6b, #3bf0c1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.design-mini-combo .design-mini-text {
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.6);
}

.design-mini-card {
    background: #fff;
    border-radius: 5px;
    padding: 3px 6px 3px 3px;
    gap: 4px;
}

.design-mini-card .design-mini-text {
    background: none;
    -webkit-text-fill-color: #222;
    -webkit-text-stroke: 0;
    font-size: 12px;
}

.design-mini-icononly {
    justify-content: center;
}

.design-mini-icononly .design-mini-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

/* Side-by-side step row (font + color) */
.designer-step-row {
    display: flex;
    gap: 12px;
}

.designer-step-half {
    flex: 1;
    min-width: 0;
}

/* Toggles row */
.designer-step-toggles {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Dropdowns */
.designer-select {
    width: 100%;
    padding: 8px 12px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    color: #ccc;
    font-size: 0.9em;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: auto;
}

.designer-select:hover {
    border-color: #555;
}

.designer-select:focus {
    border-color: #e91e90;
    outline: none;
}

/* Box art search */
.designer-boxart-search {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2a2a2a;
}

.designer-boxart-label {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 6px;
}

.designer-boxart-input-wrap {
    position: relative;
}

.designer-boxart-input {
    width: 100%;
    padding: 8px 12px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    color: #ccc;
    font-size: 0.85em;
    font-family: inherit;
    box-sizing: border-box;
}

.designer-boxart-input:focus {
    border-color: #e91e90;
    outline: none;
}

.designer-boxart-input::placeholder {
    color: #555;
}

.designer-boxart-results {
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.designer-boxart-results:empty {
    display: none;
}

.boxart-result {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-bottom: 1px solid #333;
    color: #ccc;
    font-size: 0.8em;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.boxart-result:last-child {
    border-bottom: none;
}

.boxart-result:hover {
    background: #2a2a2a;
}

.boxart-result img {
    width: 40px;
    height: 54px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.boxart-no-results {
    padding: 10px;
    color: #666;
    font-size: 0.8em;
    text-align: center;
}

/* Recent / selected box art row */
.designer-boxart-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.designer-boxart-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #aaa;
    font-size: 0.65em;
    font-family: inherit;
    max-width: 60px;
    text-align: center;
}

.designer-boxart-pick:hover {
    border-color: #555;
}

.designer-boxart-pick.selected {
    border-color: #e91e90;
}

.designer-boxart-pick img {
    width: 44px;
    height: 58px;
    object-fit: contain;
    border-radius: 3px;
}

.designer-boxart-pick span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* No-holo toggle */
.designer-step-toggle {
    margin-bottom: 10px;
}

.designer-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #aaa;
    font-size: 0.85em;
}

.designer-toggle-label input[type="checkbox"] {
    accent-color: #e91e90;
    width: 16px;
    height: 16px;
}

/* Steps */
.designer-step {
    margin-bottom: 16px;
}

.designer-step-label {
    font-size: 0.75em;
    color: #e91e90;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    font-weight: 700;
    padding: 4px 10px;
    background: rgba(233, 30, 144, 0.1);
    border-left: 3px solid #e91e90;
    border-radius: 0 4px 4px 0;
}

/* Category labels within step 1 */
.designer-category {
    margin-bottom: 10px;
}

.designer-category-label {
    display: block;
    font-size: 0.7em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

/* Label options grid */
.designer-label-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.designer-label-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #ccc;
    font-size: 0.82em;
    font-family: inherit;
}

.designer-label-option:hover {
    border-color: #555;
}

.designer-label-option.selected {
    border-color: #e91e90;
    box-shadow: 0 0 8px rgba(233, 30, 144, 0.3);
}

.designer-label-option .sticker-emoji {
    font-size: 1.1em;
}

/* Icon options grid */
.designer-icon-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}

.designer-icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #aaa;
    font-size: 0.72em;
    font-family: inherit;
}

.designer-icon-option img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.designer-icon-option:hover {
    border-color: #555;
}

.designer-icon-option.selected {
    border-color: #e91e90;
}

/* Font options */
.designer-font-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.designer-font-option {
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #ccc;
    font-size: 0.9em;
}

.designer-font-option:hover {
    border-color: #555;
}

.designer-font-option.selected {
    border-color: #e91e90;
}

/* Apply actual font to font option buttons */
.designer-font-option.sticker-bangers {
    font-family: "Bangers", cursive;
}
.designer-font-option.sticker-luckiest {
    font-family: "Luckiest Guy", cursive;
}
.designer-font-option.sticker-marker {
    font-family: "Permanent Marker", cursive;
}
.designer-font-option.sticker-barrio {
    font-family: "Barrio", cursive;
}
.designer-font-option.sticker-bytebounce {
    font-family: "ByteBounce", monospace;
}

/* Color options */
.designer-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.designer-color-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #222;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #ccc;
    font-size: 0.78em;
    font-family: inherit;
}

.designer-color-option:hover {
    border-color: #555;
}

.designer-color-option.selected {
    border-color: #e91e90;
}

.color-swatch {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

/* Preview */
.designer-preview {
    background: #111;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.designer-preview-label {
    font-size: 0.7em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.designer-preview-placeholder {
    color: #555;
    font-size: 0.85em;
    font-style: italic;
}

/* Actions */
.designer-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.designer-place-btn {
    padding: 10px 24px;
    background: #e91e90;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, opacity 0.2s;
}

.designer-place-btn:hover:not(:disabled) {
    background: #d4177e;
}

.designer-place-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.designer-cancel-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #555;
    border-radius: 8px;
    color: #ccc;
    font-size: 0.9em;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}

.designer-cancel-btn:hover {
    border-color: #c44;
    color: #c44;
}

/* Message */
.designer-message {
    margin-top: 8px;
    font-size: 0.85em;
    min-height: 1.2em;
}

.designer-message.error {
    color: #c44;
}

.designer-message.success {
    color: #4da44b;
}

/* ============================================================================
   Responsive
   ============================================================================ */

/* ============================================================================
   RANKING PAGE STICKERS — inline below game info, hidden by default
   ============================================================================ */

/* Shown by default — hidden when .hide-stickers class on list */
.ranking-sticker-zone {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding: 8px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    order: 999;
}

.game-entry:has(.ranking-sticker-zone) {
    flex-wrap: wrap;
}

.hide-stickers .ranking-sticker-zone {
    display: none;
}

.hide-stickers .game-entry {
    flex-wrap: nowrap;
}

.ranking-sticker-zone .sticker-combo {
    font-size: clamp(1rem, 3vw, 1.6rem) !important;
}

.ranking-sticker-zone .combo-boxart {
    min-height: 28px;
}

.ranking-sticker-zone .sticker-zone-marker {
    padding: 2px 8px;
    position: static;
    transform: none;
}

.ranking-sticker-zone .sticker-zone-marker .zone-marker-label {
    font-size: 9px;
}

.ranking-sticker-zone .sticker-zone-marker .zone-marker-plus {
    font-size: 1em;
}

.ranking-sticker-zone .patron-tooltip {
    white-space: nowrap;
}

/* Coin in designer credits header — sizing inherited from .wakasm-coin--mini
   in coin.css; this selector handles only positional tweaks. */
.designer-credits-coin {
    vertical-align: middle;
    margin-right: 2px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 600px) {
    /* Scale down die-cut stickers on mobile */
    .patron-stickers-display .sticker-combo {
        font-size: clamp(1rem, 5vw, 2rem);
    }

    /* Inline zones don't float on mobile — stack normally */
    .sticker-zone-float-left,
    .sticker-zone-float-right {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Tighter zone markers on mobile */
    .sticker-zone-marker {
        padding: 3px 10px;
    }

    .zone-marker-label {
        font-size: 10px;
    }

    .zone-marker-plus {
        font-size: 1.2em;
    }

    /* Designer modal full-width on mobile */
    .sticker-designer-modal {
        max-width: 100%;
        border-radius: 12px;
        padding: 16px;
        max-height: 90vh;
    }

    .designer-design-options {
        flex-direction: column;
    }

    .designer-step-row {
        flex-direction: column;
        gap: 8px;
    }

    .designer-header-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .designer-icon-options {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}