:root {
--bg-color: #0f0c29;
--bg-gradient: radial-gradient(circle at 20% 30%, #24243e 0%, #0f0c29 50%, #000000 100%);
--panel-bg: rgba(255, 255, 255, 0.05);
    --text-main: #ffffff;
    --accent-p1: #00e5ff; 
    --accent-p2: #ff4081;
    --accent-p3: #ffab00; 
    --accent-p4: #d946ef;
    --token-gold: #ffd700;
    --success: #00c853;
    --error: #d50000;
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

html.beatline-noscroll,
body.beatline-noscroll {
    overflow: hidden;
    overscroll-behavior: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

button:focus, 
.play-btn:focus,
.btn:focus {
    outline: none;
}


#beatline-app {
    background: var(--bg-gradient);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; 
    /* Fullscreen button metrics (used to offset active-first header) */
    --fs-left: 10px;
    --fs-size: clamp(28px, 7vw, 32px);
    --fs-gap: 10px;
}

#beatline-app.fullscreen-active {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 999999;

    /* iPhone notch / safe-area (top wordt op de header toegepast, zodat er geen "dubbele header" ontstaat) */
    padding-top: 0;
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    box-sizing: border-box;
}

#btn-fullscreen {
    position: relative;
    top: auto;
    left: auto;
    z-index: 201; 
    background: #ffffff;
    border: none;
    color: #000000;
    width: var(--fs-size);
    height: var(--fs-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin-right: 2%;
}

#btn-fullscreen svg {
width: clamp(16px, 4vw, 20px);
height: clamp(16px, 4vw, 20px);
}

#btn-fullscreen:hover { transform: scale(1.1); }

.version-tag {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 0.8rem;
    color: #666;
    opacity: 0.7;
}

.game-header {
    position: relative;
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    padding: 10px 10px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    height: 85px;
    padding-left: 10px;
}

/* Fullscreen: laat de header doorlopen in de safe-area (notch) */
#beatline-app.fullscreen-active .game-header {
    padding-top: calc(5px + env(safe-area-inset-top));
    height: calc(85px + env(safe-area-inset-top));
    box-sizing: border-box;
}

.player-stats {
    display: none;
    padding: 12px 20px;
    color: white;
    min-width: 130px;
    border: none !important;
    transition: all 0.3s ease;
    border-radius: 0;
    margin: 0;
}

#stats-p1.visible,
#stats-p2.visible,
#stats-p3.visible,
#stats-p4.visible{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#stats-p1.visible + #stats-p2.visible,
#stats-p2.visible + #stats-p3.visible,
#stats-p3.visible + #stats-p4.visible{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#stats-p1.visible:has(+ #stats-p2.visible),
#stats-p2.visible:has(+ #stats-p3.visible),
#stats-p3.visible:has(+ #stats-p4.visible){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


.player-stats.visible { display: flex; }

/* =============================
   Mobile header: Active-first + chips (3/4 spelers)
   ============================= */
.game-header.header-activefirst{
  padding-left: 10px;
  justify-content: flex-start;
  gap: 10px;
}

.game-header.header-activefirst .player-stats.header-main{
  min-width: clamp(96px, 26vw, 112px);
  padding: clamp(8px, 1.6vw, 10px) clamp(10px, 2vw, 14px);
}

.game-header.header-activefirst #beatline-header-chips.header-chips{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 1.2vw, 8px);
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.game-header.header-activefirst #beatline-header-chips .player-chip{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: clamp(6px, 1.4vw, 8px) clamp(6px, 1.6vw, 10px);
  min-width: 0;
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  max-width: 100%;
}

.game-header.header-activefirst #beatline-header-chips .player-chip .chip-label{
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: clamp(0.70rem, 1.8vw, 0.78rem);
}

.game-header.header-activefirst #beatline-header-chips .player-chip .chip-meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.66rem, 1.7vw, 0.78rem);
  font-weight: 800;
  opacity: 0.95;
  white-space: nowrap;

}

.game-header.header-activefirst #beatline-header-chips .player-chip .chip-sep{
  opacity: 0.5;
}


.player-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.player-name {
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.2;
}

.player-data {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 2px;
}

.p1-stats {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
}

.p2-stats {
    background: linear-gradient(135deg, #f953c6 0%, #b91d73 100%);
    box-shadow: 0 4px 15px rgba(249, 83, 198, 0.4);
}

.p3-stats {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    box-shadow: 0 4px 15px rgba(247, 151, 30, 0.4);
}

.p4-stats {
    background: linear-gradient(135deg, #d946ef 0%, #7c3aed 100%);
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
}

.player-stats.active-turn {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    outline: 2px solid rgba(255, 255, 255, 0.5);
}

.score-val { font-weight: bold; font-size: 1.1rem; margin-left: 2px; }

/* CONTROLS */
.center-panel {
    position: relative;
    background: var(--panel-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    flex-shrink: 0;
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-around;
    gap: 15px; 
    z-index: 10;
}

.ctrl-section-info { 
  flex: 1; 
  min-width: 120px; 
  text-align: center; 
  position: relative;
}

.ctrl-section-deck { flex: 0 0 auto; display: flex; justify-content: center; }

.ctrl-section-btns { 
    flex: 1; min-width: 160px; 
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 100px;
max-width 100% !important;
}
.btn-large-action { grid-column: 1 / 2; grid-row: 1 / 3; width: 100%; height: 100%; font-size: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; margin: 0; }
.btn-small-token { width: 100%; height: 100%; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; margin: 0; }

#turn-display { font-weight: bold; font-size: 1rem; margin-bottom: 5px; display: block;}
#media-area { min-height: 60px; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; }
#deck-zone { width: 120px; height: 160px; border: 2px dashed #444; border-radius: 8px; display: flex; justify-content: center; align-items: center;
  position: relative;
}

.btn { 
    border: none; 
    border-radius: 8px;
    font-weight: 700; 
    cursor: pointer; 
    text-transform: uppercase; 
    color: #fff; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    padding: 15px !important;
    background: dodgerblue;
}

.btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-check { 
    background: linear-gradient(135deg, var(--success), #008f3a);
    box-shadow: 0 0 15px rgba(0, 200, 83, 0.4);
}

.btn-check:hover {
    box-shadow: 0 0 25px rgba(0, 200, 83, 0.6);
}

.btn-large-action {
    font-size: 0.9rem;
    padding: 0 20px;
}

/* BATTLEFIELD */
.battlefield { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.player-zone { 
    flex: 0.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    display: none; 
    flex-direction: column; 
    justify-content: center;
    overflow: hidden; 
    position: relative; 
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.5s ease;
    opacity: 0.6;
    filter: grayscale(20%);
}

.player-zone.zone-active { 
    flex: 1;
    opacity: 1;
    filter: grayscale(0%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.player-zone:not(.zone-active) .card {
    transform: scale(0.7); /* Kaarten zijn 30% kleiner */
    opacity: 0.5;
    pointer-events: none; /* Voorkomt per ongeluk slepen in de verkeerde zone */
    margin: -15px; /* Compenseert de witruimte door het schalen */
}

.player-zone.zone-active .card {
    transform: scale(1);
    opacity: 1;
}


.player-zone.p1 { background: rgba(0, 210, 255, 0.05) !important; }
.player-zone.p2 { background: rgba(249, 83, 198, 0.05) !important; }
.player-zone.p3 { background: rgba(247, 151, 30, 0.05) !important; }

.player-zone.p1.zone-active { background: rgba(0, 210, 255, 0.15) !important; }
.player-zone.p2.zone-active { background: rgba(249, 83, 198, 0.15) !important; }
.player-zone.p3.zone-active { background: rgba(247, 151, 30, 0.15) !important; }

.player-zone.p1 { border-left: 4px solid #00d2ff; }
.player-zone.p2 { border-left: 4px solid #f953c6; }
.player-zone.p3 { border-left: 4px solid #f7971e; }


.player-label {
    font-size: 0.75rem; 
    font-weight: 800; 
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px; 
    background: rgba(15, 12, 41, 0.8);
    position: absolute; 
    top: 10px; 
    left: 10px; 
    z-index: 5; 
    border-radius: 8px;
    border: 1px solid currentColor;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.player-zone.p4 { 
    background: rgba(217, 70, 239, 0.05) !important; 
    border-left: 4px solid var(--accent-p4);
}

.player-zone.p4.zone-active { 
    background: rgba(217, 70, 239, 0.15) !important;
}

.timeline-scroll {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 20px;
  gap: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.timeline-scroll::-webkit-scrollbar {
    height: 6px;
}
.timeline-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}
.timeline-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.timeline-scroll .card, 
.timeline-scroll .place-btn {
    flex-shrink: 0 !important; 
}


.card { 
    width: 120px; height: 160px; 
    background: #fff; color: #222; border-radius: 8px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; 
    padding: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.4); 
    cursor: grab; position: relative; flex-shrink: 0;
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.player-zone:not(.zone-active) .card {
    transform: scale(0.85);
    opacity: 0.6;
    filter: grayscale(0.6);
}

.card-year { font-size: 1.8rem; font-weight: 800; display: none; margin: 5px 0; }
.card-meta { font-size: 0.7rem; display: none; line-height: 1.2; }
.card-icon { font-size: 2.5rem; color: #333; }
.card.revealed { background: #eee; cursor: default; border: 3px solid #ccc; }
.card.revealed .card-year, .card.revealed .card-meta { display: block; }
.card.revealed .card-icon { display: none; }
.card.correct { border-color: var(--success); background: #e8f5e9; }
.card.wrong { border-color: var(--error); background: #ffebee; }

@media (max-width: 600px) {
    .center-panel { justify-content: center; }
    .ctrl-section-info { width: 100%; order: 1; margin-bottom: 5px;}
    .ctrl-section-deck { order: 2; margin-right: 15px; }
    .ctrl-section-btns { order: 3; flex: 1; }
    #media-area { height: auto; margin-bottom: 5px; }
    .card { width: 100px; height: 140px; }
}

/* OVERLAYS */
.overlay-base { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 202; flex-direction: column; justify-content: center; align-items: center; }
#start-overlay { display: flex; }
.modal { display: none; }
.btn-mode { padding: 15px 40px; margin: 10px; font-size: 1.2rem; border-radius: 8px; border: none; cursor: pointer; color: #fff; display:none; }
.modal-card-view {
    margin: 40px 0 !important;
    transform: scale(1.3) !important;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.modal-card-view .card {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important; /* Extra diepe schaduw voor de focus */
}

#yt-hidden { position: absolute; left: -9999px; }
.loading-spinner { border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid #fff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.playlist-selector { 
    width: 80%; max-width: 300px; padding: 12px; font-size: 16px; margin-bottom: 20px; border-radius: 8px; border: none; 
    background: #222 !important; color: var(--accent-p1); border: 1px solid #444; 
}

.player-selector { display:flex; gap:15px; margin-bottom: 20px; justify-content: center; }
.player-radio { display:none; }
.player-radio + label { 
    padding: 10px 20px; background: #333; border: 2px solid #555; border-radius: 8px; cursor: pointer; color:#aaa; font-weight:bold;
}
.player-radio:checked + label { border-color: var(--accent-p1); color: #fff; background: rgba(0,229,255,0.1); }

.place-btn {
    background: rgba(255,255,255,0.1);
    border: 2px dashed #fff;
    color: #fff;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    min-width: 80px;
    transition: all 0.2s;
}
.place-btn:hover { background: var(--token-gold); color: #000; border-color: var(--token-gold); transform: scale(1.1); }
.place-btn.challenging { border-color: var(--token-gold); animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }

.steal-icon {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0);
    font-size: 8rem; 
    z-index: 999999; 
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.5));
}
.steal-active { 
    transform: translate(-50%, -50%) scale(1); 
}

.music-visualizer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
    margin-top: 10px;
}

.bar {
    width: 4px;
    height: 10px;
    background: var(--accent-p1);
    border-radius: 2px;
    animation: equalize 1s infinite ease-in-out;
}

.bar:nth-child(2) { animation-delay: 0.2s; background: var(--accent-p2); }
.bar:nth-child(3) { animation-delay: 0.4s; background: var(--token-gold); }
.bar:nth-child(4) { animation-delay: 0.1s; background: var(--accent-p1); }
.bar:nth-child(5) { animation-delay: 0.3s; background: var(--accent-p2); }

@keyframes equalize {
    0%, 100% { height: 5px; opacity: 0.3; }
    50% { height: 25px; opacity: 1; }
}

.center-panel #vis-anim{
  opacity: 0.65;
}

.center-panel #vis-anim .bar{
  transform-origin: bottom center;
  animation-play-state: paused;
}
#beatline-app.is-playing .center-panel #vis-anim .bar{
  animation-play-state: running;
}

.music-notes{
  position: fixed;
  inset: 0;                 
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;       
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 501;
}

#beatline-app.is-playing .music-notes{
  opacity: 0.75;
}

.music-notes .note{
  position: absolute;
  bottom: -14px;          
  left: var(--x, 50%);
  font-size: var(--size, 18px);
  line-height: 1;
  opacity: 0;
  animation: beatline-note-float var(--dur, 2.6s) infinite ease-in-out;
  animation-delay: var(--del, 0s);
  transform: translateX(0) scale(0.95);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.45));
}

.music-notes .n1{ left: 10%; animation-delay: 0s;   color: var(--accent-p1); }
.music-notes .n2{ left: 35%; animation-delay: .35s; color: var(--accent-p2); }
.music-notes .n3{ left: 60%; animation-delay: .15s; color: var(--token-gold); }
.music-notes .n4{ left: 82%; animation-delay: .55s; color: var(--accent-p4); }

@keyframes beatline-note-float{
  0%   { bottom: -14px; opacity: 0; transform: translateX(0) scale(0.95); }
  12%  { opacity: 0.95; }
  85%  { opacity: 0.95; }
  100% { bottom: 110%; opacity: 0; transform: translateX(var(--drift, 0px)) scale(1.15); }
}

.music-notes .note:nth-child(1)  { --x: 8%;  --del: 0s;   --dur: 2.8s; --size: 18px; --drift: -10px; color: var(--accent-p1); }
.music-notes .note:nth-child(2)  { --x: 18%; --del: .6s;  --dur: 3.1s; --size: 20px; --drift:  12px; color: var(--accent-p2); }
.music-notes .note:nth-child(3)  { --x: 28%; --del: .2s;  --dur: 2.6s; --size: 17px; --drift:  -6px; color: var(--token-gold); }
.music-notes .note:nth-child(4)  { --x: 40%; --del: .9s;  --dur: 3.3s; --size: 21px; --drift:  10px; color: var(--accent-p4); }
.music-notes .note:nth-child(5)  { --x: 52%; --del: .3s;  --dur: 2.9s; --size: 18px; --drift:  -8px; color: var(--accent-p1); }
.music-notes .note:nth-child(6)  { --x: 62%; --del: 1.1s; --dur: 3.4s; --size: 22px; --drift:  14px; color: var(--accent-p2); }
.music-notes .note:nth-child(7)  { --x: 72%; --del: .4s;  --dur: 2.7s; --size: 18px; --drift:  -12px;color: var(--token-gold); }
.music-notes .note:nth-child(8)  { --x: 82%; --del: .8s;  --dur: 3.2s; --size: 20px; --drift:   8px; color: var(--accent-p4); }
.music-notes .note:nth-child(9)  { --x: 92%; --del: .1s;  --dur: 2.6s; --size: 17px; --drift:  -10px;color: var(--accent-p1); }
.music-notes .note:nth-child(10) { --x: 34%; --del: 1.4s; --dur: 3.5s; --size: 21px; --drift:   6px; color: var(--accent-p2); }

.card {
    background: linear-gradient(145deg, #1e1e1e, #141414) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    animation: cardAppear 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    z-index: 10;
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.card-icon { 
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 3rem !important;
    transition: all 0.3s ease;
}

.card.revealed .card-year {
    background: linear-gradient(135deg, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2rem !important;
    margin: 5px 0 !important;
    line-height: 1.2;         
    display: inline-block;   
    padding-bottom: 2px;    
}

.card-meta {
    color: #b3b3b3 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card.correct {
    background: #1e1e1e !important;
    border: 2px solid var(--success) !important;
    box-shadow: 0 0 15px rgba(0, 200, 83, 0.3) !important;
}

.card.wrong {
    background: #1e1e1e !important;
    border: 2px solid var(--error) !important;
    box-shadow: 0 0 15px rgba(213, 0, 0, 0.3) !important;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-check {
    background: linear-gradient(-45deg, #00c853, #1de9b6, #00c853, #64ffda) !important;
    background-size: 300% 300% !important;
    animation: shimmer 4s infinite linear !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.4) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    letter-spacing: 2px;
    transition: transform 0.2s ease !important;
    font-size: 1.1rem !important;
}

.btn-check:hover {
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(0, 200, 83, 0.6) !important;
}

/* --- MODERNE TOKEN KNOPPEN (WISSEL/GRATIS) --- */
.btn-token {
    background: rgba(255, 215, 0, 0.05) !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: var(--token-gold) !important;
    backdrop-filter: blur(5px);
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.btn-token:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: var(--token-gold) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-2px);
}

/* Extra touch voor de tekens in de knoppen */
.btn-token::before {
    margin-right: 5px;
}

/* Animatie voor het verschijnen van popups */
@keyframes popupIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.glass-card-large {
    background: #222;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #555;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: popupIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}


/* Specifieke achtergronden voor status */
.modal-correct {
    background: linear-gradient(135deg, #064e3b 0%, rgb(6 78 59 / 0.95) 100%) !important;
}

.modal-wrong {
    background: linear-gradient(135deg, #881337 0%, rgb(136 19 55 / 0.95) 100%) !important;
}

.modal-stolen {
    background: linear-gradient(135deg, #78350f 0%, rgb(120 53 15 / 0.95) 100%) !important;
}

/* Status Icon Styling */
.status-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin-bottom: 20px;
    border: 5px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.bg-check { background-color: #10b981; color: white; }
.bg-cross { background-color: #ef4444; color: white; }
.bg-steal { background-color: #f59e0b; color: white; }

.glass-card-large h1, .glass-card-large h2 { 
    color: white !important; 
    margin: 10px 0; 
}

#bonus-header {
    font-size: 1.3rem !important;
    letter-spacing: 1px;
    margin-bottom: 5px !important;
    text-transform: uppercase;
    font-weight: 800;
}

/* Container om knoppen horizontaal te centreren */
.modal-btns { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    flex-wrap: wrap; 
    width: 100%; 
    margin-top: 20px; 
}

@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    25% { transform: translateX(-10px); } 
    75% { transform: translateX(10px); } 
}
.shake-anim { animation: shake 0.7s ease-in-out; }

/* Status iconen bovenaan de modal */
.status-circle {
    width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; font-size: 40px; margin: 0 auto 15px; border: 4px solid white;
}
.bg-check { background: #10b981; }
.bg-cross { background: #ef4444; }
.bg-stolen { background: #f59e0b; }

.card {
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    padding: 8px 8px; box-sizing: border-box;
}
.card-artist { font-size: 0.65rem; font-weight: 800; color: #666; text-transform: uppercase; line-height:1.3; }
.card-year { font-size: 1.8rem; font-weight: 800; color: #00e5ff; }
.card-title { font-size: 0.75rem; font-weight: 600; line-height: 1.1; overflow: hidden; height: 2.2em; }

/* De container van de modal (glass-card-large) */
.modal-content {
    background: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 8px !important; /* Consistentie met 8px ronding */
    padding: 30px !important; /* Iets meer padding voor ademruimte */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.sortable-fallback {
    z-index: 999999 !important;
    opacity: 0.9 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* Target de kaart in het deck EN de onthulde kaart in de tijdlijn */
#beatline-app:not(.perfect-order) #deck-zone .card,
#beatline-app:not(.perfect-order) .timeline-scroll .card:not(.revealed) {
    border: 2px solid var(--token-gold) !important; /* Gouden rand */
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important; /* Gouden gloed */
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important; /* Iets lichtere tint dan rustende kaarten */
    z-index: 100; /* Zorg dat hij altijd bovenop ligt */
    animation: activeCardPulse 2s infinite ease-in-out; /* Maakt de kaart 'levendig' */
}

/* De icoonkleur van de actieve kaart iets feller maken */
#deck-zone .card .card-icon,
.timeline-scroll .card:not(.revealed) .card-icon {
    color: var(--token-gold) !important;
    opacity: 1 !important;
}

/* Animatie die de kaart heel zachtjes laat 'ademen' */
@keyframes activeCardPulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); 
    }
    50% { 
        transform: scale(1.05); /* Wordt iets groter */
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.7); /* Gloed wordt sterker */
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); 
    }
}

body.beatline-dragging .center-panel,
body.beatline-dragging .center-panel * {
  pointer-events: none !important;
}

/* Laat swipe/scroll toe op de kaarten */
.timeline-scroll,
.timeline-scroll .card {
  touch-action: pan-x;
}

/* voorkomt tekstselectie/rare highlight tijdens swipe */
.timeline-scroll .card {
  -webkit-user-select: none;
  user-select: none;
}

/* =============================
   TIME-ATTACK (solo)
   ============================= */

.time-attack-timer {
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-top: 6px;
    opacity: 0.95;
}

/* Tokens bestaan niet in time-attack */
#beatline-app.time-attack .token-wrap {
    display: none !important;
}

#beatline-app.time-attack #btn-token-swap,
#beatline-app.time-attack #btn-token-free {
    display: none !important;
}

/* Bonus modal: verberg token-vraag/knoppen, toon "VOLGENDE" */
#beatline-app.time-attack #bonus-token-question,
#beatline-app.time-attack #bonus-token-btns {
    display: none !important;
}

#beatline-app.time-attack #bonus-timeattack-btns {
    display: flex !important;
}

/* =============================
   SPEEDRUN (solo stopwatch)
   ============================= */

/* Tokens bestaan niet in speedrun */
#beatline-app.speedrun .token-wrap {
    display: none !important;
}

#beatline-app.speedrun #btn-token-swap,
#beatline-app.speedrun #btn-token-free {
    display: none !important;
}

/* Bonus modal: verberg token-vraag/knoppen, toon "VOLGENDE" */
#beatline-app.speedrun #bonus-token-question,
#beatline-app.speedrun #bonus-token-btns {
    display: none !important;
}

#beatline-app.speedrun #bonus-timeattack-btns {
    display: flex !important;
}

/* =============================
   SURVIVAL (solo sudden death)
   ============================= */

.survival-lives {
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-top: 6px;
    opacity: 0.95;
}

/* Tokens bestaan niet in survival */
#beatline-app.survival .token-wrap {
    display: none !important;
}

#beatline-app.survival #btn-token-swap,
#beatline-app.survival #btn-token-free {
    display: none !important;
}

/* Verberg timer in survival, toon hartjes */
#beatline-app.survival #timeattack-timer {
    display: none !important;
}

/* Bonus modal: verberg token-vraag/knoppen, toon "VOLGENDE" */
#beatline-app.survival #bonus-token-question,
#beatline-app.survival #bonus-token-btns {
    display: none !important;
}

#beatline-app.survival #bonus-timeattack-btns {
    display: flex !important;
}

/* =============================
   PERFECT ORDER (solo level-based)
   ============================= */

/* Geen tokens in deze modus */
#beatline-app.perfect-order .token-wrap {
    display: none !important;
}

#beatline-app.perfect-order #btn-token-swap,
#beatline-app.perfect-order #btn-token-free {
    display: none !important;
}

/* Bonus modal: alleen "VOLGENDE" */
#beatline-app.perfect-order #bonus-token-question,
#beatline-app.perfect-order #bonus-token-btns {
    display: none !important;
}

#beatline-app.perfect-order #bonus-timeattack-btns {
    display: flex !important;
}

/* In Perfect Order tonen we geen losse kaart in de bonus modal */
#beatline-app.perfect-order #bonus-modal .modal-card-view {
    display: none !important;
}

/* Layout: hand (deck-zone) wordt een rij kaarten */
#beatline-app.perfect-order .ctrl-section-deck {
    flex: 1 1 100%;
    order: 2;
}

#beatline-app.perfect-order .ctrl-section-btns {
    flex: 1 1 100%;
    order: 3;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: auto;
}

#beatline-app.perfect-order #btn-check {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 54px;
}

#beatline-app.perfect-order #deck-zone {
    width: 100%;
    height: auto;
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

/* Visuele feedback bij luisteren */
.card.listening {
    outline: 3px solid rgba(255, 215, 0, 0.85);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
}

/* =============================
   PERFECT ORDER - COSMETIC ONLY
   (kleur-onderscheid + "speelt nu" icoon)
   ============================= */

/* In Perfect Order staat er vaak méér dan 1 kaart in #deck-zone.
   Override daarom de "actieve kaart" gouden glow zodat kleuren per kaart zichtbaar blijven. */
#beatline-app.perfect-order #deck-zone .card:not([class*="po-c"]),
#beatline-app.perfect-order .timeline-scroll .card:not(.revealed):not([class*="po-c"]) {
    border: 2px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    background: linear-gradient(145deg, #1e1e1e, #141414) !important;
    animation: none !important;
}

#beatline-app.perfect-order #deck-zone .card .card-icon,
#beatline-app.perfect-order .timeline-scroll .card:not(.revealed) .card-icon {
    color: rgba(255,255,255,0.25) !important;
}

/* Kleuren per kaart (herhalen om de 6) */
#beatline-app.perfect-order .card.po-c1 { 
    --po-accent: rgba(0, 210, 255, 0.75) !important;
    border-color: rgba(0, 210, 255, 0.75) !important;
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.22), #141414) !important;
}
#beatline-app.perfect-order .card.po-c2 { 
    --po-accent: rgba(249, 83, 198, 0.75) !important;
    border-color: rgba(249, 83, 198, 0.75) !important;
    background: linear-gradient(145deg, rgba(249, 83, 198, 0.22), #141414) !important;
}
#beatline-app.perfect-order .card.po-c3 { 
    --po-accent: rgba(247, 151, 30, 0.75) !important;
    border-color: rgba(247, 151, 30, 0.75) !important;
    background: linear-gradient(145deg, rgba(247, 151, 30, 0.22), #141414) !important;
}
#beatline-app.perfect-order .card.po-c4 { 
    --po-accent: rgba(0, 200, 83, 0.75) !important;
    border-color: rgba(0, 200, 83, 0.75) !important;
    background: linear-gradient(145deg, rgba(0, 200, 83, 0.20), #141414) !important;
}
#beatline-app.perfect-order .card.po-c5 { 
    --po-accent: rgba(124, 58, 237, 0.78) !important;
    border-color: rgba(124, 58, 237, 0.78) !important;
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.22), #141414) !important;
}
#beatline-app.perfect-order .card.po-c6 { 
    --po-accent: rgba(255, 23, 68, 0.75) !important;
    border-color: rgba(255, 23, 68, 0.75) !important;
    background: linear-gradient(145deg, rgba(255, 23, 68, 0.20), #141414) !important;
}



/* Extra zichtbaarheid: kleurstrip bovenaan elke Perfect Order kaart */
#beatline-app.perfect-order #deck-zone .card[class*="po-c"]::before,
#beatline-app.perfect-order #battlefield .card[class*="po-c"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 10px;
    background: var(--po-accent);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    opacity: 0.95;
    pointer-events: none;
}

/* Kaart die "nu afspeelt" (clicked/listening) krijgt een badge-icoontje */
#beatline-app.perfect-order .card.listening {
    outline: 3px solid rgba(255, 215, 0, 0.9) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.35), 0 12px 24px rgba(0,0,0,0.35) !important;
}

#beatline-app.perfect-order .card.listening::after {
    content: "â–¶";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 215, 0, 0.95);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* --- START SCREEN VISUALIZER --- */

#start-overlay {
    background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #000000 100%);
    overflow: hidden;
}

#start-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    pointer-events: none; /* Kliks gaan er dwars doorheen */
}

#start-content, 
#start-loading, 
#start-overlay h1 {
    position: relative;
    z-index: 10;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

/* --- START SCREEN (modern layout) --- */

#start-overlay {
    padding: clamp(18px, 4vw, 38px);
    box-sizing: border-box;
}

.start-shell {
    position: relative;
    z-index: 10;
    width: min(740px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    animation: startFadeUp 520ms ease both;
}

.start-brand {
    text-align: center;
    user-select: none;
}

.start-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: 6px;
    font-size: clamp(2.2rem, 6vw, 3.1rem);
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(0,229,255,1) 0%, rgba(255,64,129,1) 45%, rgba(217,70,239,1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.65));
}

.start-card {
    width: 100%;
    border-radius: 24px;
    padding: clamp(16px, 2.8vw, 26px);
    background: rgba(16, 16, 20, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 70px rgba(0,0,0,0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.start-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(80% 60% at 15% 20%, rgba(0,229,255,0.22), transparent 60%),
                radial-gradient(80% 60% at 85% 10%, rgba(255,64,129,0.16), transparent 55%),
                radial-gradient(90% 70% at 50% 120%, rgba(217,70,239,0.14), transparent 55%);
    pointer-events: none;
    opacity: 0.9;
}


#start-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

#start-content {
    transition: opacity 420ms ease, transform 420ms ease;
    opacity: 0;
    transform: translateY(10px);
}

#start-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}


#start-content-online {
    transition: opacity 420ms ease, transform 420ms ease;
    opacity: 0;
    transform: translateY(10px);
}

#start-content-online.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#start-overlay .btn-mode.btn-online-back{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
}

#start-overlay .btn-mode.btn-online-back:hover{
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}
/* Start screen form controls */
#start-overlay .playlist-selector {
    width: 100%;
    max-width: 480px;
    margin: 8px 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

#start-overlay .player-selector {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

/* Win target slider */
.win-slider-wrap{
    width: 100%;
    max-width: 480px;
    margin: 0 auto 6px;
}
.win-slider{
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    outline: none;
    border: 1px solid rgba(255,255,255,0.16);
}
.win-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0,229,255,0.95);
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    cursor: pointer;
}
.win-slider::-moz-range-thumb{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0,229,255,0.95);
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    cursor: pointer;
}
.win-slider-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    color: rgba(255,255,255,0.82);
    font-size: 0.9rem;
}
.win-slider-hint{
    opacity: 0.7;
    font-size: 0.85rem;
}

/* Solo mode: maak er een nette grid van zodat het nooit "rommelig" breekt */
#solo-settings > .player-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 12px !important;
}

#start-overlay .player-radio + label {
    border-radius: 999px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.72);
    font-weight: 800;
    letter-spacing: 0.2px;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
    text-align: center;
    line-height: 1.05;
}

#start-overlay .player-radio + label:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.24);
    color: rgba(255,255,255,0.9);
}

#start-overlay .player-radio:checked + label {
    border-color: rgba(0,229,255,0.7);
    background: rgba(0,229,255,0.10);
    color: rgba(255,255,255,0.96);
    box-shadow: 0 10px 30px rgba(0,229,255,0.12);
}

.start-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

.start-actions .btn-mode {
    margin: 0;
    border-radius: 16px;
    padding: 14px 18px;
    min-width: 170px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
    transition: transform 160ms ease, filter 160ms ease;
}

.start-actions .btn-mode:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.start-actions .btn-mode:active {
    transform: translateY(0) scale(0.99);
}

@keyframes startFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Info modal styling */
.info-card {
    width: min(620px, 92vw);
    max-height: min(74vh, 720px);
    overflow: auto;
}

.info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.info-header h2 {
    margin: 0;
}

.info-body {
    text-align: left;
    color: rgba(255,255,255,0.9);
}

.info-body h3 {
    margin: 18px 0 8px;
}

.info-body p,
.info-body li {
    color: rgba(255,255,255,0.86);
}

.glass-card-large.info-card{
  justify-content: flex-start;
  align-items: stretch;
  max-width: min(620px, 92vw);
}

.info-body p:first-child{
  margin-top: 0;
}

/* Info modal tabs */
.info-tabs{
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.info-tab{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.info-tab.active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}

.info-panel{ display: none; }
.info-panel.active{ display: block; }

.info-body a{
  color: rgba(255,255,255,0.90);
  text-decoration: underline;
}

.start-info-btn{
  position: absolute;
  top: 15px;
  right: 15px;
  background: #ffffff;
  border: none;
  color: #000000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  padding: 0;
  z-index:9999;
}

.start-info-btn:hover{ transform: scale(1.1); }
.start-info-btn:active{ transform: scale(0.98); }


.start-info-btn .info-letter{
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* =============================
   Startscreen language switch (NL/EN)
   - Same size as start-info-btn
   - Click opens a small menu (dropdown)
   ============================= */
.start-top-btns{
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

/* When inside the wrapper, don't use absolute positioning */
.start-top-btns .start-info-btn{
  position: static;
  top: auto;
  right: auto;
}

.start-lang-wrap{
  position: relative;
}

.start-lang-btn{
  background: #ffffff;
  border: none;
  color: #000000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  padding: 0;
}

.start-lang-btn:hover{ transform: scale(1.1); }
.start-lang-btn:active{ transform: scale(0.98); }

.start-lang-btn .lang-flag{
  font-size: 16px;
  line-height: 1;
  margin-left: 3px !important;
}

.start-lang-btn .lang-caret{
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #000000;
  transform: translateY(2px);
}

.start-lang-menu{
  position: absolute;
  top: 42px;
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  padding: 6px;
  min-width: 190px;
  display: none;
  z-index: 10000;
}

.start-lang-wrap.open .start-lang-menu{
  display: block;
}

.lang-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  color: #111111;
}

.lang-item:hover{
  background: rgba(0,0,0,0.06);
}

.lang-item-flag{
  font-size: 18px;
  line-height: 1;
}

.lang-item-label{
  font-size: 14px;
  letter-spacing: 0.6px;

}

.lang-item-check{
  margin-left: auto;
  font-size: 16px;
  opacity: 0;
}

.lang-item.is-active .lang-item-check{
  opacity: 1;
}

#start-overlay .btn-mode{
  background: var(--accent-p1);
  color: #001014;                
  box-shadow: 0 10px 25px rgba(0, 229, 255, 0.25);
}

#start-overlay .btn-mode:hover{
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* =============================
   BONUS REVEAL SUSPENSE (multiplayer - cosmetic only)
   ============================= */
.modal-suspense {
    background: linear-gradient(135deg, #0b1220 0%, rgba(11, 18, 32, 0.95) 100%) !important;
}

.bg-suspense {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* Pulserend "momentje..." gevoel */
#bonus-header.reveal-pulse {
    animation: suspensePulse 0.85s ease-in-out infinite;
}

@keyframes suspensePulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.04); opacity: 1; }
}

/* Geanimeerde puntjes na de tekst */
#bonus-msg.reveal-dots::after {
    content: '...';
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    animation: suspenseDots 1.1s steps(4, end) infinite;
}

@keyframes suspenseDots {
    to { width: 1.3em; }
}

/* Tijdens suspense: kaart iets geheimzinniger + knoppen tijdelijk uit */
#bonus-modal.reveal-suspense .modal-card-view {
    filter: blur(10px) brightness(0.85);
}

#bonus-modal.reveal-suspense #bonus-token-question,
#bonus-modal.reveal-suspense #bonus-token-btns,
#bonus-modal.reveal-suspense #bonus-timeattack-btns {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* "Hartslag" op het vraagteken */
#bonus-modal.reveal-suspense #bonus-status-icon .status-circle {
    animation: suspenseBeat 0.9s ease-in-out infinite;
}

@keyframes suspenseBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.09); }
}

#beatline-app, 
#beatline-app * {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ========================================================
   iTunes attrib (badge) — in deck-zone (top right)
   (Only appears when #itunes-attrib is injected during iTunes playback)
   ======================================================== */

#itunes-attrib,
.itunes-attrib {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0;
  line-height: 0;
 
}

#itunes-attrib::before,
.itunes-attrib::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='%23fff' d='M41 12c-3 2-5 5-5 9 4 .2 7-2 9-4 2-2 3-5 3-8-3 .1-5 1.4-7 3z'/><path fill='%23fff' d='M32 22c6-4 14-2 18 4 5 8 1 22-6 29-3 3-6 5-10 5-3 0-5-1-8-1s-5 1-8 1c-4 0-7-2-10-5C1 48-3 34 2 26c4-6 12-8 18-4 2 1 4 1 6 0z'/></svg>") center / contain no-repeat;
}

#itunes-attrib:hover,
.itunes-attrib:hover {
  background: rgba(0, 0, 0, 0.68);
  border-color: rgba(255, 255, 255, 0.28);
}


/* =============================
   ONLINE 1v1 (Firebase) - Lobby UI
   ============================= */
#start-overlay .btn-mode.btn-online{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,64,129,0.95) 0%, rgba(217,70,239,0.95) 100%);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(255, 64, 129, 0.22);
}

#start-overlay .btn-mode.btn-online:hover{
    transform: scale(1.04);
    filter: brightness(1.05);
}

#start-overlay .btn-mode.btn-online-action{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.95);
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

#start-overlay .btn-mode.btn-online-action:hover{
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.online-lobby{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.online-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.online-join-row{
    flex-wrap: nowrap;
}

.online-code-input{
    width: 170px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.25);
    color: #fff;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.online-code-input::placeholder{
    color: rgba(255,255,255,0.45);
    text-transform: none;
    letter-spacing: 0;
}

.online-status{
    font-size: 0.95rem;
    color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 12px;
    border-radius: 14px;
    width: min(420px, 92%);
    text-align: center;
}


.hidden{ display:none !important; }

.online-panel{
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 12px 12px 6px;
    box-sizing: border-box;
}

.online-panel-sub{
    width: 100%;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.online-choice-row .btn-mode{
    min-width: 160px;
}

#start-overlay .btn-mode.btn-online-secondary{
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: none;
}

#start-overlay .btn-mode.btn-online-secondary:hover{
    background: rgba(0,0,0,0.28);
    transform: translateY(-1px);
}

.online-info{
    font-size: 0.9rem;
    color: rgba(255,255,255,0.80);
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 10px 12px;
    border-radius: 14px;
    width: min(420px, 92%);
    text-align: left;
    white-space: pre-line;
}


@media (max-width: 600px){
    /* Op mobiel: room code veld boven Join/Terug (past anders niet horizontaal) */
    .online-join-row{ flex-wrap: wrap; }
    .online-join-row > .online-code-input{ width: 100%; flex: 0 0 100%; order: 1; }
    .online-join-row > button{ flex: 1 1 0; order: 2; }
    /* Terug-knop mag na Join komen */
    #btn-online-back-choice-join{ order: 3; }
}



/* ===== Start tabs (Lokaal / Online) ===== */
.start-tabs{
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.start-tab{
  flex: 1;
  max-width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.start-tab.active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
}

/* ===== Media area layout (prompt + player) ===== */
#media-prompt{ width: 100%; display: flex; justify-content: center; }
#media-player{ width: 100%; display: flex; justify-content: center; }

/* ===== Mobile intervention slot (onder wissel/gratis) ===== */
#intervention-slot{
  display: none;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
@media (max-width: 600px){
  #intervention-slot{ display: flex; }
  #intervention-slot .media-prompt-card{
    width: 100%;
    max-width: 100%;
  }
}

.media-prompt-card{
  width: min(520px, 100%);
  background: red;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.media-prompt-card .prompt-text{
  color:#fff;
  font-weight: 800;
}
.media-prompt-card .prompt-actions{
  display:flex;
  gap: 8px;
}
.media-prompt-card .prompt-actions button{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  font-weight: 800;
}
.media-prompt-card .prompt-actions .btn-no{
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.media-prompt-card .prompt-actions .btn-yes{
  background: var(--token-gold);
  color: #000;
  border-color: rgba(0,0,0,0.2);
}

/* Pending placed card highlight */
.card.pending{
  outline: 2px solid var(--token-gold);
  outline-offset: 2px;
}

.card.locked-card {
    pointer-events: none !important;
    opacity: 0.7;
    filter: grayscale(0.6);
    cursor: default !important;
    border-color: #555 !important;
    box-shadow: none !important;
    animation: none !important;
    gap: 6px;
}

.card.locked-card .card-artist{
    text-align: center;
}

.card.locked-card .card-title {
    font-size: 0.65rem !important;
    color: #ff4081 !important;
    line-height: 1.4;
    height: auto !important;
    overflow: visible !important;
    text-align: center;
}

#btn-next{
  position: relative;
  animation: nextPulse 1.4s ease-in-out infinite !important;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  will-change: transform, box-shadow;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #06b6d4 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem !important;
}

@keyframes nextPulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
  50%  { transform: scale(1.05); box-shadow: 0 0 18px 6px rgba(255,255,255,.18); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
}

@media (prefers-reduced-motion: reduce){
  #btn-next{ animation: none; }
}

#start-overlay .start-actions #btn-sp.btn-online-action:hover{
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
  filter: none; /* overschrijft start-actions filter */
}

#start-overlay .start-actions #btn-sp.btn-online-action:active{
  transform: translateY(0) scale(0.99);
}




/* ===== Playlist picker (i.p.v. dropdown) ===== */
.playlist-chosen{
    width: 100%;
    max-width: 480px;
    margin: 6px auto 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
}

.playlist-chosen-img{
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    display: none;
    flex: 0 0 auto;
}

.playlist-chosen-name{
    color: rgba(255,255,255,0.92);
    font-weight: 800;
    letter-spacing: 0.3px;
}

#start-overlay .playlist-picker-button{
    cursor: pointer;
    text-align: center;
    padding: 12px 14px;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
}

#start-overlay .playlist-picker-button:hover{
    background: rgba(255,255,255,0.07) !important;
    transform: translateY(-1px);
}

.playlist-picker-card{
    width: min(760px, 94vw);
    max-height: min(78vh, 760px);
    overflow: auto;
}

.playlist-picker-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.playlist-tile{
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.playlist-tile:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
}

.playlist-tile.is-active{
    border-color: rgba(0,229,255,0.70);
    background: rgba(0,229,255,0.10);
    box-shadow: 0 10px 30px rgba(0,229,255,0.12);
}

.playlist-tile.is-locked{
    cursor: not-allowed;
}

img.emoji {
filter: none !important;
}

.playlist-tile.is-locked .playlist-tile-lock{
    opacity: 1;
    filter: none;
    color: var(--accent-p3);             
    border-color: rgba(255,171,0,0.65);
    background: rgba(0,0,0,0.65);
    z-index:1;
}
.playlist-tile.is-locked .playlist-tile-imgwrap img {
filter:grayscale(0.85);
}


.playlist-tile.is-locked:hover{
    transform: none;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
}

.playlist-tile-imgwrap{
    position: relative;
}

.playlist-tile-lock{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 16px;
    line-height: 1;
}

.playlist-img-wrap{
  position: relative;
}

.playlist-tile-info:focus{
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

/* Popover voor playlist info */
.playlist-info-pop{
    position: fixed;
    z-index: 9999999;
    max-width: min(320px, 92vw);
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: popupIn 220ms ease-out;
}

.playlist-info-pop .pip-title{
    font-weight: 900;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.95);
}

.playlist-info-pop .pip-text{
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.playlist-tile-imgwrap{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-tile-imgwrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.playlist-tile-placeholder{
    font-size: 34px;
    opacity: 0.75;
}

.playlist-tile-name{
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.1;
    color: rgba(255,255,255,0.92);
    word-break: break-word;
}

@media (max-width: 420px){
    .playlist-picker-grid{ grid-template-columns: repeat(2, 1fr); }
}

.media-prompt-card{
  position: relative;
  z-index: 50;
  background: red !important;               
 border: 2px white;
  border-color: color-mix(in srgb, var(--token-gold) 55%, rgba(255,255,255,0.22));
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 0 2px rgba(0,0,0,0.25),
    0 0 26px rgba(255,200,0,0.22);             
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transform: translateY(-2px);
  animation: mediaPromptPulse 1.6s ease-in-out infinite !important;
}

@keyframes mediaPromptPulse{
  0%,100% { transform: translateY(-2px) scale(1); }
  50%     { transform: translateY(-2px) scale(1.03); }
}

.media-prompt-card .prompt-actions .btn-no {
background: black !important;
}

@media (prefers-reduced-motion: reduce){
  .media-prompt-card{ animation: none; }
}

.media-prompt-card .prompt-actions .btn-yes{
  box-shadow: 0 10px 22px rgba(0,0,0,0.35), 0 0 18px rgba(255,200,0,0.35);
  transform: translateZ(0);
}
.media-prompt-card .prompt-actions .btn-yes:hover{
  transform: scale(1.03);
}

/* ============================================================================
   BeatLine: subtiele netwerk/sync indicator (rechtsboven)
   modes: hidden | sync | stale | reconnect
   ============================================================================ */
#beatline-net-indicator{
    position: fixed;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    z-index: 999999;
    display: none;
    opacity: 0.75;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
#beatline-net-indicator .bni-spinner{
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,.9);
    animation: bni-spin 1s linear infinite;
    display: none;
}
#beatline-net-indicator[data-mode="sync"],
#beatline-net-indicator[data-mode="stale"],
#beatline-net-indicator[data-mode="reconnect"]{
    display: block;
}
#beatline-net-indicator[data-mode="sync"] .bni-spinner,
#beatline-net-indicator[data-mode="stale"] .bni-spinner,
#beatline-net-indicator[data-mode="reconnect"] .bni-spinner{
    display: block;
}
#beatline-net-indicator[data-mode="stale"]{
    animation: bni-pulse 1.2s ease-in-out infinite;
}

@keyframes bni-spin{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}
@keyframes bni-pulse{
    0%{ opacity: 0.45; }
    100%{ opacity: 0.95; }
}


.playlist-tile-info{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.98);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255,255,255,0.45);
  cursor: pointer;
  text-transform: none !important;
  z-index: 10;
}

.playlist-tile-info:hover{
  background: rgba(0,0,0,0.68);
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 0 14px rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.playlist-tile-info:focus-visible{
  outline: 2px solid rgba(255,255,255,0.90);
  outline-offset: 2px;
}

.info-close{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
  font-size: 22px;
  line-height: 1;
  text-transform: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, background 160ms ease;
}

.info-close:hover{
  transform: scale(1.05);
  background: rgba(255,255,255,0.12);
}

/* =============================================================================
   ONLINE 2–4: leave modal + toast
   ========================================================================== */

#beatline-leave-modal .leave-card{
  width: min(520px, 92%);
}

#beatline-leave-modal .leave-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#beatline-leave-modal .leave-title{
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.95);
}

#beatline-leave-modal .leave-body{
  font-size: 0.98rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px 12px;
  border-radius: 14px;
}

#beatline-leave-modal .leave-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

#beatline-leave-modal .leave-actions .btn-mode{
  min-width: 160px;
}

/* buttons zichtbaar + duidelijke styling */
#beatline-leave-modal .btn-online-action{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
}

#beatline-leave-modal .btn-leave-continue{
  background: linear-gradient(135deg, rgba(0,229,255,0.35) 0%, rgba(58,123,213,0.45) 100%);
  border-color: rgba(0,229,255,0.45);
}

#beatline-leave-modal .btn-leave-stop{
  background: linear-gradient(135deg, rgba(255,64,129,0.35) 0%, rgba(185,29,115,0.45) 100%);
  border-color: rgba(255,64,129,0.45);
}

#beatline-leave-modal .btn-online-action:disabled{
  opacity: 0.6;
  cursor: wait;
  transform: none !important;
}

/* kleine toast */
.beatline-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(520px, 92%);
  text-align: center;
}

.beatline-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* =============================================================================
   FIX: Leave modal zichtbaar in fullscreen + knoppen zichtbaar
   - .btn-mode staat globaal op display:none; daarom hier expliciet aanzetten
   - fullscreen fallback (#beatline-app.fullscreen-active) heeft z-index 999999
     dus modal moet hoger om zichtbaar te blijven op Android
   ========================================================================== */
#beatline-leave-modal{
  z-index: 10000000 !important;
}
#beatline-leave-modal .leave-actions .btn-mode{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}



/* =========================================================
   Mobiel UX: header carousel (3/4 spelers) + compacte strips
   ========================================================= */

/* Header carousel (alleen als JS .header-carousel zet) */
.game-header.header-carousel{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding-right: 14px;
}

/* Subtiele swipe-indicator (fade) */
.game-header.header-carousel::after,
.game-header.header-carousel::before{
  content:'';
  position: absolute;
  top: 0;
  width: 26px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.game-header.header-carousel::before{
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.40), rgba(0,0,0,0));
  opacity: 0;
}

.game-header.header-carousel::after{
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.40), rgba(0,0,0,0));
  opacity: 1;
}

/* Alleen tonen als er echt te scrollen valt */
.game-header.header-carousel.can-scroll-left::before{ opacity: 1; }
.game-header.header-carousel:not(.can-scroll-right)::after{ opacity: 0; }

/* In carousel mode: stats-kaarten als ‘cards’ */
.game-header.header-carousel .player-stats{
  display: none; /* blijft via .visible */
  flex: 0 0 auto;
  min-width: 78vw;
  scroll-snap-align: start;
  border-radius: 14px !important;
  margin: 0;
}
.game-header.header-carousel .player-stats.visible{
  display: flex;
}


/* Override de ‘aaneengeschakelde pill’ radius rules in carousel mode */
.game-header.header-carousel #stats-p1.visible,
.game-header.header-carousel #stats-p2.visible,
.game-header.header-carousel #stats-p3.visible,
.game-header.header-carousel #stats-p4.visible{
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}
.game-header.header-carousel #stats-p1.visible + #stats-p2.visible,
.game-header.header-carousel #stats-p2.visible + #stats-p3.visible,
.game-header.header-carousel #stats-p3.visible + #stats-p4.visible{
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}
.game-header.header-carousel #stats-p1.visible:has(+ #stats-p2.visible),
.game-header.header-carousel #stats-p2.visible:has(+ #stats-p3.visible),
.game-header.header-carousel #stats-p3.visible:has(+ #stats-p4.visible){
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* Compact battlefield layout voor 3/4 spelers */
.battlefield.multi-compact .player-zone{
  flex: 0.22;
  opacity: 0.75;
  filter: grayscale(10%);
}

.battlefield.multi-compact .player-zone.zone-focus{
  flex: 1;
  opacity: 1;
  filter: grayscale(0%);
}

.battlefield.multi-compact .player-zone.zone-active{
  /* highlight behouden, maar sizing via zone-focus */
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.28);
}

/* Maak compacte zones klikbaar */
.battlefield.multi-compact .player-zone.zone-compact{
  cursor: pointer;
}

/* In compact mode: geen kaart scaling rules toepassen op full cards (alleen op focus zone tonen we .card) */
.battlefield.multi-compact .player-zone.zone-compact .card{
  display:none !important;
}

/* Timeline strip styling */
.timeline-scroll.timeline-compact{
  display:flex;
  align-items:center;
  gap: 8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  /* Laat de mini-cards pas starten NA de player-label (label is absolute positioned) */
  /* extra ruimte tussen label en eerste mini-card */
  padding-left: calc(var(--label-w, 78px) + 22px);
  scroll-padding-left: calc(var(--label-w, 78px) + 22px);
}

/* Mini jaartal-kaartjes */
.mini-year-card{
  flex: 0 0 auto;
  width: var(--mini-year-size, 44px);
  height: var(--mini-year-size, 44px);
  min-width: var(--mini-year-size, 44px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  user-select: none;
}

/* Accent per speler */
.player-zone.p1 .mini-year-card{ border-color: rgba(0,210,255,0.65); }
.player-zone.p2 .mini-year-card{ border-color: rgba(249,83,198,0.65); }
.player-zone.p3 .mini-year-card{ border-color: rgba(247,151,30,0.65); }
.player-zone.p4 .mini-year-card{ border-color: rgba(217,70,239,0.65); }

/* Labels in compacte strips iets kleiner */
.battlefield.multi-compact .player-zone.zone-compact .player-label{
  font-size: 0.62rem;
  padding: 4px 10px;
  top: 6px;
  left: 8px;
  border-radius: 10px;
  opacity: 0.95;
}

/* Header scroll indicator rechts alleen tonen als er nog content is */
.game-header.header-carousel::after{ opacity: 0; }
.game-header.header-carousel.can-scroll-right::after{ opacity: 1; }

.game-header.active-first .player-stats.visible {
  border-radius: 8px !important;
}


/* ================================
   Sortable drag polish (Beatline)
   ================================ */

/* Belangrijk: tijdens drag mag er niets (zoals cardAppear/activePulse) met transform concurreren */
body.beatline-dragging .sortable-fallback,
body.beatline-dragging .sortable-drag,
body.beatline-dragging .sortable-chosen {
  animation: none !important;
  transition: none !important;
  will-change: transform;
  cursor: grabbing;
}

/* Houd de gesleepte kaart “bovenop” en nét wat duidelijker zichtbaar */
body.beatline-dragging .sortable-fallback,
body.beatline-dragging .sortable-drag {
  opacity: 0.98;
  filter: saturate(1.05) brightness(1.02);
  z-index: 10000001  !important;
  pointer-events: none !important;
}

/* Lift-effect (zonder transform te overriden) */
body.beatline-dragging .sortable-chosen,
body.beatline-dragging .sortable-fallback,
body.beatline-dragging .sortable-drag {
  position: relative;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
}

/* Subtiele “tilt” via pseudo-element (safe: raakt de drag transform niet) */
body.beatline-dragging .sortable-chosen::after,
body.beatline-dragging .sortable-fallback::after,
body.beatline-dragging .sortable-drag::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  transform: rotate(0.75deg);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  opacity: 0.55;
}

/* Placeholder in de lijst (ghost) subtiel houden */
body.beatline-dragging .sortable-ghost {
  opacity: 0.18 !important;
}

/* Zet de pulse op actieve kaarten uit tijdens slepen (die gebruikt transform) */
body.beatline-dragging #beatline-app:not(.perfect-order) #deck-zone .card,
body.beatline-dragging #beatline-app:not(.perfect-order) .timeline-scroll .card:not(.revealed) {
  animation: none !important;
}


/* ================================
   Drag nudge hint (tutorial)
   ================================ */
#beatline-app .beatline-nudge-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000000; /* boven de gameplay UI */
}

#beatline-app .beatline-nudge-hand{
  position: fixed; /* volgt viewport, werkt ook in fullscreen */
  left: 0;
  top: 0;
  font-size: 38px;
  line-height: 1;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

#beatline-app .beatline-nudge-card{
  will-change: transform;
}

.start-fullscreen-btn{
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ffffff;
  border: none;
  color: #000000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  padding: 0;
  z-index: 9999;
}

.start-fullscreen-btn:hover{ transform: scale(1.1); }
.start-fullscreen-btn:active{ transform: scale(0.98); }

.start-fullscreen-btn svg{
  width: clamp(16px, 4vw, 20px);
  height: clamp(16px, 4vw, 20px);
}


  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  height: 100px;        
  align-items: stretch;
}

#beatline-app.fullscreen-active .ctrl-section-btns .btn-large-action{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  flex: initial;         
  padding: 0 20px;       
}

#beatline-app.fullscreen-active .ctrl-section-btns .btn-small-token{
  width: 100%;
  height: 100%;
  flex: initial;
  padding: 0;
  font-size: 0.75rem;  
  line-height: normal;
}

body.is-iphone .fullscreen-btn {
  display: none !important;
}

body.is-iphone #btn-fullscreen,
body.is-iphone .start-fullscreen-btn {
  display: none !important;
}

/* ===== Center-panel Intervention Overlay (geen fullscreen modal) ===== */
.center-intervention{
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  padding: 6px;
   background: #0f0c29;
  -webkit-backdrop-filter: none;
  z-index: 999;
  pointer-events: auto;
}

.center-intervention.is-open{ display: flex; }

.center-intervention-inner{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.center-intervention-header{
  text-align: center;
  color: #fff;
  flex: 0 0 auto;
}

.center-intervention-header h2{
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.center-intervention-header p{
  margin: 6px 0 0 0;
  font-size: 1rem;
  font-weight: 900;
}

.center-intervention-actions{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding:6px !important;
}

.center-intervention-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 60%) minmax(0, 35%);
  gap: 14px;
  align-items: stretch;
  width: min(980px, 96%) !important;
  height: 70% !important;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 10px;       
  overflow: hidden; 
}

.center-intervention-grid .ci-col{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
   min-height: 0;
}

.center-intervention-grid .ci-col > .ci-btn{
  width: 100%;
}

.center-intervention-grid .ci-pick{
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
  overflow: hidden;
}

.center-intervention-grid .ci-pick .ci-btn{
  width: auto;
}

@media (max-width: 600px){
  .center-intervention-grid .ci-pick{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

.center-intervention-grid .ci-pick[hidden],
.center-intervention-grid .ci-back[hidden]{
  display: none !important;
}

.center-intervention-grid[data-mode="decision"] .ci-back{
  display: none !important;
}

.center-intervention-grid[data-mode="decision"] .ci-pick{
  display: none !important;
}

.center-intervention-grid[data-mode="pick"] #center-intervention-no,
.center-intervention-grid[data-mode="pick"] #center-intervention-yes{
  display: none !important;
}

.center-intervention-grid[data-mode="active"] #center-intervention-no,
.center-intervention-grid[data-mode="active"] #center-intervention-yes{
  display: none !important;
}

/* Tegel knoppen */
.ci-btn{
  min-width: 0 !important; 
   flex: 1 1 0;
  height: auto !important; 
  width: 100%;
  min-height: 0 !important;  
  box-sizing: border-box;
  white-space: normal;
  word-break: normal;
  overflow: hidden;
  overflow-wrap: break-word;
  border: none;
  border-radius: 8px;
  font-weight: 1000;
   letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    font-size: clamp(14px, 1.6vw, 18px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: normal;
}

.ci-btn:active{
  transform: scale(0.98);
  filter: brightness(0.95);
}

.ci-no{
    background: linear-gradient(180deg, rgba(190,45,70,0.92), rgba(90,15,35,0.92));
    border: 2px solid rgba(255, 90, 120, 0.35);
  color: #fff;
}

.ci-yes{
  background: var(--token-gold);
    color: #151515;  border: 1px solid rgba(0,0,0,0.22);
}

@media (max-width: 600px){
  .center-intervention{ padding: 16px; }
  .center-intervention-grid{
    padding: 0 12px;
    gap: 10px;
  }
  .ci-btn{
    padding: 9px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 600px){
  .center-intervention-grid{ gap: 20px; }
  .ci-btn{ border-radius: 18px; }
}

.ci-btn{
  min-width: 0 !important;
}

  .center-intervention-yeswrap.yes-1{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px){
  .center-intervention-yeswrap{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

.modal-btns{
  gap: 14px;
}

#bonus-token-btns{
  gap: 15%;
}

#bonus-token-btns .btn{
  font-size: 16px;
  padding: 12px 18px;
  min-height: 90px;
  border-radius: 14px;
  min-width: 130px;
}

#bonus-token-btns .btn-main{
  background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(34,197,94,0.95)) !important;
  color: #061014 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 26px rgba(16,185,129,0.18);
}

#bonus-token-btns .btn-ghost{
  background: linear-gradient(135deg, #cb3755, #f03) important;
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 26px rgba(239,68,68,0.16);
}

/* --- NIEUWE START TITEL STIJLEN --- */

.start-title {
    margin: 0 0 1rem 0;
    font-weight: 900;
    letter-spacing: 6px;
    font-size: clamp(2.9rem, 8vw, 4rem);
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(90deg, rgba(0,229,255,1) 0%, rgba(255,64,129,1) 45%, rgba(217,70,239,1) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: 
        drop-shadow(0 0 3px rgba(0,229,255,0.1)) 
        drop-shadow(0 0 8px rgba(217,70,239,0.35)) 
        drop-shadow(0 10px 18px rgba(0,0,0,0.65));
    animation: title-pulse 1s infinite ease-in-out, gradient-shift 3s infinite linear;
}

.start-shell .music-visualizer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
    margin-top: 0;
    margin-bottom: 20px;
}

.start-shell .bar {
    width: 4px;
    height: 10px;
    border-radius: 2px;
    animation: equalize 1s infinite ease-in-out;
    transform-origin: bottom center;
}

.start-shell .bar:nth-child(1) { background: #00e5ff; animation-delay: 0s; }
.start-shell .bar:nth-child(2) { background: #ff4081; animation-delay: 0.2s; }
.start-shell .bar:nth-child(3) { background: #d946ef; animation-delay: 0.4s; }
.start-shell .bar:nth-child(4) { background: #00e5ff; animation-delay: 0.1s; }
.start-shell .bar:nth-child(5) { background: #ff4081; animation-delay: 0.3s; }

/* --- ANIMATIES --- */
@keyframes title-pulse {
    0%, 100% {
        transform: scaleY(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scaleY(1.05);
        opacity: 1;
    }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes equalize {
    0%, 100% { height: 5px; opacity: 0.3; }
    50% { height: 25px; opacity: 1; }
}

/* --- NIEUWE PLAY BUTTON STIJL --- */
.play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--accent-p1), #2979ff); 
    color: #000;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 10px auto;
    position: relative;
    z-index: 50;
}

.play-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #fff, var(--accent-p1));
    box-shadow: 0 0 30px var(--accent-p1), 0 0 60px rgba(0, 229, 255, 0.6);
    border-color: #fff;
}

.play-btn:active {
    transform: scale(0.95);
}

.play-btn svg {
    width: 28px;
    height: 28px;
    fill: white;
    display: block;
    pointer-events: none;
}

.play-btn[data-status="replay"] {
    background: linear-gradient(135deg, var(--accent-p2), #d946ef);
    box-shadow: 0 0 20px var(--accent-p2);
}

/*LOGIN */
#start-overlay .beatline-auth{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#start-overlay .beatline-auth-btn{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  min-width: 220px;
  border-radius: 16px;
}

#start-overlay .beatline-auth-box{
  width: 100%;
  max-width: 480px;
}

/* Nextend container iets “strakker” in je glass UI */
#start-overlay .beatline-auth-box .nsl-container{
  margin: 0 !important;
}

#start-overlay .beatline-auth-box .nsl-button{
  border-radius: 16px !important;
}

.beatline-nsl-wrapper {
    margin: 20px auto 0 auto;
    width: 100%;
    max-width: 280px;
    text-align: center;
    position: relative;
    z-index: 50;
}

.beatline-nsl-wrapper .nsl-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Zorg dat de NSL container zichtbaar is */
.beatline-nsl-wrapper .nsl-container {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Styling van de NSL knoppen zodat ze bij je game passen */
div.nsl-container .nsl-button {
    width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    margin: 0 !important; /* Reset NSL margins */
    transition: transform 0.2s ease !important;
}

div.nsl-container .nsl-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Ingelogd status styling */
.beatline-auth-loggedin {
    margin-top: 15px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.beatline-auth-loggedin .auth-logout {
    color: #ff4081;
    margin-left: 8px;
    text-decoration: none;
    font-weight: bold;
}

.beatline-auth-loggedin .auth-logout:hover {
    text-decoration: underline;
}