/* Reference-led welcome and full-viewport multiplayer canvas. */
body:has(#landing:not([hidden])) .site-head { display:none }
#landing { padding:.5rem 0 0; width:min(100%,29rem) }
.welcome { min-height:0; height:calc(100svh - 4.1rem - env(safe-area-inset-bottom)); padding:clamp(.55rem,1.8svh,1rem) .65rem .15rem; gap:0; background:#090b20; border-color:#9f84c183; }
.welcome-logo { width:min(54%,13rem); max-height:13svh; object-fit:contain; mix-blend-mode:screen; flex:none }
.welcome h1 { font:500 clamp(1.65rem,8vw,2.45rem)/1.05 system-ui,sans-serif; letter-spacing:.23em; margin:.05em 0 0; padding-left:.23em }
.welcome-tagline { margin:.25rem 0 .5rem; color:#eeeafa; font-size:clamp(.8rem,3vw,1rem) }
.welcome-verse { margin:.4rem 0 .15rem; font-size:clamp(.86rem,3.7vw,1.18rem); line-height:1.28 }
.welcome-art { flex:1; min-height:0; max-height:none; width:calc(100% + 1.3rem); border:0; margin:0 -.65rem; border-radius:0; box-shadow:none; object-fit:cover; mask-image:linear-gradient(transparent,black 15%,black 90%,transparent); }
.welcome-actions { flex:none; width:79%; gap:0; z-index:1; margin-top:-.3rem }
.welcome-actions #together { min-height:44px; background:linear-gradient(#c95eff,#7524c7 56%,#3c127b); box-shadow:0 0 16px #b15aff,inset 0 0 9px #f5d0ff }
#welcome-signin { min-height:35px; border:0; background:none; padding:.3rem }
.welcome .landing-links { margin:0; flex:none; justify-content:center }
.welcome .landing-links button { min-height:29px; padding:.15rem .4rem; font-size:.76rem }
.lite-roadmap { margin-top:.35rem }
.lite-roadmap summary { min-height:44px; padding:.45rem .7rem }
body.in-game { overflow:hidden }
body.in-game .site-head,body.in-game .room-head { display:none }
body.in-game #game, #game:fullscreen:not(.is-ended) {
  position:fixed; inset:0; z-index:5; width:100%; height:100dvh; display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top) max(.5rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.5rem,env(safe-area-inset-left));
  background:#080c1c; overflow:hidden;
}
.drawing-head { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; text-align:center; padding:.12rem 0 }
.drawing-head h2, .drawing-head #solo-title { font-size:1rem; margin:0; letter-spacing:normal }
.drawing-head strong { font-size:.79rem; font-weight:500; color:#e2d8f7 }
.drawing-head button,.drawing-actions button { background:transparent; border:0; padding:0 .18rem }
#game .clock-strip { display:flex; justify-content:space-between; gap:.5rem; padding:.28rem .35rem; border:0 }
#game .clock-strip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem }
#clock-you::before,#clock-them::before { content:""; display:inline-block; width:.55rem; height:.55rem; margin-right:.35rem; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor }
body.in-game #game .board { grid-column:auto; grid-row:auto; position:relative; height:auto; min-height:0; width:100%; margin:0; border:0; border-radius:.65rem; box-shadow:none }
.brush-rail { position:absolute; top:9%; left:0; display:grid; background:#13182de8; border-radius:0 .7rem .7rem 0; border:1px solid #4c5378; overflow:hidden }
.brush-rail button { min-height:38px; width:39px; padding:0; border:0; border-radius:0; background:none; font-size:1.1rem }
.brush-rail button[aria-pressed=true] { color:#91ecff; background:#254068 }
body.in-game #game .game-controls { grid-column:auto; grid-row:auto; margin:0; padding:.2rem 0 .1rem; border:0; background:transparent; }
#game .swatches { display:flex; justify-content:center; gap:clamp(.35rem,2.1vw,.8rem); }
#game .swatches button { height:34px; min-height:34px; width:34px; border-radius:50%; border:1px solid #ffffff75; box-shadow:0 0 10px color-mix(in srgb,var(--ink),transparent 57%) }
#game .swatches button[aria-pressed=true] { outline:2px solid #fff; outline-offset:2px }
.drawing-actions { display:grid; grid-template-columns:repeat(4,minmax(31px,1fr)) repeat(3,minmax(41px,1.25fr)); align-items:center; gap:.12rem }
.drawing-actions button { min-height:42px; min-width:0; font-size:.83rem; }
.drawing-actions :is(#undo,#redo,#layers) { font-size:1.2rem }
.drawing-actions #full svg { display:block }
.drawing-actions #done { border:1px solid #d9acff; border-radius:.85rem; background:linear-gradient(#9854de,#4b249e); }
.turn-status { min-height:1.15rem; text-align:center; justify-content:center; font-size:.7rem; }
.effects { position:absolute; inset:13% 5% auto; display:flex; justify-content:center; gap:.75rem; pointer-events:none }
.effects span { font-size:1.7rem }
.gift-float,.reaction-float { display:inline-block; animation:social-rise 2.2s ease-out both; filter:drop-shadow(0 0 9px #bc83ff) }
@keyframes social-rise { 0%{opacity:0;transform:translateY(12px) scale(.7)} 18%{opacity:1;transform:scale(1.1)} 65%{opacity:1} 100%{opacity:0;transform:translateY(-20px)} }
.chaos-chip { position:absolute; bottom:.3rem; right:.3rem; display:flex; align-items:center; gap:.25rem; border-radius:.7rem; padding:.2rem; background:#161831; font-size:.7rem }
.chaos-chip button { min-height:36px; padding:.25rem }
.drawing-dialog { width:min(92vw,25rem); max-height:85dvh; background:#151430; border-color:#7b68b0 }
.drawing-dialog form { text-align:right; margin:0 0 .45rem }
#social-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem }
#social-choices label { grid-column:1/-1 }
.artist-controls label { display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.is-ended .brush-rail,.is-ended .game-controls { display:none }
@media (orientation:landscape) and (max-height:520px) {
  body.in-game #game { grid-template-columns:1fr; }
  .brush-rail button { min-height:30px }
}
@media (prefers-reduced-motion:reduce) {
  .gift-float,.reaction-float { animation:none }
}
.replay-board { aspect-ratio:.62; width:min(100%,42vh,22rem) }

/* Both play modes use one edge-to-edge workspace and the same overlays. */
html:has(body:is(.in-solo,.in-game)), body:is(.in-solo,.in-game) {
  overflow:hidden;
  overscroll-behavior:none;
}
body.in-solo .site-head { display:none }
body.in-solo #solo, body.in-game #game {
  --top:env(safe-area-inset-top,0px);
  --bottom:env(safe-area-inset-bottom,0px);
  --left:env(safe-area-inset-left,0px);
  --right:env(safe-area-inset-right,0px);
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  display:block;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#13172a;
  z-index:5;
}
body.in-solo #solo > .board, body.in-game #game:not(.is-ended) > .board {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  background:var(--canvas-surround,#13172a);
  box-shadow:none;
}
.drawing-workspace > .board:has(canvas[data-environment=paper]) { --canvas-surround:#f7f1e0 }
.drawing-workspace canvas { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
.drawing-workspace .drawing-head,
.drawing-workspace .clock-strip,
.drawing-workspace .game-controls { position:absolute; z-index:2; }
.drawing-workspace .drawing-head {
  top:var(--top);
  left:var(--left);
  right:var(--right);
  color:#fff;
  background:linear-gradient(#080c1cf0,#080c1c9e 76%,transparent);
  min-height:48px;
  pointer-events:none;
}
.drawing-workspace .drawing-head button { pointer-events:auto; min-width:44px }
.drawing-workspace .clock-strip {
  top:calc(var(--top) + 47px);
  left:var(--left);
  right:var(--right);
  background:#080c1ca6;
  pointer-events:none;
}
.drawing-workspace .brush-rail {
  top:clamp(78px,17%,150px);
  left:var(--left);
  z-index:1;
}
.drawing-workspace .brush-rail button { width:44px; min-height:44px; }
body.in-solo #solo > .game-controls, body.in-game #game:not(.is-ended) > .game-controls {
  left:var(--left);
  right:var(--right);
  bottom:var(--bottom);
  padding:.25rem .3rem .08rem;
  margin:0 auto;
  max-width:34rem;
  border:0;
  border-radius:.8rem .8rem 0 0;
  background:linear-gradient(transparent,#080c1ce8 42%);
  pointer-events:none;
}
.drawing-workspace .game-controls button { pointer-events:auto }
.drawing-workspace .swatches { display:flex; justify-content:center; gap:clamp(.22rem,1.7vw,.65rem) }
.drawing-workspace .swatches button,
#game .swatches button {
  width:44px;
  height:44px;
  min-height:44px;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle,var(--ink) 0 48%,transparent 52%);
  box-shadow:none;
}
.drawing-workspace .swatches button[aria-pressed=true], #game .swatches button[aria-pressed=true] {
  outline:1px solid #fff;
  outline-offset:-3px;
  filter:drop-shadow(0 0 5px var(--ink));
}
.drawing-workspace .drawing-actions button { min-height:44px; }
.drawing-workspace .drawing-actions { grid-template-columns:repeat(6,minmax(0,1fr)); }
.drawing-workspace .solo-actions { grid-template-columns:44px 44px minmax(84px,auto); justify-content:center; }
.drawing-workspace .turn-status { color:#e7dcf8 }
.drawing-workspace .chaos-chip { bottom:calc(var(--bottom) + 114px); right:calc(var(--right) + .3rem) }
.drawing-workspace.is-ended .drawing-head, .drawing-workspace.is-ended .clock-strip { position:static; }
@media (orientation:landscape) and (max-height:520px) {
  .drawing-workspace .brush-rail { top:calc(var(--top) + 54px) }
  .drawing-workspace .brush-rail button { min-height:38px }
}


.drawing-dialog { overflow:auto; overscroll-behavior:contain; box-sizing:border-box; }
#session-dialog {
  width:min(94vw,25rem);
  max-height:min(72dvh, calc(100dvh - 5.5rem));
  overflow-y:auto;
  padding-bottom:1rem;
}
#session-dialog form { position:sticky; top:0; z-index:1; background:#151430; padding-bottom:.2rem; }
@media (max-width:420px) {
  #session-dialog { max-height:min(70dvh, calc(100dvh - 6.25rem)); }
  #session-dialog label, #session-dialog button { min-height:40px; }
  #session-dialog details { margin-top:.35rem; }
}
.brush-preview { width:100%; height:70px; border-radius:.6rem; background:#13172a; margin:.4rem 0; }
.artist-presets,.artist-saved { display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0; }
.artist-presets button { flex:1; min-height:44px; font-size:.78rem; }
.artist-presets [data-preset=neon] { border-color:#67d8ff; box-shadow:inset 0 0 11px #53baff35 }
.artist-presets [data-preset=marker] { border-color:#d589ff; }
.artist-sliders { display:grid; gap:.28rem; padding:.3rem 0; }
.artist-sliders label,.artist-color { display:flex; align-items:center; justify-content:space-between; gap:.35rem; font-size:.83rem }
.artist-sliders input { width:52%; accent-color:#a993ff }
.artist-saved button { width:44px; padding:0; border-radius:50%; background:radial-gradient(circle,var(--saved) 0 45%,transparent 50%) }
.artist-note { color:#d5cce8; font-size:.73rem; }


/* Non-modal artist panels leave the surrounding artwork available for drawing. */
.drawing-workspace .brush-rail {
  top:calc(var(--top) + 77px);
  z-index:3;
  max-height:calc(100% - var(--top) - var(--bottom) - 230px);
  overflow:auto;
  scrollbar-width:thin;
}
.drawing-workspace .brush-rail button {
  display:grid;
  place-content:center;
  gap:1px;
  width:58px;
  min-height:44px;
  line-height:1;
}
.brush-rail button small { font-size:.59rem; }
.brush-rail button[aria-expanded=true] { background:#27345f; }
.brush-rail button[aria-disabled=true] { opacity:.55; }
.artist-popout {
  position:absolute;
  z-index:4;
  top:calc(var(--top) + 77px);
  left:calc(var(--left) + 64px);
  width:min(20rem,calc(100% - var(--left) - var(--right) - 73px));
  max-height:calc(100% - var(--top) - var(--bottom) - 204px);
  padding:.55rem .7rem;
  overflow:auto;
  overscroll-behavior:contain;
  background:#141631f5;
  border:1px solid #7b68b0;
  border-radius:.8rem;
  box-shadow:0 5px 24px #080717b0;
  color:#f1edff;
}
.artist-popout[hidden],.artist-popout section[hidden] { display:none }
.artist-popout header { display:flex; align-items:center; justify-content:space-between; position:sticky; top:-.55rem; z-index:1; background:#141631; }
.artist-popout button,.artist-popout select { min-height:44px; }
.artist-popout [data-tool-close] { min-width:44px; padding:0; font-size:1.25rem; }
.artist-popout section > label { min-height:44px; }
.artist-popout .artist-sliders label { min-height:34px; }
.artist-popout .artist-sliders input { width:45%; min-width:45px; }
.artist-popout output { width:2.4em; text-align:right; font-variant-numeric:tabular-nums; }
.artist-popout .preset-sample { width:100%; height:27px; display:block; margin-bottom:.15rem; pointer-events:none; }
.artist-popout [data-preset] { display:block; min-width:64px; padding:.2rem; }
.artist-popout [data-tool-section="Tool tour"] p { font-size:.86rem; }

/* Creative tools and event cards share the Phoenix palette and safe-area layout. */
.creative-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem; }
.creative-grid button { padding:.25rem .4rem; font-size:.79rem; }
.creative-grid button[aria-pressed=true], .brush-rail button[aria-pressed=true] { background:#244569; color:#a6f5ff; }
.placement-bar {
  position:absolute; z-index:4; bottom:calc(var(--bottom) + 122px); right:calc(var(--right) + 8px);
  left:calc(var(--left) + 66px); max-width:20rem; padding:.45rem; max-height:52dvh;
  overflow:auto; border:1px solid #6b62a5; border-radius:12px; background:#151631f2;
}
.placement-bar[hidden], .chaos-banner[hidden] { display:none; }
.placement-bar button,.placement-bar summary { min-height:44px; }
.placement-bar summary { display:list-item; align-content:center; padding:0 .3rem; }
.placement-sliders { display:grid; gap:.2rem; }
.placement-sliders label { display:flex; min-height:32px; align-items:center; justify-content:space-between; gap:.4rem; font-size:.8rem; }
.placement-sliders input[type=range] { width:46%; accent-color:#b798ff; }
.snap-status { position:absolute; z-index:2; right:calc(var(--right) + 12px); bottom:calc(var(--bottom) + 114px); color:#83fce6; background:#101b31e8; padding:.22rem .4rem; border-radius:.45rem; pointer-events:none; font-size:.78rem; }
.snap-status:empty { display:none; }
.artist-popout.social-tray { top:auto; bottom:calc(var(--bottom) + 116px); max-height:48dvh; }
#social-choices { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; }
#social-choices.reaction-options { grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); }
#social-choices button { padding:.2rem; text-transform:capitalize; font-size:.75rem; }
#social-choices.reaction-options button { font-size:1.25rem; }
.gift-count { display:grid; gap:.3rem; padding:.35rem; color:#d7c9ff; }
.gift-float[data-gift] { animation:gift-bloom 2.2s ease-out both; }
@keyframes gift-bloom { 0%{opacity:0;transform:scale(.45) rotate(-14deg)} 22%{opacity:1;transform:scale(1.25) rotate(8deg)} 72%{opacity:1} 100%{opacity:0;transform:translateY(-34px) scale(.9)} }
.chaos-chip {
  z-index:2; width:min(16rem,calc(100% - 82px)); display:grid; gap:.3rem; text-align:center;
  padding:.4rem; border:1px solid #7873be; background:linear-gradient(135deg,#1a2247,#331344);
}
.chaos-chip[hidden] { display:none; }
.chaos-chip.invited { border-color:#5ef4ec; animation:chaos-pulse 1.4s ease-in-out infinite alternate; }
.chaos-chip button { min-height:44px; padding:.2rem .6rem; }
.chaos-chip button+button { margin-left:.3rem; }
.chaos-banner {
  position:absolute; z-index:2; top:calc(var(--top) + 80px); right:calc(var(--right) + 10px);
  border:1px solid #62dfef; border-radius:999px; background:#11142eea; padding:.35rem .7rem;
  color:#e7fbff; font-weight:700; font-variant-numeric:tabular-nums; pointer-events:none;
}
.chaos-banner[data-stage=countdown],.chaos-banner[data-stage=wrap] { animation:chaos-pulse .6s ease-in-out infinite alternate; }
.chaos-energy > .board::after {
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  border:2px solid transparent; border-image:linear-gradient(125deg,#33f2ff,#5146b5,#ff54c2) 1;
  box-shadow:inset 0 0 24px #a652ed88; animation:chaos-pulse 1s ease-in-out infinite alternate;
}
@keyframes chaos-pulse { from { filter:brightness(1); } to { filter:brightness(1.36); } }
@media (prefers-reduced-motion:reduce) {
  .gift-float[data-gift],.chaos-chip.invited,.chaos-banner,.chaos-energy > .board::after { animation:none; }
}

/* One reserved gameplay region takes precedence over transient tool feedback. */
.drawing-workspace .snap-status {
  top:calc(var(--top) + 56px); bottom:auto; left:calc(var(--left) + 70px);
  right:calc(var(--right) + 10px); width:fit-content; max-width:calc(100% - 84px);
  z-index:2; margin:0; overflow-wrap:anywhere;
}
#game .snap-status { top:calc(var(--top) + 80px); }
.tool-pulse { animation:tool-confirm .2s ease-out; }
@keyframes tool-confirm { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
.gameplay-priority .snap-status,.gameplay-priority .effects { visibility:hidden; }
.priority-gameplay #notice { visibility:hidden; }
#game .chaos-chip {
  z-index:30; top:calc(var(--top) + 80px); right:calc(var(--right) + 8px);
  left:auto; bottom:auto; width:min(17rem,calc(100% - var(--left) - var(--right) - 78px));
  max-height:calc(100% - var(--top) - var(--bottom) - 200px);
  overflow:auto; box-sizing:border-box; overflow-wrap:anywhere;
}
#game .chaos-banner {
  z-index:30; top:calc(var(--top) + 80px); max-width:calc(100% - var(--left) - var(--right) - 80px);
  box-sizing:border-box; font-size:.83rem; overflow-wrap:anywhere;
}
#game { container: drawing / inline-size; }
#game.chaos-offer .artist-popout:not(.social-tray) {
  top:calc(var(--top) + 192px);
  max-height:calc(100% - var(--top) - var(--bottom) - 320px);
}
#game.chaos-offer :is(.social-tray,.placement-bar) {
  max-height:calc(100% - var(--top) - var(--bottom) - 308px);
}
@container drawing (min-width:720px) {
  #game.chaos-offer .artist-popout:not(.social-tray) {
    top:calc(var(--top) + 77px);
    max-height:calc(100% - var(--top) - var(--bottom) - 204px);
  }
  #game.chaos-offer :is(.social-tray,.placement-bar) { max-height:48dvh; }
}
.artist-popout,.placement-bar {
  background:linear-gradient(145deg,#231a3ce8,#101f3ce3);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-color:#9984c581; color:#f6f1ff;
  box-sizing:border-box;
}
.artist-popout header {
  background:#201a39e8;
  border-radius:.45rem; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.artist-popout { overflow-x:hidden; }
.artist-popout label { flex-wrap:wrap; min-width:0; }
.artist-popout :is(select,input,button) { box-sizing:border-box; max-width:100%; min-width:0; }
.artist-popout select { width:min(100%,12rem); font-size:.85rem; }
.artist-popout :is(button,p,summary) { white-space:normal; overflow-wrap:anywhere; }
.grid-background { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; padding:.4rem 0; margin:0; min-width:0; border:0; }
.grid-background legend { font-size:.86rem; margin-bottom:.3rem; }
.grid-background button { width:100%; padding:.35rem; min-height:44px; line-height:1.25; font-size:.8rem; }
.grid-background button[aria-pressed=true] { background:#294569; border-color:#81dbf8; color:#effdff; }
.context-help { margin-top:.5rem; color:#d8d3ee; font-size:.8rem; }
.context-help summary { min-height:36px; align-content:center; cursor:pointer; }
.context-help p { line-height:1.5; }
.node-actions { display:flex; gap:.35rem; margin-top:.3rem; }
.node-actions[hidden] { display:none; }
.node-actions button { flex:1; font-size:.78rem; }
@media (prefers-reduced-motion:reduce) { .tool-pulse { animation:none; } }
.gameplay-priority .effects { visibility:visible; inset:40% 12% auto; }
.gameplay-priority:has(.artist-popout:not([hidden])) .effects { visibility:hidden; }
body:is(.in-solo,.in-game) #notice:not(:empty) {
  bottom:calc(env(safe-area-inset-bottom,0px) + 132px);
  max-height:20dvh; overflow:auto; box-sizing:border-box; overflow-wrap:anywhere;
}

[data-tool-section="Shapes"] .creative-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:min(39dvh,285px); overflow:auto; overscroll-behavior:contain; }
[data-tool-section="Shapes"] .creative-grid button { display:grid; place-content:center; min-height:54px; font-size:.72rem; }
.shape-icon { display:block; font-size:1.3rem; line-height:1.15; color:#a9ddff; }
[data-snap-settings] > label { display:flex; gap:.4rem; min-height:36px; align-items:center; }
:is(.artist-sliders,.placement-sliders) label[hidden] { display:none; }
.placement-sliders output { min-width:2.6em; text-align:right; }
.placement-bar details[open] { margin-bottom:.35rem; }
.placement-bar details { max-height:min(32dvh,240px); overflow:auto; overscroll-behavior:contain; }
.placement-bar { overscroll-behavior:contain; }

.drawing-workspace:has(.artist-popout:not([hidden])) .placement-bar,
.drawing-workspace:has(.artist-popout:not([hidden])) .snap-status { visibility:hidden; }

.drawing-workspace .particle-overlay, .replay-board .particle-overlay { position:absolute; inset:0; pointer-events:none; }
.particle-overlay[hidden] { display:none; }
.particle-settings { margin:.55rem 0; padding:.5rem; min-width:0; border:1px solid #9984c581; border-radius:.55rem; }
.particle-settings[hidden],.particle-settings [hidden] { display:none; }
.particle-settings > label { display:flex; align-items:center; justify-content:space-between; gap:.35rem; }

.placement-sliders select { max-width:57%; min-width:0; min-height:40px; }
[data-living-packs] h4 { margin:.65rem 0 .3rem; }
[data-living-edit] { margin:.55rem 0; }
[data-living-edit] summary { min-height:44px; align-content:center; cursor:pointer; }
[data-living-list] { display:grid; gap:.3rem; }

.dust-controls > label { display:flex; align-items:center; justify-content:space-between; gap:.3rem; min-height:38px; }
.dust-controls > label:has(input) { justify-content:flex-start; }

.pen-palette,[data-gift-swatches] { display:flex; gap:.35rem; flex-wrap:wrap; margin:.4rem 0; }
.pen-palette[hidden],.gift-palette[hidden] { display:none; }
.gift-palette { min-width:0; border:1px solid #9984c581; border-radius:.5rem; padding:.3rem; }
[data-gift-swatches] span { width:20px; height:20px; border-radius:50%; border:1px solid #fff9; }
#glitter-targets { position:absolute; inset:0; pointer-events:none; }
#glitter-targets button { position:absolute; pointer-events:auto; transform:translate(-50%,-50%); min-height:40px;
  padding:.25rem .55rem; z-index:2; border:1px solid #ffd591; background:#35244eea; color:#fff4d3; font-size:.73rem; }

.pet-release {
  position:absolute; z-index:2; min-height:44px; transform:translate(-50%,-50%);
  padding:.25rem .65rem; color:#fff1d2; background:#43264df5; border:1px solid #ffd591;
}
.pet-release[hidden] { display:none; }
#pet-settings { margin:.4rem 0; padding:.4rem; border:1px solid #7971a7; border-radius:.5rem; }
#pet-settings summary { cursor:pointer; padding:.4rem; }
#pet-settings label { display:flex; align-items:center; gap:.45rem; margin:.5rem .15rem; }
#pet-idle { width:4.7rem; }

#pet-settings select { min-width:0; max-width:100%; }
#glitter-targets button[aria-label="Open Mystery Pet Gift"] { max-width:120px; white-space:normal; }
.replay-pets { display:inline-flex; align-items:center; gap:.35rem; }

#restoration-node {
  position:absolute; z-index:3; transform:translate(-50%,-50%);
  width:44px; height:44px; padding:0; border-radius:50%; font-size:1.25rem;
  color:#fff2ff; background:#301851; border:1px solid #e4a7fc;
  box-shadow:0 0 14px #c56bff9c; touch-action:manipulation;
}
#restoration-node[hidden] { display:none; }
#restoration-dialog h2 { font-size:1.2rem; }