/* ---------- HIDE HELPER NUMBERS BY DEFAULT ---------- */
.helper-number {
  display: none !important;
}
/* Set default columns for board grid and QA face color vars */
:root {
  --cols: 6;
  --qa-bg-color: #000000;
  --qa-text-color: #ffffff;
}
/* ============================================================
   QuizyBoard v0.1 – style.css
   30‑Apr‑2025
   ------------------------------------------------------------
   • Global reset & font
   • Header (logo left, hamburger right – even in RTL)
   • Sidebar (collapsed + slide‑in)
   • Game board grid & animated cells
   • Helper numbers toggle (ALT+H)
   • Media fade‑in
   • Player / Scoreboard overlays
   • Responsive tweaks
   ============================================================ */

/* ----------  GLOBAL RESET  ---------- */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Assistant',sans-serif;
}
/* ----------  SCOREBOARD ENTRY ANIMATIONS ---------- */
@keyframes imgBounceIn{
    0%{transform:scale(0);opacity:0;}
    60%{transform:scale(1.25);opacity:1;}
    100%{transform:scale(1);opacity:1;}
}
.score-img-bounce{
    animation:imgBounceIn .6s ease-out forwards;
}

/* Body is RTL by default (Hebrew) but we override header flow later */
body{
    background:#000;
    color:#fff;
    overflow:hidden;
    direction:rtl;          /* will switch to ltr when lang = en */
}

/* ----------  HEADER  ---------- */
/* Keep logical order (logo on LEFT, menu on RIGHT) regardless of body dir */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    background:#000;
    font-size:24px;
    direction:ltr;          /* force normal flow */
    position:fixed;
    top:0;left:0;
    width:100%;
    z-index:500;
    height:60px;                     /* fixed height */
    transition: transform 0.3s ease-out;
    transform: translateY(0);
}

.header.hidden {
    transform: translateY(-100%);
}

.header.visible {
    transform: translateY(0);
}

.header .logo {
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 24px;  /* Increased size to match footer */
}

.header .logo-main {
    font-size: 24px;  /* Increased size to match footer */
}

.header .menu-btn {
    flex: 0 0 auto;
    margin-left: 20px;
}

body{                               /* adjust body padding for header */
    padding-top:60px;               /* pushes board below header */
    transition: padding-top 0.3s ease-out;
}

body.header-hidden {
    padding-top: 0;                 /* remove padding when header is hidden - board expands to fill screen */
}

@keyframes scoreFadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
.score-fade-in{
    animation:scoreFadeIn .5s ease-out forwards;
    animation-delay:.3s;
}

.logo{
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-main {
    /* blue gradient text */
    background: linear-gradient(180deg, #338fff 0%, #0066cc 60%, #004999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    line-height: 1.2;
}

.logo-slogan {
    color: #888;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.menu-btn{
    cursor:pointer;
    user-select:none;
    background:none;   /* remove white box */
    border:none;
    width:26px;height:18px;
    display:flex;flex-direction:column;
    justify-content:space-between;
    z-index:400;
    font-size:0;          /* hide underlying text */
}
.menu-btn span,
.menu-btn::before,
.menu-btn::after{
    content:'';
    display:block;
    height:3px;          /* slimmer bar */
    width:100%;
    background:#aaa;     /* light‑gray bar */
    border-radius:1.5px;
}

/* ----------  SIDEBAR  ---------- */
.sidebar{
    position:fixed;
    top:0; right:-300px;            /* slides to 0 via JS */
    width:300px; height:100vh;
    background:rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color:#fff;
    display:flex;
    flex-direction:column;
    transition:right .3s ease;
    z-index:200;
    box-shadow: -4px 0 16px rgba(0,0,0,0.3);
}
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 0;
}
.sidebar-footer {
    flex-shrink: 0;  /* footer stays at bottom, doesn't shrink */
}

/* sidebar when open (triggered by JS) */
.sidebar.open{
    right:0;
}

/* shift hamburger out of sidebar flow */
body.sidebar-open .menu-btn{
    z-index:450;
}

/* push sidebar content down so header doesn't overlap */
.sidebar-content{
    padding-top:80px;
}

/* Sidebar elements */
.sidebar-content label{display:block;margin-bottom:15px;}

/* Selects hover state */
.sidebar-content select:hover{
    background:rgba(255, 255, 255, 0.08);
    border-color:rgba(255, 255, 255, 0.2);
}

/* make <option> text visible inside dark sidebar selects */
.sidebar-content select option{
    background:rgba(17, 24, 39, 0.95) !important;
    color:#fff !important;
    direction:ltr;
}

/* Button hover states */
#addPlayerBtn:hover{
    background:rgba(59, 130, 246, 0.25) !important;
    border-color:rgba(59, 130, 246, 0.5) !important;
}

button[onclick="resetGame()"]:hover{
    background:rgba(239, 68, 68, 0.25) !important;
    border-color:rgba(239, 68, 68, 0.5) !important;
}

#saveAsBtn:hover{
    background:rgba(245, 158, 11, 0.25) !important;
    border-color:rgba(245, 158, 11, 0.5) !important;
}

#dashboardBtn:hover{
    background:rgba(16, 185, 129, 0.25) !important;
    border-color:rgba(16, 185, 129, 0.5) !important;
}

#openHelpModalBtn:hover,
#fullResetBtn:hover:not([onclick="resetFullBoard()"]){
    background:rgba(255, 255, 255, 0.1) !important;
}

#fullResetBtn:hover{
    background:rgba(239, 68, 68, 0.25) !important;
    border-color:rgba(239, 68, 68, 0.5) !important;
}

/* Spinner animation for save button */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sidebar-footer{
    /* Removed old flex styling - now handled inline in HTML */
    /* flex-shrink: 0 set above to keep footer at bottom */
}
.sidebar-footer a{color:orange;text-decoration:none;}
/* fullscreen-btn styling now inline in HTML */

/* ----------  GAME BOARD  ---------- */
.board{
    /* responsive grid driven by --cols and --rows (JS sets these) */
    display:grid;
    gap:4px;
    width:100%;
    /* grid-template-columns and grid-template-rows set dynamically in JS */
    cursor: none !important; /* Hide cursor on the board */

    /* keep board below header (header = 60px + margins) */
    height:calc(100vh - 60px - 10px);
    transition: height 0.3s ease-out;

    /* Hide board initially until JS renders it (prevents flash of sample cube) */
    opacity: 0;
    visibility: hidden;
}

.board.ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* When header is hidden, board expands to full screen */
body.header-hidden .board {
    height: 100vh;
    overflow:hidden;              /* no scrollbars */
}

/* Hide cursor for all elements inside the board */
.board * {
    cursor: none !important;
}

/* Keep default cursor for interactive elements inside the board */
.board .cell,
.board .header-cell,
.board button,
.board [contenteditable],
.board .qa-text {
    cursor: none !important;
}

/* Simple question/answer display container */
.qa-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.qa-container.fade-out .qa-text {
    opacity: 0;
}

.qa-container .qa-text {
    cursor: text !important;
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    text-align: center;
    direction: rtl;
    padding: 2rem;
    line-height: 1.2;
    width: 100%;
    max-width: 90%;
    opacity: 1;
    transition: opacity 0.15s ease;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ----------  BOARD HEADER CELLS  ---------- */
.header-cell{
    background:linear-gradient(135deg,#002b80 0%,#003ea6 100%);
    color:#fff;
    font-weight:700;
    border-radius:6px;
    user-select:text;

    /* center text perfectly */
    display:flex;
    align-items:center;          /* vertical center */
    justify-content:center;      /* horizontal center */

    /* bigger responsive font */
    font-size:clamp(18px,3vw,28px);

    padding:8px;                 /* increased padding for better spacing */
    text-align:center;
    min-height:60px;             /* minimum height matching old fixed height */
    word-wrap:break-word;        /* allow long words to break */
    overflow-wrap:break-word;    /* modern property for word breaking */
    hyphens:auto;                /* auto hyphenation for Hebrew */
}

/* ----------  HEADER BREATH EFFECT ---------- */
@keyframes headerBreath {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Increased speed and original solid blue gradient */
.header-cell {
  background: linear-gradient(135deg, #002b80 0%, #003ea6 100%);
  background-size: 200% 100%;
  animation: headerBreath 6s ease-in-out infinite;
}

.header-cell:nth-of-type(1) { animation-delay: 0s; }
.header-cell:nth-of-type(2) { animation-delay: 1s; }
.header-cell:nth-of-type(3) { animation-delay: 2s; }
.header-cell:nth-of-type(4) { animation-delay: 3s; }
.header-cell:nth-of-type(5) { animation-delay: 4s; }
.header-cell:nth-of-type(6) { animation-delay: 5s; }

.cell{
    background:linear-gradient(135deg,#0039b7 0%,#00227d 100%);
    border-radius:6px;
    box-shadow:0 0 8px rgba(0,0,0,.5);
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    position:relative;
    cursor:default;
    opacity:1;
    transform-origin:center;
    animation:none;
    transform:scale(1);
    transition: transform .25s ease, background 0.3s cubic-bezier(.4,0,.2,1);
}

.cell::before{
    content:attr(data-val);
    background:linear-gradient(180deg,#ffeb9b 0%,#ffb010 60%,#996a00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size:clamp(32px,8vw,80px);
    display:inline-block;
    font-weight:800;
}
.cell .currency{
    position:relative;
    display:inline-block;
    margin-inline-start:2px;
    font-size:120%;
    color:#ffd670;
    vertical-align:sub;        /* lower it below baseline */
    transform:translateY(15%); /* fine‑tune downward */
}
.cell:hover{
    transform: scale(1.07);     /* subtle enlarge on hover */
}

/* Disable hover bounce for used cells */
.cell.used:hover {
    transform: none !important;
    /* Optionally, you can also set background to keep it consistent */
}

/* ----------  USED CELL (already answered) ---------- */
.cell.used{
    /* pointer-events:none;        לא ניתן ללחוץ שוב */
    /* keep cell visible so avatar is shown */
    position:relative;               /* anchor for absolutely‑positioned avatar */
}

/* helper number (ALT+H toggle) */
.cell .helper-number{
    position:absolute;top:5px;left:5px;
    font-size:12px;color:rgba(255,255,255,.6);
}

/* ----------  MEDIA FADE‑IN  ---------- */
.fade-in{animation:fadeIn .5s ease-in-out;}
@keyframes fadeIn{
    from{opacity:0;} to{opacity:1;}
}

/* Cell entrance animation */
@keyframes bounceIn{
    0%{transform:scale(.6);opacity:0;}
    60%{transform:scale(1.15);opacity:1;}
    80%{transform:scale(.95);}
    100%{transform:scale(1);}
}
@keyframes cellBounceIn{
  0%   {transform:scale(0);opacity:0;}
  60%  {transform:scale(1.25);opacity:1;}
  100% {transform:scale(1);opacity:1;}
}

/* Save notification animations */
@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
}

/* ----------  OVERLAYS  (player modal / scoreboard) ---------- */
.overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.85);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:30000;
}
.overlay img,.overlay video{
    max-width:95%;max-height:95%;object-fit:contain;
}

/* Player modal specifics */
#playerModal h2{margin-top:15px;font-weight:700;}
#playerModal h3{margin-top:5px;font-size:72px;}


/* Scoreboard horizontal layout */
#scoreBoard{
    display:flex;
    flex-direction:row !important;   /* ensure horizontal layout overrides .overlay */
    justify-content:center;
    align-items:center;
    gap:48px;                 /* space between top‑3 cards */
    padding:24px;
    flex-wrap:wrap;
}

/* ----------  SCOREBOARD CARDS ---------- */
.score-item{
    width:180px;
    text-align:center;
}
.score-item img{
    width:150px;
    height:150px;
    border-radius:50%;
    aspect-ratio:1/1;         /* keep square, ensures perfect circle */
    object-fit:cover;
    border:4px solid #2980ff;
    background:#111;          /* fallback bg when no src */
}
.score-item img[src=""],
    .score-item img:not([src]),
.score-item img[src="media/default.png"]{
    content:url("media/user.svg");   /* fallback icon */
}
.score-item .name{
    margin:12px 0 4px;
    font-size:22px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
}
.score-item .gold-score{
    font-size:28px;
    font-weight:900;
    background:linear-gradient(180deg,#ffef9d 0%,#ffc440 50%,#b37c00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ----------  PLAYER MODAL BIG GOLD SCORE ---------- */
.player-modal .gold-score{
    font-size:72px;
    font-weight:900;
    line-height:1;
    background:linear-gradient(180deg,#ffeb9b 0%,#ffc440 50%,#b37c00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:8px 0 0 0;
    text-shadow:0 0 6px rgba(255,176,16,.4);
}

/* ----------  PLAYER LIST  ---------- */
.player-list{
    list-style:none;
    margin:0;
    padding:0;
    max-height:35vh;
    overflow-y:auto;
}
.player-list li{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255, 255, 255, 0.05);
    border:1px solid rgba(255, 255, 255, 0.1);
    border-radius:6px;
    padding:10px 12px;
    margin-bottom:8px;
    cursor:pointer;
    font-size:14px;
    transition:all 0.2s ease;
    position:relative;
}
.player-list li:hover{
    background:rgba(255, 255, 255, 0.08);
}
.player-list img{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255, 255, 255, 0.2);
}

/* default user icon when no image is provided */
.player-list img[src=""]{
    content:url("media/user.svg");
}
.player-list .player-info{
    flex:1;
    min-width:0;
}
.player-list .player-name{
    font-weight:500;
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.player-list .badge{
    font-size:13px;
    font-weight:600;
    color:rgba(255, 255, 255, 0.9);
}
.player-list .delete-player{
    padding:4px 6px;
    background:rgba(239, 68, 68, 0.15);
    border:1px solid rgba(239, 68, 68, 0.3);
    border-radius:4px;
    color:#EF4444;
    cursor:pointer;
    font-size:12px;
    transition:all 0.2s ease;
    opacity:0;
}
.player-list li:hover .delete-player{
    opacity:1;
}
.player-list .delete-player:hover{
    background:rgba(239, 68, 68, 0.25);
    border-color:rgba(239, 68, 68, 0.5);
}

/* ----------  SHORTCUTS POSITIONING  ---------- */
.shortcuts{
    font-size:11px;
    color:#bbb;
    line-height:1.35;
    margin:12px 4px 8px 0;   /* push a bit below player list */
}
.shortcuts h4{
    margin:0 0 4px 0;
    font-size:12px;
    color:#ccc;
}
.shortcuts ul{list-style:none;margin:0;padding:0;}

/* ----------  PLAYER FORM (ADD/EDIT) ---------- */
.overlay form,
.overlay .player-form{   /* fallback selector for inline builds */
    text-align:center;
}
.overlay .player-form-img{
    width:120px;
    height:120px;
    border-radius:50%;
    border:4px solid #2980ff;
    object-fit:cover;
    display:block;
    margin:0 auto 16px;
}
.overlay label{
    display:block;
    color:#ccc;
    font-size:14px;
    margin-bottom:10px;
    text-align:right;
}
.overlay input[type="text"],
.overlay input[type="file"]{
    width:100%;
    padding:6px 8px;
    margin-top:4px;
    background:#111;
    border:1px solid #555;
    color:#fff;
    border-radius:4px;
}
.overlay button{
    margin:6px 8px 0 8px;
    padding:6px 14px;
    background:#2980ff;
    border:none;
    border-radius:4px;
    color:#fff;
    cursor:pointer;
    font-size:14px;
}
.overlay button#pfCancel{
    background:#777;
}

/* ----------  RESPONSIVE  ---------- */
@media(max-width:768px){
    .cell{width:110px;height:70px;font-size:18px;}
    .sidebar{width:260px;right:-260px;}
}

/* ----------  GOLD SCORE TEXT  ---------- */
.gold-score{
    font-weight:700;
    color:#ffb010;          /* warm gold */
}

/* ----------  BLUE ACTION BUTTON ---------- */
.blue-btn{
    background:linear-gradient(135deg,#0039b7 0%,#00227d 100%);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:8px 10px;
    width:100%;
    cursor:pointer;
    font-weight:400 !important;
    transition:filter .2s;
}
.blue-btn:hover{
    filter:brightness(1.15);
}
 
/* ----------  PLAYER MODAL BIG GOLD SCORE ---------- */
/* BIG score in player modal */
.player-modal .gold-score{
    font-size:72px;            /* even larger */
    font-weight:900;
    line-height:1;
    background:linear-gradient(180deg,#ffeb9b 0%,#ffc440 50%,#b37c00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:8px 0 0 0;
    text-shadow:0 0 6px rgba(255,176,16,.4);
}

/* ----------  DELTA SCORE (green / red change) ---------- */
.delta-score{
    font-size:24px;
    font-weight:700;
    position:relative;
    margin-top:4px;
    animation:deltaFade 3.5s forwards;
}
.delta-score.plus{ color:#28c76f; }   /* green */
.delta-score.minus{ color:#ff4d4f; }  /* red */

@keyframes deltaFade{
  0%{opacity:0;transform:translateY(10px);}
  10%{opacity:1;transform:translateY(0);}
  85%{opacity:1;}
  100%{opacity:0;transform:translateY(-10px);}
}

/* ----------  SCORE BOUNCE ANIMATION ---------- */
@keyframes bounceScale{
    0%{transform:scale(1);}
    50%{transform:scale(1.3);}
    100%{transform:scale(1);}
}
.score-bounce{
    animation:bounceScale .4s ease-out;
}

/* ----------  GAME OVER SCREEN ---------- */
#gameOver{
    position:fixed;
    inset:0;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:8800;
}
.game-over-text{
    font-size:96px;
    font-weight:900;
    letter-spacing:6px;
    text-transform:uppercase;
    background:linear-gradient(180deg,#ffef9d 0%,#ffc840 50%,#b37c00 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 12px rgba(255,193,44,.6);
}
/* ----------  WINNER AVATAR INSIDE USED CELL ---------- */
.cell.used{
    position:relative;               /* anchor for absolutely‑positioned avatar */
}

/* subtle dark overlay */
.cell.used::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:rgba(0,0,0,.55);   /* gentle darkening */
    backdrop-filter:blur(1.5px);  /* slight blur */
    pointer-events:none;
}
.cell.used .answer-avatar{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:75%;                  /* responsive size - scales with cell */
    max-width:110px;            /* maximum size for larger screens */
    aspect-ratio:1/1;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #000;      /* visible border */
    background:#111;            /* fallback bg */
    pointer-events:none;
    animation:avatarBounceIn .5s ease-out forwards;
    z-index:1;
}
/* fallback avatar icon if no image provided */
.cell.used .answer-avatar[src=""],
.cell.used .answer-avatar:not([src]),
.cell.used .answer-avatar[src="media/default.png"]{
    content:url("media/user.svg");
}
@keyframes avatarBounceIn{
  0%{transform:translate(-50%,-50%) scale(0);}
  60%{transform:translate(-50%,-50%) scale(1.25);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
/* ----------  FULLSCREEN QA TEXT (fallback when no media) ---------- */
.qa-text{
    font-size:64px;
    font-weight:700;
    color: var(--qa-text-color);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    height:100%;
    padding:2rem;
    line-height:1.2;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* ----------  QA TEXT FADE-IN ---------- */
@keyframes qaFade{
    from{opacity:0;transform:scale(.92);}
    to  {opacity:1;transform:scale(1);}
  }
  .qa-text{
    opacity:0;
    animation:qaFade .8s ease forwards;   /* פייד-אין איטי */
  }

/* ----------  BACKGROUND BREATHING EFFECT ---------- */
/* ----------  BACKGROUND SHINE EFFECT ---------- */
 
/* Old breathe animation removed/commented out to avoid conflicts */
/* @keyframes breathe {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
} */

/* ----------  RED ACTION BUTTON (full reset) ---------- */
.red-btn{
    background:linear-gradient(135deg,#b90000 0%,#720000 100%);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:8px 10px;
    width:100%;
    cursor:pointer;
    font-weight:400 !important;
    transition:filter .2s;
}
.red-btn:hover{
    filter:brightness(1.15);
}

/* ensure sidebar reset button keeps red gradient despite generic styling */
.sidebar-content .red-btn{
    background:linear-gradient(135deg,#b90000 0%,#720000 100%);
}
.sidebar-content .red-btn:hover{
    filter:brightness(1.15);
}

/* ----------  ADD PLAYER BUTTON (blue gradient) ---------- */
/* more specific to beat .sidebar-content button rule */
.sidebar-content .add-player{
    background:linear-gradient(135deg,#2687ff 0%,#0057d8 100%);
    color:#fff;
    border:none;
    border-radius:4px;
    padding:8px 10px;
    width:100%;
    cursor:pointer;
    font-weight:400 !important;
    transition:filter .2s;
}
.sidebar-content .add-player:hover{
    filter:brightness(1.15);
}

.add-media-hint{
    font-size:14px;
    color:#bbb;
    margin-top:12px;
    text-align:center;
  }

  .media-action-box {
    background: #222;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    gap: 12px;
  }
  .media-action-box button {
    background: #0057d8;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
  }
  .media-action-box button#deleteMediaBtn {
    background: #b90000;
  }


  /* Media Action Modal Styles */
  #mediaActionModal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  #mediaActionModal .media-action-box {
    background: #222;
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #mediaActionModal .media-action-box button {
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #444;
    color: #fff;
    transition: background 0.2s;
  }
  #mediaActionModal .media-action-box button:hover {
    background: #555;
  }
  #mediaActionModal #replaceMediaBtn {
    background: linear-gradient(135deg, #3498db, #2980b9);
  }
  #mediaActionModal #deleteMediaBtn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
  }
  /* ----------  BLUR-TO-FOCUS EFFECT ---------- */
@keyframes blurToFocus {
    0%   { filter: blur(80px); }
    100% { filter: blur(0); }
  }
  .blur-effect {
    animation: blurToFocus 15s linear forwards;
  }

  /* ---------- PAUSED BLUR ANIMATION ---------- */
.paused-effect {
    animation-play-state: paused !important;
  }
.color-picker-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    opacity: 0;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1000;
    transition: opacity 0.2s;
}
.qa-container:hover .color-picker-btn,
.qa-container:hover #addMediaBtn {
    opacity: 0.7 !important;
    cursor: pointer;
}
#addMediaBtn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    opacity: 0;
    cursor: pointer;
    z-index: 1000;
}
/* ----------  PICKR POPUP Z‑INDEX FIX ---------- */
.pcr-app {
  z-index: 12000 !important;   /* above cube (9000) & header (500) */
}
/* ----------  COLORIS POPUP Z‑INDEX FIX ---------- */
.clr-picker {
  z-index: 40000 !important;   /* above everything */
}
.buzzer-status {
  display: inline-block;
  margin-right: 16px;
  font-size: 13px;
  font-weight: bold;
  vertical-align: middle;
}
.buzzer-status .dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-left: 5px;
  background: #ff4136;  /* אדום כברירת מחדל */
  vertical-align: middle;
  box-shadow: 0 0 3px #444;
  transition: background .3s;
}
.buzzer-status.online .dot { background: #2ecc40; }   /* ירוק כשמחובר */
.buzzer-status.offline .dot { background: #ff4136; }  /* אדום כשמנותק */

.help-btn-black {
  width: 100%;
  margin: 16px 0 0 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 700;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.help-btn-black:hover {
  background: #333;
}
.help-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  z-index: 12000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.help-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.help-modal-content {
  background: rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.help-modal-overlay.show .help-modal-content {
  opacity: 1;
  transform: scale(1);
}

/* Custom scrollbar for help modal */
.help-modal-content::-webkit-scrollbar {
  width: 8px;
}
.help-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.help-modal-content::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 4px;
}
.help-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}

#closeHelpModalBtn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 8px;
  margin-bottom: 8px;
}
#closeHelpModalBtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.help-modal-content h2 {
  margin-top: 0;
  font-size: 24px;
  text-align: center;
}
.help-modal-content ul {
  padding-right: 0;
  list-style: inside disc;
}
.help-modal-content ul ul {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 4px;
}
.help-modal-note {
  font-size: 15px;
  color: #bbb;
  margin-top: 18px;
  text-align: right;
}
.qa-text {
  padding: 2.5rem 2.5rem 2.5rem 2.5rem !important;
  font-size: 64px;
  font-weight: 700;
  color: var(--qa-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* אפקטים למדיה – עיצוב סלקט ואינפוט */
.effects-modal-content select,
.effects-modal-content input[type="number"] {
  width: 110px;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  color: #222;
  border: 1px solid #bbb;
  font-size: 16px;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
  margin: 0 4px;
}
.effects-modal-content select:focus,
.effects-modal-content input[type="number"]:focus {
  border: 1.5px solid #338fff;
  box-shadow: 0 0 0 2px #338fff33;
}
.effects-modal-content select:hover,
.effects-modal-content input[type="number"]:hover {
  border: 1.5px solid #338fff;
}
.effects-modal-content button {
  border-radius: 10px;
  font-size: 16px;
  padding: 10px 0;
  background: linear-gradient(90deg,#338fff 0%,#3ad0ff 100%);
  color: #fff;
  border: none;
  margin-top: 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.effects-modal-content button:hover {
  background: linear-gradient(90deg,#338fff 0%,#1e90ff 100%);
}
.effects-modal-content h2 {
  font-size: 24px;
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.cell {
  position: relative;
}

/* ===== Z-INDEX LAYERS FOR MEDIA EFFECTS ===== */
.qa-container img, .qa-container video {
  z-index: 10000 !important; /* המדיה בשכבה בסיסית */
}
.puzzle-overlay {
  z-index: 12000 !important; /* האפקטים מעל המדיה */
}
.focus-overlay {
  z-index: 12000 !important; /* האפקטים מעל המדיה */
}
.color-picker-btn, #addMediaBtn {
  z-index: 20000 !important; /* הכפתורים מעל הכל */
}

.qa-type-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0.28;
}

/* ---------- TIMER DISPLAY ---------- */
.timer-display {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cube-face.has-media .timer-display {
  top: 20px;
  bottom: auto;
}

.timer-bar-container {
  width: 300px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.timer-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #8bc34a 100%);
  width: 100%;
  transition: width 0.1s linear, background 0.3s;
  border-radius: 4px;
}

.timer-bar.warning {
  background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
}

.timer-bar.danger {
  background: linear-gradient(90deg, #f44336 0%, #e91e63 100%);
  animation: timerPulse 0.5s infinite;
}

.timer-text {
  font-size: 28px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  min-width: 60px;
  text-align: center;
}

.timer-text.finished {
  color: #f44336;
  animation: timerFinished 0.5s infinite;
}

@keyframes timerPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes timerFinished {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
/* ========== PODIUM DISPLAY ========== */
.podium-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 10;
    pointer-events: none;
}

.podium-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.podium-player img {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(41, 128, 255, 0.3);
    box-shadow: 0 0 30px rgba(41, 128, 255, 0.2),
                0 8px 24px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.podium-first img {
    border: 4px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3),
                0 0 60px rgba(255, 215, 0, 0.15),
                0 12px 32px rgba(0, 0, 0, 0.5);
}

.podium-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

.podium-first .podium-name {
    font-size: 22px;
    font-weight: 700;
}

.podium-position {
    font-size: 14px;
    color: #aaa;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

.podium-score {
    color: #FFD700;
    font-weight: 700;
    font-size: 32px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.9),
                 0 0 30px rgba(255, 215, 0, 0.6),
                 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    position: relative;
    z-index: 10;
    transition: transform 0.1s ease-out;
}

.podium-first .podium-score {
    font-size: 42px;
    animation: scoreGlow 2s ease-in-out infinite alternate;
}

@keyframes scoreGlow {
    from {
        text-shadow: 0 0 24px rgba(255, 215, 0, 0.95),
                     0 0 36px rgba(255, 215, 0, 0.65),
                     0 2px 4px rgba(0, 0, 0, 0.8);
    }
    to {
        text-shadow: 0 0 32px rgba(255, 215, 0, 1),
                     0 0 52px rgba(255, 215, 0, 0.85),
                     0 0 72px rgba(255, 215, 0, 0.45),
                     0 2px 4px rgba(0, 0, 0, 0.8);
    }
}

/* ---------- TEXT WIDTH SLIDER STYLING ---------- */
input[type="range"]#textMaxWidth {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* Slider track - webkit */
input[type="range"]#textMaxWidth::-webkit-slider-track {
  background: linear-gradient(to right, #4a9eff, #338fff);
  height: 8px;
  border-radius: 4px;
}

/* Slider track - Firefox */
input[type="range"]#textMaxWidth::-moz-range-track {
  background: linear-gradient(to right, #4a9eff, #338fff);
  height: 8px;
  border-radius: 4px;
  border: none;
}

/* Slider thumb - webkit */
input[type="range"]#textMaxWidth::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #338fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Slider thumb - Firefox */
input[type="range"]#textMaxWidth::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #338fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Slider thumb hover - webkit */
input[type="range"]#textMaxWidth::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(51, 143, 255, 0.5);
}

/* Slider thumb hover - Firefox */
input[type="range"]#textMaxWidth::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(51, 143, 255, 0.5);
}

/* Slider thumb active - webkit */
input[type="range"]#textMaxWidth::-webkit-slider-thumb:active {
  transform: scale(1.05);
  background: #4a9eff;
}

/* Slider thumb active - Firefox */
input[type="range"]#textMaxWidth::-moz-range-thumb:active {
  transform: scale(1.05);
  background: #4a9eff;
}

/* ========== IMAGE LOADING STATES ========== */
/* Shimmer effect removed per user preference - images load with simple fade-in */

/* ========== BONUS MULTIPLIER INDICATOR ========== */
@keyframes bonusPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.7), 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

@keyframes flashOnce {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}