/* ============================================================
   Follower Run - bright cartoon arcade.
   Chunky dark outlines, hard offset shadows, candy accents.
   Rows: topbar / hud / stage (fills) / footbar. Nothing scrolls.
   ============================================================ */

:root{
  /* --- ink & paper --- */
  --ink:#2c1a42;                 /* outlines + body text */
  --ink-2:#4a3266;
  --muted:#6f5a8c;
  --dim:#8b78a5;
  --cream:#fff6e8;               /* panel face */
  --cream-2:#ffeccf;
  --line:#2c1a42;

  /* --- candy --- */
  --pink:#ff4d79;
  --yellow:#ffc531;
  --green:#3fd36b;
  --sky:#45bdf0;
  --orange:#ff8c42;
  --grape:#9b5de5;

  /* Darker twins of the candy colours, for text on cream. The bright
     ones are for fills; they do not carry enough contrast as type. */
  --pink-ink:#d62b5c;
  --orange-ink:#c25c0d;
  --grape-ink:#7636bd;
  --green-ink:#178a42;
  --sky-ink:#1683b5;

  /* Chunky UI face. Baloo 2 replaced Pixelify here because pixel digits
     (8 vs 2 vs 5) are unreadable at HUD size. */
  --display:"Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Pixelify is kept for the wordmark only, where it is the signature. */
  --logo:"Pixelify Sans", ui-monospace, monospace;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r:16px; --r-sm:11px;
  --bw:3px;                      /* the signature outline weight */
  --pop:0 4px 0 var(--ink);      /* hard cartoon shadow */
  --pop-lg:0 6px 0 var(--ink);

  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}

/* The page itself is a landscape: sky, sunburst, drifting clouds, a
   and hills along the bottom. All inline SVG data URIs, so it
   costs no extra requests. */
body{
  margin:0;
  overflow:hidden;                       /* the page itself never scrolls */
  color:var(--ink);
  font-family:var(--body);
  font-size:17px; line-height:1.45;
  font-weight:500;
  -webkit-font-smoothing:antialiased;

  background-image:
    /* 1 small cloud, right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cg fill='%23ffffff' fill-opacity='.82'%3E%3Cellipse cx='110' cy='62' rx='94' ry='23'/%3E%3Ccircle cx='72' cy='48' r='25'/%3E%3Ccircle cx='110' cy='37' r='32'/%3E%3Ccircle cx='150' cy='50' r='23'/%3E%3C/g%3E%3C/svg%3E"),
    /* 2 big cloud, left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cg fill='%23ffffff' fill-opacity='.9'%3E%3Cellipse cx='110' cy='62' rx='94' ry='23'/%3E%3Ccircle cx='72' cy='48' r='25'/%3E%3Ccircle cx='110' cy='37' r='32'/%3E%3Ccircle cx='150' cy='50' r='23'/%3E%3C/g%3E%3C/svg%3E"),
    /* 3 low cloud, far right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cg fill='%23ffffff' fill-opacity='.6'%3E%3Cellipse cx='110' cy='62' rx='94' ry='23'/%3E%3Ccircle cx='72' cy='48' r='25'/%3E%3Ccircle cx='110' cy='37' r='32'/%3E%3Ccircle cx='150' cy='50' r='23'/%3E%3C/g%3E%3C/svg%3E"),
    /* 4 rolling hills along the bottom */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%2385dca6' d='M0 118c120-50 260-50 380-10 140 46 260-50 400-14 120 31 280-26 420 10v116H0z'/%3E%3Cpath fill='%235bc98a' d='M0 158c160-40 300 28 460 0s300 28 460-2c120-24 200-6 280-14v78H0z'/%3E%3C/svg%3E"),
    /* 5 sunburst rays */
    repeating-conic-gradient(from 8deg at 86% 20%,
      rgb(255 255 255 / .13) 0deg 5deg, transparent 5deg 15deg),
    /* 6 sun */
    radial-gradient(circle at 86% 20%, #fff6b0 0 6.4%, #fff3a8 6.4% 7.2%, rgb(255 243 168 / .35) 7.2% 11%, transparent 11.4%),
    /* 7 sky */
    linear-gradient(180deg, #2fb0ee 0%, #6bcef7 44%, #b6ecff 78%, #d8f6ff 100%);

  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:
    76% 8%,      /* small cloud */
    4% 20%,      /* big cloud   */
    95% 34%,     /* low cloud   */
    bottom center,
    center, center, center;
  background-size:
    clamp(110px,13vw,190px) auto,
    clamp(150px,19vw,280px) auto,
    clamp(90px,11vw,160px) auto,
    100% clamp(120px,22vh,210px),
    cover, cover, cover;
}

/* Below ~900px the decorative clouds crowd the stage, so
   only the hills and the sky stay. */
@media (max-width:900px){
  body{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%2385dca6' d='M0 118c120-50 260-50 380-10 140 46 260-50 400-14 120 31 280-26 420 10v116H0z'/%3E%3Cpath fill='%235bc98a' d='M0 158c160-40 300 28 460 0s300 28 460-2c120-24 200-6 280-14v78H0z'/%3E%3C/svg%3E"),
      repeating-conic-gradient(from 8deg at 86% 21%,
        rgb(255 255 255 / .11) 0deg 5deg, transparent 5deg 15deg),
      radial-gradient(circle at 86% 21%, #fff6b0 0 5%, rgb(255 243 168 / .3) 5% 9%, transparent 9.4%),
      linear-gradient(180deg, #2fb0ee 0%, #6bcef7 46%, #b6ecff 100%);
    background-position:bottom center, center, center, center;
    background-size:100% clamp(90px,16vh,150px), cover, cover, cover;
  }
}

/* The whole app is one non-scrolling grid the height of the viewport. */
.app{
  height:100dvh;
  max-width:1120px; margin:0 auto;
  padding:clamp(8px,1.6vh,16px) clamp(12px,2vw,20px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:clamp(7px,1.3vh,13px);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}

.logo{
  margin:0;font-family:var(--logo);font-weight:700;
  font-size:clamp(1.6rem,4.2vw,2.5rem);line-height:1;
  display:flex;gap:.34em;align-items:baseline;white-space:nowrap;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  filter:drop-shadow(0 3px 0 var(--ink));
}
.logo-a{color:var(--yellow)}
.logo-b{color:var(--pink);letter-spacing:.06em}

.top-right{display:flex;align-items:center;gap:9px;min-width:0}

/* --- the follow card ---------------------------------------- */
.follow{
  display:flex;align-items:center;gap:10px;
  padding:5px 6px 5px 8px;border-radius:999px;
  text-decoration:none;color:var(--ink);
  background:var(--cream);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s;
}
.follow:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.follow:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

.follow-av{
  width:32px;height:32px;flex:none;border-radius:50%;
  object-fit:cover;display:block;
  border:2.5px solid var(--ink);
  background:var(--cream);
}
.follow-txt{display:grid;line-height:1.2;min-width:0}
.follow-txt b{font-size:.95rem;font-weight:800;white-space:nowrap}
.follow-txt span{font:600 .7rem var(--body);letter-spacing:.02em;color:var(--muted)}
.follow-cta{
  background:var(--yellow);color:var(--ink);
  font:800 .86rem var(--body);
  padding:6px 13px;border-radius:999px;flex:none;
  border:2px solid var(--ink);
}
.follow:hover .follow-cta{background:#ffd75e}

.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:var(--cream);border:var(--bw) solid var(--ink);color:var(--ink);
  border-radius:50%;cursor:pointer;font-size:1.05rem;
  box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s;
}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.icon-btn[aria-pressed="false"]{background:var(--cream-2);opacity:.6}

@media (max-width:640px){
  .follow-txt{display:none}
  .follow{padding:4px 5px}
  .icon-btn{width:36px;height:36px}
}
/* The logo and the controls must share one row without clipping. */
@media (max-width:470px){
  .logo{font-size:1.18rem;-webkit-text-stroke-width:2.5px}
  .top-right{gap:6px}
  .icon-btn{width:33px;height:33px;font-size:.92rem;border-width:2.5px}
  .follow{border-width:2.5px}
  .follow-av{width:27px;height:27px;border-width:2px}
  .follow-cta{padding:5px 10px;font-size:.78rem}
}

/* ============================================================
   HUD
   ============================================================ */
.hud{
  display:flex;align-items:center;gap:7px 18px;flex-wrap:wrap;
  background:var(--cream);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--pop);
  padding:9px 16px;
}
.hud-cell{display:flex;align-items:baseline;gap:7px;min-width:0}
.hud-k{
  font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);flex:none;
}
.hud-v{font:800 1.3rem var(--display);font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.hud-of{font:600 .92rem var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.hud-score .hud-v{color:var(--pink-ink)}
.hud-best{color:var(--orange-ink)}

.hud-bar{
  flex:1 1 90px;height:14px;min-width:70px;border-radius:999px;
  background:var(--cream-2);overflow:hidden;
  border:2.5px solid var(--ink);
}
.hud-bar-fill{
  height:100%;width:0;
  background:repeating-linear-gradient(135deg,var(--green) 0 10px,#58e383 10px 20px);
  transition:width .18s ease-out;
}
.hud-combo{transition:.2s;opacity:.45}
.hud-combo[data-on="true"]{opacity:1}
.hud-combo[data-on="true"] .hud-v{color:var(--grape-ink)}
@keyframes comboPop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-4deg)}100%{transform:scale(1)}}
.hud-combo.pop .hud-v{animation:comboPop .3s ease-out}

@media (max-width:640px){
  .hud{gap:5px 13px;padding:8px 12px}
  .hud-k{font-size:.64rem}
  .hud-v{font-size:1.2rem}
  .hud-bar{flex-basis:100%;order:9;height:11px}
}

/* ============================================================
   STAGE
   ============================================================ */
.canvas-wrap{
  /* Fills the row on short screens; on a tall desktop it stays a
     letterboxed band so the action is not stranded at the bottom. */
  position:relative;min-height:0;height:100%;width:100%;
  max-height:min(100%, 560px);align-self:center;
  border:var(--bw) solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:#7fd8ff;
  box-shadow:0 6px 0 var(--ink);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer;
}
canvas{display:block;width:100%;height:100%}

/* --- overlays ----------------------------------------------- */
.ov{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;align-content:center;
  padding:12px;overflow:auto;overscroll-behavior:contain;
  pointer-events:none;
}
.ov::before{
  content:"";position:absolute;inset:0;
  background:#2c1a4259;
}
.ov>*{pointer-events:auto}

/* The results card bounds itself (see .panel-results), so this overlay
   never needs to scroll - and must never show a bar over the game. */
#ovResults{overflow:hidden}

/* Any scrollbar that does appear should look like part of the game,
   not a stray native widget on top of the artwork. */
.ov, .share-box p{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.ov::-webkit-scrollbar, .share-box p::-webkit-scrollbar{width:8px;height:8px}
.ov::-webkit-scrollbar-track, .share-box p::-webkit-scrollbar-track{background:transparent}
.ov::-webkit-scrollbar-thumb, .share-box p::-webkit-scrollbar-thumb{
  background:var(--ink);border-radius:999px;border:2px solid transparent;background-clip:content-box;
}

.panel{
  position:relative;
  background:var(--cream);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:0 7px 0 var(--ink);
  padding:18px 20px;max-width:min(540px,100%);
  display:grid;gap:13px;justify-items:center;text-align:center;
  animation:panelIn .26s cubic-bezier(.2,1.5,.4,1);
}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

.panel-eyebrow{
  margin:0;font:800 .82rem var(--body);text-transform:uppercase;letter-spacing:.04em;
  color:var(--grape-ink);
}
.panel-back{
  position:absolute;top:9px;left:11px;background:none;border:0;cursor:pointer;
  color:var(--muted);font:800 1.2rem var(--body);padding:2px 7px;line-height:1;
}
.panel-back:hover{color:var(--ink)}

/* --- mode picker -------------------------------------------- */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.mode{
  display:grid;gap:5px;justify-items:center;text-align:center;
  background:var(--cream-2);border:var(--bw) solid var(--ink);
  border-radius:var(--r);padding:15px 13px 13px;cursor:pointer;
  color:var(--ink);font-family:var(--body);
  box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.mode:hover,.mode:focus-visible{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.mode:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mode-sync:hover,.mode-sync:focus-visible{background:#d6f0ff}
.mode-demo:hover,.mode-demo:focus-visible{background:#d8ffdf}
.mode-ico{font-size:1.6rem;line-height:1.1;display:grid;place-items:center;min-height:1.9rem}
.mode-sync .mode-ico{color:var(--ink)}
.mode-title{font:800 1.14rem var(--body);line-height:1.2}
.mode-chip{
  margin-top:3px;font:700 .76rem var(--body);
  background:var(--cream);border:2px solid var(--ink);
  border-radius:999px;padding:3px 11px;color:var(--ink-2);
}
/* Inline X mark - the 𝕏 character is missing from many system fonts. */
.xlogo{vertical-align:-.1em}
.btn-share .xlogo{vertical-align:-.04em}

.size-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center}
.size-k{font:800 .76rem var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.seg{
  display:flex;border:var(--bw) solid var(--ink);border-radius:999px;
  overflow:hidden;background:var(--cream-2);box-shadow:var(--pop);
}
.seg button{
  border:0;border-left:2px solid var(--ink);background:transparent;color:var(--ink-2);
  font:700 .92rem var(--body);padding:6px 15px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.12s;
}
.seg button:first-child{border-left:0}
.seg button:hover{background:#ffe0a8}
.seg button[aria-checked="true"]{background:var(--green);color:var(--ink);font-weight:800}

/* --- returning player --------------------------------------- */
.resume{
  display:flex;align-items:center;gap:11px;width:100%;
  background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:var(--r-sm);
  padding:9px 12px;cursor:pointer;color:var(--ink);font-family:var(--body);
  text-align:left;box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s;
}
.resume:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.resume:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.resume-av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--cream) center/cover no-repeat;
  border:2.5px solid var(--ink);
  display:grid;place-items:center;font:800 .82rem var(--body);color:var(--ink);
}
.resume-txt{display:grid;min-width:0;flex:1;gap:1px}
.resume-txt b{font-size:1.02rem;font-weight:800;line-height:1.15}
.resume-txt span{font:600 .8rem var(--body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-go{font:800 1.05rem var(--display);color:var(--ink);flex:none}

/* --- handle field ------------------------------------------- */
.panel-form{max-width:min(450px,100%)}
.handle-field{
  display:flex;align-items:center;width:100%;
  background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-sm);
  padding-left:13px;overflow:hidden;box-shadow:var(--pop);
}
.handle-field:focus-within{background:#fffdf6;box-shadow:0 0 0 4px #ffc53166, var(--pop)}
.handle-field .at{color:var(--muted);font:700 1.08rem var(--body)}
.handle-field input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:700 1.08rem var(--body);padding:11px 7px;outline:none;
}
.handle-field input::placeholder{color:var(--dim);font-weight:600}
.go{
  border:0;border-left:var(--bw) solid var(--ink);
  background:var(--green);color:var(--ink);
  font:800 .98rem var(--body);padding:12px 19px;cursor:pointer;align-self:stretch;
}
.go:hover{background:#58e383}
.go:disabled{opacity:.6;cursor:default}
.form-msg{margin:0;min-height:1.2em;font-size:.9rem;font-weight:600;color:var(--muted)}
.form-msg[data-kind="err"]{color:#d81f45}
.form-msg[data-kind="ok"]{color:var(--green-ink)}

/* --- loading ------------------------------------------------ */
.loader{display:flex;gap:7px}
.loader i{
  width:14px;height:14px;border-radius:50%;background:var(--pink);
  border:2.5px solid var(--ink);animation:bob .62s ease-in-out infinite;
}
.loader i:nth-child(2){background:var(--yellow);animation-delay:.1s}
.loader i:nth-child(3){background:var(--sky);animation-delay:.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.load-title{margin:0;font:700 1.2rem var(--display)}
.load-count{margin:0;font:700 1.1rem var(--body);font-variant-numeric:tabular-nums}
.load-count .dim{color:var(--muted)}
.mini{
  width:min(240px,66vw);height:14px;border-radius:999px;
  background:var(--cream-2);overflow:hidden;border:2.5px solid var(--ink);
}
.mini>div{height:100%;width:0;background:repeating-linear-gradient(135deg,var(--pink) 0 10px,#ff7093 10px 20px)}

/* --- ready -------------------------------------------------- */
.ready-head{display:flex;align-items:center;gap:12px}
.ready-av{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--sky) center/cover no-repeat;
  border:var(--bw) solid var(--ink);
  display:grid;place-items:center;font:800 1.1rem var(--body);color:var(--ink);
}
.ready-id{display:grid;text-align:left}
.ready-id b{font-size:1.1rem;font-weight:800;line-height:1.2}
.ready-id .mono{font:600 .88rem var(--body);color:var(--muted)}
.vs-line{margin:0;font:800 1.6rem var(--display);line-height:1.15}
.vs-line b{color:var(--pink-ink)}
.vs-word{color:var(--muted);font-size:.68em}

.avs{display:flex;align-items:center}
.av{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  font:800 .74rem var(--body);color:var(--ink);
  border:2.5px solid var(--ink);margin-left:-10px;
}
.avs .av:first-child{margin-left:0}
.avs .more{margin-left:10px;font:800 .88rem var(--body);color:var(--ink-2)}

/* --- buttons ------------------------------------------------ */
.btn{
  font-family:var(--body);font-weight:800;cursor:pointer;border-radius:var(--r-sm);
  border:var(--bw) solid var(--ink);
  background:var(--yellow);color:var(--ink);
  padding:11px 20px;font-size:1rem;
  box-shadow:var(--pop);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.btn:hover{background:#ffd75e;transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn-big{
  font-family:var(--display);font-weight:800;font-size:1.26rem;padding:11px 32px;
  background:var(--green);box-shadow:var(--pop-lg);
}
.btn-big:hover{background:#58e383;box-shadow:0 8px 0 var(--ink)}
.btn-big:active{box-shadow:0 1px 0 var(--ink)}
.btn-ghost{background:var(--cream-2)}
.btn-ghost:hover{background:#ffe0a8}
.btn-sm{padding:8px 15px;font-size:.9rem}
.link{
  background:none;border:0;padding:0;cursor:pointer;color:var(--grape-ink);
  font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.link:hover{color:var(--pink-ink)}
button:focus-visible,.mode:focus-visible,a:focus-visible{outline:3px solid var(--grape-ink);outline-offset:3px}

.pause-btn{
  position:absolute;top:10px;right:10px;z-index:4;
  background:var(--cream);border:2.5px solid var(--ink);color:var(--ink);
  border-radius:9px;width:38px;height:32px;cursor:pointer;font-size:.66rem;letter-spacing:1px;
  box-shadow:0 3px 0 var(--ink);
}
.pause-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* --- toasts ------------------------------------------------- */
.toasts{position:absolute;left:0;right:0;top:12px;z-index:5;display:grid;justify-items:center;gap:6px;pointer-events:none}
.toast{
  font:800 1.02rem var(--display);
  background:var(--yellow);border:2.5px solid var(--ink);color:var(--ink);
  border-radius:999px;padding:5px 18px;box-shadow:0 4px 0 var(--ink);
  animation:toastIn .3s cubic-bezier(.2,1.6,.4,1), toastOut .4s ease-in 1.3s forwards;
}
.toast[data-kind="combo"]{background:var(--grape);color:#fff}
.toast[data-kind="power"]{background:var(--green)}
.toast[data-kind="warn"]{background:var(--orange)}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.86)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ============================================================
   RESULTS (an overlay on the stage, not a page section)
   ============================================================ */
/* Wider than the other panels: the post wraps onto fewer lines, which
   is what keeps the whole card inside the stage without scrolling. */
/* The card keeps its natural size and is scaled down to fit the stage
   by fitResults() in ui.js, so every part stays visible and legible at
   any viewport height instead of the post being squeezed or clipped.
   Its entrance animation is opacity-only so the transform stays free. */
.panel-results{
  max-width:min(640px,100%);gap:8px;padding:14px 16px;
  transform-origin:center center;
  animation:resultsIn .22s ease-out;
}
@keyframes resultsIn{from{opacity:0}to{opacity:1}}
.res-eyebrow{
  margin:0;font:800 .86rem var(--body);text-transform:uppercase;letter-spacing:.06em;
  color:#d81f45;
}
.panel-results[data-won="true"] .res-eyebrow{color:var(--green-ink)}
.res-title{margin:0;font:800 clamp(1.3rem,3.6vw,1.85rem) var(--display);line-height:1.18;text-wrap:balance}

.killer{color:#d81f45;white-space:nowrap;text-decoration:none}
.killer:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px}

.stats{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:100%}
.stat{
  background:var(--cream-2);border:2.5px solid var(--ink);border-radius:var(--r-sm);
  padding:7px 6px;display:grid;gap:0;
}
.stat dt{font:800 .66rem var(--body);text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.stat dd{margin:0;font:800 1.08rem var(--display);font-variant-numeric:tabular-nums;line-height:1.25}
.stat[data-hl="cyan"] dd{color:var(--sky-ink)}
.stat[data-hl="magenta"] dd{color:var(--grape-ink)}
.stat[data-hl="amber"] dd{color:var(--orange-ink)}
.stat[data-hl="lime"] dd{color:var(--green-ink)}

/* A miniature of the post that will actually go out. */
.share-box{
  display:grid;gap:7px;width:100%;text-align:left;
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-sm);padding:9px 11px;
}
.share-head{display:flex;align-items:center;gap:9px;min-width:0}
.share-av{
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--sky) center/cover no-repeat;
  border:2.5px solid var(--ink);
  display:grid;place-items:center;font:800 .76rem var(--body);color:var(--ink);
}
.share-id{display:grid;min-width:0;flex:1;line-height:1.2}
.share-id b{font-size:.92rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-id span{font-size:.78rem;font-weight:600;color:var(--muted)}
.share-box p{
  margin:0;font-size:.84rem;font-weight:600;color:var(--ink-2);line-height:1.38;
  white-space:pre-line;                 /* the post is written in lines */
  overflow-wrap:anywhere;min-width:0;
  /* No clamp and no inner scroll: the whole post is always shown, and
     the card as a whole is scaled to fit. */
}
/* The rank reads as a labelled grade, not a lone mystery letter. */
.rank-row{
  margin:0;display:flex;align-items:center;gap:9px;
  background:var(--cream-2);border:2.5px solid var(--ink);border-radius:999px;
  padding:5px 14px 5px 13px;
}
.rank-k{
  font:800 .72rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.rank-badge{
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  /* Body font, not the pixel display face - a single character in
     Pixelify is unreadable at this size. */
  font:800 1.05rem var(--body);line-height:1;
  background:var(--cream);color:var(--ink-2);border:2.5px solid var(--ink);
}
.rank-name{font:800 1rem var(--body);color:var(--ink)}
.rank-badge[data-tier="S"]{background:var(--yellow);color:var(--ink)}
.rank-badge[data-tier="A"]{background:var(--green);color:var(--ink)}
.rank-badge[data-tier="B"]{background:var(--sky);color:var(--ink)}

.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn-share{background:var(--pink);color:#fff}
.btn-share:hover{background:#ff6e92}

/* Short viewports (a 600px-tall laptop, landscape phones) have barely
   400px of stage. Shed leading and padding further so the results card
   still fits without a scrollbar. */

/* The results panel carries the most content, so it tightens first
   when the stage is short or narrow. */
@media (max-width:470px), (max-height:620px){
  /* Baloo 2 sits taller than the old pixel face, so the tightest
     viewports claw back a little padding and leading. */
  .ov{padding:8px}
  .panel-results{gap:6px;padding:12px 13px}
  .res-title{font-size:clamp(1.2rem,5.4vw,1.5rem)}
  .stats{gap:6px}
  .stat{padding:6px 5px}
  .stat dt{font-size:.6rem}
  .stat dd{font-size:1.02rem}
  .share-box{gap:7px;padding:8px 10px}
  .share-box p{font-size:.76rem;line-height:1.32;-webkit-line-clamp:12}
  .rank-row{padding:4px 12px;gap:7px}
  .rank-k{font-size:.64rem}
  .rank-badge{width:26px;height:26px;font-size:.92rem;border-width:2px}
  .rank-name{font-size:.88rem}
  .panel-results .btn{padding:8px 14px;font-size:.88rem}
  .panel-results .btn-big{font-size:1.1rem;padding:8px 20px}
  .actions{gap:8px}
}

/* Short viewports (a 600px-tall laptop, a landscape phone) leave barely
   400px of stage. Layered after the block above so these win. */
@media (max-height:620px){
  .ov{padding:6px}
  .panel-results{gap:5px;padding:10px 12px}
  .res-title{font-size:clamp(1.1rem,3.4vw,1.35rem)}
  .res-eyebrow{font-size:.74rem}
  .rank-row{padding:3px 11px;gap:6px}
  .rank-badge{width:23px;height:23px;font-size:.84rem}
  .rank-name{font-size:.84rem}
  .rank-k{font-size:.6rem}
  .stat{padding:5px}
  .stat dd{font-size:.98rem}
  .share-box{gap:5px;padding:7px 9px}
  .share-box p{font-size:.74rem;line-height:1.26}
  .share-av{width:28px;height:28px}
  .panel-results .btn{padding:7px 13px;font-size:.84rem}
  .panel-results .btn-big{font-size:1rem;padding:7px 18px}
  .actions{gap:7px}
}

/* ============================================================
   FOOT
   ============================================================ */
.footbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;
  font-size:.86rem;font-weight:600;color:var(--ink);
}
.footbar p{margin:0}
kbd{
  font:700 .78rem var(--body);background:var(--cream);
  border:2px solid var(--ink);border-bottom-width:3px;border-radius:6px;
  padding:1px 7px;color:var(--ink);
}
.trust-line{color:var(--ink)}

@media (max-width:640px){
  .footbar{justify-content:center;text-align:center;font-size:.78rem;gap:3px 12px}
}
/* Very short viewports: the controls hint is the first thing to go. */
/* Very short viewports: the controls hint is the first thing to go. */
@media (max-height:580px){
  .controls{display:none}
  .logo{font-size:1.4rem}
}

/* Landscape phones leave almost no stage. Strip the chrome back so the
   playfield (and the cards drawn over it) get the height instead. */
@media (max-height:480px){
  .app{padding:6px 10px;gap:6px}
  .footbar{display:none}
  .logo{font-size:1.15rem;-webkit-text-stroke-width:2px}
  .icon-btn{width:30px;height:30px;font-size:.84rem;border-width:2px}
  .follow{border-width:2px;padding:3px 4px}
  .follow-av{width:24px;height:24px}
  .follow-cta{padding:4px 9px;font-size:.74rem}
  .follow-txt{display:none}
  .hud{padding:5px 10px;gap:3px 10px}
  .hud-k{display:none}
  .hud-v{font-size:.98rem}
  .hud-bar{height:8px;flex-basis:60px;order:0}
  .canvas-wrap{border-width:2.5px;border-radius:12px}
}

/* ============================================================
   PRIVACY MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;padding:16px;
  background:#2c1a4296;
  animation:panelIn .2s ease-out;
}
.modal-card{
  position:relative;
  background:var(--cream);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:0 8px 0 var(--ink);
  padding:22px;max-width:640px;width:100%;
  max-height:88dvh;overflow:auto;
}
.modal-x{
  position:absolute;top:10px;right:13px;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:1.8rem;line-height:1;padding:0 6px;
}
.modal-x:hover{color:var(--pink-ink)}
.modal-card h2{margin:0 0 14px;font:800 clamp(1.2rem,3.1vw,1.5rem) var(--display);line-height:1.2;padding-right:30px}

.trust-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.trust-list li{
  background:var(--cream-2);border:2.5px solid var(--ink);border-radius:var(--r-sm);
  padding:10px 13px;font-size:.95rem;font-weight:500;color:var(--ink-2);line-height:1.45;
}
.trust-list b{color:var(--ink);font-weight:800}
.trust-list code{font:600 .88em var(--mono);background:var(--cream);border:1.5px solid var(--ink);padding:0 5px;border-radius:5px;color:var(--ink)}
.trust-list a{color:var(--grape-ink);font-weight:800;text-underline-offset:3px}
.trust-list em{color:var(--ink);font-style:italic;font-weight:700}

.modal-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:16px}
.wipe-msg{font-size:.88rem;font-weight:700;color:var(--green-ink)}
.modal-foot{margin:14px 0 0;font-size:.8rem;color:var(--muted)}

/* ============================================================
   MOTION PREFERENCE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .btn:hover,.mode:hover,.follow:hover,.icon-btn:hover,.resume:hover{transform:none}
}