/* owner: WORLD (celebration) | contract: OWNER_FEEDBACK_1.md section 8 and the PRIORITY PALETTE RULE | tokens only: no colour of its own except through var() */
/* The Closing Celebration's buttons and words, over the world: the MOCK "Close a deal" button, the Celebrations setting (On, Quiet, Off), the Sound button, the Wins list,
   and the banner ("Deal closed") with its Skip button. Everything sits inside the world's own box, so a division page that opens over the world covers it. */
.kw-cel { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: var(--kw-font-ui); color: var(--kw-ink); }
.kw-cel > * { pointer-events: auto; }

/* the banner: a pill under the top bar */
.kw-cel__banner { position: absolute; top: calc(var(--kw-top-h, 78px) + 12px); left: 50%; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--kw-panel-bg); border: 1px solid rgb(var(--kw-accent-rgb) / .55); box-shadow: 0 10px 34px rgb(var(--kw-accent-rgb) / .28), var(--kw-shadow, 0 6px 24px rgba(59, 42, 90, .18)); backdrop-filter: blur(12px);
  transform: translate(-50%, -14px); opacity: 0; transition: transform var(--kw-t-med, 280ms) var(--kw-ease, ease), opacity var(--kw-t-med, 280ms) var(--kw-ease, ease); }
.kw-cel__banner[data-on] { transform: translate(-50%, 0); opacity: 1; }
.kw-cel__banner[hidden] { display: none; }
.kw-cel__bell { color: var(--kw-t-accent); font-size: 18px; line-height: 1; }
.kw-cel__title { font: 700 17px/1.1 var(--kw-font-display, Georgia, serif); letter-spacing: .01em; color: var(--kw-ink); white-space: nowrap; }
.kw-cel__sub { font: 500 11px/1.2 var(--kw-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kw-ink-3); white-space: nowrap; }
.kw-cel__skip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kw-line-2); background: transparent; color: var(--kw-ink); font: 600 13px/1 var(--kw-font-ui); cursor: pointer; }
.kw-cel__skip:hover { background: rgb(var(--kw-accent-rgb) / .1); }
.kw-cel__skip kbd { font: 500 10px/1 var(--kw-font-mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--kw-line-2); color: var(--kw-ink-3); }

/* the dock: the button and the settings chip, bottom left, above the app's own dock */
.kw-cel__dock { position: absolute; left: var(--kw-gutter, 16px); bottom: calc(var(--kw-dock-h, 84px) + 14px); display: grid; gap: 8px; justify-items: start; max-width: calc(100% - 2 * var(--kw-gutter, 16px)); }
.kw-cel__bar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.kw-cel__close { min-height: 48px; padding: 0 18px; gap: 10px; font-weight: 700; }
.kw-cel .kw-cel__gear { min-height: 48px; padding: 0 14px; gap: 8px; background: var(--kw-panel-bg), var(--kw-bg-1); backdrop-filter: blur(10px); }      /* a solid plate under the glass: the small words stay 4.5:1 over the lit sky (two classes, so the app's own 64% glass .kw-btn cannot thin it again) */
.kw-cel__mode { font: 500 11px/1 var(--kw-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kw-t-accent); }
.kw-cel__wcount { min-width: 20px; padding: 3px 6px; border-radius: 999px; font: 700 11px/1 var(--kw-font-ui); background: var(--kw-foil); color: var(--kw-on-accent); text-align: center; }
.kw-cel__wcount[hidden] { display: none; }
.kw-cel__mock { display: inline-block; padding: 3px 7px; border-radius: 6px; font: 600 10px/1 var(--kw-font-mono); letter-spacing: .12em; border: 1px solid currentColor; }
.kw-cel[data-state="run"] .kw-cel__close, .kw-cel[data-state="run"] .kw-cel__small { opacity: .6; }

.kw-cel__panel { width: min(360px, calc(100vw - 2 * var(--kw-gutter, 16px))); padding: 14px; border-radius: 16px; background: var(--kw-panel-bg); border: 1px solid var(--kw-line-2); box-shadow: var(--kw-shadow, 0 10px 34px rgba(59, 42, 90, .2)); backdrop-filter: blur(14px); display: grid; gap: 10px; max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.kw-cel__panel[hidden] { display: none; }
.kw-cel__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kw-cel__row--wins { justify-content: space-between; }
.kw-cel__lbl { font: 500 11px/1.2 var(--kw-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kw-ink-3); }
.kw-cel__hint { font-size: 12px; color: var(--kw-ink-3); }
.kw-cel__seg { display: inline-flex; border: 1px solid var(--kw-line-2); border-radius: 12px; padding: 3px; background: var(--kw-bg-3); gap: 2px; }
.kw-cel__seg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--kw-ink-2); font: 600 14px/1 var(--kw-font-ui); cursor: pointer; }
.kw-cel__seg button[aria-checked="true"] { background: var(--kw-foil); color: var(--kw-on-accent); }
.kw-cel__sound { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--kw-line-2); background: transparent; color: var(--kw-ink); font: 600 13px/1 var(--kw-font-ui); cursor: pointer; }
.kw-cel__sound[aria-pressed="true"] { border-color: var(--kw-accent); color: var(--kw-t-accent); background: rgb(var(--kw-accent-rgb) / .1); }
.kw-cel__sound[disabled] { opacity: .5; cursor: not-allowed; }
.kw-cel__small { min-height: 40px; padding: 0 14px; gap: 8px; font-size: 14px; }
.kw-cel__wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kw-cel__wins li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgb(var(--kw-accent-rgb) / .07); font-size: 13px; }
.kw-cel__wins li.kw-cel__empty { background: transparent; color: var(--kw-ink-3); }
.kw-cel__wdate { font: 600 12px/1 var(--kw-font-mono); color: var(--kw-ink-3); min-width: 48px; }
.kw-cel__wkind { font-weight: 600; flex: 1 1 auto; }
.kw-cel__wamt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kw-t-accent); }
.kw-cel__note { margin: 0; font-size: 12px; color: var(--kw-ink-3); }

@media (max-width: 719px) {
  .kw-cel__banner { gap: 6px; padding-left: 12px; }
  .kw-cel__title { font-size: 15px; }
  .kw-cel__sub { display: none; }
  .kw-cel__close span:first-child { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce), (hover: none) and (prefers-reduced-motion: reduce) {
  .kw-cel__banner { transition: none; transform: translate(-50%, 0); }
}
html[data-motion="calm"] .kw-cel__banner { transition: none; transform: translate(-50%, 0); }
html[data-saver="on"] .kw-cel, html[data-locked="on"] .kw-cel { visibility: hidden; }