/* ---------------------------------------------------------------------------
   Ground Cover, a 380 x 460 widget for esgimpactweekly.com.

   Flood It as a land restoration programme. Your restored ground starts in one
   corner and grows by absorbing whatever it already touches. Commission a
   habitat and every parcel of that habitat on your boundary joins you.

   The rule that is not Flood It: FUNDING. Each habitat costs a different amount
   to commission, and the budget is money rather than moves, so the move that
   grabs the most ground is often not the move worth making. That is the
   marginal abatement curve in one decision: do the cheap ground first, because
   it leaves you funded for another move.

   Two things were proved by simulation before any of this was drawn:
     - Weighting the SCORE by carbon changes nothing, because carbon tracks area
       almost exactly on a scattered board. Cost is what changes play.
     - Clustering the habitats into realistic patches trivialises the game;
       every policy including random cleared the board. Scattered it stays.

   Namespaced .gc- so it can drop into a page that already ships its own
   css/styles.css without either side bleeding.
--------------------------------------------------------------------------- */

.gc-widget, .gc-widget * { box-sizing: border-box; margin: 0; padding: 0; }

/* An author display rule outranks the UA sheet's [hidden]{display:none}. */
.gc-widget [hidden] { display: none !important; }

.gc-widget {
  --brand:   #65a30d;
  --brand-dk:#4d7c0f;
  --lit:     #bef264;
  --lit-dim: #a3e635;
  --bad:     #f87171;
  --bg:      #0d1408;
  --panel:   #17200f;
  --line:    rgba(255,255,255,.09);
  --line-lt: rgba(255,255,255,.17);
  --ink:     #eaf2e0;
  --muted:   #8d9b7c;

  position: relative;
  width: 380px;
  height: 460px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.gc-widget:focus { outline: none; }
.gc-widget:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }

/* ---- header ---- */
.gc-head { flex: none; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gc-brand { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gc-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.gc-site {
  font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-chip {
  flex: none; border: 1px solid var(--line-lt); background: rgba(255,255,255,.04);
  color: var(--ink); border-radius: 999px; height: 21px; padding: 0 9px;
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
}
.gc-chip:hover { border-color: var(--lit); color: var(--lit); }

/* ---- map ---- */
.gc-map {
  flex: none; position: relative; align-self: center; margin-top: 8px;
  width: 350px; height: 275px;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0a1106;
}
.gc-map canvas { display: block; width: 350px; height: 275px; }

/* ---- habitat picker ---- */
/* Every button carries the gain it would make, so the decision is visible
   rather than a counting exercise. Reading the board by eye is not the skill
   this game is about; sequencing cheap ground against dear ground is. */
.gc-pick { flex: none; height: 38px; margin-top: 6px; display: flex; gap: 4px; }
.gc-hab {
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
  border: 1px solid var(--line-lt); border-radius: 6px;
  background: rgba(255,255,255,.04); color: var(--ink);
  cursor: pointer; padding: 6px 2px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.gc-hab:hover:not(:disabled) { border-color: var(--lit); }
.gc-hab:disabled { opacity: .36; cursor: default; }
.gc-swatch { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.gc-gain { font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-cost { font-size: 8px; font-weight: 600; color: var(--muted); line-height: 1; font-variant-numeric: tabular-nums; }
.gc-hab.gc-dear .gc-cost { color: var(--bad); }

/* ---- readouts ---- */
.gc-panel { flex: none; height: 42px; margin-top: 6px; display: flex; gap: 6px; }
.gc-cell {
  flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gc-lab { font-size: 7px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gc-val { font-size: 13px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gc-val.gc-low { color: var(--bad); }
.gc-val.gc-good { color: var(--lit); }

/* ---- ticker ---- */
.gc-tick {
  flex: none; height: 15px; margin-top: 6px;
  font-size: 9.5px; line-height: 15px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-tick b { color: var(--ink); font-weight: 600; }

/* ---- cards ---- */
/* Starts below the header. At inset 0 the scrim covers the mode chip, so the
   ground cannot be changed while any card is up, which is exactly when a
   player wants to change it. 45px is 11px padding plus the 34px header. */
.gc-over {
  position: absolute; top: 45px; right: 0; bottom: 0; left: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(13,20,8,.94); backdrop-filter: blur(3px);
}
.gc-card { width: 100%; text-align: center; }
.gc-kick {
  font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lit); margin-bottom: 7px;
}
.gc-kick.gc-kick-bad { color: var(--bad); }
.gc-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.gc-sub { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.gc-sub b { color: var(--ink); font-weight: 600; }
.gc-note { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 9px; }

.gc-facts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.gc-fact { display: flex; gap: 6px; font-size: 9px; line-height: 1.4; color: var(--muted); }
.gc-fact i { flex: none; font-style: normal; font-weight: 700; color: var(--lit); }
.gc-fact b { color: var(--ink); font-weight: 600; }

.gc-lines { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; }
.gc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  padding: 5px 8px; font-size: 9.5px;
}
.gc-row span:first-child { color: var(--muted); }
.gc-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-row b.gc-hit { color: var(--lit); }
.gc-row b.gc-miss { color: var(--bad); }

.gc-go {
  margin-top: 12px; border: none; border-radius: 7px; background: var(--brand); color: #fff;
  height: 33px; padding: 0 18px; font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: .03em; cursor: pointer;
}
.gc-go:hover { background: var(--brand-dk); }
.gc-go.gc-ghost { background: transparent; border: 1px solid var(--line-lt); color: var(--ink); height: 29px; font-size: 10.5px; }
.gc-go.gc-ghost:hover { border-color: var(--lit); color: var(--lit); }
.gc-rowc { display: flex; gap: 7px; justify-content: center; align-items: center; }

.gc-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.gc-opt {
  border: 1px solid var(--line-lt); border-radius: 6px; background: var(--panel); color: var(--ink);
  text-align: left; padding: 7px 9px; font: 500 10px/1.35 'Inter', sans-serif; cursor: pointer;
}
.gc-opt:hover { border-color: var(--lit); }
.gc-opt.gc-right { border-color: var(--lit); background: rgba(163,230,53,.16); }
.gc-opt.gc-wrong { border-color: var(--bad); background: rgba(248,113,113,.12); }

.gc-form { margin-top: 12px; display: flex; gap: 6px; }
.gc-in {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line-lt); border-radius: 6px;
  background: rgba(255,255,255,.05); color: var(--ink); height: 30px; padding: 0 9px;
  font: 500 10.5px/1 'Inter', sans-serif;
}
.gc-in::placeholder { color: var(--muted); }
.gc-in:focus { outline: none; border-color: var(--lit); }
.gc-send {
  flex: none; border: none; border-radius: 6px; background: var(--brand); color: #fff;
  height: 30px; padding: 0 12px; font: 700 10px/1 'Inter', sans-serif; cursor: pointer;
}
.gc-send:hover { background: var(--brand-dk); }
.gc-msg { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 7px; }
.gc-msg.gc-err { color: var(--bad); }
.gc-msg.gc-done { color: var(--lit); }

/* ---- legend on the start card ---- */
.gc-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 11px; }
.gc-leg { display: flex; align-items: center; gap: 3px; font-size: 8px; color: var(--muted); }
.gc-dot { width: 9px; height: 9px; border-radius: 2px; }

/* ---- round plate ---- */
.gc-plate {
  position: absolute; top: 45px; right: 0; bottom: 0; left: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.gc-plateIn {
  border: 1px solid var(--lit); border-radius: 9px; background: rgba(13,20,8,.9);
  padding: 13px 20px; text-align: center; animation: gc-plate .42s cubic-bezier(.2,1.5,.4,1);
}
@keyframes gc-plate { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.gc-plateK { font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lit); }
.gc-plateT { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; }
.gc-plateS { font-size: 9px; color: var(--muted); margin-top: 5px; }

/* ---- tooltips ---- */
/* Native title= sits on an uncontrollable browser delay of about a second. */
.gc-widget [data-tip] { position: relative; }
.gc-widget [data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 168px;
  border: 1px solid var(--line-lt); border-radius: 5px; background: #0a1005;
  padding: 5px 7px; font: 500 8.5px/1.35 'Inter', sans-serif; color: var(--ink); text-align: center;
  /* Hosts set nowrap, uppercase and letter spacing, and the tooltip inherits
     all three, so without these it refuses to wrap and shouts. */
  white-space: normal; text-transform: none; letter-spacing: normal;
  pointer-events: none; opacity: 0; z-index: 9;
  transition: opacity .1s ease .45s;
}
.gc-widget [data-tip]:hover::after,
.gc-widget [data-tip]:focus-visible::after { opacity: 1; transition-delay: .09s; }
/* A centred tooltip on an outer control is clipped by the widget's own
   overflow: hidden, so the outer ones anchor inward. */
.gc-pick .gc-hab:first-child[data-tip]::after { left: 0; transform: none; }
.gc-pick .gc-hab:last-child[data-tip]::after { left: auto; right: 0; transform: none; }
.gc-chip[data-tip]::after { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gc-widget [data-tip]::after { transition: none; }
  .gc-plateIn { animation: none; }
}

/* ---------------------------------------------------------------------------
   Homepage slot.

   The markup for this widget is inlined in index.html inside .hero__sidebar,
   replacing the Top Stories list. .hero__grid is already `1fr 380px`, so at
   full width the widget fits the slot exactly and nothing below applies.
   ------------------------------------------------------------------------ */

/* styles.css hides .hero__sidebar at <=1024px, where it held Top Stories. The
   game is meant to show on tablets and phones, so that is reverted here.
   .hero__grid is already a single column at this width, and the widget simply
   stacks under the cover story. */
@media (max-width: 1024px) {
  .hero__grid .hero__sidebar { display: flex; }
}

/* Two levels on purpose. .gc-fit is the LAYOUT box and is sized to the scaled
   dimensions; .gc-widget keeps its real 380 x 460 and is transformed down to
   fill it. Putting the transform on .gc-fit itself does not work: a transform
   leaves the layout box at full size, so a 380px box would stay 380px inside a
   narrower grid track and push the page sideways. Sizing the box and scaling
   the contents means the track only ever sees the scaled width. */
.gc-fit {
  --gc-s: 1;
  width:  calc(380px * var(--gc-s));
  height: calc(460px * var(--gc-s));
  margin-inline: auto;
}

.gc-fit > .gc-widget {
  transform: scale(var(--gc-s));   /* --gc-s inherits from .gc-fit */
  transform-origin: top left;
}

/* The widget is a fixed 380px block whose copy was measured at that width, and
   .gc-tick is white-space: nowrap. Reflowing it would truncate the ticker, so
   it is scaled instead. Each step is the largest scale that still fits 380px
   inside the viewport minus the container's 48px of padding, so the widget
   never overflows and never triggers a sideways scroll. Unscaled above 435px,
   where the widget clears the container by 8px. */
@media (max-width: 435px) { .gc-fit { --gc-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .gc-fit { --gc-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .gc-fit { --gc-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .gc-fit { --gc-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .gc-fit { --gc-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .gc-fit { --gc-s: .67; } }  /* to 320   */