/* ===== CLASSIC GUI SKIN ===== */

/* hide elements not used in classic */
body[data-gui="classic"] #modes,
body[data-gui="classic"] #heroCopy,
body[data-gui="classic"] #scaleNote,
body[data-gui="classic"] #cityDock,
body[data-gui="classic"] #tourControls{display:none !important}

/* classic layout: centred topbar + left swatch rail */
body[data-gui="classic"] #hud{align-items:center}
body[data-gui="classic"] #topbar{width:auto;justify-content:center;margin:12px 0 0;gap:14px;flex-wrap:wrap}
body[data-gui="classic"] #wmGrid{margin:9px auto 0;gap:2px;padding:6px 7px;max-width:min(96vw,900px);overflow:visible;flex-wrap:wrap}
body[data-gui="classic"] #tzbar{display:flex !important;position:static}
body[data-gui="classic"] #sunGrp{position:static;top:auto;right:auto;left:auto;padding:3px 4px 3px 10px;background:var(--panel)!important}
body[data-gui="classic"] #sidepanel{display:flex;position:fixed;left:11px;top:50%;right:auto;transform:translateY(-50%);background:none;border:0;border-radius:0;padding:0}
body[data-gui="classic"] #sidepanel .swgrp.themes .swrow{grid-template-columns:auto}
body[data-gui="classic"] .tsw{width:20px!important;height:20px!important;border:2px solid var(--ink)!important;border-radius:7px 2px!important}

/* controls the observatory skin hides */
body[data-gui="classic"] #tbar .ck,
body[data-gui="classic"] #tbar>label{display:inline-flex}
body[data-gui="classic"] #tbar .sep{display:block}
body[data-gui="classic"] #fps{display:inline}
body[data-gui="classic"] #visits{display:inline}
body[data-gui="classic"] #statline{display:flex}
body[data-gui="classic"] #hint{display:block}
body[data-gui="classic"] #statRow{bottom:90px}
body[data-gui="classic"] #vignette{opacity:1}

/* card back to the classic flyby caption */
body[data-gui="classic"] #card{position:fixed;right:26px;bottom:142px;max-width:min(46vw,360px);padding:0;text-align:center;background:none;border:0;border-radius:0;backdrop-filter:none}
body[data-gui="classic"] #card .flist{font-size:clamp(12px,1.7vw,14.5px);line-height:1.55;font-weight:500;color:#fff;text-shadow:0 1px 9px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.6)}
body[data-gui="classic"] #card .flist b{color:var(--accent);font-weight:700}
body[data-gui="classic"] #card .flist .stat{color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:.82em;margin-top:7px}

/* labels */
body[data-gui="classic"] .lbl{font-size:9px;letter-spacing:.2em;opacity:.46;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.85)}
body[data-gui="classic"] .lbl:hover,body[data-gui="classic"] .lbl.sel{opacity:1}

/* ===== Memphis re-asserts (beat the observatory resets) ===== */
body[data-gui="classic"][data-design="11"] #title{font-size:14px;font-weight:800;letter-spacing:.14em;border:3px solid var(--ink);border-radius:16px 5px;background:var(--cardbg);box-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 65%,#000);transform:rotate(-1.2deg);padding:4px 15px 4px 18px}
body[data-gui="classic"][data-design="11"] #tzbar{border:3px solid var(--ink);border-radius:16px 5px;background:var(--cardbg);box-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 65%,#000);padding:1px 4px 1px 9px;transform:rotate(-1.2deg)}
body[data-gui="classic"][data-design="11"] #tzbar .tzlab{font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
body[data-gui="classic"][data-design="11"] #sunGrp{border:3px solid var(--ink);border-radius:16px 5px;background:var(--cardbg);box-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 65%,#000);padding:3px 4px 3px 9px;transform:rotate(-1.2deg)}
body[data-gui="classic"][data-design="11"] #sunGrp .daylab{font-weight:800}
body[data-gui="classic"][data-design="11"] #tzSel{-webkit-appearance:none;appearance:none;font-weight:800;font-size:14px;letter-spacing:.14em;
  color:var(--ink);background-color:var(--cardbg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  border:2px solid var(--ink);border-radius:14px 4px 14px 4px;padding:3px 26px 3px 10px;
  transform:rotate(-1.6deg);box-shadow:3px 3px 0 color-mix(in srgb,var(--glow) 70%,#000)}
body[data-gui="classic"][data-design="11"] #tzGo{border:2px solid var(--ink);border-radius:10px 3px;font-weight:800;font-size:14px;letter-spacing:.14em;padding:3px 12px}
body[data-gui="classic"][data-design="11"] #tzGo.on{background:var(--accent);color:#000;border-color:#000}
body[data-gui="classic"][data-design="11"] .chip{border:2px solid var(--ink);border-radius:14px 4px 14px 4px;font-weight:800;transform:rotate(-1.6deg);background:var(--panel);box-shadow:3px 3px 0 color-mix(in srgb,var(--glow) 70%,#000);font-size:9px;letter-spacing:.14em;color:color-mix(in srgb,var(--dim) 55%,var(--ink) 45%);padding:3px 8px}
body[data-gui="classic"][data-design="11"] .chip:nth-child(even){transform:rotate(1.6deg)}
body[data-gui="classic"][data-design="11"] .chip.on{background:var(--accent);color:#000;border-color:#000;transform:rotate(0deg) scale(1.1)}
body[data-gui="classic"][data-design="11"] .chip:hover{color:var(--ink)}
body[data-gui="classic"][data-design="11"] .daybtn{border:2px solid var(--ink);border-radius:10px 3px;box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 65%,#000);background:var(--cardbg);color:var(--ink)}
body[data-gui="classic"][data-design="11"] #card h2{display:table;margin:0 auto 8px;padding:2px 8px 3px;font-weight:700;font-size:clamp(10px,1.6vw,13px);letter-spacing:.04em;line-height:1;color:var(--ink);background:var(--cardbg);border:3px solid var(--ink);border-radius:16px 5px 12px 6px;box-shadow:5px 5px 0 color-mix(in srgb,var(--accent) 65%,#000)}
body[data-gui="classic"][data-design="11"] #tbar{border:3px solid var(--ink);border-radius:20px;background:var(--cardbg);box-shadow:5px 5px 0 color-mix(in srgb,var(--glow) 70%,#000);padding:6px 11px;gap:8px}
body[data-gui="classic"][data-design="11"] #tbar button{border:2px solid var(--ink);border-radius:12px 4px;font-weight:800;padding:3px 10px;font-size:9.5px;letter-spacing:.12em}
body[data-gui="classic"] #tbar .ck{font-size:8.5px;letter-spacing:.08em;gap:4px}
body[data-gui="classic"] #tbar span{font-size:9px;letter-spacing:.06em}
body[data-gui="classic"] #tbar{gap:8px;padding:6px 11px}
body[data-gui="classic"][data-design="11"] #clockBox{border:3px solid var(--ink);border-radius:16px 5px;background:var(--cardbg)}
body[data-gui="classic"][data-design="11"] #statline{border:3px solid var(--ink);border-radius:16px 5px;background:var(--cardbg)}
body[data-gui="classic"][data-design="11"] #tzPin{background:var(--cardbg);border:2px solid var(--ink);border-radius:14px 4px 14px 4px;box-shadow:3px 3px 0 color-mix(in srgb,var(--glow) 70%,#000);padding:6px 14px 7px;transform:translate(-50%,-50%) rotate(-1.6deg)}
body[data-gui="classic"] #grade{display:block !important;opacity:.5;background-image:linear-gradient(120deg, rgba(0,22,60,.18), rgba(0,0,0,0) 45%, rgba(255,180,70,.28) 75%, rgba(0,0,0,0) 100%)}

@media(max-width:700px){
  body[data-gui="classic"] #sidepanel{left:6px;gap:8px}
  body[data-gui="classic"] #statline{display:none}
  body[data-gui="classic"] #hint{white-space:normal;text-align:center;max-width:92vw;bottom:10px}
}