/* High Tide Dispensary — warm apothecary UI */
:root{
  --cream:#f7efdd; --cream2:#efe0c4; --ink:#3a2a1a; --ink-soft:#6b5136;
  --wood:#8a5a33; --wood-d:#5e3a20; --brass:#c9a227; --green:#5a7d4f;
  --card:#fffaf0; --shadow:0 8px 28px rgba(46,31,20,.22);
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overscroll-behavior:none;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:#241a10; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
#app{position:fixed; inset:0; overflow:clip;}
/* overflow:clip (not hidden): the stage must NEVER scroll. overflow:hidden still
   allows focus/programmatic scrolling, which shifted the whole canvas when an
   offscreen topbar button received focus. clip forbids all scrolling. */
#game{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;
  transition:transform .45s cubic-bezier(.3,.7,.3,1);}
.hidden{display:none !important;}

/* ---------- top bar ---------- */
#topbar{
  position:absolute; top:calc(8px + env(safe-area-inset-top)); left:8px; right:8px;
  display:flex; gap:8px; align-items:center; pointer-events:none; z-index:20;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#topbar::-webkit-scrollbar{ display:none; }
#topbar>*{pointer-events:auto; flex:0 0 auto;}
#game-back{min-width:38px;justify-content:center;font-family:inherit;font-size:20px;font-weight:700;line-height:1;padding:7px 10px;cursor:pointer;color:inherit;}
.pill{
  display:flex; align-items:center; gap:7px; background:var(--card);
  border:2px solid #e2cfa4; border-radius:999px; padding:7px 13px;
  font-weight:700; font-size:15px; box-shadow:0 3px 10px rgba(46,31,20,.18);
  white-space:nowrap;
}
#pill-clock{margin-left:auto; font-size:13.5px;}
.coin-ico{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #f5c542 55%, #b9861a);
  border:2px solid #a5761a; box-shadow:inset 0 -2px 3px rgba(0,0,0,.25);
  display:inline-block; position:relative;
}
.coin-ico::after{content:""; position:absolute; inset:4px; border-radius:50%; border:1.5px solid rgba(165,118,26,.7);}
.star-ico{color:#e8a90c; font-size:18px; text-shadow:0 1px 0 #fff;}
.cal-ico{font-size:16px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:2px solid #e2cfa4;
  background:var(--card); font-size:17px; color:var(--ink-soft);
  box-shadow:0 3px 10px rgba(46,31,20,.18); cursor:pointer;
}
.icon-btn.off{opacity:.45; text-decoration:line-through;}
.icon-btn.on{background:linear-gradient(180deg,#ffe9a8,#f5c542); border-color:#a8842e; color:#5a3f10;}

/* ---------- visit banner ---------- */
#visit-banner{
  position:absolute; top:calc(56px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  background:#3a2a1a; color:#ffe9c4; padding:8px 8px 8px 14px; border-radius:999px; z-index:25;
  display:flex; gap:10px; align-items:center; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); white-space:nowrap; max-width:94vw;
}
#visit-banner span{ overflow:hidden; text-overflow:ellipsis; }
#visit-banner button{
  background:#e8a33d; border:none; border-radius:999px; padding:8px 16px;
  font-weight:800; font-size:14px; cursor:pointer; color:#3a2a1a; flex:0 0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* ---------- goal chip ---------- */
#goal-chip{
  position:absolute; top:calc(58px + env(safe-area-inset-top)); right:8px; z-index:20;
  background:var(--card); border:2px solid #e2cfa4; border-radius:14px;
  padding:8px 12px; font-size:13px; font-weight:600; color:var(--ink);
  box-shadow:0 3px 10px rgba(46,31,20,.18); cursor:pointer; max-width:62vw;
  display:flex; gap:8px; align-items:center; text-align:left;
}
.goal-check{color:var(--green); font-size:16px;}

/* ---------- zoom controls ---------- */
#zoom-ctl{
  position:absolute; right:10px; bottom:calc(150px + env(safe-area-inset-bottom)); z-index:20;
  display:flex; flex-direction:column; gap:8px;
}
#zoom-ctl button{
  width:44px; height:44px; border-radius:14px; border:2px solid #e2cfa4;
  background:var(--card); font-size:20px; font-weight:700; color:var(--ink-soft);
  box-shadow:0 3px 10px rgba(46,31,20,.18); cursor:pointer;
}

/* ---------- bottom toolbar ---------- */
#toolbar{
  position:absolute; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:35;
  display:flex; gap:6px; background:rgba(255,250,240,.96); border:2px solid #e2cfa4;
  border-radius:22px; padding:8px; box-shadow:var(--shadow);
}
.tool{
  flex:1; border:none; background:transparent; border-radius:14px; padding:8px 2px 6px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:11.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; min-height:56px;
}
.tool .t-ico{font-size:22px; line-height:1;}
.tool.active{background:#f3e3bd; color:var(--ink); box-shadow:inset 0 0 0 2px var(--brass);}
.tool.open-on{background:#e4efdc; box-shadow:inset 0 0 0 2px var(--green); color:#334d2a;}

/* ---------- sheets & modals ---------- */
.sheet{
  position:absolute; left:0; right:0; bottom:calc(100px + env(safe-area-inset-bottom)); z-index:30; max-height:58vh;
  background:var(--cream); border:3px solid #e2cfa4; border-radius:22px;
  box-shadow:0 -10px 40px rgba(0,0,0,.3); padding:6px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y:auto; touch-action:pan-y; animation:sheetup .22s ease-out;
}
@keyframes sheetup{from{transform:translateY(40px); opacity:.4;} to{transform:none; opacity:1;}}
.sheet-handle{width:44px; height:5px; border-radius:99px; background:#d8c096; margin:6px auto 8px;}
.sheet-title{font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:700; margin:2px 0 10px; position:relative; padding-right:34px;}
#pal-close{position:absolute; right:0; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; border:2px solid #d8c096; background:transparent; color:var(--ink); font-size:17px; line-height:1; cursor:pointer; padding:0;}
/* minimized build palette: slim bar so the sheet never covers the build area */
#palette.min{max-height:none; cursor:pointer; padding-bottom:calc(10px + env(safe-area-inset-bottom));}
#palette.min #palette-tabs,#palette.min #palette-items{display:none;}
#palette.min .sheet-title{margin:2px 0 6px;}
#palette.min #palette-hint{margin-top:0;}
.modal{
  position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(36,26,16,.55); padding:18px; animation:fadein .18s ease-out;
}
#prod-modal{z-index:55;}
#day-modal{z-index:56;}
#help-modal{z-index:57;}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}
.modal-card{
  background:var(--cream); border-radius:var(--radius); border:2px solid #e2cfa4;
  box-shadow:var(--shadow); width:100%; max-width:430px; max-height:84vh; overflow-y:auto;
  padding:16px; animation:sheetup .22s ease-out;
}
.modal-title{
  font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.x{border:none; background:#efe0c4; width:32px; height:32px; border-radius:50%; font-size:14px; cursor:pointer; color:var(--ink-soft);}
.modal-foot{display:flex; gap:10px; align-items:center; margin-top:12px;}
button.primary{
  background:linear-gradient(180deg,#d9a83c,#b9861a); color:#fff8e8; border:none; border-radius:14px;
  padding:12px 20px; font-size:15px; font-weight:800; cursor:pointer; flex:1;
  box-shadow:0 3px 0 #8a6410, 0 6px 14px rgba(0,0,0,.2);
}
button.primary:active{transform:translateY(2px); box-shadow:0 1px 0 #8a6410;}
button.ghost{background:#efe0c4; border:none; border-radius:14px; padding:12px 16px; font-weight:700; color:var(--ink-soft); cursor:pointer;}
.hint{font-size:13px; color:var(--ink-soft); line-height:1.45;}
.field{margin:12px 0;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.field input{
  width:100%; padding:12px; border-radius:12px; border:2px solid #e2cfa4; font-size:16px;
  background:#fffdf7; color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--brass);}

/* palette */
#palette-tabs{display:flex; gap:8px; margin-bottom:10px;}
#palette-tabs button{
  border:2px solid #e2cfa4; background:#fffdf7; border-radius:999px; padding:8px 14px;
  font-weight:700; font-size:13px; color:var(--ink-soft); cursor:pointer;
}
#palette-tabs button.active{background:var(--ink); color:#ffe9c4; border-color:var(--ink);}
#palette-tabs{flex-wrap:wrap;}
.pal-chips{flex-basis:100%; display:flex; gap:8px;}
.pal-chips button{padding:6px 12px; font-size:12px;}
#palette-items{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.pal-item{
  background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; min-height:86px;
}
.pal-item.sel{border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass);}
.pal-item .p-ico{font-size:26px; line-height:1;}
.pal-item .p-name{font-size:11px; font-weight:700; text-align:center;}
.pal-item .p-cost{font-size:11px; color:var(--ink-soft); font-weight:700;}
.pal-item.cant .p-cost{color:#a33;}
#palette-hint{margin-top:10px; font-size:12.5px; color:var(--ink-soft); text-align:center;}

/* selection bar */
#selbar{
  position:absolute; left:10px; right:10px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:45;
  background:var(--card); border:2px solid #e2cfa4; border-radius:16px; padding:10px 12px;
  box-shadow:var(--shadow); animation:sheetup .18s ease-out;
}
#sel-name{font-weight:800; font-size:15px; margin-bottom:8px;}
.sel-btns{display:flex; gap:8px; flex-wrap:wrap;}
.sel-btns button{
  border:2px solid #e2cfa4; background:#fffdf7; border-radius:12px; padding:10px 12px;
  font-weight:700; font-size:13px; cursor:pointer; color:var(--ink); flex:1; min-width:64px;
}
#sel-sell{color:#a33; border-color:#d8a0a0;}

/* shelf slots */
#shelf-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.slot{
  background:#fffdf7; border:2px dashed #d8c096; border-radius:14px; min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; padding:8px 4px; text-align:center;
}
.slot.filled{border-style:solid; border-color:var(--brass);}
.slot .s-ico{font-size:28px;}
.slot .s-name{font-size:11px; font-weight:700; word-break:break-word; max-width:100%;}
.slot .s-meta{font-size:10.5px; color:var(--ink-soft);}
.slot .s-empty{font-size:22px; color:#d8c096;}
#shelf-total{margin-left:auto; font-weight:800;}

/* product types */
#prod-types{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.ptype{
  border:2px solid #e2cfa4; background:#fffdf7; border-radius:12px; padding:10px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-size:12px; font-weight:700;
}
.ptype .p-ico{font-size:24px;}
.ptype.sel{border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass);}
#prod-stock-row{display:flex; align-items:center; gap:14px;}
#prod-stock-row button{
  width:44px; height:44px; border-radius:50%; border:2px solid #e2cfa4; background:#fffdf7;
  font-size:20px; font-weight:800; cursor:pointer; color:var(--ink);
}
#prod-stock-n{font-size:20px; font-weight:800; min-width:36px; text-align:center;}

/* goals */
.goal-row{
  display:flex; gap:10px; align-items:center; background:#fffdf7; border:2px solid #e2cfa4;
  border-radius:14px; padding:10px 12px; margin-bottom:8px; font-size:14px; font-weight:600;
}
.goal-row.done{border-color:var(--green); background:#f2f7ec;}
.goal-row .g-check{font-size:18px; color:var(--green); width:24px; text-align:center;}
.goal-row .g-prog{margin-left:auto; font-weight:800; color:var(--ink-soft);}
.goal-row.done .g-prog{color:var(--green);}
.check-row{display:flex; gap:10px; align-items:center; font-size:13.5px; padding:7px 2px; color:var(--ink-soft);}
.check-row.done{color:var(--green); font-weight:700;}

/* menu grid */
.menu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.menu-grid button{
  background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px; padding:16px 8px;
  font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;
}

/* music genre picker */
#music-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px;}
.genre-btn{
  background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px; padding:14px 8px;
  font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.genre-btn .g-ico{font-size:26px; line-height:1;}
.genre-btn .g-desc{font-size:11px; font-weight:400; color:var(--ink-soft);}
.genre-btn.active{border-color:var(--brass); background:#f7ecd2; box-shadow:inset 0 0 0 2px var(--brass);}
#music-mute{
  width:100%; background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px;
  padding:12px; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer;
}

/* stats */
.stat-row{display:flex; justify-content:space-between; padding:9px 2px; border-bottom:1px dashed #e2cfa4; font-size:14px;}
.stat-row b{font-size:15px;}

/* toast */
#toast{
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(170px + env(safe-area-inset-bottom));
  background:#3a2a1a; color:#ffe9c4; padding:10px 18px; border-radius:999px; z-index:60;
  pointer-events:none;
  font-size:14px; font-weight:600; box-shadow:var(--shadow); animation:fadein .18s ease-out;
  max-width:90vw; text-align:center;
}

/* day summary */
#day-body .stat-row{font-size:15px;}

/* desktop niceties */
@media (min-width:760px){
  #toolbar{left:50%; right:auto; transform:translateX(-50%); width:480px;}
  #selbar{left:50%; right:auto; transform:translateX(-50%); width:480px;}
  .sheet{left:50%; right:auto; transform:translateX(-50%); width:520px; border-radius:22px; bottom:calc(100px + env(safe-area-inset-bottom));}
  @keyframes sheetup{from{transform:translate(-50%,40px); opacity:.4;} to{transform:translate(-50%,0); opacity:1;}}
  #palette-items{grid-template-columns:repeat(4,1fr);}
  #goal-chip{max-width:340px;}
}

/* move mode bar */
#movebar{
  position:absolute; left:10px; right:10px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:46;
  background:var(--card); border:2px solid var(--brass); border-radius:16px; padding:10px 12px;
  box-shadow:var(--shadow); animation:sheetup .18s ease-out;
}
#strollbar{
  position:absolute; left:10px; right:10px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:46;
  background:var(--card); border:2px solid var(--brass); border-radius:16px; padding:10px 12px;
  box-shadow:var(--shadow); animation:sheetup .18s ease-out; text-align:center;
}
#stroll-hint{ font-size:13px; opacity:.75; margin-bottom:8px; }
#stroll-status{ font-size:13px; font-weight:800; color:#2a7a3a; margin-bottom:8px; }
#stroll-actions{ display:flex; gap:8px; justify-content:center; margin:4px 0 10px; flex-wrap:wrap; }
.stroll-act{ min-height:52px; padding:10px 20px; font-size:16px; font-weight:800; border-radius:14px; border:2px solid var(--brass); background:#fffdf5; color:#3a2a1a; }
.stroll-act:active{ transform:scale(.95); }
#move-hint{font-weight:800; font-size:15px; margin-bottom:8px; text-align:center;}
#move-done{min-height:56px; font-size:16px;}
#move-cancel{min-height:56px; font-size:16px;}

/* full refund highlight */
#sel-sell.full-refund, #shelf-sell.full-refund{
  border-color:var(--green); color:var(--green); background:#f2f7ec;
}

/* theme picker */
#theme-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.theme-card{
  background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px; padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; text-align:center;
}
.theme-card.sel{border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass);}
.theme-card .th-ico{font-size:30px; line-height:1;}
.theme-card .th-name{font-size:14px; font-weight:800;}
.theme-card .th-desc{font-size:11.5px; color:var(--ink-soft); line-height:1.35;}

/* character customization */
.style-sec{margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed #e2cfa4;}
.style-sec:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.style-head{font-size:16px; margin-bottom:6px; display:flex; align-items:baseline; gap:4px;}
.style-preview{
  display:block; margin:0 auto 8px; width:110px; height:125px;
  background:#fffdf7; border:2px solid #e2cfa4; border-radius:14px;
}
.style-row{display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap;}
.style-label{font-size:12.5px; font-weight:700; color:var(--ink-soft); min-width:74px;}
.sw{
  width:40px; height:40px; border-radius:50%; border:3px solid #fffdf7;
  box-shadow:0 0 0 2px #d8c096; cursor:pointer; padding:0;
}
.sw.sel{box-shadow:0 0 0 3px var(--brass);}
.pillbtn{
  border:2px solid #e2cfa4; background:#fffdf7; border-radius:999px; padding:10px 14px;
  font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
}
.pillbtn.sel{border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass);}
.staff-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;}
.staff-row>div:last-child{flex-shrink:0;}
.staff-name{font-weight:700; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jobbtn{border:2px solid var(--brass); background:#fdf3d8; border-radius:12px; padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer; min-height:44px;}
.firebtn{border:2px solid #b0492f; background:#fdecea; border-radius:12px; padding:8px 10px; font-size:15px; cursor:pointer; min-height:44px;}

@media (min-width:760px){
  #movebar{left:50%; right:auto; transform:translateX(-50%); width:480px;}
  #strollbar{left:50%; right:auto; transform:translateX(-50%); width:480px;}
}

/* ================= multiplayer ================= */
#mp-count-pill{ cursor:pointer; }
#mp-count-pill .mp-dot{ width:9px; height:9px; border-radius:50%; background:#35b44a; display:inline-block; margin-right:6px; box-shadow:0 0 6px #35b44a; }
#mp-count-pill.none .mp-dot{ background:#c0392b; box-shadow:none; }

#mp-chatbar{
  position:fixed; left:8px; bottom:8px; z-index:60;
  display:flex; gap:8px; align-items:center; pointer-events:none;
}
#mp-chatbar > *{ pointer-events:auto; }
#mp-chat-toggle, #mp-leader-toggle{
  width:46px; height:46px; border-radius:50%; border:2px solid #e2cfa4;
  background:#fffdf7; font-size:20px; cursor:pointer; flex:0 0 auto;
  box-shadow:0 2px 8px rgba(60,40,10,.18);
}
#mp-chat-toggle.chat-unread{
  animation:chatGlow 1s ease-in-out infinite;
  border-color:#ffb020;
  background:#fff3d6;
}
@keyframes chatGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,176,32,.7); transform:scale(1); }
  50%{ box-shadow:0 0 0 10px rgba(255,176,32,0); transform:scale(1.08); }
}
#mp-chat-panel{
  position:fixed; left:8px; bottom:62px; z-index:60; width:min(320px, calc(100vw - 16px));
  background:rgba(255,253,247,.97); border:2px solid #e2cfa4; border-radius:14px;
  box-shadow:0 4px 16px rgba(60,40,10,.22); overflow:hidden;
}
#mp-chat-panel.hidden{ display:none; }
#mp-chat-log{
  max-height:120px; overflow-y:auto; padding:8px 10px; font-size:13px;
}
#mp-chat-row{ display:flex; gap:6px; padding:8px; border-top:1px solid #e2cfa4; }
#mp-chat-input{
  flex:1; min-width:0; border:2px solid #e2cfa4; border-radius:12px;
  padding:10px 12px; font-size:14px; background:#fffdf7; color:#2e1f14;
}
#mp-chat-input::placeholder{ color:#a08c66; }
#mp-chat-send{
  border:2px solid var(--brass); background:#fdf3d8; border-radius:12px;
  padding:10px 14px; font-weight:700; font-size:13px; cursor:pointer; flex:0 0 auto;
}
.mp-msg{ margin:3px 0; line-height:1.35; word-wrap:break-word; }
.mp-msg b{ color:#7a5a2a; }
.mp-empty{ color:#a08c66; font-style:italic; padding:6px 0; }
/* chat tabs: unread dot on the tab with new messages */
#mp-chat-tabs{ padding:8px 8px 0; }
#mp-chat-tabs button{ position:relative; }
.mp-unread{
  display:none; position:absolute; top:6px; right:10px;
  width:9px; height:9px; border-radius:50%; background:#e05555;
  box-shadow:0 0 0 2px #fffdf7;
}
.mp-unread.show{ display:inline-block; }

#mp-leader-panel{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:80;
  width:min(340px, 92vw); max-height:70vh; overflow:hidden; display:flex; flex-direction:column;
  background:#fffdf7; border:3px solid var(--brass); border-radius:16px;
  box-shadow:0 8px 30px rgba(60,40,10,.3);
}
#mp-leader-panel.hidden{ display:none; }
.mp-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; font-weight:800; font-size:16px; border-bottom:2px solid #f0e2c0;
}
.mp-panel-head button{ border:none; background:none; font-size:16px; cursor:pointer; }
.mp-tabs{ display:flex; gap:8px; padding:10px 14px 0; }
.mp-tabs button{
  flex:1; border:2px solid #e2cfa4; background:#fff; border-radius:999px;
  padding:8px; font-weight:700; font-size:12.5px; cursor:pointer;
}
.mp-tabs button.on{ border-color:var(--brass); background:#fdf3d8; }
#mp-leader-list{ overflow-y:auto; padding:10px 14px 14px; }
.mp-row{ display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid #f5ecd8; font-size:13.5px; }
.mp-row.me{ background:#fdf3d8; border-radius:8px; }
.mp-rank{ width:22px; font-weight:800; color:#a08c66; text-align:center; flex:0 0 auto; }
.mp-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.mp-dot.on{ background:#35b44a; box-shadow:0 0 5px #35b44a; }
.mp-dot.off{ background:#c0392b; }
.mp-name{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-val{ font-weight:700; color:#7a5a2a; flex:0 0 auto; }

#mp-name-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(40,25,10,.55); padding:20px;
}
#mp-name-overlay.hidden{ display:none; }
.mp-name-card{
  background:#fffdf7; border-radius:18px; padding:24px 20px; width:min(320px, 90vw);
  text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.mp-name-title{ font-size:20px; font-weight:800; margin-bottom:6px; }
.mp-name-sub{ font-size:13.5px; color:#a08c66; margin-bottom:14px; }
#mp-name-input{
  width:100%; box-sizing:border-box; border:2px solid #e2cfa4; border-radius:12px;
  padding:12px; font-size:16px; margin-bottom:12px; text-align:center;
  background:#fff; color:#2e1f14;
}
#mp-name-input::placeholder{ color:#a08c66; }
#mp-name-go{
  width:100%; border:none; background:var(--brass); color:#fff; border-radius:12px;
  padding:13px; font-size:15px; font-weight:800; cursor:pointer;
}

.mp-visit{
  border:2px solid var(--brass); background:#fdf3d8; border-radius:999px;
  padding:6px 12px; font-weight:700; font-size:12px; cursor:pointer; flex:0 0 auto;
  color:var(--ink);
}
.mp-visit:active{ transform:scale(.96); }

/* ---------- arcade mini-game ---------- */
#arcade-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(10,15,10,.85);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
#arcade-overlay.hidden{ display:none; }
#arcade-box{
  background:#1e2a1e; border:3px solid #c9a227; border-radius:18px;
  padding:12px; max-width:360px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#arcade-head{
  display:flex; justify-content:space-between; align-items:center;
  color:#ffe9c4; font-weight:800; font-size:17px; margin-bottom:8px;
}
#arcade-timer{
  background:#c9a227; color:#1a120a; border-radius:999px; padding:4px 12px; font-size:15px;
}
#arcade-cv{
  width:100%; border-radius:12px; touch-action:none; cursor:pointer;
  border:2px solid #3a4a3a;
}
#arcade-foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:8px;
}
#arcade-score{ color:#ffe9c4; font-weight:700; font-size:15px; }
#arcade-quit{
  background:#5a3a3a; color:#ffe9c4; border:none; border-radius:999px;
  padding:8px 16px; font-weight:700; cursor:pointer;
}
#arcade-help{
  color:#a8b8a8; font-size:12px; text-align:center; margin-top:8px; line-height:1.4;
}

/* ---------- prize wheel ---------- */
#wheel-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(10,15,10,.85);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
#wheel-overlay.hidden{ display:none; }
#wheel-box{
  background:#1e2a1e; border:3px solid #c9a227; border-radius:18px;
  padding:12px; max-width:360px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#wheel-head{
  display:flex; justify-content:space-between; align-items:center;
  color:#ffe9c4; font-weight:800; font-size:17px; margin-bottom:6px;
}
#wheel-x{
  background:#5a3a3a; color:#ffe9c4; border:none; border-radius:999px;
  width:30px; height:30px; font-weight:700; cursor:pointer; font-size:14px;
}
#wheel-info{ color:#ffd97a; font-size:13px; text-align:center; margin-bottom:8px; }
#wheel-wrap{ position:relative; }
#wheel-cv{ width:100%; border-radius:12px; border:2px solid #3a4a3a; }
#wheel-celebrate{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(10,20,10,.82); border-radius:12px;
}
#wheel-celebrate.hidden{ display:none; }
.wheel-burst{ font-size:34px; }
.wheel-wintext{ color:#ffe9c4; font-weight:800; font-size:18px; text-align:center; padding:0 12px; }
#wheel-collect{
  background:#c9a227; color:#1a120a; border:none; border-radius:999px;
  padding:10px 28px; font-weight:800; font-size:16px; cursor:pointer;
}
#wheel-foot{ display:flex; justify-content:center; margin-top:8px; }
#wheel-spin{
  background:#c9a227; color:#1a120a; border:none; border-radius:999px;
  padding:12px 44px; font-weight:800; font-size:18px; cursor:pointer;
}
#wheel-spin:disabled{ opacity:.5; }

/* fun item popups */
#fun-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9000}
#fun-overlay.hidden{display:none}
#fun-box{background:#fff8ec;border:3px solid #7a4a1f;border-radius:16px;padding:20px;max-width:320px;width:88%;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#fun-box h3{margin:0 0 8px;font-size:20px}
#fun-box p{margin:8px 0}
.fun-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.fun-row button{background:#7a4a1f;color:#fff;border:none;border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer}
.fun-note{font-size:12px;opacity:.7}
.fun-act{background:#f3e6c8;border-radius:10px;padding:10px;margin-top:10px;font-size:14px}
#fun-close{margin-top:8px;background:#999;color:#fff;border:none;border-radius:10px;padding:8px 20px;font-size:14px;cursor:pointer}

/* venue popups (pizza / concert / karaoke picker) */
#venue-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9000}
#venue-overlay.hidden{display:none}
#venue-box{background:#fff8ec;border:3px solid #7a4a1f;border-radius:16px;padding:20px;max-width:340px;width:88%;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#venue-box h3{margin:0 0 8px;font-size:20px}
#venue-box p{margin:8px 0}
#venue-box .fun-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
#venue-box .fun-row button{background:#7a4a1f;color:#fff;border:none;border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer}
#venue-box .fun-note{font-size:12px;opacity:.7}
#venue-close{margin-top:8px;background:#999;color:#fff;border:none;border-radius:10px;padding:8px 20px;font-size:14px;cursor:pointer}
.karaoke-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.karaoke-song{background:#5e1f6e;color:#fff;border:none;border-radius:12px;padding:12px;font-size:15px;cursor:pointer;font-weight:700}

/* karaoke performance UI */
#karaoke-overlay{position:fixed;inset:0;background:rgba(10,4,24,.88);display:flex;align-items:center;justify-content:center;z-index:9500}
#karaoke-overlay.hidden{display:none}
#karaoke-box{background:#1d1030;border:3px solid #c8338a;border-radius:18px;padding:18px;max-width:340px;width:90%;text-align:center;box-shadow:0 0 40px rgba(200,51,138,.5)}
#karaoke-title{color:#ffd7f2;font-size:17px;font-weight:800;margin-bottom:4px}
#karaoke-timer{color:#ffe9a8;font-size:14px;font-weight:700;margin-bottom:8px}
#karaoke-lyrics{background:#120a20;border-radius:12px;padding:12px;margin-bottom:12px;min-height:110px}
.kline{color:#8f86a8;font-size:14px;margin:4px 0;transition:all .3s}
.kline.cur{color:#fff;font-size:17px;font-weight:800}
#karaoke-meter{position:relative;height:26px;background:#120a20;border-radius:13px;margin-bottom:8px;overflow:hidden;border:2px solid #5e1f6e}
#karaoke-meter.beat{animation:kbeat .3s}
@keyframes kbeat{0%{box-shadow:0 0 0 rgba(255,80,180,0)}50%{box-shadow:0 0 18px rgba(255,80,180,.9)}100%{box-shadow:0 0 0 rgba(255,80,180,0)}}
#karaoke-marker{position:absolute;top:2px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd7f2,#c8338a);left:50%;transform:translateX(-50%)}
#karaoke-judge{height:26px;font-weight:800;font-size:16px;margin-bottom:6px;color:#fff}
#karaoke-judge.perfect{color:#ffe45e}
#karaoke-judge.good{color:#7de89a}
#karaoke-judge.miss{color:#8f86a8}
#karaoke-sing{background:linear-gradient(#e0449e,#a02070);color:#fff;border:none;border-radius:50px;padding:16px 40px;font-size:20px;font-weight:800;cursor:pointer;margin-bottom:8px;box-shadow:0 4px 16px rgba(224,68,158,.5)}
#karaoke-sing:active{transform:scale(.94)}
#karaoke-score{color:#ffe9a8;font-size:14px;font-weight:700;margin-bottom:8px}
#karaoke-quit{background:#444;color:#fff;border:none;border-radius:10px;padding:8px 18px;font-size:13px;cursor:pointer}

/* club mode: lights out + disco */
#club-overlay{position:fixed;inset:0;z-index:5000;overflow:hidden;cursor:pointer}
#club-overlay.hidden{display:none}
#club-overlay::before{content:"";position:absolute;inset:0;background:rgba(5,2,20,.72)}
.club-beam{position:absolute;top:-20%;width:90px;height:140%;opacity:.5;filter:blur(6px);transform-origin:top center;animation:sway 3s ease-in-out infinite alternate}
.club-beam.b1{left:12%;background:linear-gradient(#ff2fb3,transparent);animation-delay:0s}
.club-beam.b2{left:45%;background:linear-gradient(#2fd4ff,transparent);animation-delay:1s}
.club-beam.b3{left:76%;background:linear-gradient(#a3ff2f,transparent);animation-delay:2s}
@keyframes sway{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.club-ball{position:absolute;top:8%;left:50%;transform:translateX(-50%);font-size:64px;animation:spin 6s linear infinite;filter:drop-shadow(0 0 18px #fff)}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.club-hint{position:absolute;bottom:12%;width:100%;text-align:center;color:#fff;font-size:13px;opacity:.8}
body.club-mode #topbar, body.club-mode #toolbar{filter:brightness(.55)}

/* social: guestbook, ratings, compliments */
#social-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9000}
#social-overlay.hidden{display:none}
#social-box{background:#fff8ec;border:3px solid #7a4a1f;border-radius:16px;padding:20px;max-width:340px;width:90%;max-height:80vh;overflow-y:auto;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#social-box h3{margin:0 0 4px;font-size:20px}
.soc-sub{font-size:13px;opacity:.7;margin:0 0 8px}
.soc-stars{margin:6px 0 10px}
.soc-rate-label{font-size:13px;font-weight:600}
.soc-star{background:none;border:none;font-size:26px;color:#ccc;cursor:pointer;padding:2px}
.soc-star.on{color:#e8a33d}
.soc-notes{max-height:220px;overflow-y:auto;text-align:left;margin:8px 0}
.soc-note{background:#f3e6c8;border-radius:10px;padding:8px 10px;margin:6px 0;font-size:14px}
.soc-note b{display:block;font-size:13px;color:#7a4a1f}
.soc-note span{word-wrap:break-word}
.soc-hint{font-size:13px;opacity:.6;text-align:center}
.soc-write{display:flex;gap:6px;margin-top:8px}
.soc-write input{flex:1;border:2px solid #d9b98a;border-radius:10px;padding:9px;font-size:14px;background:#fff}
.soc-write button{background:#7a4a1f;color:#fff;border:none;border-radius:10px;padding:9px 14px;font-size:14px;cursor:pointer}
.soc-comps{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.soc-comp{background:#f3e6c8;border:2px solid #d9b98a;border-radius:12px;padding:10px;font-size:15px;cursor:pointer}
.soc-comp:active{background:#e8d5a8}
#social-close{margin-top:8px;background:#999;color:#fff;border:none;border-radius:10px;padding:8px 20px;font-size:14px;cursor:pointer}
#visit-stars{color:#ffd76a;font-size:13px;font-weight:700;flex:0 0 auto}
#visit-guestbook,#visit-compliment{padding:8px 10px !important}

/* ---------- arcade: menus, scores, fight controls ---------- */
#arcade-stage{ width:100%; }
#arcade-controls{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.arc-over{ text-align:center; color:#ffe9c4; padding:8px 4px; }
.arc-over h3{ margin:6px 0; color:#ffe9c4; }
.arc-over-title{ font-size:44px; }
.arc-big{ font-size:22px; font-weight:800; color:#ffd76a; margin:8px 0; }
.arc-sub{ color:#a8b8a8; font-size:12px; }
.arc-col{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.arc-row{ display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.arc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.arc-btn{ background:#c9a227; color:#1a120a; border:none; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; font-size:14px; }
.arc-btn:active{ transform:scale(.95); }
.arc-btn.arc-dim{ background:#3a4a3a; color:#ffe9c4; }
.arc-btn.arc-big{ font-size:16px; padding:14px; }
.arc-btn[disabled]{ opacity:.5; }
.arc-pick{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; }
.arc-pick .arc-ico{ font-size:28px; }
.arc-pick small{ font-weight:400; font-size:11px; opacity:.85; }
.arc-cur{ color:#7CFC00; }
.arc-srow{ display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.06); border-radius:8px; padding:8px 10px; margin:4px 0; color:#ffe9c4; font-size:14px; }
.arc-fight{ flex:1; background:#b33939; color:#fff; border:3px solid #7a1f1f; border-radius:14px; padding:12px 4px; font-size:22px; cursor:pointer; display:flex; flex-direction:column; align-items:center; font-weight:800; }
.arc-fight span{ font-size:12px; letter-spacing:1px; }
.arc-fight.arc-block{ background:#3a6ea5; border-color:#1f4a7a; }
.arc-fight:active{ transform:scale(.94); }
.arc-buddy{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border-radius:10px; padding:8px; margin:4px 0; color:#ffe9c4; font-size:14px; }
.arc-buddy button{ margin-left:auto; }
#arc-score-list{ margin:8px 0; }

/* ================= deep player customizer ================= */
.custom-card{ max-width:480px; }
.custom-wrap{ display:flex; flex-direction:column; align-items:center; }
#custom-preview{ width:180px; height:213px; }
.ctabs{ display:flex; gap:6px; overflow-x:auto; width:100%; padding:8px 2px; -webkit-overflow-scrolling:touch; }
.ctab{
  flex:0 0 auto; border:2px solid #e2cfa4; background:#fffdf7; border-radius:12px;
  padding:10px 12px; font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
  min-height:44px; white-space:nowrap;
}
.ctab.sel{ border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass); }
#custom-body{ width:100%; min-height:220px; }
.cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.copt{
  border:2px solid #e2cfa4; background:#fffdf7; border-radius:12px; padding:10px;
  font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
  min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.copt.sel{ border-color:var(--brass); background:#fdf3d8; box-shadow:0 0 0 2px var(--brass); }
.cdot{ width:22px; height:22px; border-radius:50%; border:2px solid #fffdf7; box-shadow:0 0 0 1px #d8c096; flex:0 0 auto; }

/* ---- boot loading + error (save safety) ---- */
#boot-loading{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#f4f0e8;color:#173f32;font-family:system-ui,sans-serif}
#boot-loading.hidden{display:none}
.boot-spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(23,63,50,.2);border-top-color:#173f32;animation:bootspin .9s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}
#boot-loading p{margin:0;font-size:15px}
#boot-error{position:fixed;inset:0;z-index:9001;display:flex;align-items:center;justify-content:center;background:#f4f0e8;padding:24px;font-family:system-ui,sans-serif}
#boot-error.hidden{display:none}
.boot-card{max-width:400px;width:100%;background:#fffdf8;border:1px solid rgba(23,63,50,.2);border-radius:16px;padding:26px;text-align:center}
.boot-card h2{margin:0 0 10px;font-size:20px;color:#173f32}
.boot-card p{font-size:14px;color:#3f4b40;line-height:1.5;margin:0 0 8px}
.boot-card .boot-btns{display:flex;gap:10px;margin-top:16px}
.boot-card button{flex:1;padding:12px;border:none;border-radius:12px;font-size:15px;cursor:pointer}
#boot-retry{background:#173f32;color:#f4f0e8}
#boot-fresh{background:#eee7d8;color:#173f32}

/* ---- Luna's attack: screen shake ---- */
@keyframes dgshake{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,3px)}}
canvas.dg-shake{animation:dgshake .45s linear}

/* ---- build palette search ---- */
#palette-search{width:100%;box-sizing:border-box;margin:8px 0 4px;padding:10px 14px;font-size:16px;border:1px solid #d8c096;border-radius:12px;background:#fffdf8;color:#173f32;font-family:system-ui,sans-serif}
#palette-search:focus{outline:2px solid #c9a227;border-color:#c9a227}
.pal-suggest{width:100%;margin:10px 0 4px;padding:12px;border:1px dashed #c9a227;border-radius:12px;background:#fdf8e8;color:#6a5a20;font-size:14px;font-family:system-ui,sans-serif;cursor:pointer}
.pal-suggest:active{transform:scale(.98)}

/* ---- suggest-an-item modal ---- */
#suggest-modal .sg-field{margin:0 0 12px;text-align:left}
#suggest-modal label{display:block;font-size:13px;font-weight:700;color:#5a4a30;margin-bottom:5px}
#suggest-modal input[type=text],#suggest-modal textarea,#suggest-modal select{width:100%;box-sizing:border-box;padding:10px 12px;font-size:16px;border:1px solid #d8c096;border-radius:10px;background:#fffdf8;color:#173f32;font-family:system-ui,sans-serif}
#suggest-modal textarea{min-height:76px;resize:vertical}
#palette.min #palette-search,#palette.min .pal-suggest{display:none;}
.pal-none{padding:18px 10px;text-align:center;color:#8a765c;font-size:14px;font-family:system-ui,sans-serif}

/* ---------- phone: keep the whole topbar on screen (no cut-off pills) ---------- */
@media (max-width:480px){
  #topbar{ gap:4px; left:6px; right:6px; }
  #topbar>*{ flex:0 1 auto; min-width:0; }
  .pill{ padding:4px 8px; font-size:12px; gap:4px; }
  #game-back{ min-width:28px; padding:4px 7px; font-size:17px; }
  .icon-btn{ width:30px; height:30px; font-size:14px; flex:0 0 auto; }
  .coin-ico{ width:15px; height:15px; }
  .star-ico{ font-size:14px; }
  #pill-clock{ font-size:12px; margin-left:auto; }
  #pill-clock #clock{ overflow:hidden; text-overflow:ellipsis; }
  #goal-chip{ top:calc(52px + env(safe-area-inset-top)); font-size:12px; padding:6px 10px; max-width:70vw; }
}