/* Happy Learning Farm — shared styles for every page. See REQUIREMENTS.md §5 for the design tokens. */
:root{
  --bg:#0C1330; --surface:#16214A; --ink:#EEF2FF; --muted:#A3B2DC; --line:#2E3E78;
  --plus:#3EE6C5; --plus-bg:#0F3A3C; --minus:#FF6B81; --minus-bg:#43192A;
  --zero:#FFD447; --zero-ink:#3A2300; --accent:#F5B93A; --accent-ink:#2E1B00; --stripe:#FFE9A3;
  --street:#121B3E; --sky1:#0E1636; --sky2:#16214A; --walk:#1C2A5C; --road:#121B3E; --lane:#F5C24C;
  --gold:#F5C24C; --gold-hi:#FFEFB0; --gold-dk:#9A6512; --panel-a:#1F2D63; --panel-b:#131B3F; --frame:rgba(245,194,76,.42);
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080D24; --surface:#16214A; --ink:#EEF2FF; --muted:#A3B2DC; --line:#2E3E78;
    --plus:#3EE6C5; --plus-bg:#0F3A3C; --minus:#FF6B81; --minus-bg:#43192A;
    --zero:#FFD447; --zero-ink:#3A2300; --accent:#F5B93A; --accent-ink:#2E1B00; --stripe:#FFE9A3;
    --street:#121B3E; --sky1:#0E1636; --sky2:#16214A; --walk:#1C2A5C; --road:#121B3E; --lane:#F5C24C;
    --gold:#F5C24C; --gold-hi:#FFEFB0; --gold-dk:#9A6512; --panel-a:#1F2D63; --panel-b:#131B3F; --frame:rgba(245,194,76,.42); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#080D24; --surface:#16214A; --ink:#EEF2FF; --muted:#A3B2DC; --line:#2E3E78;
  --plus:#3EE6C5; --plus-bg:#0F3A3C; --minus:#FF6B81; --minus-bg:#43192A;
  --zero:#FFD447; --zero-ink:#3A2300; --accent:#F5B93A; --accent-ink:#2E1B00; --stripe:#FFE9A3;
  --street:#121B3E; --sky1:#0E1636; --sky2:#16214A; --walk:#1C2A5C; --road:#121B3E; --lane:#F5C24C;
  --gold:#F5C24C; --gold-hi:#FFEFB0; --gold-dk:#9A6512; --panel-a:#1F2D63; --panel-b:#131B3F; --frame:rgba(245,194,76,.42); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;background:radial-gradient(120% 70% at 50% -10%,#2B3F92 0%,rgba(43,63,146,0) 60%),radial-gradient(80% 50% at 100% 100%,rgba(120,60,200,.18),transparent 70%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:"Fredoka",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;font-size:18px;line-height:1.45;-webkit-tap-highlight-color:transparent}
main{max-width:760px;margin:0 auto;padding:14px 16px 48px}
button{font:inherit;color:inherit}
h1{font-size:38px;line-height:1.05;margin:4px 0 8px;font-weight:700;letter-spacing:-.5px}
h2{font-size:26px;line-height:1.15;margin:0 0 6px;font-weight:700}
h3{font-size:20px;margin:18px 0 8px;font-weight:600}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.p{color:var(--plus);font-weight:600}.m{color:var(--minus);font-weight:600}

/* top bar */
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.top .title{font-weight:700;font-size:22px;flex:1;min-width:120px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;font-weight:600;cursor:pointer}
.pill .av{width:32px;height:32px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:20px;flex:none}
.pill .who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left;white-space:nowrap}
.pill .who small{font-size:12px;font-weight:700;letter-spacing:.03em}
.pill .who .synctime{font-weight:600;opacity:.85}
.stat{background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:600}
.back{border:2px solid var(--line);background:var(--surface);border-radius:14px;min-width:46px;height:46px;font-size:20px;cursor:pointer}

/* npc bubble */
.npc{display:flex;gap:12px;align-items:flex-start;margin:6px 0 16px}
.face{flex:none;width:62px;height:62px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-size:36px}
.bubble{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:10px 14px;flex:1}
.bubble::before{content:"";position:absolute;left:-9px;top:20px;width:14px;height:14px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble .who{font-size:14px;font-weight:600;color:var(--muted)}
.bubble.good{border-color:var(--plus)}.bubble.good::before{border-color:var(--plus)}
.bubble.bad{border-color:var(--minus)}.bubble.bad::before{border-color:var(--minus)}
.bubble ol{margin:6px 0 6px;padding-left:22px}
.bubble li{margin:2px 0}
.ex{display:inline-block;background:var(--bg);border-radius:10px;padding:1px 8px;font-weight:600;white-space:nowrap}

/* street of shops */
.street{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 14px;padding:16px;border-radius:26px;background:var(--street)}
.shop{--c:#7A4DE0;display:block;text-align:left;padding:0;border:none;background:none;cursor:pointer;border-radius:18px}
.awning{position:relative;height:30px;border-radius:14px 14px 0 0;background:repeating-linear-gradient(90deg,var(--c) 0 26px,var(--stripe) 26px 52px)}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:radial-gradient(circle at 13px 0,var(--c) 11px,transparent 12px) 0 0/52px 12px repeat-x,
             radial-gradient(circle at 39px 0,var(--stripe) 11px,transparent 12px) 0 0/52px 12px repeat-x}
.front{background:var(--surface);border:3px solid var(--c);border-top:none;border-radius:0 0 18px 18px;padding:18px 14px 14px}
.sign{font-weight:700;font-size:19px;line-height:1.15;min-height:44px}
.window{display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px;border-radius:12px;background:var(--bg)}
.window .keeper{font-size:34px}
.window small{color:var(--muted);font-size:14px;line-height:1.25}
.meter{height:10px;border-radius:99px;background:var(--bg);overflow:hidden}
.meter i{display:block;height:100%;background:var(--c);border-radius:99px}
.meta{font-size:15px;font-weight:600;margin-top:6px;color:var(--muted)}
.shop.closed{cursor:default;opacity:.62}
.shop:not(.closed):active .front{transform:translateY(2px)}

/* cards & buttons */
.card{background:var(--surface);border-radius:22px;padding:18px;border:2px solid var(--line)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.b{font-weight:600;font-size:19px;border:none;border-radius:16px;padding:12px 20px;min-height:52px;cursor:pointer;background:var(--accent);color:var(--accent-ink)}
.b.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.b.sm{font-size:16px;min-height:42px;padding:8px 14px}
.b:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* dungeon path */
.path{position:relative;display:flex;flex-direction:column;gap:14px;padding:6px 0 6px}
.path::before{content:"";position:absolute;left:50%;top:20px;bottom:20px;border-left:4px dashed var(--line);transform:translateX(-2px)}
.node{position:relative;display:flex;align-items:center;gap:12px;width:min(88%,420px);padding:10px 14px;border-radius:20px;border:3px solid var(--line);background:var(--surface);cursor:pointer;text-align:left}
.node:nth-child(odd){align-self:flex-start}.node:nth-child(even){align-self:flex-end}
.node .num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px;background:var(--bg)}
.node.open{border-color:var(--accent)}.node.open .num{background:var(--accent);color:var(--accent-ink)}
.node.done{border-color:var(--zero)}.node.done .num{background:var(--zero);color:var(--zero-ink)}
.node.locked{opacity:.5;cursor:not-allowed}
.node.boss{border-width:4px}
.node .nm{font-weight:600;line-height:1.2}
.node .st{font-size:15px;color:var(--muted)}

/* level */
.lvtop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lvtop .nm{flex:1;font-weight:600}
.hearts{font-size:22px;letter-spacing:2px}
.qdots{display:flex;gap:6px;margin-bottom:12px}
.qdots i{flex:1;height:8px;border-radius:99px;background:var(--line)}
.qdots i.on{background:var(--accent)}.qdots i.ok{background:var(--plus)}
.prompt{font-size:22px;font-weight:600;padding:14px;border-radius:16px;background:var(--bg);overflow-x:auto;white-space:nowrap}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.chip{min-width:56px;height:64px;padding:0 8px;border-radius:16px;border:3px solid var(--line);background:var(--surface);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;cursor:pointer;transition:transform .12s}
.chip .s{font-size:19px;font-weight:700;height:20px}
.chip .n{font-size:24px;font-weight:600}
.chip.plus{border-color:var(--plus);background:var(--plus-bg)}.chip.plus .s{color:var(--plus)}
.chip.minus{border-color:var(--minus);background:var(--minus-bg)}.chip.minus .s{color:var(--minus)}
.chip .s.ghost{opacity:.35}
.chip.sel{transform:translateY(-6px);box-shadow:0 0 0 4px var(--accent)}
.chip.used{opacity:.35;cursor:default}
.coin{width:56px;height:56px;border-radius:50%;background:var(--zero);color:var(--zero-ink);display:inline-grid;place-items:center;font-weight:700;font-size:24px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.coin.wide{width:auto;min-width:72px;padding:0 12px;border-radius:28px}
.coinwrap{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.coinwrap small{font-size:12px;color:var(--muted)}
.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.shake{animation:shake .35s}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px}
.pad button{font-size:26px;font-weight:600;height:54px;border-radius:14px;border:2px solid var(--line);background:var(--bg);cursor:pointer}
.pad button.ok{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.display{max-width:300px;height:60px;border-radius:16px;border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;margin:12px 0 8px}
.display:empty::before{content:"?";color:var(--muted)}
.lvnpc{margin-top:16px}

/* result */
.bigstars{font-size:48px;letter-spacing:6px}
.bigstars span{display:inline-block}
.bigface{font-size:72px;line-height:1}

/* shop items */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.item{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px;text-align:center}
.item .e{font-size:46px;line-height:1.1}
.item .nm{font-weight:600;margin:4px 0 8px}
.item .acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.item .acts .b{width:100%}
.item.using{border-color:var(--accent)}

/* players */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.playerrow{display:flex;flex-direction:column;gap:6px}
.playerrow .b{width:100%}
.player{background:var(--surface);border:3px solid var(--line);border-radius:20px;padding:16px;text-align:center;cursor:pointer}
.player .e{font-size:54px;line-height:1.1}
.player .nm{font-weight:700;font-size:20px}
input[type=text]{font:inherit;font-size:18px;padding:10px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);min-width:0;flex:1}

/* progress */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.kpi{background:var(--bg);border-radius:14px;padding:10px 12px}
.kpi b{display:block;font-size:24px}
.kpi span{font-size:14px;color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th,.table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.table th{font-weight:600;color:var(--muted);font-size:14px}
.scroll{overflow-x:auto}
.bar{width:80px;height:8px;border-radius:99px;background:var(--bg);display:inline-block;vertical-align:middle;margin-right:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--plus)}
.bar i.low{background:var(--minus)}
.tag{display:inline-block;font-size:13px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--minus-bg);color:var(--minus)}
.tag.good{background:var(--plus-bg);color:var(--plus)}
.section{margin-bottom:22px}


.townwrap{border-radius:22px;overflow:hidden;border:3px solid var(--line);touch-action:none;user-select:none;-webkit-user-select:none;background:var(--sky2)}
.townwrap canvas{display:block;width:100%;cursor:pointer}
.townhint{font-size:15px;margin:10px 2px}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:440px){.townwrap{margin:0 -16px;border-radius:0;border-left:none;border-right:none}}

.world{position:relative;height:clamp(380px,66vh,680px);border-radius:22px;overflow:hidden;border:3px solid var(--line);touch-action:none;user-select:none;-webkit-user-select:none;background:#BFE3FF}
.world canvas{display:block;width:100%;height:100%;cursor:pointer}
.nogl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#2E1A5C;font-weight:600}
.wtop{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.wtop>*{pointer-events:auto}
.flv{background:rgba(255,255,255,.92);color:#2E1A5C;border-radius:16px;padding:6px 12px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flv small{font-weight:500;color:#6B5C93}
.xpbar{display:inline-block;width:70px;height:8px;border-radius:99px;background:#E3D9FA;overflow:hidden}
.xpbar i{display:block;height:100%;background:#2FA36B}
.camctl{display:grid;grid-template-columns:repeat(2,40px);gap:6px}
.camctl button{width:40px;height:40px;border-radius:12px;border:none;background:rgba(255,255,255,.92);color:#2E1A5C;font-size:20px;font-weight:700;cursor:pointer}
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-10px);background:#2E1A5C;color:#fff;padding:8px 16px;border-radius:99px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sheet{position:absolute;left:10px;right:10px;bottom:10px;background:var(--surface);color:var(--ink);border:3px solid var(--accent);border-radius:22px;padding:14px 16px;display:none;max-height:70%;overflow:auto;animation:rise .2s ease-out}
.sheet.show{display:block}
.sheet h3{margin:0 40px 8px 0}
.sheet-x{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--bg);cursor:pointer;font-size:16px}
.seedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.seed{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:14px;border:2px solid var(--line);background:var(--bg);cursor:pointer}
.seed .e{font-size:30px;line-height:1.1}.seed small{font-size:12px;color:var(--muted)}
.seed:disabled{opacity:.45;cursor:not-allowed}
.pbarw{height:12px;border-radius:99px;background:var(--bg);overflow:hidden;margin:6px 0 8px}
.pbarw i{display:block;height:100%;background:var(--plus);transition:width .4s}
.barn{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin:10px 0}
.bi{background:var(--bg);border-radius:14px;padding:6px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bi .e{font-size:26px}.bi b{font-size:18px}.bi small{font-size:12px;color:var(--muted)}
.swatch{display:inline-block;width:46px;height:46px;border-radius:50%;border:3px solid var(--line)}
@media (max-width:440px){.world{margin:0 -16px;border-radius:0;border-left:none;border-right:none;height:clamp(380px,64vh,640px)}}

/* premium 3D chrome */
.world{height:clamp(420px,72vh,780px);box-shadow:0 18px 40px rgba(46,26,92,.22);border:none}
.world::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(30,12,60,.32) 100%)}
.world>.wtop,.world>.toast,.world>.sheet,.world>.nogl{z-index:3}
.flv{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 18px rgba(30,12,60,.18);border:1px solid rgba(255,255,255,.6)}
.camctl button{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 18px rgba(30,12,60,.18)}
.sheet{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#2E1A5C;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px rgba(30,12,60,.3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet{background:rgba(42,32,69,.86);color:#F2EDFF;border-color:rgba(255,255,255,.12)}}
.mapworld{height:clamp(420px,66vh,720px)}
.lvlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.lvchip{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border-radius:16px;border:2px solid var(--line);background:var(--surface);cursor:pointer}
.lvchip b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg)}
.lvchip span{flex:1;font-weight:600;line-height:1.2}.lvchip small{color:#E0A800;letter-spacing:1px}
.lvchip.open{border-color:var(--accent)}.lvchip.open b{background:var(--accent);color:var(--accent-ink)}
.lvchip.done b{background:var(--zero);color:var(--zero-ink)}.lvchip.locked{opacity:.5}
.boot{min-height:70vh;display:grid;place-items:center;text-align:center;color:var(--muted)}
.boot .coin{width:64px;height:64px;font-size:30px;animation:pop .6s infinite alternate}
/* battle */
body.inbattle{overflow:hidden}
.battle{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;background:#160F2C;color:#F2EDFF;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#1B1430;--surface:#2A2045;--ink:#F2EDFF;--muted:#C2B6E6;--line:#4A3B70;--plus:#3FD6C2;--plus-bg:#123E3A;--minus:#FF7A8C;--minus-bg:#4A1E28;--accent:#A887FF;--accent-ink:#1B1430;--zero:#FFD43B;--zero-ink:#3A2800}
.bstage{position:relative;flex:1 1 auto;min-height:230px;overflow:hidden}
.bstage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.bstage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(10,4,30,.45) 100%)}
.bstage>*:not(canvas){z-index:3}
.bhud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:10px 12px 18px;background:linear-gradient(rgba(10,5,30,.6),transparent)}
.bx{flex:none;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.14);color:#fff;font-size:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
.bmid{flex:1;min-width:0}.bname{font-weight:700;font-size:17px;text-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bprog{display:flex;gap:4px;margin-top:5px}.bprog i{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.22)}.bprog i.on{background:#FFD43B;box-shadow:0 0 10px #FFD43B}.bprog i.ok{background:#3FD6C2}
.bhearts{font-size:20px;letter-spacing:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.qcard{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(22,12,50,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.qlabel{font-size:13px;font-weight:600;color:#FFD43B}
.qexpr{font-size:24px;font-weight:600;white-space:nowrap;overflow-x:auto;padding:2px 0;color:#fff}
.qexpr .p{color:#5FF0D8}.qexpr .m{color:#FF8FA3}
.bpanel{flex:0 0 auto;max-height:56vh;overflow:auto;padding:12px 14px 14px;background:linear-gradient(#251A47,#191131);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -12px 30px rgba(0,0,0,.35)}
.bnpc{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.07);border-radius:16px;padding:8px 12px;font-size:16px;border:1.5px solid rgba(255,255,255,.08)}
.bnpc.good{border-color:#3FD6C2;background:rgba(63,214,194,.1)}.bnpc.bad{border-color:#FF7A8C;background:rgba(255,122,140,.1)}
.bface{font-size:28px;line-height:1}.bnpc ol{margin:4px 0;padding-left:20px}
.coinhint{color:#FFD43B;font-weight:700}
.battle .row{margin:10px 0}
.battle .chip{height:58px}
.livesum{background:rgba(255,255,255,.07);border-radius:12px;padding:8px 12px;font-weight:600}
.battle .display{max-width:none;height:52px;margin:10px 0 8px;border:2px solid #A887FF;background:rgba(0,0,0,.28);color:#fff;font-size:30px}
.battle .pad{max-width:none;gap:8px}
.battle .pad button{height:50px;font-size:24px;background:linear-gradient(#41326E,#2C2150);border:none;color:#fff;border-radius:14px;box-shadow:0 4px 0 #120B26,inset 0 1px 0 rgba(255,255,255,.18)}
.battle .pad button:active{transform:translateY(3px);box-shadow:0 1px 0 #120B26}
.battle .pad button.ok{background:linear-gradient(#FFDF6E,#F2B705);color:#3A2800;box-shadow:0 4px 0 #9C7300}
.battle .b{box-shadow:0 4px 0 rgba(0,0,0,.35)}
.battle .b.ghost{color:#F2EDFF;border-color:rgba(255,255,255,.25)}
.b.big-next{display:block;width:100%;margin-top:12px;background:linear-gradient(#6FF5DF,#28B9A2);color:#06302A;font-size:21px}
.bresult{display:none}
.battle.result .bpanel,.battle.result .qcard{display:none}
.battle.result .bresult{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.rcard{max-width:520px;margin:0 auto;background:rgba(24,14,52,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:18px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45);animation:rise .35s ease-out}
.rtitle{font-size:40px;font-weight:700;line-height:1;background:linear-gradient(#FFF3B0,#FFC93C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3))}
.rsub{color:#C2B6E6;margin:4px 0 6px}
.rcoins{font-size:30px;font-weight:700;color:#FFD43B;display:inline-block}
.rcard .bigstars{font-size:38px}.rcard p{margin:4px 0}.rcard .b{font-size:16px;min-height:44px;padding:8px 14px}.rcard .btns{gap:8px;margin-top:10px}
@media (max-width:440px){.flv small{display:none}.flv{font-size:14px}.rtitle{font-size:34px}}
@media (min-width:900px) and (min-aspect-ratio:1/1){.battle{flex-direction:row}.bpanel{width:400px;max-height:none;height:100%;border-top:none;border-left:1px solid rgba(255,255,255,.1)}.battle.result .bresult{right:0;left:0}}
/* dialog */
#dlg{position:fixed;inset:0;z-index:20;display:none;align-items:flex-end;justify-content:center;background:rgba(20,10,40,.45);padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
#dlg.show{display:flex}
.dlg{display:flex;gap:14px;max-width:720px;width:100%;background:var(--surface);border:3px solid var(--accent);border-radius:24px;padding:16px;animation:rise .25s ease-out}
.dlg .face{width:72px;height:72px;font-size:44px}
.dlg-name{font-weight:700;color:var(--accent)}
.dlg-text{font-size:19px;margin:4px 0 10px;min-height:56px}
.dlg-btns{display:flex;gap:8px;justify-content:flex-end}
.dlg-count{font-size:13px;color:var(--muted);margin-right:auto;align-self:center}

/* ===== epic arena chrome ===== */
h1,h2,.top .title,.dlg-name,.rtitle,.sheet h3{font-family:"Lilita One","Fredoka",ui-rounded,system-ui,sans-serif;font-weight:400;letter-spacing:.5px}
h1,.top .title{background:linear-gradient(180deg,#FFF6CF 0%,#FFD45E 48%,#E39A1F 52%,#FFC94A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5A3508) drop-shadow(0 6px 14px rgba(0,0,0,.45))}
h1{font-size:52px;line-height:1;margin:10px 0 14px;text-align:center}
h2,h3{color:var(--gold-hi)}
.top .title{font-size:28px}
.muted{color:var(--muted)}
.card,.item,.player,.node,.lvchip,.seed,.bi,.kpi,.bubble,.sheet,.dlg,.front{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1.5px solid var(--frame);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.35)}
.player{position:relative;padding:22px 16px 18px;transition:transform .15s,box-shadow .15s}
.player::after{content:"";position:absolute;inset:6px;border-radius:15px;border:1px solid rgba(255,233,163,.12);pointer-events:none}
.player:hover,.player:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px rgba(245,194,76,.18),0 14px 30px rgba(0,0,0,.45)}
.player .e{font-size:62px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.player .nm{font-family:"Lilita One",sans-serif;font-weight:400;font-size:24px;color:var(--gold-hi);overflow-wrap:anywhere}
.pcode{font-size:14px;font-weight:700;letter-spacing:.04em;overflow-wrap:anywhere}
.stat,.pill,.back{background:linear-gradient(180deg,#22336F,#141D42);border:1.5px solid var(--frame);color:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.35)}
.pill .av{background:#0C1330;box-shadow:0 0 0 2px var(--gold)}
.b{font-weight:700;letter-spacing:.2px;border:1px solid #FFF1B8;background:linear-gradient(180deg,#FFE793 0%,#F7BE3E 55%,#DB921C 100%);color:#3A2300;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:0 4px 0 #8A5A10,0 10px 18px rgba(245,170,40,.22),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .08s,box-shadow .08s}
.b:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #8A5A10,inset 0 1px 0 rgba(255,255,255,.6)}
.b.ghost{background:linear-gradient(180deg,rgba(40,56,120,.85),rgba(20,29,66,.85));color:var(--gold-hi);border:1.5px solid rgba(245,194,76,.6);text-shadow:none;box-shadow:0 3px 0 #070B1E,inset 0 1px 0 rgba(255,255,255,.1)}
.b:disabled{filter:grayscale(.6);opacity:.5}
.b.big-next{background:linear-gradient(180deg,#8CFFE8,#2CC9AE 60%,#169482);border-color:#C8FFF4;color:#032A24;box-shadow:0 4px 0 #0B5E52,0 0 24px rgba(62,230,197,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.face{background:radial-gradient(circle at 50% 35%,#2C3E86,#121A3E);border:3px solid var(--gold);box-shadow:0 0 0 3px #0C1330,0 0 20px rgba(245,194,76,.35)}
.bubble::before{background:var(--panel-a);border-color:var(--frame)}
.bubble .who{color:var(--gold)}
.ex{background:#0C1330;color:var(--gold-hi)}
input[type=text]{background:#0C1330;border-color:var(--frame);color:var(--ink)}
.node .num,.lvchip b{background:#0C1330;color:var(--gold-hi);border:1.5px solid var(--frame)}
.lvchip.open,.node.open{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,194,76,.2),0 0 18px rgba(245,194,76,.25),inset 0 1px 0 rgba(255,255,255,.1)}
.lvchip.open b,.node.open .num{background:linear-gradient(180deg,#FFE793,#DB921C);color:#3A2300;border-color:#FFF1B8}
.lvchip.done b,.node.done .num{background:linear-gradient(180deg,#9DFFEA,#22B89E);color:#032A24;border-color:#C8FFF4}
.lvchip small{color:var(--gold)}
.item.using{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,194,76,.25),0 0 22px rgba(245,194,76,.25)}
.item .e,.seed .e{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.coin{background:radial-gradient(circle at 35% 30%,#FFF6C4,#FFD447 45%,#D99412);color:#3A2300;font-family:"Lilita One",sans-serif;font-weight:400;box-shadow:0 0 0 2px #8A5A10,0 4px 10px rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.18)}
.chip{background:linear-gradient(180deg,#22336F,#141D42);border-color:var(--frame);color:var(--ink)}
.chip .n{font-family:"Lilita One",sans-serif;font-weight:400}
.chip.sel{box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(245,194,76,.5)}
.pad button{background:linear-gradient(180deg,#22336F,#141D42);border-color:var(--frame);color:var(--ink)}
.pad button.ok{background:linear-gradient(180deg,#FFE793,#DB921C);color:#3A2300;border-color:#FFF1B8}
.display{border-color:var(--gold);background:#0A1028;font-family:"Lilita One",sans-serif;font-weight:400;color:#fff}
.prompt{background:#0A1028;border:1px solid var(--frame)}
.meter,.pbarw,.bar,.xpbar{background:#0A1028;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.pbarw i,.xpbar i{background:linear-gradient(90deg,#2CC9AE,#9DFFEA)}
.table th{color:var(--gold)}
.tag{background:var(--minus-bg);color:var(--minus)}.tag.good{background:var(--plus-bg);color:var(--plus)}
.townhint{color:var(--muted)}
/* 3D viewports */
.world,.townwrap{border:2px solid var(--gold);box-shadow:0 0 0 4px #0C1330,0 0 0 5px rgba(245,194,76,.35),0 22px 50px rgba(0,0,0,.55);background:#0E1636}
.world::after,.bstage::after{display:none}
.flv,.camctl button{background:linear-gradient(180deg,rgba(34,51,111,.82),rgba(14,20,48,.82));color:var(--gold-hi);border:1.5px solid var(--frame);box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.flv small{color:var(--muted)}
.toast{background:linear-gradient(180deg,#FFE793,#DB921C);color:#3A2300;border:1px solid #FFF1B8;box-shadow:0 6px 18px rgba(0,0,0,.4);font-weight:700}
.sheet{background:linear-gradient(180deg,rgba(31,45,99,.93),rgba(16,23,54,.95));color:var(--ink);border:1.5px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.55)}
:root:not([data-theme="light"]) .sheet{background:linear-gradient(180deg,rgba(31,45,99,.93),rgba(16,23,54,.95));color:var(--ink);border-color:var(--gold)}
.sheet-x{background:#0C1330;border-color:var(--frame);color:var(--gold-hi)}
.nogl{color:var(--gold-hi)}
/* dialog */
#dlg{background:rgba(4,8,24,.55)}
.dlg{border:2px solid var(--gold);position:relative}
.dlg::before{content:"";position:absolute;left:24px;right:24px;top:-2px;height:2px;background:linear-gradient(90deg,transparent,#FFF6CF,transparent)}
.dlg-name{font-size:22px;color:var(--gold)}
.dlg-count{color:var(--muted)}
/* battle */
.battle{background:#070B1E;--bg:#0C1330;--surface:#16214A;--ink:#EEF2FF;--muted:#A3B2DC;--line:#2E3E78;--accent:#F5B93A;--accent-ink:#2E1B00}
.bhud{background:linear-gradient(rgba(4,8,24,.75),transparent)}
.bname{font-family:"Lilita One",sans-serif;font-weight:400;font-size:20px;letter-spacing:.4px;color:var(--gold-hi)}
.bx{background:linear-gradient(180deg,rgba(34,51,111,.85),rgba(14,20,48,.85));border:1.5px solid var(--frame);color:var(--gold-hi)}
.bprog i{height:8px;border-radius:2px;background:rgba(10,16,40,.75);box-shadow:inset 0 0 0 1px rgba(245,194,76,.3);transform:skewX(-20deg)}
.bprog i.on{background:linear-gradient(90deg,#FFE793,#F5B93A);box-shadow:0 0 12px rgba(255,212,71,.8)}
.bprog i.ok{background:linear-gradient(90deg,#2CC9AE,#9DFFEA);box-shadow:none}
.qcard{background:linear-gradient(180deg,rgba(24,34,80,.82),rgba(8,12,32,.86));border:1.5px solid var(--frame);border-top:2px solid var(--gold);border-radius:16px}
.qlabel{font-family:"Lilita One",sans-serif;font-weight:400;font-size:14px;letter-spacing:.6px;color:var(--gold)}
.qexpr{font-family:"Lilita One",sans-serif;font-weight:400;font-size:30px;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.bpanel{background:linear-gradient(180deg,#141D45,#090E26);border-top:1.5px solid var(--frame)}
@media (min-width:900px) and (min-aspect-ratio:1/1){.bpanel{border-left:1.5px solid var(--frame)}}
.bnpc{background:linear-gradient(180deg,rgba(40,56,120,.55),rgba(20,29,66,.55));border:1.5px solid var(--frame)}
.battle .display{border:2px solid var(--gold);background:#060A1C;font-size:34px}
.battle .pad button{font-family:"Lilita One",sans-serif;font-weight:400;font-size:26px;background:linear-gradient(180deg,#2A3D80,#16204A);border:1px solid rgba(245,194,76,.35);box-shadow:0 4px 0 #050817,inset 0 1px 0 rgba(255,255,255,.14)}
.battle .pad button:active{box-shadow:0 1px 0 #050817}
.battle .pad button.ok{background:linear-gradient(180deg,#FFE793,#F7BE3E 55%,#DB921C);color:#3A2300;border-color:#FFF1B8;box-shadow:0 4px 0 #8A5A10,0 0 18px rgba(245,180,60,.35)}
.battle .b.ghost{color:var(--gold-hi);border-color:rgba(245,194,76,.6)}
.rcard{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(31,45,99,.9),rgba(10,15,38,.94));border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(12,19,48,.8),0 0 60px rgba(245,194,76,.25),0 24px 60px rgba(0,0,0,.6)}
.rcard>*{position:relative}
.rcard::before{content:"";position:absolute;left:50%;top:44px;width:640px;height:640px;margin-left:-320px;margin-top:-320px;background:repeating-conic-gradient(rgba(255,214,90,.16) 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);animation:spin 14s linear infinite}
.rtitle{font-size:58px;letter-spacing:1px;background:linear-gradient(180deg,#FFFBE6 0%,#FFE070 45%,#E8960F 55%,#FFCF4A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5A3508) drop-shadow(0 0 18px rgba(255,190,60,.55))}
.battle.lose .rtitle{background:linear-gradient(180deg,#F1F4FF,#9FB0DA);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #1A2244)}
.battle.lose .rcard::before{display:none}
.rsub{color:var(--muted)}
.rcoins{font-family:"Lilita One",sans-serif;font-weight:400;font-size:36px;color:#FFD447;text-shadow:0 2px 0 #5A3508,0 0 16px rgba(255,212,71,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:440px){h1{font-size:42px}.rtitle{font-size:46px}.top .title{font-size:24px}}

@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:440px){h1{font-size:30px}.chip{min-width:48px;height:58px}.chip .n{font-size:21px}.prompt{font-size:19px}.street{padding:12px}.dlg .face{width:56px;height:56px;font-size:34px}}

/* ---------- children's own pictures (common/art.js, js/studio.js) ---------- */
.ico{display:inline-block;width:1em;height:1em;object-fit:contain;vertical-align:-.14em}
.face .ico{width:.95em;height:.95em}
.ed-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.ed-box{text-align:center}.ed-box small{display:block;color:var(--muted);margin-bottom:6px}
.ed-pic{width:150px;height:150px;border-radius:24px;display:grid;place-items:center;font-size:110px;line-height:1;
  background:radial-gradient(circle at 50% 35%,#2C3E86,#121A3E);border:2px solid var(--gold);box-shadow:inset 0 0 0 3px #0C1330}
.ed-arrow{font-size:30px;color:var(--gold)}
label.b{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:440px){.ed-pic{width:120px;height:120px;font-size:88px}}
/* drawing pad (js/studio.js) */
.pad-tools .swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatchbtn{width:38px;height:38px;border-radius:50%;border:3px solid #0C1330;box-shadow:0 0 0 2px var(--line);cursor:pointer;padding:0}
.swatchbtn.on{box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(245,194,76,.6);transform:scale(1.1)}
.pensize{min-width:52px}.pensize i{display:inline-block;border-radius:50%;background:currentColor}
.pad-wrap{margin:14px auto 0;max-width:460px}
#drawCanvas{display:block;width:100%;aspect-ratio:1;touch-action:none;cursor:crosshair;border-radius:18px;border:3px solid var(--gold);
  background:#FFFDF7 repeating-linear-gradient(0deg,transparent 0 31px,rgba(62,123,250,.08) 31px 32px)}
@media (max-width:440px){.swatchbtn{width:32px;height:32px}}

/* ---------- full-window 3D screens (farm + level island) ----------
   core.js render() sets body.fullworld on the town and dungeon screens. The 3D world fills the
   whole window on computers, iPads and iPhones; the top bar and the dock float over it,
   kept clear of the notch and home bar with the safe-area insets. */
body.fullworld{overflow:hidden;overscroll-behavior:none}
body.fullworld main{max-width:none;padding:0}
body.fullworld .world{position:fixed;inset:0;height:auto;margin:0;border:none;border-radius:0;box-shadow:none}
body.fullworld .top{position:fixed;z-index:4;left:0;right:0;top:0;margin:0;flex-wrap:nowrap;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 12px) 18px calc(env(safe-area-inset-left,0px) + 12px);
  background:linear-gradient(rgba(8,13,36,.62),rgba(8,13,36,0))}
body.fullworld .top>*{pointer-events:auto}
body.fullworld .top .title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.55)}
body.fullworld .wtop{top:calc(env(safe-area-inset-top,0px) + 74px);left:calc(env(safe-area-inset-left,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px)}
body.fullworld:has(.pill .who small) .wtop{top:calc(env(safe-area-inset-top,0px) + 112px)}
body.fullworld:has(.pill .who small) .toast{top:calc(env(safe-area-inset-top,0px) + 168px)}
body.fullworld .toast{top:calc(env(safe-area-inset-top,0px) + 132px)}
body.fullworld .townhint{display:none}
body.fullworld .sheet{left:50%;right:auto;width:min(560px,calc(100% - 24px));transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 78px);animation:none}
body.fullworld .dock{position:fixed;z-index:4;left:0;right:0;bottom:0;margin:0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:22px calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 12px);
  background:linear-gradient(rgba(8,13,36,0),rgba(8,13,36,.7))}
body.fullworld .dock::-webkit-scrollbar{display:none}
body.fullworld .dock .b{flex:none;white-space:nowrap;background:rgba(12,19,48,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.fullworld .dock .lvlist{display:flex;gap:8px;margin:0}
body.fullworld .dock .lvchip{flex:none;min-width:172px}
body.fullworld .dock .btns{margin:0;flex-wrap:nowrap}
body.fullworld .dock>:first-child{margin-left:auto}body.fullworld .dock>:last-child{margin-right:auto}   /* centred when it fits, still scrollable when it does not */
.camctl .wide{grid-column:span 2;width:auto;font-size:18px}
/* content pages use more of a big screen, and keep clear of the iPhone notch in landscape */
main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:1100px){main{max-width:1040px}}
@media (max-width:520px){body.fullworld .top .title{font-size:0}}   /* no room for the title next to the stats; the 3D sign says where you are */
/* game pointer label (engine3d.js setPointer) and farm paint mode (plaza.js) */
.gtip{position:fixed;z-index:20;pointer-events:none;padding:5px 12px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;
  background:rgba(12,19,48,.9);color:var(--gold-hi);border:1.5px solid var(--gold);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .12s}
.gtip.show{opacity:1}
.paintbar{position:absolute;z-index:3;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 130px);display:none;max-width:calc(100% - 24px);text-align:center;
  padding:8px 16px;border-radius:999px;font-weight:600;background:linear-gradient(180deg,#FFE793,#F7BE3E);color:#3A2300;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.paintbar.show{display:block}
body:not(.fullworld) .paintbar{top:64px}
/* entries to the Art Studio: top-bar 🎨 button and the farm's paint button */
.pill.artpill{padding:4px;width:42px;height:42px;justify-content:center;font-size:21px;background:linear-gradient(180deg,#B794FF,#7A4DE0);border:2px solid var(--gold);box-shadow:0 0 14px rgba(183,148,255,.45)}
.top .pill:not(.artpill){max-width:none;overflow:visible;flex:none}
.dock .b.paintbtn{background:linear-gradient(180deg,#C7A6FF,#8B5CF6);color:#fff;border:2px solid var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dock .b.paintbtn.on{background:linear-gradient(180deg,#FFE793,#F7BE3E);color:#3A2300;text-shadow:none;animation:paintpulse 1.2s ease-in-out infinite}
@keyframes paintpulse{50%{box-shadow:0 0 0 4px rgba(245,194,76,.35),0 0 22px rgba(245,194,76,.6)}}
@media (max-width:440px){.top .pill:not(.artpill){max-width:none}}
/* game pointer (engine3d.js): replaces the system cursor over 3D scenes */
canvas[data-cur="game"]{cursor:none}
.gptr{position:fixed;left:0;top:0;z-index:30;width:44px;height:44px;pointer-events:none;opacity:0;transition:opacity .12s;will-change:transform;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.gptr.show{opacity:1}
.gptr .pico{display:block;width:44px;height:44px;transform-origin:var(--hx) var(--hy);transition:transform .12s}
.gptr .pico svg{display:block;width:100%;height:100%}
.gptr .pring{position:absolute;left:calc(var(--hx) - 17px);top:calc(var(--hy) - 17px);width:34px;height:34px;border-radius:50%;border:3px dashed #FFD447;box-shadow:0 0 12px rgba(255,212,71,.6);opacity:0;transition:opacity .15s}
.gptr[data-state="select"] .pring,.gptr[data-state="paint"] .pring{opacity:1;animation:pspin 2.4s linear infinite}
.gptr[data-state="paint"] .pring{border-color:#FF8FC0;box-shadow:0 0 12px rgba(255,92,138,.6)}
@keyframes pspin{to{transform:rotate(360deg)}}
.gptr[data-state="select"] .pico{transform:scale(1.08)}
.gptr.press .pico{transform:scale(.84)}
.gptr .pbadge{position:absolute;right:-2px;bottom:0;display:none;font-style:normal;line-height:1}
.gptr[data-state="locked"] .pbadge,.gptr[data-state="drag"] .pbadge{display:block}
.gptr[data-state="locked"] .pbadge::after{content:"🔒";font-size:16px}
.gptr[data-state="drag"] .pbadge::after{content:"⟲";font-size:22px;font-weight:700;color:#FFD447;text-shadow:0 0 3px #0C1330,0 0 3px #0C1330,0 0 3px #0C1330}
.gptr.tap{animation:ptap .75s ease-out forwards}
.gptr.tap::after{content:"";position:absolute;left:calc(var(--hx) - 20px);top:calc(var(--hy) - 20px);width:40px;height:40px;border-radius:50%;border:3px solid #FFD447;animation:pripple .6s ease-out forwards}
@keyframes ptap{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}
@keyframes pripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.gptr .pring{animation:none!important}}

/* ---------- farm screen HUD (plaza.js farmHud): warm wood and cream, like a cosy farm game ---------- */
.fhud{position:fixed;z-index:4;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;flex-wrap:wrap}
.fhud>*{pointer-events:auto}
.fcard{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;flex:0 1 auto;padding:6px 18px 6px 6px;border-radius:44px 22px 22px 44px;cursor:pointer;font:inherit;color:#FFF6E3;text-align:left;
  background:linear-gradient(180deg,#A56A3B,#6E4020);border:3px solid #F2C46B;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.2),0 6px 16px rgba(0,0,0,.35)}
.fav{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:40px;line-height:1;
  background:radial-gradient(circle at 50% 35%,#FFF6E3,#F2D3A0);border:3px solid #F2C46B;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.fav .ico{width:.95em;height:.95em}
.fmeta{min-width:0;flex:1}
.fname,.fcode,.fsync{display:block;line-height:1.15;white-space:nowrap;overflow:visible;text-overflow:clip;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.fname{font-size:19px}
.fcode{margin-top:2px;font-size:14px;font-weight:700;letter-spacing:.04em}
.fsync{margin-top:2px;font-size:12px;font-weight:600;opacity:.9}
.fcode[hidden],.fsync[hidden]{display:none}
.flvl{display:flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;font-size:15px}
.fstar{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.fxp{flex:1;min-width:70px;height:13px;border-radius:99px;background:#3E2410;border:2px solid #2A170A;overflow:hidden}
.fxp i{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,#B5F27E,#4CB33A)}
.fright{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.fpill{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:99px;font-weight:700;font-size:17px;color:#FFF6E3;
  background:linear-gradient(180deg,#5B3A20,#3E2410);border:2px solid #F2C46B;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.fround{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;
  background:linear-gradient(180deg,#5B3A20,#3E2410);border:2px solid #F2C46B;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.fround.art{background:linear-gradient(180deg,#C7A6FF,#7A4DE0);box-shadow:0 0 14px rgba(183,148,255,.55),0 4px 10px rgba(0,0,0,.3)}
body.fullworld .wtop.farmtop{top:calc(env(safe-area-inset-top,0px) + 92px);align-items:flex-start}
body.fullworld:has(.fhud.hasid) .wtop.farmtop{top:calc(env(safe-area-inset-top,0px) + 136px)}
/* Today's Tasks */
.tasks{width:min(260px,48vw);border-radius:18px;overflow:hidden;color:#4A2E14;background:#FFF6E3;border:3px solid #A56A3B;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.tasks-head{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:16px;color:#FFF6E3;
  background:linear-gradient(180deg,#A56A3B,#6E4020)}
.tasks-head b{background:#3E2410;border-radius:99px;padding:1px 9px;font-size:14px;color:#FFD447}
.tasks-list{padding:2px 10px 6px}
.tasks.closed .tasks-list{display:none}
.task{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed #E2C9A0;font-size:15px;font-weight:600}
.task:last-child{border-bottom:none}
.task .te{font-size:20px;line-height:1}.task .tn{flex:1;line-height:1.2}.task b{color:#D2553A}
.task.ok b{color:#2FA36B;font-size:18px}.task.ok .tn{opacity:.55;text-decoration:line-through}
/* virtual joystick */
.joy{position:fixed;z-index:4;left:calc(env(safe-area-inset-left,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 82px);width:150px;height:150px;touch-action:none;user-select:none;-webkit-user-select:none}
.joy-ring{position:absolute;inset:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 50% 38%,rgba(130,200,255,.5),rgba(22,64,130,.62) 72%);border:4px solid rgba(170,220,255,.9);
  box-shadow:0 0 0 3px rgba(12,19,48,.35),0 0 26px rgba(90,170,255,.5),inset 0 0 20px rgba(255,255,255,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.joy.on .joy-ring{cursor:grabbing;border-color:#FFD447;box-shadow:0 0 0 3px rgba(12,19,48,.35),0 0 30px rgba(255,212,71,.55),inset 0 0 20px rgba(255,255,255,.25)}
.joy-cross{position:absolute;inset:0}
.joy-cross::before,.joy-cross::after{content:"";position:absolute;left:50%;top:50%;border-radius:18px;background:rgba(10,28,70,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.joy-cross::before{width:36%;height:74%;transform:translate(-50%,-50%)}
.joy-cross::after{width:74%;height:36%;transform:translate(-50%,-50%)}
.ja{position:absolute;width:0;height:0;border:9px solid transparent;opacity:.8;transition:opacity .15s,filter .15s}
.ja.up{top:7px;left:50%;margin-left:-9px;border-top:0;border-bottom:12px solid #EAF6FF}
.ja.dn{bottom:7px;left:50%;margin-left:-9px;border-bottom:0;border-top:12px solid #EAF6FF}
.ja.lf{left:7px;top:50%;margin-top:-9px;border-left:0;border-right:12px solid #EAF6FF}
.ja.rt{right:7px;top:50%;margin-top:-9px;border-right:0;border-left:12px solid #EAF6FF}
.joy[data-dir="up"] .ja.up,.joy[data-dir="dn"] .ja.dn,.joy[data-dir="lf"] .ja.lf,.joy[data-dir="rt"] .ja.rt{opacity:1;filter:drop-shadow(0 0 6px #FFD447)}
.joy-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#B5DEFF,#2F7BFF 55%,#1A4FC2);border:3px solid #DDF0FF;box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 -5px 9px rgba(0,0,0,.25),inset 0 4px 6px rgba(255,255,255,.4)}
.joy:not(.on) .joy-knob{transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.joy-tip{position:absolute;left:118px;bottom:132px;width:max-content;max-width:230px;padding:10px 14px;border-radius:16px;font-weight:600;font-size:15px;line-height:1.3;color:#fff;
  background:linear-gradient(180deg,#3E86F5,#2563D9);border:2px solid #CFE3FF;box-shadow:0 8px 18px rgba(0,0,0,.3);pointer-events:none;animation:tipbob 1.6s ease-in-out infinite}
.joy-tip::after{content:"";position:absolute;left:18px;bottom:-11px;border:10px solid transparent;border-bottom:0;border-top-color:#2563D9}
@keyframes tipbob{50%{transform:translateY(-4px)}}
/* backpack */
.bag{position:fixed;z-index:4;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);width:76px;height:76px;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:32px;line-height:1;color:#FFF6E3;
  background:radial-gradient(circle at 50% 35%,#2E4C7E,#12244A);border:3px solid #F2C46B;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.bag span{font-size:12px;font-weight:700;margin-top:2px}
body.sheeton .joy,body.sheeton .bag{display:none}
@media (max-width:520px){
  .fcard{padding-right:12px}.fav{width:50px;height:50px;font-size:32px}.fname{font-size:16px}
  .fpill{padding:4px 10px;font-size:15px}.fround{width:40px;height:40px;font-size:19px}
  body.fullworld .wtop.farmtop{top:calc(env(safe-area-inset-top,0px) + 118px)}
  body.fullworld:has(.fhud.hasid) .wtop.farmtop{top:calc(env(safe-area-inset-top,0px) + 164px)}
  .joy{width:126px;height:126px}.joy-knob{width:52px;height:52px;margin:-26px 0 0 -26px}.joy-tip{left:96px;bottom:112px;max-width:180px;font-size:14px}
  .bag{width:64px;height:64px;font-size:26px}
}
.flvl,.tasks-head span{white-space:nowrap}
@media (max-width:520px){.fxp{min-width:44px}.tasks{width:min(210px,52vw)}.tasks-head{font-size:14px;padding:7px 10px}.task{font-size:13px}}

/* farm side buttons: Places menu, Paint and Backpack (the farm has no bottom bar, like the reference picture) */
.sidebtns{position:fixed;z-index:4;right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column;align-items:center;gap:12px}
.sbtn{width:66px;height:66px;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:27px;line-height:1;color:#FFF6E3;
  background:radial-gradient(circle at 50% 35%,#2E4C7E,#12244A);border:3px solid #F2C46B;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.sbtn span{font-size:11px;font-weight:700;margin-top:3px}
.sidebtns .sbtn.bag{position:static;right:auto;bottom:auto;width:78px;height:78px;font-size:32px}
.sbtn.paintbtn{background:radial-gradient(circle at 50% 35%,#C7A6FF,#7A4DE0)}
.sbtn.paintbtn.on{background:radial-gradient(circle at 50% 35%,#FFE793,#F7BE3E);color:#3A2300;animation:paintpulse 1.2s ease-in-out infinite}
.places{position:fixed;z-index:5;right:calc(env(safe-area-inset-right,0px) + 96px);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:none;flex-direction:column;gap:8px;
  padding:12px;border-radius:18px;max-height:70vh;overflow:auto;background:#FFF6E3;border:3px solid #A56A3B;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.places.open{display:flex}
.places-title{color:#6E4020;font-size:16px;padding:0 4px}
.places .b{justify-content:flex-start;text-align:left;white-space:nowrap;color:#FFF6E3;background:linear-gradient(180deg,#A56A3B,#6E4020);border:2px solid #F2C46B}
.joy{bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
body.sheeton .sidebtns,body.sheeton .places{display:none}
@media (max-width:520px){.sbtn{width:56px;height:56px;font-size:23px}.sidebtns .sbtn.bag{width:64px;height:64px;font-size:26px}.sidebtns{gap:9px}.places{right:calc(env(safe-area-inset-right,0px) + 78px)}}
/* P3 games (school.js): Best Friend Pairs coins and Hat and Cloak chips */
.coin.neg{background:radial-gradient(circle at 35% 30%,#FFD1DA,#FF6B81 50%,#B8324A);color:#fff;box-shadow:0 0 0 2px #7A1F30,0 4px 10px rgba(0,0,0,.35)}
.row.friends .coinwrap small{color:var(--muted);font-size:12px;white-space:nowrap}
.row.hats{gap:6px;margin-top:30px;row-gap:30px}
.plusjoin{font-size:22px;font-weight:700;color:var(--plus)}
.chip.hatchip{position:relative;min-width:64px;height:66px;padding:0 10px}
.chip.hatchip:not(.on){cursor:pointer;animation:hatwiggle 1.6s ease-in-out infinite}
.chip.hatchip.on{border-color:var(--gold);background:linear-gradient(180deg,#3A2E6F,#1E1846);opacity:1}
.chip.hatchip .hat{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:26px;animation:hatdrop .35s ease-out;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.chip.hatchip .cloak{font-size:13px;font-weight:700;color:#FF8FA3;line-height:1}
@keyframes hatdrop{from{transform:translate(-50%,-26px) rotate(-30deg);opacity:0}to{transform:translateX(-50%) rotate(-8deg);opacity:1}}
@keyframes hatwiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg) translateY(-2px)}}
.lvchip.soon{opacity:.55}
@media (prefers-reduced-motion:reduce){.chip.hatchip:not(.on){animation:none}}
/* Same Basket: drag one basket from each orchard into the same magic basket */
.basketgame{display:flex;flex-direction:column;gap:12px}
.orchards{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.orchard{padding:10px 8px;border-radius:18px;background:rgba(8,12,32,.35);border:2px solid rgba(255,255,255,.08)}
.orchard.left{border-color:rgba(229,72,77,.55)}.orchard.right{border-color:rgba(61,220,151,.5)}
.orchard h3{margin:0;text-align:center;font-family:"Lilita One",sans-serif;font-size:16px;font-weight:400;letter-spacing:.3px}
.orchard p{margin:2px 0 8px;text-align:center;color:var(--muted);font-size:13px;font-weight:600}
.orchard-blurb{margin:8px 0 0!important;font-size:12px!important}
.orchard-empty{margin:0;color:var(--gold-hi)}
.baskets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:78px}
.bbasket{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:4px 6px 6px;border-radius:16px;border:3px solid #E5484D;background:linear-gradient(180deg,#4A2030,#241018);color:var(--ink);font-family:"Lilita One",sans-serif;touch-action:none;user-select:none;cursor:grab}
.bbasket.right{border-color:#3DDC97;background:linear-gradient(180deg,#143528,#0C1C16)}
.bbasket b{font-size:15px;font-weight:400;line-height:1}
.bbasket-rim{font-size:16px;line-height:1}
.fruits{display:flex;flex-wrap:wrap;justify-content:center;max-width:58px;font-size:13px;line-height:1.05}
.fruits i{font-style:normal}
.bbasket.ghosting{position:fixed;z-index:40;margin:0;pointer-events:none;transform:translate(-50%,-60%) scale(1.06);box-shadow:0 12px 24px rgba(0,0,0,.45)}
.bbasket.mixed{border-color:var(--gold);background:linear-gradient(180deg,#4A3A16,#241808);cursor:default;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:148px}
.knight{grid-column:1/-1;order:-1;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px}
.knight-fig{font-size:34px;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.knight-name{font-family:"Lilita One",sans-serif;color:var(--gold-hi);font-size:16px}
.knight small{color:var(--muted);font-weight:700}
.knight.cheer .knight-fig{animation:hatwiggle .55s ease}
.magic{border:3px solid rgba(245,194,76,.85);border-radius:22px;padding:10px 10px 12px;background:linear-gradient(180deg,rgba(245,194,76,.14),rgba(8,12,32,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.magic.done{box-shadow:0 0 22px rgba(245,194,76,.35)}
.magic-title{font-family:"Lilita One",sans-serif;color:var(--gold);text-align:center;letter-spacing:.4px}
.law{margin:4px 0 8px;text-align:center;font-size:15px;font-weight:600}
.law b{color:var(--gold-hi)}
.law.done{font-family:"Lilita One",sans-serif;font-size:clamp(18px,3.4vw,26px);font-weight:400}
.slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bslot{position:relative;min-width:86px;min-height:84px;flex:1 1 92px;max-width:180px;border:3px dashed rgba(245,194,76,.55);border-radius:16px;display:flex;gap:4px;align-items:center;justify-content:center;padding:6px}
.bslot.hot{border-style:solid}.bslot.over{border-color:#9DFFEA;box-shadow:0 0 16px rgba(157,255,234,.4)}
.bslot.done{border-style:solid;border-color:#F5C24C;background:rgba(245,194,76,.14);animation:basketglow .7s ease}
.slot-hint{color:var(--muted);font-size:12px;font-weight:700;text-align:center}
.coinfly{position:absolute;left:50%;top:4px;z-index:2;color:#FFD43B;font-weight:800;pointer-events:none;animation:coinfly .9s ease forwards}
@keyframes basketglow{0%{box-shadow:0 0 0 rgba(245,194,76,0);transform:scale(.94)}45%{box-shadow:0 0 22px rgba(245,194,76,.9);transform:scale(1.04)}100%{box-shadow:0 0 10px rgba(245,194,76,.35);transform:scale(1)}}
@keyframes coinfly{to{transform:translate(-50%,-26px);opacity:0}}
@media (min-width:800px){.orchards{grid-template-columns:1fr auto 1fr}.knight{grid-column:auto;order:0;flex-direction:column;gap:2px;align-self:center}}
@media (prefers-reduced-motion:reduce){.bslot.done,.coinfly,.knight.cheer .knight-fig{animation:none}}
.workshop.demoing .shop-expr{display:none}
.workshop.demoing .bnpc{padding:8px 10px}
.basketdemo{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
.demo-step{padding:6px 8px 8px;border-radius:16px;background:rgba(8,16,40,.45);border:2px solid rgba(245,194,76,.32)}
.basketdemo .demo-step:last-child{animation:demopop .7s ease}
.demo-k{margin:0 0 6px;text-align:center;font-family:"Lilita One",sans-serif;font-size:15px;letter-spacing:.3px;color:#FFE793}
.demo-note{margin:0 0 8px;text-align:center;font-size:15px;font-weight:700}
.demo-note b{color:#FFE793}
.basketdemo,.demo-step{min-width:0;max-width:100%}
.demo-scroll{display:flex;align-items:center;justify-content:safe center;gap:8px;flex-wrap:nowrap;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:2px 18px 10px 2px;scrollbar-width:thin;scrollbar-color:#F5C24C rgba(255,255,255,.16)}
.demo-card{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:16px;background:rgba(8,16,40,.55);border:2px solid rgba(245,194,76,.45);font-family:"Lilita One",sans-serif;font-size:clamp(20px,4.4vw,30px)}
.demo-pad{flex:none;width:8px;height:1px}
.demo-card .stay,.demo-result .stay,.demo-stayline .stay{color:#FFE793}
.demo-plus,.demo-stayline small,.demo-result small{font-family:"Lilita One",sans-serif;font-size:22px;color:#FFE793}
.demo-stayline,.demo-result{font-family:"Lilita One",sans-serif;font-size:clamp(24px,5vw,36px)}
.basketdemo.step1 .demo-step:last-child .stay{animation:demostay 1.8s ease}
.basketdemo.step1:not(.breakdemo) .demo-step:last-child .join{animation:demojoin 1.8s ease}
.basketdemo.breakdemo.step1 .demo-step:last-child .apart.leftp{animation:demosplitL 1.8s ease}
.basketdemo.breakdemo.step1 .demo-step:last-child .apart.rightp{animation:demosplitR 1.8s ease}
.basketdemo.step2 .demo-step:last-child .demo-result{animation:demopop .7s ease}
.demo-scroll .blank{min-width:1.1em;padding:0 8px;border-bottom:4px solid #FFE793;color:#FFE793;text-align:center;font-family:"Lilita One",sans-serif}
.bigread{margin:8px 0 0;text-align:center;font-size:14px;font-weight:700;line-height:1.4;color:#FFE793}
.bigread b{color:#fff}
@keyframes demostay{40%{transform:scale(1.18);text-shadow:0 0 14px #FFE793}}
@keyframes demojoin{50%{transform:translateY(-10px) scale(1.08)}}
@keyframes demosplitL{50%{transform:translateX(-14px) scale(1.06)}}
@keyframes demosplitR{50%{transform:translateX(14px) scale(1.06)}}
@keyframes demopop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.basketdemo .demo-step,.basketdemo .stay,.basketdemo .join,.basketdemo .apart,.basketdemo .demo-result{animation:none}}
/* Same Basket plays on its own orchard screen, not in the monster arena */
.workshop{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;overflow:hidden;color:#EEF2FF;background:radial-gradient(ellipse at 50% -10%,#3A4E8C 0%,#121A3E 42%,#070B1E 78%);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.shop-hud{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
.shop-main{width:min(760px,100%);margin:0 auto;padding:8px 16px 12px;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0;min-height:0;overflow:auto}
.shop-dock{flex:none;width:min(760px,100%);margin:0 auto;padding:8px 16px 16px}
.shop-kicker{margin:0;text-align:center;font-family:"Lilita One",sans-serif;letter-spacing:.6px;color:var(--gold)}
.shop-expr{font-family:"Lilita One",sans-serif;font-size:clamp(28px,6vw,46px);text-align:center;letter-spacing:.5px;text-shadow:0 3px 0 rgba(0,0,0,.45)}
.workshop .bnpc{background:linear-gradient(180deg,rgba(40,56,120,.55),rgba(20,29,66,.55));border:1.5px solid var(--frame)}
.workshop .display{max-width:none;height:56px;margin:4px 0;border:2px solid var(--gold);background:#060A1C;color:#fff;font-family:"Lilita One",sans-serif;font-size:34px}
.workshop .pad{max-width:none;gap:8px}
.workshop .pad button{height:52px;font-family:"Lilita One",sans-serif;font-size:26px;background:linear-gradient(180deg,#2A3D80,#16204A);border:1px solid rgba(245,194,76,.35);color:#fff;border-radius:14px;box-shadow:0 4px 0 #050817,inset 0 1px 0 rgba(255,255,255,.14)}
.workshop .pad button.ok{background:linear-gradient(180deg,#FFE793,#F7BE3E 55%,#DB921C);color:#3A2300;border-color:#FFF1B8;box-shadow:0 4px 0 #8A5A10}
.workshop .voicehint{margin:0 0 6px;text-align:center;font-size:15px;font-weight:700;color:#FFE793}
.workshop .voicerow{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.workshop .voicerow .mic{flex:1;min-height:48px;font-size:18px}
.workshop .heard{margin:0 0 6px;text-align:center}
.workshop .rcard{margin-top:12px}
/* Today's Tasks: coins today, the chest and the streak (plaza.js tasksHTML) */
.tasks-coins{margin-top:4px;padding:6px 4px 2px;font-size:14px;font-weight:700;color:#8A5A10;border-top:1px dashed #E2C9A0}
.tasks .b.chestbtn{display:block;width:100%;margin:6px 0 2px;min-height:44px;font-size:16px;background:linear-gradient(180deg,#FFE793,#F7BE3E);color:#3A2300;border:2px solid #A56A3B;animation:paintpulse 1.2s ease-in-out infinite}
.tasks-end{margin-top:6px;padding:8px 4px 2px;text-align:center;font-weight:700;color:#2F7A36;border-top:1px dashed #E2C9A0}
.tasks-end b{color:#D2553A;white-space:nowrap}
/* 📊 My day (plaza.js todayBoard) */
.daybtn{width:100%;margin-top:6px}
.daydlg{max-width:560px;max-height:min(88vh,860px);overflow:auto}
.daydlg h4{margin:14px 0 6px}
.daytop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.daytop>div{text-align:center;padding:10px 6px;border-radius:14px;border:1.5px solid var(--frame);background:rgba(8,12,32,.35)}
.daytop b{display:block;font-size:26px;color:var(--gold-hi)}
.daytop small{display:block;font-size:13px;opacity:.85}
.dayrow{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px dashed rgba(255,255,255,.12)}
.dayrow .de{width:26px;text-align:center}
.dayrow .dn{flex:1}
.dayrow .dn small{display:block;font-size:12px;opacity:.75}
.dayrow b{white-space:nowrap}
.tasks-head.ready{background:linear-gradient(180deg,#F7BE3E,#C98A1C);animation:paintpulse 1.2s ease-in-out infinite}
/* character picker (studio.js looksHTML) */
.card.looks{margin-bottom:14px}
.lookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.lookbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:18px;cursor:pointer;font:inherit;color:var(--ink);
  background:linear-gradient(180deg,#22336F,#141D42);border:2px solid var(--frame);transition:transform .12s}
.lookbtn span{font-size:40px;line-height:1.1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.lookbtn small{font-size:12px;font-weight:600;color:var(--muted);text-align:center;line-height:1.15}
.lookbtn:hover{transform:translateY(-2px)}
.lookbtn.on{border-color:var(--gold);background:linear-gradient(180deg,#5A3FA8,#2C1F66);box-shadow:0 0 0 3px rgba(245,194,76,.35),0 0 18px rgba(245,194,76,.4)}
.lookbtn.on small{color:var(--gold-hi)}
@media (max-width:440px){.lookgrid{grid-template-columns:repeat(4,1fr);gap:8px}.lookbtn span{font-size:32px}}
/* Character Maker (studio.js rMaker) */
.mk-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:6px;border-radius:16px;
  background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(62,123,250,.25));border:1.5px solid var(--frame)}
.maker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.mk-world{position:relative;height:min(420px,56vh);border-radius:18px;overflow:hidden;background:#1F2D63;touch-action:none;cursor:grab}
.mk-world canvas{display:block;width:100%!important;height:100%!important}
.mk-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:600;background:rgba(12,19,48,.7);color:var(--gold-hi);pointer-events:none}
.mk-side h4{margin:12px 0 6px;font-size:15px;color:var(--gold-hi)}
.mk-side h4:first-child{margin-top:0}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mk-chip{padding:7px 12px;border-radius:99px;cursor:pointer;font:inherit;font-weight:600;font-size:14px;color:var(--ink);background:linear-gradient(180deg,#22336F,#141D42);border:1.5px solid var(--frame)}
.mk-chip.on{border-color:var(--gold);background:linear-gradient(180deg,#5A3FA8,#2C1F66);box-shadow:0 0 0 2px rgba(245,194,76,.35);color:var(--gold-hi)}
.mk-sw{display:flex;flex-wrap:wrap;gap:7px}
.mk-sw .swatchbtn{width:32px;height:32px}
.mk-crop{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(5,8,22,.75)}
.mk-crop .card{max-width:340px;text-align:center}
#mkCropCv{width:100%;max-width:280px;aspect-ratio:1;border-radius:16px;touch-action:none;cursor:grab;background:#0C1330}
.mk-zoom{display:flex;align-items:center;gap:8px;justify-content:center;margin:10px 0 2px;font-size:20px}
.mk-zoom input{flex:1;max-width:220px;accent-color:#F5C24C}
@media (max-width:720px){.maker{grid-template-columns:1fr}.mk-world{height:min(340px,46vh)}}
.camctl button.on{background:linear-gradient(180deg,#FFE793,#F7BE3E);box-shadow:0 0 0 2px #F5C24C,0 0 14px rgba(245,194,76,.5)}
.cloudbar{margin:18px 0;padding:14px 16px;border-radius:18px;border:1.5px solid var(--frame);background:rgba(8,12,32,.35)}
.cloudbar h3{margin-top:0}
.cloudbar .row,.dlg-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.syncnote{margin:0 0 10px;padding:8px 12px;border-radius:14px;border:1.5px solid var(--frame);background:rgba(245,194,76,.12);color:var(--gold-hi);font-weight:700}
.syncwarn{margin:0 0 10px;padding:8px 12px;border-radius:14px;border:1.5px solid #FF5D73;background:rgba(255,93,115,.14);color:#FFD0D6;font-weight:700}
.cloudpick,.syncdlg{max-width:720px}
.syncdlg{flex-direction:column;max-height:min(88vh,860px);overflow:auto}
.syncmath{margin:0 0 8px}
/* family.js: parent PIN and play time */
.pininput{font:inherit;font-size:28px;letter-spacing:12px;text-align:center;width:150px;padding:8px 12px;margin:4px 8px 4px 0;border-radius:14px;border:2px solid var(--frame);background:#0C1330;color:var(--ink)}
.famdlg{max-width:720px;max-height:min(88vh,860px);overflow:auto}
.famrow{padding:10px 12px;margin:8px 0;border-radius:14px;border:1.5px solid var(--frame);background:rgba(8,12,32,.35)}
.famrow .nm{font-weight:700;margin-bottom:6px}
.famrow .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.famrow p{margin:6px 0 0}
.famleft{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:15;padding:4px 12px;border-radius:999px;border:1.5px solid var(--frame);background:rgba(8,12,32,.82);color:var(--gold-hi);font-weight:700;font-size:14px;pointer-events:none;white-space:nowrap}
@media (max-width:700px){.famleft{top:auto;bottom:calc(170px + env(safe-area-inset-bottom))}}   /* phones: the name card is on top, the joystick below */
.famleft.low{border-color:#FF5D73;color:#FFD0D6;background:rgba(80,10,24,.85)}
.famtoday{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.famn{font:inherit;font-size:16px;width:72px;padding:6px 8px;text-align:center;border-radius:12px;border:2px solid var(--frame);background:#0C1330;color:var(--ink)}
.famsel{font:inherit;font-size:16px;padding:6px 10px;border-radius:12px;border:2px solid var(--frame);background:#0C1330;color:var(--ink)}
.synctotal{margin-top:8px;font-weight:700;color:var(--gold-hi)}
.synccards{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.synccard{flex:1 1 200px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--frame);background:rgba(8,12,32,.28)}
.synccard.newer{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,194,76,.28)}
.synccard .syncwho{font-weight:700;color:var(--gold);margin-bottom:4px}
.synccard p{margin:2px 0}
#gsi{display:flex;justify-content:flex-start;margin:8px 0 12px}
/* Break It Up (school.js splitHTML) */
.row.split{align-items:center;gap:8px}
.chip.big{min-width:74px;height:70px;font-size:30px}
.chip.slicechip{position:relative;cursor:pointer;border-color:var(--gold);animation:hatwiggle 1.4s ease-in-out infinite}
.chip.slicechip .knife{position:absolute;top:-16px;right:-12px;font-size:24px;transform:rotate(20deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.chip.piece{min-width:60px;border-color:var(--plus);animation:hatdrop .35s ease-out}
.paren{font-size:34px;font-weight:700;color:var(--gold-hi)}
.splitrows{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.splitrow{padding:7px 12px;border-radius:12px;font-size:20px;font-weight:600;background:rgba(255,255,255,.06);border:1.5px solid transparent}
.splitrow.now{border-color:var(--gold);background:rgba(245,194,76,.12)}
.splitrow.done{opacity:.75}.splitrow.done b{color:var(--plus)}
@media (prefers-reduced-motion:reduce){.chip.slicechip{animation:none}}
.bslot.merging .bbasket.left{animation:joinL .65s ease forwards}
.bslot.merging .bbasket.right{animation:joinR .65s ease forwards}
@keyframes joinL{to{transform:translateX(10px) scale(.9)}}
@keyframes joinR{to{transform:translateX(-10px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.bslot.merging .bbasket{animation:none}}
/* Break It Up: drag the two kinds of apples out of each mixed basket */
.breakgame{display:flex;flex-direction:column;gap:12px}
.whole{padding:10px;border-radius:18px;border:3px solid rgba(245,194,76,.85);background:linear-gradient(180deg,rgba(245,194,76,.12),rgba(8,12,32,.5))}
.whole h3{margin:0;text-align:center;font-family:"Lilita One",sans-serif;font-size:16px;font-weight:400}
.whole>p{margin:2px 0 8px;text-align:center;color:var(--muted);font-size:13px;font-weight:600}
.whole.over{box-shadow:0 0 16px rgba(157,255,234,.4)}
.mixes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mix{display:flex;align-items:center;gap:4px;padding:6px;border-radius:16px;border:2px dashed rgba(245,194,76,.75);min-height:70px}
.mix.done{border-style:solid;border-color:#F5C24C;color:var(--gold-hi);font-family:"Lilita One",sans-serif;padding:8px 14px}
.sent{color:var(--muted);font-weight:700;min-width:18px;text-align:center}
.bpile{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:4px 6px 5px;border-radius:14px;border:3px solid #E5484D;background:linear-gradient(180deg,#4A2030,#241018);cursor:grab;touch-action:none;user-select:none;font-family:"Lilita One",sans-serif}
.bpile.green{border-color:#3DDC97;background:linear-gradient(180deg,#143528,#0C1C16)}
.bpile b{font-size:14px;font-weight:400;line-height:1}
.bpile.numcard,.bbasket.numcard{min-width:76px;min-height:64px;justify-content:center;padding:10px 14px}
.bpile.numcard b,.bbasket.numcard b,.bbasket.mixed .bign{font-size:28px}
.breakgame.pickgame .picks{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:8px auto 0}
.breakgame.pickgame .pick{font-size:26px;font-family:"Lilita One",sans-serif}
.bpile.ghosting{position:fixed;z-index:40;margin:0;pointer-events:none;transform:translate(-50%,-60%) scale(1.06);box-shadow:0 12px 24px rgba(0,0,0,.45)}
.bbasket.show{cursor:default}
.bbasket.pairglow{animation:basketglow .7s ease}
.orchard.over{box-shadow:0 0 16px rgba(157,255,234,.45)}
@media (prefers-reduced-motion:reduce){.bbasket.pairglow{animation:none}}
.pond{max-width:720px;margin:0 auto}
.pondstage{margin:8px 0 14px;padding:16px;border-radius:22px;background:linear-gradient(180deg,#7ec8f0,#2f7fd6 55%,#1b4f86);color:#fff;text-align:center}
.pondstage .ask{font-family:"Lilita One",sans-serif;font-size:clamp(22px,6vw,40px);line-height:1.15;margin:6px 0}
.mic{font-size:22px;min-height:64px}
.mic.live{box-shadow:0 0 0 4px rgba(229,72,77,.45)}
.heard{min-height:1.4em;font-weight:700}
.heard.good{color:#d8ff9a}
.heard.bad{color:#ffd0d0}
.fishlog{text-align:left;margin:8px auto;max-width:460px}
.fishlog ol{list-style:none;margin:0;padding:0}
.fishlog li{margin:6px 0;padding:10px 12px;border-radius:12px;background:rgba(8,16,40,.35)}
.fishlog li b{display:block}
.fishlog li span{font-family:"Lilita One",sans-serif;font-size:22px}
.fishlog li.good span{color:#d8ff9a}
.fishlog li.bad span{color:#ffd0d0}
.fishlog li small{display:block;font-weight:700}
.verdict{margin:0 0 8px;font-family:"Lilita One",sans-serif;font-size:28px;letter-spacing:.4px}
.verdict.good{color:#d8ff9a}
.verdict.bad{color:#ffb4b4}
.pond .pad{margin:10px auto}
.under{position:relative;height:240px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#d7f6ff 0%,#67bcee 14%,#1d78c4 46%,#0c4e86 74%,#06243f 100%);box-shadow:inset 0 -30px 40px rgba(0,16,32,.35)}
.under.lit{background:linear-gradient(180deg,#eefcff 0%,#8fd4f8 18%,#2f93d6 50%,#16659a 80%,#0c3a58 100%)}
.under .surf{position:absolute;left:0;right:0;top:0;height:42px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0));z-index:4}
.under .rays{position:absolute;inset:-10% 0 0;background:repeating-linear-gradient(102deg,transparent 0 42px,rgba(255,255,255,.16) 42px 58px);animation:rays 9s linear infinite;pointer-events:none}
.under .hook{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:5;font-size:22px}
.school{position:absolute;inset:0;z-index:3;pointer-events:none}
.schoolfish{position:absolute;font-size:36px;line-height:1;animation:schoolswim 2.6s ease-in-out infinite;filter:drop-shadow(0 6px 2px rgba(0,20,40,.45))}
.under.waiting .line.dropping{height:74%;animation:linedrop 1.5s ease}
.under.waiting .line.down{height:74%}
@keyframes schoolswim{50%{transform:translateX(16px)}}
@keyframes linedrop{from{height:8%}to{height:74%}}
.under.has3d .fighter,.under.has3d .line,.under.has3d .hook{visibility:hidden}
.under .line{position:absolute;top:0;left:50%;width:3px;margin-left:-1px;border-radius:2px;background:linear-gradient(#fff,rgba(255,255,255,.25));box-shadow:0 0 8px rgba(255,255,255,.75);transition:height .45s ease;z-index:2}
.under .fighter{position:absolute;left:50%;z-index:3;margin-left:-26px;transition:top .5s cubic-bezier(.2,.7,.2,1)}
.under .swimmer{display:block;font-size:52px;line-height:1;animation:swim 1.05s ease-in-out infinite;filter:drop-shadow(0 10px 4px rgba(0,20,40,.4))}
.under .weed{position:absolute;bottom:6px;font-size:40px;z-index:3}
.under .weed.l{left:6px}
.under .weed.r{right:6px;transform:scaleX(-1)}
.under .silt{position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(180deg,transparent,#071c14);z-index:2}
.under .bub{position:absolute;bottom:30px;width:8px;height:8px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:rise 4.8s linear infinite}
.under .b1{left:16%}
.under .b2{left:68%;width:12px;height:12px;animation-duration:5.6s;animation-delay:.7s}
.under .b3{left:38%;animation-duration:3.8s;animation-delay:1.3s}
.under .b4{left:84%;width:6px;height:6px;animation-duration:6.2s;animation-delay:.4s}
.tugbar{height:12px;margin:8px 0 0;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.tugbar span{display:block;height:100%;background:linear-gradient(90deg,#7dffa6,#ffe56a);transition:width .45s ease}
.tugbar.live{height:18px;background:rgba(8,20,40,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.tugbar.live span{transition:width .08s linear}
.under.pulling{cursor:pointer;touch-action:manipulation;user-select:none;box-shadow:0 0 0 3px #7dffa6,inset 0 -30px 40px rgba(0,16,32,.35)}
.under.pulling .fighter{transition:top .08s linear}
.under.pulling .line{transition:height .08s linear}
.tugnote{margin:4px 0 8px}
.leapshow{position:relative;height:360px;margin:8px 0 12px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#d7f3ff 0 28%,#7ec8f0 28% 40%,#1d78c4 40% 72%,#08304f 72% 100%)}
.leap-pond{position:absolute;left:0;right:0;top:28%;height:14%;border-top:4px solid rgba(255,255,255,.9);pointer-events:none}
.leap-splash{position:absolute;left:50%;top:-8px;width:140px;height:36px;margin-left:-70px;border-radius:50%;background:rgba(255,255,255,.7);animation:splashing 3.4s ease forwards}
.leap-fish{position:absolute;left:50%;bottom:8px;z-index:3;font-size:84px;line-height:1;filter:drop-shadow(0 10px 0 rgba(0,20,40,.25));animation:fishleap 3.4s ease forwards}
.struggle{position:absolute;left:0;right:0;top:0;height:168px;display:flex;align-items:flex-end;justify-content:center;gap:6px;opacity:0;animation:struggleIn 3.4s ease forwards}
.struggle .spray{font-size:40px;animation:spray 3.4s ease forwards}
.hold{position:relative;width:168px;height:132px}
.hold .hand{position:absolute;left:0;top:22px;width:168px;text-align:center;font-size:112px;line-height:1;animation:hug 3.4s ease forwards}
.hold .catchfish{position:absolute;left:34px;top:0;font-size:92px;line-height:1;z-index:2;animation:wriggle 3.4s ease forwards}
.leap-cap{position:absolute;left:12px;right:12px;bottom:14px;margin:0;text-align:center;color:#fff;font-family:"Lilita One",sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.35)}
@keyframes fishleap{0%{transform:translate(-50%,24px) rotate(-20deg);opacity:1}34%{transform:translate(-50%,-300px) rotate(18deg) scale(1.18)}50%{transform:translate(-50%,-250px) rotate(-8deg) scale(1.05);opacity:1}64%,100%{transform:translate(-50%,-250px);opacity:0}}
@keyframes splashing{0%,16%{opacity:0;transform:scaleX(.5)}30%{opacity:1;transform:scaleX(1.2)}52%,100%{opacity:0}}
@keyframes struggleIn{0%,52%{opacity:0}66%,100%{opacity:1}}
@keyframes wriggle{0%,58%{transform:rotate(0)}66%{transform:rotate(-18deg) translateX(-8px) scale(1.04)}74%{transform:rotate(16deg) translateX(10px)}82%{transform:rotate(-14deg) translateX(-6px)}90%{transform:rotate(8deg)}100%{transform:rotate(-4deg)}}
@keyframes hug{0%,58%{transform:scale(1.35) translateY(10px)}70%{transform:scale(1)}78%{transform:rotate(-8deg) scale(1.05)}86%{transform:rotate(7deg)}100%{transform:rotate(-2deg) scale(1)}}
@keyframes spray{0%,60%{opacity:0;transform:translateY(10px)}72%{opacity:1;transform:translateY(-8px)}100%{opacity:.85;transform:translateY(-16px)}}
.landdemo{margin:0 0 10px}
.under.landing{box-shadow:0 0 0 3px #F5C24C,inset 0 -30px 40px rgba(0,16,32,.35)}
.under.landing.pulling{box-shadow:0 0 0 3px #7dffa6,inset 0 -30px 40px rgba(0,16,32,.35)}
.landover{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:18px;pointer-events:none}
.landover p{margin:0;padding:4px 12px;border-radius:999px;background:rgba(8,16,32,.72);color:#FFE793;font-family:"Lilita One",sans-serif;font-size:20px}
.landover .hand{font-size:72px;line-height:1;animation:grabclose 1.2s ease;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.landdemo .grab{display:flex;align-items:center;justify-content:center;gap:10px;font-size:48px}
.landdemo .hand{display:inline-block;animation:grabclose 1.2s ease}
.landdemo .catchfish{display:inline-block;animation:grabfish 1.2s ease}
@keyframes grabclose{0%{transform:translateY(-18px) scale(1.25)}100%{transform:none}}
@keyframes grabfish{0%{transform:translateY(16px) scale(.8)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.landdemo .hand,.landdemo .catchfish,.leap-fish,.leap-splash,.struggle,.struggle .catchfish,.struggle .hand,.struggle .spray{animation:none}.struggle{opacity:1}}
.fighter.tug .swimmer{animation:yank .4s ease}
.fighter.reel .swimmer{animation:haul .45s ease}
@keyframes swim{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(5px) rotate(10deg)}}
@keyframes yank{50%{transform:translateY(16px) rotate(16deg)}}
@keyframes haul{50%{transform:translateY(-18px) scale(1.08)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-210px);opacity:0}}
@keyframes rays{from{transform:translateX(0)}to{transform:translateX(-48px)}}
@media (prefers-reduced-motion:reduce){.under .swimmer,.under .bub,.under .rays,.fighter.tug .swimmer,.fighter.reel .swimmer,.schoolfish,.under.waiting .line.dropping,.leap-fish,.leap-splash,.struggle,.struggle .catchfish,.struggle .hand,.struggle .spray{animation:none}.struggle{opacity:1}}

/* Farm Chat and the server lamp. */
.linklamp{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid #F2C46B;background:#8A93B5;box-shadow:0 0 0 3px rgba(0,0,0,.25);cursor:pointer;flex:none;display:inline-grid;place-items:center;color:#102018;font-weight:800;font-size:13px;line-height:1}
.linklamp.on{background:#3DDC97;box-shadow:0 0 10px #3DDC97}
.linklamp.on::after{content:"✓"}
.linklamp.off{background:#FF5D73;box-shadow:0 0 10px #FF5D73}
.linklamp.off::after{content:"!"}
.linklamp.wait{background:#FFD447;animation:lamps 1.2s ease-in-out infinite}
.linklamp.idle{background:#8A93B5;border-color:#B7BFD8;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.pill.hallpill,.fround.hallbtn{position:relative}
.halldot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#FF5D73;border:2px solid #fff}
.hallcorner{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);display:flex;align-items:center;gap:8px}
.hallpanel{position:fixed;inset:0;z-index:16}
.hallpanel[hidden]{display:none !important}
.hallback{position:absolute;inset:0;border:0;padding:0;background:rgba(4,8,24,.55);cursor:pointer}
.hallbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100% - 20px));height:min(640px,calc(100% - 20px));display:flex;flex-direction:column;background:#141B3A;color:#F4F7FF;border:2px solid #F2C46B;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.halltop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 0;font-size:20px}
.hallrule{margin:6px 14px 8px;font-size:13px;line-height:1.35;color:#D5DCF5}
.hallsplit{display:flex;min-height:0;flex:1}
.hallside{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid rgba(242,196,107,.35)}
.halllist{flex:1;overflow:auto;padding:0 10px 8px}
.hallall{margin:0 10px 12px}
.hallrow{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:8px;border-radius:16px;border:2px solid #2A3870;background:#1C2754;color:inherit;text-align:left;cursor:pointer;font:inherit}
.hallrow.me{border-color:#F2C46B}
.halle{font-size:26px;line-height:1;flex:none}
.hallwho{flex:1;min-width:0;display:flex;flex-direction:column}
.hallwho b,.hallwho small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hallwho small{color:#C9D3F5;font-size:12px}
.hallstat{flex:none;text-align:right;display:flex;flex-direction:column}
.hallstat b{color:#FFE793}
.hallstat small{color:#C9D3F5;font-size:12px}
.ondot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:#3DDC97;box-shadow:0 0 6px #3DDC97;vertical-align:middle}
.hallchat{width:min(340px,42%);display:flex;flex-direction:column;min-height:0}
.hallchat[hidden]{display:none !important}
.hallbackbtn{display:none}
.halltitle{display:flex;flex-direction:column;min-width:0;flex:1}
.halltitle small{font-size:12px;color:#C9D3F5;font-weight:700}
.halllog{flex:1;overflow:auto;padding:8px 12px}
.hallmsg{display:flex;gap:8px;margin:0 0 10px}
.hallmsg p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.hallmsg small{color:#C9D3F5;font-weight:600}
.hallmsg.mine{flex-direction:row-reverse;text-align:right}
.hallform{display:flex;gap:8px;padding:8px 12px}
.hallform[hidden]{display:none !important}
.hallform input{flex:1;min-width:0;border-radius:999px;border:2px solid #2A3870;background:#0E1430;color:#fff;padding:8px 12px;font:inherit}
.hallform .hallmic{flex:none;min-width:48px;padding:8px 12px}
.hallform .hallmic.live{background:#FF5D73;color:#fff}
.hallvoice{margin:4px 0 0;max-width:100%;min-height:40px;display:flex;align-items:center;gap:8px;border:0;border-radius:6px 16px 16px 16px;background:#31427A;color:#fff;font:inherit;font-weight:700;padding:8px 12px;cursor:pointer;text-align:left}
.hallmsg.mine .hallvoice{background:#3E6BFF;flex-direction:row-reverse;border-radius:16px 6px 16px 16px;margin-left:auto;text-align:right}
.hallvoice .hvicon{flex:none;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.hallvoice.playing .hvicon{width:12px;height:12px;border:0;border-radius:2px;background:currentColor}
.hallvoice .hvwave{flex:1;display:flex;align-items:center;gap:3px;min-width:0}
.hallmsg.mine .hallvoice .hvwave{justify-content:flex-end}
.hallvoice .hvwave i{display:block;width:3px;height:8px;border-radius:2px;background:currentColor;opacity:.75}
.hallvoice .hvwave i:nth-child(2){height:14px}
.hallvoice .hvwave i:nth-child(3){height:10px}
.hallvoice.playing .hvwave i{animation:hvwave .8s ease-in-out infinite}
.hallvoice.playing .hvwave i:nth-child(2){animation-delay:.15s}
.hallvoice.playing .hvwave i:nth-child(3){animation-delay:.3s}
@keyframes hvwave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}
.hallvoice .hvlen{flex:none;font-size:14px;min-width:1.6em}
@media (prefers-reduced-motion:reduce){.hallvoice.playing .hvwave i{animation:none}}
.hallfine{margin:0 12px 10px;font-size:12px;color:#C9D3F5}
@media (max-width:720px){
  .hallchat{width:100%}
  .hallpanel:not(.split) .hallchat{display:none !important}
  .hallpanel.split .hallside{display:none}
  .hallbackbtn{display:inline-flex}
}
@keyframes lamps{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.linklamp.wait{animation:none}}

/* Sign-in screen (signing in is required) and the Club panel (common/club.js) */
.signin{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:18px 0}
.b.big{font-size:22px;padding:14px 26px}
.clubdlg{max-width:560px;max-height:min(88vh,820px);overflow:auto}
.clubdlg h4{margin:14px 0 6px}
.clubdlg .row{display:flex;gap:8px;flex-wrap:wrap}
.clubdlg .row input{flex:1;min-width:160px}
.clublist{margin:8px 0}
.clubrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px;border-radius:16px;border:2px solid #2A3870;background:#1C2754}
.clube{font-size:26px;line-height:1;flex:none}
.clubwho{flex:1;min-width:0;display:flex;flex-direction:column}
.clubwho b,.clubwho small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clubwho small{color:#C9D3F5;font-size:12px}

/* ---------- Brain Boost level overlay (common/brainprofile.js bbpPlay) ---------- */
.bbplay{position:fixed;inset:0;z-index:60;background:var(--bg)}
.bbplay iframe{width:100%;height:100%;border:0;display:block}
.bbstuck{position:absolute;left:16px;right:16px;bottom:24px;text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px}
.bbresult{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}
.bbresult .rcard{width:100%}
body.bbplaying{overflow:hidden}
body.bbplaying #app,body.bbplaying .famleft{visibility:hidden}

/* ---------- Brain Boost for grown-ups (brain-boost-admin.html, js/bbadmin.js) ---------- */
.bba{max-width:1440px;margin:0 auto;padding:0 16px 32px;box-sizing:border-box}
.bba-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.bba-head h1{font-size:30px;margin:0;flex:1 1 260px}
.bba-kids{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.bba-kid{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:600;cursor:pointer}
.bba-kid[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,194,76,.35)}
.bba-kid small{color:var(--muted);font-weight:600}
.bba-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.bba-status{flex:1 1 240px;color:var(--muted);font-size:15px}
.bba-status b{color:var(--ink)}
.bba-status .dirty{color:#FFD447}
.bba-cols{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(320px,420px);gap:14px;align-items:start}
.bba-col{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px;min-width:0}
.bba-col>h2{font-size:20px;margin:0 0 8px}
.bba-col>p.muted{font-size:14px;margin:0 0 8px}
.bba-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.bba-chip{border:2px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:3px 11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.bba-chip[aria-pressed="true"]{background:var(--line);border-color:var(--gold)}
.bba-mod{border:2px solid var(--line);border-left:6px solid var(--tc,#8B5CF6);border-radius:14px;padding:8px;margin:0 0 10px}
.bba-modhead,.bba-thead,.bba-lrow{display:flex;align-items:center;gap:8px;min-width:0}
.bba-modhead b,.bba-thead .nm,.bba-lrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bba-ico{font-size:22px;line-height:1;flex:none}
.bba-mini{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;min-width:34px;height:34px;padding:0 8px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;flex:none}
.bba-mini:hover{border-color:var(--gold)}
.bba-mini:disabled{opacity:.4;cursor:default}
.bba-lvl{display:flex;align-items:center;gap:6px;border-radius:10px;padding:4px 6px;margin-top:4px;background:rgba(255,255,255,.04);font-size:15px;touch-action:none;cursor:grab}
.bba-lvl .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bba-lvl.used{opacity:.6}
.bba-badge{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--line);color:var(--ink)}
.bba-badge.quiz{background:#2F7FD6;color:#fff}
.bba-badge.where{background:transparent;border:1px solid var(--line);color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bba-grip{flex:none;color:var(--muted);font-size:18px;cursor:grab;touch-action:none;padding:0 2px;user-select:none}
.bba-topics{display:flex;flex-direction:column;gap:10px;min-height:80px}
.bba-topic{border:2px solid var(--line);border-left:6px solid var(--tc,#8B5CF6);border-radius:16px;background:var(--bg);padding:8px}
.bba-topic.sel,.bba-level.sel{border-color:var(--gold)}
.bba-topic.off .bba-thead .nm,.bba-level.off .nm{opacity:.5;text-decoration:line-through}
.bba-thead{cursor:pointer}
.bba-thead .cnt{flex:none;color:var(--muted);font-size:14px}
.bba-levels{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px 18px;min-height:34px;border-radius:12px}
.bba-level{border:2px solid var(--line);border-radius:12px;background:var(--surface);padding:5px 8px;cursor:pointer}
.bba-lrow .num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--tc,#8B5CF6);color:#fff;font-size:14px;font-weight:700}
.bba-empty{border:2px dashed var(--line);border-radius:12px;padding:10px;text-align:center;color:var(--muted);font-size:14px}
.bba-insert{height:4px;border-radius:4px;background:var(--gold);box-shadow:0 0 8px rgba(245,194,76,.8);margin:-2px 0}
.bba-over{outline:3px dashed var(--gold);outline-offset:2px}
.bba-ghost{position:fixed;z-index:200;pointer-events:none;opacity:.92;max-width:300px;transform:rotate(-2deg);box-shadow:0 12px 30px rgba(0,0,0,.5)}
body.bba-dragging,body.bba-dragging *{cursor:grabbing!important;user-select:none}
.bba-switch{display:inline-flex;align-items:center;gap:4px;font-size:14px;flex:none;cursor:pointer}
.bba-switch input{width:20px;height:20px}
.bba-field{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:600}
.bba-field input,.bba-field select,.bba-field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:6px 10px;width:100%;box-sizing:border-box}
.bba-field textarea{min-height:64px;resize:vertical}
.bba-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bba-q{border:2px solid var(--line);border-radius:12px;padding:6px 8px;margin:0 0 6px;background:var(--bg)}
.bba-q.open{border-color:var(--gold)}
.bba-qhead{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0}
.bba-qhead .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.bba-q .bba-field{margin-top:8px}
.bba-preview{border:2px solid var(--line);border-radius:14px;overflow:hidden;margin-top:10px;background:var(--bg)}
.bba-preview iframe{display:block;width:100%;height:560px;border:0}
.bba-problems{margin:8px 0 0;padding-left:20px;color:#FFD0D6;font-size:15px}
.bba-note{font-size:14px;color:var(--muted);margin:6px 0}
@media (max-width:1180px){.bba-cols{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}.bba-config{grid-column:1/-1}}
@media (max-width:760px){.bba-cols{grid-template-columns:minmax(0,1fr)}.bba-head h1{font-size:24px}.bba-preview iframe{height:480px}}
@media (prefers-reduced-motion:reduce){.bba-ghost{transform:none}}