:root { --ink:#3b2f4a; --card:#fffaf2; --accent:#ff8fa3; --gold:#ffc857; --soft:#efe3cf; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#bfe3ff; font-family:'Baloo 2', system-ui, sans-serif; color:var(--ink); -webkit-tap-highlight-color:transparent; }
canvas { display:block; touch-action:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; border-radius:999px; padding:8px 16px; font-weight:800; background:var(--gold); box-shadow:0 3px 0 #c9952b; }
button.ghost { background:#fff; box-shadow:0 3px 0 #0002; }
button:active { transform:translateY(2px); box-shadow:none; }

.title { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:linear-gradient(#ffd6c9, #c9e6ff); z-index:20; }
.title h1 { font-size:clamp(44px, 9vw, 80px); margin:0; color:#fff; text-shadow:0 4px 0 #ff8fa3; }
.title h1 span { color:var(--gold); text-shadow:0 4px 0 #c9952b; }
.title p { max-width:420px; font-size:18px; background:#fffaf2cc; padding:10px 16px; border-radius:16px; }
.title button { font-size:24px; padding:12px 44px; margin-top:8px; }

.hud { position:fixed; top:10px; left:10px; right:10px; display:flex; gap:8px; justify-content:space-between; align-items:flex-start; pointer-events:none; z-index:5; }
.hud .acts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pill { pointer-events:auto; background:#fffaf2ee; border:1.5px solid #fff; border-radius:999px; padding:5px 12px; font-weight:800; box-shadow:0 3px 10px #3b2f4a22; font-size:15px; }
button.pill { background:#fffaf2ee; }
@media (max-width:560px) { .hud { flex-direction:column; } .pill { font-size:13px; padding:4px 9px; } }

.sheet { position:fixed; left:50%; bottom:12px; transform:translateX(-50%); width:min(560px, calc(100% - 24px)); max-height:62vh; overflow:auto; background:var(--card); border-radius:22px; padding:14px 16px 16px; box-shadow:0 10px 30px #3b2f4a33; z-index:10; }
.sheet h2 { margin:0 0 2px; font-size:22px; }
.sheet .step { font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
.sheet h4 { margin:12px 0 6px; font-size:14px; color:#8a7a99; }
.sheet p { margin:4px 0; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips button { background:#fff; box-shadow:0 2px 0 #0002; padding:6px 12px; font-size:14px; }
.chips button.on { background:var(--accent); color:#fff; box-shadow:0 2px 0 #d96b80; }
.sw { width:32px; height:32px; padding:0; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 0 #0002; }
.sw.on { border-color:var(--ink); }
.row { display:flex; gap:8px; justify-content:space-between; align-items:center; margin-top:14px; }
.list { display:flex; flex-direction:column; gap:6px; }
.list .item { display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:8px 10px; }
.list .item .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.list .item img, .list .item video { width:44px; height:44px; object-fit:cover; border-radius:8px; }
.list .item button { padding:5px 12px; font-size:13px; }
.note { font-size:13px; color:#8a7a99; }
input[type=text] { font:inherit; border:2px solid var(--soft); border-radius:12px; padding:6px 10px; width:100%; }

.toast { position:fixed; left:50%; bottom:20px; transform:translate(-50%, 20px); opacity:0; background:var(--ink); color:#fff; padding:8px 16px; border-radius:999px; font-weight:700; transition:.25s; z-index:30; pointer-events:none; text-align:center; max-width:90%; cursor:pointer; }
.toast.show { pointer-events:auto; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
body.sheet-open .toast { bottom:auto; top:70px; }
[hidden] { display:none !important; }
/* the design panel */
.dhead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dtabs { display:flex; gap:4px; overflow-x:auto; margin:8px -4px 8px; padding:2px 4px 4px; scrollbar-width:none; }
.dtabs button { flex:none; display:flex; flex-direction:column; align-items:center; gap:0; padding:4px 10px; font-size:12px; background:#fff; box-shadow:0 2px 0 #0002; border-radius:14px; }
.dtabs button span { font-size:18px; line-height:1.2; }
.dtabs button.on { background:var(--accent); color:#fff; box-shadow:0 2px 0 #d96b80; }
.dcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:6px; }
.dcard { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 6px; background:#fff; border-radius:14px; box-shadow:0 2px 0 #0002; border:2px solid transparent; }
.dcard.on { border-color:var(--accent); background:#fff0f3; }
.dcard .thumb { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.dcard .emo { font-size:30px; }
.dcard .dot { width:36px; height:36px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #3b2f4a33; }
.dcard .dot.gem { border-radius:8px; transform:rotate(45deg) scale(.8); }
.dcard small { font-size:11.5px; font-weight:800; line-height:1.15; text-align:center; }
.dsub { grid-column:1 / -1; margin:6px 0 0; font-size:13px; font-weight:800; color:#8a7a99; }
.sheet { max-height:44vh; }
.talk .who { font-weight:800; color:var(--accent); font-size:15px; }
.talk p { font-size:17px; margin:6px 0 0; }
/* slim top bar: icons on 1 line */
.hud { flex-direction:row !important; align-items:center; }
.hud .acts { flex-wrap:nowrap; gap:5px; }
.pill.ic { width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
#islandName { max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px) { .pill.ic { width:34px; height:34px; font-size:16px; } }
/* the to-do pointer under the top bar */
.todo { position:fixed; top:58px; left:10px; z-index:5; background:#3b2f4aee; color:#fff; box-shadow:0 3px 10px #3b2f4a33; font-size:14px; padding:6px 14px; max-width:calc(100% - 20px); text-align:left; }
.todo b { color:var(--gold); }
body.sheet-open .todo { display:none; }
.namecol { display:flex; gap:6px; align-items:center; min-width:0; }
#coins { white-space:nowrap; }
#runPad { position:fixed; left:0; right:0; bottom:22px; display:flex; justify-content:space-between; padding:0 18px; z-index:20; pointer-events:none; }
.runBtn { pointer-events:auto; width:78px; height:78px; border-radius:50%; border:3px solid #fff; background:#ffffffcc; color:#2f6f99; font-size:32px; line-height:1; box-shadow:0 6px 16px #2b3a5533; touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer; transition:transform .08s, background .08s; }
.runBtn.on { background:#4a9ad8; color:#fff; transform:scale(.94); }
body.boating .todo { display:none; }
#dressBar { position:fixed; top:58px; left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; background:#fffdf8ee; padding:6px 10px; border-radius:16px; box-shadow:0 4px 14px #0002; z-index:20; font-weight:700; font-size:13px; max-width:calc(100% - 32px); }
body.sheet-open #dressBar { display:none; }
#outfitStrip { position:fixed; left:16px; right:16px; bottom:14px; display:flex; gap:8px; overflow-x:auto; padding:8px; background:#fffdf8ee; border-radius:18px; box-shadow:0 4px 14px #0002; z-index:20; scrollbar-width:thin; }
#outfitStrip button { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; width:70px; padding:6px 4px; border:2px solid transparent; border-radius:14px; background:#f4efe6; font:700 11px/1.15 inherit; color:var(--ink); cursor:pointer; }
#outfitStrip button span { font-size:24px; }
#outfitStrip button.on { border-color:#f7b733; background:#fff4d8; }
body.sheet-open #outfitStrip { display:none; }
body:has(#outfitStrip:not([hidden])) .toast { bottom:120px; }
body.in-closet .todo { display:none !important; }
#dressBar { flex-wrap:nowrap; }
#dressBar .pill { white-space:nowrap; }
#swingBar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; background:#fffdf8ee; padding:10px 12px; border-radius:18px; box-shadow:0 4px 14px #0002; z-index:25; width:min(420px, calc(100% - 32px)); }
body:has(#swingBar) .toast { bottom:auto; top:70px; }

/* trick-or-treat door games: each neighbor has a themed card */
.sheet.door { color:#fff; border:2px solid var(--da); box-shadow:0 0 0 4px #0003, 0 14px 40px #0008, inset 0 0 40px #0004; background:radial-gradient(circle at 85% 0%, var(--dg) 0, transparent 55%), linear-gradient(160deg, var(--d1), var(--d2)); animation:doorIn .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes doorIn { from { transform:translateX(-50%) translateY(30px) scale(.94); opacity:0; } }
.sheet.door h2 { color:#fff; font-size:24px; text-shadow:0 2px 0 #0005; }
.sheet.door p { color:#fffc; }
.sheet.door p b { color:var(--da); font-size:17px; }
.sheet.door .note { color:#fff9; }
.dportrait { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.dface { font-size:40px; width:62px; height:62px; flex:none; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle, var(--dg), #0004 75%); border:2px solid var(--da); box-shadow:0 0 18px var(--dg); animation:dbob 2.4s ease-in-out infinite; }
@keyframes dbob { 50% { transform:translateY(-3px) rotate(-4deg); } }
.dwho { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--da); }
.sheet.door .pill { font-size:16px; font-weight:800; padding:10px 16px; border-radius:16px; border:2px solid #fff6; color:#2a1a2a; box-shadow:0 4px 0 #0005; transition:transform .12s, box-shadow .12s; }
.sheet.door .pill:hover { transform:translateY(-2px); box-shadow:0 6px 0 #0005, 0 0 16px var(--dg); }
.sheet.door .pill:active { transform:translateY(3px); box-shadow:0 1px 0 #0005; }
.sheet.d0 { --d1:#2a1640; --d2:#1f3a24; --dg:#8aff5a66; --da:#a8ff7a; }
.sheet.d1 { --d1:#1c0810; --d2:#4a0c1c; --dg:#ff3a5a55; --da:#ff8a9a; }
.sheet.d2 { --d1:#6a4a22; --d2:#3a2814; --dg:#ffd88a66; --da:#ffd88a; }
.sheet.d3 { --d1:#141a2a; --d2:#2a3656; --dg:#cfe0ff55; --da:#e8f0ff; }
.sheet.d4 { --d1:#141432; --d2:#3a2a1a; --dg:#ffe08a66; --da:#ffd870; }
.sheet.d5 { --d1:#2a1428; --d2:#5a1e44; --dg:#ff9ac866; --da:#ffb8dc; }
.sheet.door .dhead.dportrait { justify-content:flex-start; }
.sheet.door .item { background:#ffffff18; border:1px solid #ffffff22; color:#fff; border-radius:14px; }
.sheet.door .item b { color:#fff; font-size:15px; }
.sheet.door .item .note { color:#ffffffbb; }

/* power candy menu: candlelit plum and gold, a grid of candy cards */
.sheet.powshop { color:#fff; background:radial-gradient(circle at 90% 0%, #ffb05a33 0, transparent 50%), linear-gradient(165deg, #3a1f44, #1f1226); border:2px solid #d9a64088; box-shadow:0 0 0 4px #0003, 0 14px 40px #0008; max-height:70vh; animation:doorIn .35s cubic-bezier(.2,1.4,.4,1); }
.powshop .ph { display:flex; align-items:center; gap:12px; }
.powshop .pface { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:28px; background:radial-gradient(circle at 35% 30%, #ffd890, #ff8a2a); box-shadow:0 0 0 3px #d9a640, 0 4px 14px #ff8a2a55; }
.powshop .pwho { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffd890; }
.powshop h2 { color:#fff; font-family:'Pacifico', cursive; font-weight:400; font-size:26px; margin:0; }
.powshop .pbal { background:#0004; border:1.5px solid #d9a640; color:#ffd890; font-weight:800; padding:6px 12px; border-radius:99px; white-space:nowrap; }
.powshop .psub { color:#fffc; margin:10px 0 0; font-size:14px; }
.powshop .pon { display:flex; align-items:center; gap:10px; margin-top:10px; padding:8px 12px; border-radius:14px; background:#ffd8901f; border:1px solid #ffd89066; }
.powshop .pon span svg { width:32px; height:32px; display:block; } .powshop .pon div { flex:1; } .powshop .pon em { font-style:normal; color:#ffd890; font-weight:800; font-size:13px; }
.powshop .pgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:12px; }
.powshop .pcard { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:12px 10px 10px; border-radius:16px; background:linear-gradient(180deg, #ffffff14, #ffffff06); border:1.5px solid #ffffff1f; transition:transform .12s, border-color .12s, background .12s; }
.powshop .pcard:hover { transform:translateY(-2px); border-color:var(--pc); background:linear-gradient(180deg, #ffffff1f, #ffffff08); }
.powshop .pcard:active { transform:scale(.97); }
.powshop .pbadge { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pc) 35%, #1f1226) 0, #1f1226 72%); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--pc) 60%, transparent), 0 0 20px color-mix(in srgb, var(--pc) 35%, transparent); margin-bottom:4px; } .powshop .pbadge svg { filter:drop-shadow(0 2px 3px #0008); }
.powshop .pcard b { font-size:15px; color:#fff; }
.powshop .pd { font-size:12.5px; color:#fffb; line-height:1.3; min-height:2.6em; }
.powshop .pprice { margin-top:6px; background:#ffd890; color:#3a1f44; font-weight:800; font-size:13px; padding:5px 14px; border-radius:99px; }
.powshop .pcard.off { opacity:.55; } .powshop .pcard.off .pprice { background:#ffffff26; color:#fff; }
.powshop .pcard.act { border-color:#ffd890; box-shadow:0 0 0 2px #ffd89055; } .powshop .pcard.act .pprice { background:#4ac86a; color:#fff; }
.powshop .pcard.shake { animation:pshake .3s; } @keyframes pshake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.powshop .pclose { all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; text-align:center; margin-top:12px; padding:11px; border-radius:14px; background:#ffffff14; color:#fff; font-weight:800; }
.powshop .pclose:hover { background:#ffffff22; }

#leaveBtn { position:fixed; left:16px; bottom:16px; z-index:9; display:flex; align-items:center; gap:8px; padding:10px 18px 10px 14px; border:2px solid #d9a640; border-radius:99px; background:#2a1810e6; color:#ffd890; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:0 6px 18px #0006; }
#leaveBtn:hover { background:#3a2216; } #leaveBtn span { font-size:18px; }
body.sheet-open #leaveBtn { display:none; }

.powshop .trow { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border-radius:14px; background:#ffffff10; border:1.5px solid #ffffff1a; }
.powshop .temo { font-size:24px; } .powshop .tnote { font-size:12.5px; color:#fffb; }
.powshop .tbtn { all:unset; cursor:pointer; background:#ffd890; color:#3a1f44; font-weight:800; font-size:13px; padding:6px 14px; border-radius:99px; } .powshop .tbtn:hover { filter:brightness(1.08); }

.powshop .vrow { display:flex; flex-direction:column; gap:6px; margin-top:14px; font-weight:700; color:#fff; }
.powshop .vrow input { width:100%; accent-color:#ffd890; height:22px; }

.sheet .vrow { display:flex; flex-direction:column; gap:6px; margin-top:12px; font-weight:700; }
.sheet .vrow input { width:100%; accent-color:var(--accent, #ffb04a); height:22px; }

/* the Sound menu */
.powshop .sface { background:radial-gradient(circle at 35% 30%, #fff1c8, #ffd890); }
.powshop .smute { all:unset; cursor:pointer; padding:6px 14px; border-radius:99px; font-weight:800; font-size:13px; background:#4ac86a; color:#fff; }
.powshop .smute.on { background:#ffffff26; color:#fffc; }
.powshop .scard { margin-top:12px; padding:4px 14px 14px; border-radius:16px; background:#ffffff10; border:1.5px solid #ffffff1a; }
.powshop .vrow span { display:flex; justify-content:space-between; font-size:14px; } .powshop .vrow em { font-style:normal; color:#ffd890; font-weight:800; }
.powshop .vrow input { -webkit-appearance:none; appearance:none; height:8px; border-radius:99px; background:linear-gradient(90deg, #ffd890, #ff8a2a); outline:none; }
.powshop .vrow input::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #ff8a2a; box-shadow:0 2px 6px #0006; cursor:pointer; }
.powshop .vrow input::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid #ff8a2a; cursor:pointer; }
.powshop .shead { margin:16px 0 8px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffd890; }
.powshop .strk { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px; border-radius:14px; background:#ffffff0d; border:1.5px solid #ffffff14; }
.powshop .strk.on { border-color:#ffd89088; background:#ffd8901a; } .powshop .strk .grow { flex:1; font-weight:700; }
.powshop .snote { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#ffffff14; color:#ffd890; }
.powshop .strk.on .snote { display:flex; align-items:flex-end; justify-content:center; gap:2px; padding-bottom:8px; box-sizing:border-box; }
.powshop .snote i { width:4px; height:8px; background:#ffd890; border-radius:2px; animation:sbar .8s ease-in-out infinite alternate; } .powshop .snote i:nth-child(2) { animation-delay:.25s; } .powshop .snote i:nth-child(3) { animation-delay:.5s; }
@keyframes sbar { to { height:16px; } }
.powshop .splay, .powshop .sdel { all:unset; cursor:pointer; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#ffd890; color:#3a1f44; }
.powshop .sdel { width:28px; height:28px; background:#ffffff1a; color:#fffb; }
.powshop .srow { display:flex; justify-content:center; margin-top:10px; }

.powshop .strk small { font-weight:700; font-size:12px; color:#ffd890; margin-left:6px; }
.powshop .strk.paused { border-color:#ffffff33; background:#ffffff10; }

/* shopping */
.shopui { max-height:78vh; }
.shopui .stabs { display:flex; gap:6px; margin-top:12px; padding:4px; border-radius:99px; background:#0003; }
.shopui .stab { all:unset; flex:1; text-align:center; cursor:pointer; padding:8px 0; border-radius:99px; font-weight:800; font-size:14px; color:#fffb; }
.shopui .stab.on { background:#ffd890; color:#3a1f44; }
.shopui .sgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:12px; }
.shopui .sitem { all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px 12px; border-radius:16px; background:radial-gradient(circle at 50% 35%, #ffffff1c, #ffffff06 70%); border:1.5px solid #ffffff1f; text-align:center; transition:transform .12s, border-color .12s; }
.shopui .sitem:hover { transform:translateY(-3px); border-color:#ffd89099; }
.shopui .sitem img { width:110px; height:110px; object-fit:contain; filter:drop-shadow(0 6px 8px #0007); }
.shopui .sitem b { font-size:14px; color:#fff; line-height:1.2; }
.shopui .sitem.own { opacity:.8; }
.shopui .sown { margin-top:4px; background:#4ac86a; color:#fff; font-weight:800; font-size:12px; padding:4px 12px; border-radius:99px; }
.shopui .sin { position:absolute; top:8px; right:8px; background:#ff8a2a; color:#fff; font-weight:800; font-size:11px; padding:3px 8px; border-radius:99px; box-shadow:0 2px 6px #0006; }
.shopui .sback { all:unset; cursor:pointer; margin-top:10px; color:#ffd890; font-weight:800; font-size:14px; }
.shopui .sinsp { display:flex; justify-content:center; margin:4px auto 0; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, #ffd8902a, transparent 70%); }
.shopui .sinsp canvas { width:240px !important; height:240px !important; }
.shopui .sname { text-align:center; margin:6px 0 0; font-size:20px; color:#fff; }
.shopui .srow2 { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:8px; }
.shopui .pprice.big { font-size:16px; padding:6px 16px; }
.shopui .sacts { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.shopui .tbtn { padding:10px 18px; font-size:14px; }
.shopui .tbtn.alt { background:#ffffff1f; color:#fff; }
.shopui .sbag { position:sticky; bottom:-16px; margin:14px -16px -16px; display:flex; align-items:center; gap:12px; padding:12px 16px; background:linear-gradient(180deg, #2a1630, #1f1226); border-top:1.5px solid #d9a64066; }
.shopui .sbagic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#ff8a2a; color:#fff; font-weight:800; }
.shopui .sthumb { width:44px; height:44px; object-fit:contain; }
.shopui .stot { display:flex; justify-content:space-between; margin-top:12px; font-size:16px; color:#fff; } .shopui .stot.sm { font-size:13px; color:#fffb; margin-top:4px; }
.shopui .spay { all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; text-align:center; margin-top:14px; padding:13px; border-radius:14px; background:linear-gradient(180deg, #ffd890, #f0b050); color:#3a1f44; font-weight:800; font-size:16px; box-shadow:0 4px 12px #0005; }
.shopui .spay:disabled { opacity:.45; cursor:default; }
.shopui .srcpt { margin:14px auto 4px; width:min(260px, 90%); background:#fffaf0; color:#3a2a20; padding:16px 18px 20px; font-family:'Courier New', monospace; font-size:13px; box-shadow:0 8px 20px #0007; animation:srcpt .7s ease-out; clip-path:polygon(0 0, 100% 0, 100% 100%, 95% 97%, 90% 100%, 85% 97%, 80% 100%, 75% 97%, 70% 100%, 65% 97%, 60% 100%, 55% 97%, 50% 100%, 45% 97%, 40% 100%, 35% 97%, 30% 100%, 25% 97%, 20% 100%, 15% 97%, 10% 100%, 5% 97%, 0 100%); }
@keyframes srcpt { from { transform:translateY(-30px); opacity:0; clip-path:inset(0 0 100% 0); } to { transform:none; opacity:1; } }
.shopui .srh { text-align:center; font-weight:700; font-size:16px; } .shopui .srd { text-align:center; font-size:11px; margin-bottom:10px; opacity:.7; }
.shopui .srl { display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px dashed #3a2a2033; } .shopui .srl.tot { font-weight:700; border:0; margin-top:6px; }
.shopui .srt { text-align:center; margin-top:12px; font-weight:700; }

.shopui.mini { max-height:none; padding:12px 16px; } .shopui .stry { text-align:center; color:#fff; }

.shopui .sgum { display:flex; justify-content:center; margin-top:8px; }
.shopui .sstep { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:12px; }
.shopui .sstepb { all:unset; cursor:pointer; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#ffffff1f; color:#fff; font-size:26px; font-weight:800; }
.shopui .sstepb:hover { background:#ffffff33; }
.shopui .sstepn { display:flex; flex-direction:column; align-items:center; color:#fff; } .shopui .sstepn b { font-size:30px; color:#ffd890; } .shopui .sstepn span { font-size:12px; color:#fffb; }
#roastHud { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:12; width:min(340px, calc(100vw - 32px)); padding:14px 16px; border-radius:20px; background:#2a1a30ee; border:2px solid #e8a04a; color:#ffe8c8; font:700 14px 'Baloo 2', sans-serif; box-shadow:0 10px 30px #0008; text-align:center; }
#roastHud .rtitle { font-size:17px; font-weight:800; margin-bottom:8px; }
#roastHud .rbar { position:relative; height:16px; border-radius:99px; background:linear-gradient(90deg, #f6efe0, #e8b860 45%, #c07a30 62%, #5a2a10 80%, #1a0a06); overflow:hidden; }
#roastHud .rbar .rgold { position:absolute; left:45%; width:17%; top:0; bottom:0; border:2px solid #fff; border-radius:6px; box-sizing:border-box; }
#roastHud .rbar b { position:absolute; left:0; top:0; bottom:0; width:0; border-right:3px solid #fff; background:#0003; }
#roastHud .rrow { display:flex; gap:8px; margin-top:10px; }
#roastHud button { flex:1; padding:10px; border:0; border-radius:99px; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; touch-action:none; user-select:none; }
#roastHud #rHold { background:#e8762a; color:#fff; } #roastHud #rDone { flex:0 0 auto; padding:10px 18px; background:#ffe8c8; color:#3a1f44; }
#roastHud .rnote { margin-top:8px; font-weight:600; font-size:13px; opacity:.85; }
#standBtn { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:12; padding:12px 26px; border:2px solid #e8a04a; border-radius:99px; background:#2a1a30ee; color:#ffe8c8; font:800 16px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:0 8px 24px #0007; }
#partyBar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:11; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:calc(100vw - 32px); padding:8px 10px; border-radius:22px; background:#2a1a30e6; border:2px solid #e8a04a; box-shadow:0 8px 24px #0007; }
#partyBar button { border:0; border-radius:99px; padding:8px 13px; background:#ffe8c8; color:#3a1f44; font:800 14px 'Baloo 2', sans-serif; cursor:pointer; }
#partyBar .pcode { background:#e8762a; color:#fff; letter-spacing:.5px; }
#partyBar #pbRace { background:#8a5ac8; color:#fff; }
.sheet .pcard { margin-top:12px; padding:12px 14px; border-radius:16px; background:#fff8ee; border:2px solid #f0d8b8; }
.sheet .pcard h3 { margin:0 0 2px; font-size:17px; } .sheet .pcard p { margin:0 0 8px; font-size:14px; opacity:.8; }
.sheet .plabel { display:block; margin-top:10px; font-weight:800; font-size:14px; }
.sheet .plabel input, .sheet .pcard input { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:10px 12px; border-radius:12px; border:2px solid #e0c8a8; font:700 16px 'Baloo 2', sans-serif; background:#fff; }
.sheet .pcard input { margin:0 0 8px; text-transform:uppercase; letter-spacing:2px; }
.sheet .pbig { display:block; width:100%; padding:11px; border:0; border-radius:99px; background:#e8762a; color:#fff; font:800 16px 'Baloo 2', sans-serif; cursor:pointer; }
.sheet .pend { margin-top:12px; background:#5a3a6a; }
.sheet .pbigcode { margin:6px 0 4px; text-align:center; font:800 40px 'Baloo 2', sans-serif; letter-spacing:4px; color:#e8762a; }
.sheet .plist { margin:4px 0 8px; padding-left:20px; font-weight:700; }
.sheet .psub { font-size:14px; opacity:.85; margin:6px 0; }
body.sheet-open #partyBar { display:none; }
.sheet .bkbox { margin-top:14px; padding:12px 14px; border-radius:16px; background:#fff8ee; border:2px dashed #e0c8a8; }
.sheet .bkbox h4 { margin:0 0 4px; } .sheet .bkbox p { margin:0 0 8px; font-size:13px; opacity:.85; }
.sheet .bkrow { display:flex; gap:8px; flex-wrap:wrap; }
.sheet .bkrow button { flex:1; min-width:140px; padding:10px; border:0; border-radius:99px; background:#e8762a; color:#fff; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; }
.sheet .bkrow #bkLoad { background:#5a3a6a; }
body.guest-mode #makeBtn, body.guest-mode #stuffBtn, body.guest-mode #designBtn, body.guest-mode #houseBtn, body.guest-mode #storyBtn, body.guest-mode #findsBtn, body.guest-mode #todo { display:none !important; }
#partyBar .phost { background:#8a5ac8; color:#fff; }
.sheet .rgrid { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-top:10px; }
.sheet .rgrid button { font-size:30px; padding:8px 0; border:0; border-radius:14px; background:#fff8ee; cursor:pointer; }
.sheet .rgrid button:active { transform:scale(.9); }
#actHud { position:fixed; left:50%; top:62px; transform:translateX(-50%); z-index:12; display:flex; flex-direction:column; align-items:center; padding:8px 18px; border-radius:18px; background:#2a1830ee; border:2px solid #e8a04a; color:#ffe8c8; font:700 14px 'Baloo 2', sans-serif; box-shadow:0 8px 22px #0007; pointer-events:none; }
#actHud b { font-size:18px; } #actHud span { opacity:.9; }
.sheet .bkrow a { flex:1; display:flex; } .sheet .bkrow a button { flex:1; }
#codeBanner { position:fixed; left:50%; top:60px; transform:translateX(-50%); z-index:13; display:flex; flex-direction:column; align-items:center; padding:6px 22px 8px; border-radius:20px; border:3px solid #e8a04a; background:#2a1830f2; color:#ffe8c8; cursor:pointer; box-shadow:0 8px 26px #0008; font-family:'Baloo 2', sans-serif; line-height:1.1; }
#codeBanner .cbl { font-weight:700; font-size:14px; opacity:.9; }
#codeBanner .cbc { font-weight:800; font-size:34px; letter-spacing:4px; color:#ffb04a; }
#codeBanner .cbu { font-weight:600; font-size:12px; opacity:.75; }
body.host-mode #actHud { top:150px; }

.pill.evbtn { display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 12px 0 9px; font:800 15px 'Baloo 2', sans-serif; color:#3a1f44; }
.sheet .stamps { list-style:none; padding:0; margin:8px 0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sheet .stamps li { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:#fff8ee; border:2px dashed #e0c8a8; font-weight:700; font-size:14px; }
.sheet .stamps li span { flex:0 0 26px; height:26px; border-radius:50%; border:2px solid #e0c8a8; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.sheet .stamps li.on { border-style:solid; border-color:#e8762a; background:#fff0e0; }
.sheet .stamps li.on span { background:#e8762a; border-color:#e8762a; }
@media (max-width:480px) { .sheet .stamps { grid-template-columns:1fr; } }
#tickets { display:inline-flex; align-items:center; gap:5px; }
#tickets.bump { animation:tbump .4s ease; } @keyframes tbump { 40% { transform:scale(1.25); } }
#roastHud .gbar { background:linear-gradient(90deg, #3a2a48, #5a3a6a); }
#roastHud .gzone { position:absolute; top:0; bottom:0; background:#ffc040; border-radius:6px; }
#roastHud .gmark { position:absolute; top:-3px; bottom:-3px; width:6px; margin-left:-3px; background:#fff; border-radius:3px; box-shadow:0 0 6px #fff; }
.sheet .tgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
.sheet .tcard { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:12px 10px; border-radius:16px; border:2px solid #f0d8b8; background:#fff8ee; cursor:pointer; font-family:'Baloo 2', sans-serif; color:#3a1f44; }
.sheet .tcard:active { transform:scale(.97); }
.sheet .tcard .tart { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #f0e0c8; }
.sheet .tcard b { font-size:15px; line-height:1.15; } .sheet .tcard small { font-size:12px; opacity:.75; line-height:1.25; }
.sheet .tcard i { font-style:normal; font-weight:800; font-size:13px; margin-top:2px; padding:3px 10px; border-radius:99px; background:#e8762a; color:#fff; }
.sheet .tcard.own { border-color:#8a5ac8; background:#f6efff; } .sheet .tcard.own i { background:#8a5ac8; }
#roastHud.rthud .rtop { display:flex; align-items:center; gap:10px; justify-content:space-between; }
#roastHud.rthud .rtitle { margin:0; }
#roastHud.rthud .rrings { display:flex; gap:4px; }
#roastHud.rthud .rrings i { width:14px; height:14px; border-radius:50%; border:3px solid #ffd040; box-sizing:border-box; }
#roastHud.rthud .rrings i.used { border-color:#ffd04033; }
#roastHud.rthud .rscore { background:#e8762a; color:#fff; padding:2px 10px; border-radius:99px; font-size:13px; }
#roastHud.rthud .rsay { margin-top:8px; background:#ffe8c8; color:#3a1f44; border-radius:14px; padding:6px 10px; font-weight:700; }
#roastHud.rthud .rbig { font-size:17px; color:#ffd040; }
#roastHud.rthud #rtAgain { background:#e8762a; color:#fff; }
#roastHud.rthud #gDone { flex:0 0 auto; padding:10px 18px; background:#ffe8c8; color:#3a1f44; }
#roastHud.rthud { bottom:150px; }
/* speech bubbles over characters */
.sbub { position:fixed; left:0; top:0; z-index:11; max-width:220px; padding:8px 13px; border-radius:16px; background:#fff8ec; color:#3a1f44; font:700 14px/1.25 'Baloo 2', sans-serif; text-align:center; box-shadow:0 6px 18px #0006; pointer-events:none; opacity:0; margin-top:-10px; transition:opacity .2s; }
.sbub::after { content:''; position:absolute; left:50%; bottom:-7px; margin-left:-8px; border:8px solid transparent; border-bottom:0; border-top-color:#fff8ec; }
.sbub.show { opacity:1; animation:bubPop .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes bubPop { from { scale:.6; } to { scale:1; } }
/* message cards */
.toast { background:linear-gradient(180deg, #3a2148f2, #24122ef2); color:#ffeccc; border:1.5px solid #e8a04a; border-radius:16px; padding:10px 18px 10px 44px; font:700 14px/1.3 'Baloo 2', sans-serif; box-shadow:0 10px 28px #0007, inset 0 1px 0 #ffffff22; max-width:min(420px, 90%); text-align:left; }
.toast::before { content:''; position:absolute; left:14px; top:50%; width:20px; height:20px; margin-top:-10px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.6 5.2 2.8 8.4 11 11-8.2 2.6-10.4 5.8-11 11-.6-5.2-2.8-8.4-11-11 8.2-2.6 10.4-5.8 11-11z' fill='%23ffc94a'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 0 4px #ffb03088); }
.toast.show { animation:toastIn .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes toastIn { from { transform:translate(-50%, 14px) scale(.94); } to { transform:translate(-50%, 0) scale(1); } }
body.host-mode #makeBtn, body.host-mode #stuffBtn, body.host-mode #designBtn, body.host-mode #houseBtn, body.host-mode #storyBtn, body.host-mode #findsBtn, body.host-mode #todo { display:none !important; }
#partyBar .pfun { background:#ffd04a; color:#3a1f44; }
body:has(#partyBar) .toast { bottom:84px; }
body:has(#roastHud) .toast { bottom:auto; top:70px; }
body.sheet-open .toast, body:has(#roastHud) .toast { bottom:auto !important; top:70px; }
#roastHud.rthud #rtThrow { background:#3ad87a; color:#10301c; font-size:18px; }
/* carnival stand menus */
.sheet.stand { --ac:#ffc040; --ac2:#e8762a; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ac) 22%, #2a1636) 0%, #1c0f26 70%); color:#ffeedd; border:2px solid var(--ac); box-shadow:0 14px 40px #000a, 0 0 0 4px #ffffff10 inset; padding:16px; }
.sheet.st-punch { --ac:#7aff6a; --ac2:#3aa86a; } .sheet.st-magic { --ac:#ff7ab0; --ac2:#d84a8a; } .sheet.st-prize { --ac:#ffc040; --ac2:#e8962a; }
.sheet.stand .sthead { display:flex; align-items:center; gap:10px; }
.sheet.stand .stt { flex:1; min-width:0; }
.sheet.stand h2 { margin:0; font:800 24px/1.1 'Baloo 2', sans-serif; color:#fff3c8; text-shadow:0 0 14px color-mix(in srgb, var(--ac) 70%, transparent); }
.sheet.stand .stsay { display:block; font:700 14px 'Baloo 2', sans-serif; color:var(--ac); }
.sheet.stand .sttix { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:var(--ac2); color:#fff; font:800 17px 'Baloo 2', sans-serif; box-shadow:0 3px 0 #0005; }
.sheet.stand .stx { width:36px; height:36px; border-radius:50%; border:0; background:#ffffff1a; color:#fff; font:800 16px sans-serif; cursor:pointer; }
.sheet.stand .ston { margin-top:10px; padding:6px 12px; border-radius:12px; background:#ffffff12; font:700 13px 'Baloo 2', sans-serif; }
.sheet.stand .tgrid { grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:12px; }
.sheet.stand .tcard { position:relative; background:linear-gradient(180deg, #ffffff14, #ffffff06); border:1.5px solid #ffffff22; color:#ffeedd; padding:14px 10px 12px; border-radius:18px; transition:transform .12s, border-color .12s; }
.sheet.stand .tcard:hover { border-color:var(--ac); transform:translateY(-2px); }
.sheet.stand .tcard .tart { width:64px; height:64px; background:radial-gradient(circle, color-mix(in srgb, var(--ac) 45%, transparent) 0%, transparent 70%); box-shadow:none; }
.sheet.stand .tcard .tart svg { width:52px; height:52px; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--ac) 60%, transparent)); }
.sheet.stand .tcard b { font-size:17px; color:#fff3c8; }
.sheet.stand .tcard small { font-size:13px; opacity:.85; }
.sheet.stand .tcard i { display:flex; align-items:center; gap:5px; background:var(--ac2); font-size:15px; padding:4px 14px; box-shadow:0 2px 0 #0005; }
.sheet.stand .tcard em { font-style:normal; font:700 12px 'Baloo 2', sans-serif; color:#ffb0a0; }
.sheet.stand .tcard.poor { opacity:.55; }
.sheet.stand .tcard.own { border-color:var(--ac); background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 22%, transparent), #ffffff06); }
.sheet.stand .tcard.own i { background:#ffffff22; }
.sheet.stand .stnote { margin:12px 0 0; text-align:center; font:600 13px 'Baloo 2', sans-serif; opacity:.7; }
/* passport */
.sheet.st-pass { --ac:#c08aff; --ac2:#8a5ac8; }
.sheet.stand .pring { position:relative; width:52px; height:52px; border-radius:50%; background:conic-gradient(var(--ac) calc(var(--p) * 360deg), #ffffff1a 0); display:flex; align-items:center; justify-content:center; }
.sheet.stand .pring::before { content:''; position:absolute; inset:5px; border-radius:50%; background:#1c0f26; }
.sheet.stand .pring b, .sheet.stand .pring small { position:relative; font:800 17px 'Baloo 2', sans-serif; color:#fff3c8; } .sheet.stand .pring small { font-size:11px; opacity:.7; margin-top:4px; }
.sheet.stand .pprize { margin-top:10px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; background:#ffd0401a; border:1.5px dashed #ffd04a88; font:700 14px 'Baloo 2', sans-serif; }
.sheet.stand .pprize.got { border-style:solid; background:#ffd04a33; }
.sheet.stand .pgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 6px; margin-top:12px; padding:12px 8px; border-radius:16px; background:repeating-linear-gradient(0deg, #ffffff06 0 22px, #ffffff0c 22px 23px), #f6ead20d; }
.sheet.stand .pst { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:0; cursor:pointer; color:#ffeedd; }
.sheet.stand .pst span { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px dashed #ffffff40; color:#ffffff40; transition:transform .15s; }
.sheet.stand .pst small { font:700 11.5px/1.15 'Baloo 2', sans-serif; text-align:center; opacity:.6; }
.sheet.stand .pst.on span { border:3px double var(--ink); color:var(--ink); background:radial-gradient(circle, color-mix(in srgb, var(--ink) 28%, transparent), color-mix(in srgb, var(--ink) 10%, transparent)); transform:rotate(var(--rot)); box-shadow:0 0 12px color-mix(in srgb, var(--ink) 45%, transparent); }
.sheet.stand .pst.on small { opacity:1; color:#fff3c8; }
.sheet.stand .pst:active span { transform:scale(.92); }
.sheet.stand .pnote { margin:10px 0 0; text-align:center; font:700 13.5px 'Baloo 2', sans-serif; min-height:20px; }
.sheet.stand .pbest { margin:14px 0 6px; font:800 17px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .pboard { display:grid; gap:6px; }
.sheet.stand .pboard div { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:12px; background:#ffffff0f; font:600 13.5px 'Baloo 2', sans-serif; }
.sheet.stand .pboard b { color:var(--ac); }
@media (max-width:420px) { .sheet.stand .pgrid { grid-template-columns:repeat(3, 1fr); } }
.sheet.stand .pst, .sheet.stand .stx { box-shadow:none !important; border:0 !important; background:none; }
.sheet.stand .stx { background:#ffffff1a !important; }
/* activities */
.sheet.st-act { --ac:#ffa05a; --ac2:#e8762a; }
.sheet.stand .alist { display:grid; gap:10px; margin-top:12px; }
.sheet.stand .acard { display:flex; align-items:center; gap:12px; padding:12px; border-radius:18px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), #ffffff08); border:1.5px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sheet.stand .aart { flex:0 0 52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--c); background:#00000033; box-shadow:0 0 14px color-mix(in srgb, var(--c) 35%, transparent) inset; }
.sheet.stand .atx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sheet.stand .atx b { font:800 17px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .atx small { font:600 13.5px/1.25 'Baloo 2', sans-serif; opacity:.85; }
.sheet.stand .atx i { font:700 12px 'Baloo 2', sans-serif; font-style:normal; color:var(--c); }
.sheet.stand .ago { flex:0 0 auto; padding:10px 18px; border-radius:99px; border:0 !important; background:var(--c) !important; color:#1c0f26 !important; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:0 3px 0 #0006 !important; }
.sheet.stand .ago:active { transform:translateY(2px); box-shadow:0 1px 0 #0006 !important; }
/* fun menu */
.sheet.st-fun { --ac:#7affc8; --ac2:#2aa880; }
.sheet.stand .fhead { margin:14px 0 6px; font:800 13px 'Baloo 2', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ac); opacity:.9; }
.sheet.stand .frx { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.sheet.stand .frx button { aspect-ratio:1; border-radius:16px; border:1.5px solid #ffffff22 !important; background:radial-gradient(circle at 50% 40%, #ffffff1f, #ffffff08) !important; font-size:26px; cursor:pointer; box-shadow:none !important; transition:transform .1s; }
.sheet.stand .frx button:active { transform:scale(.88); }
.sheet.stand .fmv { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.sheet.stand .fmv button { padding:12px 6px; border-radius:14px; border:0 !important; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, #2a1636), color-mix(in srgb, var(--c) 18%, #1c0f26)) !important; color:#fff3c8; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent), 0 3px 0 #0006 !important; }
.sheet.stand .fmv button:active { transform:translateY(2px); }
.sheet.stand .fsay { display:flex; flex-wrap:wrap; gap:8px; }
.sheet.stand .fsay button { position:relative; padding:7px 14px; border-radius:16px 16px 16px 4px; border:0 !important; background:#fff8ec !important; color:#3a1f44; font:800 14px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:0 3px 0 #0006 !important; }
.sheet.stand .fsay button:active { transform:translateY(2px); }
.sheet.stand .fpass { margin-top:16px; width:100%; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-radius:16px; border:1.5px solid #c08aff88 !important; background:linear-gradient(90deg, #8a5ac844, #8a5ac811) !important; color:#fff3c8; font:800 16px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:none !important; }
.sheet.stand .fpass b { font-size:14px; color:#c08aff; }
@media (max-width:420px) { .sheet.stand .frx { grid-template-columns:repeat(4, 1fr); } }
.sheet.stand .frx button { aspect-ratio:auto; height:50px; font-size:28px; }
/* party menu */
.sheet.st-party { --ac:#ffa05a; --ac2:#e8762a; }
.sheet.stand .pfield { display:flex; flex-direction:column; gap:4px; margin-top:12px; font:800 12px 'Baloo 2', sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ac); }
.sheet.stand input { width:100%; box-sizing:border-box; padding:10px 14px; border-radius:14px; border:1.5px solid #ffffff2a; background:#00000033; color:#fff3c8; font:700 16px 'Baloo 2', sans-serif; text-transform:none; letter-spacing:0; outline:none; }
.sheet.stand input:focus { border-color:var(--ac); }
.sheet.stand .pc2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.sheet.stand .pc2 .pfield { margin-top:0; }
.sheet.stand .pbox { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:18px; background:linear-gradient(180deg, #ffffff12, #ffffff05); border:1.5px solid #ffffff22; }
.sheet.stand .pbox b { font:800 18px 'Baloo 2', sans-serif; color:#fff3c8; } .sheet.stand .pbox small { font:600 13px/1.25 'Baloo 2', sans-serif; opacity:.8; margin-top:-6px; }
.sheet.stand .phost { border-color:#ffa05a77; } .sheet.stand .pjoin { border-color:#c08aff77; }
.sheet.stand .pcodein { text-align:center; font-size:20px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
.sheet.stand .pgo { padding:11px 16px; border-radius:99px; border:0 !important; background:var(--ac2) !important; color:#fff !important; font:800 16px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:0 3px 0 #0006 !important; }
.sheet.stand .pjoin .pgo { background:#8a5ac8 !important; }
.sheet.stand .pgo:active { transform:translateY(2px); }
.sheet.stand .pticket { margin-top:12px; padding:14px; border-radius:18px; text-align:center; background:repeating-linear-gradient(90deg, #ffa05a22 0 12px, #ffa05a14 12px 24px); border:2px dashed #ffa05a99; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sheet.stand .pticket small { font:800 12px 'Baloo 2', sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); }
.sheet.stand .pbig2 { font:800 40px/1 'Baloo 2', sans-serif; letter-spacing:.08em; color:#fff3c8; text-shadow:0 0 18px #ff9a3a88; }
.sheet.stand .ppl { display:grid; gap:6px; }
.sheet.stand .pp { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:14px; background:#ffffff0d; }
.sheet.stand .pp b { flex:1; font:700 15px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .pp em, .sheet.stand .pp i { font:800 11px 'Baloo 2', sans-serif; font-style:normal; padding:2px 8px; border-radius:99px; background:#ffffff1a; }
.sheet.stand .pp i { background:var(--ac2); color:#fff; }
.sheet.stand .pav { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c); color:#1c0f26; font:800 16px 'Baloo 2', sans-serif; }
.sheet.stand .psave { width:100%; margin-top:10px; }
.sheet.stand .pend2 { width:100%; margin-top:16px; padding:11px; border-radius:99px; border:1.5px solid #ff6a6a88 !important; background:transparent !important; color:#ffb0a0; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:none !important; }
@media (max-width:440px) { .sheet.stand .pc2 { grid-template-columns:1fr; } }
/* sound menu */
.sheet.st-sound { --ac:#ffd890; --ac2:#e8762a; }
.sheet.st-sound .smute { margin-right:2px; }
.sheet.st-sound .scard { background:#00000030; }
.sheet.st-sound .bkrow button, .sheet.st-sound .srow .tbtn { width:100%; padding:11px; border-radius:99px; border:1.5px solid #ffd89055 !important; background:#ffd8901a !important; color:#fff3c8 !important; font:800 15px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:none !important; }
.sheet.st-sound .srow .tbtn { width:auto; padding:9px 20px; }
.sheet.st-sound .strk { padding:10px 12px; border-radius:16px; }
.sheet.st-sound .strk.on { box-shadow:0 0 16px #ffd89033; }
/* island menu */
.sheet.st-island { --ac:#7ac8ff; --ac2:#4a8ad8; }
.sheet.stand .dtabs { gap:6px; margin:12px -4px 10px; }
.sheet.stand .dtabs button { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 10px; border-radius:14px; border:1.5px solid #ffffff1f !important; background:#ffffff0d !important; color:#ffeeddcc; font:800 12px 'Baloo 2', sans-serif; box-shadow:none !important; cursor:pointer; }
.sheet.stand .dtabs button.on { background:var(--ac2) !important; border-color:var(--ac) !important; color:#fff; box-shadow:0 0 14px color-mix(in srgb, var(--ac) 40%, transparent) !important; }
.sheet.stand .dcards { grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.sheet.stand .dcard { padding:10px 6px 8px; border-radius:16px; background:linear-gradient(180deg, #ffffff12, #ffffff05) !important; border:1.5px solid #ffffff1f !important; box-shadow:none !important; color:#fff3c8; cursor:pointer; transition:transform .12s, border-color .12s; }
.sheet.stand .dcard:hover { transform:translateY(-2px); border-color:var(--ac) !important; }
.sheet.stand .dcard.on { border:2px solid var(--ac) !important; background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 25%, transparent), #ffffff06) !important; box-shadow:0 0 16px color-mix(in srgb, var(--ac) 30%, transparent) !important; }
.sheet.stand .dcard .thumb { width:56px; height:56px; border-radius:14px; overflow:hidden; background:radial-gradient(circle, #ffffff20, transparent 70%); }
.sheet.stand .dcard .sart { width:56px; height:56px; border-radius:14px; }
.sheet.stand .dcard small { font-size:12.5px; color:#fff3c8; }
.sheet.stand .dsub, .sheet.stand .note { color:#ffeedd; opacity:.75; }
.sheet.stand #nm { margin-top:4px; }
.sheet.stand .bkbox { background:#00000028; border:1.5px dashed #7ac8ff66; color:#ffeedd; }
.sheet.stand .bkbox h4 { color:#fff3c8; font:800 16px 'Baloo 2', sans-serif; }
.sheet.stand .bkrow button { box-shadow:0 3px 0 #0006; }
.sheet.stand .bkrow #bkSave { background:var(--ac2); }
.sheet.stand .bkrow #bkLoad { background:#ffffff1f; border:1.5px solid #ffffff33; }
.sheet.stand .sthead .pgo { flex:0 0 auto; }
.pill .hico { vertical-align:-3px; margin-right:1px; }
.pill.ic svg { width:22px; height:22px; filter:drop-shadow(0 1px 0 #0002); }
@media (max-width:560px) { .pill.ic svg { width:19px; height:19px; } }
/* house menu */
.sheet.st-house { --ac:#ffb07a; --ac2:#e8762a; }
.sheet.stand .hsw { display:flex; flex-wrap:wrap; gap:10px; }
.sheet.stand .hs { width:40px; height:40px; border-radius:50%; border:3px solid #ffffff22 !important; background:var(--c) !important; box-shadow:inset 0 -4px 0 #0002 !important; cursor:pointer; transition:transform .12s; padding:0; }
.sheet.stand .hs:hover { transform:scale(1.08); }
.sheet.stand .hs.on { border-color:#fff !important; box-shadow:0 0 0 3px var(--ac), inset 0 -4px 0 #0002 !important; transform:scale(1.1); }
/* mute: a clear labeled toggle */
.pill.ic#muteBtn { width:auto; padding:0 12px 0 9px; gap:5px; font:800 13px 'Baloo 2', sans-serif; }
@media (max-width:560px) { .pill.ic#muteBtn { padding:0 9px 0 7px; font-size:12px; } }
/* ghost waltz */
#roastHud.wz .wzring { position:relative; width:90px; height:90px; margin:8px auto 0; }
#roastHud.wz .wzring b { position:absolute; inset:28px; border-radius:50%; border:4px solid #ffd040; box-shadow:0 0 12px #ffd04a88; }
#roastHud.wz .wzring i { position:absolute; inset:28px; border-radius:50%; border:3px solid #c08aff; }
#roastHud.wz #wzStep { background:#c08aff; color:#1c0f26; font-size:18px; }
/* organ game */
#roastHud.sm .smk { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
#roastHud.sm .smk button { height:64px; border-radius:14px; background:color-mix(in srgb, var(--c) 35%, #1c0f26); border:2px solid var(--c); transition:all .1s; }
#roastHud.sm .smk button.lit, #roastHud.sm .smk button:active { background:var(--c); box-shadow:0 0 20px var(--c); }
#roastHud.wz .wzb { display:flex; justify-content:center; align-items:center; gap:14px; margin:12px 0 4px; transition:opacity .3s; }
#roastHud.wz .wzb i { width:18px; height:18px; border-radius:50%; background:#ffffff22; transition:transform .08s, background .08s; }
#roastHud.wz .wzb i.big { width:34px; height:34px; border:3px solid #ffd04a; box-sizing:border-box; background:transparent; }
#roastHud.wz .wzb i.on { background:#c08aff; transform:scale(1.3); }
#roastHud.wz .wzb i.big.on { background:#ffd04a; box-shadow:0 0 18px #ffd04a; }
#roastHud.wz .wzring { display:none; }
#roastHud.wz { bottom:auto; top:64px; }
body:has(#roastHud.wz) .toast { top:250px !important; bottom:auto !important; } /* during the waltz, messages sit just under the dance card */
.sheet.stand .dcard.locked { opacity:.7; position:relative; }
.sheet.stand .dcard.locked .thumb { position:relative; }
.sheet.stand .dcard.locked .sart { filter:grayscale(1) brightness(.55); }
.sheet.stand .dcard.locked .lk { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); filter:drop-shadow(0 1px 2px #000a); }
.sheet.stand .dcard.locked em { font-style:normal; font:700 10.5px/1.15 'Baloo 2', sans-serif; color:#7ac8ff; text-align:center; }
/* story menu */
.sheet.st-story { --ac:#ffd890; --ac2:#8a5ac8; }
.sheet.stand .spath { display:flex; align-items:flex-start; margin:14px 0 4px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.sheet.stand .spath > i { flex:1 0 14px; height:3px; margin-top:16px; background:#ffffff22; border-radius:2px; }
.sheet.stand .sp { flex:0 0 64px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.sheet.stand .sp span { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 15px 'Baloo 2', sans-serif; background:#ffffff12; border:2px solid #ffffff2a; color:#ffeedd99; }
.sheet.stand .sp small { font:700 10.5px/1.15 'Baloo 2', sans-serif; opacity:.6; }
.sheet.stand .sp.done span { background:#8a5ac8; border-color:#c08aff; color:#fff; }
.sheet.stand .sp.done small { opacity:.85; }
.sheet.stand .sp.now span { background:#ffd04a; border-color:#fff3c8; color:#3a1f44; box-shadow:0 0 16px #ffd04a88; animation:spPulse 1.6s ease-in-out infinite; }
.sheet.stand .sp.now small { opacity:1; color:#fff3c8; }
@keyframes spPulse { 50% { transform:scale(1.1); } }
.sheet.stand .scard2 { margin-top:12px; padding:14px 16px; border-radius:18px; background:linear-gradient(180deg, #ffffff14, #ffffff06); border:1.5px solid #ffd89055; }
.sheet.stand .scard2 small { font:800 11px 'Baloo 2', sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#c08aff; }
.sheet.stand .scard2 b { display:block; font:800 20px/1.2 'Baloo 2', sans-serif; color:#fff3c8; margin:2px 0 6px; }
.sheet.stand .scard2 p { margin:0; font:600 15px/1.35 'Baloo 2', sans-serif; }
.sheet.stand .scard2.now { border-color:#ffd04a; box-shadow:0 0 18px #ffd04a22; }
.sheet.stand .scard2.fin { border-color:#c08aff; text-align:center; }
.sheet.stand .sbar { margin-top:10px; height:10px; border-radius:99px; background:#ffffff1a; overflow:hidden; }
.sheet.stand .sbar i { display:block; height:100%; background:linear-gradient(90deg, #ffd04a, #ff9a3a); border-radius:99px; }
.sheet.stand .scount { margin-top:4px !important; font-size:13px !important; opacity:.8; }
.sheet.stand .sunl { display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 14px; border-radius:16px; background:#00000028; border:1.5px dashed #ffffff33; }
.sheet.stand .sunl svg { border-radius:12px; flex:0 0 auto; }
.sheet.stand .sunl small { display:block; font:700 12px 'Baloo 2', sans-serif; opacity:.7; }
.sheet.stand .sunl b { font:800 16px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .smyst { width:100%; margin-top:12px; background:#8a5ac8 !important; }
/* my work */
.sheet.st-work { --ac:#ffc890; --ac2:#e8762a; }
.sheet.stand .wklist { display:grid; gap:8px; margin-top:12px; }
.sheet.stand .wk { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:16px; background:#ffffff0f; border:1.5px solid #ffffff1f; }
.sheet.stand .wkt { flex:0 0 52px; height:52px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#00000033; }
.sheet.stand .wkt img { width:100%; height:100%; object-fit:cover; }
.sheet.stand .wkx { flex:1; min-width:0; display:flex; flex-direction:column; }
.sheet.stand .wkx b { font:800 16px 'Baloo 2', sans-serif; color:#fff3c8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet.stand .wkx small { font:600 12.5px 'Baloo 2', sans-serif; opacity:.75; }
.sheet.stand .wkb { flex:0 0 auto; padding:7px 14px; border-radius:99px; border:1.5px solid #ffffff33 !important; background:#ffffff14 !important; color:#fff3c8; font:800 13px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:none !important; }
.sheet.stand .wkinds { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:12px; }
.sheet.stand .wkinds button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 8px; border-radius:18px; border:1.5px solid #ffffff22 !important; background:linear-gradient(180deg, #ffffff14, #ffffff05) !important; color:#ffeedd; cursor:pointer; box-shadow:none !important; }
.sheet.stand .wkinds button:hover { border-color:var(--ac) !important; }
.sheet.stand .wkinds span { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, #ffc89033, transparent 70%); }
.sheet.stand .wkinds b { font:800 16px 'Baloo 2', sans-serif; color:#fff3c8; } .sheet.stand .wkinds small { font:600 12px 'Baloo 2', sans-serif; opacity:.75; text-align:center; }
.sheet.stand .wfile { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:14px; background:#00000028; border:1.5px dashed #ffffff33; }
.sheet.stand .wfile span { font:800 12px 'Baloo 2', sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ac); }
.sheet.stand .wfile b { flex:1; min-width:0; font:600 13.5px 'Baloo 2', sans-serif; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet.stand .wshow { display:flex; flex-direction:column; gap:6px; margin-top:12px; padding:14px; border-radius:18px; background:linear-gradient(180deg, #ffd04a22, #ffd04a08); border:1.5px solid #ffd04a88; text-align:center; }
.sheet.stand .wshow b { font:800 17px 'Baloo 2', sans-serif; color:#fff3c8; } .sheet.stand .wshow small { font:600 13px 'Baloo 2', sans-serif; opacity:.85; }
.sheet.stand .wlink { display:block; margin:12px auto 0; background:none !important; border:0 !important; box-shadow:none !important; color:#ffc890; font:700 13px 'Baloo 2', sans-serif; text-decoration:underline; cursor:pointer; }
.sheet.stand .wview { margin-top:12px; display:flex; justify-content:center; }
.sheet.stand .wview img { max-width:100%; max-height:38vh; border-radius:10px; box-shadow:0 10px 30px #0008; }
.sheet.stand .wview.book img { border-radius:4px 10px 10px 4px; }
.sheet.stand .wgo { display:block; text-align:center; text-decoration:none; margin-top:10px; }
.sheet.stand .dcard.locked .dot, .sheet.stand .dcard.locked .thumb > svg:first-child, .sheet.stand .dcard.locked canvas, .sheet.stand .dcard.locked img { filter:grayscale(1) brightness(.55); }
/* my work menu, upgraded */
.sheet.stand .wstats { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sheet.stand .wstats span { display:flex; align-items:center; gap:4px; padding:3px 10px 3px 4px; border-radius:99px; background:#ffffff12; font:800 14px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .wstats svg { width:22px; height:22px; }
.sheet.stand .wgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; margin-top:12px; }
.sheet.stand .wtile { display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:8px; border-radius:18px; border:1.5px solid #ffffff1f !important; background:linear-gradient(180deg, #ffffff12, #ffffff05) !important; color:#ffeedd; cursor:pointer; text-align:left; box-shadow:none !important; transition:transform .12s, border-color .12s; }
.sheet.stand .wtile:hover { transform:translateY(-2px); border-color:var(--ac) !important; }
.sheet.stand .wpic { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 40%, #ffffff1a, #00000040); margin-bottom:4px; }
.sheet.stand .wpic img { width:100%; height:100%; object-fit:cover; }
.sheet.stand .k-book .wpic img { width:70%; height:auto; object-fit:contain; box-shadow:4px 4px 0 #0006; border-radius:2px 6px 6px 2px; }
.sheet.stand .k-record .wpic img { border-radius:50%; width:82%; height:82%; box-shadow:0 0 0 6px #0e0a12; }
.sheet.stand .wpic i { position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:50%; background:#1c0f26e0; display:flex; align-items:center; justify-content:center; }
.sheet.stand .wpic i svg { width:18px; height:18px; }
.sheet.stand .wkic svg { width:48px; height:48px; }
.sheet.stand .wtile b { font:800 14.5px/1.2 'Baloo 2', sans-serif; color:#fff3c8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet.stand .wtile small { font:600 12px 'Baloo 2', sans-serif; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet.stand .wadd { border:2px dashed #ffc89088 !important; background:transparent !important; }
.sheet.stand .wadd .wpic { background:#ffc8901a; color:#ffc890; }
.sheet.stand .wempty { margin-top:12px; padding:18px 14px; border-radius:18px; text-align:center; background:linear-gradient(180deg, #ffc89018, #ffffff05); border:1.5px dashed #ffc89066; }
.sheet.stand .wempty .wrow { display:flex; justify-content:center; gap:10px; margin-bottom:10px; }
.sheet.stand .wempty .wrow span { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#00000033; }
.sheet.stand .wempty b { display:block; font:800 19px 'Baloo 2', sans-serif; color:#fff3c8; }
.sheet.stand .wempty p { margin:4px 0 0; font:600 14px/1.35 'Baloo 2', sans-serif; opacity:.85; }
.sheet.stand .wshow2 { display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:10px 14px; border-radius:16px; border:1.5px solid #ffd04a88 !important; background:linear-gradient(90deg, #ffd04a22, #ffd04a06) !important; color:#ffeedd; text-align:left; cursor:pointer; box-shadow:none !important; }
.sheet.stand .wshow2 b { display:block; font:800 16px 'Baloo 2', sans-serif; color:#fff3c8; } .sheet.stand .wshow2 small { font:600 12.5px 'Baloo 2', sans-serif; opacity:.8; }
.sheet.stand .wprog { margin-top:12px; } .sheet.stand .wprog small { font:700 12.5px 'Baloo 2', sans-serif; opacity:.8; }
/* custom island requests */
.sheet.st-req { --ac:#ffd04a; --ac2:#e8962a; }
.sheet.stand .rqk button.on { background:var(--ac) !important; color:#3a1f44; }
.sheet.stand textarea { width:100%; box-sizing:border-box; padding:10px 14px; border-radius:14px; border:1.5px solid #ffffff2a; background:#00000033; color:#fff3c8; font:600 15px/1.4 'Baloo 2', sans-serif; resize:vertical; outline:none; text-transform:none; letter-spacing:0; }
.sheet.stand textarea:focus { border-color:var(--ac); }

/* Made by card: send fans to the creator */
.sheet.stand .mby { margin-top:16px; padding:14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,200,144,.25); }
.sheet.stand .mbyh { display:flex; flex-direction:column; align-items:center; margin-bottom:10px; }
.sheet.stand .mbyh span { font:700 11px 'Baloo 2', sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.sheet.stand .mbyh b { font:800 20px 'Baloo 2', sans-serif; color:#ffe2c0; }
.sheet.stand .mbyask { display:block; text-align:center; text-decoration:none; }
.sheet.stand .mbyl { margin:12px 0 6px; font:700 11px 'Baloo 2', sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.sheet.stand .mbyrow { display:flex; flex-wrap:wrap; gap:8px; }
.sheet.stand .mbyc { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; font:700 13px 'Baloo 2', sans-serif; border:1px solid rgba(255,255,255,.14); }
.sheet.stand .mbyc i { width:9px; height:9px; border-radius:50%; background:var(--sc); box-shadow:0 0 8px var(--sc); }
.sheet.stand .mbyc:hover { background:rgba(255,255,255,.14); }

/* public island visitors: a way back to building their own */
.pubbar { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:20; display:flex; gap:8px; pointer-events:none; } .pill.pubown { font:800 14px 'Baloo 2', sans-serif; padding:10px 18px; cursor:pointer; white-space:nowrap; } .pill.pubcard { background:#2a2230 !important; color:#f0d08a; border-color:#f0d08a88; }
body.pub-mode #partyBtn { display:none !important; }

/* phones: island name and level on their own row, the buttons in a row below, nothing stacked on top of each other */
@media (max-width:560px) { .hud { flex-direction:column !important; align-items:stretch !important; gap:6px; } .hud .acts { justify-content:flex-start; flex-wrap:wrap; } .pill.ic#muteBtn { white-space:nowrap; } .namecol .pill { white-space:nowrap; } }
@media (max-width:560px) { .hud .pill.ic#muteBtn { position:absolute; top:0; right:0; } body.sheet-open .toast, body:has(#swingBar) .toast { top:96px !important; } .toast { max-width:calc(100vw - 32px); } }
@media (max-width:560px) { .dtabs, .sheet.stand .dtabs { flex-wrap:wrap; overflow-x:visible; } .dtabs button { padding:4px 8px; } } /* every tab in view on phones */
@media (max-height:520px) { .sheet { max-height:calc(100vh - 70px) !important; } } /* phones held sideways: menus use the screen below the top bar */
@media (max-height:520px) { body.sheet-open .toast { top:6px !important; bottom:auto !important; } }
body.pub-mode .toast { bottom:72px; } body.pub-mode.sheet-open .pubbar { display:none; } /* the visitor button never hides tips or menus */

/* your business: a warm cafe palette */
.sheet.st-biz { --ac:#ffd6a0; --ac2:#3a8a72; }
.sheet.stand .sbiz { display:flex; align-items:center; gap:12px; width:100%; margin-top:14px; padding:12px 14px; border-radius:16px; text-align:left; cursor:pointer; background:linear-gradient(135deg, #3a2a22, #2a1f1c) !important; border:1.5px solid #e8b07a88 !important; color:#fff; box-shadow:0 6px 16px #0005; }
.sheet.stand .sbiz b { display:block; font:800 16px 'Baloo 2', sans-serif; color:#ffe2b8; } .sheet.stand .sbiz small { display:block; font:600 12.5px 'Baloo 2', sans-serif; opacity:.8; }
.sheet.stand .bzside, .sheet.stand .bztype { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.sheet.stand .bzside button, .sheet.stand .bztype button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px; border-radius:16px; cursor:pointer; background:#ffffff0f !important; border:1.5px solid #ffffff22 !important; color:#fff; box-shadow:none; }
.sheet.stand .bzside button:hover, .sheet.stand .bztype button:not([disabled]):hover { border-color:var(--ac) !important; background:#ffffff1a !important; }
.sheet.stand .bzside b, .sheet.stand .bztype b { font:800 17px 'Baloo 2', sans-serif; color:#ffe2b8; } .sheet.stand .bzside small, .sheet.stand .bztype small { font:600 12px 'Baloo 2', sans-serif; opacity:.75; text-align:center; }
.sheet.stand .bztype button[disabled] { opacity:.45; cursor:default; }
.sheet.stand .lat { display:flex; justify-content:center; margin:6px 0 4px; } .sheet.stand .lat canvas { width:min(250px, 62vw); height:auto; touch-action:none; cursor:pointer; filter:drop-shadow(0 10px 18px #0006); }
.sheet.stand .lpour { width:100%; user-select:none; -webkit-user-select:none; touch-action:none; }

/* maker's mark: a paper card that gets stamped */
.sheet.st-mark { --ac:#f0c860; --ac2:#8a2a3a; }
.sheet.stand .mkstage { display:flex; justify-content:center; margin:8px 0 4px; perspective:600px; }
.sheet.stand .mkpaper { width:min(170px, 46vw); aspect-ratio:1; border-radius:10px; background:radial-gradient(circle at 30% 20%, #fffaf0, #efe4cf); box-shadow:0 10px 24px #0007, inset 0 0 0 1px #0001; display:grid; place-items:center; }
.sheet.stand .mkpaper canvas { width:88%; height:88%; }
.sheet.stand .mkpaper.stamping { animation:mkPress .9s ease; } .sheet.stand .mkpaper.stamped canvas { animation:mkInk .5s ease; }
@keyframes mkPress { 0% { transform:none; } 40% { transform:scale(.94) translateY(4px); box-shadow:0 2px 6px #0007; } 55% { transform:scale(1.03); } 100% { transform:none; } }
@keyframes mkInk { 0% { opacity:.2; filter:blur(2px); } 100% { opacity:1; filter:none; } }
.sheet.stand .mktabs { justify-content:center; }
.sheet.stand .mkopts { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:8px; }
.sheet.stand .mkopts button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:14px; background:#ffffff0f !important; border:1.5px solid #ffffff1f !important; color:#fff; cursor:pointer; box-shadow:none; }
.sheet.stand .mkopts button.on { border-color:var(--ac) !important; background:#ffffff1f !important; }
.sheet.stand .mkopts button canvas { width:52px; height:52px; } .sheet.stand .mkopts small { font:700 11.5px 'Baloo 2', sans-serif; opacity:.85; }
.sheet.stand .mkopts.ink { grid-template-columns:repeat(6, 1fr); } .sheet.stand .mkopts .mkdot { padding:10px 0; } .sheet.stand .mkopts .mkdot i { width:26px; height:26px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #fff3; }
.sheet.stand .mkopts .mkfin { grid-column:span 2; font:800 13px 'Baloo 2', sans-serif; padding:10px 4px; }

/* business cards: a real little card, 3.5 by 2 */
.sheet.st-card { --ac:#f0d08a; --ac2:#5a7a6a; }
.sheet.stand .bcwrap { display:flex; justify-content:center; margin:10px 0 6px; }
.bcard { position:relative; width:min(330px, 84vw); aspect-ratio:1.75; border-radius:10px; background:var(--cb); color:var(--ci); display:flex; align-items:center; gap:14px; padding:14px 16px; box-shadow:0 14px 28px #0007, inset 0 0 0 1px #0000000f; text-align:left; overflow:hidden; }
.bcard::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 10%, #ffffff30, transparent 55%); pointer-events:none; }
.bcmark { flex:none; width:31%; aspect-ratio:1; display:grid; place-items:center; } .bcmark canvas { width:100%; height:100%; }
.bcini { width:80%; aspect-ratio:1; border-radius:50%; border:3px solid var(--ca); display:grid; place-items:center; font:700 34px Georgia, serif; }
.bctext { min-width:0; display:flex; flex-direction:column; gap:2px; }
.bcname { font:700 20px/1.1 Georgia, 'Times New Roman', serif; } .bctitle { font:700 10.5px 'Baloo 2', sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ca); }
.bcbiz { font:700 12px 'Baloo 2', sans-serif; opacity:.85; margin-top:2px; } .bcblurb { margin:4px 0 0; font:italic 12px/1.3 Georgia, serif; opacity:.9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcisle { position:absolute; right:10px; bottom:6px; font:700 9px 'Baloo 2', sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.45; font-style:normal; }
.sheet.stand .bcstyles { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-bottom:6px; }
.sheet.stand .bcstyles button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:12px; background:#ffffff0f !important; border:1.5px solid #ffffff1f !important; color:#fff; box-shadow:none; cursor:pointer; }
.sheet.stand .bcstyles button.on { border-color:var(--ac) !important; } .sheet.stand .bcstyles i { width:34px; height:20px; border-radius:4px; background:var(--cb); box-shadow:inset 0 0 0 2px var(--ci); } .sheet.stand .bcstyles small { font:700 11px 'Baloo 2', sans-serif; }
.sheet.stand .bcadult { display:flex; gap:8px; align-items:flex-start; margin:12px 0 4px; font:700 13px 'Baloo 2', sans-serif; color:#fff; cursor:pointer; } .sheet.stand .bcadult input { margin-top:3px; }
.sheet.stand .bclist { display:grid; gap:10px; margin-top:10px; } .sheet.stand .bcmini { all:unset; cursor:pointer; display:flex; justify-content:center; } .sheet.stand .bcmini .bcard { width:min(300px, 80vw); }
.sheet.stand .scard .bcico { flex:none; width:42px; height:26px; border-radius:4px; background:#f6efe2; box-shadow:inset 0 0 0 2px #c8a85a, 0 3px 8px #0006; }
/* each link on a card says what you get there */
.sheet.stand .bclinks { display:grid; gap:6px; }
.sheet.stand .bclink { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; background:#ffffff0d; border:1px solid #ffffff1c; color:#fff; text-decoration:none; }
.sheet.stand .bclink:hover { background:#ffffff18; } .sheet.stand .bclink i { flex:none; width:10px; height:10px; border-radius:50%; background:var(--sc); box-shadow:0 0 8px var(--sc); }
.sheet.stand .bclink span { flex:1; min-width:0; display:flex; flex-direction:column; } .sheet.stand .bclink b { font:800 14px 'Baloo 2', sans-serif; } .sheet.stand .bclink small { font:600 12px/1.25 'Baloo 2', sans-serif; opacity:.78; }
.sheet.stand .bclink em { flex:none; font:800 11.5px 'Baloo 2', sans-serif; font-style:normal; color:var(--ac); }
.sheet.stand .bcle { margin-bottom:6px; } .sheet.stand .bcle .pfield { margin-bottom:4px; }
.sheet.stand .bcnote { width:100%; box-sizing:border-box; padding:7px 12px; border-radius:10px; border:1px solid #ffffff22; background:#ffffff0a; color:#fff; font:600 12.5px 'Baloo 2', sans-serif; }

/* the Speed Candy Caper: secret letters, a notebook and the big reveal */
.sheet.st-caper { --ac:#ff9ad8; --ac2:#8a5ac8; }
.sheet.stand .cpletter { display:flex; justify-content:center; margin:6px 0 14px; }
.sheet.stand .cpenv { position:relative; width:min(340px, 86vw); padding:22px 22px 18px; border-radius:6px; background:linear-gradient(170deg, #fff8ec, #f3e6d2); color:#3a2430; box-shadow:0 16px 30px #0008; transform:rotate(-1.2deg); animation:cpIn .5s cubic-bezier(.3,1.4,.5,1); }
.sheet.stand .cpenv::before { content:''; position:absolute; top:-14px; right:22px; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ff8ac8, #c03a8a); box-shadow:0 3px 6px #0005; }
.sheet.stand .cpenv small { font:700 11px 'Baloo 2', sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.6; } .sheet.stand .cpenv b { display:block; font:700 22px Georgia, serif; margin:2px 0 8px; color:#8a2a6a; }
.sheet.stand .cpenv p { margin:0; font:16px/1.45 Georgia, serif; } .sheet.stand .cpenv i { display:block; margin-top:12px; font:700 12px 'Baloo 2', sans-serif; color:#c03a8a; }
@keyframes cpIn { from { transform:translateY(30px) rotate(4deg); opacity:0; } to { transform:rotate(-1.2deg); opacity:1; } }
.sheet.stand .cpnotes { margin:8px 0 0; padding-left:1.3em; display:grid; gap:8px; font:600 14px/1.35 'Baloo 2', sans-serif; color:#fff; } .sheet.stand .cpnotes li.new { color:var(--ac); }
.sheet.stand .cphints, .sheet.stand .cpvote { display:grid; gap:8px; margin-top:10px; }
.sheet.stand .cphints button, .sheet.stand .cpvote button { padding:12px 14px; border-radius:14px; background:#ffffff12 !important; border:1.5px solid #ffffff26 !important; color:#fff; font:800 15px 'Baloo 2', sans-serif; text-align:left; cursor:pointer; box-shadow:none; }
.sheet.stand .cpvote .cpmyst { border-style:dashed !important; color:var(--ac); }
.sheet.stand .cpreveal { display:flex; gap:12px; align-items:center; margin:6px 0 4px; } .sheet.stand .cpreveal p { margin:0; font:600 14.5px/1.4 'Baloo 2', sans-serif; color:#fff; } .sheet.stand .cpfizz { flex:none; animation:cpBob 1.6s ease-in-out infinite; }
@keyframes cpBob { 50% { transform:translateY(-6px) rotate(4deg); } }
.sheet.stand .cplist { list-style:none; margin:0; padding:0; display:grid; gap:6px; } .sheet.stand .cplist li { padding:8px 12px; border-radius:12px; background:#ffffff0d; color:#fff; font:600 13px 'Baloo 2', sans-serif; }
.sheet.stand .cplist b { font-weight:800; } .sheet.stand .cplist span { color:var(--ac); margin-left:6px; font-weight:700; } .sheet.stand .cplist small { display:block; opacity:.75; margin-top:2px; }

/* Whodunit at the Manor: cards, a detective grid and the night's scoreboard */
.sheet.st-manor { --ac:#e8c46a; --ac2:#8a2a3a; }
.sheet.stand .mnhand { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sheet.stand .mncard { padding:14px 12px; min-width:84px; text-align:center; border-radius:10px; background:linear-gradient(170deg, #fff8ec, #efe2cc); color:#2a2230; font:700 14px Georgia, serif; box-shadow:0 6px 14px #0006; border-top:5px solid #8a2a3a; }
.sheet.stand .mncard.k-i { border-top-color:#2f6b5a; } .sheet.stand .mncard.k-r { border-top-color:#2f5a8a; }
.sheet.stand .mngrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sheet.stand .mnchip { position:relative; padding:9px 6px; border-radius:12px; background:#ffffff10 !important; border:1.5px solid #ffffff22 !important; color:#fff; font:800 13px 'Baloo 2', sans-serif; cursor:pointer; box-shadow:none; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
.sheet.stand .mnchip[style] { box-shadow:inset 3px 0 0 var(--mc) !important; }
.sheet.stand .mnchip.on { border-color:var(--ac) !important; background:#e8c46a2a !important; }
.sheet.stand .mnchip.x { opacity:.38; text-decoration:line-through; text-decoration-thickness:2px; }
.sheet.stand .mnlast { margin:2px 0 6px; padding:10px 12px; border-radius:12px; background:#e8c46a1f; border:1px solid #e8c46a55; color:#fff; font:600 13.5px/1.4 'Baloo 2', sans-serif; }
.sheet.stand .mnboard li { display:flex; justify-content:space-between; }
/* the start-screen tagline: short and confident */
.title p { font:800 clamp(14px, 3.9vw, 24px)/1.25 'Baloo 2', sans-serif; letter-spacing:.01em; color:#3a2a44; padding:8px 20px; max-width:none; white-space:nowrap; }
/* a glowing dot on a button with something new behind it */
.pill.ic.hasnew { position:relative; } .pill.ic.hasnew::after { content:''; position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%; background:#ff6a8a; border:2px solid #fff; box-shadow:0 0 0 0 #ff6a8a99; animation:newPulse 1.6s ease-out infinite; }
@keyframes newPulse { 0% { box-shadow:0 0 0 0 #ff6a8a99; } 100% { box-shadow:0 0 0 10px #ff6a8a00; } }
@media (prefers-reduced-motion: reduce) { .pill.ic.hasnew::after { animation:none; } }
#hsBlind { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:radial-gradient(circle at 50% 45%, #2a1830f2, #0c0612fa); color:#ffe8c8; font-family:'Baloo 2', sans-serif; pointer-events:none; }
#hsBlind b { font-size:96px; line-height:1; } #hsBlind span { font-size:20px; font-weight:700; opacity:.85; }
#hsBlind[hidden] { display:none; }
/* event menus: one bottom bar, short panels, nothing twice */
body.host-mode #partyBtn, body.guest-mode #partyBtn, body.host-mode #musicBtn { display:none !important; }
#partyBar #pbLeave { background:#ffffff22; color:#ffe8c8; }
.sheet.stand .agrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-top:12px; }
.sheet.stand .atile { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:14px; border-radius:18px; text-align:left; cursor:pointer; color:inherit; font:inherit; background:linear-gradient(160deg, color-mix(in srgb, var(--c) 26%, transparent), #ffffff08); border:1.5px solid color-mix(in srgb, var(--c) 55%, transparent); transition:transform .12s; }
.sheet.stand .atile:hover { transform:translateY(-2px); } .sheet.stand .atile:active { transform:scale(.97); }
.sheet.stand .atile .aart { color:var(--c); margin-bottom:4px; } .sheet.stand .atile b { font-size:17px; } .sheet.stand .atile small { opacity:.85; line-height:1.3; } .sheet.stand .atile i { font-style:normal; font-size:12px; font-weight:800; color:var(--c); margin-top:2px; }
.sheet.stand .pinv { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px 14px; border-radius:16px; background:#ffffff10; border:1.5px dashed #ffffff30; }
.sheet.stand .pinv small { display:block; opacity:.8; font-size:12px; } .sheet.stand .pinv b { font-size:22px; letter-spacing:2px; }
.sheet.stand .pset { margin-top:12px; } .sheet.stand .pset summary { cursor:pointer; font-weight:800; opacity:.85; padding:6px 0; }
.sheet.st-party .pend2 { margin-top:16px; }
body.host-mode :is(#makeBtn, #stuffBtn, #designBtn, #houseBtn, #findsBtn, #storyBtn), body.guest-mode :is(#makeBtn, #stuffBtn, #designBtn, #houseBtn, #findsBtn, #storyBtn) { display:none !important; } /* events show only event things */
/* plan your party */
.sheet.st-plan { --ac:#ffb04a; padding-top:0; overflow-x:hidden; }
.sheet.st-plan .plhero { position:relative; margin:0 -18px 6px; height:170px; border-radius:22px 22px 0 0; overflow:hidden; }
.sheet.st-plan .plhero svg { width:100%; height:100%; display:block; }
.sheet.st-plan .plhero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, #1e1028f0); }
.sheet.st-plan .plhtx { position:absolute; left:18px; bottom:12px; z-index:1; display:flex; flex-direction:column; }
.sheet.st-plan .plhtx small { text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:800; color:#ffd890; }
.sheet.st-plan .plhtx b { font:800 26px/1.1 'Baloo 2', sans-serif; color:#fff; text-shadow:0 2px 12px #000a; }
.sheet.st-plan .plhtx span { font-size:12.5px; opacity:.85; }
.sheet.st-plan .plx { position:absolute; top:10px; right:10px; z-index:2; background:#00000055; }
.sheet.st-plan .plsec { margin-top:14px; }
.sheet.st-plan .plh { font:800 13px 'Baloo 2', sans-serif; letter-spacing:1.5px; text-transform:uppercase; color:#ffd890; margin-bottom:7px; }
.sheet.st-plan .plin { width:100%; box-sizing:border-box; padding:12px 14px; border-radius:14px; border:1.5px solid #ffffff2a; background:#ffffff0e; color:#fff; font:700 17px 'Baloo 2', sans-serif; }
.sheet.st-plan .plin:focus { outline:none; border-color:#ffb04a; box-shadow:0 0 0 3px #ffb04a33; }
.sheet.st-plan .plchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sheet.st-plan .plchip { border:1.5px solid #ffffff26; background:#ffffff0a; color:#ffe8c8; border-radius:99px; padding:6px 12px; font:700 13px 'Baloo 2', sans-serif; cursor:pointer; }
.sheet.st-plan .plchip.on { background:linear-gradient(135deg, #ff9a3a, #ff5a8a); border-color:transparent; color:#fff; box-shadow:0 4px 14px #ff6a6a55; }
.sheet.st-plan .plsongs { display:grid; gap:8px; }
.sheet.st-plan .plsong { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; border:1.5px solid #ffffff1c; background:#ffffff08; color:#ffe8c8; text-align:left; cursor:pointer; font:inherit; }
.sheet.st-plan .plsong b { display:block; font-size:15px; color:#fff; } .sheet.st-plan .plsong small { opacity:.7; font-size:12px; }
.sheet.st-plan .plnote { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#ffffff12; color:#ffd890; flex:none; }
.sheet.st-plan .plsong.on { border-color:#ffb04a; background:linear-gradient(90deg, #ffb04a26, #ff5a8a14); box-shadow:inset 0 0 0 1px #ffb04a55; }
.sheet.st-plan .plsong.on .plnote { background:linear-gradient(135deg, #ffb04a, #ff5a8a); color:#fff; }
.sheet.st-plan .plgo { width:100%; margin:18px 0 4px; padding:14px; border:0; border-radius:18px; cursor:pointer; display:flex; flex-direction:column; align-items:center; background:linear-gradient(135deg, #ffb04a, #ff5a8a 55%, #c05aff); color:#fff; box-shadow:0 8px 26px #ff5a8a66, inset 0 1px 0 #ffffff66; animation:plpulse 2.4s ease-in-out infinite; }
.sheet.st-plan .plgo span { font:800 22px 'Baloo 2', sans-serif; letter-spacing:.5px; } .sheet.st-plan .plgo small { font-weight:700; opacity:.9; }
@keyframes plpulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.02); box-shadow:0 10px 34px #ff5a8a88, inset 0 1px 0 #ffffff66; } }
.sheet.st-plan .plsongs { grid-template-columns:1fr 1fr; }
.sheet.st-plan .plsong, .sheet.st-plan .plchip, .sheet.st-plan .plgo { border-bottom-width:1.5px; box-shadow:none; transform:none; }
.sheet.st-plan .plgo { border:0; box-shadow:0 8px 26px #ff5a8a66, inset 0 1px 0 #ffffff66; }
.sheet.st-plan .plchip.on { box-shadow:0 4px 14px #ff6a6a55; }
@media (max-width:420px) { .sheet.st-plan .plsongs { grid-template-columns:1fr; } }
.sheet.st-plan .pldress { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sheet.st-plan .pldress .plsong { padding:12px; }
.sheet.st-plan .plfits { margin-top:10px; max-height:150px; overflow-y:auto; padding:2px; }
.sheet.st-plan .plhint { display:block; margin-top:5px; opacity:.65; font-size:12px; }
.sheet.st-plan .plemo { font-size:22px; }
.sheet.st-plan .pllook { width:100%; }
#partyBar .plk { background:#7ac8ff; color:#1a2a40; }
@media (max-width:420px) { .sheet.st-plan .pldress { grid-template-columns:1fr; } }
/* party look: try on, then wear */
.sheet .dhead .lkx { background:#ffffff18 !important; color:inherit !important; margin-left:auto; }
.sheet .dhead .lkwear { background:linear-gradient(135deg, #ffb04a, #ff5a8a) !important; color:#fff !important; box-shadow:0 4px 14px #ff5a8a55; margin-left:6px; }
.sheet .dhead .lkwear.off { background:#ffffff18 !important; box-shadow:none; opacity:.75; }
.sheet .lktry { margin:2px 0 6px; }
.sheet .dhead .lkwear.off { background:#00000010 !important; color:#7a6a80 !important; }
.sheet .dhead .lkx { background:#00000010 !important; }
#partyBar .plk.pulse { animation:lkpulse 1.2s ease-in-out infinite; }
@keyframes lkpulse { 0%, 100% { box-shadow:0 0 0 0 #7ac8ffaa; } 50% { box-shadow:0 0 0 8px #7ac8ff00; transform:scale(1.06); } }
#evLoad { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:radial-gradient(circle at 50% 40%, #3a1a50f4, #120818fc); color:#ffe8c8; font-family:'Baloo 2', sans-serif; transition:opacity .4s; }
#evLoad.out { opacity:0; pointer-events:none; }
#evLoad b { font-size:28px; } #evLoad span { opacity:.8; font-weight:700; }
#evLoad .evl { display:flex; gap:10px; margin-bottom:8px; } #evLoad .evl i { width:16px; height:16px; border-radius:50%; background:#ffb04a; animation:evb 1s ease-in-out infinite; } #evLoad .evl i:nth-child(2) { background:#ff5a8a; animation-delay:.15s; } #evLoad .evl i:nth-child(3) { background:#c08aff; animation-delay:.3s; }
@keyframes evb { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
/* events mode: its own space */
body.ev-mode :is(#makeBtn, #stuffBtn, #designBtn, #houseBtn, #findsBtn, #storyBtn, #musicBtn, #coins, #lvl) { display:none !important; }
#startEv { margin-top:10px; background:linear-gradient(135deg, #ffb04a, #ff5a8a 55%, #c05aff) !important; color:#fff !important; }
.title .tback { margin-top:14px; background:none !important; box-shadow:none !important; color:inherit !important; opacity:.75; font-size:15px !important; padding:6px 12px !important; text-decoration:underline; }
#veil { position:fixed; inset:0; z-index:45; background:#0c0612; opacity:0; pointer-events:none; transition:opacity .12s ease; }
#veil.on { opacity:1; }
html.evgo #title { visibility:hidden; }
html.evgo body::after { content:''; position:fixed; inset:0; z-index:200; background:radial-gradient(circle at 50% 40%, #3a1a50, #120818); }
html.evgo body { background:radial-gradient(circle at 50% 40%, #3a1a50, #120818); }
/* ghost organ: learn the Toccata */
#roastHud.org .orgsong { margin-top:6px; font-weight:800; color:#ffd890; font-size:14px; } #roastHud.org .orgsong small { display:block; font-weight:600; opacity:.7; font-size:11.5px; }
#roastHud.org .orgk { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-top:10px; }
#roastHud.org .orgk button { height:84px; border-radius:6px 6px 12px 12px; background:linear-gradient(180deg, #fffaf0, #e8dcc8); border:2px solid #00000030; box-shadow:inset 0 -6px 0 #0000001a; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; cursor:pointer; transition:transform .08s, background .1s; }
#roastHud.org .orgk button b { font:800 15px 'Baloo 2', sans-serif; color:#3a2a44; }
#roastHud.org .orgk button.blk { background:linear-gradient(180deg, #3a2a44, #1c1024); } #roastHud.org .orgk button.blk b { color:#ffe8c8; }
#roastHud.org .orgk button.next { background:var(--c); box-shadow:0 0 22px var(--c), inset 0 -6px 0 #00000022; animation:orgnext 1s ease-in-out infinite; }
#roastHud.org .orgk button.lit { transform:translateY(3px); background:var(--c); box-shadow:0 0 26px var(--c); }
#roastHud.org .orgk button.miss { animation:orgmiss .3s; }
#roastHud.org .rnote i { display:block; font-style:normal; margin-top:6px; letter-spacing:2px; font-weight:800; } #roastHud.org .rnote i span { opacity:.45; } #roastHud.org .rnote i span.done { opacity:1; color:#6affb0; } #roastHud.org .rnote i span.now { opacity:1; color:#ffd04a; text-decoration:underline; }
@keyframes orgnext { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes orgmiss { 0%, 100% { transform:translateX(0); } 30% { transform:translateX(-4px); } 70% { transform:translateX(4px); } }
#motto { min-width:12ch; text-align:center; transition:opacity .35s ease, transform .35s ease; }
#motto.mfade { opacity:0; transform:translateY(6px); }
body.in-mansion::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:4; background:radial-gradient(ellipse at 50% 45%, transparent 45%, #0c0412aa 100%); } /* candlelit: darker corners */
body.in-mansion #dressBar { left:16px; transform:none; top:58px; }
body.in-haunt #dressBar { left:16px; transform:none; top:58px; }
.sheet.st-guest .gbline { font:italic 700 26px Georgia, serif; text-align:center; margin:18px 0 6px; color:#ffe8c8; }
.sheet.st-guest .gblace { text-align:center; opacity:.85; line-height:1.6; } .sheet.st-guest .gblace i { font-family:Georgia, serif; font-size:18px; color:#ffd890; }
/* the event menu: one premium look */
body.ev-mode #partyBar, body.host-mode #partyBar, body.guest-mode #partyBar { gap:4px; padding:7px 8px; border-radius:24px; background:linear-gradient(180deg, #2e1840f2, #180c24f2); border:1px solid #d9a64059; box-shadow:0 12px 34px #000a, inset 0 1px 0 #ffffff1f; backdrop-filter:blur(8px); flex-wrap:nowrap; }
#partyBar .dk { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; padding:6px 10px 5px !important; border-radius:16px !important; background:transparent !important; color:#f6eadb !important; font:800 12px 'Baloo 2', sans-serif !important; transition:background .15s, transform .12s; }
#partyBar .dk i { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); transition:all .15s; }
#partyBar .dk:hover i, #partyBar .dk:active i { background:var(--c); color:#1e1028; box-shadow:0 0 18px color-mix(in srgb, var(--c) 70%, transparent); }
#partyBar .dk:active { transform:scale(.94); }
#partyBar .dk span { white-space:nowrap; opacity:.9; }
#partyBar .dk.pulse i { animation:lkpulse 1.2s ease-in-out infinite; }
@media (max-width:420px) { #partyBar .dk { min-width:54px; padding:5px 6px 4px !important; } #partyBar .dk span { font-size:10.5px; } }
body.ev-mode .sheet, body.host-mode .sheet, body.guest-mode .sheet { background:linear-gradient(165deg, #2c163cf5, #150a1ef5) !important; border:1px solid #d9a64055 !important; box-shadow:0 22px 60px #000b, inset 0 1px 0 #ffffff1c !important; color:#f6eadb; }
body.ev-mode .sheet h2, body.host-mode .sheet h2, body.guest-mode .sheet h2 { background:linear-gradient(180deg, #ffe7a8, #e8a84a); -webkit-background-clip:text; background-clip:text; color:transparent !important; letter-spacing:.3px; }
body.ev-mode .sheet .stsay, body.host-mode .sheet .stsay, body.guest-mode .sheet .stsay { color:#d8c8e8 !important; }
body.ev-mode .sheet .fhead, body.host-mode .sheet .fhead, body.guest-mode .sheet .fhead { color:#ffd890 !important; letter-spacing:1.5px; }
#codeBanner { padding:6px 16px !important; border-radius:16px !important; background:linear-gradient(180deg, #2e1840ee, #180c24ee) !important; border:1px solid #d9a64066 !important; box-shadow:0 8px 22px #0008 !important; }
/* the party planner: a full-screen card */
body:has(.sheet.st-plan:not([hidden]))::before { content:''; position:fixed; inset:0; z-index:19; background:radial-gradient(circle at 50% 40%, #2a143a99, #0c0612dd); backdrop-filter:blur(6px); }
.sheet.st-plan { position:fixed !important; left:50% !important; top:50% !important; bottom:auto !important; right:auto !important; transform:translate(-50%, -50%) !important; width:min(600px, 94vw) !important; max-height:90vh !important; z-index:20 !important; border-radius:26px !important; padding:0 18px 0 !important; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d9a64088 transparent; }
.sheet.st-plan::-webkit-scrollbar { width:6px; } .sheet.st-plan::-webkit-scrollbar-thumb { background:#d9a64088; border-radius:6px; }
.sheet.st-plan .plhero { height:200px; border-radius:26px 26px 0 0; }
.sheet.st-plan .plhtx b { font-size:30px; }
.sheet.st-plan .plhero .tw { animation:twk 2.4s ease-in-out infinite; }
@keyframes twk { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
.sheet.st-plan .plsec { margin-top:12px; padding:14px; border-radius:18px; background:#ffffff08; border:1px solid #ffffff12; }
.sheet.st-plan .plgo { position:sticky; bottom:0; margin:16px -18px 0; width:calc(100% + 36px); border-radius:0 0 26px 26px; padding:18px; box-shadow:0 -12px 30px #150a1e; }
@media (max-width:480px) { .sheet.st-plan { max-height:94vh !important; } .sheet.st-plan .plhero { height:160px; } }
/* messages sit near the top, at eye level, bigger and with a soft glow so they are hard to miss */
.toast, body .toast, body.sheet-open .toast, body:has(#partyBar) .toast, body:has(#outfitStrip:not([hidden])) .toast, body:has(#swingBar) .toast { top:max(72px, calc(env(safe-area-inset-top) + 64px)) !important; bottom:auto !important; }
.toast { font:700 16px/1.35 'Baloo 2', sans-serif; padding:12px 20px 12px 48px; border:2px solid #ffc04a; box-shadow:0 12px 32px #000a, 0 0 0 4px #ffc04a22, inset 0 1px 0 #ffffff22; max-width:min(460px, 92%); }
.toast::before { left:16px; width:22px; height:22px; margin-top:-11px; }
.toast.show { animation:toastIn .4s cubic-bezier(.3,1.4,.5,1), toastGlow 1.6s ease-out .35s 1; }
@keyframes toastIn { from { transform:translate(-50%, -16px) scale(.94); opacity:0; } to { transform:translate(-50%, 0) scale(1); opacity:1; } }
@keyframes toastGlow { 0% { box-shadow:0 12px 32px #000a, 0 0 0 4px #ffc04a66; } 100% { box-shadow:0 12px 32px #000a, 0 0 0 4px #ffc04a22; } }
/* hovering a top icon shows what it opens */
@media (hover:hover) {
  #hud button.ic[aria-label] { position:relative; }
  #hud button.ic[aria-label]:not(#muteBtn):hover::after { content:attr(aria-label); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; background:#2a1838; color:#fff; font:700 13px 'Baloo 2', sans-serif; padding:5px 10px; border-radius:10px; box-shadow:0 6px 16px #0006; pointer-events:none; z-index:40; animation:tipIn .15s ease-out; }
  @keyframes tipIn { from { opacity:0; transform:translate(-50%, -4px); } to { opacity:1; transform:translate(-50%, 0); } }
}

/* dark text on the white tiles in the look picker, so labels are readable */
.sheet:not(.stand) .dtabs button:not(.on), .sheet:not(.stand) .dcard { color:#3a2a4a; }

body:has(#partyBar:not([hidden])) .toast, body:has(#leaveBtn) .toast { bottom:96px; }
@media (max-width:420px) { #leaveBtn { bottom:88px; } }
#bowlHud { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:12; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; font-family:'Baloo 2', sans-serif; }
#bowlHud .bwtop { display:flex; gap:14px; align-items:center; padding:8px 18px; border-radius:99px; background:#1a0e16e6; border:2px solid #d9a640; color:#ffe8c8; font-weight:800; font-size:16px; }
#bowlHud .bws { font-size:22px; color:#ffd890; min-width:36px; text-align:center; }
#bowlHud .bwk { color:#ff9a5a; }
#bowlHud .bwk:empty { display:none; }
#bowlHud .bwhint { padding:6px 14px; border-radius:12px; background:#1a0e16cc; color:#ffe8c8; font-weight:700; font-size:15px; }
#bowlHud #bwAgain { pointer-events:auto; padding:10px 22px; border-radius:99px; border:2px solid #d9a640; background:#6a1a2a; color:#ffe8c8; font:800 16px 'Baloo 2', sans-serif; cursor:pointer; }
#bowlPop { position:fixed; left:50%; top:38%; transform:translate(-50%, -50%) scale(.6); z-index:12; opacity:0; pointer-events:none; font:900 44px 'Baloo 2', sans-serif; color:#ffe8c8; text-shadow:0 3px 0 #6a1a2a, 0 0 24px #ff9a3088; transition:transform .25s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; white-space:nowrap; }
#bowlPop.on { opacity:1; transform:translate(-50%, -50%) scale(1); }
#bowlPop.big { font-size:72px; color:#ffd890; }
@media (max-width:420px) { #bowlPop { font-size:32px; } #bowlPop.big { font-size:48px; } }
.rthud .rtime { font-size:18px; color:#ffd890; }
.rthud .rcombo { margin-left:8px; padding:1px 8px; border-radius:99px; background:#6a1a2a; color:#ffe8c8; font-size:14px; }
.jcos { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:6px; }
.jcos .dcard { padding:8px 4px; }
@media (max-width:420px) { .jcos { grid-template-columns:repeat(3, 1fr); } }
.lpk { display:flex; flex-direction:column; gap:6px; }
.lpk .lpl { font:800 12px 'Baloo 2', sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#d9a640; margin-top:4px; }
.lpk .lprow { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.lpk .lpc { flex:0 0 auto; width:76px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 4px 6px; border-radius:14px; border:2px solid #ffffff1a; background:#2a1c30; color:#ffe8c8; cursor:pointer; }
.lpk .lpc img { width:64px; height:64px; border-radius:10px; background:radial-gradient(circle at 50% 40%, #4a3450, #24162a); object-fit:cover; }
.lpk .lpc img:not([src]) { animation:lpPulse 1s ease-in-out infinite alternate; }
@keyframes lpPulse { from { opacity:.4 } to { opacity:.8 } }
.lpk .lpc small { font:700 11px 'Baloo 2', sans-serif; line-height:1.1; text-align:center; }
.lpk .lpc.on { border-color:#d9a640; box-shadow:0 0 0 2px #d9a64055; background:#3a2440; }
.lpk .lpcol { gap:10px; padding-left:4px; }
.lpk .lpdot { flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:2px solid #ffffff33; cursor:pointer; }
.lpk .lpdot.on { border-color:#ffe8c8; box-shadow:0 0 0 2px #d9a640; }
.pllink { margin-top:8px; background:none; border:none; color:#d9a640; font:700 13px 'Baloo 2', sans-serif; text-decoration:underline; cursor:pointer; padding:0; }
.sheet.stand.st-prize, .sheet.stand.st-punch, .sheet.stand.st-magic { top:50%; bottom:auto; transform:translate(-50%, -50%); max-height:min(84vh, 760px); } /* shop and booth menus sit in the middle of the screen, tall enough to see */
body.in-mansion #partyBar { bottom:8px; padding:4px 6px; opacity:.92; }
body.in-mansion #partyBar .dk { min-width:44px; padding:4px 6px !important; }
body.in-mansion #partyBar .dk span { display:none; }
body.in-mansion #partyBar .dk i { width:30px; height:30px; } /* indoors the dock shrinks to icons so the rooms stay in view */
.lpsum { display:flex; align-items:center; gap:12px; }
.lpsum img { width:64px; height:64px; border-radius:12px; background:radial-gradient(circle at 50% 40%, #4a3450, #24162a); }
.lpsum span { flex:1; display:flex; flex-direction:column; color:#ffe8c8; font-family:'Baloo 2', sans-serif; }
.lpsum small { opacity:.75; font-size:12px; }
.lpchg { padding:8px 16px; border-radius:99px; border:2px solid #d9a640; background:#3a2440; color:#ffe8c8; font:800 14px 'Baloo 2', sans-serif; cursor:pointer; }
#plLookPk { margin-top:10px; }
#roomNav { position:fixed; left:16px; top:118px; z-index:9; display:flex; flex-direction:column; gap:6px; }
#roomNav button { padding:8px 16px; border-radius:99px; border:2px solid #d9a640; background:#2a1830e6; color:#ffe8c8; font:800 14px 'Baloo 2', sans-serif; cursor:pointer; text-align:left; }
#roomNav button::before { content:'→ '; color:#d9a640; }
body.sheet-open #roomNav { display:none; }
#grooveStop { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:12; padding:8px 18px; border-radius:99px; border:2px solid #d9a640; background:#2a1830e6; color:#ffe8c8; font:800 14px 'Baloo 2', sans-serif; cursor:pointer; }
body.sheet-open #grooveStop { display:none; }
/* important messages: bigger, brighter, easy to catch */
.toast { font:800 19px/1.35 'Baloo 2', sans-serif !important; padding:14px 24px 14px 54px !important; max-width:min(560px, 92%) !important; background:linear-gradient(180deg, #4a2458f7, #2a1236f7) !important; border:2.5px solid #ffcf6a !important; box-shadow:0 14px 40px #000c, 0 0 0 6px #ffc04a33, 0 0 40px #ffb04a55 !important; }
.toast::before { left:18px !important; width:26px !important; height:26px !important; margin-top:-13px !important; }
.sbub { font:800 16px/1.3 'Baloo 2', sans-serif !important; max-width:280px !important; padding:10px 16px !important; box-shadow:0 8px 24px #000a, 0 0 0 3px #ffc04a66 !important; }
@media (max-width:560px) { .toast { font-size:17px !important; padding:12px 18px 12px 46px !important; } }
/* the toast and the keys card never share a spot: the card sits under the top buttons, messages go under the card */
.toast { width:max-content; }
body:has(#actHud) .toast { top:150px !important; }
#actHud { width:max-content; max-width:calc(100vw - 32px); text-align:center; }
@media (max-width:560px) { #actHud { top:112px; } body:has(#actHud) .toast { top:196px !important; } }
/* important messages: a card in the middle of the screen that waits for a tap */
html body #toast.big.big { top:50% !important; bottom:auto !important; transform:translate(-50%, -50%) !important; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center !important; padding:22px 26px 18px !important; max-width:min(420px, calc(100vw - 40px)) !important; width:max-content; z-index:60; }
.toast.big::before { display:none; }
.toast.big.show { animation:toastPop .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes toastPop { from { transform:translate(-50%, -50%) scale(.85); opacity:0; } to { transform:translate(-50%, -50%) scale(1); opacity:1; } }
.toast.big button { font:800 17px 'Baloo 2', sans-serif; color:#2a1236; background:linear-gradient(180deg, #ffd884, #f2b04a); border:0; border-radius:999px; padding:9px 30px; box-shadow:0 4px 0 #b8782a; cursor:pointer; }
.toast.big button:active { transform:translateY(3px); box-shadow:0 1px 0 #b8782a; }
/* big moments: flash, big word, confetti, camera bump */
#bigMo { position:fixed; inset:0; pointer-events:none; z-index:300; display:none; overflow:hidden; }
#bigMo.on { display:block; }
#bigMo .bmF { position:absolute; inset:0; background:radial-gradient(circle at 50% 38%, #fff6d0dd, #ffd04a66 35%, transparent 72%); opacity:0; animation:bmFlash .75s ease-out forwards; }
#bigMo.small .bmF { animation-duration:.5s; }
#bigMo .bmW { position:absolute; left:50%; top:33%; transform:translate(-50%, -50%); text-align:center; white-space:nowrap; animation:bmWord 3.4s cubic-bezier(.2,1.4,.4,1) forwards; }
#bigMo.small .bmW { animation-duration:2.4s; }
#bigMo .bmW b { display:block; font:900 clamp(40px, 11vw, 86px)/1 'Baloo 2', sans-serif; color:#ffe27a; -webkit-text-stroke:3px #5a1a2a; paint-order:stroke fill; text-shadow:0 6px 0 #5a1a2a, 0 0 42px #ffb04a; }
#bigMo.small .bmW b { font-size:clamp(30px, 8vw, 56px); }
#bigMo .bmW span { display:inline-block; margin-top:10px; font:800 clamp(17px, 4.4vw, 24px) 'Baloo 2', sans-serif; color:#fff; background:#2a1236ee; border:2px solid #ffcf6a; border-radius:999px; padding:4px 18px; }
#bigMo em { position:absolute; top:-24px; width:10px; height:16px; border-radius:2px; animation:bmConf 2s cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes bmFlash { 0% { opacity:0; } 12% { opacity:1; } 100% { opacity:0; } }
@keyframes bmWord { 0% { transform:translate(-50%, -50%) scale(.2) rotate(-8deg); opacity:0; } 14% { transform:translate(-50%, -50%) scale(1.15) rotate(2deg); opacity:1; } 24% { transform:translate(-50%, -50%) scale(1) rotate(0); } 82% { opacity:1; transform:translate(-50%, -50%) scale(1); } 100% { opacity:0; transform:translate(-50%, -62%) scale(.96); } }
@keyframes bmConf { 0% { transform:translate(0, 0) rotate(0); } 100% { transform:translate(var(--dx), 108vh) rotate(var(--r)); } }
canvas.kick { animation:kick .35s ease-out; } canvas.kick2 { animation:kick2 .6s ease-out; }
@keyframes kick { 0%, 100% { transform:none; } 30% { transform:scale(1.015) translate(-3px, 2px); } 60% { transform:scale(1.008) translate(2px, -1px); } }
@keyframes kick2 { 0%, 100% { transform:none; } 15% { transform:scale(1.03) translate(-6px, 4px); } 35% { transform:scale(1.02) translate(5px, -3px); } 60% { transform:scale(1.01) translate(-2px, 2px); } }
@media (prefers-reduced-motion: reduce) { canvas.kick, canvas.kick2 { animation:none; } #bigMo em { display:none; } }
body.in-up #actHud { display:none; } /* the keys card stays downstairs */
/* looking through the telescope: a round eyepiece with a brass rim */
#scopeView { position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0; transition:opacity .5s; background:radial-gradient(circle at 50% 50%, transparent 0 31vmin, #b8862a 31.4vmin 33vmin, #000 33.4vmin); }
#scopeView.on { opacity:1; }
/* QA fixes: comfortable tap targets, messages clear of the top buttons, readable locked cards, a roomier welcome box */
@media (max-width:560px) { #manOut, #dressBar .pill, .hud .pill, #roomNav button { min-height:44px; } .toast:not(.big) { top:122px !important; } body:has(#actHud) .toast:not(.big) { top:196px !important; } }
#plWel { resize:none; min-height:3.2em; line-height:1.35; font-family:inherit; }
.sheet.stand .dcard.locked { opacity:.85; }
.sheet.stand .dcard.locked b, .sheet.stand .dcard.locked span, .sheet.stand .dcard.locked p { color:#e8dcf0; }
/* QA: the big win word gets a soft dark halo so it reads over any sign; speech bubbles stay on screen */
#bigMo .bmW::before { content:''; position:absolute; inset:-30px -60px; z-index:-1; background:radial-gradient(ellipse at center, #1a0c24cc 0%, #1a0c2466 45%, transparent 72%); }
.sbub { max-width:min(220px, 60vw); }
/* QA round 2: tap targets, room-name toast clear of room buttons, sturdier win word, single Back outline */
#sheet .dhead #next { min-width:44px; min-height:44px; }
@media (max-width:560px) { #meBtn { min-width:44px; } .lpchg { display:inline-flex; align-items:center; min-height:44px; } .hsw { min-height:44px; min-width:44px; } body:has(#roomNav) .toast:not(.big) { top:236px !important; } }
#bigMo .bmW::before { inset:-36px -70px; background:radial-gradient(ellipse at center, #140820f2 0%, #140820b8 50%, transparent 74%); }
body.in-mansion #dressBar, body.in-haunt #dressBar { background:transparent; box-shadow:none; padding:0; }
.sheet.stand .dcard.locked em { color:#ffd890; font-size:11.5px; }
#updPill { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:70; font:800 15px 'Baloo 2', sans-serif; color:#2a1236; background:linear-gradient(180deg, #ffd884, #f2b04a); border:0; border-radius:999px; padding:10px 22px; box-shadow:0 6px 18px #0006; cursor:pointer; min-height:44px; }
/* a dance invite from another player */
#askPop { position:fixed; left:50%; top:40%; transform:translate(-50%, -50%); z-index:65; background:linear-gradient(180deg, #4a2458f7, #2a1236f7); border:2.5px solid #ffcf6a; border-radius:18px; padding:16px 20px; color:#ffeccc; font:800 18px 'Baloo 2', sans-serif; text-align:center; box-shadow:0 14px 40px #000c; }
#askPop div { display:flex; gap:10px; justify-content:center; margin-top:12px; }
#askPop button { font:800 16px 'Baloo 2', sans-serif; border:0; border-radius:999px; padding:10px 20px; min-height:44px; cursor:pointer; }
#askPop #askYes { background:linear-gradient(180deg, #ffd884, #f2b04a); color:#2a1236; }
#askPop #askNo { background:#ffffff22; color:#ffeccc; }
.sheet.stand .bagh { margin:16px 0 8px; font:800 12px 'Baloo 2', sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#ffcf7a; }
body:has(#partyBar:not([hidden])) #leaveBtn { bottom:calc(100px + env(safe-area-inset-bottom)); z-index:12; } /* the way out always sits above the party bar */
#fortCard { position:fixed; left:50%; top:118px; transform:translate(-50%, -8px); width:min(560px, calc(100vw - 32px)); padding:16px 20px; border-radius:20px; background:#2a1244e6; border:2px solid #d9a640; box-shadow:0 0 28px #c08aff66, 0 10px 30px #0008; color:#fff4d0; text-align:center; z-index:15; opacity:0; pointer-events:none; transition:opacity .5s, transform .5s; }
#fortCard.on { opacity:1; transform:translate(-50%, 0); }
#fortCard p { margin:0; font:700 19px/1.35 'Baloo 2', sans-serif; }
#fortCard b { display:block; margin-top:10px; font:800 16px/1.3 'Baloo 2', sans-serif; color:#ffc94a; }
#acctBtn { display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; } #acctBtn .ok { display:none; } #acctBtn.on .ok { display:inline; } #acctBtn.on span { opacity:.75; }
@media (max-width:520px) { #acctBtn span { display:none; } } /* on a phone, just the cloud */
body.in-up #acctBtn, body.in-mansion #acctBtn { display:none; }
.sheet .savecode { margin:14px 0 4px; padding:14px; border-radius:16px; background:#1a0c28; border:2px dashed #d9a640; color:#ffd890; text-align:center; font:800 24px/1.2 'Baloo 2', sans-serif; letter-spacing:.04em; user-select:all; word-break:break-word; }
.sheet .acsec { background:#3a2450; color:#ffe8c0; border:1.5px solid #d9a64099; font-weight:800; }