:root { --bg:#0e3b34; --fg:#f5efe2; --frame:#d9a441; --frame-dark:#b07e2a; --empty:#0a2e29;
        --red:#e4564d; --yellow:#f4d35e; --accent:#ffffff; --panel:#114138; --line:#1d5045; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
       background:radial-gradient(1200px 600px at 50% -10%, #14564b 0%, var(--bg) 55%); color:var(--fg);
       font-family:Georgia,"Times New Roman",serif; gap:16px; padding:20px; }
h1 { margin:0; font-weight:700; letter-spacing:1px; color:var(--frame); text-shadow:0 2px 0 rgba(0,0,0,.35); }
#status { font-size:1.2rem; min-height:1.5em; font-weight:500; }
#board { background:var(--empty); padding:12px; border-radius:14px; display:grid;
         grid-template-columns:repeat(7,1fr); gap:8px; box-shadow:0 8px 24px rgba(0,0,0,.4);
         position:relative; overflow:hidden; }
.cell { width:62px; height:62px; border-radius:50%; background:var(--empty); cursor:pointer;
        transition:transform .05s; box-shadow:inset 0 3px 6px rgba(0,0,0,.5); }
.cell.red { background:radial-gradient(circle at 35% 30%, #ff897e, var(--red)); }
.cell.yellow { background:radial-gradient(circle at 35% 30%, #fff2c9, var(--yellow)); }
.cell.win { box-shadow:inset 0 0 0 4px var(--accent), inset 0 3px 6px rgba(0,0,0,.5); animation:cfWin 1.1s ease-in-out infinite; }
@keyframes cfWin { 0%,100% { box-shadow:inset 0 0 0 4px var(--accent), inset 0 3px 6px rgba(0,0,0,.5); } 50% { box-shadow:inset 0 0 0 5px var(--accent), 0 0 16px rgba(255,255,255,.5), inset 0 3px 6px rgba(0,0,0,.5); } }
.col-hover { background:#176054 !important; }
/* colored frame sitting in FRONT of the discs, with circular holes punched out */
.frame-layer { position:absolute; top:0; left:0; pointer-events:none; z-index:2; }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
button.btn, select { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:8px;
                     padding:8px 14px; font-size:.95rem; font-family:inherit; cursor:pointer; }
button.btn:hover { background:#17564a; }
.score { display:flex; gap:18px; font-size:.95rem; opacity:.85; }

/* drop animation — gravity free-fall, then bouncy-ball settle.
   Per-keyframe easing: falls accelerate (ease-in), rises decelerate (ease-out). */
.cell.drop { animation:drop .72s linear; }
@keyframes drop {
  0%   { transform:translateY(var(--dy)); animation-timing-function:cubic-bezier(.45,0,.9,.55); }
  46%  { transform:translateY(0);          animation-timing-function:cubic-bezier(.1,.5,.45,1); }
  63%  { transform:translateY(-26px);      animation-timing-function:cubic-bezier(.45,0,.9,.55); }
  77%  { transform:translateY(0);          animation-timing-function:cubic-bezier(.1,.5,.45,1); }
  88%  { transform:translateY(-9px);       animation-timing-function:cubic-bezier(.45,0,.9,.55); }
  95%  { transform:translateY(0);          animation-timing-function:cubic-bezier(.1,.5,.45,1); }
  98%  { transform:translateY(-3px);       animation-timing-function:cubic-bezier(.45,0,.9,.55); }
  100% { transform:translateY(0); }
}
/* If the winning disc is also the one just dropped, run BOTH animations: the
   drop (transform) once AND the win flash (box-shadow) forever — otherwise the
   drop's `animation` shorthand overrides the flash and that tile doesn't pulse. */
.cell.win.drop { animation:drop .72s linear, cfWin 1.1s ease-in-out infinite; }

/* rules modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
                 align-items:center; justify-content:center; padding:20px; z-index:10; }
.modal-overlay.open { display:flex; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:420px;
         padding:24px 26px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.modal h2 { margin:0 0 12px; }
.modal p { line-height:1.55; margin:0 0 18px; opacity:.9; }
.modal .btn { width:100%; }
.modal-overlay.open .modal { animation:cfModalIn 0.3s cubic-bezier(0.2,0.8,0.2,1) both; }
@keyframes cfModalIn { from { opacity:0; transform:translateY(14px) scale(0.97); } to { opacity:1; transform:none; } }
/* mode-select overlay (choose game mode before the game starts) */
.mode-group { margin:0 0 16px; }
.mode-label { font-size:.85rem; opacity:.8; margin-bottom:8px; }
.opts { display:flex; flex-direction:column; gap:8px; }  /* difficulty stacks vertically */
.opt { background:var(--panel); color:var(--fg); border:1px solid var(--line);
       border-radius:8px; padding:9px 12px; font-size:.92rem; font-family:inherit; cursor:pointer; }
.opt:hover { background:#17564a; }
.opt.sel { background:var(--frame); color:var(--bg); border-color:var(--frame); font-weight:700; }
#startGame { width:100%; margin-top:6px; }
#modeModal { background:var(--bg); }   /* opaque start screen — hide game chrome behind it */

@media (max-width:560px){ .cell{ width:42px; height:42px; } }
/* Accessibility: honor prefers-reduced-motion — neutralize animations,
   transitions, and motion effects (pulse, shake, drop, blink, glows). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}