/* ArcadeOwl — Match 3 & Merge shared engine styles (self-contained, no deps). */
:root {
  --ao-bg: #0b0a12;
  --ao-bg2: #15131f;
  --ao-panel: rgba(255, 255, 255, 0.06);
  --ao-panel-line: rgba(255, 255, 255, 0.12);
  --ao-fg: #f5f3ff;
  --ao-muted: #b8b3cc;
  --ao-accent: #ff5db1;
  --ao-accent2: #7c5cff;
  --ao-good: #38e8a0;
  --ao-bad: #ff6b6b;
  --ao-radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, 0.25), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(255, 93, 177, 0.22), transparent 60%),
    var(--ao-bg);
  color: var(--ao-fg);
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  user-select: none; touch-action: manipulation;
}
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.ao-hud {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--ao-panel-line); backdrop-filter: blur(6px);
}
.ao-title { font-weight: 800; font-size: clamp(13px, 2.6vw, 18px); letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.ao-title b { color: var(--ao-accent); }
.ao-stat { text-align: center; line-height: 1; padding: 4px 10px; border-radius: 10px;
  background: var(--ao-panel); border: 1px solid var(--ao-panel-line); min-width: 52px; }
.ao-stat .k { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ao-muted); }
.ao-stat .v { display: block; font-size: clamp(13px, 2.8vw, 18px); font-weight: 800; margin-top: 3px; }
.ao-btn { cursor: pointer; border: 1px solid var(--ao-panel-line); background: var(--ao-panel);
  color: var(--ao-fg); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: 13px; }
.ao-btn:hover { border-color: var(--ao-accent); }
.ao-btn.primary { background: linear-gradient(135deg, var(--ao-accent), var(--ao-accent2)); border: none; color: #fff; }
.ao-stage { flex: 1 1 auto; position: relative; display: grid; place-items: center; padding: 12px; min-height: 0; }
.ao-board { position: relative; touch-action: none; }
.ao-canvas { display: block; border-radius: var(--ao-radius); }
.ao-cell { position: absolute; display: grid; place-items: center; border-radius: 12px;
  transition: transform .14s ease, opacity .14s ease, box-shadow .12s ease; will-change: transform; cursor: pointer; }
.ao-tile-face { width: 86%; height: 86%; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25); }
.ao-tile-emoji { font-size: 1.5em; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.ao-sel { box-shadow: 0 0 0 3px var(--ao-accent), 0 0 18px var(--ao-accent); z-index: 5; }
.ao-hint { animation: ao-pulse 1s ease-in-out infinite; }
@keyframes ao-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }
.ao-pop { animation: ao-pop .18s ease forwards; }
@keyframes ao-pop { to { transform: scale(0); opacity: 0; } }
.ao-overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 30;
  background: rgba(8,6,16,.72); backdrop-filter: blur(4px); text-align: center; padding: 16px; }
.ao-card { background: linear-gradient(160deg, var(--ao-bg2), #0d0b16); border: 1px solid var(--ao-panel-line);
  border-radius: 18px; padding: 22px 22px; max-width: 360px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ao-card h2 { margin: 0 0 6px; font-size: 24px; }
.ao-card p { margin: 4px 0; color: var(--ao-muted); }
.ao-card .big { font-size: 40px; font-weight: 900; margin: 6px 0;
  background: linear-gradient(135deg, var(--ao-accent), var(--ao-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ao-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.ao-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 20;
  background: rgba(0,0,0,.55); border: 1px solid var(--ao-panel-line); padding: 6px 14px; border-radius: 999px;
  font-weight: 800; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; }
.ao-toast.show { opacity: 1; transform: translateX(-50%) translateY(4px); }
.ao-aim { position: absolute; pointer-events: none; }
.ao-foot { flex: 0 0 auto; text-align: center; font-size: 11px; color: var(--ao-muted);
  padding: 5px; border-top: 1px solid var(--ao-panel-line); }
.ao-foot a { color: var(--ao-muted); text-decoration: none; }
.ao-combo { position: absolute; z-index: 15; font-weight: 900; pointer-events: none;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); animation: ao-float .7s ease forwards; }
@keyframes ao-float { from { opacity: 0; transform: translateY(8px) scale(.8);} 20%{opacity:1;} to { opacity: 0; transform: translateY(-28px) scale(1.1);} }