@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Rubik';
    src: url('/fonts/Rubik-Regular.ttf') format('truetype');
}

@font-face {
    font-weight: bolder;
    font-style: normal;
    font-family: 'Rubik-bold';
    src: url('/fonts/Rubik-Regular.ttf') format('truetype');
}

@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Consolas';
    src: url('/fonts/Consolas.ttf') format('truetype');
}

@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Assistant';
    src: url('/fonts/Assistant-Regular.ttf') format('truetype');
}


html {
    scroll-behavior: smooth;
}

:focus-visible {
    outline: 3px dashed #F7E35B;
    outline-offset: 4px;
    border-radius: 10px;
}
header{z-index:3000;}
main{z-index:1000;position:relative;min-height:800px;}
footer {
    z-index: 1000;
    position: relative
}
.pointer {cursor:pointer;}
.md\:py-14{width:61%;}
.md\:pt-8 {
    padding: 20px;
    border-bottom: thin groove rgba(124,77,255,.12);
    margin-bottom: 10px;
}
.pt-6 {
    padding-top: 1.5rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.outline-white\/10 {
    outline-color: rgb(255 255 255 / 0.1);
}
.bg-grape\/20
{
    background-color: rgb(124 77 255 / 0.2);
}
.md\:grid-cols-\[1fr\2c 240px\] {
    grid-template-columns: 1fr 240px;
}
.outline-1 {
    outline-width: 1px;
}
.outline {
    outline-style: solid;
}
.shadow-sticker {
    --tw-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-primary {
    background: linear-gradient(135deg, #EAF6FF, #EBFDF6);
    color: #0f3b4a;
    box-shadow: 0 8px 18px rgba(156, 203, 230, .25);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.mt-2.list-disc {
    margin: 0 43px;
}
.rounded-2xl {
    border-radius: 1rem;
}
.text-white {
    --tw-text-opacity 1 : 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.left{text-align:left;direction:ltr;}
.right{text-align:right;direction:rtl;}
.font-round {
    font-family: Fredoka, system-ui;
}
.text-sky {
    --tw-text-opacity: 1;
    color: rgb(33 193 255 / var(--tw-text-opacity, 1));
}
.gap-a {
    gap: calc(var(--spacing) * 2);
}
.drop-shadow {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.rounded {
    border-radius: 2rem; /* 4px */
}
.scorebadge {
    background: linear-gradient(to bottom right, #FFD700, #FFA500);
    border: 3px solid yellow;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    transition: transform 200ms ease;
}
    .scorebadge:hover {
        transform: scale(1.05);
    }
.bonus {
    position: absolute; 
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #facc15; /* text-yellow-400 */
}
.scoreVal {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 800; /* font-extrabold */
    color: #2d3436; /* text-[#2d3436] */
    line-height: 1; /* leading-none */
    padding-top: 0.25rem;
}
select option {
    background-color: #aaa;
}
.display{display:block;}
.center {
    text-align: center;
}
#menutop a{
    color: #fff;
    text-decoration: none;
}
    #menutop a:hover {
        color: #f7e35b;
    }
footer a {
    text-decoration: none;
    color: rgb(255 255 255 / var(--tw-text-opacity, .55))
}
    @media (min-width: 48rem) {
        .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.spray {
    background: radial-gradient(1200px 300px at 80% -10%, rgba(255,77,109,.15), transparent), radial-gradient(900px 260px at -10% 90%, rgba(70,231,210,.12), transparent), radial-gradient(700px 200px at 50% 110%, rgba(124,77,255,.12), transparent), linear-gradient(180deg, #0b0b12 0%, #12122a 70%, #0d0d20 100%);
}

/* אפקט "סלוטייפ" */
.tape:before,
.tape:after {
    content: "";
    position: absolute;
    width: 80px;
    height: 18px;
    background: repeating-linear-gradient( 45deg, rgba(255,255,255,.6) 0 8px, rgba(255,255,255,.45) 8px 16px );
    mix-blend-mode: screen;
    opacity: .55;
    filter: blur(.2px);
    transform: rotate(-8deg);
    left: 10px;
    top: -12px;
    border-radius: 4px;
}

.tape:after {
    left: auto;
    right: 10px;
    transform: rotate(6deg);
}

/* מסגרת "שרבוט" */
.scribble {
    outline: 2px dashed rgba(255,255,255,.25);
    box-shadow: 0 0 0 6px rgba(255,255,255,.03) inset;
}

/* נטיות קטנות לטקסט/כרטיסים */
.wonky {
    transform: rotate(-.6deg);
}

.wonky2 {
    transform: rotate(.7deg);
}

/* בועה לכותרות קצרות */
.bubble {
    position: relative;
    border-radius: 18px;
    padding: 14px 16px;
    background: #1c1c3a;
    border: 3px solid #7C4DFF;
}

    .bubble:after {
        content: "";
        position: absolute;
        bottom: -14px;
        right: 22px;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 14px solid #7C4DFF;
        filter: drop-shadow(0 2px 0 rgba(0,0,0,.2));
    }

/* שורת כוכבים דקורטיבית סביב הסקשנים */
.stars {
    position: relative;
}

    .stars:before,
    .stars:after {
        content: "✦ ✧ ✦ ✧ ✦";
        position: absolute;
        inset: auto 0 0 0;
        text-align: center;
        color: #fff3;
        animation: sparkle 3.2s linear infinite;
    }

    .stars:after {
        content: "✧ ✦ ✧ ✦ ✧";
        bottom: auto;
        top: -10px;
        animation-duration: 2.4s;
    }
.form-section.hidden {
    display: none;
}

.form-section.visible {
    display: block;
}
.ltr{direction:ltr;}
.rtl{direction:rtl;}
.iframe {
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 1200px;
    margin: 0 auto;
    height: 1728px;
    border: none;
    border-radius: 10px;
}
iframe.queez {
    display: block;
    border: none;
    overflow-y: hidden;
    height: 3600px;
}
    .iframe::-webkit-scrollbar {
        display: none;
    }
.historybox {
    position: absolute;
    right: 2%;top:47px;
}
    .historybox li {
        border: solid 1px yellow;
        padding: 2px;
        border-radius: 7px;
        font-size: 13px;
        margin: 8px 2px;
    }
    .historybox .pinned {
        background: rgba(255,225,0,0.08);
        box-shadow: 0 8px 18px rgba(0,0,0,0.35);
        padding: 7px;
    }

        .historybox .pinned::before {
            content: "";
            position: absolute;
            right: 10px;
            top: 8px;
            bottom: 8px;
            width: 4px;
            border-radius: 999px;
            background: #ffe100;
        }

        .historybox .pinned .item-text {
            padding-right: 5px;
            font-weight: 800;
            border-right: 3px solid #ffe100;
        }

/* Pin icon */
.pin-icon {
    width: 22px;
    height: 22px;
    background: #ffe100;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    float: left;
}

    .pin-icon svg {
        width: 14px;
        height: 14px;
        fill: #0b0f1f;
    }
.alert-blocked {
    background: rgba(255, 88, 88, 0.12);
    border: 1px solid rgba(255, 60, 60, 0.45);
    padding: 16px 20px;
    border-radius: 14px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-blocked-icon {
    font-size: 20px;
    line-height: 1;
    color: #ff4a4a;
    margin-top: 2px;
}

.alert-blocked-title {
    font-weight: 700;
    font-size: 17px;
    color: #ff3b3b;
    margin-bottom: 4px;
}

.alert-blocked-text {
    font-size: 15px;
    color: #ffffff;
    opacity: 0.9;
    line-height: 1.45;
}
.alert-blocked-text a{text-decoration:underline;
}
/* בסיס משותף לכל ההודעות */
.alert-box {
    padding: 16px 20px;
    border-radius: 14px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(4px);
}

/* אייקון */
.alert-icon {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

/* כותרת */
.alert-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}

/* טקסט */
.alert-text {
    font-size: 15px;
    color: #ffffff;
    opacity: 0.9;
    line-height: 1.45;
}

/* ===== סוגים ===== */

/* אזהרה / חסימה */
.alert-warning {
    background: rgba(255, 88, 88, 0.12);
    border: 1px solid rgba(255, 60, 60, 0.45);
}

    .alert-warning .alert-title {
        color: #ff3b3b;
    }

    .alert-warning .alert-icon {
        color: #ff4a4a;
    }

/* התראה (משהו מצריך תשומת לב, אבל לא קריטי) */
.alert-attention {
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.45);
}

    .alert-attention .alert-title {
        color: #ffcc66;
    }

    .alert-attention .alert-icon {
        color: #ffb84d;
    }

/* מידע */
.alert-info {
    background: rgba(90, 170, 255, 0.12);
    border: 1px solid rgba(90, 170, 255, 0.45);
}

    .alert-info .alert-title {
        color: #6bb8ff;
    }

    .alert-info .alert-icon {
        color: #5aaaFF;
    }

/* הצלחה */
.alert-success {
    background: rgba(120, 255, 150, 0.14);
    border: 1px solid rgba(120, 255, 150, 0.45);
}

    .alert-success .alert-title {
        color: #7dff97;
    }

    .alert-success .alert-icon {
        color: #70ff89;
    }

.floatDiv {
    width: 28%;
    border: none;
    display: none;
    position: absolute;
    z-index: 1200;
    min-height: 300px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    background: #aaa;
}

    .floatDiv .modal-header {
        padding-top: 36px;
        background: var(--bs-gray-500);
    }

    .floatDiv .logo {
        width: 20%;margin:0 10px;
    }

    .floatDiv .act span {
        margin: 0 20px;
        border: 2px solid var(--secondary-green);
        background: var(--background-light-gray);
        padding: 10px;
        border-radius: 12px;
        cursor: pointer;
    }

    .floatDiv form {
        background: var(--background-off-white);
        border-radius: 16px;
        padding: 16px 18px;
    }

        .floatDiv form input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #d9e6ee;
            border-radius: 12px;
            background: #fff;
            font: inherit;
            margin: 5px;
        }

            .floatDiv form input[type="checkbox"] {
                width: auto;
            }

        .floatDiv form .checks {
            float: right;
        }

            .floatDiv form .checks.remme {
                float: left;
            }

            .floatDiv form .checks a {
                margin: 0 10px;
            }

    .floatDiv.short {
        width: 20%
    }

    .floatDiv.long {
        width: 34%;
        min-height: 500px;
        border: none;
        box-shadow: none
    }

        .floatDiv.long .modal-header {
            padding-top: 36px;
            background: var(--text-medium-gray);
        }

        .floatDiv.long .modal-body {
            padding: 0;
            text-align: center
        }

    .floatDiv .close {
        margin-top: -2px;
        position: absolute;
        left: 15px;
        top: 15px;
        font-size: 12px;
        color: #000;
        border: none;
        padding: 15px;
        border-radius: 30px;
        text-align: center;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        background-image: url("../Images/close_black.png");
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 100;
    }

        .floatDiv .close:hover {
            box-shadow: 0 0 12px #387bbe
        }

@keyframes sparkle {
    0% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .6;
    }
}

/* קפיצת ניקוד */
.score-pulse {
    animation: scorePulse 0.35s ease-out;
}

@keyframes scorePulse {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}




/* אנימציה לכפתור עצמו - מתנפח וחוזר */
@keyframes score-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 25px #FFD700;
    }

    100% {
        transform: scale(1);
    }
}

/* אנימציה לטקסט הבונוס - עולה למעלה ונעלם */
@keyframes float-up {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1.5);
    }
}

/* המחלקות שנפעיל ב-Tailwind */
.animate-score-pop {
    animation: score-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-float-up {
    animation: float-up 1s ease-out forwards;
}

/* OLd
 הבהוב רקע
.score-glow {
    animation: scoreGlow 0.45s ease-out;
}
@keyframes scoreGlow {
    0% {
        box-shadow: 0 0 0px rgba(255,255,255,0);
    }

    40% {
        box-shadow: 0 0 12px rgba(255,255,255,0.6);
    }

    100% {
        box-shadow: 0 0 0px rgba(255,255,255,0);
    }
}

 בועה קטנה שעולה ונעלמת 
.score-float {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 700;
    color: #aaff72;
    opacity: 0;
    animation: scoreFloat 0.8s ease-out forwards;
}

@keyframes scoreFloat {
    0% {
        transform: translate(-50%, 10px);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -25px);
        opacity: 0;
    }
}
 */
@media (min-width: 768px) {
    .md\:pt-8 {
        padding-top: 2rem;
    }
    
}
@media (min-width: 768px) {
    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}
@media (min-width: 300px) and (max-width: 900px) {
    .floatDiv {
        width: 90% !important;
    }
    .md\:py-14 {
        width: 100%;
    }
    .iframe{width:100%;}
    .md\:pt-8 {
        padding-top: 2rem;
    }
    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    main{width:100% !important;}
    #mobileMenu {padding:20px;}
}
@media (min-width: 300px) and (max-width: 400px) {
    #mobileMenu {
        padding: 2px;
        margin-right:5%;
    }
    .grid{display:block;}
}
/* --- תיקון למובייל --- */
@media (max-width: 600px) {

    pre {
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 11px;
        line-height: 1.3;
    }

    .sticker-note {
        position: static !important;
        transform: none !important;
        margin: 10px auto;
        display: block;
        text-align: center;
    }

    .scribble {
        padding: 12px !important;
    }
}
.fx-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

/* --- floating bonus label --- */
.bonus-label {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%,-50%);
    font: 800 18px/1 system-ui, "Rubik", sans-serif;
    color: chartreuse;
    text-shadow: 0 10px 25px rgba(0,0,0,.45);
    opacity: 0;
    animation: labelPop 1.2s ease-out forwards;
}

@keyframes labelPop {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.85);
    }

    15% {
        opacity: 1;
        transform: translate(-50%,-60%) scale(1.05);
    }

    100% {
        opacity: 0;
        transform: translate(-50%,-95%) scale(1);
    }
}

/* --- star base --- */
.fx-star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%,-50%) scale(.6);
    filter: drop-shadow(0 0 18px rgba(255, 230, 120, .9));
    opacity: 0;
}

    .fx-star::before {
        content: "★";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 42px;
        color: #ffe7a3;
        text-shadow: 0 0 8px rgba(255,255,255,.55), 0 0 20px rgba(255,220,100,.55);
    }

    /* appear pop + glow */
    .fx-star.appear {
        animation: starAppear 320ms cubic-bezier(.2,.9,.2,1) forwards;

    }

@keyframes starAppear {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.6);
    }

    70% {
        opacity: 1;
        transform: translate(-50%,-55%) scale(1.35);
    }

    100% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1.1);
    }
}

/* fly (bezier-ish via keyframes) */
.fx-star.fly {
    animation: starFly var(--flyDur, 700ms) cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes starFly {
    0% {
        opacity: 1;
        transform: translate(-50%,-50%) translate(0px, 0px) scale(1.1) rotate(0deg);
    }

    45% {
        transform: translate(-50%,-50%) translate(calc(var(--tx)*.55), calc(var(--ty)*.35)) scale(1.0) rotate(12deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) scale(.55) rotate(25deg);
    }
}

/* --- particles --- */
.particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 240, 160, .95);
    transform: translate(-50%,-50%);
    filter: blur(.2px);
    opacity: 0;
    animation: particle 520ms ease-out forwards;
    animation-delay: var(--pDelay, 0ms);
}

@keyframes particle {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.6);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%,-50%) translate(var(--px), var(--py)) scale(.2);
    }
}
#score-badge.lock {
    animation: pillBump 260ms ease-out;
    box-shadow: 0 0 0 rgba(255,255,255,0), 0 8px 25px rgba(0,0,0,.25);
}

@keyframes pillBump {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

#score-badge.glow {
    animation: pillGlow 520ms ease-out;
}

@keyframes pillGlow {
    0% {
        box-shadow: 0 8px 25px rgba(0,0,0,.25), 0 0 0 rgba(255,255,255,0);
    }

    40% {
        box-shadow: 0 8px 25px rgba(0,0,0,.25), 0 0 28px rgba(255,255,255,.55);
    }

    100% {
        box-shadow: 0 8px 25px rgba(0,0,0,.25), 0 0 0 rgba(255,255,255,0);
    }
}