/* ===== TMC ARCADE — gedeelde look & feel, 1:1 uit index.html ===== */
  @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:#170435;color:var(--ink);font-family:var(--font-display);overflow-x:hidden;cursor:default}
  .lang-bar{position:sticky;top:0;z-index:500;background:rgba(23,4,53,0.92);border-bottom:2px solid #ff8ec6;box-shadow:var(--shadow-soft);padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;backdrop-filter:blur(6px)}
  .lang-btn{padding:5px 12px;border:1.5px solid #d8cfe6;border-radius:4px;background:transparent;color:var(--ink-soft);font-family:var(--font-body);font-size:clamp(14px,2.7vw,14px);cursor:pointer;transition:all 0.15s;white-space:nowrap}
  .lang-btn:hover{border-color:#ff8ec6;color:var(--pink-ink);transform:scale(1.1)}
  .lang-btn.active{border-color:#ff8ec6;color:var(--ink);background:#ff8ec6;box-shadow:var(--shadow-soft)}
  .container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:20px}
  .hero{text-align:center;padding:40px 0 30px}
  .main-title{font-family:var(--font-display);font-size:clamp(44px,9vw,100px);line-height:1;background:linear-gradient(45deg,#ff8ec6,#ffab7a,#ffd86b,#7fdcae,#8ad3fb,#bb96f0,#ff8ec6);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:rainbowShift 2s linear infinite,glitch 5s infinite;filter:drop-shadow(0 6px 10px rgba(211,200,223,0.35))}
  .subtitle{font-family:var(--font-body);font-size:clamp(14px,2.43vw,19px);color:var(--sky-ink);text-shadow:var(--stroke-text);animation:flicker 1.5s infinite alternate;margin-top:10px;letter-spacing:2px}
  .tagline{font-family:var(--font-display);font-size:clamp(16px,3.5vw,32px);color:var(--lemon-ink);text-shadow:var(--stroke-text);animation:pulse 0.9s infinite alternate;margin-top:6px}
  .ticker-tape{background:#ff8ec6;color:var(--ink);padding:7px 0;overflow:hidden;margin:16px 0;white-space:nowrap}
  .ticker-inner{display:inline-block;animation:scrollTape 18s linear infinite;font-family:var(--font-body);font-size:15px;letter-spacing:2px}
  .footer{text-align:center;padding:36px 0;font-family:var(--font-body);font-size:clamp(14px,2.7vw,14px);color:var(--ink-soft);line-height:2.2}
  .footer .big-nope{font-size:clamp(28px,6vw,64px);font-family:var(--font-display);color:var(--ink-faint);display:block;margin-top:16px;line-height:1.2}
  .copied-msg{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#7fdcae;color:var(--ink);padding:10px 20px;font-family:var(--font-body);font-size:15px;border-radius:4px;z-index:99999;display:none}
  @keyframes rainbowShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
  @keyframes glitch{0%,88%,100%{transform:none}89%{transform:skew(-2deg) translate(3px,0);filter:drop-shadow(0 6px 10px rgba(211,200,223,0.35)) drop-shadow(0 6px 10px rgba(211,200,223,0.35))}91%{transform:skew(2deg) translate(-3px,0);filter:drop-shadow(0 6px 10px rgba(211,200,223,0.35)) drop-shadow(0 6px 10px rgba(211,200,223,0.35))}93%{transform:none}}
  @keyframes flicker{0%,100%{opacity:1}50%{opacity:0.3}}
  @keyframes pulse{from{opacity:0.8;transform:scale(1)}to{opacity:1;transform:scale(1.03)}}
  @keyframes spin3d{0%{transform:perspective(300px) rotateY(0deg)}100%{transform:perspective(300px) rotateY(360deg)}}
  @keyframes colorCycle{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
  @keyframes floatAll{0%{transform:translateY(0px)}100%{transform:translateY(-8px)}}
  @keyframes panelIn{from{transform:translate(-50%,-50%) scale(0.5) rotate(-10deg);opacity:0}to{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}}
  @keyframes scrollTape{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes wobble{0%,100%{transform:rotate(-0.5deg)}50%{transform:rotate(0.5deg)}}
  @keyframes waterWave{0%{transform:translateX(-100%) translateY(10px) scaleY(1)}50%{transform:translateX(0%) translateY(-10px) scaleY(1.2)}100%{transform:translateX(100%) translateY(10px) scaleY(1)}}
  @keyframes fireRise{0%{transform:translateY(100%) scaleX(1.2);opacity:0.7}100%{transform:translateY(-100%) scaleX(0.8);opacity:0}}
  @keyframes windBlow{0%{transform:translateX(-200%) skewX(20deg);opacity:0.5}100%{transform:translateX(200%) skewX(-20deg);opacity:0}}


  /* ===== ANIMATED BACKGROUND ===== */
  .bg-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .orb {
    position:absolute; border-radius:50%;
    filter:blur(40px); opacity:0.75;
  }
  .orb1{width:600px;height:600px;background:radial-gradient(circle,#ff8ec6,#ff8ec600);top:-200px;left:-150px;animation:o1 8s ease-in-out infinite alternate}
  .orb2{width:500px;height:500px;background:radial-gradient(circle,#b492ee,#b492ee00);top:5%;right:-100px;animation:o2 11s ease-in-out infinite alternate}
  .orb3{width:480px;height:480px;background:radial-gradient(circle,#8ad3fb,#8ad3fb00);bottom:-100px;left:20%;animation:o3 7s ease-in-out infinite alternate}
  .orb4{width:400px;height:400px;background:radial-gradient(circle,#ff9f76,#ff9f7600);bottom:10%;right:5%;animation:o4 12s ease-in-out infinite alternate}
  .orb5{width:380px;height:380px;background:radial-gradient(circle,#7fdcae,#7fdcae00);top:30%;left:30%;animation:o5 9s ease-in-out infinite alternate}
  .orb6{width:340px;height:340px;background:radial-gradient(circle,#ffd86b,#ffd86b00);top:55%;left:2%;animation:o6 6s ease-in-out infinite alternate}
  @keyframes o1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(180px,130px) scale(1.4)}}
  @keyframes o2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-150px,100px) scale(0.7)}}
  @keyframes o3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(130px,-120px) scale(1.3)}}
  @keyframes o4{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-100px,-120px) scale(1.2)}}
  @keyframes o5{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-140px,90px) scale(0.8)}}
  @keyframes o6{0%{transform:translate(0,0) scale(1)}100%{transform:translate(110px,-80px) scale(1.3)}}

  .bg-hexgrid {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    width:100%; height:100%; opacity:0.18;
  }

  .bg-particles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .bp {
    position:absolute; border-radius:50%;
    animation:bpfloat linear infinite;
  }
  @keyframes bpfloat{
    0%  {transform:translateY(100vh) scale(0); opacity:0}
    8%  {opacity:1}
    88% {opacity:0.9}
    100%{transform:translateY(-60px) scale(1.5); opacity:0}
  }

  .bg-scanlines {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 3px,
      rgba(158,132,183,0.05) 3px, rgba(158,132,183,0.05) 4px
    );
  }

  .bg-overlay {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:rgba(255,253,248,0.35);
  }

  .bg-overlay {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:rgba(255,253,248,0.42);
  }

  @keyframes tmcguyfloat {
    0%,100% { transform: translateY(0px) rotate(-0.5deg); }
    50%      { transform: translateY(-12px) rotate(0.5deg); }
  }
  @keyframes tmcguyglow {
    from { filter: drop-shadow(0 6px 10px rgba(211,200,223,0.35)) drop-shadow(0 6px 10px rgba(211,200,223,0.35)); }
    to   { filter: drop-shadow(0 6px 10px rgba(211,200,223,0.35)) drop-shadow(0 6px 10px rgba(211,200,223,0.35)); }
  }

/* ===== PLINKO ===== */
  .plinko-section {
    border-top: 2px solid #ffffff11;
    margin-top: 40px;
    padding: 40px 10px 20px;
    text-align: center;
  }
  .plinko-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 4vw, 38px);
    background: linear-gradient(90deg, #ff8ec6, #ffd86b, #7fd0f5, #ff8ec6);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowShift 2s linear infinite;
    margin-bottom: 6px;
  }
  .plinko-subtitle {
    font-family: var(--font-body);
    font-size:14px;
    color:var(--ink);
    margin-bottom: 16px;
  }
  .plinko-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .plinko-stats {
    font-family: var(--font-body);
    font-size:14px;
    color: var(--sky-ink);
  }
  .plinko-val {
    color: var(--lemon-ink);
    font-size:17px;
    text-shadow:var(--stroke-text);
  }
  .plinko-drop-btn {
    padding: 10px 24px;
    background: #ff8ec6;
    color:var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow:var(--shadow-soft);
    transition: transform 0.1s;
    animation: pulse 0.8s infinite alternate;
  }
  .plinko-drop-btn:hover { transform: scale(1.07); }
  .plinko-drop-btn:disabled { opacity: 0.4; cursor: not-allowed; animation: none; transform: none; }
  .plinko-board-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .plinko-board-wrap {
    display: block;
    border: 2px solid #ff8ec666;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #160331;
    box-shadow:var(--shadow-soft);
    width: 420px;
    max-width: 100%;
  }
  #plinko-canvas { display: block; cursor: pointer; }
  .plinko-buckets {
    display: flex;
    width: 420px;
    max-width: 100%;
  }
  .pb {
    flex: 1;
    padding: 6px 2px;
    font-family: var(--font-body);
    font-size:14px;
    text-align: center;
    border: 1px solid #ffffff22;
    border-top: 2px solid;
  }
  .pb-anon  { background: #3b1060; color: var(--lilac-ink); border-color: var(--lilac-ink); }
  .pb-low   { background: #0b2f45; color: var(--sky-ink); border-color: var(--sky-ink); }
  .pb-mid   { background: #0f3d20; color: var(--mint-ink); border-color: var(--mint-ink); }
  .pb-jackpot { background: #4a3200; color: var(--lemon-ink); border-color: #ffd86b; box-shadow:var(--shadow-soft); animation: pulse 0.6s infinite alternate; }
  .plinko-gameover {
    width: 420px;
    max-width: 100%;
    min-height: 480px;
    padding: 40px 24px;
    border: 3px dashed #ff8ec6;
    border-radius: 0 0 8px 8px;
    background: rgba(255,253,248,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
  }
  .plinko-gameover.popin {
    animation: flowIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  .plinko-go-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--pink-ink);
    text-shadow:var(--stroke-text);
    margin-bottom: 10px;
  }
  .plinko-go-msg {
    font-family: var(--font-body);
    font-size:14px;
    color:var(--ink);
    line-height: 1.9;
    margin-bottom: 12px;
  }
  .plinko-go-score {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--lemon-ink);
    text-shadow:var(--stroke-text);
    margin-bottom: 14px;
  }
  .plinko-replay-btn {
    padding: 10px 24px;
    background: #7fdcae;
    color:var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s;
  }
  .plinko-replay-btn:hover { transform: scale(1.07); }
  .plinko-airdrop {
    margin: 20px auto 0;
    padding: 24px;
    border: 3px solid #ffd86b;
    border-radius: 12px;
    background: rgba(255,255,140,0.05);
    max-width: 460px;
  }
  .plinko-airdrop.popin {
    animation: flowIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  .plinko-airdrop-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--lemon-ink);
    text-shadow:var(--stroke-text);
    margin-bottom: 10px;
  }
  .plinko-airdrop-msg {
    font-family: var(--font-body);
    font-size:14px;
    color:var(--ink);
    line-height: 2;
    margin-bottom: 14px;
  }
  .plinko-wallet-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid #ffd86b66;
    border-radius: 6px;
    color:var(--ink);
    font-family: var(--font-body);
    font-size:14px;
    margin-bottom: 10px;
    outline: none;
  }
  .plinko-wallet-input:focus { border-color: #ffd86b; }
  .plinko-submit-btn {
    padding: 10px 24px;
    background: #ffd86b;
    color:var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s;
    font-weight: 900;
  }
  .plinko-submit-btn:hover { transform: scale(1.07); }
  .plinko-thanks {
    font-family: var(--font-body);
    font-size:14px;
    color: var(--mint-ink);
    margin-top: 12px;
    text-shadow:var(--stroke-text);
  }
  .plinko-threshold {
    font-family: var(--font-body);
    font-size:14px;
    color:var(--ink-faint);
    margin-top: 16px;
  }


  .plinko-challenge {
    font-family: var(--font-body);
    font-size:clamp(14px,2.03vw,16px);
    text-align: center;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 2px solid #ffd86b;
    background: rgba(255,239,140,0.06);
    position: relative;
    overflow: hidden;
  }
  .plinko-challenge-text {
    position: relative;
    z-index: 2;
    animation: challengePulse 1.2s ease-in-out infinite alternate;
  }
  @keyframes challengePulse {
    from { 
      color: var(--lemon-ink); 
      text-shadow:var(--stroke-text); 
    }
    to { 
      color: var(--peach-ink); 
      text-shadow:var(--stroke-text); 
    }
  }
  .plinko-challenge::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
      transparent 0deg,
      rgba(255,239,140,0.04) 60deg,
      transparent 120deg,
      rgba(255,203,140,0.04) 180deg,
      transparent 240deg,
      rgba(255,239,140,0.04) 300deg,
      transparent 360deg
    );
    animation: challengeSpin 8s linear infinite;
    pointer-events: none;
  }
  @keyframes challengeSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

  /* RAINBOW BALL */
  .rainbow-ball-wrap {
    text-align: center;
    margin: 10px 0;
  }
  .rainbow-ball-svg {
    animation: rbSpin 2s linear infinite, rbScale 1s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 10px rgba(211,200,223,0.35)) drop-shadow(0 6px 10px rgba(211,200,223,0.35));
  }
  @keyframes rbSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes rbScale { from{transform:scale(1)} to{transform:scale(1.15)} }

  .plinko-section {
    position: relative;
  }
  .plinko-section::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 0;
    width: 160px;
    height: 200px;
    background: url('tmcguysingle.png') no-repeat center/contain;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
    animation: tmcguyfloat 6s ease-in-out infinite;
  }


  /* TMC Guy in panels */
  .plinko-go-guy {
    width: 80px;
    animation: tmcguyfloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(211,200,223,0.35));
  }


  /* TMC Guy variety placements */

/* ===== GEDEELD ===== */
  .tmcguy-feature {
    text-align: center;
    margin: 20px 0 10px;
  }
  .tmcguy-feature img {
    width: clamp(80px, 15vw, 130px);
    animation: tmcguyfloat 3s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(211,200,223,0.35));
  }

  /* Sticker download section */
  .flappy-section {
    border-top: 2px solid #ffffff0a;
    margin-top: 40px;
    padding: 40px 10px 20px;
    text-align: center;
  }

/* ===== ARCADE PAGE CHROME (alleen op de losse game-paginas) ===== */
.arcade-topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(90deg,#1d073a,#33104f,#1d073a);
  border-bottom:3px solid #ff8ec6;
  box-shadow:var(--shadow-soft);
}
.arcade-home{
  font-family:var(--font-display); font-size:clamp(15px,3.4vw,26px); text-decoration:none; line-height:1;
  background:linear-gradient(90deg,#ff8ec6,#ffd86b,#8ad3fb,#ff8ec6); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:rainbowShift 2s linear infinite;
}
.arcade-back{
  font-family:var(--font-body); font-size:clamp(14px,2.43vw,14px);
  color:var(--lemon-ink); text-decoration:none; white-space:nowrap;
  border:1.5px solid #ffd86b66; border-radius:4px; padding:8px 12px; transition:all .15s;
}
.arcade-back:hover{background:#ffd86b22; border-color:#ffd86b; box-shadow:var(--shadow-soft)}
.arcade-tag{
  font-family:var(--font-body); font-size:clamp(14px,2.16vw,14px);
  color:var(--sky-ink); text-shadow:var(--stroke-text); letter-spacing:1px; white-space:nowrap;
}

/* game-stage: houdt canvas + HUD netjes gecentreerd en schaalbaar */
.arcade-stage{width:100%; max-width:460px; margin:0 auto; text-align:center}
.arcade-canvas{
  display:block; width:100%; height:auto; margin:0 auto;
  border:2px solid #ff8ec666; border-radius:8px; box-shadow:var(--shadow-soft);
  cursor:pointer; touch-action:none;
}
/* niet groter dan de native canvasmaat, anders wordt het wazig */
/* flappy houdt bewust zijn lichtblauwe lucht: de achtergrond onder het
   canvas moet daar dus ook licht zijn */
#flappy-canvas{background:#dcf1fd; max-width:400px}
#maze-canvas{background:#160331; border-color:#ffd86b66; box-shadow:var(--shadow-soft); max-width:420px}
/* plinko-canvas schaalt mee met het bord (anders loopt hij op mobiel uit de bak) */
#plinko-canvas{width:100%; height:auto; max-width:420px; touch-action:none}
.arcade-hud{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:10px; font-family:var(--font-body); font-size:clamp(14px,2.7vw,14px); color:var(--lemon-ink);
}
.arcade-hint{
  font-family:var(--font-body); font-size:clamp(14px,2.7vw,14px);
  color:var(--ink-faint); margin-top:10px;
}

/* touch d-pad (maze) */
.dpad{display:none; grid-template-columns:repeat(3,1fr); gap:8px; width:186px; margin:16px auto 0}
.dpad button{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  height:56px; border:2px solid #ffd86b66; border-radius:8px; background:rgba(255,255,140,0.06);
  color:var(--lemon-ink); font-family:var(--font-body); font-size:19px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.dpad button:active{background:#ffd86b33; box-shadow:var(--shadow-soft); transform:scale(0.94)}
.dpad .dpad-empty{border:none; background:none; box-shadow:var(--shadow-soft)}
@media (pointer:coarse){ .dpad{display:grid} }

/* meer games onderaan */
.arcade-more{margin:44px auto 0; text-align:center; max-width:860px}
.arcade-more-title{
  font-family:var(--font-body); font-size:clamp(14px,2.97vw,16px);
  color:var(--pink-ink); text-shadow:var(--stroke-text); margin-bottom:14px; letter-spacing:1px;
}
.arcade-more-grid{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.arcade-more-btn{
  --acc:#ff8ec6;
  flex:1 1 170px; max-width:220px; min-width:140px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 10px; text-decoration:none; border-radius:10px;
  border:2px solid var(--acc); background:rgba(255,253,248,0.45);
  transition:transform .15s, box-shadow .15s;
}
.arcade-more-btn:hover{transform:translateY(-4px) scale(1.03); box-shadow:var(--shadow-soft)}
.arcade-more-btn img{width:100%; height:76px; object-fit:cover; object-position:center top; border-radius:6px; display:block}
.arcade-more-btn span{
  font-family:var(--font-body); font-size:clamp(14px,2.43vw,14px);
  color:var(--acc); text-shadow:var(--stroke-text); line-height:1.5;
}
.am-shootout{--acc:#ffb87f} .am-plinko{--acc:#ff8ec6} .am-flappy{--acc:#8ad3fb} .am-maze{--acc:#ffd86b}
.am-timepilot{--acc:#bb96f0} .am-datboi{--acc:#7dfc4b}
.am-trailblazer{--acc:#7fdcae}

/* ===== TIME PILOT (in een iframe, het spel woont in /TimePilot) ===== */
.tp-modes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0 0 14px}
.tp-mode-btn{
  font-family:var(--font-body); font-size:clamp(14px,2.43vw,14px);
  color:var(--lilac-ink); background:rgba(226,140,255,0.08);
  border:2px solid #bb96f066; border-radius:6px; padding:9px 12px;
  cursor:pointer; transition:all .15s;
}
.tp-mode-btn:hover{border-color:#bb96f0; box-shadow:var(--shadow-soft)}
.tp-mode-btn.active{background:#bb96f0; color:var(--ink); border-color:#bb96f0; box-shadow:var(--shadow-soft)}
.tp-frame-wrap{
  position:relative; width:100%; max-width:800px; margin:0 auto;
  aspect-ratio:4 / 3; overflow:hidden; background:#170435;
  border:2px solid #bb96f066; border-radius:8px; box-shadow:var(--shadow-soft);
}
.tp-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
/* groot scherm: overlay over het hele venster (werkt ook op iOS) */
.tp-frame-wrap.tp-max{
  position:fixed; inset:0; z-index:9999; margin:0;
  width:100vw; height:100vh; max-width:none; aspect-ratio:auto;
  border:0; border-radius:0; box-shadow:var(--shadow-soft); background:#170435;
}
/* de balken hebben hun eigen stacking context, dus in groot-scherm-modus weg ermee */
body.tp-maxed{overflow:hidden}
body.tp-maxed .lang-bar,
body.tp-maxed .arcade-topbar,
body.tp-maxed .ticker-tape{display:none}
.tp-exit-max{
  display:none; position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--font-body); font-size:14px;
  color:var(--lemon-ink); background:rgba(255,253,248,0.72); border:1.5px solid #ffd86b66;
  border-radius:4px; padding:8px 10px; cursor:pointer;
}
.tp-exit-max:hover{background:#ffd86b22; border-color:#ffd86b}
.tp-frame-wrap.tp-max .tp-exit-max{display:block}

/* ===== TRAILBLAZER ===== */
/* Startplaat van het spel is 3:2, dus het kader ook (tp-frame-wrap is 4:3) */
.tb-frame{aspect-ratio:3 / 2; border-color:#7fdcae66; box-shadow:var(--shadow-soft)}
.tb-mode-btn{color:var(--mint-ink); background:rgba(140,255,198,0.08); border-color:#7fdcae66}
.tb-mode-btn:hover{border-color:#7fdcae; box-shadow:var(--shadow-soft)}
.tb-mode-btn.active{background:#7fdcae; color:#6b5a7d; border-color:#7fdcae; box-shadow:var(--shadow-soft)}
/* "Beste op desktop fullscreen"-melding */
.tb-note{
  width:min(100%, 560px); margin:0 auto 14px; padding:9px 14px;
  border:1.5px solid #7fdcae55; border-radius:8px; background:rgba(140,255,198,0.06);
  font-family:var(--font-body); font-size:clamp(14px,2.29vw,14px);
  line-height:1.8; color:#2f9e6e; text-shadow:var(--stroke-text);
}

/* ===== MOBIEL ===== */
@media (max-width:600px){
  .lang-bar{gap:4px; padding:6px 4px}
  .lang-btn{font-size:14px !important; padding:5px 8px !important}
  .container{padding:14px 10px}
  .arcade-topbar{padding:8px 10px; flex-wrap:nowrap}
  .arcade-tag{display:none}
  .arcade-back{padding:7px 9px}
  .plinko-section, .flappy-section{padding:24px 4px 12px; margin-top:20px}
  .plinko-section::after{display:none}
  .plinko-title{font-size:clamp(19px,6.75vw,22px) !important}
  .plinko-subtitle{font-size:clamp(14px,2.7vw,14px) !important}
  .plinko-ui{gap:12px}
  .plinko-drop-btn{font-size:16px !important; padding:9px 18px !important}
  .plinko-gameover{min-height:0; padding:26px 14px}
  .plinko-go-title{font-size:22px}
  .plinko-go-score{font-size:24px}
  .plinko-airdrop{padding:16px 12px}
  .plinko-airdrop-title{font-size:18px}
  .pb{font-size:14px; padding:5px 1px}
  .arcade-more-btn img{height:60px}
  .footer{font-size:14px !important; padding:22px 10px !important}
}
@media (max-width:400px){
  .lang-btn{font-size:14px !important; padding:4px 6px !important}
  .dpad{width:162px}
  .dpad button{height:50px}
}

/* ===== "MEER GAMES KOMEN ERAAN" (zelfde blok als op de hoofdpagina) ===== */
.game-future-note {
  width: min(100%, 860px);
  margin: 40px auto 0;
  padding: 14px 18px;
  border: 2px solid rgba(140,255,255,0.5);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,140,198,0.13), rgba(140,233,255,0.12), rgba(255,255,140,0.08)),
    rgba(255,253,248,0.58);
  box-shadow: 0 0 18px rgba(140,233,255,0.24), inset 0 0 18px rgba(255,255,255,0.04);
  text-align: center;
  color:var(--ink);
  position: relative;
  overflow: hidden;
}
.game-future-note::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-120%);
  animation: gameFutureSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gameFutureSweep {
  0%, 35% { transform: translateX(-120%); }
  65%, 100% { transform: translateX(120%); }
}
.game-future-title {
  display: block;
  font-family: var(--font-body);
  font-size:clamp(14px,1.82vw,16px);
  line-height: 1.7;
  color: var(--lemon-ink);
  text-shadow:var(--stroke-text);
}
.game-future-copy {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size:clamp(14px,1.55vw,14px);
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
  text-shadow:var(--stroke-text);
}

.gf-list {
  display: block;
  margin: 10px auto 0;
  max-width: min(560px, 88%);
  text-align: left;
  }
.gf-item {
  display: block;
  position: relative;
  padding-left: 16px;
  margin: 6px 0;
  color: rgba(255,255,255,0.9);
  }
.gf-item::before {
  content: '\25B8';
  position: absolute;
  left: 0;
  color: var(--sky-ink);
  text-shadow:var(--stroke-text);
  }
[dir="rtl"] .gf-list { text-align: right; }
[dir="rtl"] .gf-item { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .gf-item::before { left: auto; right: 0; content: '\25C2'; }
.gf-note {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,0.6);
  }
.gf-punch {
  display: block;
  margin-top: 10px;
  color: var(--lemon-ink);
  text-shadow:var(--stroke-text);
  animation: pulse 1.1s infinite alternate;
  }

/* ==================================================================
   PASTEL / KAWAII SKIN — zelfde behandeling als de voorpagina
   ================================================================== */
body{
  background:
    radial-gradient(1200px 700px at 12% -5%,  var(--bg-1), transparent 60%),
    radial-gradient(1000px 620px at 92% 8%,   var(--bg-4), transparent 62%),
    radial-gradient(1100px 760px at 50% 108%, var(--bg-3), transparent 60%),
    linear-gradient(175deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
}
.orb{ filter: blur(70px); opacity: 0.5; }
/* zie index.html: neon in plaats van pastel, met screen zodat ze niet
   samen tot een grijze waas optellen */
.orb{ mix-blend-mode: screen; }
.orb1{background:radial-gradient(circle,#e4409f,#e4409f00)}
.orb2{background:radial-gradient(circle,#a855f7,#a855f700)}
.orb3{background:radial-gradient(circle,#67e8f9,#67e8f900)}
.orb4{background:radial-gradient(circle,#fb923c,#fb923c00)}
.orb5{background:radial-gradient(circle,#7dfc4b,#7dfc4b00)}
.orb6{background:radial-gradient(circle,#fcdf05,#fcdf0500)}
.bg-hexgrid{ opacity: 0.5 }
.bg-scanlines, .bg-overlay{ display: none }
.bp{ box-shadow: none !important; opacity: 0.75; font-size:19px; line-height: 1; text-align: center; }

/* taalbalk en topbar */
.lang-bar{ background: rgba(23,4,53,0.82); border-bottom: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.45); padding: 10px; }
.lang-btn{ background: var(--card); border: 2.5px solid #fff; color: var(--ink-soft); border-radius: var(--radius-pill); padding: 7px 14px; font-weight: 800; font-size:clamp(12px,2.2vw,14px); }
.lang-btn:hover{ color: var(--pink-ink); border-color: var(--pink); transform: translateY(-2px) scale(1.04); }
.lang-btn.active{ background: var(--pink-strong); color: #fff; border-color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,0.35); }
.arcade-topbar{
  background: rgba(29,7,58,0.86);
  border-bottom: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(158,132,183,0.20);
}
.arcade-home{
  font-family: var(--font-display); font-weight: 800;
  -webkit-text-fill-color: currentColor; background: none; animation: none;
  color: var(--pink-ink);
  text-shadow: -2px -2px 0 #1c0435, 2px -2px 0 #1c0435, -2px 2px 0 #1c0435, 2px 2px 0 #1c0435;
}
.arcade-back{
  background: var(--card); border: 2.5px solid #fff; color: var(--ink);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-tight);
  font-family: var(--font-body); font-weight: 800; font-size:clamp(15px,2.7vw,16px);
}
.arcade-back:hover{ background: var(--card-2); color: var(--pink-ink); border-color: var(--pink); }
.arcade-tag{ color: var(--lilac-ink); text-shadow: none; font-weight: 800; }

/* ticker */
.ticker-tape{
  background: linear-gradient(90deg,#2a0a44,#3b1060,#1d073a,#3b1060,#2a0a44);
  color: var(--lemon); border-top: 3px solid #fff; border-bottom: 3px solid #fff; padding: 10px 0;
}
.ticker-inner{ font-weight: 800; font-size:18px; letter-spacing: 0.5px; }

/* koppen */
.plinko-title, .arcade-more-title{
  font-family: var(--font-display); font-weight: 800;
  -webkit-text-fill-color: currentColor; background: none; animation: none;
  color: var(--pink-ink);
  text-shadow: -2px -2px 0 #1c0435, 2px -2px 0 #1c0435, -2px 2px 0 #1c0435, 2px 2px 0 #1c0435, 0 5px 12px rgba(0,0,0,0.6);
}
.plinko-subtitle, .arcade-hint{ color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; }
.plinko-subtitle{ font-size:clamp(16px,2.97vw,18px) }
.arcade-hint{ font-size:clamp(15px,2.7vw,17px) }

/* game-vlakken als sticker */
.arcade-canvas, .tp-frame-wrap, .plinko-board-wrap, .plinko-gameover,
.plinko-airdrop, .game-future-note, .arcade-more-btn, .plinko-challenge{
  border: var(--border) solid #fff !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  background-color: var(--card);
}
.arcade-more-btn:hover{ box-shadow: var(--shadow-lift) !important; transform: translateY(-4px) scale(1.03); }
.arcade-more-btn span{ font-family: var(--font-display); font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.am-shootout span{ color: var(--peach-ink) } .am-plinko span{ color: var(--pink-ink) }
.am-flappy span  { color: var(--sky-ink) }   .am-maze span  { color: var(--lemon-ink) }
.am-timepilot span{ color: var(--lilac-ink) } .am-trailblazer span{ color: var(--mint-ink) }

/* knoppen */
.plinko-drop-btn, .plinko-replay-btn, .plinko-submit-btn, .tp-mode-btn, .tb-mode-btn{
  border: 4px solid #fff; color: var(--ink-on-accent) !important;
  font-family: var(--font-display); font-weight: 800;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-tight);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45); animation: none;
}
.plinko-drop-btn{ background: linear-gradient(160deg,#ff8fcd,#e4409f) }
.plinko-replay-btn{ background: linear-gradient(160deg,#b6ff8f,#5ed92a) }
.plinko-submit-btn{ background: linear-gradient(160deg,#ffec5c,#fcdf05) }
/* de modusknoppen zijn geen felle vlakken maar donkere pillen, dus daar blijft
   de lichte letter staan */
.tp-mode-btn, .tb-mode-btn{ background: var(--card); color: var(--ink) !important; text-shadow: none; }
.tp-mode-btn.active{ background: linear-gradient(160deg,#d3aeff,#a855f7); color: var(--ink-on-accent) !important; }
.tp-exit-max{ background: var(--card); border: 2.5px solid #fff; color: var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-tight); }
.tb-note{ background: rgba(255,255,255,0.10); border: 3px solid #fff; color: var(--mint-ink); border-radius: var(--radius-sm); }

/* plinko-bakjes */
.pb{ border-radius: var(--radius-sm); border: 2px solid #fff; color: var(--ink); font-weight: 800; }
.pb-anon{ background:#3b1060 } .pb-low{ background:#0b2f45 }
.pb-mid { background:#0f3d20 } .pb-jackpot{ background:#4a3200; animation:none }

/* future-note */
.game-future-title{ color: var(--lemon-ink); text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.gf-item, .gf-note{ color: var(--ink) }
.game-future-copy{ color: var(--ink); text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.gf-punch{ color: var(--pink-ink); animation: none }
.gf-item::before{ color: var(--sky-ink); text-shadow: none }

/* footer */
.footer{ color: var(--ink-soft); font-size:clamp(16px,2.97vw,17px) }
.footer .big-nope{ color: var(--ink-faint); font-family: var(--font-display); text-shadow: 0 3px 10px rgba(0,0,0,0.6); }

/* animaties verzachten */
@keyframes glitch{ 0%,100%{transform:none;filter:none} }
@keyframes flicker{ 0%,100%{opacity:1} 50%{opacity:0.85} }
@keyframes colorCycle{ 0%,100%{filter:none} }
@keyframes gameCardGlow{ 0%,100%{box-shadow:var(--shadow-soft)} }
@keyframes gameFutureSweep{ 0%,35%{transform:translateX(-120%)} 65%,100%{transform:translateX(120%)} }

/* leesgroottes met een echte bovengrens (de oude clamps zaten vast op min==max) */
.plinko-subtitle{ font-size: clamp(14px,1.35vw,18px) }
.arcade-hint{ font-size: clamp(13px,1.25vw,16px) }
.arcade-more-btn span{ font-size: clamp(13px,1.2vw,16px) }
.arcade-more-title{ font-size: clamp(15px,1.6vw,21px) }
.game-future-title{ font-size: clamp(15px,1.6vw,20px) }
.game-future-copy, .gf-item, .gf-note, .gf-punch{ font-size: clamp(14px,1.35vw,18px) }
.footer{ font-size: clamp(13px,1.2vw,16px) }
.ticker-inner{ font-size: clamp(14px,1.3vw,17px) }
.arcade-back{ font-size: clamp(12px,1.15vw,15px) }
.arcade-tag{ font-size: clamp(12px,1.1vw,14px) }
.tp-mode-btn, .tb-mode-btn{ font-size: clamp(13px,1.2vw,16px) }
.tb-note{ font-size: clamp(13px,1.25vw,16px) }
.plinko-stats{ font-size: clamp(14px,1.4vw,18px) }
.pb{ font-size: clamp(11px,1.05vw,13px) }
.arcade-hud{ font-size: clamp(13px,1.3vw,17px) }

/* ==================================================================
   "MEER TMC GAMES KOMEN ERAAN" — de airdrop-uitleg.
   Was een grijs blokje met drie opsommingsregels dat niemand las. Nu een
   sticker-paneel met een verlopende kop en drie kaarten, zodat je in één
   oogopslag ziet wat er te halen valt.
   ================================================================== */
.game-future-note{
  width: min(100%, 900px);
  margin: 44px auto 0;
  padding: 26px 22px 24px;
  border: 4px solid #fff;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #33104f 0%, #2a0a44 45%, #1d073a 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.28) inset;
  text-align: center;
  overflow: hidden;
  position: relative;
}
/* zachte glans die één keer per tien seconden overtrekt */
.game-future-note::before{
  content: '';
  position: absolute; inset: -40% -10%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: gfGlans 10s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gfGlans{ 0%,70%{ transform: translateX(-60%); } 100%{ transform: translateX(60%); } }

.game-future-title{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3.1vw, 32px) !important;
  line-height: 1.15;
  letter-spacing: .4px;
  background: linear-gradient(92deg, #fcdf05, #ff8c12, #ff2f9e, #a855f7, #35d6f7, #76ec3a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  animation: gfKop 9s linear infinite;
}
@keyframes gfKop{ to { background-position: 220% 0; } }

.gf-intro{
  display: block;
  max-width: 56ch;
  margin: 10px auto 0;
  font-size: clamp(15px, 1.5vw, 19px) !important;
  line-height: 1.65;
  font-weight: 700;
  color: var(--ink);
}

.gf-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px auto 4px;
  text-align: center;
}
.gf-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 17px 13px 15px;
  border: 3px solid #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-tight);
  background: var(--card-2);
}
.gf-card-1{ background: linear-gradient(180deg,#4a3200,#2f2000); }
.gf-card-2{ background: linear-gradient(180deg,#0f3d20,#0b2e18); }
.gf-card-3{ background: linear-gradient(180deg,#3b1060,#2c0b49); }

.gf-ico{
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(130,110,160,.22));
  animation: gfZweef 3.6s ease-in-out infinite alternate;
}
.gf-card-2 .gf-ico{ animation-delay: .5s; }
.gf-card-3 .gf-ico{ animation-delay: 1s; }
@keyframes gfZweef{ to { transform: translateY(-5px); } }

.gf-txt{
  font-size: clamp(13.5px, 1.25vw, 16px) !important;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
  text-shadow: none;
}

.gf-note{
  display: block;
  max-width: 56ch;
  margin: 16px auto 0;
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.6;
  color: var(--ink-soft) !important;
}
.gf-punch{
  display: inline-block;
  margin: 16px auto 0;
  padding: 10px 22px;
  border-radius: var(--radius-pill, 999px);
  border: 3px solid #fff;
  background: var(--pink-strong);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.7vw, 20px) !important;
  box-shadow: var(--shadow-tight);
  text-shadow: none !important;
  animation: none !important;
}

@media (max-width: 680px){
  .gf-cards{ grid-template-columns: 1fr; gap: 10px; }
  .gf-card{ flex-direction: row; text-align: left; gap: 13px; padding: 13px 15px; }
  .gf-ico{ font-size: 28px; flex: none; }
  [dir="rtl"] .gf-card{ text-align: right; }
  .game-future-note{ padding: 20px 15px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce){
  .game-future-note::before, .game-future-title, .gf-ico{ animation: none; }
}