:root{
  --bg: #F0E0D0;
  --text: #3D2B1F;
  --shadow: 0 10px 25px rgba(0,0,0,.18);
  --radius: 18px;
  --tileRadius: 14px;
  --gap: 5px;
  --boardCols: 6;
  --tileSize: 78px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: url("assets/bg.webp") center top / cover no-repeat;
  background-color: #F0E0D0;
  }
.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  gap: 10px;
}
.left,.center,.right{display:flex; align-items:center; gap:10px}
.timer{
  font-size:20px;
  font-weight:800;
  letter-spacing:.5px;
  text-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.pill{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.25);
  color: #3D2B1F;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.close{
  width:35px; height:35px;
  border-radius: 11px;
  border: 0;
  background: rgba(255,255,255,.92);
  color:#3D2B1F;
  font-size: 22px;
  font-weight: 900;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow);
}

/* UI icons (SVG) */
.ui-icon{
  width: 24px;
  height: 24px;
  display:block;
}

.close .ui-icon{
  width: 16px;
  height: 16px;
}
.coin .ui-icon{
  width: 18px;
  height: 18px;
}

.crown-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius: 999px;
  flex: 0 0 auto;
}

.bubble-row.coins .crown-circle{
  width: 44px;
  height: 44px;
}
.bubble-row.coins .crown-circle .ui-icon{
  width: 28.8px;
  height: 28.8px;
}

.overlay .crown-circle{
  width: 60px;
  height: 60px;
}
.overlay .crown-circle .ui-icon{
  width: 38.4px;
  height: 38.4px;
}
.label-with-icon{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.inline-icon{display:inline-flex; align-items:center}
.wrap{
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 16px 20px;
}
.hero{
  display:flex;
  justify-content:center;
  margin-top: 4px;
  margin-bottom: 8px;
}
.mascot{
  position: relative;
  width: 100%;
  min-height: 140px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.bubble{
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.bubble-row{display:flex; gap: 10px; justify-content:center; align-items:center}
.chip{
  width: 52px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.10);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.bubble-row.coins{
  margin-top: 8px;
  font-weight: 900;
  font-size: 18px;
}
.bubble-row.coins #coins{
  font-size: 20px; /* +2px */
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.coin{display:inline-flex; align-items:center}
.hud{
  /* HUD-панель (Счет/Комбо/Ходы) скрыта по запросу */
  display:none;
  justify-content:space-between;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat{font-size: 14px; opacity: .95}
.stat strong{font-size: 16px}
.board-card{
  position:relative;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 14px;
  box-shadow: var(--shadow);

  overflow: hidden;
  isolation: isolate;
}
.board{
  display:grid;
  grid-template-columns: repeat(var(--boardCols), var(--tileSize));
  grid-auto-rows: var(--tileSize);
  gap: var(--gap);
  justify-content:center;
  user-select:none;
  touch-action: none;

  overflow: hidden;
  border-radius: 18px;
}
.tile{
  position:relative;
  width: var(--tileSize);
  height: var(--tileSize);
  border-radius: var(--tileRadius);
  background: #EADDC6;
  border: 1px solid rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 40px;
  box-shadow: none;
  cursor:pointer;
  overflow: hidden;
  --tile-bg: none;
}
.tile::before{
  content:'';
  position:absolute;
  inset: 0;
  background-image: var(--tile-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88% 88%;
  pointer-events:none;
  transform-origin: center;
}
.tile::after{
  content:'';
  position:absolute;
  inset: 0;
  border-radius: var(--tileRadius);
  background: radial-gradient(60px 60px at 30% 25%, rgba(255,255,255,.22) 0%, transparent 65%);
  pointer-events:none;
}
.tile.booster::before{
  animation: boosterPulse 1.05s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes boosterPulse{
  0%{transform: scale(1)}
  40%{transform: scale(1.08)}
  62%{transform: scale(0.98)}
  100%{transform: scale(1)}
}
.tile.selected{
  outline: 4px solid rgba(255,255,255,.85);
  transform: translateY(-1px);
}
.tile.removing{
  /* чуть более плавное и медленное уменьшение при удалении */
  animation: pop 0.24s ease-out forwards;
}
@keyframes pop{
  0%{transform: scale(1); opacity:1}
  55%{transform: scale(.92); opacity:.8}
  /* shrink ~2× stronger before исчезновение (0.31 -> 0.155) */
  100%{transform: scale(0.08); opacity:0}
}
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35);
  border-radius: 26px;
}
.hidden{display:none}
.overlay-card{
  width: min(320px, 92%);
  background: rgba(255,255,255,.95);
  color: #3D2B1F;
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  text-align:center;
}
.overlay-title{font-size: 22px; font-weight: 900; margin-bottom: 6px}
.overlay-sub{opacity:.9; margin-bottom: 12px}
.primary{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  background: #D11600;
  color: white;
  font-weight: 900;
  cursor:pointer;
}
.footer{
  margin-top: 10px;
  font-size: 12px;
  opacity: .92;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.muted{opacity:.8}
code{background: rgba(0,0,0,.15); padding: 2px 6px; border-radius: 8px}
@media (max-width: 380px){
  :root{ --tileSize: 62px; --gap: 8px; }
  .timer{font-size:17px}
  .octo{font-size:76px}
}


/* Effects layer for boosters */
.fx-layer{
  position:absolute;
  inset: 14px;
  pointer-events:none;
  overflow:hidden;
  border-radius: 18px;
}
.fx{
  position:absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%,-50%);
  opacity: 0.0;
}
.fx-splash{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 70%);
  animation: splash 420ms ease-out forwards;
}
.fx-splash .drop,
.fx-fries .crumb{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  opacity: .9;
  animation: burst 420ms ease-out forwards;
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
}
.fx-splash .drop{
  background: rgba(255,255,255,.55);
  filter: blur(.2px);
}
.fx-fries{
  width: 140px;
  height: 140px;
  animation: fries 420ms ease-out forwards;
}
.fx-fries .crumb{
  width: 12px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 215, 90, .92);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
}

@keyframes splash{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.55)}
  15%{opacity:1}
  100%{opacity:0; transform: translate(-50%,-50%) scale(1.15)}
}
@keyframes fries{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.55)}
  15%{opacity:1}
  100%{opacity:0; transform: translate(-50%,-50%) scale(1.1)}
}
@keyframes burst{
  0%{opacity:0; transform: translate(-50%,-50%) rotate(var(--rot))}
  20%{opacity:1}
  100%{opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot))}
}



/* Dot burst (booster explosion particles) */
.fx-dots{
  width: 1px;
  height: 1px;
  opacity: 1;
}
.fx-dots .dot{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(255,255,255);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  filter: saturate(1.25) contrast(1.15);
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  animation: dotBurst 680ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

@keyframes dotBurst{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.45)}
  18%{opacity: var(--a, .85); transform: translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--s, 1))}
}

}


/* Preloader */
.preloader{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(900px 600px at 50% 30%, rgba(255,255,255,.10) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.35) 100%);
  z-index: 9999;
}
.preloader-card{
  width: min(360px, 90%);
  background: rgba(255,255,255,.92);
  color: #3D2B1F;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  text-align:center;
}
.preloader-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.preloader-bar{
  height: 12px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow:hidden;
}
.preloader-fill{
  height: 100%;
  width: 0%;
  background: #D11600;
  border-radius: 999px;
  transition: width 120ms linear;
}
.preloader-meta{
  margin-top: 8px;
  font-weight: 800;
  opacity: .85;
}
.preloader.hidden{display:none}




/* Overlay stats (end screen) */
.overlay-stats{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.ost-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.06);
}
.ost-row span{font-weight: 800; opacity: .85;}
.ost-row strong{font-weight: 900; font-size: 20px;}
.overlay-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
}
.overlay-actions button{
  flex:1;
}


/* Tile plate color override */
.board .tile{background:#EADDC6;}