:root{
  --bg:#f6f4ef;
  --cell-size:64px;
  --cols:8;
  --rows:8;
  --gap:6px;
  --panel:#ffffff;
  --muted:#666;
  --accent:#ff6b6b;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
#app{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:12px;}
#hud{width:calc(var(--cell-size) * var(--cols) + var(--gap) * (var(--cols)-1));display:flex;justify-content:space-between;align-items:center}
#hud > *{background:var(--panel);padding:8px 12px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
#timer{font-weight:600}
#modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,0.36);opacity:0;pointer-events:none;transition:opacity .18s}
#modal.open{opacity:1;pointer-events:auto}
.modal-card{background:#fff;padding:16px;border-radius:12px;min-width:280px;max-width:92%;box-shadow:0 12px 40px rgba(0,0,0,0.18);text-align:center}
.modal-card h3{margin:0 0 8px}
#submit-row{display:flex;gap:8px;justify-content:center;margin:8px 0}
#player-name{padding:8px;border-radius:8px;border:1px solid #ddd}
#save-score{background:var(--accent);color:#fff;border-radius:8px;border:0;padding:8px 12px}
.lb-wrap{margin-top:8px;text-align:left}
.lb-wrap ol{padding-left:18px;margin:6px 0}
.modal-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.modal-actions button{padding:8px 10px;border-radius:8px;border:0;background:#eee}
.modal-actions button:first-child{background:var(--accent);color:#fff}

/* Settings modal collapsible section */
.settings-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  margin-bottom:4px;
}
.settings-toggle h3{
  margin:0;
}
.settings-chevron{
  font-size:14px;
  color:var(--muted);
  transition:transform .18s;
}
.settings-toggle.collapsed .settings-chevron{
  transform:rotate(-90deg);
}
.settings-content{
  margin-top:6px;
  display:none;
}
.settings-content.open{
  display:block;
}
.settings-row{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:6px 0;
}
.settings-row button{
  flex:1;
}
.primary-setting{
  background:var(--accent);
  color:#fff;
}

@media (max-height:600px){:root{--cell-size:48px}}

#board{width:calc(var(--cell-size) * var(--cols) + var(--gap) * (var(--cols)-1));height:calc(var(--cell-size) * var(--rows) + var(--gap) * (var(--rows)-1));display:grid;grid-template-columns:repeat(var(--cols),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));gap:var(--gap);touch-action:none;user-select:none;border-radius:12px}
.cell{width:100%;height:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:20px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;transform-origin:center center}
.cell[data-type="0"]{background:#ff6b6b;box-shadow:0 4px 0 #e65555}
.cell[data-type="1"]{background:#ffb74d;box-shadow:0 4px 0 #e69b3a}
.cell[data-type="2"]{background:#ffd54f;box-shadow:0 4px 0 #e6c43a;color:#333}
.cell[data-type="3"]{background:#4db6ac;box-shadow:0 4px 0 #3b9a8f}
.cell[data-type="4"]{background:#64b5f6;box-shadow:0 4px 0 #4a9de0}
.cell.selected{transform:scale(1.08);box-shadow:0 8px 18px rgba(0,0,0,0.15)}
/* Replacement: spin + fade animation for matched removals */
.cell.removing{animation:spinfade .28s cubic-bezier(.2,.9,.2,1) forwards}
.cell.big{box-shadow:0 12px 30px rgba(255,120,80,0.28);transform:scale(1.12)}
.cell.huge{box-shadow:0 18px 46px rgba(255,90,60,0.32);transform:scale(1.16);filter:brightness(1.05) saturate(1.05)}
@keyframes spinfade{
  0%{transform:rotate(0deg) scale(1); opacity:1}
  50%{transform:rotate(180deg) scale(1.08); opacity:0.9}
  100%{transform:rotate(360deg) scale(0.2); opacity:0}
}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;padding:8px 12px;background:#222;color:#fff;border-radius:8px;opacity:0;transition:opacity .18s,transform .18s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
button{font:inherit;border:0;background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px}
@media (max-height:600px){:root{--cell-size:48px}}

/* Bottom bar removed; Shuffle and Tip now live inside the Settings modal */