/* Soot's card (click the cat) and the bell art it shares with Wren's bell shop (src/sootUI.js). Linked after ui-services.css.
   The card is one painting shown at its own proportions (never stretched): everything on it is sized in cqw, so it
   scales as a whole on a phone. Art: assets/gen/ui/soot/ (tools/pack_soot_art.py). */
.soot-bell-art { display: block; background: url('assets/gen/ui/soot/bells.webp') calc(var(--bell) * 25%) 0 / 500% 100% no-repeat; pointer-events: none; }
.service-art.soot-bell-art { background-image: url('assets/gen/ui/soot/bells.webp'); background-size: 500% 100%; background-position: calc(var(--bell) * 25%) 0; }

.soot-panel { --soot-card-ratio: 1.6; --soot-ring-ratio: 1.112; position: fixed; left: 50%; top: 50%; z-index: 60; width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -50%); pointer-events: auto; container-type: inline-size; animation: soot-in .16s ease-out; }
@keyframes soot-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.soot-card { position: relative; aspect-ratio: var(--soot-card-ratio); display: grid; grid-template-columns: 30cqw minmax(0, 1fr); align-items: center; gap: 3.6cqw; padding: 1cqw 6cqw 0 6.5cqw; box-sizing: border-box; color: #e5d5b9; font: 3.2cqw/1.35 Georgia, serif; -webkit-font-smoothing: antialiased; }
/* The card's painting is its ::before, and the shadow is the painting's alone, never its lettering's (owner rule, 2026-10-06). */
.soot-card { isolation: isolate; }
.soot-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/gen/ui/soot/card.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); pointer-events: none; }
.soot-card .ui-close { position: absolute; top: 3.4cqw; right: 3.4cqw; width: 7.6cqw !important; height: 7.6cqw !important; font-size: 4.6cqw !important; }

.soot-portrait { position: relative; aspect-ratio: 1; }
.soot-portrait i { position: absolute; display: block; }
.soot-face { inset: 9%; border-radius: 50%; background: #1a120c url('assets/gen/ui/soot/portrait.webp') center / cover no-repeat; box-shadow: inset 0 0 2.4cqw rgba(0, 0, 0, .7); }
.soot-ring { left: 0; top: 0; width: 100%; aspect-ratio: 1 / var(--soot-ring-ratio); background: url('assets/gen/ui/soot/ring.webp') center / 100% 100% no-repeat; }

.soot-body { min-width: 0; display: grid; gap: 1.5cqw; align-content: center; }
.soot-title, .soot-rename { display: flex; align-items: center; gap: 2cqw; margin: 0; min-width: 0; }
.soot-title h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 5.4cqw/1.15 Cinzel, Georgia, serif; color: #efd69c; text-transform: none; letter-spacing: 0; }
.soot-sub { margin: 0; color: #b8ad97; font-size: 2.9cqw; }
/* Small plain controls: the game's buttons wear an ornate frame that has no room here. */
.soot-panel .soot-btn, .soot-panel .soot-slot, .soot-panel .soot-bell { box-sizing: border-box; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0; border: 0 !important; border-image: none !important; cursor: pointer; font: inherit; color: inherit; transition: transform .12s, filter .12s; }
.soot-panel .soot-btn { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #2a1d12 !important; box-shadow: inset 0 0 0 1px #b1935088; color: #e6cf98; font-size: 3.4cqw; line-height: 1; }
.soot-panel .soot-btn:hover { filter: brightness(1.25); }
.soot-panel button:active { transform: scale(.94); }
.soot-panel button:focus-visible, .soot-rename input:focus-visible, .soot-gear input:focus-visible { outline: 2px solid #f6d987; outline-offset: 2px; }
.soot-rename input { flex: 1; min-width: 0; height: 7cqw; box-sizing: border-box; padding: 0 2cqw; border: 1px solid #b19350aa; border-radius: 1cqw; background: #120c07; color: #f3e6c4; font: 600 4.4cqw Cinzel, Georgia, serif; }

.soot-collar { display: grid; grid-template-columns: 12.5cqw minmax(0, 1fr); align-items: center; gap: 2.4cqw; }
.soot-panel .soot-slot { width: 12.5cqw; height: 12.5cqw; display: grid; place-items: center; background: url('assets/gen/ui/soot/slot.webp') center / 100% 100% no-repeat !important; }
.soot-panel .soot-slot:disabled { cursor: default; opacity: 1; }
.soot-slot .soot-bell-art { width: 74%; aspect-ratio: 1; filter: drop-shadow(0 .6cqw .6cqw rgba(0, 0, 0, .55)); }
.soot-slot.full:hover .soot-bell-art { filter: drop-shadow(0 .6cqw .6cqw rgba(0, 0, 0, .55)) brightness(1.15); }
.soot-worn { display: grid; gap: .4cqw; min-width: 0; }
.soot-worn b { color: #efd69c; font: 600 3.7cqw Cinzel, Georgia, serif; }
.soot-worn span { color: #cfc3aa; font-size: 2.9cqw; text-wrap: pretty; }

.soot-bells { display: flex; gap: 1.4cqw; }
.soot-panel .soot-bell { width: 8.4cqw; height: 8.4cqw; display: grid; place-items: center; border-radius: 1.2cqw; background: #150e08 !important; box-shadow: inset 0 0 0 1px #6f5a3577; }
.soot-bell .soot-bell-art { width: 84%; aspect-ratio: 1; }
.soot-panel .soot-bell:hover { filter: brightness(1.25); }
.soot-panel .soot-bell.on { box-shadow: inset 0 0 0 2px #e9c66f, 0 0 1.6cqw #e9c66f55; background: #2b1e10 !important; }
.soot-gear { display: flex; align-items: center; gap: 1.6cqw; color: #cfc3aa; font-size: 2.9cqw; cursor: pointer; }
.soot-gear input { width: 3.6cqw; height: 3.6cqw; margin: 0; accent-color: #c9a352; }

/* A phone (the game plays in landscape there) or a narrow window: a smaller card in the middle, clear of the controls. */
@media (max-width: 760px), (max-height: 520px) {
  .soot-panel { top: 46%; width: min(350px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .soot-panel { animation: none; } }