/* Sail Navigation Simulator — chart-room theme */
:root{
  --bg:#0b1622; --bg2:#0f1e2e; --panel:#122437; --panel2:#162c42;
  --line:#22405c; --line2:#2d5478;
  --fg:#dce9f7; --dim:#8fa9c4; --dim2:#65809b;
  --accent:#39a0ff; --accent2:#7fd3ff;
  --good:#3ecf8e; --warn:#f2b134; --bad:#ff5f57;
  --port:#e02b3a; --stbd:#1f9d55; --yellow:#f2c53d; --black:#14181c; --magenta:#ff3ec8;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:13px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  overflow:hidden;
}
#app{display:flex;height:100%;position:relative}

/* ---------------- sidebar ---------------- */
#sidebar{
  width:340px;flex:0 0 340px;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:1000;transition:margin-left .18s ease;
}
#sidebar.collapsed{margin-left:-340px}
/* When the panel is closed the toggle becomes a clearly visible tab against the
   left edge of the chart — otherwise it is far too easy to close it and not find
   the way back. */
#sidebar.collapsed #side-toggle{
  position:fixed;left:0;top:92px;z-index:1100;   /* clear of the instrument strip */
  transform:rotate(180deg);
  width:22px;height:58px;font-size:15px;
  background:var(--accent);color:#06131f;border-color:var(--accent);
  border-radius:var(--r) 0 0 var(--r);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
#sidebar.collapsed #side-toggle:hover{background:var(--accent2);color:#06131f}

.brand{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.brand-t{flex:1;min-width:0}
.brand b{display:block;font-size:13.5px;letter-spacing:.2px}
.brand small{display:block;color:var(--dim2);font-size:11px}
#side-toggle{
  background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  width:24px;height:26px;border-radius:6px;transition:transform .18s ease;
}
#side-toggle:hover{color:var(--fg);border-color:var(--line2)}

.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg2)}
.tab{
  flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
  padding:9px 4px;font:inherit;font-size:12px;cursor:pointer;
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--accent2);border-bottom-color:var(--accent)}

.panels{flex:1;overflow-y:auto;overflow-x:hidden}
.panel{display:none;padding:10px}
.panel.active{display:block}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:10px}
.card-h{
  display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.9px;color:var(--dim);margin-bottom:8px;
}
.card-h small{text-transform:none;letter-spacing:0;color:var(--dim2);font-size:11px;margin-left:auto}
.pill{
  background:var(--line);color:var(--accent2);border-radius:99px;padding:1px 8px;
  font-size:10.5px;letter-spacing:.4px;text-transform:none;
}
.hint{color:var(--dim2);font-size:11.5px;margin:6px 0}
.hidden{display:none !important}

/* recommendation card */
.card.rec{background:linear-gradient(160deg,#14304a,#122437);border-color:var(--line2)}
.pos{font-size:16px;font-weight:600;color:var(--accent2);margin-bottom:8px}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-bottom:8px}
.rec-grid>div{background:#0e2033;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.rec-grid>div:last-child{grid-column:1/-1}
.rec-grid label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim2)}
.rec-grid b{font-size:13px;color:var(--fg);font-weight:600}
.notes{list-style:none;margin:0;padding:0}
.notes li{position:relative;padding-left:14px;color:var(--dim);font-size:12px;margin:3px 0}
.notes li:before{content:"";position:absolute;left:3px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.warn{
  margin-top:8px;background:rgba(242,177,52,.12);border:1px solid rgba(242,177,52,.45);
  color:#ffd98a;border-radius:6px;padding:7px 9px;font-size:12px;
}
.warn.danger{background:rgba(255,95,87,.13);border-color:rgba(255,95,87,.5);color:#ffb3ae}
.warn .w-bad{color:#ff9a94;font-weight:600}
.warn .w-warn{color:#ffd98a}
.warn div+div{margin-top:4px}

/* sail locker */
.locker{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}
.sailbtn{
  background:#0e2033;border:1px solid var(--line);color:var(--dim);border-radius:6px;
  padding:7px 8px;font:inherit;font-size:12px;cursor:pointer;text-align:left;line-height:1.25;
}
.sailbtn small{display:block;color:var(--dim2);font-size:10px}
.sailbtn:hover{border-color:var(--line2);color:var(--fg)}
.sailbtn.on{background:#12405f;border-color:var(--accent);color:#fff}
.sailbtn.suggest{border-color:var(--good);box-shadow:inset 0 0 0 1px rgba(62,207,142,.35)}
.reefs{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.reefs>label{font-size:11px;color:var(--dim2);width:34px}
.seg{display:flex;flex:1;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg.wide{margin-bottom:8px}
.seg button{
  flex:1;background:#0e2033;border:0;border-right:1px solid var(--line);color:var(--dim);
  padding:6px 2px;font:inherit;font-size:11px;cursor:pointer;
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--accent);color:#06131f;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
button.ghost,button.primary{
  background:#0e2033;border:1px solid var(--line);color:var(--fg);border-radius:6px;
  padding:7px;font:inherit;font-size:12px;cursor:pointer;width:100%;
}
button.ghost:hover{border-color:var(--line2);background:#14293e}
button.ghost.on{background:var(--accent);border-color:var(--accent);color:#06131f;font-weight:600}
button.primary{background:var(--accent);border-color:var(--accent);color:#06131f;font-weight:600}
button.primary:hover{background:var(--accent2)}
.eff{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--dim)}
.eff b{color:var(--fg)}
.eff .bar{flex:1;height:5px;background:#0b1a29;border-radius:3px;overflow:hidden}
.eff .bar i{display:block;height:100%;width:100%;background:var(--good);transition:width .25s,background .25s}

/* trim table + deck */
.deck{display:flex;justify-content:center;margin:2px 0 8px;cursor:grab;touch-action:none;user-select:none}
.deck:active{cursor:grabbing}
table.trim{width:100%;border-collapse:collapse;font-size:12px}
table.trim td{padding:3.5px 0;vertical-align:top;border-top:1px solid rgba(45,84,120,.35)}
table.trim tr:first-child td{border-top:0}
table.trim td:first-child{color:var(--dim2);width:96px;white-space:nowrap}
table.trim td:last-child{color:var(--fg)}
table.trim b{color:var(--accent2)}

.dims{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11.5px;color:var(--dim)}
.dims b{color:var(--fg);float:right;font-variant-numeric:tabular-nums}
.polar-legend{font-size:10.5px;color:var(--dim);text-align:center;margin-top:4px}

/* sliders / checks */
.slider{margin:9px 0 4px}
.slider label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-bottom:3px}
.slider label b{color:var(--fg)}
input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:#0b1a29;border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #06131f}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #06131f}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);padding:3px 0;cursor:pointer}
.chk:hover{color:var(--fg)}
.chk input{accent-color:var(--accent)}

/* wind scale */
.scale{margin-top:10px}
.scale .grad{height:9px;border-radius:3px;margin-bottom:3px}
.scale .ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim2)}

/* route */
.wp-list{margin-top:6px}
.wp{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:12px}
.wp:hover{background:#0e2033}
.wp.active{background:#12405f}
.wp .n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--line2);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700}
.wp .m{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.wp .x{background:none;border:0;color:var(--dim2);cursor:pointer;font-size:14px;line-height:1}
.wp .x:hover{color:var(--bad)}
.route-sum{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.route-sum b{color:var(--fg)}
.legplan .leg{background:#0e2033;border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:8px}
.legplan .leg.beat{border-color:#4a6f2d;background:#101f1a}
.legplan .leg.now{border-color:var(--accent);box-shadow:0 0 0 1px rgba(57,160,255,.3)}
.leg-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-bottom:5px}
.leg-h .tag{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:99px;background:var(--line);color:var(--accent2)}
.leg-h .tag.beat{background:#2c4a1e;color:#b6e07a}
.leg-h .tag.run{background:#3d2a52;color:#d7b3ff}
.leg dl{display:grid;grid-template-columns:74px 1fr;gap:2px 8px;margin:0;font-size:11.5px}
.leg dt{color:var(--dim2)}
.leg dd{margin:0;color:var(--fg)}
.leg .manoeuvre{margin-top:6px;padding-top:6px;border-top:1px solid rgba(45,84,120,.4);font-size:11.5px;color:var(--warn)}

/* mark picker + legend */
.markpick{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.markpick button{
  /* an explicit colour, or a button whose label is not wrapped in a span falls back to
     the browser's default buttontext — black, on a very dark background */
  background:#0e2033;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  color:var(--dim);font:inherit;
  padding:4px 2px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.markpick button:hover{border-color:var(--line2)}
.markpick button.on{border-color:var(--accent);background:#12405f}
.markpick span{font-size:9px;color:var(--dim2);text-align:center;line-height:1.1}
.markpick svg{display:block}
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.legend figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.legend figcaption{font-size:9px;color:var(--dim2);text-align:center;line-height:1.15}

/* ---------------- map ---------------- */
/* The map element is rotated for head-up mode, so it lives inside a clipping wrapper
   and is centred on it — the rotation then happens about the wrapper's centre. While
   rotated, JS grows it to a square of the wrapper diagonal so the corners stay covered. */
#mapwrap{flex:1;position:relative;overflow:hidden;background:#0a1520}
#map{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);transform-origin:50% 50%;background:#0a1520;
}
.leaflet-container{background:#0a1520;font-family:inherit}

/* counter-rotates chart symbols and their labels so they stay readable head-up */
.upright{display:block;transform:rotate(var(--chart-bearing,0deg))}

/* our own zoom + attribution, kept outside the rotated element */
#mapctl{position:absolute;right:12px;bottom:48px;z-index:850;display:flex;flex-direction:column;gap:4px}
#mapctl button{
  width:30px;height:30px;background:rgba(15,30,46,.95);border:1px solid var(--line);
  color:var(--fg);border-radius:6px;font:inherit;font-size:16px;line-height:1;cursor:pointer;
}
#mapctl button:hover{background:var(--panel2);border-color:var(--line2)}
#mapattr{
  position:absolute;right:8px;bottom:4px;z-index:850;pointer-events:none;
  background:rgba(11,22,34,.8);border-radius:4px;padding:1px 6px;font-size:10px;color:var(--dim2);
}
.wind-layer{position:absolute;inset:0;pointer-events:none;z-index:400}
.wind-layer canvas{position:absolute;inset:0;width:100%;height:100%}
.seamark-icon{background:none;border:0}
.seamark-icon .lbl{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  white-space:nowrap;font-size:9.5px;color:#cfe6ff;text-shadow:0 1px 3px #000,0 0 6px #000;
  pointer-events:none;
}
.flare{animation:flash 4s steps(1,end) infinite}
@keyframes flash{0%,12%{opacity:.95}13%,100%{opacity:.12}}
.boat-icon{background:none;border:0}
/* Sits under the Reset pill at the top, clear of the message strip along the bottom. */
.map-tip{
  position:absolute;left:50%;top:96px;transform:translateX(-50%);z-index:1000;
  background:rgba(18,36,55,.96);border:1px solid var(--accent);border-radius:99px;
  padding:5px 14px;font-size:12px;color:var(--accent2);pointer-events:none;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* ---------------- instruments ---------------- */
#hud{
  position:absolute;top:10px;left:352px;right:10px;z-index:900;display:flex;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  pointer-events:none;
}
#sidebar.collapsed ~ #hud{left:10px}
.inst{flex:1;background:rgba(15,30,46,.94);padding:5px 8px;min-width:0}
.inst.sep{box-shadow:inset 2px 0 0 var(--line2)}
.inst label{display:block;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--dim2)}
.inst b{font-size:17px;font-variant-numeric:tabular-nums;font-weight:600}
.inst small{font-size:10px;color:var(--dim2);margin-left:2px}
.inst.tgt b{color:var(--good)}
.inst.hot b{color:var(--warn)}

/* Advisory messages sit along the bottom of the chart rather than in the sidebar, so
   you can read them while looking at the water. Bounded left by the helm and right by
   the dial column, so it never lands on top of either. */
#msgbar{
  position:absolute;bottom:12px;left:890px;right:215px;z-index:900;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
#sidebar.collapsed ~ #msgbar{left:548px}
#msgbar>*{
  pointer-events:auto;max-width:640px;width:100%;
  background:rgba(15,30,46,.94);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 2px 14px rgba(0,0,0,.4);
}
#msgbar .notes{padding:8px 12px;max-height:132px;overflow-y:auto}
#msgbar .notes:empty{display:none}
#msgbar .notes li{font-size:12px}
#msgbar .warn{margin-top:0;padding:8px 12px}

/* reset, centred over the chart just under the instruments */
#topbar{
  position:absolute;top:62px;left:352px;right:10px;z-index:900;
  display:flex;justify-content:center;pointer-events:none;
}
#sidebar.collapsed ~ #topbar{left:10px}
#topbar button{
  pointer-events:auto;background:rgba(15,30,46,.95);border:1px solid var(--line2);
  color:var(--fg);border-radius:99px;padding:5px 16px;font:inherit;font-size:12px;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35);
}
#topbar button:hover{background:var(--panel2);border-color:var(--accent);color:var(--accent2)}

/* marina constructor */
/* Text buttons, not the symbol tiles of .markpick — three across, because "Moored boat"
   and "Breakwater" both wrap to two lines in four. */
.me-pal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:6px 0 8px}
.me-pal button{
  background:#0e2033;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  color:var(--fg);font:inherit;font-size:11px;padding:7px 4px;text-align:center;
  line-height:1.2;
}
.me-pal button:hover{border-color:var(--line2);background:#122c44}
.me-pal button.on{border-color:var(--accent);background:#12405f;color:#fff}
/* exact entry beside each slider — the ranges span hundreds of metres */
.me-num{
  width:66px;margin-left:auto;background:#0b1622;color:var(--fg);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px;
  font:inherit;font-size:11px;text-align:right;
}
.me-num:focus{outline:none;border-color:var(--accent)}
.me-unit{color:var(--dim2);font-size:10px;margin-left:3px}
.me-json{
  width:100%;box-sizing:border-box;height:120px;resize:vertical;margin:4px 0;
  background:#0b1622;color:var(--dim);border:1px solid var(--line);border-radius:5px;
  font:11px/1.45 ui-monospace,Consolas,monospace;padding:6px;
}
/* on-chart editing: grab the body to move, the handles to turn and stretch */
path.me-body{cursor:move}
.me-h{background:none;border:0}
.me-h svg{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.me-h-rot{cursor:crosshair}
.me-h-len,.me-h-wid{cursor:nwse-resize}

/* 3D window — floating, draggable, collapsible */
#view3d{
  /* above the sidebar and the top bar (both 1000): it is a window you can drag and
     resize anywhere, so it has to float over them — but below the toast (1200) */
  position:absolute;top:96px;right:12px;width:360px;z-index:1050;
  background:rgba(15,30,46,.97);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 6px 26px rgba(0,0,0,.5);overflow:hidden;
}
#view3d.collapsed .v3-body,#view3d.collapsed .v3-foot{display:none}
.v3-bar{
  display:flex;align-items:center;gap:4px;padding:5px 6px 5px 10px;
  background:#12283d;border-bottom:1px solid var(--line);cursor:move;user-select:none;
}
.v3-title{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.v3-sp{flex:1}
.v3-bar button{
  background:#0e2033;border:1px solid var(--line);color:var(--dim);border-radius:5px;
  padding:2px 7px;font:inherit;font-size:10.5px;cursor:pointer;
}
.v3-bar button:hover{color:var(--fg);border-color:var(--line2)}
.v3-body{position:relative;height:270px;background:#0b1622}
.v3-body canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.v3-body canvas:active{cursor:grabbing}
#v3-msg{position:absolute;inset:0;display:grid;place-items:center;padding:20px;
  text-align:center;font-size:12px;color:#ffb3ae}
.v3-foot{
  display:flex;align-items:center;gap:12px;padding:5px 20px 5px 10px;font-size:10.5px;
  color:var(--dim2);border-top:1px solid var(--line);
}
.v3-foot label{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--dim)}
.v3-foot input{accent-color:var(--accent);margin:0}
.v3-note{margin-left:auto;font-style:italic;opacity:.75}
/* resize grip, bottom-right — the corner of a window, drawn as two strokes */
.v3-grip{position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;touch-action:none;z-index:2}
.v3-grip::before{content:'';position:absolute;right:3px;bottom:3px;width:8px;height:8px;
  border-right:2px solid var(--line2);border-bottom:2px solid var(--line2);
  border-bottom-right-radius:3px}
.v3-grip:hover::before{border-color:var(--fg)}
#view3d.collapsed .v3-grip{display:none}

/* windex — masthead indicator, sits above the compass */
#windex{position:absolute;right:34px;bottom:302px;z-index:900;pointer-events:none}

/* single-lever engine control */
#throttle{width:74px;height:132px;flex:0 0 74px;cursor:ns-resize;touch-action:none;user-select:none}
#throttle svg{display:block;width:100%;height:100%}

/* dial */
#dial{position:absolute;right:12px;bottom:118px;z-index:900;pointer-events:none}

/* helm */
#helm{
  position:absolute;left:352px;bottom:10px;z-index:900;background:rgba(15,30,46,.95);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;width:520px;
}
#wheel{width:152px;height:152px;flex:0 0 152px;cursor:grab;touch-action:none;user-select:none}

/* Rudder shown either side of the wheel: port fills leftwards, starboard rightwards,
   so the bar grows the same way you turned the helm. */
.rudside{flex:1;min-width:48px;display:flex;flex-direction:column;gap:4px}
.rudside .lbl{font-size:9px;letter-spacing:.9px;color:var(--dim2);white-space:nowrap}
.rudside.port .lbl{text-align:right}
.rudside .track{position:relative;height:9px;background:#0b1a29;border-radius:5px;overflow:hidden}
.rudside .track i{position:absolute;top:0;height:100%;width:0;background:var(--accent);border-radius:5px}
.rudside.port  .track i{right:0}
.rudside.stbd  .track i{left:0}
.rudside.on .lbl{color:var(--accent2)}
#wheel:active{cursor:grabbing}
#wheel svg{display:block;width:100%;height:100%}
#sidebar.collapsed ~ #helm{left:10px}
.helm-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.helm-row:last-of-type{margin-bottom:2px}
.hbtn{
  background:#0e2033;border:1px solid var(--line);color:var(--fg);border-radius:6px;
  padding:6px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;
}
.hbtn:hover{border-color:var(--line2);background:#14293e}
.hbtn:active,.hbtn.on{background:var(--accent);border-color:var(--accent);color:#06131f}
.hbtn.sm{padding:5px 8px;font-size:11px}
.hsel{background:#0e2033;border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:5px;font:inherit;font-size:11px}
.spacer{flex:1}
.rudder{flex:1;min-width:0}
.rudder label{display:block;font-size:10px;color:var(--dim2);text-align:center}
.rudder b{color:var(--fg);font-variant-numeric:tabular-nums}
.rbar{position:relative;height:6px;background:#0b1a29;border-radius:3px;margin-top:3px}
.rbar:before{content:"";position:absolute;left:50%;top:-2px;width:1px;height:10px;background:var(--line2)}
.rbar i{position:absolute;top:0;height:100%;background:var(--accent);border-radius:3px;left:50%;width:0}
.keys{font-size:10px;color:var(--dim2);text-align:center}
.keys b{color:var(--dim)}

/* toast */
#toast{
  position:absolute;left:50%;top:70px;transform:translateX(-50%) translateY(-14px);z-index:1200;
  background:rgba(18,36,55,.97);border:1px solid var(--line2);border-radius:var(--r);
  padding:8px 16px;font-size:12.5px;color:var(--fg);opacity:0;pointer-events:none;transition:all .22s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.good{border-color:var(--good);color:#b7f5db}
#toast.bad{border-color:var(--bad);color:#ffc4c0}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}

@media (max-width:1100px){
  #hud{flex-wrap:wrap}
  .inst{flex:1 0 16%}
}