:root {
    --shelf-bg-top: #fdf4f7;
    --shelf-bg-bottom: #f5e9ee;
    --wood-frame: #6b4438;
    --wood-inner: #492a22;
    --wood-ledge: #8a5a4a;
    --wood-highlight: #a87562;
    --brass-gold: #dfb76c;
    --rose-accent: #d95b88;
    --rose-soft: #fce8ef;
    --ink-main: #3b262d;
    --ink-muted: #7d626b;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--shelf-bg-top) 0%, var(--shelf-bg-bottom) 100%);
    color: var(--ink-main);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    overscroll-behavior-y: contain;
    user-select: none;
    -webkit-user-select: none;
}

.shelf-app {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 4px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Compact Top Bar */
.top-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(217, 91, 136, 0.22);
    border-radius: 14px;
    padding: 6px 8px;
    box-shadow: 0 3px 10px rgba(90, 45, 60, 0.06);
}

.partner-strip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.partner-avatar-btn {
    position: relative;
    flex: 0 0 80px;
    width: 80px;
    height: 86px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 76%, #f7d9e5, transparent 70%);
    cursor: pointer;
    overflow: visible;
    box-shadow: none;
}

.partner-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 2px #a75e7c26);
}

.partner-switch-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--rose-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.partner-bubble {
    flex: 1;
    min-width: 0;
    background: var(--rose-soft);
    border-radius: 10px;
    padding: 4px 9px;
    border: 1px solid rgba(217, 91, 136, 0.2);
    transition: transform 0.22s ease, background-color 0.22s ease;
}

.partner-bubble.is-praising {
    background: #ffe0ec;
    transform: scale(1.02);
}

.partner-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
}

.partner-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--rose-accent);
}

.praise-heart {
    font-size: 12px;
    color: #e91e63;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.partner-bubble.is-praising .praise-heart {
    opacity: 1;
    transform: scale(1.15);
}

.partner-speech {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--ink-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* HUD Row */
.hud-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.hud-pill {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    background: #fff9fb;
    border: 1px solid #f0d7e0;
    border-radius: 8px;
    padding: 3px 4px;
    font-size: 11px;
}

.hud-label,
.hud-stage label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-muted);
}

.hud-pill strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-main);
}

.hud-pill small {
    font-size: 10px;
    color: var(--ink-muted);
}

.hud-stage select {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    color: var(--rose-accent);
    padding: 0 2px;
    cursor: pointer;
}

/* Combo Gauge */
.combo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.combo-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--rose-accent);
    min-width: 68px;
}

.combo-label.is-active {
    color: #c2185b;
    text-shadow: 0 0 6px rgba(244, 143, 177, 0.5);
}

.combo-track {
    flex: 1;
    height: 6px;
    background: #f2dfe6;
    border-radius: 999px;
    overflow: hidden;
}

.combo-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #f48fb1, #e91e63, #ffb74d);
    border-radius: 999px;
    transition: width 0.1s linear;
}

/* Main Shelf Playfield */
.shelf-stage {
    position: relative;
    width: 100%;
}

.shelf-cabinet {
    background: linear-gradient(180deg, var(--cabinet-top, #936252) 0%, var(--cabinet-bottom, #70483d) 100%);
    border: 3px solid #492a22;
    border-radius: 16px;
    padding: 6px 6px 8px;
    box-shadow:
        0 8px 20px rgba(62, 34, 26, 0.25),
        inset 0 2px 0 rgba(255, 232, 204, 0.28);
}

.cabinet-crown {
    text-align: center;
    margin-bottom: 4px;
    padding: 0 0 3px;
    border-bottom: 1px solid rgba(223, 183, 108, 0.35);
}

.crown-ornament {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--brass-gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.shelf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px 6px;
}

/* Individual Shelf Box */
.shelf-box {
    position: relative;
    background: linear-gradient(180deg, var(--box-top, #714a41) 0%, var(--box-bottom, #9b7460) 90%, #bd9472 100%);
    border: 2px solid #8a5a4a;
    border-bottom: 7px solid var(--wood-ledge);
    border-radius: 10px;
    height: 86px;
    padding: 6px 4px 4px;
    box-shadow:
        inset 0 8px 14px rgba(15, 6, 4, 0.62),
        0 2px 4px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.shelf-stage[data-rows="3"] .shelf-box {
    height: 102px;
}

.shelf-box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(223, 183, 108, 0.25), rgba(223, 183, 108, 0.65), rgba(223, 183, 108, 0.25));
    pointer-events: none;
}

.shelf-box.is-drop-ready {
    border-color: var(--brass-gold);
    box-shadow:
        inset 0 6px 12px rgba(15, 6, 4, 0.45),
        0 0 0 2px rgba(223, 183, 108, 0.55);
}

.shelf-box.is-matching {
    animation: boxMatchFlash 0.36s ease;
}

@keyframes boxMatchFlash {
    0% {
        box-shadow: inset 0 0 24px rgba(255, 230, 140, 0.9), 0 0 14px rgba(255, 200, 120, 0.85);
        border-color: #ffe082;
    }
    100% {
        box-shadow: inset 0 8px 14px rgba(15, 6, 4, 0.62);
    }
}

/* Depth Badge (shows remaining back layers) */
.depth-dots {
    position: absolute;
    top: 4px;
    right: 5px;
    display: flex;
    gap: 3px;
    z-index: 3;
    pointer-events: none;
}

.depth-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brass-gold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Reserve goods occupy their own band above the three playable slots. */
.back-layer-row {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    align-items: center;
    pointer-events: none;
    opacity: 0.72;
    filter: saturate(0.65);
    border-bottom: 1px solid #efd4b32e;
}

.back-slot {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-slot svg { width: 22px; height: 22px; }

/* Front 3 Slots Row */
.front-layer-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    height: 100%;
    align-items: end;
}

.front-layer-row.is-promoting {
    animation: promoteLayer 0.26s cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes promoteLayer {
    0% {
        opacity: 0.4;
        transform: translateY(-10px) scale(0.84);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shelf-slot {
    position: relative;
    width: 100%;
    height: 68px;
    padding: 2px;
    border: 1.5px dashed transparent;
    border-radius: 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    touch-action: none;
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.shelf-slot.is-empty {
    border-color: rgba(255, 235, 220, 0.14);
}

.shelf-slot.is-empty.is-targetable {
    border-color: rgba(255, 215, 130, 0.55);
    background: rgba(255, 235, 180, 0.1);
}

.shelf-slot.is-selected {
    transform: translateY(-6px) scale(1.06);
    background: rgba(255, 240, 245, 0.22);
    border: 1.5px solid #ff9eb8;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.35);
}

.shelf-slot.is-dragging-source {
    opacity: 0.38;
    transform: scale(0.92);
}

.shelf-slot.is-hint-source {
    animation: hintPulse 0.9s ease-in-out infinite alternate;
    border: 1.5px solid #ffd54f;
    background: rgba(255, 235, 130, 0.22);
}

.shelf-slot.is-hint-target {
    border: 1.5px dashed #ffd54f;
    background: rgba(255, 235, 130, 0.18);
}

@keyframes hintPulse {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-5px) scale(1.06); }
}

.item-figure {
    width: min(50px, 100%);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.item-figure svg {
    width: 100%;
    height: 100%;
    display: block;
}

.item-badge {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 9px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Floating Drag Preview */
.drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 999;
    filter: drop-shadow(0 8px 12px rgba(45, 15, 25, 0.42));
    transform: translate(-50%, -65%) scale(1.14);
}

.drag-ghost svg {
    width: 100%;
    height: 100%;
}

/* Match Sparkle Effect */
.sparkle-pop {
    position: absolute;
    inset: 1px 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff3b0;
    text-shadow: 0 2px 6px rgba(233, 30, 99, 0.85);
    pointer-events: none;
    z-index: 10;
    animation: shelfScoreFade 0.65s ease-out forwards;
}

@keyframes shelfScoreFade {
    0% { opacity: 0; transform: translateY(2px); }
    25%, 70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* Bottom Action Bar */
.action-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 38px;
    padding: 6px 4px;
    border: 1px solid #e4c5d0;
    border-radius: 11px;
    background: #ffffff;
    color: var(--ink-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(80, 40, 55, 0.06);
    transition: transform 0.12s ease, background-color 0.15s ease;
}

.tool-btn:active:not(:disabled) {
    transform: translateY(1px);
    background: var(--rose-soft);
}

.tool-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.shelf-box.is-trio-aligned {
    border-color: #ffe082;
    box-shadow:
        inset 0 0 22px rgba(255, 225, 130, 0.78),
        0 0 12px rgba(255, 195, 110, 0.75);
}

.shelf-box.is-trio-aligned .front-layer-row .item-figure {
    animation: trioAlignedPop 0.27s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes trioAlignedPop {
    0% {
        transform: scale(0.92);
    }
    55% {
        transform: translateY(-6px) scale(1.15);
        filter: drop-shadow(0 0 8px rgba(255, 235, 150, 0.95));
    }
    100% {
        transform: translateY(-2px) scale(0.85);
        opacity: 0.25;
    }
}

.tool-btn.is-attention {
    border-color: var(--rose-accent);
    background: var(--rose-soft);
    box-shadow: 0 0 0 2px rgba(217, 91, 136, 0.28);
    animation: hintPulse 0.8s ease-in-out infinite alternate;
}

.tool-icon {
    color: var(--rose-accent);
    font-size: 14px;
    font-weight: 800;
}

/* Overlays (Clear & Partner Modal) */
.overlay-card {
    position: absolute;
    inset: 8px;
    z-index: 30;
    background: rgba(255, 250, 252, 0.97);
    border: 2px solid #e7b8c9;
    border-radius: 16px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 12px 28px rgba(55, 20, 35, 0.28);
    text-align: center;
}

.overlay-card[hidden] {
    display: none !important;
}

.overlay-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--rose-accent);
}

.overlay-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink-main);
}

.clear-partner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rose-soft);
    border: 1px solid rgba(217, 91, 136, 0.25);
    border-radius: 12px;
    padding: 8px 12px;
    width: 100%;
    text-align: left;
}

.clear-partner img {
    width: 96px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
}

.clear-partner-line {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-main);
}

.clear-stats {
    display: flex;
    gap: 12px;
    width: 100%;
}

.clear-stats > div {
    flex: 1;
    background: #fff;
    border: 1px solid #eed4de;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clear-stats span {
    font-size: 10px;
    color: var(--ink-muted);
    font-weight: 700;
}

.clear-stats strong {
    font-size: 16px;
    color: var(--rose-accent);
    font-weight: 800;
}

.primary-btn {
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #e55b8a, #c93b6b);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(201, 59, 107, 0.35);
}

/* Cast Modal */
.cast-modal {
    justify-content: flex-start;
    padding: 12px;
}

.modal-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2c4cf;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-main);
    cursor: pointer;
}

.cast-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.cast-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 1.5px solid #edd5df;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.cast-option-btn.is-active {
    border-color: var(--rose-accent);
    background: var(--rose-soft);
}

.cast-option-btn img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cast-option-info {
    display: flex;
    flex-direction: column;
}

.cast-option-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-main);
}

.cast-option-role {
    font-size: 11px;
    color: var(--ink-muted);
}

.save-note {
    margin: 2px 0 0;
    font-size: 11px;
    text-align: center;
    color: var(--ink-muted);
}

/* The partner shares the workspace; feedback stays outside the touch targets. */
.partner-strip { --partner-accent: var(--rose-accent); }
.partner-strip .partner-name { color: var(--partner-accent); }
.partner-cue {
    margin: 2px 0 3px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.partner-strip[data-reaction="hint"] .partner-bubble { border-color: #bd9850; }
.partner-strip[data-reaction="together"] .partner-bubble { background: #fff1d8; border-color: #d4ae6b; }
.partner-strip.is-reacting .partner-avatar-btn img { animation: partnerCelebrate .6s ease-out; }
.partner-strip[data-reaction="combo"].is-reacting .partner-avatar-btn img { animation: partnerCelebrate .6s ease-out 2; }
.shelf-box-number {
    position: absolute;
    top: 3px;
    left: 5px;
    color: #e5c8a5;
    font-size: 9px;
    pointer-events: none;
}
.clear-partner .partner-name { margin: 0 0 5px; }
.partner-avatar-btn:focus-visible, .tool-btn:focus-visible, .shelf-slot:focus-visible {
    outline: 2px solid #c95c7e;
    outline-offset: 2px;
}
@keyframes partnerCelebrate {
    0%, 100% { transform: translateY(0) rotate(0); }
    35% { transform: translateY(-5px) rotate(-5deg); }
    65% { transform: translateY(-2px) rotate(4deg); }
}
/* Small, readable objects and destination previews take priority over decoration. */
.shelf-stage[data-theme="sage"] {
    --cabinet-top: #6c8879; --cabinet-bottom: #4f675a;
    --box-top: #4e665c; --box-bottom: #8a9c7b;
    --wood-ledge: #839b7a;
}
.shelf-stage[data-theme="lavender"] {
    --cabinet-top: #8c789f; --cabinet-bottom: #665775;
    --box-top: #5b4c6b; --box-bottom: #a28dab;
    --wood-ledge: #a38aaf;
}
.shelf-progress {
    height: 3px; margin: 0 1px 6px; border-radius: 6px;
    background: #35252255; overflow: hidden;
}
.shelf-progress span {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #f7cf94, #ffecd2);
    transition: width .25s ease;
}
.partner-request {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center; gap: 4px; padding: 2px 0; margin-bottom: 2px;
    width: 100%; border: none; border-bottom: 1px solid #d5acbc66;
    background: transparent; font: inherit; cursor: pointer;
    font-size: 9px; color: #704451; text-align: left;
}
.partner-request[hidden], .clear-request[hidden] { display: none; }
.partner-request:disabled { cursor: default; }
.partner-request:focus-visible { outline: 2px solid #c95c7e; outline-offset: 2px; }
.request-item, .request-item svg { width: 22px; height: 22px; display: block; }
.request-eyebrow { display: block; font-size: 8px; color: #86626c; }
.request-copy { min-width: 0; }
#request-label { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-reward { white-space: nowrap; color: #a84565; font-size: 9px; font-weight: 800; }
.partner-request.is-complete { border-color: #d9b86a; color: #825c21; }
.partner-request.is-complete .request-item { animation: partnerCelebrate .6s ease; }
.partner-strip[data-reaction="request"] .partner-bubble { background: #fff1d8; border-color: #d4ae6b; }
.clear-request { margin: 0; color: #9c6431; font-size: 11px; font-weight: 800; }
.shelf-slot.is-same-item .item-figure {
    filter: drop-shadow(0 0 4px #ffe7ad) drop-shadow(0 2px 2px #3b222077);
}
.shelf-slot.is-request-item .item-badge { color: #ffdeb6; }
.shelf-slot.is-request-item .item-badge::after { content: " ♥"; color: #ffd8e5; }
.shelf-slot.is-preview-match {
    border: 2px solid #ffe4a1; background: #ffedbe2b;
    box-shadow: inset 0 0 12px #ffe6a633;
}
.shelf-slot.is-preview-pair { border-color: #f9c6d6; background: #fce0ed18; }
.drop-preview {
    pointer-events: none; margin: auto 0; padding: 3px 0;
    font-size: 9px; line-height: 1.3; font-weight: 800;
    color: #fff5d9; text-shadow: 0 1px 2px #55352b;
    white-space: nowrap;
}
.shelf-box.is-drop-ready[data-preview="match"] { border-color: #ffe7a3; background: #9a7b4e; }
.shelf-box.is-drop-ready[data-preview="pair"] { border-color: #ffc9dc; }
.shelf-box.is-drop-ready::before {
    content: "ここに置く"; position: absolute; inset: 3px 0 auto;
    text-align: center; font-size: 9px; font-weight: 800;
    color: #fff3d1; pointer-events: none; z-index: 5;
}
.shelf-box.is-drop-ready[data-preview="match"]::before { content: "✦ 3つ揃う"; }
.shelf-box.is-drop-ready[data-preview="pair"]::before { content: "2つ並ぶ"; }
.shelf-box.is-drop-ready[data-preview="reveal"]::before { content: "奥が見える"; }
@media (prefers-reduced-motion: reduce) {
    .shelf-app *, .shelf-app *::after { animation: none !important; transition: none !important; }
}
@media (max-height: 700px) {
    .partner-avatar-btn { flex-basis: 72px; width: 72px; height: 74px; }
    .shelf-stage[data-rows="3"] .shelf-box { height: 92px; }
    .shelf-box { height: 80px; }
    .overlay-card { padding: 10px; gap: 7px; overflow-y: auto; }
    .clear-partner img { width: 78px; height: 82px; }
}

/* Keep the expanded cast selection within the screen. */
.cast-list {max-height:min(360px, 55svh);}

/* Let spare portrait height grow the board; preserve touch sizes on shorter screens. */
body { min-height: 100svh; display: flex; flex-direction: column; }
.shelf-app { flex: 1; }
.top-bar, .action-bar { flex: 0 0 auto; }
.shelf-stage { flex: 1; display: flex; }
.shelf-cabinet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shelf-grid { flex: 1; grid-auto-rows: minmax(var(--shelf-row-min, 104px), 1fr); }
.shelf-stage[data-rows="3"] { --shelf-row-min: 114px; }
.shelf-box,
.shelf-stage[data-rows="3"] .shelf-box {
    height: auto;
    min-height: 104px;
    display: grid;
    grid-template-rows: 22px minmax(54px, 1fr);
    row-gap: 3px;
    padding: 13px 4px 4px;
}
.shelf-stage[data-rows="3"] .shelf-box { min-height: 114px; }
.front-layer-row { grid-area: 2 / 1; height: auto; min-height: 54px; }
.shelf-slot { height: 54px; min-width: 0; }
.item-figure { height: 46px; width: min(46px, 100%); }
.item-badge { top: -1px; }
.cabinet-crown {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px; margin-bottom: 2px; padding-bottom: 2px; border-bottom: none;
}
.crown-ornament { font-size: 9px; letter-spacing: 0; }
.shelf-remaining { color: #fff0d9; font-size: 11px; white-space: nowrap; }
.shelf-remaining strong { font-size: 14px; }
.shelf-progress { margin-bottom: 4px; }
.hud-best { background: transparent; border-color: transparent; }
.hud-best strong { color: var(--ink-muted); font-size: 11px; }
.tool-btn { min-height: 44px; }

/* A low, shaped empty stand stays distinct from goods waiting in the reserve band. */
.shelf-slot.is-empty::after {
    content: ""; position: absolute; left: 12%; right: 12%; bottom: 3px;
    height: 7px; border: 1px solid #ffe7ca70; border-radius: 50%;
    background: #ffe7ca14; pointer-events: none;
}
.shelf-slot.is-empty { border-color: #ffe7ca38; }
.shelf-slot.is-empty.is-targetable { border-style: dashed; }
.shelf-slot.is-empty.is-preview-match {
    border: 2px solid #ffe4a1; background: #ffedbe2b;
}
.shelf-slot.is-empty.is-preview-pair { border-style: double; border-width: 3px; }
.drop-preview { font-size: 12px; letter-spacing: 1px; }
.shelf-slot.is-hint-target .drop-preview { text-shadow: 0 0 4px #fff4c0; }
.shelf-box.is-trio-aligned .front-layer-row .shelf-slot {
    border: 1.5px solid #ffe9a6; background: #fff3ce24;
}
.shelf-box.is-trio-aligned .front-layer-row .item-figure {
    filter: drop-shadow(0 0 3px #fff0b0);
}
.sparkle-pop { line-height: 1.1; white-space: nowrap; }

@media (max-height: 700px) {
    .shelf-stage[data-rows="3"] { --shelf-row-min: 104px; }
    .shelf-box, .shelf-stage[data-rows="3"] .shelf-box { min-height: 104px; }
    .partner-avatar-btn { flex-basis: 64px; width: 64px; height: 70px; }
    .partner-speech { -webkit-line-clamp: 1; }
    .top-bar { padding: 4px 6px; gap: 3px; }
}