/* Le rangement utilise les cartes de la page comme pièces. */
.packing-instructions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:9px;color:#57465e}
.packing-instructions p{font-size:.9rem}
.packing-instructions button,.pack-handle{font:650 .77rem var(--font-mono);padding:5px 8px;border:1px solid #9b80a8;border-radius:3px;background:#eee4f1;color:#33233d;cursor:pointer}
.pack-handle{touch-action:none;user-select:none;cursor:grab;white-space:nowrap}
.pack-handle:active{cursor:grabbing}
.packing-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px}
.pack-left{display:grid;grid-template-columns:0 minmax(0,1fr);column-gap:0;min-width:0}
[data-title-packed="true"] .pack-left,.pack-left:has(.title-dock.is-target){grid-template-columns:clamp(66px,7vw,94px) minmax(0,1fr);column-gap:8px}
.pack-left-stack,.pack-right{display:grid;gap:8px;min-width:0}
.pack-heading{display:flex;gap:6px;align-items:start;justify-content:space-between;padding:9px 0 12px;min-width:0;transform-origin:center}
.pack-heading h2{font:650 clamp(1.8rem,4vw,3.8rem)/1 var(--font-display);letter-spacing:-.06em}
.pack-heading .mono-tag{margin-bottom:7px}
.pack-card-bar{display:flex;align-items:start;justify-content:space-between;gap:5px}
.pack-card-bar .mono-tag{margin-bottom:9px}
.pack-piece.is-dragging{position:relative;z-index:8;box-shadow:4px 5px #4d355969;pointer-events:none}
.pack-piece.is-dragging .pack-handle{pointer-events:auto}
.pack-dock{position:relative;min-width:0}
.pack-dock.is-target{border:2px dashed #9c80aa;background:#eee5f1}
.pack-dock.is-near{border-color:#5b7139;background:#e2efc9}
.pledges-dock:empty:not(.is-target){display:none}
.pledges-dock.is-target:empty{min-height:60px}
.pack-dock.is-target:empty::after{content:attr(data-ghost);position:absolute;inset:0;display:grid;place-items:center;font:650 10px var(--font-mono);color:#61496d;text-align:center;padding:4px;pointer-events:none}
.title-dock.is-target::after{writing-mode:vertical-rl;transform:rotate(180deg)}
.title-dock:has(.is-packed){min-height:188px;border-bottom:2px solid #7c5a90}
.title-dock .pack-heading.is-packed{position:absolute;left:100%;bottom:0;transform:rotate(-90deg);transform-origin:bottom left;padding:0 3px 5px;width:max-content}
.title-dock .pack-heading.is-packed h2{font-size:clamp(1.25rem,2.25vw,1.8rem)}
.title-dock .pack-heading.is-packed .mono-tag{font-size:8px;margin-bottom:3px}
.packing-layout .about-card{margin:0;padding:clamp(9px,2vw,19px);min-width:0}
.packing-layout .about-card .pledges li{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.packing-game{padding:12px;background:#180f22;color:#f6ebf8;border:1px solid #735589;min-width:0}
.packing-game header{display:flex;justify-content:space-between;align-items:center;gap:7px;flex-wrap:wrap;padding-bottom:8px}
.packing-game header strong,.packing-game #packing-score{color:#d8f995;font:650 11px var(--font-mono)}
.packing-game-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.packing-game canvas{display:block;width:100%;height:auto;max-width:none;aspect-ratio:1/2;image-rendering:pixelated;border:1px solid #816196;touch-action:manipulation}
.packing-game button{padding:6px 8px;background:#2e203b;color:#f6ebf8;border:1px solid #9574ab;cursor:pointer;font:650 .77rem var(--font-mono)}
.packing-game #packing-play{background:#d8f995;color:#20152c;border-color:#d8f995}
.packing-game :is(button,canvas):focus-visible{outline:2px solid #d8f995;outline-offset:2px}
.packing-controls{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
#packing-note{font-size:.82rem;color:#e4d1eb}
@media(max-width:740px){.packing-layout{grid-template-columns:1fr}}
@media(max-width:400px){.packing-layout .about-card .pledges li{grid-template-columns:1fr}.pack-heading{flex-wrap:wrap}}


.packing-game-body>div{border-top:1px solid #735589;padding-top:9px}
body:has(#packing-game:not([hidden])) .guide-pill{position:static;margin:12px 18px;transform:none}

.pack-right>[data-home="pledges"]:empty{display:none}
@media(min-width:741px){
  #packing-game:not([hidden]){
    display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;
    box-sizing:border-box;height:var(--packing-stack-height,auto);
  }
  #packing-game .packing-game-body{min-height:0;grid-template-rows:minmax(0,1fr) auto}
  #packing-game canvas{height:100%;width:auto;max-width:100%;min-height:0;justify-self:center;object-fit:contain}
}

.pack-left-stack>[data-home="title"]:empty{display:none}