/* Doodletap game shell: top bar (close, best, pause, help), overlays, toast, legal links.
   Each game sets its own --dt-* colours and fonts on :root. */
:root{
  --dt-ink:#1d2231; --dt-muted:#5a6074; --dt-line:rgba(29,34,49,.28); --dt-chip:rgba(255,253,247,.86);
  --dt-panel:#fffdf7; --dt-scrim:rgba(20,22,32,.55); --dt-accent:#f5a623; --dt-on-accent:#1d1404;
  --dt-display:"Shantell Sans","Trebuchet MS",system-ui,sans-serif; --dt-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --dt-mono:ui-monospace,Menlo,Consolas,monospace;
}
[hidden]{display:none!important}
.dt-bar,.dt-bar *,.dt-over,.dt-over *,.dt-toast,.dt-ad,.dt-ad *{box-sizing:border-box}
.dt-bar{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;pointer-events:none;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.dt-bar > *{pointer-events:auto}
.dt-btn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;margin:0;border:1.5px solid var(--dt-line);
  background:var(--dt-chip);color:var(--dt-ink);cursor:pointer;font:700 17px/1 var(--dt-display);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dt-btn:active{transform:scale(.93)}
.dt-btn:focus-visible,.dt-pill:focus-visible{outline:2.5px solid var(--dt-accent);outline-offset:3px}
.dt-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dt-best{flex:0 1 auto;min-width:0;margin-inline:auto;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--dt-chip);
  border:1.5px solid var(--dt-line);color:var(--dt-ink);font:600 12px/1 var(--dt-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.dt-best b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
.dt-over{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--dt-scrim);
  padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.dt-card{width:min(100%,420px);max-height:100%;overflow:auto;background:var(--dt-panel);color:var(--dt-ink);border:1.5px solid var(--dt-line);border-radius:20px;
  padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);font-family:var(--dt-body)}
.dt-card h2{margin:0;font:700 22px/1.2 var(--dt-display);text-wrap:balance}
.dt-card p{margin:0;color:var(--dt-muted);font-size:14px;line-height:1.45}
.dt-card ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4}
.dt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dt-pill{flex:1 1 140px;min-height:48px;padding:0 16px;border-radius:14px;border:1.5px solid var(--dt-line);background:transparent;color:var(--dt-ink);
  font:700 15px/1.1 var(--dt-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
.dt-pill.primary{background:var(--dt-accent);color:var(--dt-on-accent);border-color:transparent}
.dt-link{color:var(--dt-muted);font-size:14px;text-align:center;flex:1 1 100%}
.dt-tag{font:600 10px/1 var(--dt-mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.12)}
.dt-scores{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}
.dt-scores li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:10px;font:600 14px/1.2 var(--dt-mono)}
.dt-scores li span{color:var(--dt-muted);font-weight:500}
.dt-scores li.me{background:var(--dt-accent);color:var(--dt-on-accent)}
.dt-scores li.me span{color:inherit}
.dt-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:12px;line-height:1.6}
.dt-legal a{color:var(--dt-muted);text-decoration:none}
.dt-legal a:hover{color:var(--dt-ink);text-decoration:underline}
.dt-toast{position:fixed;z-index:70;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  max-width:calc(100% - 32px);padding:9px 14px;border-radius:12px;background:var(--dt-accent);color:var(--dt-on-accent);font:700 14px/1.3 var(--dt-body);text-align:center;transition:opacity .2s,transform .2s}
.dt-toast.on{opacity:1;transform:translate(-50%,0)}
.dt-ad{position:fixed;inset:0;z-index:80;background:#05060d;color:#eaedf6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-family:var(--dt-body)}
.dt-ad .cr{width:min(100%,340px);aspect-ratio:3/4;max-height:56vh;border-radius:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;text-align:left;position:relative;
  background:repeating-linear-gradient(135deg,rgba(111,214,255,.10) 0 14px,rgba(111,214,255,.03) 14px 28px),#0e1530;border:1px solid rgba(111,214,255,.3)}
.dt-ad .cr b{font:700 19px/1.25 var(--dt-display)}
.dt-ad .cr p{margin:0;font-size:13px;color:#a6aec8}
.dt-ad .cnt{position:absolute;top:12px;right:12px;font:600 13px var(--dt-mono);padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.5)}
.dt-ad .bar{width:min(100%,340px);height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.dt-ad .bar i{display:block;height:100%;width:0;background:#6fd6ff}
.dt-ad .btns{display:flex;flex-direction:column;gap:8px;width:min(100%,340px);min-height:100px}
.dt-ad .dt-pill{color:#eaedf6;border-color:rgba(255,255,255,.25)}
.dt-ad .dt-pill.primary{color:#1d1404}
.dt-eyebrow{font:600 11px/1.2 var(--dt-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dt-muted)}
@media (prefers-reduced-motion:reduce){.dt-toast{transition:none}}
.dt-share{margin-top:8px}
.dt-share .dt-pill{text-decoration:none}