/* Useful map objects (/gifts/decor/). Builds on the Map Art Studio layout
   (/art/art.css): the object stands on the same green cutting mat, with
   the skyline, ridge or map it is made from in a strip above it. */

.dcr [hidden] { display: none !important; }

/* source strip */
.dcr-src { margin: 0 10px 8px; }
.dcr-srchead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px 5px; }
.dcr-srctitle { font-size: 0.78rem; font-weight: 600; color: rgba(232, 244, 236, 0.75); }
.dcr-srcread { font-size: 0.75rem; color: rgba(232, 244, 236, 0.55); text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dcr-srcbox { position: relative; height: 104px; border-radius: 8px; overflow: hidden; background: #17161c; }
.dcr-srcbox canvas { display: block; width: 100%; height: 100%; }
.dcr-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.dcr-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

/* 3D stage */
.dcr-stage { flex: 1; }
.dcr-3d { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; }
.dcr-3d canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; touch-action: none; }
.dcr-stage .ats-plaque-empty { pointer-events: none; }
.dcr-stage.is-busy .dcr-3d { opacity: 0.8; transition: opacity 0.2s; }

/* object picker */
.dcr-objects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dcr-objects button {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px;
    border: 1px solid transparent; border-radius: 10px; background: var(--field); color: var(--muted);
    font: inherit; font-size: 0.78rem; line-height: 1.2; cursor: pointer; text-align: center;
}
.dcr-objects svg { width: 46px; height: 31px; fill: currentColor; }
.dcr-objects button:hover { color: var(--ink); }
.dcr-objects button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: #232825; font-weight: 600; }
.dcr-objects button[aria-pressed="true"] svg { fill: var(--accent); }
.dcr-objects button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dcr .ats-sec .ats-seg + .ats-hint { margin-top: 8px; }
.dcr .ats-seg button { white-space: normal; line-height: 1.2; }
.dcr-mt0 { margin-top: 0; }
.dcr .ats-row2 .ats-range { margin-top: 12px; }
.dcr .ats-field input[type="text"] { width: 100%; }
.dcr .ats-link { display: block; }
.dcr-ex i { background: conic-gradient(#8a7a5c 0 33%, #d9b77e 0 66%, #50624f 0) !important; }

.dcr-warn { margin: 14px 0 0; padding: 9px 11px; border-radius: 8px; background: rgba(255, 143, 31, 0.1); border: 1px solid rgba(255, 143, 31, 0.35); font-size: 0.8rem; line-height: 1.45; color: var(--ink); }
.dcr-checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.82rem; }
.dcr-checks li { display: flex; gap: 8px; align-items: baseline; }
.dcr-checks li::before { content: '✓'; color: #8fd6a8; font-weight: 700; flex: none; }
.dcr-checks li.is-bad::before { content: '!'; color: #ffb36b; }
.dcr-checks li.is-bad { color: #ffcf9e; }
.dcr-license a { color: var(--ink); }

/* map pins */
.dcr-pin { width: 18px; height: 18px; border-radius: 50%; background: #d9b77e; border: 2px solid #1a1814; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); cursor: grab; }
.dcr-pin-end { width: 14px; height: 14px; background: #fff; }

@media (max-width: 900px) {
    .dcr-stage { flex: none; height: 400px; padding: 0 !important; }
    .dcr-src { margin-top: 2px; }
}
@media (max-width: 420px) {
    .dcr-objects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dcr-stage { height: 340px; }
    .dcr-srcbox { height: 88px; }
    .dcr .ats-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.dcr-map { aspect-ratio: 4 / 3; }