/* Drop & Merge - one screen, canvas-first. Dark plum so the fruit colours pop. */
:root {
  --bg: #1a1226; --bg2: #241a33; --line: #3a2b50; --text: #f4eefb; --muted: #b4a3c8;
  --gold: #ffce4d; --accent: #ff6b7d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(120% 80% at 50% 0%, #2a1d3d 0%, var(--bg) 60%);
  color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; touch-action: manipulation;
  display: flex; flex-direction: column;
}
.appbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.22);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .2px; }
.brand-ball { font-size: 20px; }
.brand-name { font-size: 17px; }
.icon-btn, .install-btn {
  margin-left: auto; background: var(--bg2); color: var(--text); border: 1px solid var(--line);
  border-radius: 11px; padding: 7px 11px; font-size: 15px; cursor: pointer;
}
.install-btn { margin-left: 8px; font-weight: 700; font-size: 13px; }
.hidden { display: none !important; }
main { flex: 1; display: flex; min-height: 0; }
.view { flex: 1; display: flex; min-height: 0; }
.wrap {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px;
  min-height: 0; max-width: 520px; margin: 0 auto; width: 100%;
}

.hud { display: flex; align-items: center; gap: 10px; }
.hud-box { flex: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; padding: 7px 12px; }
.hud-box .lab, .nextbox .lab { display: block; font-size: 10px; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.hud-box b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-box:last-of-type { text-align: right; }
.nextbox {
  display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 13px; padding: 5px 9px 3px;
}
.nextbox canvas { width: 38px; height: 38px; display: block; }
.nextbox.dim { opacity: .35; }

.modebar { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.modebar.idle { visibility: hidden; }
.mchip { background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.mtime { font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--gold); }
.mtime.low { color: var(--accent); animation: tick .5s ease-in-out infinite alternate; }
@keyframes tick { to { opacity: .45; } }
.mpause { margin-left: auto; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; width: 40px; height: 30px; font-size: 11px; cursor: pointer; }

.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.stage canvas { display: block; border-radius: 14px; touch-action: none; max-width: 100%; max-height: 100%; }
/* belt and braces: nothing in this game may ever scroll sideways */
body, .wrap { overflow-x: hidden; }

.ladder { display: flex; align-items: center; justify-content: center; gap: 1px; flex-wrap: wrap; }
.rung { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; }
.rung canvas { display: block; width: 26px; height: 26px; }
.rung.hit canvas { animation: pop .42s ease; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(2.1); } 100% { transform: scale(1); } }
.ladder .arrow { color: var(--line); font-size: 11px; }

.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(14,9,22,0.84); backdrop-filter: blur(3px); border-radius: 14px; padding: 14px;
}
.panel { text-align: center; max-width: 330px; }
.panel .big { font-size: 27px; font-weight: 900; margin-bottom: 8px; }
.panel p { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.panel .tip { font-size: 12px; margin-top: 12px; margin-bottom: 0; }
.panel .tip a { color: inherit; }
.pbest { font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
.pbest b { color: var(--gold); font-size: 20px; margin-left: 6px; }
.finalscore { margin: 4px 0 10px; }
.finalscore b { display: block; font-size: 46px; font-weight: 900; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.finalscore span { font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.best-line { color: var(--gold) !important; font-weight: 700; }
.btn {
  display: block; width: 100%; margin: 8px 0 0; padding: 14px 18px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #ff8f9d, var(--accent)); color: #2a0a11;
  font: 800 16px/1 system-ui, sans-serif; cursor: pointer;
}
.btn.secondary { background: var(--bg2); color: var(--text); border: 1px solid var(--line); }
.btn.reward { background: linear-gradient(180deg, #ffe08a, var(--gold)); color: #2a1a05; }
.btn small { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; opacity: .75; }
.kick { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
/* the ways to play: two to a row, the daily jar across the bottom */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.mode { display: flex; flex-direction: column; gap: 2px; text-align: left; background: rgba(36,26,51,.94); color: var(--text); border: 1px solid var(--line); border-radius: 13px; padding: 9px 10px 8px; font: inherit; cursor: pointer; min-height: 74px; }
.mode b { font-size: 15px; font-weight: 900; }
.mode small { font-size: 11px; line-height: 1.25; color: var(--muted); flex: 1; }
.mode em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.mode.m-classic { border-color: var(--accent); }
.mode.m-hard b { color: #ff8f6b; } .mode.m-rush b { color: var(--gold); } .mode.m-zen b { color: #8fd6c0; } .mode.m-daily b { color: #b794ff; }
.mode.m-daily { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 10px; }
.mode.m-daily small { flex: 1; }
.mode:active { transform: translateY(1px); }
.panel .lead { margin-bottom: 4px; }
/* the first jar: how to drop, where the clock would be */
.mtime.coach { font-size: 13px; font-weight: 800; color: var(--text); background: rgba(255, 206, 77, 0.16); border: 1px solid rgba(255, 206, 77, 0.5); border-radius: 999px; padding: 3px 11px; animation: tick .7s ease-in-out infinite alternate; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.btn.small { padding: 10px 8px; font-size: 13.5px; margin: 0; }
.overlay.home .row2 .btn.small.secondary { padding: 10px 8px; font-size: 13.5px; box-shadow: none; }
.overlay.home .row2 .btn.small.secondary:active { transform: translateY(1px); box-shadow: none; }
.deeds-new { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 6px 0 8px; }
.deeds-new span { background: linear-gradient(180deg, #ffe08a, var(--gold)); color: #2a1a05; font-weight: 800; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.streak { color: var(--gold) !important; font-weight: 700; }
.panel.wide { max-width: 372px; width: 100%; max-height: 100%; overflow-y: auto; padding: 4px 2px; }
.recgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 6px 0; }
.recgrid span, .recrow span { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px; font-size: 10.5px; color: var(--muted); display: flex; flex-direction: column; align-items: center; }
.recgrid b, .recrow b { font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }
.recgrid small { font-size: 9.5px; opacity: .8; }
.recrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 0 0 8px; }
.recrow b { color: var(--text); }
.met { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-bottom: 8px; }
.met span { display: inline-flex; flex-direction: column; align-items: center; width: 56px; opacity: .35; }
.met span.on { opacity: 1; }
.met canvas { width: 30px; height: 30px; }
.met span:not(.on) canvas { filter: brightness(0); }
.met small { font-size: 9px; color: var(--muted); }
.deedlist { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 4px; text-align: left; }
.deedlist div { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; opacity: .5; }
.deedlist div.on { opacity: 1; border-color: var(--gold); }
.deedlist b { display: block; font-size: 12px; }
.deedlist div.on b { color: var(--gold); }
.deedlist small { font-size: 10.5px; color: var(--muted); line-height: 1.25; display: block; }
.help ol { text-align: left; padding-left: 20px; margin: 4px 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.help li { margin: 5px 0; }
.btn:active { transform: translateY(1px); }
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100%; height: 100%; }
@media (max-width: 360px) { .hud-box b { font-size: 19px; } .panel .big { font-size: 23px; } }

/* screen transitions (js/fx.js FX.watch): `translate` rather than `transform`, so elements that
   centre themselves with a transform are never disturbed */
.fx-enter > * { animation: fxEnter .24s cubic-bezier(.2, .8, .3, 1); }
@keyframes fxEnter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .fx-enter > * { animation: none; } }

/* keyboard focus: a ring you can actually see, on every focusable thing (a11y pass) */
:focus-visible { outline: 3px solid #ffd24d; outline-offset: 2px; border-radius: 6px; }
canvas:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) { :focus-visible { transition: outline-offset .1s; } }

/* ---- the front page: the jar plays itself behind a see-through panel ---- */
.overlay.home { backdrop-filter: none; align-items: flex-start; padding: 0;
  background: linear-gradient(180deg, rgba(14,9,22,.95) 0%, rgba(14,9,22,.92) 74%, rgba(14,9,22,.45) 87%, rgba(14,9,22,0) 97%); }
.overlay.home .panel { padding: 20px 14px 0; max-width: 360px; width: 100%; }
.logo { font: 900 40px/1 system-ui, sans-serif; letter-spacing: -.02em; color: #fff; margin-bottom: 8px;
  text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 26px rgba(255,107,125,.5); }
.logo span { color: var(--gold); }
.overlay.home .btn:first-of-type { padding: 17px 18px; font-size: 18px; box-shadow: 0 6px 0 #b83a4d, 0 14px 26px rgba(255,107,125,.25); }
.overlay.home .btn:first-of-type:active { transform: translateY(4px); box-shadow: 0 2px 0 #b83a4d; }