:root {
  --green: #0aa34f;
  --green-dark: #02853f;
  --orange: #ff6a00;
  --bg: #f4f5f7;
  --cols: 4;
  --rows: 5;
  /* Brand colors */
  --brand-primary: #9864FF; /* purple */
  --brand-dark: #0C1756;    /* deep navy */
  --brand-contrast: #ffffff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#ffffff; }

#ad-root {
  position: relative;
  width: min(100vw, 420px);
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid #e7e7e7;
  background: white;
}

.brand {
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}
.logo { font-weight: 800; font-size: 24px; letter-spacing: .4px; }
.sub { font-size: 12px; opacity: .9; margin-top: -4px; }
.brand-left { display:flex; flex-direction:column; }

.timer-pill { background: var(--brand-dark); color:#fff; border-radius: 12px; padding:6px 10px; text-align:center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); }
.timer-pill .label { font-size:10px; display:block; opacity:.92; letter-spacing:.2px; }
.timer-pill #timer { display:inline-block; font-weight:800; font-size:22px; background:#fff; color: var(--brand-primary); padding:0 8px; border-radius:8px; margin-top:2px; box-shadow: 0 2px 0 rgba(0,0,0,.1); }

#board-wrap { position: relative; padding: 10px; background: #f0f5f2; }

#start { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index: 1550; background: transparent; transition: opacity .4s ease; }
#start.fade-out { opacity: 0; }
.start-content { width: auto; max-width: 88%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; animation: introPop .6s ease-out both; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.68); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.start-content .title { font-weight: 900; font-size: 26px; color: var(--brand-dark); margin-bottom: 6px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.start-content .subtitle { color: var(--brand-dark); font-weight: 900; font-size: 26px; margin-top: 2px; margin-bottom: 2px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
@keyframes introPop { 0%{ opacity:0; transform: translateY(8px) scale(.98);} 60%{ opacity:1; transform: translateY(0) scale(1.02);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

#grid {
  position: relative;
  width: 100%;
  aspect-ratio: calc(var(--cols) / var(--rows));
  /* Wood-like board background */
  background:
    /* subtle grain */
    repeating-linear-gradient( 25deg, rgba(255,255,255,.06) 0 6px, rgba(0,0,0,.05) 6px 7px),
    linear-gradient(135deg, #d6ae7b 0%, #c48a4a 100%);
  border: 8px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none; /* allow swipe without scrolling */
  box-shadow: inset 0 0 0 1px #cfcfcf;
}

/* Hand guide pointer */
.guide-hand {
  position: absolute;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  transform-origin: 50% 50%;
  transition: top .5s ease, left .5s ease, transform .2s ease, opacity .25s ease;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.25));
}
.guide-hand::before { content: '👆'; }

.cell {
  position: absolute;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, top .15s ease, left .15s ease, opacity .2s ease;
  user-select: none;
  cursor: grab;
}
.cell:active { cursor: grabbing; }
.cell.dragging { z-index: 5; }
.cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 3px solid #d3d3d3;
  border-bottom: 3px solid #d3d3d3;
  pointer-events: none;
  z-index: 0;
}
/* removed target highlight */
.gem {
  width: 92%;
  height: 92%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
  border-radius: 12px;
  transition: transform .15s ease;
}
.gem.processed { width: 100%; height: 100%; background-size: 100% 100%; }
.gem.dragging { position: relative; z-index: 2; pointer-events: none; }
/* clones used during merge animation */
.gem.flying { 
  width: calc(100% / var(--cols) * 0.92); 
  height: calc(100% / var(--rows) * 0.92);
  pointer-events: none;
}

/* Match celebration burst */
.burst { position:absolute; width:0; height:0; pointer-events:none; z-index: 7; }
.burst .spark {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd54f 50%, #ff6a00 100%);
  opacity: 0;
  transform: translate(0,0) scale(.6);
  animation: spark-move .6s ease-out forwards;
}
@keyframes spark-move { from { opacity:1; transform: translate(0,0) scale(.6);} to { opacity:0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1);} }

/* merge pop animation */
.merge-pop { animation: mergepop .35s ease; }
@keyframes mergepop { 0%{transform:scale(0.8);} 60%{transform:scale(1.08);} 100%{transform:scale(1);} }

/* timer pulse when low */
.timer-pill.low #timer { animation: blink 1s ease-in-out infinite; color: var(--brand-primary); }
@keyframes blink { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }

/* simple confetti */
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index: 1002; }
.confetti .piece { position:absolute; width:8px; height:12px; opacity:0.9; transform: translateY(-20px); animation: fall 1.2s ease-out forwards; border-radius:2px; }
@keyframes fall { to { transform: translateY(120% ) rotate(240deg); opacity: 0.1; } }

/* breathe animation for potential matches */
.breathe { animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 0%{ transform: scale(1); } 50%{ transform: scale(1.08); } 100%{ transform: scale(1);} }
.type-tomato  { background-image: url('assets/tomato.svg'); }
.type-egg     { background-image: url('assets/egg.svg'); }
.type-pepper  { background-image: url('assets/pepper.svg'); }

.selected .gem { outline: 4px solid #ff8a00; }
.pop { animation: pop .18s ease; }
@keyframes pop { 50% { transform: scale(1.08); } }
.shake { animation: shake .25s ease; }
@keyframes shake { 20%{transform:translateX(-4px);} 40%{transform:translateX(4px);} 60%{transform:translateX(-2px);} 80%{transform:translateX(2px);} }

/* Pile visuals */
.pile { position: relative; background: none; filter:none; }
.mini {
  position: absolute;
  width: 46%; height: 46%;
  background-size: contain; background-repeat:no-repeat; background-position:center;
  border-radius: 8px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
.mini.pos-0 { top: 4%; left: 6%; }
.mini.pos-1 { top: 4%; right: 6%; }
.mini.pos-2 { bottom: 4%; left: 6%; }
.mini.pos-3 { bottom: 4%; right: 6%; }
.mini.pos-4 { top: 27%; left: 27%; width: 52%; height: 52%; z-index:2; }
.mini.pos-5 { top: 18%; right: 20%; }

/* Specific layout for exactly 3 items: two bottom, one centered top */
.pile-3 .mini { width: 48%; height: 48%; }
.pile-3 .mini.i0 { top: 4%; left: 26%; }   /* top centered */
.pile-3 .mini.i1 { bottom: 4%; left: 4%; } /* bottom left */
.pile-3 .mini.i2 { bottom: 4%; right: 4%; }/* bottom right */

/* Intro hint */
#hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition: opacity .25s ease; z-index: 1500; }
#hint.show { opacity:1; }
.hint-banner { background: rgba(0,0,0,.6); color:#fff; padding:12px 16px; border-radius:8px; text-align:center; width: 85%; font-weight:800; font-size:20px; line-height:1.15; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.hint-line + .hint-line { margin-top: 4px; }

#overlay { position:absolute; inset:0; background: rgba(12,23,86,.45); display:flex; align-items:center; justify-content:center; z-index: 1600; }
#overlay.hidden { display:none; }
.overlay-content { border-radius:0; padding:16px; width:100%; height:100%; text-align:center; position: relative; z-index: 1001; border: none; display:flex; flex-direction:column; align-items:center; justify-content:center; backdrop-filter: blur(4px); gap: 10px; }
/* Default subtle gradient so it’s not flat white */
.overlay-content { 
  background:
    radial-gradient(ellipse at top, rgba(152,100,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
}
#overlay.win .overlay-content {
  background:
    /* shopping cart pattern */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%239864FF' stroke-opacity='.14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14h9l3 18h25l4-10H24'/><circle cx='28' cy='46' r='3'/><circle cx='46' cy='46' r='3'/></g></svg>") 0 0/64px 64px repeat,
    radial-gradient(ellipse at top, rgba(152,100,255,.22), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(12,23,86,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
}
#overlay.lose .overlay-content {
  background:
    /* shopping cart pattern (darker, but subtle) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%230C1756' stroke-opacity='.10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14h9l3 18h25l4-10H24'/><circle cx='28' cy='46' r='3'/><circle cx='46' cy='46' r='3'/></g></svg>") 0 0/64px 64px repeat,
    radial-gradient(ellipse at top, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(245,247,250,.96), rgba(233,236,241,.92));
}
.overlay-content .title { font-size:24px; font-weight:800; margin-bottom:8px; color: var(--brand-dark); }
.overlay-content .scoreline { margin-bottom:10px; font-weight:600; }
.overlay-content .promo-line { font-size:20px; font-weight:800; color: var(--brand-dark); margin: 6px 0 10px; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

.cta-bar { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:10px 12px; border-top:1px solid #e6e6ef; }
.cta { background: var(--brand-primary); color:#fff; font-weight:800; border:none; border-radius:12px; padding:12px 18px; box-shadow: 0 6px 0 #6e44cc; font-size:14px; letter-spacing:.2px; }
.cta:active { transform: translateY(2px); box-shadow: 0 4px 0 #6e44cc; }
.ghost { background:#fff; color:#333; border:2px solid #ddd; border-radius:12px; padding:10px 14px; }
.overlay-content .cta { margin-top: 4px; }
.overlay-content .ghost { margin-top: 6px; }
.brand-mini { display:flex; flex-direction:column; }
.logo.small { font-size:16px; }
.sub.small { font-size:10px; }

/* Utility */
.disabled { pointer-events: none; }
.hidden { display:none !important; }

/* Final visual pulse rings on win */
#final-visual { position: relative; }
#final-visual.pulse::before, #final-visual.pulse::after {
  content: '';
  position: absolute; inset: -10px; border-radius: 50%;
  border: 6px solid rgba(152,100,255,.35);
  animation: ring 1.6s ease-out infinite; opacity: 0;
}
#final-visual.pulse::after { animation-delay: .8s; }
@keyframes ring { 0%{ transform: scale(.7); opacity:.75;} 75%{ opacity:.15;} 100%{ transform: scale(1.25); opacity: 0; } }

/* Sunburst behind the final visual (win) */
.sunburst { position:absolute; width: 220px; height: 220px; border-radius:50%; pointer-events:none; opacity:.18; background: conic-gradient(from 0deg, rgba(152,100,255,.45) 0 6deg, transparent 6deg 18deg); animation: spin 9s linear infinite; filter: blur(.2px); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sparkles around the final visual (win) */
.sparkle2 { position:absolute; width:10px; height:10px; background: radial-gradient(circle at 30% 30%, #fff, #ffd54f 50%, #9864FF 100%); border-radius:50%; pointer-events:none; opacity:0; transform: translate(-50%,-50%) scale(.6); animation: sparkle2 .9s ease-out forwards; box-shadow: 0 0 8px rgba(152,100,255,.5); }
@keyframes sparkle2 { 0%{ opacity:0; transform: translate(var(--sx,0), var(--sy,0)) scale(.4) rotate(0deg);} 20%{opacity:1;} 100%{ opacity:0; transform: translate(var(--tx,0), var(--ty,0)) scale(1) rotate(120deg);} }

/* Orbiting celebratory dots */
.orbit { position:absolute; width:200px; height:200px; pointer-events:none; opacity:.9; animation: spin 7.5s linear infinite; }
.orbit .dot { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, #ffd54f 60%, #9864FF 100%); transform: rotate(var(--a,0deg)) translateY(-90px); box-shadow: 0 0 8px rgba(152,100,255,.45); }
.orbit .dot.small { width:6px; height:6px; opacity:.85; }
.orbit .dot.purple { background: radial-gradient(circle at 30% 30%, #fff, #b28bff 60%, #6e44cc 100%); }
.orbit .dot.gold { background: radial-gradient(circle at 30% 30%, #fff, #ffe082 60%, #ffb300 100%); }

/* Sad rain for lose */
.rain { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index: 1002; }
.rain .drop { position:absolute; width:2px; height:18px; border-radius:1px; background: rgba(12,23,86,.25); animation: drop 1.2s linear infinite; filter: blur(.2px);} 
@keyframes drop { from { transform: translateY(-20px); opacity:.8; } to { transform: translateY(120%); opacity: 0; } }
/* Slight desaturation of visual on lose */
.desat { filter: grayscale(.25) brightness(.95); }

/* CTA Shine effect for win top button */
.cta.shine { position: relative; overflow: hidden; }
.cta.shine::after { content:''; position:absolute; top:-50%; bottom:-50%; left:-30%; width:30%; transform: skewX(-24deg) translateX(-180%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%); animation: shineMove 2.2s ease-in-out infinite; }
@keyframes shineMove { 0%{ transform: skewX(-24deg) translateX(-180%);} 60%{ transform: skewX(-24deg) translateX(260%);} 100%{ transform: skewX(-24deg) translateX(260%);} }