/* Draw your own world (/gifts/draw-a-world/): on top of the shared maker look
   (/gifts/globes/maker.css). The drawing and the 3D world side by side on a
   wide screen, one above the other on a narrow one. */

.dw .dw-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.dw .dw-draw { background: #121318; border-radius: 14px; padding: 10px 10px 12px; }
.dw .dw-3d { position: relative; top: 0; height: min(62vh, 560px); min-height: 360px; }
@media (min-width: 1280px) {
    .dw .dw-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: sticky; top: 68px; }
    .dw .dw-3d { height: auto; min-height: 0; }
}

/* brushes */
.dw-tools { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.dw .dw-tool {
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
    background: transparent; border: 0; border-radius: 10px; padding: 6px 2px 5px; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 0.72rem; line-height: 1.1;
}
.dw .dw-tool span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw .dw-tool:hover { color: var(--ink); background: #1c201e; }
.dw .dw-tool[aria-pressed="true"] { color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dw .dw-tool > i {
    width: 26px; height: 26px; border-radius: 50%; background: var(--c); flex: none;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dw .dw-tool > i.dw-ico-mtn { clip-path: polygon(50% 6%, 100% 92%, 0 92%); border-radius: 3px; }
.dw .dw-tool > i.dw-ico-river { background: linear-gradient(135deg, transparent 38%, var(--c) 38% 62%, transparent 62%), #1c201e; }
.dw .dw-tool > i.dw-ico-bx { background: #262b29; color: var(--ink); font-size: 16px; display: grid; place-items: center; }
.dw-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.dw-row .wm-seg button { padding: 5px 10px; font-size: 0.8rem; }
.dw-row .wm-seg button:disabled { opacity: 0.35; cursor: default; }
.dw-row .wm-seg .bx { vertical-align: -2px; margin-right: 2px; }
.dw-size { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 110px; color: var(--muted); }
.dw-size input { flex: 1; min-width: 0; accent-color: var(--gold); }
.dw-size input:disabled { opacity: 0.35; }
.dw-acts { display: flex; gap: 2px; }
.dw .dw-act { width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--field); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 1.15rem; padding: 0; }
.dw .dw-act:hover:not(:disabled) { background: #2a302d; }
.dw .dw-act:disabled { opacity: 0.35; cursor: default; }

/* the paper */
.dw-canvas-wrap {
    --ar: 1 / 1;
    position: relative; width: 100%; aspect-ratio: var(--ar); margin: 0 auto;
    max-width: min(100%, calc((100vh - 250px) * 1.5));
    border-radius: 8px; overflow: hidden; background: #4f8fc0; touch-action: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dw-canvas, .dw-over, .dw-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dw-canvas { cursor: crosshair; touch-action: none; }
.dw-over { pointer-events: none; }
.dw-photo { object-fit: cover; }
.dw-canvas-wrap.has-photo .dw-canvas { opacity: 0.55; }
.dw-canvas-wrap.is-fill .dw-canvas { cursor: cell; }
.dw-canvas-wrap.is-placing .dw-canvas { cursor: copy; }
.dw-placing {
    position: absolute; left: 50%; top: 10px; transform: translateX(-50%); margin: 0; pointer-events: none;
    background: rgba(20, 23, 22, 0.88); color: var(--ink); font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* 3D */
.dw-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; z-index: 2; }
.dw-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.dw .wm-stagebar .wm-btn { padding: 6px 10px; font-size: 0.8rem; }

/* panel */
.dw .dw-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 14px 0 6px; }
.dw-photo-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dw-photo-btns .wm-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.84rem; }
.dw .wm-seg button { white-space: normal; line-height: 1.2; }
.dw-ends { display: flex; justify-content: space-between; margin-top: 2px; }
.dw-seed { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 0.86rem; }
.dw-seed .wm-btn { font-weight: 500; font-size: 0.84rem; }
.dw-names { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dw-name { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px; align-items: center; }
.dw-name input { min-width: 0; background: var(--field); color: var(--ink); border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 0.86rem; }
.dw-name input:focus { outline: none; border-color: var(--accent); }
.dw-nsize { display: flex; background: var(--field); border-radius: 7px; padding: 2px; }
.dw-nsize button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem; width: 22px; height: 26px; border-radius: 5px; cursor: pointer; padding: 0; }
.dw-nsize button[aria-pressed="true"] { background: var(--ink); color: #141716; }
.dw .dw-nbtn { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; font-size: 1.05rem; padding: 0; }
.dw .dw-nbtn:hover, .dw .dw-nbtn.is-on { color: var(--ink); background: #262b29; }
.dw .dw-nbtn.is-on { box-shadow: inset 0 0 0 1.5px var(--gold); }
.dw .wm-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw .wm-colors label[hidden] { display: none; }

@media (max-width: 560px) {
    .dw .dw-draw { padding: 8px 6px 10px; margin: 0 -6px; }
    .dw-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dw .dw-tool { font-size: 0.7rem; padding: 5px 1px; }
    .dw-canvas-wrap { max-width: 100%; }
    .dw .dw-3d { height: 56vh; min-height: 320px; }
    .dw .wm-colors { grid-template-columns: minmax(0, 1fr); }
}