.zone-select { box-sizing:border-box; width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:20px; border:2px solid #b38a40; border-radius:16px; background:#fff9ed; color:#332719; }
.zone-select::backdrop { background:#f3e6cc; }
.zone-select h2 { margin:0 0 8px; color:#332719; }
.zone-select p { margin:8px 0; color:#332719; }
.zone-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.zone-options label { display:flex; gap:10px; align-items:center; padding:10px; background:#fff; color:#332719; border:1px solid #c5a56c; border-radius:8px; cursor:pointer; }
.zone-options .zone-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; padding:7px; overflow:hidden; }
.zone-card-art { grid-column:1/-1; display:block; width:100%; height:clamp(130px,29vh,220px); border-radius:6px; background-image:url('../img/dungeons/beta-zones.webp'); background-repeat:no-repeat; background-size:400% auto; background-position:0 70%; }
.zone-card-2 .zone-card-art { background-position:33.333% 70%; }
.zone-options .zone-auto { grid-column:1/-1; }
.zone-options label:has(input:checked) { border-color:#a77720; box-shadow:0 0 0 2px #edc368; background:#fff8e9; }
.zone-options input[type="radio"] { appearance:auto; accent-color:#a77720; flex:0 0 18px; width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px; max-height:18px; margin:0; padding:0; }
.zone-options label span { min-width:0; overflow-wrap:anywhere; }
.zone-select button { background:#edc368; color:#332719; border:1px solid #a77a2e; border-radius:8px; padding:10px 18px; font:inherit; cursor:pointer; }
.zone-select .zone-later { margin-inline-start:8px; background:#fff; }
.zone-badge { color:#493516; background:#fff2cd; border-radius:5px; padding:2px 5px; font-size:12px; white-space:nowrap; }
@media (max-height:450px) { .zone-select { padding:12px 18px; } .zone-options { gap:6px; margin:8px 0; } .zone-options label { padding:7px; } .zone-card-art { height:100px; } }
/* The shared dialog theme uses !important; keep this light/gold surface explicit. */
body[data-ui-version="3"] dialog.zone-select { background:#fff9ed!important; color:#332719!important; border-color:#b38a40!important; color-scheme:light; }
body[data-ui-version="3"] dialog#zone-select.zone-select button[type="submit"] { background:#edc368!important; color:#332719!important; border-color:#a77a2e!important; }
body[data-ui-version="3"] dialog.zone-select .zone-later { background:#fff!important; color:#332719!important; }
.zone-select input[type="radio"] { color-scheme:light; }
/* 10-27 封測區四卡（A金 B藍 C紅 D綠） */
.zone-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
.zone-options .zone-card { position:relative; flex-direction:column; gap:4px; padding:8px; border-width:3px; text-align:center; }
.zone-card img { width:100%; aspect-ratio:330/295; object-fit:cover; border-radius:8px; }
.zone-card b { font-size:18px; }
.zone-card input[type="radio"] { position:absolute; top:12px; left:12px; }
.zone-a { border-color:#d9a520!important; background:#fff6d8!important; }
.zone-b { border-color:#3a86d6!important; background:#e9f3ff!important; }
.zone-c { border-color:#d65151!important; background:#ffeaea!important; }
.zone-d { border-color:#3fa45b!important; background:#e8f7ec!important; }
.zone-card:has(input:checked) { box-shadow:0 0 0 4px #f2c14e; }
.zone-card.soon { filter:grayscale(1); opacity:.6; cursor:not-allowed; }
.zone-options .zone-auto { grid-column:1/-1; }
@media (max-width:600px) { .zone-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-height:450px) { .zone-card img { width:auto; max-width:100%; height:34vh; aspect-ratio:330/295; object-fit:contain; } .zone-options .zone-auto { padding:5px 10px; } .zone-select h2 { margin:0; font-size:18px; } .zone-select p { margin:2px 0; } .zone-options .zone-card { padding:5px; gap:0; } .zone-card b { font-size:15px; } .zone-select button { padding:7px 16px; } }