/* ---------- tokens ---------- */
:root{
  --ink:#22193A;
  --ink-soft:#4A4166;
  --paper:#FFFFFF;
  --paper-2:#F1EDFF;
  --stage:#4A3AA5;
  --stage-deep:#2C2270;
  --floor:#F2A93B;
  --floor-deep:#D98A1E;
  --pink:#FF4FA3;
  --teal:#2ED3B7;
  --yellow:#FFC93C;
  --coral:#FF5C5C;
  --violet:#7B61FF;
  --c-beat:#FF5C5C; --c-bass:#7B61FF; --c-melody:#FFC93C; --c-vocal:#2ED3B7; --c-fx:#FF8AD8;
  --radius:14px;
  --line:3px;
  --shadow:4px 4px 0 var(--ink);
  --font-display:"Fredoka","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font-body);font-weight:700;color:var(--ink);
  background:var(--stage-deep);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:600}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ---------- buttons & fields ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.4em;color:var(--ink);
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:999px;
  padding:.5em 1.05em;font-family:var(--font-display);font-weight:600;font-size:1rem;
  box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s;white-space:nowrap;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-primary{background:var(--teal)}
.btn-accent{background:var(--yellow)}
.btn-danger{background:#FFD6D6}
/* top bar: colourful buttons with white text */
.topbar .btn{color:#fff}
.topbar .btn-play{background:#1FA98F}
.topbar .btn-accent{background:#7B61FF}
.topbar #btnMore{background:#5A48C0;font-size:1.2rem;line-height:1}
.btn-rec{background:#E0455B}
.btn-rec.is-on{background:#fff;color:#C62828}
.btn-bg{background:#2E86DE}
.btn-together{background:#00897B}
.btn-together.is-on{background:#fff;color:#00695C}
.btn-cute{background:#FF4FA3}
.btn-cute.is-on{background:#fff;color:#D81B75}
.btn-horror{background:#5B1030}
.btn-horror.is-on{background:#fff;color:#7A0A1E}
body.is-horror{--stage:#1B0A12;--stage-deep:#0B0508;--floor:#4A1020;--floor-deep:#2A0810;--paper-2:#F3E4E8}
body.is-horror .stage{background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,20,60,.22), transparent 70%),var(--stage)}
body.is-horror .topbar{background:var(--stage-deep)}
body.is-horror .stage-hint{background:rgba(0,0,0,.6)}
.btn-rec .dot{width:.7em;height:.7em;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.btn-rec.is-on .dot{background:#C62828;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:.2}}
.btn-play .icon-pause{display:none}
.btn-play.is-on .icon-play{display:none}
.btn-play.is-on .icon-pause{display:inline}
.btn-play.is-on{background:var(--pink);color:#fff}
.btn-icon{padding:.35em;width:2.2em;height:2.2em;justify-content:center;border-radius:50%}

.field{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;color:#fff}
.field span{opacity:.85}
.field input[type=number]{
  width:4.2em;background:var(--paper);color:var(--ink);border:var(--line) solid var(--ink);border-radius:10px;
  padding:.3em .4em;text-align:center;font-family:var(--font-display);font-size:1rem;
}
input[type=range]{accent-color:var(--pink);width:110px}
select,.select{
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:10px;padding:.35em .6em;
  font-family:var(--font-display);
}
input[type=color]{width:44px;height:36px;border:var(--line) solid var(--ink);border-radius:10px;padding:2px;background:#fff;cursor:pointer}
input[type=text]{background:var(--paper);border:var(--line) solid var(--ink);border-radius:10px;padding:.4em .7em}

/* ---------- top bar ---------- */
#app{min-height:100%;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.8rem 1.2rem;background:var(--stage-deep);color:#fff;
  border-bottom:var(--line) solid var(--ink);
}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.6rem;letter-spacing:.01em;color:#fff;text-shadow:3px 3px 0 var(--ink)}
.logo-mark{width:34px;height:46px;display:inline-block}
.logo-mark svg{width:100%;height:100%}
.transport{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem;position:relative}
.menu{position:relative}
.menu-list{
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;
  background:var(--paper);color:var(--ink);border:var(--line) solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.4rem;display:flex;flex-direction:column;
}
.menu-list button{background:none;border:0;text-align:left;padding:.55rem .7rem;border-radius:8px;font-weight:700}
.menu-list button:hover{background:var(--paper-2)}

/* ---------- stage ---------- */
.stage-wrap{flex:1;display:flex;flex-direction:column;background:var(--stage);position:relative}
.stage{
  position:relative;flex:1;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,255,255,.16), transparent 70%),
    var(--stage);
  overflow:hidden;
}
.stage-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.stage-bg svg{width:100%;height:100%;display:block}
.slots,.floor{position:relative;z-index:1}
.stage-hint{
  position:absolute;z-index:2;top:1.2rem;left:50%;transform:translateX(-50%);
  color:#fff;background:rgba(34,25,58,.55);padding:.5rem 1rem;border-radius:999px;font-size:.9rem;
  pointer-events:none;max-width:90%;text-align:center;
}
.slots{
  display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;
  padding:1rem 1.5rem 0;align-items:end;max-width:1180px;width:100%;margin:0 auto;
}
.slot{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:240px;border-radius:18px;transition:background .15s;
}
.slot .ghost-outline{
  width:56%;aspect-ratio:2/3;border:3px dashed rgba(255,255,255,.35);border-radius:999px;
  margin-bottom:34px;transition:.15s;
}
.slot.is-target .ghost-outline{border-color:#fff;background:rgba(255,255,255,.15);transform:scale(1.05)}
.slot.is-target{background:rgba(255,255,255,.08)}
.slot.is-filled .ghost-outline{display:none}
.char{
  width:92%;max-width:170px;aspect-ratio:2/3;transform-origin:50% 100%;will-change:transform;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
.char svg{width:100%;height:100%;overflow:visible;display:block}
.char.is-queued{opacity:.55;filter:saturate(.4)}
.char.is-muted{opacity:.35}
.slot-ui{display:flex;align-items:center;gap:.35rem;margin:.4rem 0 .6rem;min-height:30px}
.slot-name{color:#fff;font-family:var(--font-display);font-size:.85rem;text-shadow:2px 2px 0 var(--ink);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-btn{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);
  font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:2px 2px 0 var(--ink);
}
.slot-btn.is-on{background:var(--yellow)}
.floor{height:26px;background:var(--floor);border-top:var(--line) solid var(--ink);box-shadow:inset 0 -10px 0 var(--floor-deep)}
.mouth{transform-box:fill-box;transform-origin:center;transition:transform .06s}
.is-hit .mouth{transform:scale(1.35)}
.is-hit .eye-l,.is-hit .eye-r{transform:scaleY(1.15)}

/* drag ghost */
.drag-ghost{position:fixed;left:0;top:0;width:110px;aspect-ratio:2/3;pointer-events:none;z-index:100;transform:translate(-50%,-60%) rotate(-4deg);filter:drop-shadow(4px 6px 0 rgba(34,25,58,.5))}
.drag-ghost svg{width:100%;height:100%;overflow:visible}
body.is-dragging{cursor:grabbing}
body.is-dragging .card{cursor:grabbing}
body.is-dragging{user-select:none;-webkit-user-select:none}
.stage.is-remove-target{box-shadow:inset 0 0 0 6px var(--coral)}

/* ---------- palette ---------- */
.palette{background:var(--paper);border-top:var(--line) solid var(--ink);padding:.8rem 1.2rem 1.2rem}
.palette-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem}
.palette-tip{margin:0;font-size:.85rem;color:var(--ink-soft);font-weight:600}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap}
.tab{
  background:var(--paper-2);border:var(--line) solid transparent;border-radius:999px;padding:.35em .9em;
  font-family:var(--font-display);font-weight:600;
}
.tab.is-active{background:var(--ink);color:#fff}
.tab[data-cat=beat].is-active{background:var(--c-beat);color:var(--ink)}
.tab[data-cat=bass].is-active{background:var(--c-bass);color:#fff}
.tab[data-cat=melody].is-active{background:var(--c-melody);color:var(--ink)}
.tab[data-cat=vocal].is-active{background:var(--c-vocal);color:var(--ink)}
.tab[data-cat=fx].is-active{background:var(--c-fx);color:var(--ink)}
.tab[data-cat=mine].is-active{background:var(--violet);color:#fff}
.palette-empty{grid-column:1/-1;padding:1rem;color:var(--ink-soft);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.7rem;max-height:300px;overflow:auto;padding:4px}
.card{
  position:relative;background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.5rem .4rem .45rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;transition:transform .08s,opacity .15s;
}
.card::before{content:"";position:absolute;left:10px;right:10px;top:-3px;height:6px;border-radius:0 0 6px 6px;background:var(--cat)}
.card:hover{transform:translate(-1px,-2px)}
.card.on-stage{opacity:.45}
.card.on-stage::after{content:"on stage";position:absolute;bottom:38px;left:50%;transform:translateX(-50%) rotate(-8deg);background:var(--ink);color:#fff;font-size:.65rem;padding:.15em .5em;border-radius:999px}
.card .mini{width:64px;height:96px;pointer-events:none;overflow:hidden;border-radius:10px}
.card .mini svg{width:100%;height:100%;overflow:visible;transform:scale(.8);transform-origin:50% 92%}
.card .card-name{font-family:var(--font-display);font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.card .edit{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);
  background:var(--yellow);padding:0;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .1s;
}
.card:hover .edit,.card:focus-within .edit{opacity:1}
@media (hover:none){.card .edit{opacity:1}}
.card-new{
  border-style:dashed;background:var(--paper-2);justify-content:center;cursor:pointer;min-height:150px;
  font-family:var(--font-display);color:var(--ink-soft);
}
.card-new::before{display:none}
.card-new .plus{font-size:2rem;line-height:1}

/* ---------- creator ---------- */
.creator{position:fixed;inset:0;z-index:50;background:var(--paper-2);display:flex;flex-direction:column;overflow:hidden}
.creator-top{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.2rem;
  background:var(--paper);border-bottom:var(--line) solid var(--ink);
}
.creator-title{display:flex;align-items:center;gap:.6rem;flex:1;min-width:240px}
.name-input{font-family:var(--font-display);font-size:1.3rem;width:min(100%,280px)}
.creator-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.creator-body{flex:1;display:grid;grid-template-columns:minmax(260px,340px) 1fr;min-height:0}
.creator-body>*{min-width:0}
.preview-pane{
  background:var(--stage);border-right:var(--line) solid var(--ink);display:flex;flex-direction:column;align-items:center;
  padding:1.2rem 1rem;gap:.8rem;color:#fff;
}
.preview-stage{position:relative;width:100%;flex:1;min-height:260px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255,255,255,.18), transparent 70%);border-radius:18px;overflow:hidden}
.preview-char{width:220px;aspect-ratio:2/3;transform-origin:50% 100%;margin-bottom:26px;will-change:transform}
.preview-char svg{width:100%;height:100%;overflow:visible}
.preview-floor{position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--floor);border-top:var(--line) solid var(--ink);box-shadow:inset 0 -10px 0 var(--floor-deep)}
.preview-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.preview-note{font-size:.8rem;opacity:.85;margin:0;text-align:center;min-height:1.2em}
.editor-pane{display:flex;flex-direction:column;min-height:0}
.editor-tabs{padding:.8rem 1.2rem 0}
.editor-panel{flex:1;overflow:auto;padding:1rem 1.2rem 2rem}
.group{margin-bottom:1.3rem}
.group h3{font-size:1.05rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
.group h3 .mini-btn{font-size:.75rem;padding:.2em .7em;box-shadow:2px 2px 0 var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:.45rem}
.opt{
  background:var(--paper);border:var(--line) solid var(--ink);border-radius:12px;padding:.3rem .35rem .2rem;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:62px;box-shadow:2px 2px 0 var(--ink);
}
.opt.is-on{background:var(--yellow);box-shadow:none;transform:translate(2px,2px)}
.opt .mini{width:40px;height:60px;pointer-events:none;overflow:hidden}
.opt .mini svg{width:100%;height:100%;overflow:visible;transform:scale(.8);transform-origin:50% 92%}
.opt small{font-size:.65rem;font-weight:800;color:var(--ink-soft)}
.opt.txt{min-width:0;padding:.35rem .8rem;font-family:var(--font-display)}
.controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem 1.2rem}
.ctl{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:.6rem;font-size:.85rem}
.ctl input[type=range]{width:100%}
.ctl output{font-size:.75rem;min-width:2.6em;text-align:right;color:var(--ink-soft)}
.ctl.color{grid-template-columns:110px auto 1fr}
.ctl.wide{grid-column:1/-1}
.ctl select{width:100%}
.check{display:inline-flex;align-items:center;gap:.5em}
.check input{width:20px;height:20px;accent-color:var(--pink)}
.hint{font-size:.8rem;color:var(--ink-soft);margin:.2rem 0 .8rem}

/* pattern grid */
.seq-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.seq-tools .btn{font-size:.85rem;padding:.35em .8em;box-shadow:2px 2px 0 var(--ink)}
.seq{display:grid;grid-template-columns:76px 1fr;gap:4px 8px;user-select:none;-webkit-user-select:none;max-width:820px}
.seq-label{font-size:.75rem;font-weight:800;text-align:right;padding-right:.2rem;align-self:center;color:var(--ink-soft);white-space:nowrap}
.seq-row{display:grid;gap:3px;touch-action:none}
.seq-row.s16{grid-template-columns:repeat(16,1fr)}
.seq-row.s32{grid-template-columns:repeat(32,1fr)}
.cell{
  aspect-ratio:1;border-radius:6px;background:var(--paper);border:2px solid #CFC8EE;cursor:pointer;min-width:0;padding:0;
}
.cell.beat-4{border-color:#B7ACE8}
.cell.on{background:var(--pink);border-color:var(--ink)}
.cell.acc{background:var(--ink);border-color:var(--ink)}
.cell.play{box-shadow:inset 0 0 0 3px var(--teal)}
.seq-head{display:grid;gap:3px;margin-bottom:2px}
.seq-head.s16{grid-template-columns:repeat(16,1fr)}
.seq-head.s32{grid-template-columns:repeat(32,1fr)}
.seq-head span{font-size:.6rem;text-align:center;color:var(--ink-soft)}
.seq-legend{font-size:.75rem;color:var(--ink-soft);margin-top:.5rem}
.seq-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin:0 3px 0 8px;border:2px solid var(--ink)}

/* players & play together */
.players{position:absolute;left:.6rem;top:.6rem;z-index:2;display:flex;flex-direction:column;gap:.3rem;pointer-events:none}
.player{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.94);border:2px solid var(--ink);border-radius:999px;padding:.15rem .7rem .15rem .25rem;font-size:.8rem;box-shadow:2px 2px 0 var(--ink);color:var(--ink)}
.player .mini{width:26px;height:36px;display:inline-block}
.player .mini svg{width:100%;height:100%;overflow:visible}
.player-name{font-family:var(--font-display)}
.player-act{color:var(--ink-soft);font-weight:600}
.player.is-me{opacity:.75}
.editing-badge{position:absolute;top:-9px;left:6px;background:var(--pink);color:#fff;font-size:.62rem;padding:.1em .5em;border-radius:999px;border:2px solid var(--ink);white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.world-code{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.06em;background:var(--paper-2);border:var(--line) solid var(--ink);border-radius:14px;padding:.4rem 1rem;text-align:center;margin:.4rem 0 .8rem}
.qr{width:190px;margin:.5rem auto}
.qr svg{width:100%;height:auto;display:block}
.link{font-size:.8rem;word-break:break-all;text-align:center}
.mp-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.mp-field input{font-size:16px}
.mp-choice{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.mp-join{display:flex;gap:.4rem;margin:0}
.mp-join input{width:11em;font-family:var(--font-display);text-transform:uppercase;font-size:16px}
.sound-banner{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:150;background:var(--yellow);border:var(--line) solid var(--ink);border-radius:999px;padding:.7rem 1.3rem;font-family:var(--font-display);font-size:1.05rem;box-shadow:var(--shadow);color:var(--ink)}

/* button icons (tiny rendered sprunkis and simple shapes instead of emoji) */
.bicon{display:inline-flex;align-items:flex-end;justify-content:center;width:1.15em;height:1.55em;margin:-.35em .15em -.3em -.2em;vertical-align:middle}
.bicon svg{width:100%;height:100%;overflow:visible;display:block}
.bicon.wide{width:2em}
.ico{width:1em;height:1em;vertical-align:-.15em;display:inline-block}
.blackout{position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none;transition:opacity .25s}
.blackout.is-on{opacity:1;pointer-events:auto}
.slot-btn svg{width:14px;height:14px;display:block}
.mp-players{display:flex;flex-direction:column;gap:.35rem;margin:.6rem 0}
.mp-player{display:flex;align-items:center;gap:.5rem;background:var(--paper-2);border-radius:999px;padding:.25rem .5rem .25rem .3rem}
.mp-player .mini{width:26px;height:36px}.mp-player .mini svg{width:100%;height:100%;overflow:visible}
.mp-player .grow{flex:1;font-family:var(--font-display)}
.mp-player .mini-btn{font-size:.75rem;padding:.2em .7em;box-shadow:2px 2px 0 var(--ink)}
.mp-host{background:var(--paper-2);border-radius:12px;padding:.6rem .8rem;margin:.6rem 0;font-size:.9rem}

/* emoji reactions */
.emoji-wrap{position:absolute;right:.7rem;bottom:38px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.btn-emoji{font-size:1.5rem;padding:.25em .45em;background:var(--paper);color:var(--ink);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji-tray{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem;background:var(--paper);border:var(--line) solid var(--ink);border-radius:16px;padding:.4rem;box-shadow:var(--shadow);max-width:min(320px,calc(100vw - 2rem))}
.emoji{background:none;border:0;font-size:1.7rem;line-height:1;padding:.2rem;border-radius:10px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji:hover,.emoji:active{background:var(--paper-2);transform:scale(1.15)}
.reaction{position:absolute;bottom:60px;z-index:4;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:react 2.6s cubic-bezier(.2,.7,.3,1) forwards;transform:translateX(-50%)}
.reaction-emoji{font-size:3.4rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;animation:reactPop .5s cubic-bezier(.3,1.6,.5,1)}
.reaction-name{font-family:var(--font-display);font-size:.8rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.05rem .5rem;margin-top:.2rem;white-space:nowrap}
.reaction.is-mine .reaction-name{background:var(--yellow)}
@keyframes react{0%{transform:translate(-50%,0)}70%{opacity:1}100%{transform:translate(calc(-50% + var(--drift,0px)),-260px);opacity:0}}
@keyframes reactPop{0%{transform:scale(.2)}100%{transform:scale(1)}}
@media (max-width:700px){.emoji-wrap{right:.4rem;bottom:34px}.btn-emoji{font-size:1.3rem}.emoji-tray{grid-template-columns:repeat(6,1fr)}.emoji{font-size:1.5rem}.reaction-emoji{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){.reaction{animation-duration:1.2s}.reaction-emoji{animation:none}}

/* background chooser */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.bg-opt{border:var(--line) solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper);padding:0;box-shadow:2px 2px 0 var(--ink);display:flex;flex-direction:column;cursor:pointer}
.bg-opt .thumb{aspect-ratio:16/8;overflow:hidden;background:#333}
.bg-opt .thumb svg{width:100%;height:100%;display:block}
.bg-opt span{font-family:var(--font-display);font-size:.85rem;padding:.3rem;text-align:center}
.bg-opt.is-on{outline:4px solid var(--pink);outline-offset:-4px}
.bg-color{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;font-weight:700}
@media (max-width:600px){.bg-grid{grid-template-columns:repeat(2,1fr)}}

/* about section (search-friendly text below the game) */
.about{background:var(--paper-2);border-top:var(--line) solid var(--ink);padding:1.6rem 1.2rem 2.4rem}
.about-inner{max-width:760px;margin:0 auto;font-weight:600;line-height:1.55}
.about h2{font-size:1.7rem;margin-bottom:.6rem}
.about h3{font-size:1.15rem;margin:1.4rem 0 .4rem}
.about p{margin:.4rem 0}
.faq details{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:.5rem .9rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600}
.about-foot{margin-top:1.6rem;font-size:.85rem}
.about-links a{margin:0 .1rem}
.ad-slot{max-width:970px;margin:.6rem auto;padding:0 .6rem;min-height:90px}
body.is-horror .about{background:#1B0A12;color:#F3E4E8}
body.is-horror .faq details{background:#2A1420;border-color:#000}
body.is-horror .about a{color:#FF8AD8}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(34,25,58,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-box{background:var(--paper);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:1.4rem;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.modal-box h2{font-size:1.4rem;margin-bottom:.6rem}
.modal-box p{margin:.4rem 0;font-weight:600}
.modal-box ul{padding-left:1.2rem;font-weight:600}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;background:var(--ink);color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-family:var(--font-display);box-shadow:var(--shadow);border:var(--line) solid #fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .creator-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .preview-pane{border-right:0;border-bottom:var(--line) solid var(--ink);padding:.8rem}
  .preview-stage{min-height:200px}
  .preview-char{width:120px}
  .ctl{grid-template-columns:90px 1fr auto}
}
@media (max-width:700px){
  .topbar{gap:.4rem .6rem;padding:calc(.5rem + env(safe-area-inset-top)) .6rem .35rem;position:sticky;top:0;z-index:20}
  .transport{order:1;gap:.5rem}
  .topbar-actions{order:2;margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:.4rem;padding:.2rem 0 .35rem;scrollbar-width:none}
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-actions .btn{flex:0 0 auto;font-size:.85rem;padding:.42em .8em}
  .menu-list{position:fixed;left:.6rem;right:.6rem;top:auto;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:60;min-width:0}
  .slots{grid-template-columns:repeat(4,1fr);gap:.4rem .3rem;padding:.6rem .5rem 0;justify-items:center}
  .slot{min-height:150px;width:100%}
  .slot .ghost-outline{margin-bottom:24px}
  .slot-btn{width:32px;height:32px;font-size:.9rem}
  .slot-ui{margin:.3rem 0 .4rem;gap:.5rem}
  .char{max-width:110px}
  .players{left:.4rem;top:.4rem}
  .player{font-size:.72rem}
  .player-act{display:none}
  .stage-hint{top:auto;bottom:.5rem;font-size:.75rem}
  .palette{padding:.5rem .6rem calc(.8rem + env(safe-area-inset-bottom))}
  .palette-tip{display:none}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:0 0 auto}
  .cards{display:flex;gap:.5rem;overflow-x:auto;max-height:none;padding:10px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 86px;scroll-snap-align:start}
  .card-new{flex:0 0 86px;min-height:120px}
  .card .mini{width:50px;height:76px}
  .card .edit{opacity:1;width:30px;height:30px}
  .palette-empty{flex:0 0 100%}
  .creator-top{padding:.5rem .6rem;gap:.5rem}
  .creator-title{min-width:0;flex:1 0 100%;order:3}
  .creator-actions{margin-left:auto;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
  .creator-actions .btn{font-size:.8rem;padding:.4em .7em}
  .name-input{font-size:16px;width:100%}
  .preview-pane{padding:.5rem .6rem .6rem;flex-direction:column;align-items:stretch;gap:.4rem}
  .preview-stage{min-height:150px;height:150px;flex:none;width:100%}
  .preview-char{width:88px;margin-bottom:20px}
  .preview-controls{flex-direction:row;justify-content:center;gap:.6rem}
  .preview-note{display:none}
  .editor-tabs{overflow-x:auto;flex-wrap:nowrap;padding:.5rem .6rem 0;scrollbar-width:none}
  .editor-panel{padding:.7rem .6rem 3rem;overflow-x:hidden}
  .opts{gap:.35rem}
  .ctl.color{grid-template-columns:96px auto 1fr}
  .controls{grid-template-columns:1fr}
  .ctl{grid-template-columns:96px 1fr auto}
  .seq{grid-template-columns:48px 1fr;overflow-x:auto;padding-bottom:6px}
  .seq-label{font-size:.62rem}
  .seq-row.s32,.seq-head.s32{min-width:620px}
  .cell{min-width:17px}
  .opt{min-width:54px}
  .opt .mini{width:32px;height:50px}
  .modal-box{padding:1rem}
  .world-code{font-size:1.7rem}
  .logo{font-size:1.25rem}
  .logo-mark{width:26px;height:36px}
  .field-range{display:none}
  .btn-play .lbl{display:none}
  .btn-rec{font-size:.85rem}
  .slots{gap:.3rem;padding:.6rem .5rem 0}
  .slot{min-height:160px}
  .slot-name{display:none}
  .stage{min-height:240px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .card .mini{width:52px;height:78px}
  .creator-top{padding:.6rem .8rem}
  .name-input{font-size:1.05rem}
  .creator-actions .btn{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .btn,.card{transition:none}
}