/* ==========================================================================
   Home hero — feature highlight reel.

   The hero keeps its two-column shape: copy on the left, and on the right the
   old static panel image becomes a reel. Two tracks slide in parallel — the
   graphic track and the text track — and the text track carries a 0.25s
   transition-delay so the copy card lands a beat after the screenshot.

   Arrows flank the graphic on the outside; dots sit tight under it; the copy
   card overlays the graphic's bottom-right corner and hangs below its bottom
   edge, so it hides as little of the window as possible.

   Every graphic is stretched to the full viewport height. That gives all five
   slides the same bottom edge, which is what lets the dots sit tight under the
   graphic instead of under the whole reel.

   Graphics reuse the real replica vocabulary: .gwp-* (from panel-replica.css,
   whose tokens are copied from src/styles.css) for the add-on panel, and the
   .cmdwin-* block below for Grepolis's own command-overview window.
   ========================================================================== */

/* The reel's track is five 100%-wide slides in a flex row, so its min-content
   width is five viewports. Without min-width:0 that floors the grid track and
   the hero columns blow out. */
.hero-split > .hero-copy,
.hero-split > .hero-reel { min-width: 0; }

/* Side gutters hold the arrows so they always sit outside the graphic, the way
   the gallery slider does it; the bottom reserve is for the copy card, which
   hangs below the graphic. */
.hero-reel {
  position: relative;
  padding: 0 30px 58px;
}

.hs-viewport {
  position: relative;
  min-width: 0;
  height: 372px;
  /* Horizontal clip only, so the sliding tracks are masked but the overlaid
     card can still hang below the bottom edge. */
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- Tracks -------------------------------------------------------------- */

.hs-graphics,
.hs-texts {
  display: flex;
  width: 100%;
  height: 100%;
}

.hs-graphics {
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The copy layer floats over the graphic layer and trails it by 0.25s. */
.hs-texts {
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0.25s;
  pointer-events: none;
}

.hs-graphic,
.hs-text {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* ---- Graphic ------------------------------------------------------------- */

/* Stretch, not centre: all five graphics then share one bottom edge. */
.hs-graphic {
  display: flex;
  align-items: stretch;
}

/* No drop-shadow here: the graphic spans the full slide width, so a shadow gets
   sliced off square by the track's horizontal clip at both edges. */
.hs-graphic-inner {
  display: flex;
  width: 100%;
  min-width: 0;
}

.hs-graphic-inner > * { width: 100%; }

/* Warm glow behind the reel, carried over from .hero-art. */
.hero-reel::before {
  content: "";
  position: absolute;
  inset: -6% -4% 12%;
  background: radial-gradient(closest-side, rgba(212, 168, 64, 0.16), transparent 72%);
  z-index: 0;
  pointer-events: none;
}

/* ---- Copy card, overlaying the graphic's bottom-right ------------------- */

.hs-text {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 8px 0 0;
}

/* Hangs past the graphic's bottom edge so it covers less of the window — and
   so it clears the dots, which sit tight under the graphic on the left. */
.hs-text-card {
  pointer-events: auto;
  width: 100%;
  max-width: 336px;
  margin-bottom: -50px;
  padding: 13px 15px 14px;
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(28, 20, 9, 0.96) 0%, rgba(14, 10, 5, 0.98) 100%);
  backdrop-filter: blur(8px);
  /* No outer shadow. The card hangs below the graphic, where the track is not
     clipped vertically, so a cast shadow from the slide parked just off-screen
     bleeds back in at the left edge. The border and blur carry the separation. */
  box-shadow: inset 0 1px 0 rgba(240, 216, 128, 0.1);
}

.hs-flag {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}

.hs-text-card h3 {
  margin: 0 0 7px;
  font-size: 17.5px;
  line-height: 1.2;
  color: var(--gold-bright);
}

.hs-text-card p {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* The add-on's own beta badge (.grepo-bot-beta-tag in src/styles.css). */
.hs-beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1008;
  background: #f0d880;
  vertical-align: 2px;
  white-space: nowrap;
}

/* ---- Pulsing CTA — the ping from the chat launcher ---------------------- */

.hs-pulse { position: relative; }

.hs-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--gold-bright);
  animation: hs-pulse-ring 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes hs-pulse-ring {
  0%   { transform: scale(1); opacity: 0.75; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* ---- Arrows, outside the graphic on both sides -------------------------- */

/* Same treatment as .gallery-nav on the "See it in action" slider: no chrome at
   all, just the glyph in gold, sitting in the gutter beside the graphic. */
.hs-arrow {
  position: absolute;
  top: 186px;
  z-index: 6;
  transform: translateY(-50%);
  width: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 46px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.hs-arrow:hover { color: var(--gold-bright); }
.hs-prev { left: 0; }
.hs-next { right: 0; }

/* RTL: "previous" is on the right, and the chevron has to point the other way. */
[dir="rtl"] .hs-prev { left: auto; right: 0; }
[dir="rtl"] .hs-next { right: auto; left: 0; }
[dir="rtl"] .hs-arrow { transform: translateY(-50%) scaleX(-1); }

/* ---- Dots, tight under the graphic ------------------------------------- */

.hs-dots {
  display: flex;
  gap: 9px;
  width: max-content;
  margin-top: 10px;
}

.hs-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(240, 216, 128, 0.26);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hs-dot:hover { background: rgba(240, 216, 128, 0.55); }
.hs-dot[aria-current="true"] { background: var(--gold-bright); transform: scale(1.3); }

/* ==========================================================================
   Add-on panel replica inside the reel.

   panel-replica.css is authoritative for the look; these rules only shrink it
   into a hero slot (its natural body is a 720px scroller) and undo the
   full-bleed padding it uses on the features page.
   ========================================================================== */

.hs-graphic .gwp { padding: 0; display: flex; }

/* Fill the slot so the panel's bottom edge is the same on every slide. */
.hs-graphic .gwp-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: 11.5px;
  border-radius: 5px;
}

.hs-graphic .gwp-body {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

.hs-graphic .gwp-head { min-height: 26px; padding: 4px 9px; gap: 8px; }
.hs-graphic .gwp-head-title { font-size: 12px; }
.hs-graphic .gwp-lang { min-width: 82px; padding: 2px 6px; font-size: 10px; }
.hs-graphic .gwp-tabs,
.hs-graphic .gwp-subtabs { padding: 5px 9px; }
.hs-graphic .gwp-tab,
.hs-graphic .gwp-subtab { padding: 2px 7px; font-size: 11px; }
.hs-graphic .gwp-section { padding: 9px 11px; }
.hs-graphic .gwp-section h3 { font-size: 13px; }
.hs-graphic .gwp-help { font-size: 10.5px; }
.hs-graphic .gwp-toggle,
.hs-graphic .gwp-field { margin-bottom: 6px; font-size: 11.5px; }
.hs-graphic .gwp-field > span:first-child { min-width: 0; }
.hs-graphic .gwp-input,
.hs-graphic .gwp-select { padding: 3px 6px; font-size: 11px; }
.hs-graphic .gwp-table th,
.hs-graphic .gwp-table td { padding: 3px 5px; font-size: 10.5px; }
.hs-graphic .gwp-badge { padding: 0 6px; font-size: 10px; }
.hs-graphic .gwp-def-card { padding: 8px 9px; }
.hs-graphic .gwp-def-head { font-size: 12px; margin-bottom: 6px; }
.hs-graphic .gwp-town-defense { grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* At three cards across, a per-city card is too narrow for a label and its
   control side by side — the real panel stacks them at this width too. */
.hs-graphic .gwp-def-card .gwp-field {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.hs-graphic .gwp-def-card .gwp-field > span:first-child { min-width: 0; }
.hs-graphic .gwp-log { font-size: 10.5px; }

/* The card covers the panel's bottom-right, so keep the last rows of a long
   table from hiding underneath it. */
.hs-graphic .gwp-body > :last-child { padding-bottom: 4px; }

/* ==========================================================================
   Grepolis's own command overview ("Beveloverzicht"), with the add-on's
   attack-type intel badge on each incoming command.

   Built against an in-game screenshot, and following the game's markup:
   window tab strip → .game_inner_box toolbar → .game_border → the blue
   .game_header → ul.game_list of .js-command-row rows → .game_list_footer.

   Note on the game's palette: the window chrome is tan, the command list is
   near-white, and the "Command overview" header bar is blue — not gold.
   ========================================================================== */

.cmdwin {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #241906;
  border-radius: 4px;
  background: #c6b085;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  color: #3a2c12;
  font-family: Verdana, Geneva, Arial, sans-serif;
  overflow: hidden;
}

/* ---- Window tab strip --------------------------------------------------- */

/* Right padding keeps the tabs clear of the "(recreation)" label, which is
   pinned over this corner. */
.cmdwin-wtabs {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  padding: 3px 78px 0 4px;
  background: linear-gradient(180deg, #2b2011 0%, #1c1408 100%);
}

.cmdwin-wtab {
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid #6d5a30;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #b9a878 0%, #97865a 100%);
  color: #2e2410;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdwin-wtab.is-active {
  background: linear-gradient(180deg, #e6d8b2 0%, #d3c191 100%);
  color: #1e1608;
}

/* Says out loud that this window is drawn in CSS, not a screenshot. Styled in
   the site's palette, not the game's, so it reads as our annotation. Pinned
   rather than in the tab flow, which would squeeze the tabs into ellipses. */
.cmdwin-recreation {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 7;
  padding: 1px 6px;
  border: 1px solid rgba(240, 216, 128, 0.35);
  border-radius: 4px;
  background: rgba(10, 7, 3, 0.6);
  color: var(--gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cmdwin-wbtns {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: 3px;
}

.cmdwin-wbtns i {
  width: 15px;
  height: 13px;
  border: 1px solid #6d5a30;
  border-radius: 2px;
  background: linear-gradient(180deg, #b9a878 0%, #8d7c52 100%);
  color: #241906;
  font: 700 9px/11px Verdana, Arial, sans-serif;
  font-style: normal;
  text-align: center;
}

/* ---- .game_inner_box ---------------------------------------------------- */

.cmdwin-inner {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 5px;
  background: linear-gradient(180deg, #cdb88f 0%, #c0a97c 100%);
}

/* ---- #game_list_header -------------------------------------------------- */

.cmdwin-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}

.cmdwin-dd,
.cmdwin-search {
  display: flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  border: 1px solid #7a6535;
  border-radius: 2px;
  background: #fff;
  color: #3a2c12;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
}

/* The game's dropdowns carry a separate arrow button on the right edge. */
.cmdwin-dd {
  position: relative;
  padding-right: 17px;
}

.cmdwin-dd::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 13px;
  border-left: 1px solid #7a6535;
  background:
    linear-gradient(180deg, #dccfa8 0%, #bfae7e 100%)
    no-repeat center;
}

.cmdwin-dd::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  z-index: 1;
  margin-top: -1px;
  border-top: 4px solid #3f3316;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.cmdwin-dd-all { flex: 0 0 62px; }
.cmdwin-dd-sort { flex: 1 1 auto; min-width: 0; }
.cmdwin-search { flex: 1 1 auto; min-width: 0; color: #9a9a9a; }

.cmdwin-reload {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid #7a6535;
  border-radius: 2px;
  background: linear-gradient(180deg, #dccfa8 0%, #bfae7e 100%);
  color: #4a3c1a;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

/* ---- .game_border + the blue .game_header ------------------------------- */

.cmdwin-border {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  border: 1px solid #7a6535;
  background: #fdfaf0;
  overflow: hidden;
}

.cmdwin-header {
  flex: 0 0 auto;
  padding: 3px 7px;
  background: linear-gradient(180deg, #5f92c6 0%, #3f6ea4 100%);
  border-bottom: 1px solid #2d5480;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* ---- ul.game_list ------------------------------------------------------- */

.cmdwin-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fdfaf0;
  overflow: hidden;
}

/* li.js-command-row.place_command — avatar, two text lines, units right */
.cmdwin-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #e2d7bb;
}

/* .cmd_img.command_type.attack_type32x32 — the game draws a unit portrait
   here from a sprite sheet; these are colour-matched stand-ins in the same box. */
.cmd-ava {
  width: 30px;
  height: 30px;
  border: 1px solid #6e5a2c;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.cmd-ava.attack_land { background: radial-gradient(circle at 50% 32%, #d8663f 0%, #8f2410 100%); }
.cmd-ava.attack_sea  { background: radial-gradient(circle at 50% 32%, #4d8ec9 0%, #1d4874 100%); }
.cmd-ava.attack_spy  { background: radial-gradient(circle at 50% 32%, #8467b0 0%, #422a64 100%); }
.cmd-ava.farm_attack { background: radial-gradient(circle at 50% 32%, #93b150 0%, #4a5f1e 100%); }
.cmd-ava.support     { background: radial-gradient(circle at 50% 32%, #63a9d6 0%, #24527b 100%); }

.cmd-body {
  min-width: 0;
  font-size: 10px;
  line-height: 1.45;
}

/* Only badged rows give up space for the badge, which the add-on pins to the
   row's top right. Rows without one need the full width for their unit tiles. */
.cmdwin-row.has-intel .cmd-body { padding-right: 42%; }

.cmd-line,
.cmd-line2 { display: block; white-space: nowrap; }

.cmd-town,
.cmd-player { color: #2f6f80; text-decoration: none; }
.cmd-town { font-weight: 700; }

/* .overview_incoming.icon — the small marker between the two towns */
.cmd-inc {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 3px;
  border-left: 6px solid #c0301c;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  vertical-align: 0;
}

/* The red cancel button. Only ever on your own commands — you cannot recall
   somebody else's attack, which is why the incoming rows below have none. */
.cmd-x {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  border: 1px solid #7d1f12;
  border-radius: 2px;
  background: linear-gradient(180deg, #d4483a 0%, #a32a1c 100%);
  color: #fff;
  font: 700 8px/9px Verdana, Arial, sans-serif;
  text-align: center;
  vertical-align: 1px;
}

.cmd-count { font-weight: 700; color: #2f2410; margin-right: 4px; }
.cmd-arrive { color: #4c4128; }

/* .command_overview_units — right-aligned in the row, not below it */
.cmd-units {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

/* .place_unit.unit_icon25x25 */
.cmd-unit {
  position: relative;
  width: 21px;
  height: 21px;
  border: 1px solid #6e5a2c;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Tint per unit class — the game draws a painted figure here, so these stand in
   without inventing artwork that would read as wrong. */
.cmd-unit.u-off   { background: linear-gradient(180deg, #c98a5e 0%, #8f5028 100%); }
.cmd-unit.u-def   { background: linear-gradient(180deg, #8fa4bd 0%, #4f6884 100%); }
.cmd-unit.u-sea   { background: linear-gradient(180deg, #6fa2c9 0%, #2d5f86 100%); }
.cmd-unit.u-trans { background: linear-gradient(180deg, #cbb78a 0%, #8d774a 100%); }

/* .place_unit_white over .place_unit_black — the game's outlined count */
.cmd-unit .cnt {
  position: absolute;
  right: 1px;
  bottom: -1px;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* The add-on's overlay. Values copied from the stylesheet injected by
   src/command-overview-intel.js so the two cannot drift. */
.cmd-intel {
  position: absolute;
  top: 3px;
  right: 6px;
  z-index: 6;
  box-sizing: border-box;
  max-width: min(46%, 220px);
  padding: 2px 5px;
  border: 1px solid #4f8ec9;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(10, 24, 42, 0.96) 0%, rgba(6, 16, 30, 0.96) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  color: #ffd86b;
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ---- #game_list_footer -------------------------------------------------- */

.cmdwin-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #3a2c12;
}

.cmdwin-filters { display: flex; gap: 2px; }

.cmdwin-fico {
  width: 18px;
  height: 18px;
  border: 1px solid #6e5a2c;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.cmdwin-fico.attack_land { background: radial-gradient(circle at 50% 32%, #d8663f, #8f2410); }
.cmdwin-fico.support     { background: radial-gradient(circle at 50% 32%, #63a9d6, #24527b); }
.cmdwin-fico.attack_sea  { background: radial-gradient(circle at 50% 32%, #4d8ec9, #1d4874); }
.cmdwin-fico.attack_spy  { background: radial-gradient(circle at 50% 32%, #8467b0, #422a64); }
.cmdwin-fico.farm_attack { background: radial-gradient(circle at 50% 32%, #93b150, #4a5f1e); }
.cmdwin-fico.abort       { background: radial-gradient(circle at 50% 32%, #b8b0a0, #6a6255); }
.cmdwin-fico.revolt      { background: radial-gradient(circle at 50% 32%, #d8a838, #8a6210); }

/* .button_new — the game's steel-blue button. Its label really is this yellow
   (the live markup sets color: rgb(255, 204, 102)). */
.cmdwin-btn {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid #2d5480;
  border-radius: 3px;
  background: linear-gradient(180deg, #5f92c6 0%, #3f6ea4 100%);
  color: #ffcc66;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.cmdwin-footer .cmdwin-dd-last { flex: 0 0 98px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* site.css collapses .hero-split to one column at 900px. Stacked, the copy is
   plain text under the graphic, so the overlay treatment is dropped entirely. */
@media (max-width: 900px) {
  .hero-reel { padding: 0; }
  .hs-viewport { height: auto; }
  .hs-graphics { height: auto; }
  .hs-graphic { align-items: flex-start; }
  .hs-graphic .gwp-panel,
  .hs-graphic .cmdwin { height: auto; }
  /* Uncapped: stacked, the panel is the whole point of the slide, and a cap
     just slices a table off mid-row. */
  .hs-graphic .gwp-body { flex: 0 1 auto; max-height: none; }

  .hs-texts {
    position: static;
    height: auto;
    z-index: auto;
  }

  .hs-text {
    padding: 14px 0 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .hs-text-card {
    max-width: none;
    margin-bottom: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
  }

  /* Controls share one row under the graphic: dots left, arrows right. */
  .hs-dots { margin-top: 24px; height: 32px; align-items: center; }
  .hs-arrow { top: auto; bottom: -4px; transform: none; font-size: 34px; }
  .hs-prev { left: auto; right: 38px; }
  .hs-next { right: 0; }

  [dir="rtl"] .hs-arrow { transform: scaleX(-1); }
  [dir="rtl"] .hs-prev { right: auto; left: 38px; }
  [dir="rtl"] .hs-next { left: 0; }

  .hero-reel::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-graphics,
  .hs-texts { transition: none; }
  .hs-pulse::after { animation: none; opacity: 0; }
}