<style>
    /* Increased specificity for HubSpot */
    #games .brand-text-primary { color: #1E3A8A; }
    #games .brand-text-secondary { color: #4B5563; }
    #games .brand-orange { color: #F97316; }
    #games .border-brand-orange { border-color: #F97316; }
    #games .bg-brand-orange { background-color: #F97316; }
    #games .hover\:bg-brand-orange-dark:hover { background-color: #EA580C; }

    #games .memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    #games .memory-card { aspect-ratio: 1 / 1; perspective: 1000px; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s; }
    #games .memory-card.flipped { transform: rotateY(180deg); }
    #games .memory-card .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    #games .memory-card .card-face.card-front { font-size: clamp(2rem, 10vw, 3.5rem); background-color: #BFDBFE; color: #1E3A8A; transform: rotateY(180deg); }
    #games .memory-card .card-face.card-back { background-color: #1E3A8A; color: white; font-size: 2.5rem; }

    #games .pattern-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    #games .pattern-pad { width: 100%; aspect-ratio: 1 / 1; border-radius: 1rem; cursor: pointer; transition: filter 0.2s, transform 0.1s; filter: brightness(0.9); }
    #games .pattern-pad:active, #games .pattern-pad.active { filter: brightness(1.2); transform: scale(0.97); }

    #games .pio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    #games .pio-box { aspect-ratio: 1 / 1; background-color: #e5e7eb; border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; cursor: pointer; }
    #games .pio-box .cigarette { font-size: clamp(2.5rem, 12vw, 4rem); transition: opacity 0.2s; opacity: 0; user-select: none; }
    #games .pio-box.up .cigarette { opacity: 1; }

    #games #scratch-off-area { width: 320px; max-width: 100%; height: 200px; position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin: 0 auto; border: 2px solid #ccc; }
    #games #message-underneath { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMjAwIj48cmVjdCB3aWR0aD0iMzIwIiBoZWlnaHQ9IjIwMCIgcng9IjEzIiBmaWxsPSIjRkZERTdBIi8+PHBhdGggZmlsbD0iI0ZGRkJFQiIgZD0iTTIyMi40IDEzMy42Yy0xMS4yIDAtMjEuNi00LTI5LjYtMTAuNGMtMTYuOC0xMy42LTIwLjgtMzYtOS42LTUyLjhjNC02IDkuNi0xMC40IDE2LjgtMTMuNmMtOC0xMy42LTExLjItMzAuNC0xLjYtNDQuOGM5LjYtMTQuNCAyNi40LTIwLjggNDEuNi0xNy42YzE1LjIgMy4yIDI2LjQgMTQgMjkuNiAyOC44YzYgMS42IDEyIDQuNCAxNi44IDguOGMyMC44IDE2LjggMjIuNCA0NC44IDQuOCA2NC44Yy00LjggNS42LTEwLjQgOC44LTE2LjggMTAuNGMtMy4yIDEyLjgtMTQgMjIuNC0yNy4yIDI1LjZjLTQuOCAxLjYtOS42IDEuNi0xNC40IDEuNnoiIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUgMCAwIDEuMjUgLTgwIC01NSkiLz48L3N2Zz4='); background-size: cover; border-radius: 13px; display: flex; justify-content: center; align-items: center; }
    #games #message-text-wrapper { color: #424242; font-weight: 500; font-size: 18px; text-align: center; line-height: 1.4; width: 65%; }
    #games #rub-off-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: grab; border-radius: 13px; }
    #games #rub-off-canvas:active { cursor: grabbing; }
    #games #refresh-icon-button { position: absolute; bottom: 8px; right: 8px; background: rgba(255, 255, 255, 0.7); border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; color: #333; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 10; }
</style>