@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;900&family=Open+Sans:wght@400;500;600;700;800&display=swap');

@font-face { font-family: 'LINESeedSans'; src: url('assets/font/LINESeedSans_A_Th.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'LINESeedSans'; src: url('assets/font/LINESeedSans_A_Rg.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'LINESeedSans'; src: url('assets/font/LINESeedSans_A_Bd.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'LINESeedSans'; src: url('assets/font/LINESeedSans_A_He.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'LINESeedSans'; src: url('assets/font/LINESeedSans_A_XBd.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Reforma1918'; src: url('assets/font/Reforma1918-Blanca.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Reforma1918'; src: url('assets/font/Reforma1918-Gris.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SeoulHangang'; src: url('assets/font/SeoulHangangL.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'SeoulHangang'; src: url('assets/font/SeoulHangangM.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SeoulHangang'; src: url('assets/font/SeoulHangangB.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SeoulHangang'; src: url('assets/font/SeoulHangangEB.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream1.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream2.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream3.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream4.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream5.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream6.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream7.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream8.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'SCDream'; src: url('assets/font/SCDream9.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

:root{
  /* ── DARK MODE (default) ── */
  --bg:         #0a1610;
  --surface:    #102018;
  --surface2:   #162c22;
  --surface3:   #1c3a2c;
  --border:     #285040;
  --border2:    #386e58;
  --accent:     #4ec89a;
  --accent2:    #80e0bc;
  --accent-dim: #0e3828;
  --text:       #b8e0cc;
  --text-dim:   #4aa880;
  --text-faint: #285a40;
  --danger:     #e06878;
  --danger-dim: #7a2a38;
  --blue:       #80beff;
  --gold:       #f0c840;
  --glow:       rgba(93,217,138,0.35);
  --glow-strong:rgba(93,217,138,0.6);
  --body-grad1: rgba(40,100,60,0.35);
  --body-grad2: rgba(20,60,40,0.25);
}

/* ── LIGHT MODE ── */
[data-theme="light"]{
  --bg:         #f8f8f8;
  --surface:    #f8f8f8;
  --surface2:   #f8f8f8;
  --surface3:   #c8c8c8;
  --border:     rgba(26,22,14,0.22);
  --border2:    rgba(26,22,14,0.38);
  --accent:     #2a5e24;
  --accent2:    #1d4419;
  --accent-dim: rgba(42,94,36,0.14);
  --text:       #140f08;
  --text-dim:   #3a3020;
  --text-faint: #6a5e4e;
  --danger:     #c84830;
  --danger-dim: rgba(200,72,48,0.10);
  --blue:       #1b4a8a;
  --gold:       #d48820;
  --glow:       rgba(42,94,36,0.12);
  --glow-strong:rgba(42,94,36,0.22);
  --body-grad1: rgba(0,0,0,0);
  --body-grad2: rgba(0,0,0,0);
}

.theme-btn{
  background:none;border:1px solid var(--border);cursor:pointer;
  font-size:18px;padding:4px 10px;border-radius:8px;
  transition:background .2s,border-color .2s;line-height:1;
}
.theme-btn:hover{background:var(--surface2);border-color:var(--border2);}
/* ── SETTINGS POPUP STYLE RULES ──────────────────────────────────────────────
   All new sections added to #settingsPopup MUST use these classes:
   - .settings-heading  → section title (10px, text-dim)
   - .settings-sub      → helper text / preview text (8px, text-faint)
   - .settings-mode-btn → interactive buttons (already defined below)
   Never use inline font-size on headings or sub-text inside the settings popup.
   ────────────────────────────────────────────────────────────────────────── */
.settings-heading{font-family:'LINESeedSans','Nunito',sans-serif;font-size:14px;color:var(--text-dim);margin-bottom:10px;letter-spacing:.06em;font-weight:500;}
.settings-sub{font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;color:var(--text-faint);margin-top:6px;letter-spacing:.04em;}
.settings-mode-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  background:var(--surface3);color:var(--text-dim);
  border:1px solid var(--border2);cursor:pointer;
  padding:8px 12px;border-radius:8px;
  transition:background .15s,color .15s,border-color .15s;
}
.settings-mode-btn:hover{background:var(--border2);color:var(--text);}
.settings-mode-btn.active{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent);}

/* smooth transitions for theme switching */
*{ transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s; }
.edit-petal, svg path{ transition: transform .15s, filter .15s; }

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  background-image: radial-gradient(ellipse at 30% 20%, var(--body-grad1) 0%, transparent 60%),
                    radial-gradient(ellipse at 70% 80%, var(--body-grad2) 0%, transparent 50%);
  font-family:'LINESeedSans','Nunito',sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding: 20px 8px 20px;
  transition:background .4s, background-image .4s;
}

.screen{display:none;}
.screen.active{display:flex;flex-direction:column;height:calc((100vh - 40px) * 0.963);aspect-ratio:16/9;max-width:calc(100vw - 16px);overflow:hidden;border-radius:0;box-shadow:none;}

/* ── TEMPO BAR ── */
.tempo-bar{
  background:var(--bg);
  padding:22px 32px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  border-radius:0;
  position:relative;
  box-shadow:none;
}
.tempo-bar-theme{
  position:absolute;top:50%;right:24px;transform:translateY(-50%);
}
.tempo-bar-center{
  display:flex;align-items:center;gap:32px;
  margin:0 auto;
}
.tempo-bar-section{
  display:flex;align-items:center;gap:14px;
}
.tempo-bar-divider{
  width:1px;height:48px;background:var(--border2);opacity:0.5;
}
.tempo-label{font-size:20px;color:var(--text-dim);font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
.key-select{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:17px;font-weight:400;
  background:var(--surface3);color:var(--text);
  border:1px solid var(--border2);border-radius:8px;
  padding:13px 16px;cursor:pointer;outline:none;
  transition:border-color .15s;
}
.key-select:hover,.key-select:focus{border-color:var(--accent);}
.key-select option{background:var(--surface2);}
.tempo-badge{
  background:var(--surface3);color:var(--accent2);
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:18px;font-weight:500;
  padding:8px 16px;border-radius:20px;min-width:72px;text-align:center;
  border:1px solid var(--border2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.tempo-slider{-webkit-appearance:none;appearance:none;width:140px;height:4px;border-radius:3px;outline:none;cursor:pointer;background:var(--border2);}
.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 10px var(--glow-strong);cursor:pointer;transition:box-shadow .15s;}
.tempo-slider::-webkit-slider-thumb:hover{box-shadow:0 0 20px var(--glow-strong);}


/* ── EQ PANEL ── */
.fx-panel{
  position:fixed;z-index:300;
  background:var(--surface2);border:1px solid var(--border2);border-radius:18px;
  padding:20px 24px;box-shadow:0 8px 32px rgba(0,0,0,.6);
  display:none;flex-direction:column;gap:10px;width:480px;
  cursor:default;
}
.fx-panel.visible{display:flex;}
.popup-drag-handle{cursor:grab;user-select:none;}
.popup-drag-handle:active{cursor:grabbing;}
.fx-toggle{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;padding:3px 7px;border-radius:5px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface3);color:var(--text-faint);transition:.12s;}
.fx-toggle.on{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent);}
.rv-row{display:flex;align-items:center;gap:8px;}
.rv-lbl{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;color:var(--text-faint);width:36px;flex-shrink:0;letter-spacing:.05em;}
.rv-val{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;color:var(--accent);width:34px;flex-shrink:0;text-align:right;}
.rv-sl{flex:1;accent-color:var(--accent);height:4px;}
.dl-sync-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;padding:3px 5px;border-radius:4px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface3);color:var(--text-faint);transition:.12s;
}
.dl-sync-btn:hover{background:var(--border2);color:var(--text);}
.dl-sync-btn.active{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent);}
.eq-panel-title{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;color:var(--text-dim);letter-spacing:.08em;}
.eq-bands{display:flex;gap:14px;align-items:flex-end;justify-content:center;}
.eq-band{display:flex;flex-direction:column;align-items:center;gap:5px;width:44px;}
.eq-band-label{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;color:var(--text-faint);letter-spacing:.06em;}
.eq-band-val{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;color:var(--accent);min-height:10px;}
.eq-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:6px;height:80px;border-radius:3px;outline:none;cursor:pointer;background:var(--border2);}
.eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 6px var(--glow);cursor:pointer;}
.eq-reset{font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;background:none;
  border:1px solid var(--border);color:var(--text-faint);cursor:pointer;padding:4px 8px;
  border-radius:5px;width:100%;transition:background .15s;}
.eq-reset:hover{background:var(--surface3);color:var(--text-dim);}
.eq-btn{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  background:none;border:1px solid var(--border);cursor:pointer;
  color:var(--text-faint);padding:4px 6px;border-radius:5px;width:100%;
  transition:background .15s,color .15s,border-color .15s;}
.eq-btn:hover{background:var(--surface3);color:var(--text-dim);}
.eq-btn.active{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent);}

/* project name in tempo bar */
.project-name-input{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  background:var(--surface3);color:var(--text);
  border:1px solid var(--border2);border-radius:8px;
  padding:6px 10px;outline:none;
  width:130px;transition:border-color .15s;
}
.project-name-input::placeholder{color:var(--text-faint);}
.project-name-input:focus{border-color:var(--accent);}

/* ── HOTKEYS PANEL ── */
#hotkeysPanel{
  position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
}
#hotkeysPanel.visible{ display:flex; }
.hotkeys-modal{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:16px;padding:36px 44px;
  max-width:820px;width:92%;max-height:85vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.8);
  animation:modalIn .18s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;gap:24px;
  zoom:1.5;
}
.hotkeys-modal-title{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:18px;
  color:var(--accent);letter-spacing:.1em;text-align:center;
}
.hotkeys-section-title{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  color:var(--text-dim);letter-spacing:.12em;
  border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:10px;
}
.hotkeys-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;
}
.hotkey-row{
  display:flex;align-items:baseline;gap:10px;padding:4px 0;
}
.hotkey-key{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  background:var(--surface3);border:1px solid var(--border2);
  border-radius:5px;padding:4px 9px;color:var(--accent2);
  white-space:nowrap;flex-shrink:0;min-width:36px;text-align:center;
}
.hotkey-desc{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  color:var(--text-dim);line-height:1.7;
}
.hotkeys-close{
  align-self:center;
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  background:var(--surface3);border:1px solid var(--border2);
  color:var(--text-dim);padding:8px 20px;border-radius:8px;cursor:pointer;
  transition:background .15s,color .15s;
}
.hotkeys-close:hover{background:var(--accent-dim);color:var(--accent);}

/* ── HELP MODE ── */
#helpTooltip{
  position:fixed;z-index:9998;pointer-events:none;
  background:var(--surface2);border:1px solid var(--accent);border-radius:10px;
  padding:10px 14px;max-width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,0.7);
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:16px;color:var(--text);line-height:1.5;
  transition:opacity .15s;
}
#helpTooltip .help-title{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  color:var(--accent);margin-bottom:6px;letter-spacing:.06em;
}
#helpTooltip .help-hotkey{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  color:var(--text-dim);margin-top:6px;
  border-top:1px solid var(--border);padding-top:6px;
}
body.help-mode *{ cursor:help !important; }
body.help-mode .bar-btn:hover,
body.help-mode .pix-btn:hover,
body.help-mode .tool-btn:hover,
body.help-mode .edit-petal:hover{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* petal move ghost */
#petalMoveGhost{
  position:fixed;pointer-events:none;z-index:9999;
  opacity:0.72;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6));
  transition:none;
  transform:translate(-50%,-50%);
}
.bar-btn{
  background:none;border:none;cursor:pointer;
  font-size:24px;line-height:1.1;text-align:center;
  padding:7px 9px 6px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:color .15s,background .15s;color:var(--text-dim);
  min-width:48px;
}
.bar-btn:hover{color:var(--accent);background:var(--accent-dim);}
.bar-btn.active{color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 1px var(--accent);}
.bar-btn-danger{color:var(--danger);}
.bar-btn-danger:hover{color:#ff6b6b;background:rgba(255,80,80,0.1);}
.bar-btn-label{font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;color:inherit;letter-spacing:.06em;line-height:1;}
.bar-btn-icon{height:26px;display:flex;align-items:center;justify-content:center;}

@keyframes modalIn{from{transform:scale(0.88);opacity:0}to{transform:scale(1);opacity:1}}

/* ── SLICE EDITOR ── */
.slice-editor-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
  z-index:600;display:flex;align-items:center;justify-content:center;
}
.slice-editor-modal{
  background:var(--surface2);border:1px solid var(--border2);border-radius:16px;
  padding:24px 28px;box-shadow:0 20px 60px rgba(0,0,0,.8);
  width:min(820px,95vw);display:flex;flex-direction:column;gap:16px;
  animation:modalIn .18s cubic-bezier(.34,1.56,.64,1);
}
.slice-editor-title{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;color:var(--text);letter-spacing:.08em;}
.slice-waveform-wrap{position:relative;height:180px;background:var(--surface3);border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:none;cursor:default;overflow:hidden;user-select:none;}
.slice-waveform-canvas{display:block;width:100%;height:100%;}
.slice-region{position:absolute;top:0;bottom:0;background:rgba(78,200,154,0.15);border-left:2px solid var(--accent);border-right:2px solid var(--danger);pointer-events:none;}
.slice-handle-rail{position:relative;height:30px;background:var(--surface3);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;overflow:visible;flex-shrink:0;}
.slice-dragger{position:absolute;top:3px;width:46px;height:24px;transform:translateX(-50%);cursor:ew-resize;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-family:'LINESeedSans','Nunito',sans-serif;font-size:8px;letter-spacing:.05em;user-select:none;z-index:3;clip-path:polygon(50% 0%,100% 34%,100% 100%,0% 100%,0% 34%);}
.slice-dragger-start{background:var(--accent);color:var(--bg);}
.slice-dragger-end{background:var(--danger);color:#fff;}
.slice-dragger:hover{filter:brightness(1.15);}
.slice-dragger:active{filter:brightness(1.3);}
.slice-info{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;color:var(--text-faint);letter-spacing:.06em;display:flex;gap:16px;}
.slice-info span{color:var(--accent);}
.slice-editor-btns{display:flex;gap:8px;flex-wrap:wrap;}
.slice-editor-btns button{font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;padding:8px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--surface3);color:var(--text-dim);cursor:pointer;transition:background .15s,color .15s;}
.slice-editor-btns button:hover{background:var(--border2);color:var(--text);}
.slice-editor-btns button.primary{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent);}
.slice-editor-btns button.primary:hover{background:var(--accent);color:var(--bg);}
.pix-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:16px;
  border:none;background:none;cursor:pointer;
  padding:14px 24px;border-radius:12px;
  transition:transform .14s,color .14s,text-shadow .14s,background .14s;
  color:var(--text-faint);white-space:nowrap;letter-spacing:.03em;
}
.pix-btn:hover{
  transform:scale(1.08);color:var(--text);
  text-shadow:0 0 14px var(--glow);
  background:rgba(82,196,122,0.06);
}
.pix-btn.playing{color:var(--accent2);text-shadow:0 0 12px var(--glow-strong);}
.pix-btn.loop-on{color:var(--accent);text-shadow:0 0 10px var(--glow);}
.pix-btn.pix-btn-danger{color:var(--danger);}
.pix-btn.pix-btn-danger:hover{text-shadow:0 0 12px rgba(208,96,112,.5);background:rgba(208,96,112,.06);}
.pix-btn.clear-flower-active{color:var(--danger);text-shadow:0 0 10px rgba(208,96,112,.4);}
.pix-btn.copy-active{color:var(--accent2);text-shadow:0 0 10px var(--glow);}
.pix-btn.paste-active{color:var(--blue);text-shadow:0 0 10px rgba(122,176,240,.4);}

.step-dots{display:flex;gap:5px;align-items:center;}
.step-dot{width:9px;height:9px;border-radius:50%;background:var(--border2);transition:background .07s,box-shadow .1s,transform .07s;}
.step-dot.active{background:var(--accent);box-shadow:0 0 12px var(--glow-strong);transform:scale(1.4);}
.step-dot.beat-1.active{background:var(--danger);box-shadow:0 0 14px rgba(208,96,112,0.8);transform:scale(1.6);}

/* ── EDIT SCREEN ── */
#editScreen{
  background:var(--surface);
  overflow:hidden;
}
.edit-body{background:var(--surface);display:flex;align-items:stretch;flex:1;min-height:0;position:relative;}
.edit-flower-area{
  flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;
  padding:16px 8px;position:relative;gap:12px;
  background:var(--surface);overflow:hidden;min-height:0;
}
.beat-label{
  position:absolute;font-family:'LINESeedSans','Nunito',sans-serif;font-size:21px;
  color:var(--text-faint);pointer-events:none;
}
.edit-flower-svg-wrap{position:relative;height:100%;max-height:1200px;aspect-ratio:1;flex-shrink:0;}
.edit-flower-svg-wrap svg{width:100%;height:100%;}
.edit-ghost-wrap{
  height:22%;max-height:200px;aspect-ratio:1;flex-shrink:0;
  opacity:0.55;pointer-events:all;transition:opacity .2s;
  overflow:visible;
}
.edit-ghost-wrap:empty{opacity:0;pointer-events:none;}
.edit-ghost-wrap svg{width:100%;height:100%;}

/* ── PALETTE ── */
.palette-panel{
  width:300px;background:var(--surface2);
  padding:24px 18px;display:flex;flex-direction:column;
  gap:8px;border-left:1px solid var(--border);
  overflow-y:auto;flex-shrink:0;
}
#sampleBadge{
  display:none;
  position:absolute;
  right:316px; /* 300px palette + 16px gap */
  bottom:32px;
  flex-direction:column;align-items:flex-start;gap:5px;
  background:var(--surface2);border:1px solid var(--accent);
  border-radius:10px;padding:10px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,0.5),0 0 0 1px var(--accent-dim);
  pointer-events:none;z-index:10;min-width:120px;
}
#sampleBadge.visible{display:flex;}
#sampleBadgeName{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  color:var(--accent2);line-height:1.4;letter-spacing:.04em;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#sampleBadgeDur{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:16px;
  color:var(--accent);text-shadow:0 0 8px var(--glow);line-height:1;letter-spacing:.02em;
}
#sampleBadgeSec{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  color:var(--text-faint);line-height:1;
}
.palette-panel::-webkit-scrollbar{width:4px;}
.palette-panel::-webkit-scrollbar-track{background:transparent;}
.palette-panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.pal-section{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:13px;
  color:var(--text-faint);margin-top:16px;margin-bottom:8px;letter-spacing:.08em;
}
.swatch-row{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{
  width:46px;height:46px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,0.08);
  cursor:pointer;transition:transform .14s,box-shadow .14s;flex-shrink:0;
}
.swatch:hover{transform:scale(1.2);box-shadow:0 0 0 2px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.4);}
.swatch.sel{box-shadow:0 0 0 2px white,0 0 0 4px var(--accent),0 0 12px var(--glow);transform:scale(1.14);}
.drum-row{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 5px;border-radius:8px;transition:background .12s;}
.drum-row:hover{background:rgba(255,255,255,.05);}
.drum-label{font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;color:var(--text-dim);line-height:1.6;}
.eraser-swatch{
  background:var(--surface3);border:1.5px solid var(--border2);
  font-size:28px;display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);border-radius:10px;
  transition:border-color .12s,color .12s;
}
.eraser-swatch:hover{border-color:var(--danger);color:var(--danger);}
.eraser-swatch.sel{border-color:var(--danger);color:var(--danger);box-shadow:0 0 0 2px var(--danger);}

.clip-preview-wrap{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.clip-preview-svg{width:90px;height:90px;display:block;}
.clip-paste-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  background:var(--accent-dim);color:var(--accent2);
  border:1px solid var(--accent-dim);cursor:pointer;padding:10px 10px;border-radius:9px;
  width:100%;text-align:center;transition:background .15s,box-shadow .15s;letter-spacing:.04em;
}
.clip-paste-btn:hover{background:var(--accent);color:var(--bg);box-shadow:0 0 12px var(--glow);}
.clip-paste-btn.no-clip{background:var(--surface3);color:var(--text-faint);border-color:var(--border);cursor:default;}

/* mode buttons */
.pix-btn.select-mode-active{color:var(--blue);text-shadow:0 0 10px rgba(122,176,240,.5);background:rgba(122,176,240,.06);}
.pix-btn.fill-mode-active{color:#f0c840;text-shadow:0 0 10px rgba(240,200,64,0.5);background:rgba(240,200,64,0.08);}
.edit-petal-selected{
  stroke:rgba(255,255,255,0.95) !important;stroke-width:2.5px !important;
  filter:brightness(1.3) drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

/* ── MERGE POPUP ── */
.merge-popup{
  position:fixed;
  background:var(--surface2);
  border:1px solid var(--border2);border-radius:12px;
  padding:8px 12px;display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;
  z-index:400;box-shadow:0 4px 12px rgba(0,0,0,.07);pointer-events:all;
}
.merge-popup button, .merge-popup-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  background:var(--surface3);color:var(--text);
  border:1px solid var(--border2);cursor:pointer;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;
}
.merge-popup button:hover,.merge-popup-btn:hover{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent-dim);}
.merge-popup button.split-btn{background:var(--surface3);color:var(--danger);border-color:var(--danger-dim);}
.merge-popup button.split-btn:hover{background:var(--danger-dim);color:white;}

/* ── INSTRUMENT PICKER POPUP ── */
.inst-picker-overlay{
  position:fixed;inset:0;z-index:9600;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
.inst-picker{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:16px;
  width:min(720px, 92vw);
  max-height:82vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
  overflow:hidden;
}
.inst-picker-header{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface2);
}
.inst-picker-title{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:13px;
  color:var(--accent2);letter-spacing:0.08em;
}
.inst-picker-close{
  background:none;border:1px solid var(--border2);color:var(--text-dim);
  font-size:16px;cursor:pointer;padding:4px 10px;border-radius:6px;
  transition:background .12s,color .12s,border-color .12s;
}
.inst-picker-close:hover{background:var(--danger-dim);color:var(--danger);border-color:var(--danger);}
.inst-picker-body{
  display:flex;flex:1;min-height:0;
}
.inst-cat-list{
  width:150px;flex-shrink:0;
  background:var(--surface2);
  border-right:1px solid var(--border);
  padding:8px 0;overflow-y:auto;
}
.inst-cat-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;
  padding:10px 14px;text-align:left;
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;
  color:var(--text-dim);
  transition:background .12s,color .12s;
  border-left:3px solid transparent;
}
.inst-cat-btn:hover{background:var(--surface3);color:var(--text);}
.inst-cat-btn.active{
  background:var(--accent-dim);color:var(--accent2);
  border-left-color:var(--accent);
}
.inst-cat-btn .inst-cat-emoji{font-size:18px;line-height:1;}
.inst-list{
  flex:1;padding:14px;overflow-y:auto;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;align-content:start;
}
.inst-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
  transition:background .12s,border-color .12s,transform .1s;
  min-height:84px;
}
.inst-card:hover{
  background:var(--surface3);border-color:var(--border2);
  transform:translateY(-1px);
}
.inst-card.active{
  background:var(--accent-dim);border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.inst-card-emoji{font-size:26px;line-height:1;}
.inst-card-name{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:10px;
  color:var(--text);text-align:center;line-height:1.5;
  white-space:pre-line;
}
.inst-card.active .inst-card-name{color:var(--accent2);}

/* make name/emoji clickable for picker */
.inst-display-name, .track-name, .inst-emoji{cursor:pointer;transition:filter .12s;}
.inst-display-name:hover, .track-name:hover, .inst-emoji:hover{filter:brightness(1.3);}

/* edit petal */
.edit-petal{cursor:pointer;transition:filter .12s;}
/* Now-playing petal highlight — bright glow that pulses with playback. */
.edit-petal.now-playing{
  filter:brightness(1.9) saturate(0.35)
         drop-shadow(0 0 4px rgba(255,255,255,1))
         drop-shadow(0 0 10px rgba(255,255,255,0.8))
         drop-shadow(0 0 18px rgba(255,255,255,0.5));
  transition:filter .06s ease-out, transform .06s ease-out;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(1.04);
}
.edit-petal.midi-cursor{
  stroke: var(--danger, #e06878);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(224,104,120,0.7));
  animation: midiCursorPulse 1.1s ease-in-out infinite;
}
@keyframes midiCursorPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(224,104,120,0.5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(224,104,120,0.9)); }
}
.resize-handle{cursor:ew-resize;transition:fill .12s;}
.resize-handle:hover{fill:rgba(255,255,255,0.38);}
.vel-handle{cursor:ns-resize;transition:fill .12s;}
.vel-handle:hover{fill:rgba(255,255,255,0.38);}
.edit-petal:hover{filter:brightness(1.35) saturate(1.2);}
.edit-center-g{cursor:pointer;}

.flower-nav{display:flex;align-items:center;gap:12px;}
.flower-nav-btn{
  background:none;border:1px solid var(--border);cursor:pointer;
  color:var(--text);font-size:12px;line-height:1;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.flower-nav-btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent);}
.flower-nav-btn:disabled{opacity:0.25;cursor:default;}
.flower-nav-indicator{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  color:var(--text-dim);min-width:76px;text-align:center;
}

.brush-panel{
  display:flex;flex-direction:column;align-items:center;
  background:var(--surface2);border-right:1px solid var(--border);
  padding:14px 0;gap:10px;flex-shrink:0;width:108px;
}
.tool-undo-row{
  display:flex;flex-direction:row;gap:6px;padding:10px 4px 4px;
  border-top:1px solid var(--border);width:100%;justify-content:center;
}
.tool-undo-btn{
  background:none;border:none;cursor:pointer;
  font-size:28px;line-height:1.1;
  text-align:center;padding:8px 4px 7px;border-radius:10px;
  width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:color .15s,background .15s;color:var(--text-dim);
}
.tool-undo-btn:hover:not(:disabled){color:var(--accent);background:var(--accent-dim);}
.tool-undo-btn:disabled{opacity:0.3;cursor:default;}
.tool-item{display:flex;flex-direction:column;align-items:center;width:100%;}
.tool-btn{
  background:none;border:none;cursor:pointer;
  font-size:34px;line-height:1.1;
  text-align:center;padding:12px 4px 10px;border-radius:12px;
  width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:color .15s,background .15s;color:var(--text-dim);
}
.tool-btn:hover{color:var(--accent);background:var(--accent-dim);}
.tool-btn.active{color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 1px var(--accent);}
.tool-btn.fill-active{color:#f0c840;background:rgba(240,200,64,0.1);box-shadow:0 0 0 1px #f0c840;}
.tool-btn.select-active{color:var(--blue);background:rgba(128,184,248,0.1);box-shadow:0 0 0 1px var(--blue);}
.tool-picker-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px 8px 10px;border-radius:12px;width:78px;
  background:none;border:none;cursor:pointer;
  font-size:38px;line-height:1;
  transition:background .12s,color .12s;color:var(--text-dim);
}
.tool-picker-item span{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:9px;color:inherit;
  letter-spacing:.04em;line-height:1;white-space:nowrap;
}
.tool-picker-item svg,.tool-picker-item img{width:36px;height:36px;}
.tool-picker-item:hover{background:var(--accent-dim);color:var(--accent);}
.tool-picker-item.active{background:var(--accent-dim);color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);}
.tool-label{font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;color:inherit;letter-spacing:.06em;line-height:1;}
.brush-options{
  display:none;flex-direction:column;align-items:center;gap:6px;
  padding:6px 0;width:100%;
}
.brush-options.visible{display:flex;}
.brush-slider-row{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:140px;}
.brush-labels{
  position:absolute;right:calc(50% + 18px);
  top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;
}
.brush-val{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  color:var(--accent);min-width:22px;text-align:center;
  background:var(--accent-dim);border:1px solid var(--accent);
  border-radius:6px;padding:4px 6px;
}
.brush-val-lo{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;color:var(--text-faint);}
.brush-size-label{font-family:'LINESeedSans','Nunito',sans-serif;font-size:11px;color:var(--text-faint);letter-spacing:.06em;}
.brush-slider{
  -webkit-appearance:none;appearance:none;
  width:120px;height:5px;border-radius:3px;
  cursor:pointer;outline:none;
  background:var(--border2);
  transform:rotate(-90deg);
}
.brush-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 0 8px var(--glow);cursor:pointer;
}
.brush-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:none;
  background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 0 8px var(--glow);cursor:pointer;
}

/* ── EDIT BOTTOM ── */
.edit-bottom{
  background:var(--surface2);padding:22px 30px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px solid var(--border);
}
.inst-display{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:220px;flex-shrink:0;
}
.inst-display-label{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:14px;
  color:var(--accent2);letter-spacing:.08em;line-height:1;
  text-shadow:0 0 8px var(--glow);
font-weight:500;}
.inst-display-name{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:16px;
  color:var(--text);letter-spacing:.04em;line-height:1;text-align:center;
  width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:500;}
.inst-nav{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;}
.inst-nav-btn{
  background:none;border:1px solid var(--border);cursor:pointer;
  color:var(--text-dim);font-size:12px;line-height:1;
  width:26px;height:26px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.inst-nav-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.layer-btn{
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  border:1px solid var(--border2);background:var(--surface3);color:var(--text-dim);
  cursor:pointer;padding:10px 18px;border-radius:9px;
  transition:background .12s,color .12s,border-color .12s;
}
.layer-btn:hover{background:var(--accent-dim);color:var(--accent2);border-color:var(--accent-dim);}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(60px);
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:12px;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border2);
  padding:14px 26px;border-radius:14px;
  opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;z-index:10000;white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.6),0 0 0 1px rgba(82,196,122,0.1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

#titleStartBtn:hover,#titleContinueBtn:hover,#titleSettingsBtn:hover{background:#d0d0d0;transform:translateY(-1px);}

/* ══════════ SANDBOX MODE ══════════ */
.sandbox-tool-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:60px;padding:8px 12px;
  background:transparent;border:1px solid transparent;border-radius:10px;
  color:#3a3020;cursor:pointer;
  font-family:'LINESeedSans','Nunito',sans-serif;
  transition:background .12s,border-color .12s,color .12s;
}
.sandbox-tool-btn:hover{background:rgba(26,22,14,0.05);border-color:rgba(26,22,14,0.1);}
.sandbox-tool-btn.active{background:rgba(42,94,36,0.15);border-color:rgba(42,94,36,0.35);color:#1d4419;}
.sandbox-tool-label{font-size:9px;letter-spacing:.08em;}
#sandboxCanvas.tool-block,#sandboxCanvas.tool-flower{cursor:crosshair;}
#sandboxCanvas.tool-stem{cursor:cell;}
#sandboxCanvas.tool-text{cursor:text;}
#sandboxCanvas.tool-delete,
#sandboxScreen.tool-delete-active .sandbox-block,
#sandboxScreen.tool-delete-active .sandbox-flower,
#sandboxScreen.tool-delete-active .sandbox-text{cursor:not-allowed;}
.sandbox-pattern-card{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26,22,14,0.04);
  border:1px solid rgba(26,22,14,0.08);border-radius:10px;
  cursor:pointer;padding:6px;
  transition:background .12s,border-color .12s,transform .08s;
}
.sandbox-pattern-card:hover{background:rgba(42,94,36,0.08);border-color:rgba(42,94,36,0.3);transform:translateY(-1px);}
.sandbox-pattern-card svg{width:100%;height:100%;display:block;overflow:visible;}
.sandbox-pattern-group-header{
  font-size:10px;letter-spacing:.1em;color:#6a5e4e;
  padding:4px 2px 2px;
  border-bottom:1px solid rgba(26,22,14,0.08);
  margin-bottom:6px;
}
.sandbox-pattern-group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.sandbox-sticker-card{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26,22,14,0.04);
  border:1px solid rgba(26,22,14,0.08);border-radius:10px;
  cursor:pointer;
  transition:background .12s,border-color .12s,transform .08s;
}
.sandbox-sticker-card:hover{background:rgba(42,94,36,0.08);border-color:rgba(42,94,36,0.3);transform:translateY(-1px);}
.sandbox-sticker-card svg{width:70%;height:70%;display:block;}
.sandbox-block{
  position:absolute;pointer-events:auto;
  width:80px;height:80px;
  transform:translate(-50%,-50%);
  transition:filter .12s,transform .1s;
}
.sandbox-block:hover{filter:brightness(1.06) drop-shadow(0 2px 6px rgba(0,0,0,0.12));}
.sandbox-block.selected{filter:drop-shadow(0 0 0 2px rgba(42,94,36,0.6));}
.sandbox-block svg{width:100%;height:100%;display:block;}
.sandbox-flower{
  position:absolute;pointer-events:auto;
  width:240px;height:240px;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:filter .12s,transform .1s;
}
#sandboxCanvas.tool-stem ~ #sandboxFlowersLayer .sandbox-flower{cursor:grab;}
.sandbox-flower:hover{filter:brightness(1.08) drop-shadow(0 2px 6px rgba(0,0,0,0.15));}
.sandbox-flower svg{width:100%;height:100%;display:block;overflow:visible;}
/* Thin bg-colored border around each petal so they read as distinct shapes
   against the canvas. Overrides the SVG's stroke="none" attribute. */
.sandbox-flower svg path[data-p]{stroke:var(--bg) !important;stroke-width:1.2 !important;}
/* Resize handles on blocks/flowers. Appear on hover; edges resize in one axis,
   corners in both, plus a purple handle above for rotation. */
.sandbox-resize-handle{
  position:absolute;width:10px;height:10px;
  background:rgba(42,94,36,0.9);border:1.5px solid white;border-radius:50%;
  pointer-events:auto;z-index:2;
  opacity:0;transition:opacity .12s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.sandbox-block:hover .sandbox-resize-handle,
.sandbox-flower:hover .sandbox-resize-handle,
.sandbox-resize-handle:hover,
.sandbox-block:hover .sandbox-rotate-handle,
.sandbox-flower:hover .sandbox-rotate-handle,
.sandbox-rotate-handle:hover{opacity:1;}
.sandbox-resize-handle.dir-n{left:50%;top:-5px;margin-left:-5px;cursor:ns-resize;}
.sandbox-resize-handle.dir-s{left:50%;bottom:-5px;margin-left:-5px;cursor:ns-resize;}
.sandbox-resize-handle.dir-e{right:-5px;top:50%;margin-top:-5px;cursor:ew-resize;}
.sandbox-resize-handle.dir-w{left:-5px;top:50%;margin-top:-5px;cursor:ew-resize;}
.sandbox-resize-handle.dir-ne{right:-5px;top:-5px;cursor:nesw-resize;}
.sandbox-resize-handle.dir-nw{left:-5px;top:-5px;cursor:nwse-resize;}
.sandbox-resize-handle.dir-se{right:-5px;bottom:-5px;cursor:nwse-resize;}
.sandbox-resize-handle.dir-sw{left:-5px;bottom:-5px;cursor:nesw-resize;}
.sandbox-rotate-handle{
  position:absolute;left:50%;top:-26px;margin-left:-7px;
  width:14px;height:14px;
  background:rgba(100,80,200,0.9);border:1.5px solid white;border-radius:50%;
  pointer-events:auto;z-index:2;cursor:grab;
  opacity:0;transition:opacity .12s;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
/* Keep shape borders at a constant visual width regardless of size. */
.sandbox-block svg *,
.sandbox-flower svg *{vector-effect:non-scaling-stroke;}

/* Order badges — shown on flowers of the selected block so users can see and
   swap the play order. Click two badges to swap their positions. */
.sandbox-order-badge{
  position:absolute;pointer-events:auto;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(42,94,36,0.92);color:white;
  border:2px solid white;border-radius:50%;
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:18px;font-weight:600;
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  transition:transform .1s, background .12s;
}
.sandbox-order-badge:hover{transform:translate(-50%,-50%) scale(1.1);}
.sandbox-order-badge.dragging{cursor:grabbing;background:rgba(200,120,20,0.95);box-shadow:0 2px 12px rgba(200,120,20,0.55);transition:none;}
.sandbox-order-badge.drop-target{background:rgba(70,140,210,0.95);transform:translate(-50%,-50%) scale(1.2);box-shadow:0 2px 12px rgba(70,140,210,0.5);}

/* Multi-select outline (rubber-band result). */
.sandbox-block.multi-selected,
.sandbox-flower.multi-selected,
.sandbox-text.multi-selected{outline:2px dashed rgba(42,94,36,0.8);outline-offset:4px;}

/* Text element — contentEditable label with its own move/resize handles. */
.sandbox-text{
  position:absolute;pointer-events:auto;
  transform:translate(-50%,-50%);
  padding:4px 10px;min-width:40px;
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:18px;color:var(--text);
  background:transparent;border:1px dashed transparent;border-radius:4px;
  cursor:move;user-select:none;
  transition:filter .12s;
}
.sandbox-text:hover{border-color:rgba(26,22,14,0.15);}
.sandbox-text.editing{cursor:text;border-color:rgba(42,94,36,0.5);user-select:text;background:rgba(255,255,255,0.5);}
.sandbox-text:focus{outline:none;}
#sandboxScreen.sandbox-placing .sandbox-text{pointer-events:none;}

/* Placement mode: don't let existing blocks/flowers steal the canvas click.
   Flower SVG petals carry pointer-events="all" as an SVG attribute, so we
   have to override it on every descendant. */
#sandboxScreen.sandbox-placing .sandbox-flower,
#sandboxScreen.sandbox-placing .sandbox-flower *,
#sandboxScreen.sandbox-placing .sandbox-block,
#sandboxScreen.sandbox-placing .sandbox-block *{pointer-events:none !important;}

/* Palette wrapper — lets the sandbox key bar stack above the palette panel
   without changing layout in normal edit mode. */
.palette-wrap{width:300px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;}
.palette-wrap .palette-panel{width:100%;flex:1;min-height:0;}

/* Palette key bar — above the palette swatches in every edit mode. */
#paletteKeyBar{
  display:flex;
  padding:10px 18px;gap:8px;align-items:center;
  background:var(--surface2);border-left:1px solid var(--border);border-bottom:1px solid var(--border);
  font-family:'LINESeedSans','Nunito',sans-serif;
}
.palette-key-label{font-size:11px;color:var(--text-dim);letter-spacing:.08em;margin-right:2px;}
#paletteKeyBar #paletteKeyRootSelect{flex:0 0 auto;width:68px;}
#paletteKeyBar #paletteKeyModeSelect{flex:1;min-width:0;}

/* Sandbox flower editor popup — reuses editScreen DOM but reshapes it. */
.screen.active.sandbox-edit{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  max-width:none;aspect-ratio:auto;border-radius:0;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);
  z-index:9450;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.sandbox-edit .tempo-bar{display:none !important;}
/* Keep edit-bottom visible in sandbox mode, but trim it to just layers + clear. */
.sandbox-edit .edit-bottom #backBtn,
.sandbox-edit .edit-bottom .flower-nav,
.sandbox-edit .edit-bottom #editInstDisplay{display:none !important;}
/* #editCard groups edit-body + edit-bottom so sandbox mode can style them as
   one floating card. display:contents in normal mode = layout-transparent. */
#editCard{display:contents;}
.sandbox-edit #editCard{
  display:flex;flex-direction:column;
  max-width:2000px;width:97vw;
  max-height:86vh;height:86vh;
  border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 10px var(--bg), 0 20px 60px rgba(0,0,0,0.5);
}
.sandbox-edit #editCard .edit-body{flex:1;min-height:0;}
.sandbox-edit #editCard .edit-bottom{flex:0 0 auto;}
#sandboxEditCloseBtn{display:none;}
.sandbox-edit #sandboxEditCloseBtn{
  display:inline-flex;align-items:center;gap:6px;
  position:fixed;top:20px;right:20px;z-index:9460;
  background:rgba(255,255,255,0.9);color:#3a3020;
  border:1px solid rgba(26,22,14,0.15);border-radius:10px;
  padding:10px 16px;cursor:pointer;
  font-family:'LINESeedSans','Nunito',sans-serif;font-size:13px;letter-spacing:.08em;
  backdrop-filter:blur(6px);
}
.sandbox-edit #sandboxEditCloseBtn:hover{filter:brightness(1.05);transform:translateY(-1px);}