/* WALKIES — style.css (ui agent). Pixel-arcade UI. */

:root{
  /* mirrors palette.js (PAL / SKY dawn) — hand-copied, keep in sync */
  --ink:#241b2f; --cream:#fff3e4; --paper:#f3e3cf;
  --accent:#ffcf5c; --accent-deep:#e09b3d; --danger:#e0524d; --ok:#5fa657;
  --dim:rgba(20,14,30,.72);
  --sky-top:#2b2a4a; --sky-mid:#b96a8c; --sky-low:#ffd9a0;
  --curb:#dbcbb8; --walk-lite:#c9b8a6; --walk-base:#b0a08f; --walk-dark:#8f8172;
  /* derived: ink/cream/uiDim at alpha */
  --ink-soft:rgba(36,27,47,.72); --ink-glass:rgba(36,27,47,.84);
  --veil:rgba(20,14,30,.45); --cream-dim:rgba(255,243,228,.66); --cream-faint:rgba(255,243,228,.22);
  --font:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
svg,canvas{display:block}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}

/* page bg extends the sky down to a sidewalk band, so portrait letterboxing reads as scene */
body{
  font-family:var(--font);color:var(--cream);background:var(--sky-top);
  background-image:linear-gradient(180deg,
    var(--sky-top) 0%,var(--sky-mid) 44%,var(--sky-low) 76%,var(--sky-low) 87.5%,
    var(--curb) 87.5%,var(--curb) 89.5%,var(--walk-lite) 89.5%,var(--walk-base) 96%,var(--walk-dark) 100%);
  min-height:100dvh;display:grid;place-items:center;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
.nojs{position:fixed;inset:auto 12px 18vh 12px;z-index:99;background:var(--paper);color:var(--ink);border:3px solid var(--ink);padding:14px;text-align:center}

/* stage / canvas (transparent until the game paints — page sky shows through) */
#stage{position:relative;width:min(100vw,177.78dvh);aspect-ratio:480/270;
  touch-action:none;-webkit-touch-callout:none}
#game{width:100%;height:100%;image-rendering:pixelated}

/* overlay root (menus only) — children opt back into pointer events */
#overlay{position:fixed;inset:0;z-index:10;display:flex;justify-content:center;overflow-y:auto;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.screen{width:min(100%,720px);display:flex;flex-direction:column;min-height:100%}
.screen :is(button,input,a,.card,.daily-card,.menu-board){pointer-events:auto}

/* pressables share the chunky 3px border + 4px press-down shadow */
.btn,.breed-cell,.m-close,.mute-btn{background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  border-radius:10px;box-shadow:0 4px 0 var(--ink);transition:transform .06s,box-shadow .06s,filter .12s}
.btn:active,.breed-cell:active,.m-close:active,.mute-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed}
@media(hover:hover){
  .btn:hover:not(:disabled),.breed-cell:hover:not(.is-locked),.m-close:hover,.mute-btn:hover,
  .tab:hover,.gm-opt:hover,.mini-chip:hover,.walker-chip:hover,.mb-opt:hover,.mb-more:hover{filter:brightness(1.08)}
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;min-width:44px;padding:10px 18px;font-size:clamp(14px,2.3vmin,17px)}
.btn--primary{background:var(--accent);font-size:clamp(20px,4vmin,27px);padding:14px 34px;letter-spacing:.1em}
.btn--daily{padding:10px 22px}
.btn--daily .sub{font-size:.68em;font-weight:700;text-transform:none;letter-spacing:.03em;color:var(--ink-soft)}
.btn--daily .sub--rank{color:var(--accent-deep)}
.btn.is-loading{animation:throb .9s ease-in-out infinite}
.btn.is-offline{color:var(--ink-soft);font-size:12px}

/* title */
.t-head{text-align:center;margin-top:clamp(4px,3vmin,22px)}
.wordmark{margin:0;line-height:1;font-size:clamp(34px,10vmin,76px);font-weight:900;letter-spacing:.05em;color:var(--cream)}
.wm-l{display:inline-block;
  text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),
    3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),0 6px 0 var(--ink);
  animation:wave 2.6s ease-in-out calc(var(--i)*.11s) infinite}
.wm-l:nth-child(odd){color:var(--accent)}
.tagline{margin:6px 0 0;font-size:clamp(11px,2.6vmin,14px);letter-spacing:.14em;text-shadow:2px 2px 0 var(--ink)}
.best-pill{display:inline-block;margin-top:10px;background:var(--ink-glass);color:var(--accent);
  border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:800;letter-spacing:.12em}
.t-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(8px,3vmin,22px)}
.t-spacer{flex:1 1 auto;min-height:8px;pointer-events:none} /* idle-dog window */
.t-label{margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--cream);text-shadow:1px 1px 0 var(--ink),0 0 4px var(--ink);text-transform:uppercase}

/* breed shelf */
.breed-cell{flex:1 1 0;min-width:0;max-width:96px;min-height:52px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 1px 5px;border-width:2px;box-shadow:0 3px 0 var(--ink)}
.breed-power{font-size:6px;font-weight:800;letter-spacing:.03em;color:var(--accent-deep);
  text-align:center;line-height:1.3;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.breed-cell.is-locked .breed-power{color:var(--cream-dim);opacity:.75}
.breed-cell .pix-dog{width:26px;height:20px}
.breed-name{font-size:7.5px;letter-spacing:.03em;white-space:nowrap;max-width:100%;overflow:hidden}
.is-on{border-color:var(--accent);background:var(--cream);box-shadow:0 4px 0 var(--ink),inset 0 0 0 1px var(--accent)}
.breed-cell.is-locked{background:rgba(36,27,47,.6);color:var(--cream-dim)}
.is-locked .pix-dog{opacity:.55}

/* collar tags (modal rows reuse tag-name/desc below) */
.is-earned{background:var(--paper);border:3px solid var(--ink);color:var(--ink)}
.is-earned::before{border-color:var(--accent-deep)}
.tag-name{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.is-earned .tag-name{color:var(--accent-deep)}
.tag-desc{font-size:10px;line-height:1.25}

/* board rows (title mini-board + modal) */
.rank{font-weight:800}
.bname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.05em}
.bscore{font-weight:800}


/* mute + footer */
.mute-btn{position:fixed;z-index:12;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));
  width:46px;height:46px;display:grid;place-items:center;background:var(--ink-glass);color:var(--cream);font-size:20px;line-height:1}
.mute-glyph{position:relative}
.mute-btn.is-muted{opacity:.75} /* 🔇 glyph carries the state; just dim slightly */

/* full-screen (install) chip — mirrors the mute button, top-left */
.install-chip{position:fixed;z-index:12;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:7px;min-height:46px;padding:0 13px;
  background:var(--ink-glass);color:var(--cream);font-size:11px;letter-spacing:.12em}
.ic-glyph{font-size:17px;line-height:1}
@media(hover:hover){.install-chip:hover .ic-label{color:var(--accent)}}

/* install help card (iOS Add to Home Screen walkthrough) */
.card--install{width:min(92vw,420px);padding:0 18px 16px;max-height:min(92dvh,460px);overflow-y:auto}
.inst-lead{margin:10px 2px 12px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.inst-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.inst-step{display:flex;align-items:center;gap:11px;background:var(--cream);border:2px solid var(--ink);
  border-radius:10px;padding:9px 12px;font-size:13px;font-weight:700}
.inst-glyph{font-size:19px;line-height:1}
.inst-foot{margin:12px 2px 0;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.t-foot{display:flex;justify-content:flex-end;margin:10px 0 2px;text-shadow:1px 1px 0 var(--ink)}
.t-legal{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;opacity:.62}
.t-legal-sep{opacity:.5}
.ext-link{color:var(--cream);text-decoration:none;border-bottom:1px dotted var(--cream-dim);padding-bottom:1px}
@media(hover:hover){.ext-link:hover{color:var(--accent);border-bottom-color:var(--accent)}}
.ext-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* death-card point-of-submission disclosure */
.d-legal{margin:2px 0 0;font-size:10px;line-height:1.5;text-align:center;color:var(--ink-soft);letter-spacing:.02em}
.d-legal .ext-link{color:var(--ink-soft);border-bottom-color:var(--ink-soft)}
@media(hover:hover){.d-legal .ext-link:hover{color:var(--ink);border-bottom-color:var(--ink)}}

/* death card */
.screen--death{align-items:center}
.d-veil{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0 34%,var(--veil) 78%)}
.card{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);position:relative}
/* margin-top:auto (NOT justify-content:flex-end) bottom-anchors the card when it
   fits and collapses to 0 when it overflows — so short landscape viewports
   (installed-app phones) can always scroll to the score instead of having the
   card's top sheared off above the reachable area. */
.card--death{width:min(410px,100%);margin-top:auto;margin-bottom:clamp(6px,3vh,26px);padding:14px 16px 16px;
  display:grid;gap:10px;justify-items:center;animation:rise .32s cubic-bezier(.2,.9,.3,1.25) both}
.d-top{display:flex;gap:8px;align-items:center}
.d-title,.d-score-lbl,.d-submit-lbl,.rank-sub{font-weight:800;color:var(--ink-soft)}
.d-title{font-size:13px;letter-spacing:.22em}
.badge{background:var(--ink);color:var(--accent);border-radius:6px;padding:2px 7px;font-size:10px;font-weight:800;letter-spacing:.12em}
.d-quip{margin:0;font-size:12.5px;color:var(--ink-soft);text-align:center}
.d-score-lbl{font-size:10px;letter-spacing:.3em}
.d-score{font-size:clamp(48px,15vmin,84px);font-weight:900;line-height:.95;color:var(--cream);
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),
    2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 5px 0 var(--ink)}
.d-best{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink-soft)}
.d-best .pix-crown{width:26px;height:12px}
.newbest{color:var(--ink);background:var(--accent);border:2px solid var(--ink);border-radius:8px;padding:2px 8px;
  animation:stamp .42s cubic-bezier(.2,1.4,.4,1) both}
.d-submit{width:100%;display:grid;gap:7px}
.d-submit-lbl{font-size:10px;letter-spacing:.2em;text-align:center}
.name-input{width:100%;min-height:46px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:10px;
  padding:7px 12px;text-align:center;font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.name-input::placeholder{color:var(--ink-soft);opacity:.5;font-weight:700}
.d-err{margin:0;min-height:1em;font-size:11px;font-weight:700;color:var(--danger);text-align:center}
.is-done :is(.name-input,.d-submit-btn,.d-submit-lbl,.d-err){display:none}
.rank-reveal{display:grid;justify-items:center;gap:2px;padding:4px 0}
.rank-big{font-size:clamp(34px,9vmin,52px);font-weight:900;line-height:1;color:var(--accent-deep);animation:pop .45s cubic-bezier(.2,1.5,.4,1) both}
.rank-sub{font-size:11px;letter-spacing:.3em;animation:pop .4s ease .15s both}
.rank-note{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ok);animation:pop .4s ease both}
.d-btns{width:100%;display:grid;gap:8px}
.d-btns-row{flex-wrap:wrap}
.d-btns-row .btn{min-width:92px;font-size:clamp(12px,3.4vmin,15px)}
.btn--again{width:100%}
.d-btns-row{display:flex;gap:8px}
.d-btns-row .btn{flex:1 1 0}

/* boards modal */
#modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--dim);
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.card--boards{width:min(420px,100%);max-height:min(560px,92dvh);padding:14px;display:flex;flex-direction:column;gap:10px;animation:rise .25s ease-out both}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-title{margin:0;font-size:15px;font-weight:900;letter-spacing:.2em}
.m-close{width:44px;height:44px;flex:0 0 auto;font-size:16px;font-weight:900}
.tabs{display:flex;border:3px solid var(--ink);border-radius:10px;overflow:hidden}
.tab{flex:1 1 0;min-height:44px;background:var(--cream);color:var(--ink-soft);border:0;border-right:3px solid var(--ink);font-size:12px}
.tab:last-child{border-right:0}
.tab[aria-selected=true]{background:var(--accent);color:var(--ink)}
.m-day{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);text-align:center;min-height:1em}
.board-list{list-style:none;margin:0;padding:2px;overflow-y:auto;display:grid;gap:3px}
.board-row{display:flex;gap:9px;align-items:baseline;font-size:13.5px;padding:5px 8px;border-radius:8px}
.board-row .rank{width:3.2ch;color:var(--accent-deep)}
.board-row .bscore{font-weight:900}
.board-row.is-you{background:var(--accent);box-shadow:inset 0 0 0 2px var(--ink)}
.board-row .bdog{flex:0 0 auto;width:20px;height:15px}
.bmeters{margin-left:auto;font-size:10px;color:var(--ink-soft);letter-spacing:.04em}
.board-row .bscore{margin-left:8px}
/* breed slicer chips (ALL-TIME tab) */
.slice-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:8px 0 2px}
.slice-chip{min-width:44px;min-height:34px;display:grid;place-items:center;padding:3px 8px;
  background:var(--cream);color:var(--ink-soft);border:2px solid var(--ink);border-radius:9px}
.slice-chip[aria-pressed=true]{background:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.slice-chip svg,.slice-chip img,.slice-chip .dog-ico{width:22px;height:16px}
.slice-all{font-size:10px;font-weight:800;letter-spacing:.1em}
.sub--dog{color:var(--accent-deep);font-weight:800}
.board-row.is-you .rank{color:var(--ink)}
.m-empty{text-align:center;color:var(--ink-soft);font-size:13px;padding:22px 6px}

/* toasts — bottom-center, stack upward */
#toasts{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column-reverse;align-items:center;gap:7px;pointer-events:none;width:min(340px,92vw)}
.toast{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);
  padding:8px 14px;max-width:100%;font-size:12.5px;font-weight:700;text-align:center;animation:toastin .22s ease-out both}
.toast--out{animation:toastout .22s ease-in both}
.toast--tag{background:var(--accent);display:grid;gap:1px}
.tt-kicker{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--ink-soft)}
.tt-name{font-size:14px;font-weight:900;letter-spacing:.1em}
.tt-desc{font-size:11px;color:var(--ink-soft)}

@keyframes wave{0%,55%,100%{transform:translateY(0)}30%{transform:translateY(-.09em)}}
@keyframes rise{from{transform:translateY(44px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pop{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes stamp{from{transform:scale(1.7) rotate(-7deg);opacity:0}to{transform:scale(1) rotate(-2deg);opacity:1}}
@keyframes throb{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes toastin{from{transform:translateY(14px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes toastout{to{transform:translateY(10px);opacity:0}}

@media(max-height:540px){
  .t-head{margin-top:2px}
  .wordmark{font-size:clamp(30px,9vmin,54px)}
  .t-actions{margin-top:8px}
  .t-spacer{min-height:10px}
}

/* landscape phones (installed app ≈ 390-430px tall): compress the death card
   so score → AGAIN fits on one screen; anything left over scrolls. */


/* ===== fit-always title components (2026-08-04 UI tightening) ===== */
/* daily card: the button + the ghost mini-picker share one bordered card */
.daily-card{display:flex;flex-direction:column;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 6px 0 var(--ink);overflow:hidden;min-width:min(86vw,300px)}
.daily-main{display:flex;flex-direction:column;gap:2px;align-items:center;padding:8px 18px 6px;background:var(--paper);color:var(--ink);border:0;min-height:46px}
.daily-main strong{letter-spacing:.08em}
.daily-main .sub{font-size:10px;font-weight:700;text-transform:none;letter-spacing:.03em;color:var(--ink-soft)}
.daily-main .sub--rank{color:var(--accent-deep)}
.daily-main:disabled{opacity:.55}
.ghost-mini{display:flex;align-items:stretch;border-top:2px solid var(--ink);background:var(--cream)}
.gm-label{display:flex;align-items:center;padding:0 10px;font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;border-right:2px solid var(--ink)}
.gm-opt{flex:1 1 0;min-height:30px;border:0;border-right:2px solid var(--ink);background:transparent;color:var(--ink-soft);font-size:10px;font-weight:800;letter-spacing:.06em}
.gm-opt:last-child{border-right:0}
.gm-opt[aria-checked=true]{background:var(--accent);color:var(--ink)}

/* dog row: six cells, no scroll, walker chips on the label line */
.t-dogs{display:flex;flex-direction:column;gap:5px;width:100%}
.dog-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dog-label-row .t-label{margin:0}
.walker-chips{display:flex;gap:6px}
.walker-chip{min-width:40px;min-height:30px;padding:1px 8px;font-size:14px;background:var(--ink-glass);color:var(--cream);border:2px solid var(--ink);border-radius:9px;opacity:.65}
.walker-chip[aria-checked=true]{background:var(--accent);opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.dog-row{display:flex;gap:5px;width:100%;justify-content:center}

/* menu board — today's top dogs floating in the attract window (tap = full
   boards modal). Translucent paper: the idle walk stays visible behind it. */
.menu-board{position:relative;isolation:isolate;width:min(86vw,300px);margin:0 auto;border:2px solid var(--ink);
  border-radius:12px;overflow:hidden;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.menu-board::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:.85;z-index:-1}
.mb-head{display:flex;align-items:stretch;border-bottom:2px solid var(--ink);background:var(--cream)}
.mb-label{display:flex;align-items:center;padding:0 9px;font-size:9px;font-weight:800;letter-spacing:.18em;
  color:var(--ink-soft);text-transform:uppercase;border-right:2px solid var(--ink)}
.mb-seg{display:flex;flex:1 1 auto}
.mb-opt{flex:1 1 0;min-height:27px;border:0;border-right:2px solid var(--ink);background:transparent;
  color:var(--ink-soft);font-size:9.5px;font-weight:800;letter-spacing:.06em}
.mb-opt:last-child{border-right:0}
.mb-opt[aria-checked=true]{background:var(--accent);color:var(--ink)}
.mini-board{list-style:none;margin:0;padding:4px 5px;display:grid;gap:2px}
.board-row--mini{font-size:11.5px;padding:2px 6px;gap:7px}
.board-row--mini .bdog{width:16px;height:12px}
.board-empty{text-align:center;color:var(--ink-soft);font-size:10.5px;padding:12px 8px}
.mb-more{display:block;width:100%;border:0;border-top:2px solid var(--ink);background:var(--cream);
  min-height:25px;font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--ink-soft)}
/* skeleton shimmer while board rows are in flight */
.skel-row{display:flex;align-items:center;min-height:18px;padding:2px 6px}
.skel{display:inline-block;height:9px;border-radius:4px;background:var(--ink-soft);animation:skelpulse 1.1s ease-in-out infinite}
@keyframes skelpulse{0%,100%{opacity:.14}50%{opacity:.3}}
/* short portrait (SE class): three rows keep the no-scroll promise */
@media(orientation:portrait) and (max-height:620px){
  .menu-board .mini-board .board-row--mini:nth-child(n+4),.menu-board .skel-row:nth-child(n+4){display:none}
}

/* tags chip (opens a modal; boards now live on the menu board above) */
.chips-row{display:flex;gap:8px;justify-content:center;margin-top:9px}
.mini-chip{min-height:38px;padding:4px 14px;font-size:10.5px;font-weight:800;letter-spacing:.08em;background:var(--ink-glass);color:var(--cream);border:2px solid var(--ink);border-radius:10px}
@media(hover:hover){.mini-chip:hover{color:var(--accent)}}

/* collar-tags modal */
.card--tags{width:min(92vw,430px);padding:0 14px 14px;max-height:min(88dvh,520px);overflow-y:auto}
.tag-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.tag-row{display:flex;flex-direction:column;gap:1px;border:2px dashed var(--cream-faint);border-radius:10px;padding:6px 10px;color:var(--ink-soft);background:rgba(36,27,47,.06)}
.tag-row .tag-name{color:var(--ink-soft)}
.tag-row.is-earned{background:var(--cream);border:2px solid var(--ink);color:var(--ink)}
.tag-row.is-earned .tag-name{color:var(--accent-deep)}

/* scroll safety-net: menus are designed to FIT; if a freak viewport overflows,
   the overlay becomes actually scrollable (canvas dog-tap yields until it fits) */
#overlay.can-scroll{pointer-events:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}

/* landscape phones: two-column title grid — hero left, dogs+chips right */
@media(orientation:landscape) and (max-height:480px){
  .screen--title{display:grid;grid-template-areas:"head dogs" "act board" "foot foot";
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:center;
    justify-items:center;column-gap:14px;row-gap:8px;min-height:100%;padding:4px 10px}
  .t-head{grid-area:head;margin:0}
  .wordmark{font-size:clamp(26px,8vmin,44px)}
  .tagline{margin:2px 0 0;font-size:10px}
  .best-pill{margin-top:3px;font-size:10px;padding:2px 8px}
  .t-actions{grid-area:act;margin:0;gap:7px}
  .btn--primary{font-size:clamp(16px,5vmin,20px);padding:7px 26px}
  .daily-main{padding:5px 14px 4px;min-height:40px}
  .gm-opt{min-height:26px}
  .t-spacer{display:none}
  .t-dogs{grid-area:dogs;max-width:370px;align-self:end}
  .menu-board{grid-area:board;width:100%;max-width:340px;margin:0;align-self:start}
  .menu-board .mini-board .board-row--mini:nth-child(n+4),.menu-board .skel-row:nth-child(n+4){display:none}
  .mb-opt{min-height:24px}
  .mb-more{min-height:22px}
  .chips-row{grid-area:foot;margin:0;justify-self:start;align-self:center}
  .mini-chip{min-height:32px}
  .t-foot{grid-area:foot;margin:0;justify-self:end;align-self:center}
}

/* landscape phones: two-column death card — score story left, actions right */
@media(orientation:landscape) and (max-height:480px){
  .card--death{width:min(94vw,600px);margin-top:auto;margin-bottom:auto;
    grid-template-columns:1fr 1fr;column-gap:14px;row-gap:6px;padding:10px 14px 12px;align-items:center}
  .d-col{display:grid;gap:6px;justify-items:center;min-width:0}
  .d-score{font-size:clamp(30px,10vmin,48px)}
  .d-quip{font-size:11px}
  .name-input,.d-submit-btn{min-height:38px}
  .btn--again{padding:7px 16px;font-size:clamp(14px,3.2vmin,18px)}
  .d-legal{font-size:8.5px;margin:0}
  .d-btns{gap:5px}
  .d-btns-row .btn{min-width:0;font-size:11px;padding:6px 8px}
}
/* portrait/desktop: the two card columns just stack */
.d-col{display:grid;gap:8px;justify-items:center;width:100%;min-width:0}
/* ultra-short landscape (SE class): shave the last few px */
@media(orientation:landscape) and (max-height:340px){
  .card--death{padding:7px 12px 9px;row-gap:4px}
  .d-col{gap:4px}
  .d-score{font-size:clamp(24px,8vmin,36px)}
  .name-input,.d-submit-btn{min-height:34px}
  .btn--again{min-height:36px;padding:5px 14px}
  .d-btns-row .btn{min-height:34px;padding:4px 6px;font-size:10px}
  .d-legal{font-size:8px;line-height:1.35}
  .menu-board .mini-board .board-row--mini:nth-child(n+3),.menu-board .skel-row:nth-child(n+3){display:none}
  .mb-opt{min-height:22px}
  .mb-more{min-height:20px}
}

/* portrait rotate nudge — landscape is the intended play mode on phones.
   Appearance is always defined; it only SHOWS while actually walking
   (.is-run on <html>, set by game.js) on a portrait phone. The run is paused
   whenever this is visible, so nobody dies behind it; menus stay usable in
   portrait. */
#rotate{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 60%,var(--sky-low));text-align:center}
.rot-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--ink-glass);
  border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);padding:26px 24px;max-width:280px}
.rot-paw{font-size:34px;line-height:1}
.rot-card strong{color:var(--accent);font-size:26px;letter-spacing:.14em;text-shadow:2px 2px 0 var(--ink)}
.rot-card span{color:var(--cream);font-size:13px;line-height:1.6;letter-spacing:.06em;opacity:.9}
.rot-icon{font-size:26px;animation:rotnudge 2.2s ease-in-out infinite}
@keyframes rotnudge{0%,55%,100%{transform:rotate(0)}70%,85%{transform:rotate(-90deg)}}
@media(orientation:portrait) and (pointer:coarse) and (max-width:600px){
  .is-run #rotate{display:flex}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}