/* The Custom tone's panel (custom-tone.js). Same language as the store: near-black glass, tight type,
   one accent, the long soft curve. Worlds repaint it through the --px variables. */

#topbar #tone-btn { transition: color .4s var(--px-ease), border-color .4s var(--px-ease), box-shadow .4s var(--px-ease); }
#topbar #tone-btn.is-custom { color: var(--px-accent); border-color: color-mix(in srgb, var(--px-accent) 55%, transparent); box-shadow: 0 0 1.4vw -.4vw var(--px-glow); }

.ct { position: absolute; z-index: 5; right: 28px; top: calc(100% - 4px); width: max(380px, 28vw); max-width: calc(100vw - 32px); box-sizing: border-box; padding: max(18px, 1.3vw);
  display: flex; flex-direction: column; gap: max(12px, .9vw); font-family: "Quicksand", var(--body); color: var(--px-text);
  border-radius: max(18px, 1.4vw); background: rgba(16,12,15,.82); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--px-edge), inset 0 1px 0 var(--px-edge-hi), 0 2.4vw 5vw -1.6vw rgba(0,0,0,.95);
  transform-origin: 82% 0; animation: ct-in .62s var(--px-ease) both; }
.ct.hidden { display: none; }
@keyframes ct-in { from { opacity: 0; transform: translateY(-.7vw) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.ct.nudge { animation: ct-shake .46s var(--px-ease); }
@keyframes ct-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 88% { transform: translateX(1px); } }

.ct-title { font-size: max(17px, 1.3vw); font-weight: 600; letter-spacing: -.022em; line-height: 1.15; cursor: text; }

/* the box: a well in the glass, and it lights up when you're in it */
.ct-field { position: relative; display: grid; border-radius: max(12px, .9vw); background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px var(--px-edge); transition: box-shadow .5s var(--px-ease), background .5s var(--px-ease); }
.ct-field:focus-within { background: rgba(0,0,0,.46); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--px-accent) 62%, transparent), 0 0 0 max(3px, .22vw) color-mix(in srgb, var(--px-accent) 14%, transparent), 0 0 1.8vw -.5vw var(--px-glow); }
.ct-field textarea, .ct-ghost { grid-area: 1 / 1; box-sizing: border-box; padding: max(12px, .85vw) max(14px, 1vw) max(20px, 1.5vw); font: 500 max(15px, 1.02vw)/1.42 "Quicksand", var(--body); letter-spacing: -.012em; }
.ct-field textarea { position: relative; z-index: 1; display: block; width: 100%; min-height: calc(3 * 1.42em + max(32px, 2.35vw)); margin: 0; border: 0; outline: 0; resize: none; overflow: hidden; color: var(--px-text); background: transparent; caret-color: var(--px-accent); }
.ct-field textarea::selection { background: color-mix(in srgb, var(--px-accent) 34%, transparent); }
.ct-ghost { pointer-events: none; color: var(--px-faint); transition: opacity .32s ease, transform .5s var(--px-ease), filter .32s ease; }
.ct-ghost.swap { opacity: 0; transform: translateY(-.25em); filter: blur(3px); }
.ct-ghost.gone { opacity: 0; transition-duration: .12s; }
.ct-count { position: absolute; z-index: 2; right: max(11px, .8vw); bottom: max(7px, .5vw); font: 600 max(11px, .74vw) "Quicksand", var(--body); font-variant-numeric: tabular-nums; color: var(--px-faint); pointer-events: none; }
.ct-count.low { color: var(--px-accent); }

/* the second box: the group's humor, for the prompts */
.ct-title-2 { font-size: max(15px, 1.08vw); margin-top: max(2px, .2vw); }
.ct-field-small textarea { min-height: calc(2 * 1.42em + max(24px, 1.7vw)); padding-bottom: max(12px, .85vw); }
.ct-field-small textarea::placeholder { color: var(--px-faint); }

/* what it costs, and the one button */
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: max(12px, 1vw); }
.ct-cost { display: flex; align-items: center; gap: .6vw; min-width: 0; font-size: max(12px, .82vw); font-weight: 500; line-height: 1.32; letter-spacing: -.005em; color: var(--px-dim); }
.ct-cost b { display: inline-flex; align-items: center; gap: .28em; vertical-align: bottom; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--px-accent); }
.ct-cost .fchip.tiny { font-size: 1.12em; }
.ct-cost.short { color: var(--px-text); }
/* ticked: on Custom, Pib hosts live and the chips get spent */
.ct-check { flex: none; position: relative; width: max(16px, 1.05vw); height: max(16px, 1.05vw); border-radius: .3vw; background: linear-gradient(180deg, #fff0c0, #e0b04a); box-shadow: 0 0 .8vw rgba(255,190,90,.5); }
.ct-check::after { content: ""; position: absolute; left: 34%; top: 14%; width: 26%; height: 50%; border: solid #2a1a08; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ct-done { flex: none; min-width: max(76px, 5.2vw); min-height: 38px; padding: .42vw 1.1vw; border: 0; border-radius: 999px; cursor: pointer; font: 600 max(13px, .92vw) "Quicksand", var(--body); letter-spacing: -.01em; color: var(--px-text); background: var(--px-pill); transition: background .3s, transform .5s var(--px-ease), color .3s; }
.ct-done:hover { background: var(--px-pill-hover); transform: scale(1.03); }
.ct-done:active { transform: scale(.96); }
.ct-done.reup { color: var(--px-on-primary); background: var(--px-primary); box-shadow: 0 .25vw 1vw -.2vw var(--px-glow); }
.ct-done:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 3px; }

body.skin-sea .ct, body.skin-sea .ct-field textarea, body.skin-sea .ct-ghost, body.skin-sea .ct-done { font-family: var(--sea-round), "Quicksand", sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .ct, .ct.nudge { animation: none; }
  .ct-ghost { transition: none; }
}