/* ==========================================================
   DLLCOPE LifeGrid — CLEAN CSS (meter + commentary + split overlay)
   ========================================================== */

/* ===== Container ===== */
.dllcope-lifegrid-wrapper{
  width: 100%;
  max-width: 900px;
  margin: 3rem auto;
}

/* ===== Layout: canvas + meter ===== */
.dllcope-lifegrid-wrap{
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: relative; /* anchor for overlays + frames */
  outline: 0 solid transparent;
}

/* Canvas base */
.dllcope-lifegrid-canvas{
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* ===== Meter ===== */
.dllcope-lifegrid-meter{
  width: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  border: 1px dotted #000;
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.dllcope-lifegrid-meter-fill{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: bottom;
  transition: background 120ms linear;

  /* Base (normal) */
  background: #E5A925;
}

/* Low warning (midpoint between yellow and red) */
.dllcope-lifegrid-meter-fill.is-low:not(.is-critical):not(.is-empty){
  background: #BD5715;
}

/* Critical (red) */
.dllcope-lifegrid-meter-fill.is-critical:not(.is-empty){
  background: #950505;
}

/* Empty (override everything) */
.dllcope-lifegrid-meter-fill.is-empty{
  background: repeating-linear-gradient(
    45deg,
    #d0d0d0,
    #d0d0d0 6px,
    #e8e8e8 6px,
    #e8e8e8 12px
  );
}

/* Meter click ping (matches JS: meterFill.classList.add('ping')) */
.dllcope-lifegrid-meter-fill.ping{
  animation: dll-meter-ping 140ms ease-out;
}
@keyframes dll-meter-ping{
  0%   { transform: scaleX(1); }
  45%  { transform: scaleX(1.08); }
  100% { transform: scaleX(1); }
}

/* ===== Commentary ===== */
.dllcope-lifegrid-commentary{
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dotted rgba(0,0,0,0.6);
  font-family: inherit;
  font-size: 0.9em;
  line-height: 1.25;

  display: block;
  box-sizing: border-box;
  text-align: left;
  justify-content: flex-start;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Align with outer frame perimeter (inset: -6px) */
  margin-left: -6px;
  margin-right: -6px;
  width: calc(100% + 12px);
}
.dllcope-lifegrid-commentary .cursor{ display: none; }

/* ==========================================================
   Click + critical pulses (outer frame flashes)
   ========================================================== */

@keyframes dll-lifegrid-click-pulse{
  0%   { border-color: rgba(0,0,0,0); }
  35%  { border-color: rgba(0,0,0,0.85); }
  100% { border-color: rgba(0,0,0,0); }
}
.dllcope-lifegrid-frameOuter.is-click-pulse{
  animation: dll-lifegrid-click-pulse 140ms ease-out 0s 1;
}

@keyframes dll-lifegrid-critical-pulse{
  0%   { border-color: rgba(149,5,5,0); }
  35%  { border-color: rgba(149,5,5,0.95); }
  100% { border-color: rgba(149,5,5,0); }
}
.dllcope-lifegrid-frameOuter.is-critical-pulse{
  animation: dll-lifegrid-critical-pulse 220ms cubic-bezier(.2,.8,.3,1) 0s 2;
}

/* ==========================================================
   Split Overlay: markerSquare + overlayText
   ========================================================== */

/* Marker square */
.dllcope-lifegrid-markerSquare{
  position: absolute;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 140ms linear;
  background: transparent;
}
.dllcope-lifegrid-markerSquare.is-on{ opacity: 1; }

.dllcope-lifegrid-markerSquare .c{
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #000;
  border-style: solid;
}
.dllcope-lifegrid-markerSquare .c.tl{ left:0; top:0; border-width:2px 0 0 2px; }
.dllcope-lifegrid-markerSquare .c.tr{ right:0; top:0; border-width:2px 2px 0 0; }
.dllcope-lifegrid-markerSquare .c.bl{ left:0; bottom:0; border-width:0 0 2px 2px; }
.dllcope-lifegrid-markerSquare .c.br{ right:0; bottom:0; border-width:0 2px 2px 0; }

/* Overlay text */
.dllcope-lifegrid-overlayText{
  position: absolute;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 140ms linear;

  font-family: Vectrex, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.12;

  color: #000;
  background: transparent;
  white-space: nowrap; /* l1 tidy; l2 breaks via pre-line */
}
.dllcope-lifegrid-overlayText.is-on{ opacity: 1; }

.dllcope-lifegrid-overlayText .l1{ font-size: 12px; }
.dllcope-lifegrid-overlayText .l2{
  font-size: 11px;
  white-space: pre-line; /* enables \n line breaks */
}

/* Side micro-tuning */
.dllcope-lifegrid-overlayText.is-right{ transform: translate(0px, -18%); }
.dllcope-lifegrid-overlayText.is-left{  transform: translate(-18px, -18%); }

/* Side alignment */
.dllcope-lifegrid-overlayText.is-right .l1,
.dllcope-lifegrid-overlayText.is-right .l2{ text-align: left; }

.dllcope-lifegrid-overlayText.is-left .l1,
.dllcope-lifegrid-overlayText.is-left .l2{ text-align: right; }

/* Invisible measuring element used by JS */
.dllcope-lifegrid-overlayText--measure{
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================
   Stats row under the LifeGrid
   ========================================================== */

.dllcope-lifegrid-stats{
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;

  pointer-events: none;
  user-select: none;
}

.dllcope-lifegrid-stats .row{
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}

.dllcope-lifegrid-stats .k{
  font-family: Vectrex, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #000;
  opacity: 1;
}

.dllcope-lifegrid-stats .v{
  font-family: Vectrex, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #950505;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ==========================================================
   Double frame: inner (canvas only) + outer (canvas + meter)
   ========================================================== */

/* Outer frame — bigger perimeter, flashes */
.dllcope-lifegrid-frameOuter{
  position: absolute;
  inset: -6px;
  border: 1px dotted #000;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 10;
}

/* Inner frame — tight, permanent */
.dllcope-lifegrid-frameInner{
  position: absolute;
  inset: -2px;
  border: 1px solid #000;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 11;
}

/* Canvas stays in flex flow (optional wrapper if you use it) */
.dllcope-lifegrid-canvasBox{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}