*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:"Trebuchet MS",system-ui,sans-serif;background:#9fd8ff}
#app{position:fixed;inset:0}
#topbar{position:fixed;top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}
#topbar>*{pointer-events:auto}
.logo{background:#ffcf33;border:3px solid #222;border-radius:12px;padding:6px 12px;font-weight:900;font-size:18px;box-shadow:3px 3px 0 #222}
#zipform{display:flex;gap:4px}
#zipform input{width:80px;font-size:16px;padding:6px 8px;border:3px solid #222;border-radius:10px;font-weight:700}
button{font:inherit;font-weight:800;background:#fff;border:3px solid #222;border-radius:10px;padding:6px 10px;cursor:pointer;box-shadow:3px 3px 0 #222}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #222}
#zipform button{background:#ff6b4a;color:#fff}
#townname{background:#fff;border:3px solid #222;border-radius:10px;padding:6px 10px;font-weight:800;box-shadow:3px 3px 0 #222}
#townname:empty{display:none}
#info{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;background:#fff;border:3px solid #222;border-radius:14px;padding:10px 16px;box-shadow:4px 4px 0 #222;text-align:center;min-width:220px;max-width:min(380px,92vw)}
#info .n{font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;line-height:1.15}#info .t{color:#555;text-transform:capitalize}
#info.star{background:#fff3c4}
#info .pill{display:none}
#tip{position:fixed;pointer-events:none;background:#222;color:#fff;padding:4px 8px;border-radius:6px;font-size:13px;font-weight:700;z-index:5}
#list{position:fixed;top:64px;right:10px;width:260px;max-height:60vh;overflow:auto;background:#fff;border:3px solid #222;border-radius:12px;box-shadow:4px 4px 0 #222;padding:6px}
#list div{padding:6px 8px;border-radius:8px;cursor:pointer}#list div:hover{background:#ffe680}
#list small{color:#666;text-transform:capitalize}
.hidden{display:none!important}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(159,216,255,.85);z-index:10}
#loading .card{background:#fff;border:3px solid #222;border-radius:16px;padding:20px 28px;box-shadow:5px 5px 0 #222;font-weight:800;text-align:center;max-width:80vw}
.spinner{font-size:40px;animation:b 0.6s infinite alternate}@keyframes b{to{transform:translateY(-8px)}}
#help{position:fixed;left:10px;bottom:30px;background:rgba(255,255,255,.85);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
#attrib{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.85);font-size:11px;padding:3px 8px;text-align:right}
#touch{display:none}
@media (pointer:coarse){#touch{display:block}#help{display:none}}
#touch .pad{position:fixed;bottom:40px;display:flex;gap:12px}
#touch .left{left:16px}#touch .right{right:16px}
#touch button{width:70px;height:70px;font-size:28px;border-radius:50%;opacity:.85;touch-action:none}
#touch #resetbtn{position:fixed;right:16px;bottom:124px;width:auto;height:auto;font-size:14px;font-weight:800;border-radius:10px;padding:6px 10px;background:#fff;border:2px solid #222;box-shadow:2px 2px 0 #222}
#street{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:#1b5e20;color:#fff;border:3px solid #fff;outline:3px solid #222;border-radius:10px;padding:6px 14px;font-weight:900;font-size:18px;box-shadow:4px 4px 0 #222;white-space:nowrap}
.claimbtn{margin-top:8px;font:inherit;font-weight:800;background:#ffd54f;border:2px solid #222;border-radius:10px;padding:6px 12px;cursor:pointer;box-shadow:2px 2px 0 #222}
.claimbtn:hover{background:#ffca28}
#claim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:center;justify-content:center;padding:12px}
#claim .card{position:relative;background:#fff;border:3px solid #222;border-radius:16px;box-shadow:5px 5px 0 #222;padding:16px 18px;width:min(420px,100%);max-height:92vh;overflow:auto;font-family:inherit}
#claim h2{margin:0 0 2px;font-size:22px}#claim .sub{margin:0 0 10px;color:#555}
#claim label{display:block;font-weight:700;margin:8px 0;font-size:14px}#claim small{font-weight:400;color:#666}
#claim input:not([type=checkbox]),#claim textarea{display:block;width:100%;box-sizing:border-box;margin-top:3px;font:inherit;padding:7px 9px;border:2px solid #222;border-radius:8px}
#claim .chk{display:flex;gap:8px;align-items:center}
#claim .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#claim .priv{font-size:13px;color:#2e7d32;margin:10px 0 6px}
#claim .msg{min-height:18px;font-size:14px;margin-bottom:6px}#claim .msg.bad{color:#c62828;font-weight:700}
#claim .go{width:100%;font:inherit;font-weight:900;font-size:17px;background:#4caf50;color:#fff;border:3px solid #222;border-radius:12px;padding:9px;cursor:pointer;box-shadow:3px 3px 0 #222}
#claim .go:disabled{opacity:.6;cursor:wait}
#claim .x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:20px;cursor:pointer}

/* ---------- mobile / touch layout: nothing may sit over the touch controls ---------- */
#attrbtn,#credit,#attrclose{display:none}
:root{--tb:64px;--ctl:0px;--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
@media (pointer:coarse),(max-width:700px){
  :root{--ctl:calc(176px + var(--sb))}
  #topbar{top:calc(6px + var(--st));left:calc(6px + var(--sl));right:calc(6px + var(--sr));gap:5px}
  .logo{font-size:14px;padding:4px 8px}
  #topbar button,#zipform button{padding:4px 8px;font-size:14px}
  #zipform input{width:64px;font-size:16px;padding:4px 6px}
  #townname{font-size:13px;padding:4px 8px}
  #attrbtn{display:inline-block;width:34px;padding:4px 0;font-size:16px}
  #help{display:none!important}
  /* credits collapse into the i button; full panel opens under the top bar */
  #attrib{display:none;position:fixed;top:var(--tb);left:calc(8px + var(--sl));right:calc(8px + var(--sr));bottom:auto;max-height:calc(100% - var(--tb) - var(--ctl));overflow:auto;z-index:9;
    background:#fff;border:3px solid #222;border-radius:12px;box-shadow:4px 4px 0 #222;padding:10px 34px 10px 12px;font-size:13px;line-height:1.45;text-align:left}
  body.attr-open #attrib{display:block}
  #attrclose{display:block;position:absolute;right:6px;top:6px;padding:0 6px;font-size:14px;box-shadow:none;border-width:2px}
  /* status / info boxes stack at the top, never in the controls zone */
  #hud{position:fixed;top:var(--tb);left:calc(8px + var(--sl));right:calc(8px + var(--sr));max-height:calc(100% - var(--tb) - var(--ctl));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:4;overflow:hidden}
  #hud>*{position:static;transform:none;flex:0 0 auto}
  #credit{display:block;pointer-events:auto;background:rgba(255,255,255,.88);border:0;box-shadow:none;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #street{font-size:15px;padding:3px 10px;pointer-events:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  /* compact claim pill: one line, <=40px, semi-transparent; tap to expand */
  #info{pointer-events:auto;min-width:0;width:auto;max-width:min(360px,100%);max-height:38px;overflow:hidden;flex:0 0 auto;padding:0;border-width:2px;border-radius:19px;
    background:rgba(255,255,255,.78);box-shadow:2px 2px 0 rgba(34,34,34,.6)}
  #info.star{background:rgba(255,243,196,.82)}
  #info .pill{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;cursor:pointer;white-space:nowrap}
  #info .pn{font-weight:900;font-size:14px;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #info .pclaim{flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;background:#e65100;border-radius:12px;padding:3px 9px;text-decoration:none;cursor:pointer}
  #info .chev{flex:0 0 auto;font-size:12px;color:#444;transition:transform .15s}
  #info .det{display:none;padding:0 12px 8px}
  #info .det .n{display:none}
  #info.open{max-height:100%;overflow:auto;border-radius:14px;background:rgba(255,255,255,.95);width:min(360px,100%)}
  #info.open .det{display:block}
  #info.open .chev{transform:rotate(180deg)}
  #info .claimbtn{font-size:14px;padding:4px 10px}
  #list{top:var(--tb);right:calc(8px + var(--sr));left:auto;width:min(300px,calc(100% - 16px - var(--sl) - var(--sr)));max-height:calc(100% - var(--tb) - var(--ctl));z-index:6}
  #touch .pad{bottom:calc(14px + var(--sb))}
  #touch .left{left:calc(14px + var(--sl))}#touch .right{right:calc(14px + var(--sr))}
  #touch #resetbtn{right:calc(14px + var(--sr));bottom:calc(96px + var(--sb))}
  #touch button{width:66px;height:66px}
  #claim{padding:calc(8px + var(--st)) calc(8px + var(--sr)) calc(8px + var(--sb)) calc(8px + var(--sl))}
  #claim .card{max-height:100%}
}
/* short landscape phones: pads sit in the side columns, so overlays use the centre column down to the bottom edge */
@media ((pointer:coarse) or (max-width:700px)) and (orientation:landscape) and (max-height:520px){
  :root{--side:calc(180px + max(var(--sl),var(--sr)))}
  #townname{display:none}
  #hud{left:var(--side);right:var(--side);max-height:calc(100% - var(--tb) - 8px - var(--sb));flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:4px 6px}
  #credit{flex:0 0 100%}
  #street{font-size:13px;padding:2px 8px;max-width:45%}
  #info{max-width:min(300px,100%)}
  #list{right:var(--side);width:min(300px,calc(100% - 2 * var(--side)));max-height:calc(100% - var(--tb) - 8px - var(--sb))}
  #attrib{left:var(--side);right:var(--side);max-height:calc(100% - var(--tb) - 8px - var(--sb))}
}
/* Featured storefronts (paid upgrade) */
#info.feat{background:#fff8d6;border-color:#b8860b;box-shadow:4px 4px 0 #b8860b}
#info .fspecial{margin:6px 0 2px;font-weight:800;color:#bf360c}
#info .fhours{font-size:13px;color:#444;margin:4px 0}
#info .fbtns{display:flex;gap:8px;justify-content:center;margin:6px 0 2px}
#info .fbtn{font-weight:800;font-size:14px;color:#222;background:#ffd54f;border:2px solid #222;border-radius:10px;padding:4px 10px;text-decoration:none}
#info .ftest{font-size:11px;font-weight:800;color:#6a1b9a}
#claim .up .uplist,#claim .up .upsteps{margin:6px 0 10px 20px;padding:0;font-size:15px}#claim .up li{margin:3px 0}
#claim .upprice{font-size:24px;font-weight:900;margin-top:4px}#claim .upterms{margin:0 0 10px;color:#555;font-size:13px}#claim .upnote{margin:8px 0 10px;font-size:14px;background:#f1f8e9;border:2px solid #7cb342;border-radius:10px;padding:8px 10px}
#claim a.go{display:block;text-align:center;text-decoration:none;box-sizing:border-box}#claim .gstar{color:#f9a825}
#claim .up .go{background:#ffb300;color:#222}
#special{position:fixed;left:50%;top:112px;transform:translate(-50%,-30px);opacity:0;pointer-events:none;z-index:15;background:#fff8d6;border:3px solid #222;border-radius:16px;box-shadow:5px 5px 0 #b8860b;padding:10px 18px;text-align:center;max-width:min(420px,92vw);transition:opacity .3s,transform .3s}
#special.on{opacity:1;transform:translate(-50%,0)}
#special .sh{font-weight:900;color:#bf360c;font-size:14px;text-transform:uppercase;letter-spacing:.5px}#special .sb{font-weight:900;font-size:20px;margin:2px 0}#special .sn{font-size:13px;color:#555}
@media (pointer:coarse),(max-width:700px){#info.feat{background:rgba(255,248,214,.92)}#info .upbtn{font-size:13px}#special{top:calc(var(--tb) + 8px + var(--st))}}
/* v21: info-card layout, promos, consistent buttons */
#info .t{font-size:14px;margin-top:2px}#info .pnote{font-size:13px;margin-top:4px}
#info .fbadge,#info .vbadge{font-size:11px;font-weight:800;letter-spacing:.3px;border-radius:999px;padding:2px 8px;border:2px solid #222;text-transform:uppercase}
#info .fbadge{background:#ffd54f}#info .vbadge{background:#e8f5e9;border-color:#2e7d32;color:#1b5e20;text-transform:none}
#info .fspecial{margin:8px 0 4px;font-weight:700;color:#bf360c;font-size:15px}
#info .fhours{font-size:13px;color:#444;margin:6px 0;line-height:1.35}
#info .fbtns{gap:8px;margin:8px 0 2px}#info .fbtn{min-width:96px;box-shadow:2px 2px 0 #222}
#info .fpromo{margin:8px 0 4px;background:#fff;border:2px dashed #b8860b;border-radius:12px;padding:6px 10px;text-align:left}
#info .fpk,#info .ptk{font-size:11px;font-weight:900;color:#ad1457;text-transform:uppercase;letter-spacing:.5px}
#info .fpt{font-weight:900;font-size:17px;line-height:1.2}#info .fpd{font-size:13px;color:#444;margin-top:2px;line-height:1.3}
#info .fpm{font-size:12px;color:#555;margin-top:3px}#info .pcode,#special .pcode{font-family:ui-monospace,Menlo,Consolas,monospace;background:#fce4ec;border:1px solid #ad1457;border-radius:6px;padding:0 5px;letter-spacing:.5px}
#info .ptag{margin:8px 0 2px;background:#fff0f5;border:2px solid #ad1457;border-radius:10px;padding:5px 9px;font-weight:800;font-size:14px;text-align:left}
#info .ptag .fpd{font-weight:400}
#info .ftest{margin-top:6px;font-size:11px;font-weight:800;color:#6a1b9a}
#info .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
#info .acts button{margin:0;font:inherit;font-weight:800;font-size:14px;line-height:1.2;border:2px solid #222;border-radius:10px;padding:6px 12px;cursor:pointer;box-shadow:2px 2px 0 #222}
#info .acts button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #222}
#info .claimbtn{background:#ffd54f}#info .upbtn{background:#fff;color:#222}#info .upbtn .ico{color:#f9a825}#info .upbtn:hover{background:#fff8e1}
#info .ppromo{flex:0 0 auto;font-size:14px}
#special .sp.sep{margin-top:6px;padding-top:6px;border-top:2px dashed #b8860b}#special .sp .sh{color:#ad1457}#special .spm{font-size:13px;color:#444;margin-bottom:2px}
@media (pointer:coarse),(max-width:700px){#info .acts button{font-size:13px;padding:5px 10px}#info .fpt{font-size:15px}#special .sb{font-size:17px}}
/* ---- v22 gameplay: Play button, panel, toast ---- */
#playbtn{background:#ffe680;border:3px solid #222;border-radius:10px;padding:6px 10px;font-weight:900;font-size:15px;box-shadow:3px 3px 0 #222;cursor:pointer;white-space:nowrap}
#playbtn .pchip{background:#fff;border:2px solid #222;border-radius:8px;padding:0 5px;font-size:13px;margin-left:2px}
#playbtn .pchip.coin{background:#fff3c4}
#play{position:fixed;top:64px;right:10px;width:min(420px,calc(100vw - 20px));max-height:calc(100vh - 120px);overflow:auto;background:#fffdf5;border:3px solid #222;border-radius:14px;box-shadow:5px 5px 0 #222;z-index:8;font-size:14px}
#play.hidden{display:none}
#play .phead{position:sticky;top:0;background:#fffdf5;display:flex;align-items:flex-start;gap:6px;padding:8px 8px 6px;border-bottom:2px solid #222;z-index:1}
#play .ptabs{display:flex;flex-wrap:wrap;gap:5px;flex:1}
#play .ptabs button{border:2px solid #222;border-radius:9px;background:#fff;padding:4px 9px;font-weight:800;font-size:13px;cursor:pointer}
#play .ptabs button[aria-selected=true]{background:#ffd54f;box-shadow:2px 2px 0 #222}
#play .x{border:2px solid #222;background:#fff;border-radius:8px;font-weight:900;cursor:pointer;padding:2px 8px}
#play .pbody{padding:10px 12px 14px}
#play .pprog{display:flex;align-items:center;gap:8px;font-size:15px}
#play .pbar{flex:1;height:14px;border:2px solid #222;border-radius:8px;background:#fff;overflow:hidden}
#play .pbar i{display:block;height:100%;background:linear-gradient(90deg,#43a047,#9ccc65)}
#play .phint{margin:6px 0 10px;color:#444}
#play .drawbox,#play .syncbox,#play .card2{border:2px solid #222;border-radius:12px;padding:9px 10px;margin:0 0 10px;background:#fff}
#play .drawbox{background:#fff6d6}
#play .dh{font-weight:900;font-size:15px}
#play .dp{font-size:17px;font-weight:800;margin:4px 0}
#play .ds{font-size:13px;font-weight:700;color:#6d4c00}
#play .dlock{font-weight:800;color:#5d4037;margin:6px 0}
#play .dok{font-weight:800;color:#1b5e20;margin:6px 0}
#play .dfine{font-size:12px;color:#555;margin-top:6px}
#play label{display:block;font-weight:700;font-size:13px;margin:5px 0}
#play label input:not([type=checkbox]),#play .row input,#play select,#play textarea{display:block;width:100%;box-sizing:border-box;border:2px solid #222;border-radius:8px;padding:6px 8px;font-size:15px;margin-top:2px;font-family:inherit}
#play label.chk{display:flex;gap:6px;align-items:flex-start;font-weight:600}
#play label.chk input{margin-top:3px;width:18px;height:18px;flex:none}
#play .go,#play .row button,#play .syncbox>div>button,#play .btn2{border:2px solid #222;border-radius:9px;background:#43a047;color:#fff;font-weight:900;padding:7px 12px;cursor:pointer;box-shadow:2px 2px 0 #222;font-size:14px}
#play .go:disabled,#play button:disabled{opacity:.55;cursor:wait}
#play .btn2.alt{background:#fff;color:#222}
#play .row{display:flex;gap:6px;margin-top:6px}
#play .row input{margin:0}
#play .perr{color:#c62828;font-weight:800;font-size:13px;min-height:1em;margin-top:4px}
#play .sh2{font-weight:800}
#play .pcode2{margin-top:8px;background:#e8f5e9;border:2px dashed #2e7d32;border-radius:8px;padding:6px 8px}
#play .pcode2 b{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:1px}
#play details{margin-top:6px}#play summary{cursor:pointer;font-weight:700;font-size:13px}
#play .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#play .pst{border:2px solid #bbb;border-radius:10px;padding:5px 7px;background:#f5f5f5;color:#666;display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:center;min-width:0}
#play .pst.on{border-color:#2e7d32;background:#f1f8e9;color:#1b1b1b}
#play .pst .pic{grid-row:span 2}
#play .pst .pn{font-weight:800;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#play .pst small{font-size:11px;text-transform:capitalize}
#ptoast{position:fixed;left:50%;top:118px;transform:translate(-50%,-12px);opacity:0;pointer-events:none;background:#fff;border:3px solid #222;border-radius:12px;box-shadow:4px 4px 0 #222;padding:8px 14px;font-size:15px;max-width:min(440px,90vw);text-align:center;transition:.25s;z-index:9}
#ptoast.on{opacity:1;transform:translate(-50%,0)}
#ptoast .tsub{font-size:13px;color:#444;margin-top:2px}
@media (pointer:coarse),(max-width:700px){
  #playbtn{padding:4px 8px;font-size:14px}
  #playbtn .pchip{font-size:12px}
  #play{top:var(--tb);right:calc(8px + var(--sr));width:min(420px,calc(100% - 16px - var(--sl) - var(--sr)));max-height:calc(100% - var(--tb) - var(--ctl));z-index:7}
  #ptoast{top:calc(var(--tb) + 46px)}
  #playbtn{position:fixed;left:calc(14px + var(--sl));bottom:calc(96px + var(--sb));z-index:5}
}
@media ((pointer:coarse) or (max-width:700px)) and (orientation:landscape) and (max-height:520px){#playbtn{bottom:calc(92px + var(--sb))}}

/* v22 hotfix: no long-press text selection / callout / tap flash on the game and its HUD buttons */
#app,#app canvas,#touch,#touch button,#playbtn,#play .ptabs button,#hud button,#topbar button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#app canvas{touch-action:none}

/* ---------- v22 calm pass: lighter HUD, one standout accent (gold ★ Featured) ---------- */
:root{--ink:rgba(40,44,52,.55);--soft:0 1px 6px rgba(0,0,0,.14);--glass:rgba(255,255,255,.84)}
button,#townname,#zipform input{border-width:2px;border-color:var(--ink);box-shadow:var(--soft)}
button:active{transform:translateY(1px);box-shadow:none}
#topbar button,#townname,#playbtn{background:var(--glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:14px;padding:5px 10px;border-radius:10px}
.logo{background:rgba(255,250,238,.9);border:2px solid var(--ink);box-shadow:var(--soft);font-size:16px;padding:5px 11px}
#zipform input{font-size:15px;padding:5px 8px}
#zipform button{background:#d98a72;color:#fff}
#playbtn{border:2px solid var(--ink);box-shadow:var(--soft);font-weight:800}
#playbtn .pchip{border:1px solid rgba(40,44,52,.35);background:rgba(255,255,255,.7)}
#townname{font-weight:700;color:#333}
#street{background:rgba(44,92,58,.88);border:2px solid rgba(255,255,255,.85);outline:0;box-shadow:var(--soft);font-size:16px;padding:4px 12px;font-weight:800}
#info{border:2px solid var(--ink);box-shadow:0 2px 12px rgba(0,0,0,.16)}
#info.feat{border-color:#b8860b;box-shadow:0 0 0 2px rgba(184,134,11,.35),0 2px 12px rgba(0,0,0,.16)}
#info .claimbtn{background:#fbeec4}#info .claimbtn,#info .upbtn{border-width:2px;box-shadow:none}
#list,#play,#loading .card{border:2px solid var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.18)}
#play .phead{border-bottom:1px solid rgba(40,44,52,.25)}
#play .ptabs button{border:1px solid var(--ink)}#play .ptabs button[aria-selected=true]{background:#e8eef5;box-shadow:none}
#play .drawbox,#play .syncbox,#play .card2{border:1px solid rgba(40,44,52,.3)}
#play .go,#play .row button,#play .syncbox>div>button,#play .btn2{background:#4f8a5b;border:1px solid rgba(0,0,0,.35);box-shadow:none}
#play .card2 label.chk span{display:block}
#ptoast{border:2px solid var(--ink);box-shadow:0 3px 14px rgba(0,0,0,.16);transition:opacity .45s,transform .45s}
#special{border:2px solid #b8860b;box-shadow:0 3px 16px rgba(184,134,11,.3);transition:opacity .5s,transform .5s}
#touch button{opacity:.72;border-width:2px;box-shadow:var(--soft)}
#touch #resetbtn{border-width:1px;box-shadow:var(--soft);background:var(--glass)}
#help{transition:opacity 1.2s;font-weight:600;opacity:.85}#help.faded{opacity:0;pointer-events:none}
#attrib{background:rgba(255,255,255,.72);color:#444}
.spinner{animation-duration:1.4s}
/* secondary info lives in Play ▸ ⚙️ Settings on phones (frees a whole topbar row) */
@media (pointer:coarse),(max-width:700px){#townname{display:none}}
/* Calm mode (Settings, or automatic with prefers-reduced-motion) */
html.calm #townname,html.calm #help{display:none}
html.calm #street{opacity:.8}
html.calm #touch button{opacity:.6}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition-duration:.01s!important;scroll-behavior:auto!important}
html.calm #ptoast,html.calm #ptoast.on,html.calm #special,html.calm #special.on{transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
#info .acts button{border-color:var(--ink);box-shadow:none}#info .acts button:active{box-shadow:none}
/* v23 clue */
#play .cluebox{background:#f3f6fb}#play .ctext{font-size:16px;font-weight:700;margin:6px 0;line-height:1.35}
#play .cluebox .dlock{font-weight:600;color:#5b6470}
/* v24 missions */
#mhud{position:fixed;left:50%;transform:translateX(-50%);top:62px;z-index:30;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:6px 6px 6px 14px;border-radius:999px;background:rgba(255,253,247,.92);border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:14px;color:#2f3b46}
#mhud.hidden{display:none}#mhud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhud button{border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;width:30px;height:30px;font-size:14px;cursor:pointer;flex:none}
#play .mcard .mr{font-weight:700;margin:4px 0}#play .mcard .go{margin:6px 0}#play .mboard{margin:6px 0 0;padding-left:22px}#play .mboard li{display:flex;justify-content:space-between;gap:8px}#play .mboard li.me{font-weight:800}
#play .linkish{border:0;background:none;color:#2f6f9f;text-decoration:underline;padding:0;font:inherit;cursor:pointer}
@media (max-width:700px),(pointer:coarse){#mhud{top:auto;bottom:142px;font-size:13px}}
#mhud,#mhud button,#play button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#play .ptabs{flex-wrap:wrap;min-width:0;overflow:visible}#play .ptabs button{flex:none;padding:4px 8px}#play .phead>.x{flex:none;align-self:flex-start} /* v30: tabs wrap onto a 2nd row instead of hiding behind the ✕ (was a hidden-scrollbar scroller) */
#play .tlab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mhud .mdir{display:inline-block;font-style:normal;color:#3d7fb0;margin-right:6px;transition:transform .3s ease}
html.calm #mhud .mdir{transition:none}
/* v25 hometown: garage + house label button */
.hbtn,#play .swatches button,#play .cstyles button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hbtn{display:block;margin:8px auto 0;padding:5px 12px;border-radius:999px;border:1px solid #b9c7ad;background:#f6f9f0;color:#3d4a3a;font:600 13px/1.2 inherit;cursor:pointer}
.hbtn:hover{background:#edf3e3}
#play .swatches{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
#play .swatches .sw{width:30px;height:30px;border-radius:50%;border:2px solid rgba(0,0,0,.15);padding:0;cursor:pointer}
#play .swatches .sw.on{outline:3px solid #5b8fb9;outline-offset:2px}
#play .cstyles{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
#play .cstyles button{padding:6px 10px;border-radius:10px;border:1px solid #d5d9dd;background:#fff;cursor:pointer;font:600 13px inherit}
#play .cstyles button.on{background:#eaf3fb;border-color:#5b8fb9}
#play label.sh2 input{display:block;width:100%;margin-top:4px}
#play .hstat{margin:4px 0 8px;padding:8px 10px;border-radius:10px;background:#f6f9f0}
/* v26 starter life sim: needs HUD, job pill, night veil, Life tab */
#needs{position:fixed;left:12px;top:62px;z-index:6;display:flex;flex-direction:column;gap:4px;padding:7px 10px 8px;border-radius:14px;background:rgba(255,253,247,.9);border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 10px rgba(0,0,0,.07);font-size:12px;color:#2f3b46;cursor:pointer;min-width:132px;box-sizing:border-box}
#needs.hidden,#jhud.hidden{display:none}
#needs .nclock{font-weight:700;white-space:nowrap;font-size:12px}
.nbar{position:relative;display:block;height:9px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
#needs .nbar{height:12px;padding-left:18px;background:none;overflow:visible}
#needs .nbar i{position:absolute;left:0;top:-2px;font-style:normal;font-size:11px;line-height:16px}
#needs .nbar b{display:block;height:100%;border-radius:999px;background:#7fb38b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
#needs .nbar::after{content:"";position:absolute;left:18px;right:0;top:0;bottom:0;border-radius:999px;background:rgba(0,0,0,.07);z-index:-1}
.nbar b{display:block;height:100%;background:#7fb38b;border-radius:999px;transition:width .6s ease}
.nbar.low b{background:#d9a35f}
html.calm .nbar b{transition:none}
#jhud{position:fixed;left:50%;transform:translateX(-50%);top:104px;z-index:30;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:6px 6px 6px 14px;border-radius:999px;background:rgba(255,253,247,.92);border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:14px;color:#2f3b46}
#jhud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jhud button{border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;width:30px;height:30px;font-size:14px;cursor:pointer;flex:none}
#nightveil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s linear,background 1.5s linear;z-index:1}
html.calm #nightveil{transition:none}
#play .lneeds{display:flex;flex-direction:column;gap:6px;margin:8px 0}
#play .lrow{display:grid;grid-template-columns:84px 1fr 40px;align-items:center;gap:8px;font-size:14px}
#play .lrow span:last-child{text-align:right;color:#5d6b77;font-size:13px}
#play .lcash{margin:6px 0 8px;font-size:15px}
#play .lcash small{display:block;color:#6b7780;font-size:12px}
#info .lhours{font-size:12px;color:#55636e;margin-top:3px}
#needs,#needs *,#jhud,#jhud button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (max-width:700px),(pointer:coarse){#needs{top:auto;bottom:calc(196px + var(--sb,0px));left:8px;min-width:112px;padding:5px 8px 6px;font-size:11px}#needs .nclock{font-size:11px}#jhud{top:auto;bottom:184px;font-size:13px}}
/* v28 house upgrades & furniture */
#inhud{position:fixed;left:50%;transform:translateX(-50%);top:156px;z-index:30;padding:7px 16px;border-radius:999px;background:rgba(255,253,247,.94);border:1px solid rgba(0,0,0,.14);box-shadow:0 2px 10px rgba(0,0,0,.08);font:600 14px/1.2 inherit;color:#33403a;cursor:pointer}
#inhud.hidden{display:none}
#inhud,#play .hroom button,#play .hshop button,#play .hstore button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (max-width:700px),(pointer:coarse){#inhud{top:auto;bottom:184px;font-size:13px}}
#play .hroom{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px;margin:6px 0 8px;padding:12px 8px 16px;border:6px solid #b9a58c;border-radius:6px;background:repeating-linear-gradient(90deg,#e8d3b0 0 22px,#e2cba6 22px 23px)}
#play .hroom.t1{border-color:#9fb3a0}#play .hroom.t2{border-color:#8aa3b8;background:repeating-linear-gradient(90deg,#ecd8b6 0 26px,#e5cfaa 26px 27px)}
#play .hroom .hdoor{position:absolute;bottom:-6px;left:50%;width:42px;height:6px;margin-left:-21px;background:#fffdf7}
#play .hslot{aspect-ratio:1;min-height:46px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;border-radius:10px;border:2px dashed rgba(90,70,50,.35);background:rgba(255,255,255,.35);cursor:pointer;font:inherit}
#play .hslot span{font-size:24px;line-height:1}#play .hslot .plus{font-size:16px;color:rgba(90,70,50,.5)}
#play .hslot small{font-size:9.5px;line-height:1.1;color:#4b4036;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#play .hslot.on{border-style:solid;border-color:rgba(90,70,50,.25);background:rgba(255,255,255,.7)}
#play .hslot.sel{outline:3px solid #5b8fb9;outline-offset:1px}
#play .hstore{display:flex;flex-wrap:wrap;gap:6px}#play .hstore button{padding:6px 10px;border-radius:10px;border:1px solid #d5d9dd;background:#fff;cursor:pointer;font:600 13px inherit}
#play .hshop{display:flex;flex-direction:column;gap:6px}
#play .hitem{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px}
#play .hitem .hic{font-size:22px;text-align:center}#play .hitem .hn{font-weight:600;font-size:14px}#play .hitem .hn small{display:block;font-weight:400;color:#6b7780;font-size:12px}
#play .hitem button{padding:5px 10px;border-radius:999px;border:1px solid #b9c7ad;background:#f6f9f0;font:600 13px inherit;cursor:pointer}
#play .hitem button:disabled,#play .drawbox button.go:disabled{cursor:default}
#play .hitem.lock{opacity:.6}#play .hitem .hl{font-size:12px;color:#6b7780;white-space:nowrap}

/* v30: nickname + PIN forms */
#play .pinrow{flex-wrap:wrap}#play .pinrow input:not(.pin){flex:1 1 100%}#play .pinrow .pin{flex:1 1 64px;width:auto;min-width:0;text-align:center;letter-spacing:4px;font-weight:800}#play .pinrow button{flex:1 1 auto}#play .pinrow .perr{flex:1 1 100%;margin:0}
#play .pnote{display:block;margin:6px 0 2px;color:#555;font-size:12px}
#play .pinwarn{background:#fff8e1;border:2px dashed #f9a825;border-radius:10px;padding:8px 9px}
#play .syncbox details{margin-top:6px}#play .syncbox summary{cursor:pointer;font-weight:700}
#play .syncbox>div>button[data-act=logout]{background:#fff;color:#222}
/* v32 sign-in gate: first screen, covers the game (which keeps loading underneath) until a player is signed in */
#gate{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));background:linear-gradient(180deg,#9fd8ff 0%,#c9ecff 55%,#8fd06a 55%,#7cc35a 100%);overflow:auto;-webkit-tap-highlight-color:transparent}
#gate.hidden{display:none}
#gate .gcard{background:#fff;border:3px solid #222;border-radius:18px;box-shadow:5px 5px 0 #222;padding:18px 18px 14px;width:min(400px,100%);max-height:100%;overflow:auto}
#gate .gbrand{display:inline-block;background:#ffcf33;border:3px solid #222;border-radius:12px;padding:6px 12px;font-weight:900;font-size:22px;box-shadow:3px 3px 0 #222}
#gate .gtag{margin:12px 0 10px;font-size:15px;line-height:1.35;color:#333}
#gate h2{margin:4px 0 8px;font-size:19px}
#gate .gsub{margin:0 0 8px;font-size:14px;color:#444}
#gate .gform{display:none}
#gate[data-mode=signup] #gsignup,#gate[data-mode=signin] #gsignin,#gate[data-mode=legacy] #glegacy{display:block}
#gate .gwait{display:none;font-weight:800;padding:14px 0}#gate[data-mode=wait] .gwait{display:block}
#gate label{display:block;font-weight:800;font-size:14px;margin:0 0 9px}
#gate input{display:block;width:100%;margin-top:4px;font-size:18px;padding:10px 12px;border:3px solid #222;border-radius:10px;font-weight:700;font-family:inherit}
#gate input[type=password]{letter-spacing:6px}
#gate .gbtn{display:block;width:100%;margin:6px 0 8px;padding:12px;font-size:18px;background:#ff6b4a;color:#fff}
#gate .glink{display:block;width:100%;background:none;border:none;box-shadow:none;padding:8px;font-weight:600;color:#1565c0;font-size:15px}
#gate .glink:active{transform:none}
#gate .gerr{min-height:1.2em;color:#c62828;font-weight:800;font-size:14px;margin:0 0 4px}
#gate .gfine{margin:8px 0 0;font-size:12px;color:#666;line-height:1.3}