/* ===== 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"] #tourControls{display:none !important}

/* classic layout: centred topbar + left swatch rail */
body[data-gui="classic"] #hud{align-items:center}
/* One centred group: the wordmark, the World Clocks box and the Daylight box ride shoulder to
   shoulder on the same axis as the world chips, and the group stays on the centre line as boxes
   appear and go with the mode. Phones hand the row over to a wrapped layout further down. */
body[data-gui="classic"] #topbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  width:min(96vw,1200px);margin:12px auto 0;gap:6px}
body[data-gui="classic"] #clocksBtn{font-size:11px;letter-spacing:.1em;padding:5px 11px 5px 13px}
body[data-gui="classic"] #wmGrid{margin:9px auto 0;gap:2px;padding:6px 7px;max-width:min(96vw,900px);overflow:visible;flex-wrap:wrap}
/* Sun features rides beside the swatches instead of under them, so the ten annotated
   switches get the height the swatches used to eat. The 16px gap keeps clear of the
   rail's own tilt, whose lower-left corner reaches about 8px to the left. */
body[data-gui="classic"] #sidepanel{display:flex;flex-direction:row;align-items:center;position:fixed;left:11px;top:50%;right:11px;transform:translateY(-50%);background:none;border:0;border-radius:0;padding:0;gap:16px}
/* The band between the sun-feature rail (left) and the colour selector (right) is empty, so it
   must not eat orbit drags: only the two rails themselves take pointer input. */
body[data-gui="classic"] #sidepanel{pointer-events:none}
body[data-gui="classic"] #sidepanel .swgrp,
body[data-gui="classic"] #sidepanel .sunfx{pointer-events:auto}
/* Order puts the sun-feature rail on the left even though the colour selector comes first in the
   markup; the single auto margin before the selector pins it to the right edge — and it still
   reaches the right edge on its own when the sun rail is hidden. */
body[data-gui="classic"] #sidepanel .sunfx{order:1}
body[data-gui="classic"] #sidepanel .swgrp.themes{order:2;margin-left:auto}
/* The panel is centred in the viewport, so capping the rail keeps it inside the band
   between the world chips (ends at 97px) and the status line (starts 116px from the
   bottom): the rail then scrolls instead of running underneath the bottom bar. */
body[data-gui="classic"] #sidepanel .sunfx{max-height:calc(100vh - 248px)}
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}
/* The pill pair rides #bottomRow's column, so the only knob left is the gap: these two pills cast
   no shadow, so 4px is a hairline rather than a gap, and the bar's own shadow falls below it. */
body[data-gui="classic"] #bottomRow{gap:4px}
body[data-gui="classic"] #vignette{opacity:1}

/* card back to the classic flyby caption */
body[data-gui="classic"] #card{position:fixed;right:56px;bottom:166px;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}
/* The daylight box wears the same Memphis frame as its neighbours, but 2px/3px instead of 3px/4px:
   its frame is what made it tower over the clocks box, and the switch inside already uses 2px. */
body[data-gui="classic"][data-design="11"] #sunGrp{border:2px solid var(--ink);border-radius:16px 5px;background:var(--cardbg);box-shadow:3px 3px 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"] .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:var(--softink);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"] #sidepanel .sunfx{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.6deg);padding:6px 10px 7px 9px}
body[data-gui="classic"][data-design="11"] #sidepanel .sunfx .fxlab{font-weight:800;font-size:9px;letter-spacing:.14em}
body[data-gui="classic"] #sidepanel .ck{font-size:8.5px;letter-spacing:.08em;gap:4px}
body[data-gui="classic"] #sidepanel .fxnote{font-size:7.4px;line-height:1.42}
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"] #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%)}

/* ============ CLOCK BANDS — wall of clocks left, time codes right ============ */
/* Both rails live inside #bands, which hangs off #hud so they ride the HUD's centred column and
   the .zen fade-out, share one top edge under the Sun chip, and sit at opposite ends of the band.
   The daylight pill is the wall's first child, so sunrise/sunset heads it, and the wall owns the
   left band — which is why the sun-feature rail stands down in clock view (the Sun is hidden
   there anyway). */
/* Unframed on purpose — the clocks flow straight onto the sky in two columns, so the gaps
   between them must keep handing orbit drags to the canvas: only the pill and the rows take
   pointer input. The height reserve clears the HUD above (topbar + chips, ~106px) and the
   status pills plus the transport bar below (~126px); below 900px those bars wrap and grow. */
/* Two rails, mirrored: equal widths and one equal inset on each side put the Earth dead centre
   between them, and both rails are one list apiece with the same margins and the same .wclock
   row, so their clocks land on the same rows. The inset is 45px because the colour selector owns
   the last 31px of the right edge (x 1409-1429 at 1440px) and the rails must leave it clear. */
body[data-gui="classic"] #bands{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  box-sizing:border-box;width:100%;padding:0 45px;pointer-events:none}
body[data-gui="classic"] #clockWall{display:none;box-sizing:border-box;flex-direction:column;
  gap:8px;width:min(40vw,352px);margin:9px 0 11px;padding:0;pointer-events:none;max-height:calc(100vh - 236px)}
body[data-gui="classic"][data-mode="clocks"] #clockWall{display:flex}
body[data-gui="classic"][data-mode="clocks"] #sidepanel .sunfx{display:none}
/* The daylight box rides the bar hard against World Clocks, and appears with clock view and no
   other. It wears the same Memphis box as the wordmark and the clocks box — design 11 gives that
   to #sunGrp already — so only the type inside needs setting, and the whole box is a step smaller
   than the wordmark so the group reads as matched controls. One line, no wrap: the bar has the
   row, not two. */
body[data-gui="classic"] #topbar #sunGrp{box-sizing:border-box;gap:5px;padding:2px 7px 2px 8px;
  flex-wrap:nowrap;max-width:100%}
body[data-gui="classic"] #topbar #sunGrp .daylab{font-size:7.5px;letter-spacing:.16em}
body[data-gui="classic"] #topbar #sunGrp .daybtn{font-size:9px;padding:4px 7px;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
/* The format pair is one control in one frame: two segments sharing a border, the live one
   filled with the theme accent — the same pressed look the world chips give a chosen zone. It
   reaches the daylight buttons' height by the same arithmetic they do — 1.55 leading on the
   label plus padding — so the pill reads as one row of matched parts. */
body[data-gui="classic"] .fmtPick{display:inline-flex;flex:none;align-self:center;border:2px solid var(--ink);
  border-radius:10px 3px;overflow:hidden;background:var(--cardbg);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 65%,#000)}
body[data-gui="classic"] .fmtbtn{font:inherit;font-size:9px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;background:none;border:0;
  border-left:2px solid var(--ink);color:var(--softink);cursor:pointer;
  white-space:nowrap;transition:background .18s,color .18s}
body[data-gui="classic"] .fmtbtn:first-child{border-left:0}
body[data-gui="classic"] .fmtbtn:hover{color:var(--ink)}
body[data-gui="classic"] .fmtbtn.on{background:var(--accent);color:var(--cardbg)}
/* one step down with the daylight buttons, so the switch keeps their height (1.55 leading plus
   padding on both) while the pair shrinks together */
body[data-gui="classic"] #topbar #sunGrp .fmtbtn{font-size:8px;padding:4px 6px}
body[data-gui="classic"] #wallList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 5px;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
  padding-right:3px;pointer-events:auto}
body[data-gui="classic"] #wallList::-webkit-scrollbar{width:5px}
body[data-gui="classic"] #wallList::-webkit-scrollbar-thumb{background:var(--edge);border-radius:999px}
body[data-gui="classic"] .wclock{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:1px 7px;
  box-sizing:border-box;width:100%;font:inherit;text-align:left;cursor:pointer;color:var(--ink);
  background:none;border:0;border-radius:10px;padding:3px 6px;transition:background .18s}
body[data-gui="classic"] .wclock:hover{background:color-mix(in srgb,var(--cardbg) 80%,transparent)}
body[data-gui="classic"] .wclock.active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
body[data-gui="classic"] .wclock:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
body[data-gui="classic"] .wc-gfx{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px}
body[data-gui="classic"] .wc-text{grid-column:2;display:flex;flex-direction:column;min-width:0}
body[data-gui="classic"] .wc-city{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-gui="classic"] .wc-read{display:flex;align-items:baseline;gap:1px;color:var(--ink);line-height:1.15;
  font-size:15px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
body[data-gui="classic"] .wc-read i{font-style:normal;opacity:.55}
/* the meridian marker, only ever filled in the AM/PM house: quieter and smaller than the digits */
body[data-gui="classic"] .wc-ap{font-style:normal;font-size:.56em;font-weight:700;letter-spacing:.1em;
  color:var(--softink);margin-left:3px}
body[data-gui="classic"] .wc-sub{display:flex;align-items:center;gap:6px;font-size:7px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--softink);white-space:nowrap;overflow:hidden}
/* SUN AND MOON: the DAY/NIGHT word is gone and the two bodies sit beside the time instead, the
   one that applies standing bright while the other is pushed well back. Drawn, not typeset — no
   device is promised a ☀ glyph, and a carved crescent answers the ring above it.
   These are the smallest marks on the wall and they sit on a dark card, so they carry their own
   light: fixed gold and silver rather than var(--glow)/var(--ink), which on a cool theme is a dim
   blue dot nobody can pick out, and a lit-side highlight over a shaded far limb so the disc reads
   as a body rather than a dot. The dormant one drops to .28 — quieter than the colon at .55, so
   only one shape in the row ever glows. */
body[data-gui="classic"] .wc-sky{display:inline-flex;align-items:center;gap:5px;margin-left:7px;align-self:center}
body[data-gui="classic"] .wc-read .wc-sky i{display:block;flex:none;width:10px;height:10px;border-radius:50%;opacity:.28}
body[data-gui="classic"] .wc-sun{background:radial-gradient(circle at 32% 28%,#fffbe8,#ffd75e 45%,#ff9e2c)}
/* a disc with a bite out of it is a crescent — the same mask trick the lit rim plays on the ring */
body[data-gui="classic"] .wc-moon{background:radial-gradient(circle at 32% 28%,#ffffff,#e6efff 45%,#9fb6d8);
  -webkit-mask:radial-gradient(circle at 80% 24%,transparent 0 44%,#000 51%);
  mask:radial-gradient(circle at 80% 24%,transparent 0 44%,#000 51%)}
body[data-gui="classic"] .wclock.lit .wc-sun{opacity:1;filter:drop-shadow(0 0 4px rgba(255,196,64,.95))}
body[data-gui="classic"] .wclock:not(.lit) .wc-moon{opacity:1;filter:drop-shadow(0 0 4px rgba(206,226,255,.9))}
/* ORBIT: a bare ring with the two star hands in the middle — no sun pip and no city pip, the stars
   carry the time on their own. The rim lights only across the hours that city really has daylight,
   and that lit rim is what places the sun. */
body[data-gui="classic"] .wc-orbit{position:relative;display:block;width:34px;height:34px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--dim) 60%,transparent)}
/* 0 on the ring is local midnight, so the daylight band starts half a turn before the sunrise
   fraction and runs for the width of the day; the mask thins it to a rim. */
body[data-gui="classic"] .wc-orbit::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from calc((var(--b0,0) + .5) * 1turn),
    color-mix(in srgb,var(--glow) 55%,transparent) 0 calc(var(--bw,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 0 74%,#000 79%);mask:radial-gradient(circle,transparent 0 74%,#000 79%);
  pointer-events:none}
/* hands: a dim spoke grows out of the centre, a bright star rides its tip and stays upright */
body[data-gui="classic"] .wc-hand{position:absolute;left:50%;bottom:50%;width:1.5px;margin-left:-.75px;
  transform-origin:50% 100%;pointer-events:none;
  background:linear-gradient(to top,transparent,color-mix(in srgb,var(--ink) 50%,transparent))}
body[data-gui="classic"] .wc-hand-h{height:8px;transform:rotate(calc(var(--ha,0) * 1deg))}
body[data-gui="classic"] .wc-hand-m{height:12px;transform:rotate(calc(var(--ma,0) * 1deg))}
body[data-gui="classic"] .wc-star{position:absolute;left:50%;top:0;width:6px;height:6px;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  background:var(--ink);filter:drop-shadow(0 0 3px var(--glow))}
body[data-gui="classic"] .wc-hand-h .wc-star{width:5px;height:5px;transform:translate(-50%,-50%) rotate(calc(var(--ha,0) * -1deg))}
body[data-gui="classic"] .wc-hand-m .wc-star{transform:translate(-50%,-50%) rotate(calc(var(--ma,0) * -1deg))}
body[data-gui="classic"] .wclock.active .wc-star{background:var(--accent);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 80%,transparent))}
/* Memphis keeps the wall unframed as well — tilt and hard shadows stay on the pill and buttons */
body[data-gui="classic"][data-design="11"] .wclock{border-radius:9px 2px}
body[data-gui="classic"][data-design="11"] .wclock.active{background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* ===== TIME-CODE RAIL: the same orbit clocks, mirrored on the right ===== */
/* Fixed offsets, so no zone database and no DST guessing — see the code-rail notes in index.html.
   The rail borrows the wall's markup and its row grid outright, so every code clock shares a row
   with the city clock opposite it. */
body[data-gui="classic"] #codeWall{display:none;box-sizing:border-box;flex-direction:column;
  gap:8px;width:min(40vw,352px);margin:9px 0 11px;padding:0;pointer-events:none;max-height:calc(100vh - 236px)}
body[data-gui="classic"][data-mode="clocks"] #codeWall{display:flex}
/* a fixed offset's solar noon is its own clock noon (minus the equation of time), so the lit half
   of its rim is always the same half: six to eighteen on its own face. */
body[data-gui="classic"] #codeWall .wc-orbit{--b0:.25;--bw:.5}
body[data-gui="classic"] #codeList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 5px;
  min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--edge) transparent;
  padding-left:3px;pointer-events:auto}
body[data-gui="classic"] #codeList::-webkit-scrollbar{width:5px}
body[data-gui="classic"] #codeList::-webkit-scrollbar-thumb{background:var(--edge);border-radius:999px}
/* the codes are a reference, not a control: the row is the same, the affordance is not */
body[data-gui="classic"] #codeWall .wclock{cursor:default}
body[data-gui="classic"] #codeWall .wclock:hover{background:none}

@media(max-width:1100px){
  /* two 352px walls leave too little Earth between them here; both rails step down together, and
     together they stay mirrored, so the rows keep lining up */
  body[data-gui="classic"] #clockWall,
  body[data-gui="classic"] #codeWall{width:min(31vw,300px)}
}

@media(max-width:900px){
  /* the status pills and the transport bar wrap and grow here, so they claim more of the column */
  body[data-gui="classic"] #clockWall,
  body[data-gui="classic"] #codeWall{max-height:calc(100vh - 296px)}
  /* the two slots need 560px at full size, which a tablet cannot hold; one step down on type
     keeps the wordmark and the World Clocks box on a single left-centre row */
  body[data-gui="classic"] #topbar{width:96vw;gap:8px}
  body[data-gui="classic"] #title,
  body[data-gui="classic"] #clocksBtn{font-size:10px;letter-spacing:.26em;padding:4px 10px}
  /* the daylight box shares that row, so it steps down with the rest of the bar: sunrise, sunset
     and the format pair still fit one line where the wordmark alone would not */
  body[data-gui="classic"] #topbar #sunGrp{gap:5px;padding:3px 6px 3px 8px}
  body[data-gui="classic"] #topbar #sunGrp .daylab{font-size:7.5px;letter-spacing:.16em}
  body[data-gui="classic"] #topbar #sunGrp .daybtn{font-size:9px;padding:4px 7px}
  body[data-gui="classic"] .fmtbtn{font-size:8px;padding:5px 6px}
}

@media(max-width:700px){
  body[data-gui="classic"] #sidepanel{left:6px;right:6px;gap:12px}
  /* the centred group gives way to a wrapping row: the wordmark keeps the left edge and the
     World Clocks box centres itself in the space that is left */
  body[data-gui="classic"] #topbar{display:flex;flex-wrap:wrap;justify-content:space-between;width:96vw;gap:8px}
  body[data-gui="classic"] #title,
  body[data-gui="classic"] #clocksBtn{font-size:10px;letter-spacing:.28em;padding:4px 10px}
  /* a wrapped row holds one box, and space-between parks it left; auto margins pull the
     clocks box back to the centre while the wordmark keeps the left edge */
  body[data-gui="classic"] #clocksBtn{margin-inline:auto}
  /* A 390px screen has no left band to spare: both clock columns stand down and the Earth stays
     visible, while the daylight box rides on in the top bar — it wraps to a line of its own. */
  body[data-gui="classic"] #bands{padding:0 11px}
  body[data-gui="classic"] #clockWall{max-height:none;width:auto;margin:8px 0 0}
  body[data-gui="classic"] #wallList{display:none}
  body[data-gui="classic"] #codeWall,
  body[data-gui="classic"][data-mode="clocks"] #codeWall{display:none}
  /* the wrapped row holds one box, and auto margins keep each one on the axis of the box above it */
  body[data-gui="classic"] #topbar #sunGrp{max-width:100%;order:3;margin-inline:auto}
  /* The transport bar wraps to three lines here and the sim pills stack above it, so the caption
     clears the whole stack — vh does the work, 160px covers a wide-but-short landscape. */
  body[data-gui="classic"] #card{right:34px;bottom:max(160px,27vh)}
  /* wider world-chip wrap on a phone: the band starts at 198px instead of 97px */
  body[data-gui="classic"] #sidepanel .sunfx{max-height:calc(100vh - 420px)}
  /* no tilt here: rotating a tall panel pushes its lower-left corner off a 390px screen */
  body[data-gui="classic"][data-design="11"] #sidepanel .sunfx{width:126px;gap:6px;transform:none}
  body[data-gui="classic"] #sidepanel .fxnote{font-size:7px}
  body[data-gui="classic"] #statline{display:none}
  body[data-gui="classic"] #hint{white-space:normal;text-align:center;max-width:92vw;bottom:10px}
}