/* Back on Track styles, carried over unchanged from the prototype (back-on-track.html), plus the multi-family screens at the end. */
/* Layout: one column, max 720px. Header, then an in-page tab bar (never fixed, so it is always reachable), then the view.
   Four skins, each a committed look with its own fonts, shapes and colours: studio (grown-up), blocks, blossom, jungle, space. */
:root{
  --bg:#EEF1EA; --card:#FFFFFF; --cream:#FFF8E1; --ink:#1A1F17; --muted:#56604F; --line:#12301A; --soft:#E8F1E0; --wait:#F2C94C;
  --accent:#2E7D32; --accentInk:#FFFFFF; --gold:#F9A825; --on:#2E7D32;
  --earth:#6D4C41; --blue:#1565C0; --red:#C62828; --grass:#2E7D32;
  --hdr:#6AAA3A; --hdrInk:#FFFFFF; --tabBg:#3A3A3A; --tabSlot:#5B5B5B; --tabInk:#E6E6E6; --tabOn:#FFFFFF;
  --r:0px; --bw:3px; --shadow:5px 5px 0 var(--line); --btnShadow:3px 3px 0 var(--line);
  --body:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif; --head:'Pixelify Sans','Lexend',monospace; --h1:'Pixelify Sans','Lexend',monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.45 var(--body)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 48px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-family:var(--head);font-size:23px}
h3{font-size:18px}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.block{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.block.cream{background:var(--cream)}
.block.dash{border-style:dashed;box-shadow:none}

.top{position:relative;background:var(--hdr);color:var(--hdrInk);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top h1{font-family:var(--h1);font-size:28px;line-height:1.1;white-space:nowrap}
.top p{font-weight:600;font-size:15px}
.hdr-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.grown{background:rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.85);color:var(--hdrInk);padding:6px 12px;font-size:14px;font-weight:600;border-radius:calc(var(--r) / 2)}

.btn{border:var(--bw) solid var(--line);background:var(--accent);color:var(--accentInk);font-weight:700;padding:10px 16px;border-radius:calc(var(--r) / 1.5);box-shadow:var(--btnShadow)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.gold{background:var(--gold);color:#2A1E00}
.btn.small{padding:6px 10px;font-size:14px;white-space:nowrap}
.btn[disabled]{opacity:.5;cursor:default}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Tabs: in the page flow, directly under the header */
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--tabBg);padding:6px;border-radius:var(--r);border:var(--bw) solid var(--line)}
.tab{background:var(--tabSlot);color:var(--tabInk);border:0;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:calc(var(--r) / 1.5);min-width:0}
.tab svg{width:22px;height:22px}
.tab span{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tab[aria-current="page"]{color:var(--tabOn);outline:3px solid var(--tabOn);outline-offset:-3px}

/* Pieces + tokens */
.jar{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.pips{display:flex;gap:6px}
.pip{width:34px;height:34px;border:3px solid var(--line);background:var(--soft)}
.pip.wait{background:var(--wait)}
.pip.on{background:var(--on)}
.tokens{display:flex;align-items:center;gap:12px}
.coin{width:34px;height:34px;flex-shrink:0;border:3px solid var(--line);background:var(--gold);border-radius:50%}
.big{font-family:var(--head);font-size:34px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.bar{height:14px;border:3px solid var(--line);background:var(--soft);border-radius:var(--r);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--gold)}
.goal{display:flex;flex-direction:column;gap:6px;border-top:3px dashed var(--line);padding-top:10px}
.price{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;white-space:nowrap;background:var(--soft);border:2px solid var(--line);padding:4px 10px;border-radius:999px}
.price .coin{width:18px;height:18px;border-width:2px}

.piece{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.badge{width:48px;height:48px;border:3px solid var(--line);display:grid;place-items:center;color:#fff;border-radius:calc(var(--r) / 1.5)}
.badge svg{width:26px;height:26px}
.piece .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.target{font-weight:700;font-size:18px}
.idea{font-size:14px;color:var(--muted)}
.state{font-size:14px;font-weight:600;padding:4px 10px;border:2px solid var(--line);display:inline-block;border-radius:999px}
.state.wait{background:var(--wait);color:#2A1E00}
.state.ok{background:var(--on);color:#fff}
.piece.done{background:var(--soft)}
.stars{color:#B7791F;font-weight:800;letter-spacing:1px}

.strip{display:flex;gap:6px}
.dbtn{flex:1 1 0;min-width:0;border:var(--bw) solid var(--line);background:var(--card);padding:6px 4px;display:flex;flex-direction:column;align-items:center;font-size:13px;box-shadow:var(--btnShadow);border-radius:calc(var(--r) / 1.5)}
.dbtn b{font-size:15px}
.dbtn.out{color:var(--muted);background:var(--soft)}
.dbtn.sel{background:var(--accent);color:var(--accentInk)}
.notice{border-color:var(--gold)}

.wrow{display:grid;grid-template-columns:60px 1fr;gap:8px;align-items:center;padding:6px 8px;border:3px solid transparent;border-radius:var(--r)}
.wrow.now{border-color:var(--line);background:var(--cream)}
.wrow.off{color:var(--muted)}
.dl{line-height:1.2}
.cells{display:grid;grid-template-columns:repeat(5,minmax(0,52px));gap:6px}
.cell{aspect-ratio:1;width:100%;border:3px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--muted);border-radius:calc(var(--r) / 2)}
.cell svg{width:58%;height:58%}
.cell.t{background:var(--wait);color:var(--ink)}
.cell.a{background:var(--on);color:#fff}
.key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:4px}
.key svg{width:16px;height:16px}

.list{display:flex;flex-direction:column;gap:10px}
.item{border:var(--bw) solid var(--line);background:var(--card);padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:calc(var(--r) / 1.5)}
.item .txt{min-width:0;flex:1 1 200px}
.tag{font-size:12px;font-weight:700;background:var(--gold);color:#2A1E00;padding:2px 8px;border:2px solid var(--line);white-space:nowrap;border-radius:999px}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border:3px solid var(--line);font-weight:700;color:#fff;flex-shrink:0;border-radius:calc(var(--r) / 1.5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chip{background:var(--soft);border:2px solid var(--line);padding:10px 12px;font-weight:600;font-size:15px;border-radius:calc(var(--r) / 1.5)}
.footer{text-align:center;color:var(--accent);font-family:var(--head);font-size:17px}

.wday{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;border:2px solid var(--line);padding:8px 10px;background:var(--card);border-radius:calc(var(--r) / 1.5)}
.wday.off{background:var(--soft);color:var(--muted)}
.mini{display:flex;gap:4px;align-items:center}
.mini i{width:16px;height:16px;border:2px solid var(--line);background:var(--card)}
.mini i.t{background:var(--wait)} .mini i.a{background:var(--on)}

label{font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:4px}
input,select,textarea{font:inherit;font-size:16px;border:2px solid var(--line);padding:8px 10px;background:#fff;color:var(--ink);width:100%;min-width:0;border-radius:calc(var(--r) / 2)}
textarea{min-height:90px;resize:vertical}
.hint{font-weight:400;font-size:13px;color:var(--muted)}
.edit-sec{border:2px dashed var(--line);padding:12px;display:flex;flex-direction:column;gap:8px;border-radius:calc(var(--r) / 1.5);background:var(--card)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs .btn[aria-pressed="true"]{background:var(--accent);color:var(--accentInk)}
.subtabs .btn[aria-pressed="false"]{background:var(--card);color:var(--ink)}
details.guide summary{font-weight:700;cursor:pointer}
details.guide ol{margin:8px 0 0;padding-left:22px;display:grid;gap:6px}

.pinpad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center}
.pinpad button{height:60px;border:var(--bw) solid var(--line);background:var(--card);font-family:var(--head);font-size:22px;box-shadow:var(--btnShadow);border-radius:calc(var(--r) / 1.5)}
.dots{display:flex;gap:10px;justify-content:center}
.dots i{width:18px;height:18px;border:3px solid var(--line);border-radius:50%} .dots i.f{background:var(--ink)}
.timer{font-family:var(--head);font-size:56px;text-align:center;font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:10px 16px;font-weight:600;z-index:9;max-width:calc(100% - 32px);border-radius:10px}

/* Help pop-ups and tour (grown-up area only) */
.help{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 15px/1 var(--body);vertical-align:middle;margin-left:8px;flex-shrink:0;padding:0}
.help:hover{background:var(--soft)}
.hrow{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:rgba(10,12,20,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (min-width:600px){.modal{align-items:center}}
.sheet{background:#fff;color:#1A1F17;max-width:520px;width:100%;border-radius:20px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:var(--body);max-height:85vh;overflow:auto}
.sheet h3{font-size:20px}
.sheet .why{background:#F1F4EF;border-radius:12px;padding:12px 14px}
.sheet .hl{margin:4px 0 0;padding-left:20px;display:grid;gap:6px}
.sheet .step{font-size:13px;color:#5E6A66;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sheet .btn{border-radius:999px}
.tourbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Theme picker tiles: each tile previews its own skin */
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.skin-tile{border:2px solid #1A1F17;background:#fff;padding:0;text-align:left;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;color:#1A1F17}
.skin-tile[aria-pressed="true"]{outline:4px solid #F9A825;outline-offset:3px}
.skin-tile .sw{height:64px;display:grid;place-items:center;font-size:24px}
.skin-tile .sp{display:flex;gap:5px;padding:10px 12px 4px}
.skin-tile .sp i{width:18px;height:18px}
.skin-tile b{padding:2px 12px 2px;font-size:16px}
.skin-tile small{padding:0 12px 12px;font-size:13px;color:#56604F}
.t-studio .sw{background:linear-gradient(135deg,#2F4A44,#4F6F66);color:#fff;font-family:'Fraunces',serif}
.t-studio .sp i{border-radius:50%;border:2px solid #2F4A44}.t-studio .sp i.on{background:#2F4A44}
.t-blocks .sw{background-color:#6AAA3A;background-image:conic-gradient(#5A9630 25%,transparent 0 50%,#5A9630 0 75%,transparent 0);background-size:12px 12px;border-bottom:10px solid #8A5A3B;color:#fff;font-family:'Pixelify Sans',monospace}
.t-blocks .sp i{border:2px solid #222;background:#8B8B8B}.t-blocks .sp i.on{background:linear-gradient(#6AAA3A 0 40%,#8A5A3B 40%)}
.t-blossom .sw{background:linear-gradient(135deg,#F48FB1,#B39DDB);color:#fff;font-family:'Pacifico',cursive}
.t-blossom .sp i{border:2px solid #AD1457;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#FCE4EC}.t-blossom .sp i.on{background:#EC407A}
.t-jungle .sw{background:radial-gradient(ellipse at 20% 0,#7CB342 0 30%,transparent 31%),radial-gradient(ellipse at 80% 10%,#9CCC65 0 25%,transparent 26%),#2E6B30;color:#FFE082;font-family:'Luckiest Guy',cursive}
.t-jungle .sp i{border:2px solid #5D4037;border-radius:50%;background:#F1E4C8}.t-jungle .sp i.on{background:#FB8C00}

/* ===================== Skin: STUDIO (grown-up, calm and sophisticated) ===================== */
:root[data-skin="studio"]{
  --bg:#F4F2EE; --card:#FFFFFF; --cream:#F7F4EC; --ink:#1F2A27; --muted:#5E6A66; --line:#D9D4CA; --soft:#ECEFEC; --wait:#E9C46A;
  --accent:#2F4A44; --accentInk:#FFFFFF; --gold:#C9A227; --on:#2F4A44;
  --earth:#8C6A5A; --blue:#3D5A80; --red:#A4504A; --grass:#4F7D6B;
  --hdr:#2F4A44; --hdrInk:#FFFFFF; --tabBg:#FFFFFF; --tabSlot:transparent; --tabInk:#5E6A66; --tabOn:#2F4A44;
  --r:16px; --bw:1px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(31,42,39,.06); --btnShadow:none;
  --body:'DM Sans',system-ui,sans-serif; --head:'Fraunces',Georgia,serif; --h1:'Fraunces',Georgia,serif}
:root[data-skin="studio"] .top{background:linear-gradient(135deg,#2F4A44,#4F6F66);border:0}
:root[data-skin="studio"] .top h1{font-weight:700;font-size:30px;letter-spacing:.2px}
:root[data-skin="studio"] h2{font-weight:600}
:root[data-skin="studio"] .grown{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08);border-radius:999px}
:root[data-skin="studio"] .btn{border-width:1px;border-radius:999px;border-color:transparent}
:root[data-skin="studio"] .btn.ghost{border-color:var(--line)}
:root[data-skin="studio"] .tab[aria-current="page"]{outline:0;box-shadow:inset 0 -3px 0 var(--tabOn)}
:root[data-skin="studio"] .pip{border-radius:50%;border:2px solid var(--accent);background:transparent}
:root[data-skin="studio"] .pip.wait{background:var(--wait);border-color:#B8962E}
:root[data-skin="studio"] .coin{background:radial-gradient(circle at 35% 35%,#F3DD8A,#C9A227 60%,#9C7A12);border:0}
:root[data-skin="studio"] .goal{border-top:1px solid var(--line)}
:root[data-skin="studio"] .bar{border:0;height:8px;border-radius:999px;background:#E3E6E2}
:root[data-skin="studio"] .bar>i{background:var(--accent);border-radius:999px}
:root[data-skin="studio"] .state,:root[data-skin="studio"] .tag,:root[data-skin="studio"] .price{border-width:1px}
:root[data-skin="studio"] .cell,:root[data-skin="studio"] .mini i{border-width:1px;border-radius:50%}
:root[data-skin="studio"] .wrow.now{border-width:1px}

/* ===================== Skin: BLOCKS (pixel blocks, inventory slots, gem tokens, XP bar, hotbar) ===================== */
:root[data-skin="blocks"]{
  --bg:#EEF1EA; --card:#FFFFFF; --cream:#FFF8E1; --ink:#1A1F17; --muted:#56604F; --line:#12301A; --soft:#E8F1E0; --wait:#F2C94C;
  --accent:#2E7D32; --accentInk:#FFFFFF; --gold:#F9A825; --on:#6AAA3A;
  --hdr:#6AAA3A; --tabBg:#3A3A3A; --tabSlot:#5B5B5B; --tabInk:#E6E6E6; --tabOn:#FFFFFF;
  --r:0px; --bw:3px; --shadow:inset 3px 3px 0 rgba(255,255,255,.55),inset -3px -3px 0 rgba(0,0,0,.07),5px 5px 0 var(--line);
  --btnShadow:inset 3px 3px 0 rgba(255,255,255,.28),inset -3px -3px 0 rgba(0,0,0,.28),3px 3px 0 var(--line);
  --body:'Lexend',system-ui,sans-serif; --head:'Pixelify Sans','Lexend',monospace; --h1:'Pixelify Sans','Lexend',monospace}
:root[data-skin="blocks"] .top{padding-bottom:30px;background-image:conic-gradient(#5A9630 25%,transparent 0 50%,#5A9630 0 75%,transparent 0);background-size:16px 16px}
:root[data-skin="blocks"] .top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background-color:#8A5A3B;background-image:conic-gradient(#6E452C 25%,transparent 0 50%,#6E452C 0 75%,transparent 0);background-size:8px 8px;border-top:4px solid #5A9630}
:root[data-skin="blocks"] .top h1{text-shadow:2px 2px 0 rgba(0,0,0,.35)}
:root[data-skin="blocks"] .top p{text-shadow:1px 1px 0 rgba(0,0,0,.3)}
:root[data-skin="blocks"] .top.grownup{background-color:#8A5A3B;background-image:conic-gradient(#6E452C 25%,transparent 0 50%,#6E452C 0 75%,transparent 0)}
:root[data-skin="blocks"] .top.grownup::after{background-color:#7D7D7D;background-image:conic-gradient(#6B6B6B 25%,transparent 0 50%,#6B6B6B 0 75%,transparent 0);border-top-color:#5E5E5E}
:root[data-skin="blocks"] .btn{text-shadow:1px 1px 0 rgba(0,0,0,.35)}
:root[data-skin="blocks"] .btn.ghost,:root[data-skin="blocks"] .btn.gold{text-shadow:none}
:root[data-skin="blocks"] .btn.ghost{box-shadow:inset 3px 3px 0 rgba(255,255,255,.6),inset -3px -3px 0 rgba(0,0,0,.12),3px 3px 0 var(--line)}
:root[data-skin="blocks"] .pips{gap:4px;background:#8B8B8B;padding:4px;border:3px solid var(--line);width:max-content}
:root[data-skin="blocks"] .pip{border:0;background:#8B8B8B;box-shadow:inset 3px 3px 0 #373737,inset -3px -3px 0 #fff}
:root[data-skin="blocks"] .pip.wait{background:#F2C94C;box-shadow:inset 3px 3px 0 #FFF2B0,inset -3px -3px 0 #B88A12}
:root[data-skin="blocks"] .pip.on{background:linear-gradient(#6AAA3A 0 38%,#8A5A3B 38%);box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.3)}
:root[data-skin="blocks"] .cell.a,:root[data-skin="blocks"] .mini i.a{background:linear-gradient(#6AAA3A 0 40%,#8A5A3B 40%)}
:root[data-skin="blocks"] .coin{border-radius:0;transform:rotate(45deg) scale(.85);background:linear-gradient(135deg,#7CF5A8 0 22%,#17C45A 22% 60%,#0B7F3A 60%)}
:root[data-skin="blocks"] .bar{background:#2B2B2B}
:root[data-skin="blocks"] .bar>i{background:#7ED321;background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(0,0,0,.35) calc(10% - 2px) 10%);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
:root[data-skin="blocks"] .state.ok{background:linear-gradient(#6AAA3A 0 40%,#2E7D32 40%);border-radius:0}
:root[data-skin="blocks"] .tab{box-shadow:inset 3px 3px 0 rgba(0,0,0,.45),inset -3px -3px 0 rgba(255,255,255,.12);border:2px solid #000}
:root[data-skin="blocks"] .price,:root[data-skin="blocks"] .state,:root[data-skin="blocks"] .tag{border-radius:0}

/* ===================== Skin: BLOSSOM (soft pinks, scalloped edges, heart pieces, sparkle gems) ===================== */
:root[data-skin="blossom"]{
  --bg:#FBF0F6; --card:#FFFFFF; --cream:#FFF5FA; --ink:#3B1F33; --muted:#7A5670; --line:#E7B3CF; --soft:#FCE4EC; --wait:#FFE08A;
  --accent:#C2185B; --accentInk:#FFFFFF; --gold:#F8C8DC; --on:#EC407A;
  --earth:#B07AA1; --blue:#7E57C2; --red:#E91E63; --grass:#AB47BC;
  --hdr:#EC6FA0; --hdrInk:#FFFFFF; --tabBg:#FFFFFF; --tabSlot:#FCE4EC; --tabInk:#7A5670; --tabOn:#C2185B;
  --r:24px; --bw:2px; --shadow:0 6px 0 #F3C6DC; --btnShadow:0 4px 0 #9C1450;
  --body:'Nunito',system-ui,sans-serif; --head:'Fredoka','Nunito',sans-serif; --h1:'Pacifico',cursive}
:root[data-skin="blossom"] .top{background:linear-gradient(135deg,#F48FB1,#B39DDB);border:0;padding-bottom:30px;box-shadow:none}
:root[data-skin="blossom"] .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:16px;background:radial-gradient(circle at 12px 16px,var(--bg) 11px,transparent 12px) repeat-x;background-size:24px 16px}
:root[data-skin="blossom"] .top h1{font-weight:400;font-size:30px;line-height:1.45;text-shadow:0 2px 0 rgba(156,20,80,.25)}
:root[data-skin="blossom"] .top.grownup{background:linear-gradient(135deg,#9575CD,#7E57C2)}
:root[data-skin="blossom"] h2{font-weight:600;color:#9C1450}
:root[data-skin="blossom"] .grown{border-radius:999px;background:rgba(255,255,255,.2);border:2px solid #fff}
:root[data-skin="blossom"] .btn{border:0;border-radius:999px}
:root[data-skin="blossom"] .btn.ghost{border:2px solid var(--line);box-shadow:0 4px 0 #F3C6DC}
:root[data-skin="blossom"] .btn.gold{background:#FFD1E3;color:#7A1240;box-shadow:0 4px 0 #E7A3C1}
:root[data-skin="blossom"] .tabs{border-radius:999px;padding:6px 8px}
:root[data-skin="blossom"] .tab{border-radius:999px}
:root[data-skin="blossom"] .tab[aria-current="page"]{outline:0;background:var(--accent);color:#fff}
:root[data-skin="blossom"] .pip{width:28px;height:28px;margin:4px 6px 8px;border:2px solid #C2185B;background:#FFF;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
:root[data-skin="blossom"] .pip.wait{background:var(--wait)}
:root[data-skin="blossom"] .pip.on{background:#EC407A;box-shadow:0 0 0 3px #FCE4EC,0 0 12px rgba(236,64,122,.6)}
:root[data-skin="blossom"] .coin{border-radius:4px;transform:rotate(45deg) scale(.85);border:2px solid #9C1450;background:linear-gradient(135deg,#FFFFFF 0 20%,#F8BBD0 20% 55%,#EC407A 55%)}
:root[data-skin="blossom"] .bar{border:2px solid var(--line);border-radius:999px;background:#FFF}
:root[data-skin="blossom"] .bar>i{background:linear-gradient(90deg,#F48FB1,#CE93D8);border-radius:999px}
:root[data-skin="blossom"] .goal{border-top:2px dotted var(--line)}
:root[data-skin="blossom"] .badge{border:0;border-radius:50%}
:root[data-skin="blossom"] .cell,:root[data-skin="blossom"] .mini i{border-radius:50%;border-width:2px}

/* ===================== Skin: JUNGLE (leaves, wooden planks, fruit pieces, bold adventure lettering) ===================== */
:root[data-skin="jungle"]{
  --bg:#EEF4E1; --card:#FFFDF5; --cream:#FFF6DC; --ink:#22301A; --muted:#5B6B4C; --line:#5D4037; --soft:#E6EFD2; --wait:#FFD54F;
  --accent:#E65100; --accentInk:#FFFFFF; --gold:#FFB300; --on:#FB8C00;
  --earth:#795548; --blue:#00897B; --red:#D84315; --grass:#558B2F;
  --hdr:#2E6B30; --hdrInk:#FFF3C4; --tabBg:#6D4C41; --tabSlot:#8D6E63; --tabInk:#FFF3C4; --tabOn:#FFD54F;
  --r:18px; --bw:3px; --shadow:0 5px 0 #A1887F; --btnShadow:0 4px 0 #8C3B00;
  --body:'Nunito',system-ui,sans-serif; --head:'Luckiest Guy','Nunito',cursive; --h1:'Luckiest Guy','Nunito',cursive}
:root[data-skin="jungle"] .top{border:0;padding-bottom:28px;background:radial-gradient(ellipse 60px 34px at 8% -6px,#7CB342 0 95%,transparent),radial-gradient(ellipse 50px 30px at 34% -8px,#9CCC65 0 95%,transparent),radial-gradient(ellipse 70px 36px at 66% -10px,#689F38 0 95%,transparent),radial-gradient(ellipse 55px 30px at 94% -6px,#8BC34A 0 95%,transparent),#2E6B30;box-shadow:0 5px 0 #1B4D1E}
:root[data-skin="jungle"] .top::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:6px;background:repeating-linear-gradient(90deg,#8D6E63 0 18px,#6D4C41 18px 22px);border-radius:999px;margin:0 14px}
:root[data-skin="jungle"] .top h1{font-size:32px;letter-spacing:1px;text-shadow:3px 3px 0 #1B4D1E}
:root[data-skin="jungle"] .top.grownup{background:#5D4037;box-shadow:0 5px 0 #3E2723}
:root[data-skin="jungle"] h2{letter-spacing:1px;color:#2E6B30;font-weight:400}
:root[data-skin="jungle"] .grown{border-radius:12px;border:2px solid #FFF3C4;background:rgba(0,0,0,.2)}
:root[data-skin="jungle"] .btn{border:0;border-radius:14px}
:root[data-skin="jungle"] .btn.ghost{border:3px solid var(--line);box-shadow:0 4px 0 #A1887F}
:root[data-skin="jungle"] .btn.gold{box-shadow:0 4px 0 #B07800}
:root[data-skin="jungle"] .tabs{background:repeating-linear-gradient(90deg,#6D4C41 0 40px,#5D4037 40px 44px)}
:root[data-skin="jungle"] .tab{border:2px solid #4E342E;border-radius:10px}
:root[data-skin="jungle"] .pip{border-radius:50%;border:3px solid #5D4037;background:#F1E4C8}
:root[data-skin="jungle"] .pip.on{background:radial-gradient(circle at 35% 30%,#FFE0B2 0 18%,#FB8C00 20% 70%,#E65100);position:relative}
:root[data-skin="jungle"] .pip.on::after{content:"";position:absolute;width:10px;height:6px;background:#43A047;border-radius:50% 0;top:-7px;left:12px}
:root[data-skin="jungle"] .pip{position:relative}
:root[data-skin="jungle"] .pip.wait{background:var(--wait)}
:root[data-skin="jungle"] .coin{background:radial-gradient(circle at 35% 30%,#FFF59D 0 15%,#FFC107 17% 65%,#FF8F00);border-color:#8C5A00}
:root[data-skin="jungle"] .bar{border-radius:999px;background:#E6EFD2}
:root[data-skin="jungle"] .bar>i{background:repeating-linear-gradient(135deg,#7CB342 0 10px,#689F38 10px 20px);border-radius:999px}
:root[data-skin="jungle"] .goal{border-top:3px dashed #A1887F}
:root[data-skin="jungle"] .cell,:root[data-skin="jungle"] .mini i{border-radius:50%}

/* ===================== Skin: SPACE (starry night header, star pieces, ringed-planet tokens) ===================== */
:root[data-skin="space"]{
  --bg:#EEF0FA; --card:#FFFFFF; --cream:#F4F5FE; --ink:#1B1F3B; --muted:#5A5F80; --line:#2A2F5E; --soft:#E6E8F7; --wait:#BFE3FF;
  --accent:#3949AB; --accentInk:#FFFFFF; --gold:#FFC93C; --on:#FFC93C;
  --earth:#8E6CC4; --blue:#3F7FE0; --red:#E2557A; --grass:#2BA596;
  --hdr:#141A3C; --hdrInk:#FFFFFF; --tabBg:#141A3C; --tabSlot:#232B5E; --tabInk:#C9CEF5; --tabOn:#FFC93C;
  --r:18px; --bw:2px; --shadow:0 6px 18px rgba(20,26,60,.12); --btnShadow:0 3px 0 #232B5E;
  --body:'Nunito',system-ui,sans-serif; --head:'Fredoka','Nunito',sans-serif; --h1:'Orbitron','Fredoka',sans-serif}
:root[data-skin="space"] .top{border:0;background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/34px 34px,radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.6px) 13px 19px/21px 21px,radial-gradient(circle at 85% 120%,#3B2C7A 0 30%,transparent 31%),linear-gradient(135deg,#141A3C,#2A2165)}
:root[data-skin="space"] .top h1{font-weight:800;font-size:25px;letter-spacing:1px;text-shadow:0 0 12px rgba(255,201,60,.45)}
:root[data-skin="space"] .top.grownup{background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/34px 34px,#2A2F5E}
:root[data-skin="space"] h2{font-weight:600;color:#2A2F7E}
:root[data-skin="space"] .grown{border-radius:999px;border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
:root[data-skin="space"] .btn{border:0;border-radius:999px}
:root[data-skin="space"] .btn.ghost{border:2px solid var(--line);box-shadow:none}
:root[data-skin="space"] .btn.gold{color:#1B1F3B;box-shadow:0 3px 0 #C99A10}
:root[data-skin="space"] .tabs{border:0;border-radius:18px}
:root[data-skin="space"] .tab{border-radius:12px}
:root[data-skin="space"] .tab[aria-current="page"]{outline:2px solid var(--tabOn);outline-offset:-2px;box-shadow:0 0 10px rgba(255,201,60,.5)}
:root[data-skin="space"] .pips{gap:4px}
:root[data-skin="space"] .pip{width:38px;height:38px;border:0;background:#D7DAF0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
:root[data-skin="space"] .pip.wait{background:var(--wait)}
:root[data-skin="space"] .pip.on{background:radial-gradient(circle at 50% 45%,#FFF3B0 0 20%,#FFC93C 45%,#F59E0B)}
:root[data-skin="space"] .coin{position:relative;border:0;background:radial-gradient(circle at 35% 30%,#FFD0B5 0 15%,#FF8A65 35%,#D84315 80%)}
:root[data-skin="space"] .coin::after{content:"";position:absolute;left:-9px;right:-9px;top:38%;height:8px;border:2.5px solid #FFC93C;border-radius:50%;transform:rotate(-18deg)}
:root[data-skin="space"] .price .coin::after{left:-5px;right:-5px;height:5px;border-width:1.5px}
:root[data-skin="space"] .bar{border:0;border-radius:999px;background:#E0E3F5;height:12px}
:root[data-skin="space"] .bar>i{background:linear-gradient(90deg,#7C4DFF,#29B6F6);border-radius:999px}
:root[data-skin="space"] .goal{border-top:2px dashed #C9CEF5}
:root[data-skin="space"] .cell,:root[data-skin="space"] .mini i{border-radius:50%}
:root[data-skin="space"] .state.ok{color:#1B1F3B}
@media (max-width:460px){:root[data-skin="space"] .top h1{font-size:19px!important}}
.t-space .sw{background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(135deg,#141A3C,#2A2165);color:#FFC93C;font-family:'Orbitron',sans-serif}
.t-space .sp i{background:#D7DAF0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.t-space .sp i.on{background:#FFC93C}

@media (max-width:520px){.tabs{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}.tab{flex-direction:row;justify-content:center;gap:6px;padding:9px 4px}.tab span{font-size:12px}.tab svg{width:18px;height:18px}}
@media (max-width:460px){.top{flex-wrap:wrap}.grid2{grid-template-columns:1fr}.top h1{font-size:23px!important}.jar{grid-template-columns:1fr}.pip{width:30px;height:30px}}
@media (prefers-reduced-motion:no-preference){.pip.on,.state.ok{animation:pop .25s ease-out}@keyframes pop{from{scale:.85}to{scale:1}}}

/* ===================== Multi-family additions ===================== */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px)}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.kidtag{display:inline-block;font-size:12px;font-weight:700;background:var(--soft);color:var(--ink);border:2px solid var(--line);padding:1px 8px;border-radius:999px;margin-right:4px;vertical-align:1px}
.kidswitch{align-items:center}
.whogrid{width:100%;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.whogrid .skin-tile .sw{height:84px;font-size:38px}
.whogrid .skin-tile b{font-size:19px;text-align:center}
.item[data-act]{cursor:pointer}
@media (display-mode:standalone){body{user-select:none;-webkit-user-select:none}input,textarea{user-select:text;-webkit-user-select:text}}
@media (max-width:460px){.hdr-btns{flex-direction:row;flex-wrap:wrap}}