.packing-counter{position:absolute;bottom:8px;right:8px;background:#fff7dc;color:#263c43;padding:6px 12px;border-radius:8px;pointer-events:none;font-weight:bold}
.hotspot.packing-help{opacity:1;background:#fff7dc;color:#263c43;font-size:12px;border:1px solid #ab9667;min-height:44px;min-width:110px}
.hotspot.packing-object:active{opacity:1;background:#ffdf7b88;border-radius:50%;box-shadow:0 0 14px #ffe190}
@media(pointer:coarse){.hotspot.packing-object{min-width:36px;min-height:36px}}
/* The original diagrams remain individual, uncropped images. */
.task-dialog[data-task="2a"] .task-content{grid-template-columns:minmax(0,1fr) 28%}
.task-dialog[data-task="2a"] .task-cards{grid-template-columns:1fr}
.task-dialog[data-task="2a"] .drop-zone{display:grid;grid-template-rows:minmax(0,1fr) auto auto;grid-auto-rows:auto;padding:6px;background:#fffaf0;overflow:hidden}
.task-image-open{min-height:44px;padding:4px;font-size:12px;background:#fffaf0;border-style:dashed}
.image-viewer{width:min(950px,calc(100vw - 16px));height:calc(100dvh - 16px);max-height:none;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
.image-viewer:not([open]){display:none}
.image-viewer h2{font-size:20px}
.image-viewer-viewport{overflow:auto;background:#fff;min-height:0;text-align:center}
.image-viewer-viewport img{display:block;width:100%;max-width:none;height:auto;margin:auto}
.image-viewer-actions{display:flex;gap:5px;flex-wrap:wrap}
.image-viewer-actions button{flex:1;font-size:12px;padding:6px}
.task-dialog[data-task="2a"] .drop-zone>img{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
.task-dialog[data-task="2a"] .drop-target{height:44px;min-height:44px;font-size:16px;font-weight:bold;border:1px solid #ab9667;background:#f0ddb4}
.task-dialog[data-task="2a"] .term-card.matched{font-size:12px;padding:5px}
.task-dialog[data-task="2b"] .task-content{grid-template-columns:minmax(0,1fr) 42%}
.task-dialog[data-task="2b"] .task-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.task-dialog[data-task="2b"] .task-cards .term-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85px;gap:4px}
.task-dialog[data-task="2b"] .task-cards .term-card img{height:55px;width:70px}
.task-dialog[data-task="2b"] .drop-zone{padding:6px;display:flex;flex-direction:column;gap:5px;background:#fffaf0;overflow:hidden}
.task-dialog[data-task="2b"] .drop-target{height:44px;min-height:44px;font-size:16px;font-weight:bold;border:1px solid #ab9667;background:#f0ddb4;flex-shrink:0}
.task-dialog[data-task="2b"] .term-card.matched{display:flex;align-items:center;gap:8px;flex:0 1 55px;min-height:25px;font-size:14px;padding:3px 6px;text-align:left}
.task-dialog[data-task="2b"] .term-card.matched img{height:35px;width:38px;flex-shrink:0}
@media(max-width:700px){
 .task-dialog[data-task="2a"] .task-content,.task-dialog[data-task="2b"] .task-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px}
 .task-dialog[data-task="2a"] .task-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .task-dialog[data-task="2a"] .task-cards .term-card{font-size:12px;min-height:44px;padding:5px 23px 5px 5px}
 .task-dialog[data-task="2a"] .term-card.matched{font-size:10px;padding:3px}
 .task-dialog[data-task="2a"] .drop-target,.task-dialog[data-task="2b"] .drop-target{font-size:13px;padding:4px}
 .task-dialog[data-task="2b"] .task-cards{gap:4px}
 .task-dialog[data-task="2b"] .task-cards .term-card{min-height:65px;gap:2px;font-size:11px;padding:3px 19px 3px 3px}
 .task-dialog[data-task="2b"] .task-cards .term-card img{height:28px;width:38px}
 .task-dialog[data-task="2b"] .drop-zone{gap:3px;padding:3px}
 .task-dialog[data-task="2b"] .term-card.matched{font-size:11px;flex-basis:27px;gap:3px;padding:2px}
 .task-dialog[data-task="2b"] .term-card.matched img{height:22px;width:25px}
}
@media(max-height:500px){
 .task-dialog[data-task="2b"] .task-cards .term-card{min-height:44px;font-size:11px;gap:0}
 .task-dialog[data-task="2b"] .task-cards .term-card img{height:20px}
 .task-dialog[data-task="2b"] .term-card.matched{flex-basis:24px;font-size:11px}
 .task-dialog[data-task="2b"] .term-card.matched img{height:20px}
}

.dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-options button{text-align:left;min-height:70px}.dialog-options small{display:block;font-weight:normal;margin-top:8px}.dialog-options button:last-child{grid-column:1/-1}@media(max-width:600px){.dialog-options{grid-template-columns:1fr}}
.task-dialog[data-task="0a"] .drop-zone{display:flex;flex-direction:column;gap:5px;padding:6px;overflow:hidden}.task-dialog[data-task="0a"] .drop-target{height:auto;min-height:44px;flex:0 0 auto}.task-dialog[data-task="0a"] .term-card.matched{flex:0 0 auto;min-height:32px}.dialog-options button{float:none}

.dialogue[data-dialog="0-offers"]{width:min(1100px,96vw);max-width:1100px}.dialogue[data-dialog="0-offers"] .dialog-options{grid-template-columns:repeat(4,minmax(0,1fr))}.illustrated-offer{padding:4px!important;font-size:13px}.illustrated-offer small{display:none}.offer-art{display:block;width:100%;aspect-ratio:3/8;background-size:400% 100%;background-repeat:no-repeat;margin-bottom:5px}.hamburg-detail-art{width:100%;aspect-ratio:1.56;background-size:204% 215%;background-position:0 100%;background-repeat:no-repeat}.detail-offer-art{width:min(230px,100%);aspect-ratio:3/8;background-size:400% 100%;background-repeat:no-repeat;margin:auto}.dialogue[data-artwork] > button{float:none;margin-top:10px}@media(max-width:700px){.dialogue[data-dialog="0-offers"] .dialog-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dialogue[data-dialog="0-offers"]{width:min(850px,96vw)}
.dialogue[data-dialog="0-offers"]{width:min(560px,96vw)}.dialogue[data-dialog="0-offers"] .dialog-options{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-art{max-width:190px;margin:0 auto 6px}.detail-offer-art{width:180px}
.offer-art{max-width:165px}.dialogue[data-dialog="0-offers"] .dialog-options button:last-child{min-height:44px}