/* The sorting shop has its own little wood-and-paper world. */
.shop-card.sorting-shop { max-width: 1280px; color: #4b625a; padding: clamp(12px, 2vw, 24px); }
.sorting-shop *, .sorting-shop *::before, .sorting-shop *::after { box-sizing: border-box; }
.sorting-shop [hidden] { display: none !important; }
.sorting-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sorting-shop button { font: inherit; cursor: pointer; }
.sorting-shop button:disabled { cursor: default; }
.sorting-shop button:focus-visible { outline: 3px solid #59a9cc; outline-offset: 3px; }
.sorting-hud { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 20px; align-items: center; padding: 13px 16px; margin-top: 20px; background: #e8edde; border: 1px solid #c9d1b9; border-radius: 13px; font-size: .9rem; }
.sorting-total { color: #4b7464; }
.sorting-full { color: #7f6987; font-weight: 700; }
.sorting-save { text-align: right; color: #778372; font-size: .73rem; }
.sorting-progress { display: block; grid-column: 1 / -1; width: 100%; height: 8px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; background: #cdd8be; accent-color: #88a881; }
.sorting-progress::-webkit-progress-bar { background: #cdd8be; }
.sorting-progress::-webkit-progress-value { background: #88a881; border-radius: 10px; transition: width .3s; }
.sorting-progress::-moz-progress-bar { background: #88a881; border-radius: 10px; }
.sorting-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 17px 0; }
.sorting-tab { display: grid; grid-template-columns: 35px 1fr auto; gap: 8px; align-items: center; min-height: 58px; padding: 10px 13px; border: 1px solid #ded3bd; border-radius: 12px; color: #6d7369; background: #f3eddf; box-shadow: 0 3px #ddd2b940; text-align: left; }
.sorting-tab .sorting-art { width: 35px; height: 35px; }
.sorting-tab-copy { font-size: .84rem; font-weight: 800; }
.sorting-tab-count { font-size: .74rem; white-space: nowrap; }
.sorting-tab-active { color: #fcf6e9; border-color: var(--room-color); background: var(--room-color); box-shadow: 0 3px #574d6040; }
.sorting-tab-finished:not(.sorting-tab-active) { background: #e3edda; border-color: #a9c096; color: #517d64; }
.sorting-basket-bar { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: 1fr auto auto; gap: 10px 18px; align-items: center; padding: 12px 15px; border: 1px solid #d9c7a9; border-radius: 14px; background: #fff5e3; box-shadow: 0 6px 16px #6b524321; }
.sorting-basket-heading { display: flex; align-items: center; gap: 12px; }
.sorting-basket-heading > .sorting-art { width: 49px; height: 49px; flex-shrink: 0; }
.sorting-basket-copy { display: grid; gap: 3px; }
.sorting-basket-label { color: #806475; font-size: .88rem; }
.sorting-basket-copy > span { color: #817d6c; font-size: .72rem; }
.sorting-basket { display: flex; gap: 6px; }
.sorting-basket-slot { display: grid; place-items: center; width: 46px; height: 46px; padding: 4px; color: #bba688; background: #f5e8cf; border: 1px solid #c9b496; border-radius: 9px; box-shadow: inset 0 -3px #d6c3a340; }
.sorting-basket-empty { border-style: dashed; background: #fbf2e4; font: 1.4rem Georgia, serif; }
.sorting-basket-slot:not(.sorting-basket-empty):hover { background: #eed5db; border-color: #b98496; }
.sorting-small-button { min-height: 44px; padding: 6px 11px; border: 1px solid #d4c3a9; border-radius: 10px; color: #7d7467; background: #f7edd9; font-size: .75rem !important; }
.sorting-small-button:disabled { opacity: .45; }
.sorting-quick-targets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sorting-quick-target { display: inline-flex; gap: 5px; align-items: center; min-height: 44px; padding: 5px 9px; border: 1px solid #a7baa2; border-radius: 9px; background: #e8efdc; color: #526c5b; font-size: .75rem !important; font-weight: 750 !important; }
.sorting-quick-target > .sorting-art { width: 30px; height: 30px; }
.sorting-quick-target:hover { background: #d6e5c8; }
.sorting-quick-help { font-size: .74rem; color: #89816e; }
.sorting-room-heading { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin: 21px 0 12px; }
.sorting-room-title { margin: 0; color: #597367; font: 700 1.5rem Georgia, serif; }
.sorting-room-subtitle { font-size: .8rem; color: #958472; }
.sorting-scene { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sorting-floor-panel, .sorting-shelf-panel { min-width: 0; }
.sorting-panel-heading { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; margin: 0 0 9px; font-size: .79rem; color: #686f62; }
.sorting-panel-heading > span { color: #928875; font-size: .7rem; }
.sorting-floor-scroll { width: 100%; overflow: auto; overscroll-behavior-x: contain; border: 5px solid #bfa68c; border-radius: 14px; background: #d8bf9c; box-shadow: 0 4px #ab917540; scrollbar-color: #9b8771 #e2ceb1; scrollbar-width: thin; }
.sorting-floor { position: relative; width: 100%; min-width: 590px; aspect-ratio: 720 / 640; isolation: isolate; background: linear-gradient(180deg, #94a794 0 8%, #d6bc98 8% 100%); }
.sorting-floor::before { content: ''; position: absolute; inset: 8% 0 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 53px, #92704c35 54px, #f6e0bb45 56px, transparent 57px), repeating-linear-gradient(90deg, transparent 0 130px, #ad896234 130px 131px, transparent 131px 260px); }
.sorting-floor::after { content: ''; position: absolute; inset: 16% 9% 18%; z-index: -1; border: 4px solid #e0bcb6; border-radius: 45%; opacity: .55; background: radial-gradient(ellipse, #c99a9a 0 61%, #e6c0aa 61% 66%, #bc8a8d 66%); box-shadow: 0 3px 5px #82654833; }
[data-room='spells'] .sorting-floor { background: linear-gradient(180deg, #7b9996 0 8%, #cab693 8% 100%); }
[data-room='spells'] .sorting-floor::after { border-color: #b6c7b0; background: radial-gradient(ellipse, #98afa0 0 61%, #ccdbc0 61% 66%, #799a8e 66%); }
[data-room='winter'] .sorting-floor { background: linear-gradient(180deg, #b88c8e 0 8%, #e1c6a1 8% 100%); }
.sorting-floor-item { position: absolute; display: block; width: 7.778%; aspect-ratio: 1; padding: 2px; transform: translate(-50%, -50%) rotate(var(--item-turn)); border: 0; border-radius: 13px; background: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 3px 1px #705b463d); }
.sorting-floor-item:hover { background: #fff5d659; filter: drop-shadow(0 3px 2px #7355406b); }
.sorting-floor-item:focus-visible { background: #fff6d2b8; }
.sorting-floor-item.sorting-item-hint { outline: 3px solid #6bbdde; outline-offset: 4px; background: #acdbea3a; box-shadow: 0 0 0 8px #8accdf35; }
.sorting-dragging { opacity: .3; }
.sorting-floor-ornament { position: absolute; bottom: 2.8%; left: 18%; right: 18%; display: flex; gap: 13px; align-items: center; justify-content: center; color: #7f6b57; pointer-events: none; }
.sorting-floor-ornament > .sorting-art { width: 48px; height: 48px; transform: rotate(-6deg); }
.sorting-floor-ornament > span { font: italic .83rem Georgia, serif; }
.sorting-floor-help { margin: 9px 0 0; color: #938873; font-size: .73rem; line-height: 1.5; }
.sorting-shelves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 11px; align-items: stretch; }
.sorting-shelf { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 8px 12px; min-height: 208px; color: #faf3df; border: 5px solid #b2987d; border-bottom-width: 9px; border-radius: 12px; background: #7e7288; box-shadow: inset 0 5px 8px #4a394c30, 0 3px #9f85664d; text-align: center; }
[data-room='spells'] .sorting-shelf { background: #668a80; }
[data-room='winter'] .sorting-shelf { background: #a97979; }
.sorting-shelf:hover { box-shadow: inset 0 5px 8px #4a394c30, 0 0 0 3px #cfc19c6e; }
.sorting-shelf-label { display: flex; flex-direction: column; gap: 3px; align-items: center; width: 100%; }
.sorting-shelf-label > .sorting-art { width: 35px; height: 35px; padding: 2px; border-radius: 9px; background: #f6ead9; box-shadow: 0 2px #302e3240; }
.sorting-shelf-label > strong { font-size: .72rem; line-height: 1.25; min-height: 1.9em; }
.sorting-shelf-count { font-size: .72rem; color: #f8e3b9; font-weight: 800; }
.sorting-shelf-slots { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px 1px; padding: 4px 1px 0; }
.sorting-shelf-slot { display: block; position: relative; aspect-ratio: 1; padding: 1px 0 3px; border-bottom: 3px solid #cbb393; border-radius: 0 0 2px 2px; }
.sorting-shelf-slot > .sorting-art { opacity: .2; filter: saturate(.25); }
.sorting-slot-filled > .sorting-art { opacity: 1; filter: drop-shadow(0 2px 1px #29312930); }
.sorting-shelf-matching { border-color: #d9c49b; box-shadow: inset 0 0 0 2px #f6d5a633, 0 0 0 3px #bfcab369; }
.sorting-drag-target { outline: 3px solid #78c4dc; outline-offset: 3px; }
.sorting-shelf-full { border-color: #b9c89d; box-shadow: inset 0 0 14px #e9e4aa2e, 0 0 12px #c0d49b5e; }
.sorting-shelf-full .sorting-shelf-count { color: #edfacd; }
.sorting-status { min-height: 46px; margin: 16px 0 10px; padding: 11px 14px; color: #597769; background: #eaf0e2; border: 1px solid #cfd9c2; border-radius: 11px; font-size: .85rem; line-height: 1.5; }
.sorting-actions, .sorting-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.sorting-button { padding: 10px 15px; min-height: 44px; color: #fff8e9; background: #886a87; border: 1px solid #796075; border-radius: 11px; box-shadow: 0 3px #604b6330; font-size: .8rem !important; font-weight: 750 !important; }
.sorting-button:hover { background: #997996; }
.sorting-button:disabled { opacity: .45; }
.sorting-secondary { color: #7b7164; background: #f1e6d2; border-color: #cfbb9d; }
.sorting-secondary:hover { background: #e8dcc6; }
.sorting-confirm { color: #8b6972; font-size: .8rem; }
.sorting-victory { display: grid; grid-template-columns: 65px 1fr; gap: 7px 15px; align-items: center; padding: 19px; margin: 15px 0; color: #4e7560; background: #e8efd5; border: 2px solid #bbcf9d; border-radius: 15px; box-shadow: 0 0 20px #adc59533; }
.sorting-victory > .sorting-art { width: 65px; height: 65px; grid-row: 1 / 3; }
.sorting-victory > strong { font: 700 1.3rem Georgia, serif; }
.sorting-victory > p { margin: 0; font-size: .85rem; line-height: 1.6; }
.sorting-victory > button { grid-column: 2; justify-self: start; }
.sorting-flying-item { position: fixed; z-index: 2147483646; pointer-events: none; filter: drop-shadow(0 5px 3px #685a4a50); }
@media (min-width: 1360px) { .sorting-floor { min-width: 0; } }
@media (max-width: 1000px) {
  .sorting-scene { grid-template-columns: 1fr; }
  .sorting-floor { min-width: 590px; max-height: none; }
  .sorting-shelves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sorting-shelf { min-height: 220px; }
  .sorting-shelf-slots { max-width: 185px; }
  .sorting-basket-bar { grid-template-columns: 1fr auto; gap: 10px; }
  .sorting-basket-heading { grid-column: 1 / -1; }
  .sorting-basket { justify-content: start; }
  .sorting-tab { grid-template-columns: 28px 1fr; gap: 3px 7px; padding: 9px; }
  .sorting-tab .sorting-art { width: 28px; height: 28px; grid-row: 1 / 3; }
  .sorting-tab-count { grid-column: 2; }
  .sorting-save { grid-column: 1 / -1; text-align: left; }
  .sorting-hud { grid-template-columns: 1fr auto; }
}
@media (max-width: 560px) {
  .sorting-tabs { gap: 5px; }
  .sorting-tab { display: flex; flex-direction: column; gap: 5px; align-items: center; padding: 8px 5px; text-align: center; }
  .sorting-tab-copy { font-size: .69rem; }
  .sorting-tab-count { font-size: .67rem; }
  .sorting-basket-bar { padding: 9px 10px; }
  .sorting-basket-heading > .sorting-art { width: 34px; height: 34px; }
  .sorting-basket-copy > span { font-size: .64rem; }
  .sorting-basket { gap: 3px; }
  .sorting-basket-slot { width: 40px; height: 44px; }
  .sorting-small-button { padding: 6px 8px; font-size: .67rem !important; }
  .sorting-quick-targets { flex-wrap: nowrap; overflow-x: auto; padding: 0 0 3px; }
  .sorting-quick-target { flex-shrink: 0; min-height: 44px; font-size: .67rem !important; }
  .sorting-quick-help { font-size: .66rem; }
  .sorting-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sorting-shelf { min-height: 225px; padding: 10px 6px; }
  .sorting-shelf-label > strong { font-size: .74rem; }
  .sorting-shelf-label > .sorting-art { width: 40px; height: 40px; }
  .sorting-victory { grid-template-columns: 45px 1fr; padding: 13px; }
  .sorting-victory > .sorting-art { width: 45px; height: 45px; }
  .sorting-victory > strong { font-size: 1.08rem; }
  .sorting-total, .sorting-full { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .sorting-shop *, .sorting-shop *::before, .sorting-shop *::after { transition: none !important; animation: none !important; } }

/* Full-size cabinet view: the same objects and shelves, with their own stage. */
.sorting-shop .sorting-scene{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.sorting-view-tabs{display:flex;gap:8px;flex:0 0 auto;padding:5px;border:1px solid #cebea3;border-radius:14px;background:#ece3d2}
.sorting-shop .sorting-view-button{flex:1;min-height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:#625548;font-weight:750;font-size:.9rem;padding:9px 16px}
.sorting-shop .sorting-view-button[aria-pressed=true]{background:#785878;color:#fff8e8;border-color:#684c68;box-shadow:0 2px 6px #51384825}
.sorting-shop .sorting-view-button.sorting-view-ready:not([aria-pressed=true]){background:#e1ebd4;border-color:#94aa7f;color:#365345}
.sorting-shop .sorting-shelf-panel{padding:12px 15px 20px;border:1px solid #cdb893;border-radius:18px;background:radial-gradient(ellipse at 50% 0,#f9eacd,transparent 80%),repeating-linear-gradient(0deg,#eadabf 0 66px,#dfccab 67px 68px);overflow:auto;scrollbar-gutter:stable}
.sorting-shop .sorting-shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;align-content:start;overflow:visible}
.sorting-shop .sorting-shelf{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;min-height:330px;padding:12px 12px 16px;border:8px solid #99744e;border-bottom-width:13px;border-radius:28px 28px 9px 9px;color:#f9edd3;background:repeating-linear-gradient(93deg,#614737 0 18px,#684a37 20px 37px,#644635 39px 57px);box-shadow:inset 0 0 0 2px #ccad75,inset 0 10px 30px #30221b77,0 5px 0 #78593f,0 10px 14px #71593a35;text-align:center;overflow:hidden;isolation:isolate}
.sorting-shop .sorting-shelf::before{content:'';position:absolute;inset:2px;border:1px solid #e3c59880;border-radius:18px 18px 2px 2px;pointer-events:none}
.sorting-shop .sorting-shelf-carving{display:block;height:29px;color:#e3c28c;flex:0 0 auto}
.sorting-shop .sorting-shelf-carving svg{display:block;width:100%;height:100%}
.sorting-shop .sorting-shelf-label{display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;padding:7px 8px;border:1px solid #d7bd84;border-radius:10px;background:#f8ebcf;color:#5d4535;box-shadow:0 3px 4px #211a1650}
.sorting-shop .sorting-shelf-label>.sorting-art{width:34px;height:34px;flex:0 0 34px;padding:0;background:transparent;box-shadow:none}
.sorting-shop .sorting-shelf-label>strong{font:700 clamp(.78rem,1.1vw,1rem) Georgia,serif;min-height:0;line-height:1.25}
.sorting-shop .sorting-shelf-count{font-size:.85rem;color:#fce1a2;line-height:1.4}
.sorting-shop .sorting-shelf-slots{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%;max-width:none;padding:5px 0 0;flex:1;min-height:0}
.sorting-shop .sorting-shelf-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;min-width:0;padding:0 3px 7px;border-bottom:7px solid #b48a5a;border-radius:0 0 3px 3px;box-shadow:0 3px 0 #5b3e2b,inset 0 -2px #e0b77b;background:linear-gradient(transparent 70%,#e5be8040);position:relative}
.sorting-shop .sorting-shelf-slot{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1;min-width:0;max-height:none;padding:0;border:0;border-radius:0;position:relative;overflow:hidden}
.sorting-shop .sorting-shelf-slot>.sorting-art{display:block;width:100%;height:100%;max-height:65px;opacity:1;filter:drop-shadow(0 2px 1px #1e171575);position:relative;z-index:1}
.sorting-shop .sorting-shelf-slot:not(.sorting-slot-filled)::after{content:'✧';position:absolute;bottom:0;color:#ddba8050;font-size:1rem;line-height:1}
.sorting-shop .sorting-shelf-instruction{font-size:.68rem;color:#e5ceb0;line-height:1.4;margin-top:3px;min-height:1.4em}
.sorting-shop .sorting-shelf-matching{border-color:#bdab6d;box-shadow:inset 0 0 0 2px #ead593,0 5px #887644,0 0 0 3px #abc398}
.sorting-shop .sorting-shelf-full{border-color:#849b63;box-shadow:inset 0 0 0 2px #cfe1a3,0 5px #5a6d45,0 10px 15px #6c895635}
.sorting-shop .sorting-shelf-full .sorting-shelf-instruction{color:#d4edbb}
.sorting-shop .sorting-shelf:focus-visible{outline:3px solid #66a9ca;outline-offset:3px}
@media(max-width:1000px){.sorting-shop .sorting-shelves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sorting-shop .sorting-shelves{grid-template-columns:minmax(0,1fr);gap:20px}.sorting-shop .sorting-shelf{min-height:345px}.sorting-shop .sorting-shelf-label>strong{font-size:1rem}.sorting-shop .sorting-shelf-slot>.sorting-art{max-height:62px}.sorting-shop .sorting-shelf-panel{padding:10px 12px 18px}.sorting-shop .sorting-view-button{font-size:.84rem;padding:8px}}
.sorting-shop[data-room=spells] .sorting-shelf-panel{background:radial-gradient(ellipse at 50% 0,#e4edda,transparent 80%),repeating-linear-gradient(0deg,#c5d6c3 0 66px,#b9cdb9 67px 68px)}
.sorting-shop[data-room=winter] .sorting-shelf-panel{background:radial-gradient(ellipse at 50% 0,#f8e6d9,transparent 80%),repeating-linear-gradient(0deg,#e3c5c1 0 66px,#d5b7b5 67px 68px)}