:root { --ink:#3b2f4a; --card:#fff8ee; --accent:#ff8fa3; --gold:#ffc857; --gold-deep:#d99a2b; --surface:#f3e8d8; --surface-2:#eadfd0; --line:#e4d6c2; --good:#2fae60; --bad:#e0566f; --sky:#bfe3ff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#bfe3ff; font-family:'Baloo 2',system-ui,sans-serif; color:var(--ink); user-select:none; }
canvas { display:block; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; }
.top { position:fixed; top:10px; left:10px; right:10px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.hud { display:flex; gap:6px; justify-content:space-between; flex-wrap:wrap; }
.pill { background:var(--card); border-radius:999px; padding:5px 12px; font-weight:700; box-shadow:0 3px 0 #0002; pointer-events:auto; font-size:15px; white-space:nowrap; }
.row { display:flex; gap:6px; flex-wrap:wrap; }
button.pill { border:0; font:inherit; color:inherit; cursor:pointer; }
.quest { align-self:flex-start; max-width:min(320px,100%); background:#3b2f4acc; color:#fff; border-radius:14px; padding:6px 12px; font-size:14px; line-height:1.25; }
.quest { pointer-events:auto; cursor:pointer; }
.quest i { float:right; font-style:normal; font-size:11px; opacity:.7; margin-left:8px; }
.quest b { color:var(--gold); display:block; font-size:12px; letter-spacing:.05em; }
.quest .q2 { display:block; margin-top:6px; padding-top:5px; border-top:1px solid color-mix(in srgb, currentColor 25%, transparent); font-size:13px; }
.bar { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; max-width:calc(100% - 20px); overflow-x:auto; padding-top:4px; }
.slot { background:var(--card); border:3px solid transparent; border-radius:16px; padding:5px 9px; min-width:76px; text-align:center; font-weight:700; box-shadow:0 3px 0 #0002; cursor:pointer; font-size:13px; line-height:1.15; flex:none; }
.slot.on { border-color:var(--accent); transform:translateY(-3px); }
.slot .dot { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; margin-right:4px; }
.slot small { display:block; font-weight:500; opacity:.7; }
.toast { position:fixed; bottom:92px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:6px 16px; border-radius:18px; font-weight:700; opacity:0; transition:opacity .25s; pointer-events:none; max-width:calc(100% - 32px); text-align:center; }
.toast.show { opacity:1; }
.dialog { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); width:min(520px,calc(100% - 24px)); background:var(--card); border-radius:22px; padding:14px 18px; box-shadow:0 5px 0 #0003; display:none; z-index:3; }
.dialog.show { display:block; }
.dialog h3 { margin:0; font-size:20px; }
.dialog .hearts { color:var(--accent); font-size:14px; }
.dialog p { margin:6px 0 10px; font-size:17px; line-height:1.35; }
.dialog .btns { display:flex; flex-wrap:wrap; gap:6px; }
.dialog button { border:0; background:var(--gold); font:inherit; font-weight:700; border-radius:12px; padding:6px 12px; cursor:pointer; color:var(--ink); }
.dialog button.ghost { background:var(--surface-2); }
.veil { position:fixed; inset:0; background:#2a2140aa; display:none; align-items:center; justify-content:center; padding:14px; z-index:5; }
.veil.show { display:flex; }
.card { background:var(--card); border-radius:24px; padding:20px 22px; width:min(460px,100%); max-height:90vh; overflow:auto; box-shadow:0 6px 0 #0003; }
.card .kicker { font-weight:800; color:var(--accent); font-size:13px; letter-spacing:.08em; }
.card h2 { margin:2px 0 10px; font-size:26px; line-height:1.1; }
.card h4 { margin:12px 0 2px; font-size:14px; opacity:.6; }
.card p { margin:0; font-size:16px; line-height:1.4; }
.card button { margin-top:14px; border:0; font:inherit; font-weight:800; background:var(--gold); color:var(--ink); padding:8px 20px; border-radius:999px; cursor:pointer; }
.card button.ghost { background:var(--surface-2); }
.card .letter { font-style:italic; font-size:17px; }
.jlist button { display:block; width:100%; text-align:left; margin-top:8px; background:var(--surface); font-weight:700; border-radius:14px; }
.jlist .locked { opacity:.45; pointer-events:none; }
.jlist .sub { font-weight:500; opacity:.7; }
.pond { position:relative; height:130px; border-radius:18px; background:linear-gradient(#cfe9ff,#8fc3f2); margin-top:12px; overflow:hidden; }
.pond::after { content:''; position:absolute; left:0; right:0; top:62px; height:2px; background:#ffffff88; }
.bob { position:absolute; left:50%; top:50px; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:linear-gradient(#ff6b6b 50%,#fff 50%); box-shadow:0 2px 0 #0002; transition:transform .12s; animation:float 1.6s ease-in-out infinite; }
.bob.dip { animation:none; transform:translateY(18px) scale(.8); }
.bob.gone { display:none; }
@keyframes float { 50% { transform:translateY(3px); } }
.sky { display:block; width:100%; border-radius:16px; margin-top:12px; background:#0e1433; touch-action:none; }
.rope { display:block; width:100%; border-radius:16px; margin-top:12px; background:var(--surface); }
.steppers { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.steppers div { background:var(--surface); border-radius:14px; padding:6px 10px; font-weight:700; text-align:center; }
.steppers button { margin:0 4px; padding:2px 12px; }
.title { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(#ffd6c9,#bfe3ff); text-align:center; padding:16px; z-index:6; }
.title h1 { font-size:clamp(44px,12vw,84px); margin:0; line-height:1; color:#fff; text-shadow:0 5px 0 #ff8fa3; }
.title p { max-width:360px; font-size:18px; }
.title button { border:0; font:inherit; font-size:22px; font-weight:800; background:var(--gold); color:var(--ink); padding:10px 34px; border-radius:999px; box-shadow:0 5px 0 #d99a2b; cursor:pointer; }
[hidden] { display:none !important; }
.pill.fb { background:#ff8fa3; color:#fff; }
.top { top:calc(10px + env(safe-area-inset-top, 0px)); }
.bar { bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
.help { font-size:14px; opacity:.75; margin-top:14px; }
@media (max-width:520px) { .pill { font-size:13px; padding:4px 9px; } .quest { font-size:13px; } }
.title .hemi { margin-top:12px; font-size:14px; padding:6px 16px; background:#ffffffaa; box-shadow:none; font-weight:700; }
#fade { position:fixed; inset:0; background:#fff8ee; opacity:0; pointer-events:none; transition:opacity .6s; z-index:7; }
.bar { scrollbar-width:none; } .bar::-webkit-scrollbar { display:none; }

/* design pass: icons, colored cards, see-through title */
.pill svg { width:18px; height:18px; vertical-align:-4px; margin-right:4px; }
#mute svg { margin-right:0; }
@media (max-width:520px) { .pill .lbl { display:none; } .pill svg { margin-right:2px; } }
.card { border-top:10px solid var(--surface-2); }
.card.k-mem { border-top-color:#ffc857; } .card.k-mem .kicker { color:#c98a1f; }
.card.k-fest { border-top-color:#ff8fa3; background:linear-gradient(#fff0f3, #fff8ee 40%); }
.card.k-recall { border-top-color:#6fd3b8; background:linear-gradient(#eafaf4, #fff8ee 40%); } .card.k-recall .kicker { color:#2c9c7d; }
.card.k-star { border-top-color:#5a4b99; background:linear-gradient(#eeeaff, #fff8ee 40%); } .card.k-star .kicker { color:#5a4b99; }
.card.k-letter { border-top-color:#c9a27a; background:#fdf5e6; }
.card h2 { letter-spacing:-.01em; }
.dialog { border:3px solid #fff; box-shadow:0 6px 0 #0002, 0 12px 30px #3b2f4a33; }
.dialog h3 { color:#ff6f8f; }
.title { background:linear-gradient(rgba(255,214,201,.92) 0%, rgba(255,214,201,.55) 45%, rgba(191,227,255,.1) 100%); }
.title h1 { text-shadow:0 5px 0 #ff8fa3, 0 12px 30px #ff8fa366; }
.title p { background:#fff8eecc; border-radius:16px; padding:8px 14px; }
.on-title .top, .on-title .bar, .on-title .toast { visibility:hidden; }
.veil { z-index:8; }

.discover { position:fixed; top:calc(120px + env(safe-area-inset-top, 0px)); left:50%; transform:translate(-50%, -12px); width:min(420px, calc(100% - 24px)); background:#fff8ee; border-radius:18px; border-top:8px solid #6fd3b8; padding:10px 14px; box-shadow:0 6px 18px #3b2f4a33; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:4; }
.discover.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.discover b { display:block; color:#2c9c7d; font-size:12px; letter-spacing:.06em; }
.discover strong { display:block; font-size:18px; }
.discover span { display:block; font-size:14px; line-height:1.35; margin-top:2px; }
@keyframes fbPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); box-shadow:0 0 0 8px #ff8fa355; } }
.pill.fb.pulse { animation:fbPulse .8s ease-in-out 4; }
#grain { display:none; position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .35  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.paper #grain { display:block; }
.paper .card, .paper .dialog, .paper .pill { font-family:'Baloo 2', system-ui, sans-serif; }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chips button { margin:0; padding:5px 12px; }
.sw { width:32px; height:32px; padding:0 !important; border-radius:50% !important; border:3px solid #fff !important; box-shadow:0 2px 0 #0002; }
.sw.on { border-color:#3b2f4a !important; transform:scale(1.12); }
.veil.setup { background:transparent; align-items:flex-end; }
.veil.setup .card { max-height:58vh; }
@media (min-width:760px) { .veil.setup { justify-content:flex-end; align-items:center; padding-right:4vw; } .veil.setup .card { max-height:88vh; } }
.in-setup .top, .in-setup .bar, .in-setup #devBtn { visibility:hidden; }

.buildbar { display:none; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); background:#fff8ee; border-radius:20px; padding:10px; box-shadow:0 6px 18px #3b2f4a33; z-index:3; }
.building .buildbar { display:block; }
.buildbar .bhelp { margin:0 0 6px; font-size:14px; font-weight:700; }
.bpieces { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.bpieces button, .bctl button { flex:none; border:3px solid transparent; background:var(--surface); border-radius:14px; padding:6px 10px; font:700 13px 'Baloo 2',sans-serif; color:#3b2f4a; cursor:pointer; line-height:1.1; }
.bpieces button small { display:block; font-weight:500; opacity:.7; }
.bpieces button.on, .bctl button.on { border-color:#ff8fa3; background:#fff; }
.bctl { display:flex; gap:6px; margin-top:6px; }
.bctl .done { margin-left:auto; background:#ffc857; }
.building .quest { display:none; }

.ages { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:6px; font-size:13px; font-weight:700; }
.ages span { background:var(--surface); border-radius:99px; padding:2px 10px; }
.ages span.done { background:#8fdc8a; color:#fff; }
.ages span.soon { opacity:.5; }
.ages i { font-style:normal; opacity:.4; }
.meter { height:12px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:4px; }
.meter div { height:100%; border-radius:99px; transition:width .3s; }
.igrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:8px; margin-top:6px; }
.igrid .itile { position:relative; width:auto; height:auto; min-height:78px; border:2px solid #eadbc4; color:#3b2f4a; box-shadow:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 6px; margin:0; background:var(--surface); border-radius:14px; font-weight:700; }
.itile .ic { font-size:26px; line-height:1.1; }
.itile b { position:absolute; top:4px; right:7px; font-size:12px; background:#fff8ec; border-radius:10px; padding:0 5px; }
.itile small { font-size:11px; font-weight:600; opacity:.75; text-align:center; line-height:1.15; }
.itinfo { margin-top:10px; background:#fff3dd; border-radius:12px; padding:8px 10px; font-size:14px; }
.slot .sic { margin-right:4px; }
.floaty { position:fixed; transform:translate(-50%,-50%); pointer-events:none; z-index:40; font-weight:800; font-size:17px; color:#3b2f4a; background:#fff8ec; border-radius:12px; padding:2px 10px; box-shadow:0 3px 8px rgba(0,0,0,.18); animation:floaty 1.3s ease-out forwards; white-space:nowrap; }
@keyframes floaty { 0% { opacity:0; margin-top:8px; } 15% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; margin-top:-46px; } }
.space { margin:8px 0 2px; font-size:13px; font-weight:700; }
.space i { display:block; height:8px; border-radius:6px; background:#eadbc4; margin-top:3px; overflow:hidden; }
.space b { display:block; height:100%; border-radius:6px; }
.mtabs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.mtabs button { margin:0; padding:6px 12px; font-size:14px; }
.mrow { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:14px; padding:8px 10px; margin-top:8px; }
.mrow .minfo { flex:1; min-width:0; font-size:14px; }
.mrow .minfo small { opacity:.7; display:block; }
.mrow .mask { font-weight:700; color:#8a5a2b; margin-top:2px; }
.mrow .mbtns { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.mrow .mbtns button { margin:0; padding:6px 12px; font-size:13px; }
.mrow svg, .brandhead svg, .itile svg { flex:none; vertical-align:middle; }
.nologo { font-size:28px; }
.brandhead { display:flex; align-items:center; gap:10px; margin:8px 0; }
.brandhead h2, .brandhead h3 { margin:0; }
.chips button { margin:3px; padding:5px 10px; }
.sw.sm { width:22px; height:22px; }
.numin { font:16px inherit; border-radius:10px; border:2px solid var(--surface-2); padding:6px 8px; width:80px; }
select { font:15px inherit; border-radius:10px; border:2px solid var(--surface-2); padding:6px; background:#fff; }
.mbtns .rep, .rep { font-size:12px !important; opacity:.75; }
body.in-cine .hud, body.in-cine #quest, body.in-cine #bar, body.in-cine #devBtn, body.in-cine .quest, body.in-cine .bar { opacity:0 !important; pointer-events:none !important; transition:opacity .6s; }
body.in-cine .top { opacity:0 !important; pointer-events:none !important; transition:opacity .6s; }
.fishhud { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); width:min(520px, calc(100% - 32px)); background:rgba(255,248,238,.95); border-radius:22px; padding:12px 14px; z-index:9; box-shadow:0 8px 24px rgba(0,0,0,.2); text-align:center; }
.fishhud p { margin:0 0 8px; font-weight:700; }
.fhbtns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.fhbtns button { margin:0; min-width:120px; }
.fhreel { margin:4px 0 10px; }
.fhmeter { height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-bottom:6px; }
.fhmeter b { display:block; height:100%; border-radius:6px; }
.fhbar { position:relative; height:30px; border-radius:15px; background:var(--surface-2); }
.fhbar i { position:absolute; top:0; bottom:0; border-radius:15px; background:#c7e8c4; }
.fhbar i.in { background:#8fdc8a; }
.fhbar span { position:absolute; top:2px; transform:translateX(-50%); font-size:20px; }
.tagnew { background:#6fd3b8; color:#fff; border-radius:99px; padding:1px 8px; font-weight:800; margin-left:4px; }
.tagrec { background:#ffc857; border-radius:99px; padding:1px 8px; font-weight:800; margin-left:4px; }
.fishhud button { border:0; font:inherit; font-weight:800; background:var(--gold); color:var(--ink); padding:8px 20px; border-radius:999px; cursor:pointer; touch-action:none; user-select:none; }
.fishhud button.ghost { background:var(--surface-2); }
.friend { background:var(--surface); border-radius:14px; padding:8px 12px; margin-top:8px; }
.friend .hearts { color:#ff8fa3; letter-spacing:1px; font-size:13px; }
.friend .tr { margin-top:3px; font-size:18px; } .friend .tr small { font-size:12px; opacity:.7; display:inline-block; width:70px; }
.igrid .itile.off { opacity:.5; }
.igrid .itile.sel { border-color:#8fdc8a; }
.itile .chk { position:absolute; top:4px; left:7px; font-style:normal; color:#2fae60; font-weight:900; }
.seedrow { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:14px; padding:8px 10px; margin-top:8px; }
.seedrow .ic { font-size:26px; } .seedrow .si { flex:1; font-size:14px; } .seedrow .si small { display:block; opacity:.8; }
.seedrow .sb { display:flex; gap:4px; } .seedrow .sb button { margin:0; padding:6px 10px; font-size:13px; }
.jlist .seedrow .sb button { display:inline-block; width:auto; background:var(--gold); text-align:center; }
.jlist .seedrow .sb button.ghost { background:#e4d6c2; opacity:.7; }

/* --- design pass: paper quest note, dialog name tab, pressable buttons, sun dial --- */
.quest { background:var(--card); color:var(--ink); border-left:6px solid var(--gold); border-radius:6px 14px 14px 6px; box-shadow:0 3px 0 #0002; transform:rotate(-.4deg); }
.quest b { color:#c4822a; }
.quest i { opacity:.55; }
.dialog { padding-top:20px; border:3px solid var(--line); }
.dialog h3 { position:absolute; top:-16px; left:18px; background:var(--accent); color:#fff; padding:2px 14px; border-radius:999px; font-size:16px; box-shadow:0 3px 0 #0002; }
.dialog .hearts { font-size:12px; letter-spacing:1px; }
.dialog button, .card button, .fishhud button { box-shadow:0 4px 0 var(--gold-deep); transition:transform .08s, box-shadow .08s; }
.dialog button:active, .card button:active, .fishhud button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--gold-deep); }
.dialog button.ghost, .card button.ghost, .fishhud button.ghost { box-shadow:0 4px 0 #cdbda6; }
.dialog button { border-radius:999px; padding:7px 16px; }
.jlist button, .itile, .igrid .itile { box-shadow:0 3px 0 #0001; }
.dial { margin-right:5px; font-size:14px; }
/* hotbar */
.bar { align-items:flex-end; gap:6px; padding:4px 4px 2px; }
.hslot { position:relative; flex:none; width:58px; height:58px; background:var(--card); border:3px solid transparent; border-radius:16px; box-shadow:0 3px 0 #0002; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; }
.hslot span { font-size:24px; line-height:1; }
.hslot b { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--ink); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
.hslot small { font-size:9.5px; font-weight:700; opacity:.75; margin-top:2px; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hslot.on { border-color:var(--accent); transform:translateY(-4px); }
.hslot.late, .hslot.none { opacity:.55; }
.hslot.tool { width:46px; height:46px; background:var(--surface); }
.hslot.tool span { font-size:21px; }
.hslot.bronze { border-color:#d9a441; }
.hdiv { flex:none; width:2px; height:38px; background:#fff8; border-radius:2px; margin:0 2px 8px; }
/* workbench recipes */
.jlist button.craft { display:flex; flex-direction:column; gap:3px; }
.craft .ct small { font-size:12px; font-weight:700; opacity:.6; margin-left:4px; }
.craft .ct small.go { color:var(--good); opacity:1; }
.craft.ready { border:2px solid #8fdc8a; }
.craft.own { opacity:.55; }
.craft .needs { display:flex; flex-wrap:wrap; gap:5px; }
.craft .needs em { font-style:normal; font-size:13px; font-weight:800; padding:1px 8px; border-radius:999px; }
.craft .needs em.ok { background:#dff5dc; color:#1f7a3f; }
.craft .needs em.no { background:#fde3e7; color:#b33a52; }
.founder { display:inline-block; background:linear-gradient(90deg,#c9b6ff,#ffe07a); color:var(--ink); font-weight:800; font-size:12px; border-radius:999px; padding:2px 10px; margin:2px 0 4px; }
.fstar { color:#b08ae0; font-weight:900; }
.founderpill { background:linear-gradient(90deg,#efe6ff,#fff3c9) !important; }
.jlist button.mdone { opacity:.6; }
.wallnames { display:flex; flex-wrap:wrap; gap:6px; } .wallnames span { background:var(--surface); border-radius:999px; padding:3px 12px; font-weight:700; }
.pollrow { position:relative; display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:14px; padding:8px 12px; margin-top:8px; overflow:hidden; font-weight:700; }
.pollrow i { position:absolute; left:0; top:0; bottom:0; background:#ffc85755; z-index:0; }
.pollrow span, .pollrow b { position:relative; z-index:1; } .pollrow span { flex:1; } .pollrow.mine { border:2px solid var(--gold); }
/* opening presents */
.presents { position:fixed; inset:0; z-index:30; background:radial-gradient(circle at 50% 40%, #4a3a6acc, #1b1530ee); display:flex; align-items:center; justify-content:center; animation:pfade .3s; }
.presents.bye { opacity:0; transition:opacity .3s; }
@keyframes pfade { from { opacity:0; } }
.confetti { position:absolute; inset:0; pointer-events:none; z-index:2; }
.pstage { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; color:#fff; padding:16px; width:min(420px, 100%); animation:pin .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pin { from { transform:translateY(40px) scale(.8); opacity:0; } }
.pcount { font-weight:800; letter-spacing:.08em; font-size:13px; opacity:.8; margin-bottom:10px; text-transform:uppercase; }
.pbox { position:relative; width:170px; height:170px; cursor:pointer; margin:96px 0 14px; }
.pbody { position:absolute; left:10px; right:10px; bottom:0; height:115px; border-radius:14px; background:linear-gradient(90deg, transparent 42%, var(--w2) 42%, var(--w2) 58%, transparent 58%), var(--w1); box-shadow:0 10px 0 #0003, inset 0 -12px 0 #0002; }
.plid { position:absolute; left:0; right:0; top:22px; height:42px; border-radius:12px; z-index:3; background:linear-gradient(90deg, transparent 42%, var(--w2) 42%, var(--w2) 58%, transparent 58%), var(--w1); box-shadow:0 6px 0 #0003, inset 0 -8px 0 #0002; transition:transform .55s cubic-bezier(.3,1.6,.5,1), opacity .55s; }
.bow { position:absolute; left:50%; top:-26px; width:64px; height:34px; transform:translateX(-50%); }
.bow::before, .bow::after { content:''; position:absolute; top:4px; width:30px; height:26px; background:var(--w2); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow:inset 0 -5px 0 #0002; }
.bow::before { left:0; transform:rotate(-20deg); } .bow::after { right:0; transform:rotate(20deg); }
.pbox:not(.open) { animation:pidle 2.2s ease-in-out infinite; }
@keyframes pidle { 0%,100% { transform:rotate(0) } 8% { transform:rotate(-4deg) } 16% { transform:rotate(4deg) } 24% { transform:rotate(0) } }
.pbox.wiggle { animation:pwig .35s; }
@keyframes pwig { 25% { transform:rotate(-9deg) scale(1.05) } 75% { transform:rotate(9deg) scale(1.05) } }
.pbox.open .plid { transform:translate(60px, -140px) rotate(35deg); opacity:0; }
.pitem { position:absolute; left:50%; bottom:40px; transform:translate(-50%, 0) scale(0); font-size:74px; z-index:4; transition:transform .6s cubic-bezier(.2,1.8,.4,1) .15s; filter:drop-shadow(0 6px 10px #0006); color:#ffe07a; }
.pbox.open .pitem { transform:translate(-50%, -104px) scale(1); }
.prays { position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-300px 0 0 -180px; z-index:0; opacity:0; background:repeating-conic-gradient(#fff6 0 10deg, transparent 10deg 30deg); border-radius:50%; -webkit-mask:radial-gradient(circle, #000 20%, transparent 70%); mask:radial-gradient(circle, #000 20%, transparent 70%); transition:opacity .5s .2s; }
.pbox.open .prays { opacity:1; animation:spin 9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.ptext { opacity:0; transform:translateY(12px); transition:all .4s .45s; margin-top:30px; }
.pstage.opened .ptext { opacity:1; transform:none; }
.ptext h2 { margin:0; font-size:26px; text-shadow:0 3px 0 #0004; } .ptext p { margin:6px 0 0; font-size:16px; opacity:.9; }
.phint { font-weight:700; opacity:.85; margin-top:4px; animation:pulse2 1.4s ease-in-out infinite; }
.pstage.opened .phint { display:none; }
@keyframes pulse2 { 50% { opacity:.4; } }
.pnext { margin-top:18px; border:0; font:inherit; font-weight:800; background:var(--gold); color:var(--ink); padding:10px 26px; border-radius:999px; cursor:pointer; box-shadow:0 4px 0 var(--gold-deep); opacity:0; pointer-events:none; transition:opacity .3s .8s; }
.pstage.opened .pnext { opacity:1; pointer-events:auto; }
.petpick { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px; }
.card .petpick button { margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--surface); border:3px solid transparent; border-radius:18px; padding:8px 4px; box-shadow:0 3px 0 #0001; font-size:13px; }
.card .petpick button.on { border-color:var(--accent); background:#fff; }
.testpill { background:#dff5dc !important; }
body.testisland .title h1::after { content:'🧪 Test island'; display:block; font-size:18px; color:#2fae60; text-shadow:none; margin-top:4px; }


/* the Creator's preview banner (test island only) */
.previewbar { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:30; background:#3b2f4a; color:#fff; border-radius:999px; padding:6px 8px 6px 16px; display:flex; gap:8px; align-items:center; font-size:14px; max-width:calc(100% - 32px); flex-wrap:wrap; justify-content:center; }
.previewbar button { margin:0; padding:4px 12px; font-size:13px; }

/* top of the screen: "when and how much" on one row (date and time share a pill), actions on the other */
.row.when #day { border-radius:999px 0 0 999px; padding-right:7px; }
.row.when #clock { border-radius:0 999px 999px 0; margin-left:-6px; padding-left:7px; box-shadow:0 3px 0 #0002, inset 1px 0 0 #0001; }
.row.acts { justify-content:flex-end; }
@media (max-width:520px) { .hud { flex-direction:column; align-items:stretch; } .row.acts { justify-content:flex-start; flex-wrap:nowrap; } .row.acts .pill { padding:4px 8px; } }

/* --- design quality pass: soft frosted buttons, a tray for the hotbar, menus that pop in, clearer goals --- */
:root { --glass:rgba(255,250,242,.92); --lift:0 2px 0 rgba(59,47,74,.08), 0 6px 16px rgba(59,47,74,.14); }
.pill { background:var(--glass); border:1.5px solid #fff; box-shadow:var(--lift); }
button.pill { transition:transform .1s; } button.pill:active { transform:translateY(1px) scale(.96); }
.row.when #day { border-right:0; } .row.when #clock { border-left:0; box-shadow:var(--lift); }
#coins svg { filter:drop-shadow(0 1px 0 #d99a2b88); }
.pill.fb { background:linear-gradient(180deg, #ffa3b5, #ff7f98); border-color:#ffc6d1; }
.founderpill { border-color:#fff !important; }
.quest { background:var(--glass); border:1.5px solid #fff; border-left:6px solid var(--gold); box-shadow:var(--lift); }

/* the hotbar sits in one soft tray */
.bar { background:rgba(255,250,242,.72); border:1.5px solid rgba(255,255,255,.85); border-radius:24px; padding:10px 10px 7px; gap:7px; box-shadow:0 10px 26px rgba(59,47,74,.16); }
.bar:empty { display:none; }
.hslot { background:linear-gradient(180deg, #fffdf8, #fbefdc); border:2.5px solid #fff; box-shadow:0 3px 0 rgba(59,47,74,.12); }
.hslot.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,143,163,.3), 0 7px 0 rgba(59,47,74,.1); transform:translateY(-5px); }
.hslot b { background:var(--ink); border:2px solid #fff; height:22px; min-width:22px; }
.hslot.on b { background:var(--accent); }
.hslot.tool { background:linear-gradient(180deg, #f6ecdd, #eadcc7); }
.hslot:active { transform:translateY(1px); }
.hdiv { background:rgba(59,47,74,.14); height:36px; margin:0 1px 8px; }

/* menus: a softer backdrop, a colored band on top, and a quick pop in */
.veil { background:radial-gradient(ellipse at 50% 45%, rgba(42,33,64,.5), rgba(42,33,64,.78)); }
.card { --band:#ffd49a; border:2px solid #fff; border-top:0; padding-top:24px; box-shadow:inset 0 8px 0 var(--band), 0 10px 0 rgba(59,47,74,.1), 0 26px 60px rgba(30,20,50,.32); }
.card.k-mem { --band:#ffc857; } .card.k-fest { --band:#ff8fa3; } .card.k-recall { --band:#6fd3b8; } .card.k-star { --band:#8b7fd6; } .card.k-letter { --band:#c9a27a; }
.veil.setup .card { box-shadow:inset 0 8px 0 var(--band), 0 10px 30px rgba(30,20,50,.22); }
.card.pop { animation:cardIn .28s cubic-bezier(.2,1.25,.4,1); }
@keyframes cardIn { from { transform:translateY(16px) scale(.95); opacity:0; } }
.card .kicker { display:inline-block; background:#ffe3e9; color:#e0587a; border-radius:999px; padding:1px 10px; font-size:12px; }
.card.k-mem .kicker { background:#fff0c8; } .card.k-recall .kicker { background:#dcf6ee; } .card.k-star .kicker { background:#e9e5ff; } .card.k-letter .kicker { background:#f5e8d6; color:#8a6440; }
.card h2 { margin-top:6px; }
.card h4 { opacity:1; color:#9a7f66; font-size:13.5px; font-weight:800; margin:14px 0 3px; }
.jlist button { border:2px solid transparent; transition:transform .1s; } .jlist button:active { transform:scale(.98); }
.igrid .itile { background:linear-gradient(180deg, #fffaf1, #f3e8d8); border-color:#efe2cc; }

/* goals: a check circle and a progress bar on each */
.jlist button.goal { display:flex; align-items:center; gap:10px; cursor:default; }
.goal .gck { flex:none; width:26px; height:26px; border-radius:50%; border:2.5px solid #d9c8ae; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:900; }
.goal.done { background:#eaf8e6; } .goal.done .gck { background:var(--good); border-color:var(--good); }
.goal .gtx { flex:1; min-width:0; } .goal .gtx small { display:block; font-weight:600; opacity:.65; font-size:13px; }
.goal .gbar { display:block; height:7px; border-radius:99px; background:#e6d8c3; margin-top:4px; overflow:hidden; }
.goal .gbar b { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #ffc857, #ffae57); }
.goal.done .gbar b { background:var(--good); }

/* messages */
.toast { background:rgba(59,47,74,.92); padding:8px 18px; border-radius:999px; box-shadow:0 8px 22px rgba(30,20,50,.25); transform:translate(-50%, 8px); transition:opacity .25s, transform .25s; }
.toast.show { transform:translate(-50%, 0); }
.dialog { box-shadow:0 6px 0 rgba(59,47,74,.1), 0 16px 40px rgba(30,20,50,.22); }
.discover { border:2px solid #fff; border-top:0; box-shadow:inset 0 8px 0 #6fd3b8, 0 10px 26px rgba(30,20,50,.22); padding-top:16px; }

/* title screen */
.title h1 { animation:titleFloat 5s ease-in-out infinite; }
@keyframes titleFloat { 50% { transform:translateY(-6px); } }
.title #start { padding:12px 52px; font-size:24px; box-shadow:0 5px 0 #d99a2b, 0 12px 30px rgba(255,200,87,.55); animation:playGlow 2.6s ease-in-out infinite; }
@keyframes playGlow { 50% { box-shadow:0 5px 0 #d99a2b, 0 12px 40px rgba(255,200,87,.9); } }
.title #start:active { transform:translateY(4px); box-shadow:0 1px 0 #d99a2b; }
.title p { border:1.5px solid #fff; box-shadow:var(--lift); }
.title .hemi { border:1.5px solid #fff; background:rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .title h1, .title #start, .card.pop { animation:none; } }
/* leave room above the hotbar tray */
.dialog { bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom:calc(106px + env(safe-area-inset-bottom, 0px)); }
.previewbar { bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:520px) { .bar { padding:9px 8px 6px; gap:6px; } .hslot { width:54px; height:54px; } .hslot.tool { width:44px; height:44px; } }
/* phones: presses never select text, show the long-press menu, or double-tap zoom (typing boxes still work normally) */
html, body, * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
canvas { touch-action:none; }
input, textarea, select { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
input, textarea, select { font-size:max(16px, 1em); } /* iPhone zooms in on any box with smaller text */

/* name tags over the thing you're standing near */
.neartag { position:fixed; transform:translate(-50%, -100%); z-index:2; pointer-events:none; background:rgba(59,47,74,.86); color:#fff; font-weight:700; font-size:14px; padding:3px 12px; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .2s; box-shadow:0 4px 12px rgba(30,20,50,.25); }
.neartag::after { content:''; position:absolute; left:50%; bottom:-5px; margin-left:-5px; border:5px solid transparent; border-top-color:rgba(59,47,74,.86); border-bottom:0; }
.on-title .neartag, .in-setup .neartag { display:none; }

/* menus: what you can tap looks like a button with an arrow; plain information looks like text */
.jlist button.tap { position:relative; padding-right:34px; }
.jlist button.tap::after { content:'›'; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:800; color:#b79a78; }
.jlist button.plain { background:transparent; box-shadow:none; border:0; border-bottom:1.5px solid var(--line); border-radius:0; cursor:default; padding:8px 4px; font-weight:600; }
.jlist button.plain:active { transform:none; }
.jlist button.plain.goal { border:0; border-radius:14px; padding:8px 12px; } .jlist button.goal.plain:not(.done) { background:var(--surface); } .jlist button.goal.plain.done { background:#eaf8e6; }
.jlist .locked { opacity:.55; }
/* phones: keep the words on the top buttons (they wrap to a second line if they need to) */
@media (max-width:520px) { .pill .lbl { display:inline; } #fbBtn .lbl { display:none; } .row.acts { flex-wrap:wrap; } }

/* goal arrow: shows at the screen edge when your goal is out of view */
#goalArrow { position:fixed; z-index:3; transform:translate(-50%,-50%); pointer-events:none; display:none; flex-direction:column; align-items:center; gap:0; font-family:'Baloo 2',sans-serif; }
#goalArrow.show { display:flex; }
#goalArrow span { font-size:30px; line-height:1; color:#ffc857; text-shadow:0 2px 0 #3b2f4a, 0 0 10px #ffc857aa; display:block; animation:pulse2 1.4s ease-in-out infinite; }
#goalArrow b { font-size:12px; color:#fff; background:#3b2f4acc; border-radius:8px; padding:0 7px; }
body.on-title #goalArrow, body.in-setup #goalArrow, .building #goalArrow { display:none !important; }

/* memory cards: a picture of the real thing, and one line that says why it matters */
.memhook { font-size:18px; font-weight:700; line-height:1.3; margin:4px 0 0; }
.memart { background:#f6ead8; border-radius:16px; padding:12px 12px 10px; margin-top:10px; }
.memart svg { display:block; width:100%; height:auto; }
.memart span { display:block; font-size:13.5px; line-height:1.35; color:#7a6452; margin-top:6px; }
.memart span + span { margin-top:5px; }

/* cards with no headings: a little air between paragraphs */
.card p.gap { margin-top:10px; }

.card .memart + p { margin-top:10px; }

.card p .brk { display:block; height:7px; }

.toast.show { pointer-events:auto; cursor:pointer; }

.bcats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.bcats button { margin:0; padding:4px 12px; font-size:13px; border-radius:999px; background:#fff8; box-shadow:none; }
.bcats button.on { background:var(--gold); }

.nlist { display:grid; gap:5px; margin:8px 0 10px; }
.nrow { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#f1e7d6; border-radius:12px; padding:7px 14px; font-weight:700; }
.nrow b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.nrow.ok b { color:#1f7a3f; } .nrow.no b { color:#b5482f; }
.nrow .nco { display:inline-block; width:17px; vertical-align:-3px; }
.jlist button.craft .needs, .needs { display:flex; flex-wrap:wrap; gap:5px; }
.needs em { font-style:normal; font-size:13px; font-weight:800; padding:1px 8px; border-radius:999px; }
.needs em.ok { background:#dff5dc; color:#1f7a3f; } .needs em.no { background:#fbe3dc; color:#b5482f; }

.dialog p .brk { display:block; height:7px; }
/* shared market price arrows on the sell tiles */
.itile em.mup, .itile em.mdn { font-style:normal; font-weight:800; font-size:10px; }
.itile em.mup { color:#2e9e5b; } .itile em.mdn { color:#d0563b; }
/* the picked option in a row of choice chips (carving faces, time capsule lines) */
.card .chips button.on { background:#ff8fa3; color:#fff; box-shadow:0 3px 0 #d96b80; }
/* the Spooky Countdown's 30 doors */
.advent { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-top:10px; }
.advent button { padding:8px 0; font-weight:800; background:#3b2a4a; color:#c9b6ff; border-radius:10px; box-shadow:none; }
.advent button.ready { background:#ff8c2a; color:#fff; animation:advPulse 1.2s ease-in-out infinite; }
.advent button.open { background:#fff3d6; color:#3b2a4a; }
@keyframes advPulse { 50% { transform:scale(1.08); } }