/* =============================================
   NASI GORENG BLAST v2 — Full Stylesheet
   ============================================= */

:root {
  --primary:   #D63C0A;
  --secondary: #F5A623;
  --accent:    #2ECC71;
  --gold:      #FFD700;
  --dark:      #120500;
  --wood-dark: #4A1A00;
  --wood-mid:  #6B2D00;
  --board-bg:  #7B3200;
  --cell-bg:   #5A1E00;
  --cell-alt:  #6A2800;
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%;
  height:100dvh;   /* FIX: gunakan dynamic viewport height untuk iOS Safari */
  overflow:hidden; /* body harus hidden agar scroll terjadi di dalam #screen-map/#screen-game */
}

body {
  font-family:'Nunito',sans-serif;
  background:radial-gradient(ellipse at 30% 20%, #3A1000 0%, #120500 60%),
             radial-gradient(ellipse at 70% 80%, #1A0800 0%, #120500 60%);
  min-height:100vh;
  overflow:hidden; /* game screen needs this — scroll handled per-screen below */
  -webkit-font-smoothing:antialiased;
  color:#fff;
}

/* ── Screens ── */
/* MAP: scrollable | GAME: tidak scroll */
#screen-map {
  width:100%; max-width:480px;
  height:100vh; height:100dvh;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
#screen-game {
  width:100%; max-width:480px;
  height:100vh; height:100dvh;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
  position:relative;
}

/* Batik bg pattern */
#screen-map::before, #screen-game::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(213,60,10,0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(245,166,35,0.07) 0%, transparent 45%);
  pointer-events:none;
  z-index:0;
}


/* ════════════════════════════════════════
   MAP SCREEN
════════════════════════════════════════ */
.map-header {
  position:relative;
  z-index:10;
  width:100%;
  padding:14px 16px 10px;
  background:linear-gradient(180deg, rgba(74,26,0,0.95) 0%, transparent 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(245,166,35,0.2);
}

.map-logo { display:flex; align-items:center; gap:12px; }
.logo-img {
  height: 60px;      /* atur sesuai kebutuhan */
  max-width: 220px;  /* biar tidak kepanjangan */
  object-fit: contain;
}
.logo-icon { font-size:2.2rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.logo-title {
  font-family:'Fredoka One',cursive;
  font-size:1.7rem;
  color:var(--secondary);
  text-shadow:2px 2px 0 var(--primary), 4px 4px 0 rgba(0,0,0,0.3);
  line-height:1;
}
.logo-sub {
  font-size:.65rem;
  color:rgba(255,220,150,0.6);
  text-transform:uppercase;
  letter-spacing:2.5px;
  margin-top:2px;
}

.btn-mute {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  font-size:1.1rem;
  padding:7px 10px;
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
}
.btn-mute:hover { background:rgba(255,255,255,.2); }

.map-container {
  position:relative;
  z-index:10;
  width:100%;
  padding:10px 14px 40px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
}

/* Lives row on map */
.map-lives {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 0 2px;
}
.map-lives span { font-size:1.05rem; transition:all .3s; }
.map-lives .lost { filter:grayscale(1) opacity(.3); transform:scale(.85); }
.map-life-timer {
  font-size:.72rem;
  color:rgba(255,220,150,.75);
  margin-left:8px;
  font-weight:700;
}
.map-life-full {
  font-size:.72rem;
  color:var(--accent);
  margin-left:8px;
  font-weight:700;
}

/* Episode blocks */
.episode-block {
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  overflow:visible; /* FIX: jangan clip circles level node! */
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}

.episode-banner {
  background:linear-gradient(135deg, var(--ep-color,#7A1E00), rgba(0,0,0,.6));
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:2px solid rgba(245,166,35,.25);
  border-radius:20px 20px 0 0; /* top corners rounded, no overflow:hidden needed */
  overflow:hidden;
}
.ep-icon { font-size:1.8rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ep-name {
  font-family:'Fredoka One',cursive;
  font-size:1.15rem;
  color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.ep-levels {
  font-size:.65rem;
  color:rgba(255,220,150,.6);
  text-transform:uppercase;
  letter-spacing:2px;
}

.episode-nodes {
  display:flex;
  gap:8px;
  padding:16px 12px 28px; /* FIX: bottom padding supaya circle tidak terpotong */
  justify-content:center;
  flex-wrap:wrap;
  background:rgba(0,0,0,.12);
  border-radius:0 0 20px 20px;
}

/* Level node */
.level-node {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  transition:transform .15s;
}
.level-node:hover:not(.locked) { transform:translateY(-3px); }
.level-node:active:not(.locked) { transform:translateY(0); }

.node-stars { display:flex; gap:1px; }
.nstar { font-size:.72rem; line-height:1; color:rgba(255,255,255,.3); }
.nstar.earned { color:var(--gold); filter:drop-shadow(0 0 4px rgba(255,215,0,.8)); }

.node-circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--secondary), var(--primary));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fredoka One',cursive;
  font-size:1.25rem;
  color:#fff;
  box-shadow:0 4px 14px rgba(213,60,10,.4), inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;
  border:2px solid rgba(255,200,100,.35);
}
.level-node.locked .node-circle {
  background:linear-gradient(135deg,#3A3A3A,#222);
  box-shadow:none;
  border-color:rgba(255,255,255,.1);
  font-size:1rem;
}
.level-node.current .node-circle {
  animation:pulseNode 1.5s ease-in-out infinite;
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(255,215,0,.4), 0 0 20px rgba(255,215,0,.3);
}
.level-node.perfect .node-circle {
  background:linear-gradient(135deg, var(--gold), #FFA500);
  box-shadow:0 4px 14px rgba(255,215,0,.5);
}
.node-badge {
  position:absolute;
  bottom:-3px; right:-3px;
  font-size:.68rem;
  background:rgba(0,0,0,.65);
  border-radius:50%;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
}

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


/* ════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════ */
.game-topbar {
  position:relative;
  z-index:10;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 4px;
}
.btn-back {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-size:1.1rem;
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
}
.btn-back:hover { background:rgba(255,255,255,.2); }

.stats-bar {
  flex:1;
  display:flex;
  gap:7px;
  justify-content:flex-end;
}
.stat-card, .level-badge {
  backdrop-filter:blur(10px);
  border-radius:13px;
  padding:6px 11px;
  text-align:center;
  min-width:58px;
  position:relative;
  overflow:hidden;
}
.stat-card {
  background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
}
.stat-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--secondary),transparent);
}
.level-badge {
  background:linear-gradient(135deg, var(--primary), #E84A1A);
  border:1px solid rgba(255,150,50,.4);
  box-shadow:0 3px 12px rgba(213,60,10,.35);
}
.stat-label {
  font-size:.55rem;
  color:rgba(255,220,150,.6);
  text-transform:uppercase;
  letter-spacing:1.8px;
  display:block;
}
.stat-value {
  font-family:'Fredoka One',cursive;
  font-size:1.3rem;
  color:#fff;
  line-height:1.1;
  display:block;
  transition:transform .15s;
}
.stat-value.pop { transform:scale(1.35); color:var(--gold); }

/* Objective panel */
.obj-panel {
  position:relative;
  z-index:10;
  width:100%;
  max-width:460px;
  padding:3px 14px 1px;
  font-size:.78rem;
  color:rgba(255,220,150,.85);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  min-height:24px;
}
.obj-type { font-weight:700; }
.obj-type b { color:#fff; }
.obj-progress { color:rgba(255,220,150,.75); font-weight:600; }
.jelly-prog { color:rgba(255,100,80,1); font-weight:700; }
.sambal-prog {
  color:rgba(255,80,50,1);
  font-weight:800;
  text-shadow:0 0 8px rgba(255,60,30,.5);
}
.sambal-intro-obj {
  border-color:rgba(220,50,20,.45) !important;
  color:rgba(255,180,160,.95) !important;
}
.obj-collect-row { display:flex; gap:8px; align-items:center; }
.collect-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  transition:all .2s;
}
.collect-item.done { opacity:.45; }
.collect-emoji { font-size:1.1rem; }
.collect-count { font-size:.62rem; font-weight:800; color:rgba(255,220,150,.9); }

/* Lives bar */
.lives-bar {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  gap:3px;
  padding:2px 14px 3px;
}
.life-icon {
  font-size:.95rem;
  transition:all .3s;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.life-icon.lost { filter:grayscale(1) opacity(.3); transform:scale(.8); }
.life-timer { font-size:.68rem; color:rgba(255,220,150,.65); margin-left:5px; font-weight:700; }

/* Board */
.board-wrapper { position:relative; z-index:10; padding:4px; }

.board-frame {
  background:linear-gradient(160deg, #8B4513, #4A1800, #6B2D00);
  border-radius:22px;
  padding:7px;
  box-shadow:
    0 18px 55px rgba(0,0,0,.65),
    0 0 0 3px rgba(245,166,35,.28),
    0 0 0 6px rgba(140,60,0,.35),
    inset 0 2px 4px rgba(255,255,255,.1);
  position:relative;
}
.board-frame::before, .board-frame::after {
  content:'✦';
  position:absolute;
  font-size:1.1rem;
  color:rgba(245,166,35,.35);
  pointer-events:none;
}
.board-frame::before { top:4px; left:8px; }
.board-frame::after  { bottom:4px; right:8px; }

#board {
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:3px;
  background:var(--board-bg);
  border-radius:14px;
  padding:5px;
  box-shadow:inset 0 4px 15px rgba(0,0,0,.45);
  width:min(400px, 94vw);
  aspect-ratio:1;
  touch-action:none;
  user-select:none;
}

/* Cell */
.cell {
  aspect-ratio:1;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  background:var(--cell-bg);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.35);
  overflow:hidden;
  transition:transform .08s;
}
.cell:nth-child(even) { background:var(--cell-alt); }
.cell::after {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);
  border-radius:10px 10px 0 0;
  pointer-events:none;
  z-index:10;
}
.cell:hover        { transform:scale(1.07); z-index:2; }
.cell.selected {
  background:rgba(255,215,0,.28) !important;
  box-shadow:0 0 0 3px var(--gold), 0 0 18px rgba(255,215,0,.5), inset 0 2px 3px rgba(255,255,255,.2);
  transform:scale(1.12);
  z-index:3;
}
.cell.hint     { animation:hintPulse .5s ease-in-out 2; }
.cell.matching { animation:matchPop .3s ease forwards; }
.cell.falling  { animation:fallIn .28s cubic-bezier(.34,1.56,.64,1); }
.cell.swapping { transition:transform .15s cubic-bezier(.25,.46,.45,.94); }

.tile-emoji {
  font-size:clamp(1rem, 3.8vw, 1.5rem);
  line-height:1;
  position:relative;
  z-index:4;
  pointer-events:none;
}

/* ── Special tile styles ── */
.cell[data-special]::before {
  content:'';
  position:absolute;
  inset:3px;
  border-radius:8px;
  pointer-events:none;
  z-index:5;
}
.cell[data-special="striped_h"]::before {
  background:linear-gradient(180deg,transparent 32%,rgba(255,255,255,.35) 32%,rgba(255,255,255,.35) 68%,transparent 68%);
  border:1px solid rgba(255,255,255,.3);
}
.cell[data-special="striped_v"]::before {
  background:linear-gradient(90deg,transparent 32%,rgba(255,255,255,.35) 32%,rgba(255,255,255,.35) 68%,transparent 68%);
  border:1px solid rgba(255,255,255,.3);
}
.cell[data-special="wrapped"]::before {
  background:radial-gradient(circle,rgba(255,200,50,.45) 25%,transparent 70%);
  box-shadow:inset 0 0 0 2px rgba(255,200,50,.5);
  animation:wrappedPulse 1.2s ease-in-out infinite;
}
.cell[data-special="colorbomb"] { animation:rainbowGlow 2s linear infinite; }
.cell[data-special="colorbomb"]::before {
  background:conic-gradient(from 0deg,
    rgba(255,80,80,.4),rgba(255,200,0,.4),rgba(80,255,100,.4),
    rgba(80,150,255,.4),rgba(200,80,255,.4),rgba(255,80,80,.4));
  border-radius:50%;
  animation:spin 2.5s linear infinite;
}

/* Special glows */
.cell[data-special="striped_h"],
.cell[data-special="striped_v"] {
  box-shadow:inset 0 2px 3px rgba(255,255,255,.1),
             0 0 10px rgba(255,220,100,.4),
             0 0 0 2px rgba(255,220,100,.3) !important;
}
.cell[data-special="wrapped"] {
  box-shadow:inset 0 2px 3px rgba(255,255,255,.1),
             0 0 12px rgba(255,200,50,.5),
             0 0 0 2px rgba(255,200,50,.4) !important;
}
.cell[data-special="colorbomb"] {
  box-shadow:0 0 15px rgba(200,100,255,.5), 0 0 0 2px rgba(200,100,255,.4) !important;
}

/* ── Jelly overlay ── */
.jelly-overlay {
  position:absolute;
  inset:1px;
  border-radius:9px;
  pointer-events:none;
  z-index:6;
}
.jelly-1 {
  border:3px solid rgba(220,60,30,.75);
  background:rgba(220,60,30,.12);
}
.jelly-2 {
  border:4px solid rgba(200,30,10,.95);
  background:rgba(200,30,10,.22);
  box-shadow:inset 0 0 8px rgba(255,80,50,.25), 0 0 6px rgba(220,40,20,.3);
}

/* ── Icing overlay ── */
.icing-overlay {
  position:absolute;
  inset:0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(.9rem,3.2vw,1.3rem);
  pointer-events:none;
  z-index:7;
  backdrop-filter:blur(1px);
}
.icing-1 {
  background:rgba(200,230,255,.52);
  border:2px solid rgba(150,210,255,.72);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.4);
}
.icing-2 {
  background:rgba(180,225,255,.78);
  border:3px solid rgba(110,190,255,.92);
  box-shadow:inset 0 3px 10px rgba(255,255,255,.5), 0 0 8px rgba(140,210,255,.3);
}

/* ── Progress bar ── */
.progress-bar-wrap {
  position:relative; z-index:10;
  width:100%; max-width:460px;
  padding:4px 14px 2px;
  display:flex; align-items:center; gap:8px;
}
.prog-label {
  font-size:.63rem;
  color:rgba(255,220,150,.5);
  white-space:nowrap;
}
.prog-track {
  flex:1; height:10px;
  background:rgba(255,255,255,.08);
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.prog-fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius:10px;
  transition:width .3s ease;
  position:relative;
}
.prog-fill::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:50%;
  background:rgba(255,255,255,.3);
  border-radius:10px;
}
.prog-text {
  font-size:.68rem;
  color:rgba(255,220,150,.7);
  white-space:nowrap;
  min-width:78px;
  text-align:right;
}

/* ── Booster bar ── */
.booster-bar {
  position:relative; z-index:10;
  display:flex; gap:8px;
  padding:4px 14px 8px;
  width:100%; max-width:460px;
}
.booster-btn {
  flex:1;
  background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:8px 8px;
  color:#fff;
  font-family:'Nunito',sans-serif;
  font-size:.72rem; font-weight:700;
  cursor:pointer;
  transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.booster-btn:hover  { background:rgba(255,255,255,.16); transform:translateY(-1px); }
.booster-btn:active { transform:translateY(1px); }
.bcount {
  background:var(--primary);
  border-radius:50%;
  width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:800;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}

/* ── Overlays ── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.83);
  backdrop-filter:blur(12px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.overlay.show { opacity:1; pointer-events:all; }

.overlay-card {
  background:linear-gradient(145deg, #3D1400, #5A2200);
  border:2px solid rgba(245,166,35,.4);
  border-radius:26px;
  padding:30px 26px;
  text-align:center;
  width:320px;
  max-width:90vw;
  box-shadow:0 28px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  transform:scale(.82);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.overlay.show .overlay-card { transform:scale(1); }

/* Intro card */
.intro-card { text-align:left; }
.intro-episode {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:rgba(255,220,150,.6);
  margin-bottom:4px;
}
.intro-level {
  font-family:'Fredoka One',cursive;
  font-size:2rem;
  color:var(--secondary);
  text-shadow:2px 2px 0 var(--primary);
  margin-bottom:12px;
}
.intro-obj {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:8px;
  font-size:.86rem;
  color:rgba(255,220,150,.9);
  line-height:1.5;
}
.intro-obj b { color:#fff; font-size:1rem; }
.intro-tip { font-size:.74rem; color:rgba(190,225,255,.75); padding:3px 0; line-height:1.5; }
.intro-moves {
  font-family:'Fredoka One',cursive;
  color:var(--accent);
  font-size:1rem;
  margin:10px 0 14px;
}

.overlay-emoji { font-size:3.4rem; display:block; margin-bottom:10px; }
.overlay-title {
  font-family:'Fredoka One',cursive;
  font-size:1.9rem;
  color:var(--secondary);
  text-shadow:2px 2px 0 var(--primary);
  margin-bottom:8px;
}
.overlay-msg {
  color:rgba(255,220,150,.8);
  font-size:.9rem;
  margin-bottom:18px;
  line-height:1.5;
}

/* Stars */
.stars-row { display:flex; justify-content:center; gap:6px; margin:8px 0 16px; }
.star {
  font-size:1.85rem;
  filter:grayscale(1) opacity(.3);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.star.earned { filter:drop-shadow(0 0 8px rgba(255,215,0,.8)); transform:scale(1.1); }

/* Buttons */
.btn-primary {
  background:linear-gradient(135deg, var(--primary), #E84A1A);
  color:#fff; border:none;
  border-radius:50px;
  padding:13px 28px;
  font-family:'Fredoka One',cursive;
  font-size:1.1rem;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(213,60,10,.4), inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .15s;
  display:block; width:100%; margin-bottom:9px;
  letter-spacing:.5px;
}
.btn-primary.wide { font-size:1.25rem; padding:14px 28px; }
.btn-primary:hover  { transform:translateY(-2px); box-shadow:0 8px 22px rgba(213,60,10,.5); }
.btn-primary:active { transform:translateY(1px); }

.btn-secondary {
  background:transparent;
  color:rgba(255,220,150,.7);
  border:1px solid rgba(255,220,150,.3);
  border-radius:50px;
  padding:9px 18px;
  font-family:'Nunito',sans-serif;
  font-size:.86rem; font-weight:600;
  cursor:pointer; transition:all .15s;
  display:block; width:100%; margin-bottom:8px;
}
.btn-secondary:hover { background:rgba(255,255,255,.06); }

/* Combo display */
.combo-display {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:'Fredoka One',cursive;
  font-size:2.7rem; color:#fff;
  text-shadow:3px 3px 0 var(--primary), 0 0 28px rgba(255,100,0,.8);
  z-index:200; pointer-events:none; opacity:0;
}
.combo-display.show { animation:comboAnim .65s cubic-bezier(.34,1.56,.64,1) forwards; }

/* VFX */
.score-popup {
  position:fixed; pointer-events:none;
  font-family:'Fredoka One',cursive; font-size:1.35rem;
  color:var(--gold); text-shadow:2px 2px 0 rgba(0,0,0,.5);
  z-index:100; animation:scoreFloat .85s ease forwards;
}
.score-popup.big { font-size:2rem; color:#FF6B35; }

.particle {
  position:fixed; pointer-events:none;
  border-radius:50%; z-index:50;
  animation:particleFly .85s ease-out forwards;
}


/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
@keyframes hintPulse {
  0%,100% { box-shadow:0 0 0 2px rgba(255,255,255,.2); }
  50%      { box-shadow:0 0 0 3px rgba(255,215,0,.8), 0 0 14px rgba(255,215,0,.5); }
}
@keyframes matchPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.3); filter:brightness(2) saturate(2); }
  100% { transform:scale(0); opacity:0; }
}
@keyframes fallIn {
  0%   { transform:translateY(-45px) scale(.65); opacity:0; }
  100% { transform:translateY(0)     scale(1);   opacity:1; }
}
@keyframes rainbowGlow {
  0%   { filter:hue-rotate(0deg)   brightness(1.2); }
  100% { filter:hue-rotate(360deg) brightness(1.2); }
}
@keyframes wrappedPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}
@keyframes spin {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes scoreFloat {
  0%   { transform:translateY(0)     scale(1);   opacity:1; }
  100% { transform:translateY(-70px) scale(1.2); opacity:0; }
}
@keyframes comboAnim {
  0%   { transform:translate(-50%,-50%) scale(.3);  opacity:0; }
  50%  { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
  80%  { transform:translate(-50%,-50%) scale(1);   opacity:1; }
  100% { transform:translate(-50%,-50%) scale(.8);  opacity:0; }
}
@keyframes particleFly {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-7px) rotate(-1deg); }
  40%      { transform:translateX(7px)  rotate(1deg); }
  60%      { transform:translateX(-5px); }
  80%      { transform:translateX(5px); }
}
.shake { animation:shake .35s ease; }
.board-frame.flash { animation:boardFlash .35s ease; }
@keyframes boardFlash {
  50% {
    box-shadow:0 18px 55px rgba(0,0,0,.65),
               0 0 0 4px rgba(255,215,0,.7),
               0 0 40px rgba(255,215,0,.35);
  }
}


/* ════════════════════════════════════════
   ACCOUNT OVERLAY
════════════════════════════════════════ */
.account-overlay { z-index:1500; }

.account-card {
  padding:0;
  overflow:hidden;
  max-width:340px;
  width:92vw;
  background:linear-gradient(160deg,#1A0800,#2E1000);
  border:2px solid rgba(245,166,35,.3);
}

.account-header {
  text-align:center;
  padding:20px 20px 14px;
  background:linear-gradient(135deg,rgba(213,60,10,.2),rgba(0,0,0,.3));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.account-icon   { font-size:2rem; margin-bottom:4px; }
.account-title  {
  font-family:'Fredoka One',cursive;
  font-size:1.3rem;
  color:var(--secondary);
  margin-bottom:4px;
}
.account-subtitle {
  font-size:.75rem;
  color:rgba(255,220,150,.6);
  line-height:1.4;
}

/* Tabs */
.account-tabs {
  display:flex;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.acc-tab {
  flex:1; padding:10px; font-size:.85rem; font-weight:700;
  background:transparent; border:none; color:rgba(255,255,255,.45);
  cursor:pointer; transition:all .2s; font-family:'Nunito',sans-serif;
}
.acc-tab.active {
  color:#fff;
  background:rgba(213,60,10,.25);
  border-bottom:2px solid var(--accent);
}

/* Panels */
.acc-panel { padding:16px 18px 10px; }

.acc-field {
  margin-bottom:12px;
}
.acc-field label {
  display:block; font-size:.75rem; font-weight:700;
  color:rgba(255,220,150,.7); margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.5px;
}
.acc-field input {
  width:100%; padding:10px 12px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:10px;
  color:#fff; font-size:.95rem;
  font-family:'Nunito',sans-serif;
  outline:none; transition:border-color .2s;
}
.acc-field input:focus { border-color:rgba(245,166,35,.6); }
.acc-field input::placeholder { color:rgba(255,255,255,.25); }
.acc-hint {
  display:block; font-size:.68rem;
  color:rgba(255,255,255,.3); margin-top:3px;
}

.acc-error {
  min-height:18px;
  font-size:.78rem;
  color:#FF6B6B;
  font-weight:700;
  margin-bottom:8px;
  text-align:center;
}

.wide { width:100%; }

.acc-cancel {
  width:calc(100% - 36px);
  margin:0 18px 16px;
  font-size:.78rem;
  opacity:.6;
}
.acc-cancel:hover { opacity:.9; }


.map-account-badge {
  width:100%; max-width:480px;
  padding:6px 16px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.78rem;
  color:rgba(255,220,150,.8);
  display:flex; align-items:center; gap:6px;
}
.map-account-badge b { color:#fff; }
.acc-logout-btn {
  margin-left:auto;
  background:rgba(255,80,50,.18);
  border:1px solid rgba(255,80,50,.35);
  color:rgba(255,150,130,.9);
  border-radius:8px; padding:2px 8px;
  font-size:.72rem; cursor:pointer;
  font-family:'Nunito',sans-serif;
  transition:all .2s;
}
.acc-logout-btn:hover { background:rgba(255,80,50,.35); color:#fff; }


/* ════════════════════════════════════════
   ADS — Banner Peta & Modal Interstitial
════════════════════════════════════════ */
.ads-banner-map {
  width:100%; max-width:480px;
  display:flex; justify-content:center;
  padding:6px 14px 2px;
  min-height:66px;
  background:rgba(0,0,0,.15);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ad-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(14px);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.ad-modal.show { opacity:1; pointer-events:all; }

.ad-modal-card {
  background:linear-gradient(145deg, #1A0800, #3A1400);
  border:2px solid rgba(245,166,35,.35);
  border-radius:22px;
  width:min(360px, 92vw);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  transform:scale(.85);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ad-modal.show .ad-modal-card { transform:scale(1); }

.ad-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ad-modal-title { font-family:'Fredoka One',cursive; font-size:1rem; color:var(--secondary); }
.ad-modal-countdown {
  font-size:.75rem; font-weight:700; color:rgba(255,220,150,.6);
  background:rgba(255,255,255,.07); padding:3px 8px; border-radius:20px;
}
.ad-modal-body {
  padding:10px 12px; min-height:260px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.2);
}
.ad-modal-ins { min-height:250px; width:100%; }
.ad-modal-footer {
  padding:12px 16px 16px;
  display:flex; flex-direction:column; gap:8px;
  border-top:1px solid rgba(255,255,255,.07);
}
.ad-reward-msg { text-align:center; font-size:.82rem; color:rgba(255,220,150,.75); }
.ad-reward-msg b { color:var(--accent); }
.ad-close-btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }
.ad-close-btn.ready { animation:readyPulse .5s ease-in-out 2; }
@keyframes readyPulse {
  0%,100% { box-shadow:0 5px 18px rgba(213,60,10,.4); }
  50%      { box-shadow:0 5px 28px rgba(213,60,10,.8), 0 0 20px rgba(255,100,50,.4); }
}

/* ── Responsive ── */
@media (max-width:400px) {
  .logo-title   { font-size:1.4rem; }
  .node-circle  { width:44px; height:44px; font-size:1.05rem; }
  .overlay-card { padding:22px 18px; }
}
@media (max-height:700px) {
  .board-wrapper { padding:2px; }
  #board { gap:2px; padding:4px; }
  .game-topbar   { padding:6px 12px 2px; }
  .booster-bar   { padding:2px 12px 4px; }
}