/* ============================================================================================================================
   Fitlab Ring: its look, the same on every page (the drawing and the canon: /lib/ewt-ring.js). A page keeps here only what
   is its own (Atlas: dropped / destroyed; Fitlab: hover, drag and drop). */
.ewtRing { width: 100%; max-width: 480px; height: auto; display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.ewtRing .rim { fill: none; stroke: #2a2a2a; stroke-width: 1.5; } .ewtRing .inner { fill: none; stroke: #2a2a2a; }
.ewtRing .ribbon { fill: none; stroke: #1e1e1e; }   /* the ribbon the slots sit in; the ship's picture as it is (no blend mode) */
/* slots, by state */
.ewtRing .slot { fill: #ffffff06; stroke: #3a3a3a; stroke-width: 1.2; }
.ewtRing .slot.on { fill: #48f0c014; stroke: #48f0c088; } .ewtRing .slot.online { fill: #d2d2d20d; stroke: #5a5a5a; }
.ewtRing .slot.heat { fill: #ff5c5c18; stroke: #ff5c5c99; } .ewtRing .slot.off { fill: #00000080; stroke: #3a3a3a; }
.ewtRing .slot.empty { fill: none; stroke-dasharray: 3 3; } .ewtRing .slot.sel { stroke: #fff; stroke-width: 1.8; }
.ewtRing .sg:not(.empty):hover .slot { stroke: #9e9e9e; } .ewtRing .eg rect, .ewtRing .eg circle { fill: #6b6b6b; }
/* a charge: its own cell under its module, over the edge of the ship's picture */
.ewtRing .slot.chc { fill: #0d0d0dcc; stroke: #e0b04099; stroke-width: .8; } .ewtRing .sg.ch:hover .slot { stroke: #e0b040; }
/* the pictures: over everything, whole; the pointer goes through to their slot */
.ewtRing .pics image { pointer-events: none; }
/* a tactical destroyer's modes */
.ewtRing .mode { fill: #0d0d0de6; stroke: #4a4a4a; stroke-width: 1; transition: stroke .15s linear, fill .15s linear; } .ewtRing .mode.sel { stroke: #fff; stroke-width: 1.5; }
.ewtRing .md .mg { color: #6b6b6b; transition: color .15s linear; } .ewtRing .md .mg * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ewtRing .md .mg .fl { fill: currentColor; stroke: none; }
.ewtRing .md:hover .mode { stroke: #9e9e9e; } .ewtRing .md:hover .mg { color: #d2d2d2; }
.ewtRing .md.on .mode { fill: #48f0c0; stroke: #48f0c0; filter: drop-shadow(0 0 5px #48f0c070); } .ewtRing .md.on .mg { color: #0d0d0d; }
/* the gauges: CPU, powergrid, calibration */
.ewtRing .gt { fill: none; stroke: #2a2a2a; stroke-width: 6.8; }
.ewtRing .gc { fill: none; stroke: #48f0c0bb; stroke-width: 6.8; } .ewtRing .gp { fill: none; stroke: #ff5c5cb0; stroke-width: 6.8; } .ewtRing .gk { fill: none; stroke: #d2d2d2a0; stroke-width: 6.8; }
.ewtRing .gc.over, .ewtRing .gp.over, .ewtRing .gk.over { stroke: #ff9a9a; }
.ewtRing .gv { fill: #9e9e9e; font-size: 11.55px; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.ewtRing .gv .gr { fill: #6b6b6b; } .ewtRing .gv.bad, .ewtRing .gv.bad .gr { fill: #ff5c5c; }
.ewtRing .gn { fill: #6b6b6b; font-size: 9.8px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1.5px; }