:root{
  --ink:#281a24; --paper:#f6ead2; --paper2:#ecdcbb; --grass:#6fae4e; --grass-d:#4f8a3a;
  --accent:#e08a3c; --accent-d:#b9651f; --berry:#d6453d; --sky:#3f8fd6;
  --font:'Pixelify Sans', ui-monospace, 'Courier New', monospace;
  --b:3px; --sh:4px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--grass-d)}
body{font-family:var(--font);font-size:16px;line-height:1.35;color:var(--ink);-webkit-tap-highlight-color:transparent}
#park{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none;cursor:none;user-select:none;-webkit-user-select:none}
#ui{position:fixed;inset:0;pointer-events:none;z-index:2;cursor:default}
#ui button,#ui input,#ui a,#ui .panel{pointer-events:auto}
#ui button{font:inherit;color:inherit;cursor:pointer}
#ui :focus{outline:none}
#ui :focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.panel{background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink)}
.btn{background:var(--paper);border:var(--b) solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;font-weight:600;font-size:16px;min-height:40px}
.btn:hover{background:#fff6e0}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* HUD */
.hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));padding:6px 12px 8px;pointer-events:none}
.hud h1{margin:0;font-size:28px;line-height:1;font-weight:700;letter-spacing:.5px}
.hud h1 span{color:var(--accent-d)}
.hud p{margin:4px 0 0;font-size:14px}
.rollbtn{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;align-items:center;background:var(--accent);min-height:46px}
.rollbtn:hover{background:#eb9a52}
.rollbtn svg{width:20px;height:20px}

/* toolbar */
.toolbar{position:absolute;left:50%;bottom:max(34px,calc(env(safe-area-inset-bottom) + 28px));transform:translateX(-50%);display:flex;gap:10px;padding:8px;pointer-events:auto}
.tool{position:relative;width:84px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:4px;font-size:15px;font-weight:600}
.tool svg{width:32px;height:32px;shape-rendering:crispEdges}
.tool kbd{position:absolute;top:1px;left:4px;font:inherit;font-size:12px;opacity:.55}
.tool:hover{background:#fff6e0}
.tool[aria-pressed=true]{background:var(--accent);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tool:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

.foot{position:absolute;left:0;right:0;bottom:max(6px,env(safe-area-inset-bottom));text-align:center;font-size:13px;color:var(--paper);text-shadow:1px 1px 0 var(--ink),-1px 1px 0 var(--ink),1px -1px 0 var(--ink),-1px -1px 0 var(--ink);padding:0 12px;pointer-events:none}

/* name tag */
.nametag{position:absolute;left:0;top:0;pointer-events:none;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:1px 8px 2px;font-size:15px;font-weight:600;white-space:nowrap;will-change:transform}
.nametag[hidden]{display:none}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(max(34px,env(safe-area-inset-bottom)) + 120px);transform:translate(-50%,0);background:var(--ink);color:var(--paper);border:3px solid var(--paper);box-shadow:3px 3px 0 var(--ink);padding:6px 14px;font-size:16px;max-width:calc(100vw - 32px);text-align:center;pointer-events:none;animation:pop .18s steps(3)}
.toast.out{opacity:0;transition:opacity .2s steps(2)}
@keyframes pop{from{transform:translate(-50%,8px)}to{transform:translate(-50%,0)}}

/* card + roll call */
.card,.roll{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:slide .2s steps(4)}
.card[hidden],.roll[hidden]{display:none}
@keyframes slide{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.card{right:max(16px,env(safe-area-inset-right));bottom:max(150px,calc(env(safe-area-inset-bottom) + 140px));width:340px;max-height:calc(100dvh - 190px);top:auto}
.roll{top:calc(max(12px,env(safe-area-inset-top)) + 58px);right:max(12px,env(safe-area-inset-right));width:340px;max-height:calc(100dvh - 190px)}
.card-scroll{overflow:auto;padding:14px 16px 16px}
.x{position:absolute;top:8px;right:8px;width:36px;height:36px;padding:0;font-size:20px;line-height:1;font-weight:700;z-index:2;background:var(--paper);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.x:hover{background:var(--berry);color:#fff}
.portrait{display:block;margin:0 auto 12px;border:var(--b) solid var(--ink);background:var(--grass);image-rendering:pixelated;width:100%;max-width:304px;height:auto;aspect-ratio:80/56}
.card h2{margin:0;font-size:30px;line-height:1.05;padding-right:40px}
.sub{margin:4px 0 0;font-size:15px;color:#5b4452}
.badge{display:inline-block;margin:8px 0 0;background:var(--berry);color:#fff;border:2px solid var(--ink);padding:0 8px 1px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:2px 2px 0 var(--ink)}
.bio{margin:10px 0 0;font-size:16px;line-height:1.4}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:#fff6e0;border:var(--b) solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:4px 10px;font-weight:600;font-size:15px;min-height:38px}
a.link:hover{background:var(--accent)}
a.link:active{transform:translate(3px,3px);box-shadow:none}
span.link{background:var(--paper2);box-shadow:none;border-style:dashed;opacity:.8}
.link svg{width:18px;height:18px;shape-rendering:crispEdges;flex:none}

.roll header{padding:12px 12px 10px;border-bottom:var(--b) solid var(--ink);background:var(--paper2)}
.roll h2{margin:0 0 8px;font-size:22px}
.roll input{width:100%;font:inherit;font-size:16px;background:#fff;border:var(--b) solid var(--ink);padding:6px 10px;min-height:40px;color:var(--ink);border-radius:0}
.roll ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:120px}
.roll li button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:2px solid var(--paper2);padding:4px 12px 4px 6px;min-height:60px}
.roll li button:hover,.roll li button:focus-visible{background:#fff6e0}
.roll li canvas{width:80px;height:56px;flex:none;background:var(--grass);border:2px solid var(--ink);image-rendering:pixelated}
.roll .nm{font-weight:700;font-size:18px;line-height:1.1;display:block}
.roll .nb{font-size:14px;color:#5b4452;display:block}
.roll .empty{padding:20px;text-align:center}
.roll .count{font-size:13px;color:#5b4452;margin-left:6px;font-weight:400}

/* phone: bottom sheet */
@media (max-width:640px){
  .hud h1{font-size:22px}
  .hud p{font-size:13px}
  .rollbtn{padding:4px 10px;min-height:42px}
  .toolbar{gap:6px;padding:6px}
  .tool{width:72px;height:68px;font-size:14px}
  .tool kbd{display:none}
  .card,.roll{left:0;right:0;bottom:0;top:auto;width:auto;max-height:78dvh;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -4px 0 var(--ink);padding-bottom:env(safe-area-inset-bottom);animation:sheet .22s steps(4)}
  .roll{max-height:82dvh}
  .portrait{max-width:240px}
  .card::before{content:"";display:block;width:48px;height:6px;background:var(--ink);margin:8px auto 0;flex:none}
  .toast{bottom:calc(max(34px,env(safe-area-inset-bottom)) + 100px)}
}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (max-height:520px) and (min-width:641px){
  .portrait{max-width:160px}.card{bottom:130px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.soundbtn{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 56px);right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:center;width:46px;min-height:46px;padding:0}
.soundbtn svg{width:22px;height:22px}
@media (max-width:640px){.soundbtn{top:calc(max(12px,env(safe-area-inset-top)) + 50px);width:42px;min-height:42px}}

.parkbtn{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 84px);left:max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;font-size:14px;min-height:36px;padding:3px 10px}
.parkbtn .caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
.parkmenu{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 128px);left:max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;min-width:230px;max-height:60dvh;overflow:auto;z-index:5}
.parkmenu[hidden]{display:none}
.parkitem{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;background:transparent;border:0;border-bottom:2px solid var(--paper2);padding:6px 12px 7px;font:inherit;color:var(--ink);cursor:pointer}
.parkitem:last-child{border-bottom:0}
.parkitem:hover{background:#fff6e0}
.parkitem[aria-current=true]{background:var(--accent)}
.parkitem b{font-size:16px}
.parkitem small{font-size:13px;opacity:.85}
@media (max-width:640px){.parkbtn{top:calc(max(12px,env(safe-area-inset-top)) + 72px)}.parkmenu{top:calc(max(12px,env(safe-area-inset-top)) + 114px)}}
.parkbtn[hidden]{display:none}

/* toolbar: compact along the bottom on small screens, a vertical strip on the right on wide ones, so it never hides the dogs */
.toolbar{bottom:max(26px,calc(env(safe-area-inset-bottom) + 22px));gap:6px;padding:6px}
.tool{width:66px;height:58px;font-size:13px;gap:2px}
.tool svg{width:26px;height:26px}
@media (min-width:900px){
  .toolbar{left:auto;right:max(12px,env(safe-area-inset-right));bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column}
  .tool{width:72px;height:66px;font-size:14px}
}

/* wordmark in a chunkier pixel face: Pixelify's c reads as an o at this size */
.hud h1{font-family:'Jersey 15',var(--font);font-size:40px;font-weight:400;letter-spacing:1px;line-height:.8}
@media (max-width:640px){.hud h1{font-size:32px}}

.memorial{margin:2px 0 6px;font-size:14px;font-weight:600;color:#6b4a7a;letter-spacing:.3px}
.memorial[hidden]{display:none}

/* social preview mode (?og=1): just the park and the wordmark */
body.og .toolbar,body.og .rollbtn,body.og .soundbtn,body.og .parkbtn,body.og .parkmenu,body.og .foot,body.og .toast{display:none!important}
body.og .hud{top:28px;left:28px;transform:scale(1.7);transform-origin:top left}