*{box-sizing:border-box}
:root{--text:#eef4fb;--muted:#8797aa;--green:#26dc5b;--blue:#2d8dff;--cyan:#39a8ff;--yellow:#ffd85a;--hp-color:hsl(120 82% 51%)}
html{color-scheme:dark}
body{margin:0;color:var(--text);background:radial-gradient(circle at 50% 8%,rgba(35,70,106,.24),transparent 38rem),linear-gradient(#0b1623 0,#08131e 66%,#06101a 100%);font-family:"VT323","Courier New",monospace;font-size:21px}
button,a{font:inherit}
.page{width:min(1260px,calc(100% - 32px));margin:0 auto;padding:18px 0 34px}
.hero{text-align:center;padding-bottom:24px}
.eyebrow{font-size:24px;color:#d6e0ea;margin-bottom:8px}
.hero h1{margin:0;font-family:"Press Start 2P","Courier New",monospace;font-size:clamp(28px,4vw,52px);line-height:1.25;text-shadow:0 3px 0 #253e59}
.battle-top{display:grid;grid-template-columns:255px minmax(0,1fr);gap:22px;align-items:start}
.weapons{padding-top:43px}
.weapons h2{margin:0 0 16px;font-family:"Press Start 2P","Courier New",monospace;font-size:18px;line-height:1.5}
.weapon-list{display:grid;gap:3px}
.weapon{border:0;background:transparent;color:var(--text);cursor:pointer;width:100%;display:grid;grid-template-columns:90px 1fr 20px;gap:9px;align-items:center;text-align:left;padding:5px 0;transition:.14s transform,.14s filter}
.weapon:hover{transform:translateX(5px);filter:brightness(1.18)}
.weapon img{width:86px;height:74px;object-fit:contain}
.weapon-name{display:block;font-family:"Press Start 2P","Courier New",monospace;font-size:12px;color:#cfd8e4;line-height:1.45}
.weapon-damage{display:block;font-family:"Press Start 2P","Courier New",monospace;font-size:14px;margin-top:8px}
.weapon-arrow{font-family:"Press Start 2P";font-size:18px}
.boss-column{min-width:0}
.boss-status{text-align:center;color:var(--hp-color);font-family:"Press Start 2P","Courier New",monospace;font-size:clamp(16px,2.2vw,25px);line-height:1.5;margin:7px 0 8px;transition:color .55s ease}
.hp-area{position:relative;width:min(515px,70%);margin:0 auto 9px;z-index:50}
.hp-track{height:34px;background:#111a25;border:3px solid #52647b;padding:4px;box-shadow:0 0 0 2px #172638,0 0 14px rgba(45,141,255,.10)}
.hp-fill{height:100%;width:100%;background:var(--hp-color);box-shadow:inset 0 3px rgba(255,255,255,.14),0 0 11px color-mix(in srgb,var(--hp-color) 45%,transparent);transition:width .65s ease,background-color .65s ease}
.hp-tooltip{pointer-events:none;opacity:0;position:absolute;left:60%;top:46px;transform:translateY(-4px);min-width:200px;padding:9px 12px;background:#0e1724;border:1px solid #42678d;color:#f3f7fb;font-size:21px;line-height:1.2;transition:.13s opacity,.13s transform;z-index:90;box-shadow:0 8px 22px rgba(0,0,0,.38)}
.hp-area:hover .hp-tooltip{opacity:1;transform:translateY(0)}
.scene{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.boss-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;transition:filter .15s ease,opacity .22s ease}
.boss-target{position:absolute;left:14%;top:10%;width:70%;height:79%;z-index:30;border:0;background:transparent;padding:0;cursor:pointer}
.boss-outline{position:absolute;inset:0;opacity:0;transition:opacity .14s ease;filter:drop-shadow(0 0 4px rgba(45,141,255,.95)) drop-shadow(0 0 11px rgba(45,141,255,.72))}
.boss-outline::before{content:"";position:absolute;inset:3% 2% 1%;border:3px solid rgba(45,141,255,.80);clip-path:polygon(48% 0,87% 19%,96% 64%,91% 90%,72% 100%,25% 100%,5% 90%,0 65%,10% 22%)}
.scene:not(.damage-100) .boss-target:hover .boss-outline{opacity:1}
.scene:not(.damage-100):has(.boss-target:hover) .boss-image{filter:brightness(.92)}
.boss-column:has(.scene:not(.damage-100) .boss-target:hover) .hp-tooltip{opacity:1;transform:translateY(0)}
.scene.damage-100 .boss-target{cursor:default;pointer-events:none}
.scene.damage-100 .boss-outline{display:none}
.lights{position:absolute;inset:0;pointer-events:none;z-index:22}
.light{display:none;position:absolute;border-radius:44%;background:#ff9d32;filter:blur(7px);mix-blend-mode:screen;animation:ember 7.8s ease-in-out infinite}
.left-eye{left:39.1%;top:43.1%;width:4.0%;height:6.5%}
.right-eye{left:46.0%;top:42.5%;width:4.2%;height:6.7%;animation-delay:-1.1s}
.top-window{left:39.7%;top:27.9%;width:3.4%;height:6.0%;animation-delay:-3.2s}
.left-window{left:31.3%;top:48.4%;width:4.8%;height:7.8%;animation-delay:-2.0s}
.right-window{left:57.1%;top:50.0%;width:5.8%;height:9.5%;animation-delay:-4.4s}
.damage-0 .eye,.damage-0 .top-window,.damage-0 .left-window,.damage-0 .right-window{display:block}
.damage-25 .eye,.damage-25 .top-window,.damage-25 .left-window{display:block}
.damage-50 .eye,.damage-50 .left-window{display:block}
.damage-75 .light,.damage-100 .light{display:none!important}
@keyframes ember{0%,14%,100%{opacity:.015}30%,60%{opacity:.34}72%{opacity:.055}84%{opacity:.24}}
.smoke-layer{position:absolute;inset:0;pointer-events:none;z-index:21}
.smoke{position:absolute;left:69.2%;top:14.5%;width:33px;height:33px;border-radius:50%;background:rgba(145,153,170,.24);filter:blur(4px);animation:smokeRise 5.6s linear infinite}
.s2{width:45px;height:45px;animation-delay:-1.85s}
.s3{width:57px;height:57px;animation-delay:-3.7s}
@keyframes smokeRise{0%{transform:translate(0,8px) scale(.5);opacity:0}17%{opacity:.38}72%{opacity:.15}100%{transform:translate(38px,-132px) scale(1.4);opacity:0}}
.hit-flash{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:40;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.72),rgba(255,210,93,.18) 22%,transparent 48%)}
.damage-number{position:absolute;left:53%;top:25%;z-index:50;opacity:0;color:var(--yellow);font-family:"Press Start 2P";font-size:27px;text-shadow:0 3px #59201b,0 0 16px rgba(255,216,90,.55)}
.scene.hit .boss-image{animation:sceneShake .42s ease}
.scene.hit .hit-flash{animation:flash .45s ease}
.scene.hit .damage-number{animation:damagePop 1.2s ease}
@keyframes sceneShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes damagePop{0%{opacity:0;transform:translateY(15px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}
.battle-log-section{margin-top:9px;border-top:1px solid #1a2d3e;padding-top:14px}
.battle-log-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:8px}
.battle-log-title h2{margin:0;font-family:"Press Start 2P";font-size:22px}
.battle-log-title span{color:var(--muted);font-size:19px}
.battle-table{width:100%;font-size:18px}
.battle-row{display:grid;grid-template-columns:1.2fr 1.15fr 1.45fr 1.5fr;gap:14px;align-items:center;padding:7px 12px;border-bottom:1px solid #172a3c}
.battle-head{background:rgba(255,255,255,.025);color:#8fa1b5}
.battle-data a{color:var(--cyan);text-decoration:none}
.critical{color:#ff6272;border:1px solid #aa2840;background:rgba(130,15,40,.22);padding:2px 10px;margin-left:12px}
.total-row{margin-top:4px;background:rgba(255,255,255,.04);font-family:"Press Start 2P";font-size:13px;line-height:1.4;padding-top:13px;padding-bottom:13px}
.wallet-strip{margin-top:24px;padding:14px 0;border-top:1px solid #172a3c;display:flex;justify-content:space-between;align-items:center;gap:18px}
.wallet-label{display:block;color:var(--muted);font-size:17px}
.wallet-strip code{display:block;color:#9ddfff;margin-top:3px;font-size:17px;overflow-wrap:anywhere}
.wallet-actions{display:flex;gap:9px}
button,.wallet-actions a{border:0;background:#14263a;color:#f1f6fb;padding:8px 12px;text-decoration:none;cursor:pointer}
footer{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;color:#63788d;font-size:16px;padding-top:14px}
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,8,13,.82);backdrop-filter:blur(4px)}
.modal-box{position:relative;z-index:2;width:min(430px,100%);background:#0c1825;border:2px solid #355b7e;padding:24px;text-align:center;box-shadow:0 0 0 3px #0a111a,0 25px 80px rgba(0,0,0,.65)}
.modal-close{position:absolute;right:8px;top:6px;background:transparent;font-size:28px}
.modal-weapon-image{width:115px;height:95px;object-fit:contain;margin-top:6px}
.modal-box h2{font-family:"Press Start 2P";font-size:16px;line-height:1.5;margin:6px 0}
.modal-damage{color:var(--green);font-family:"Press Start 2P";font-size:13px;line-height:1.4}
.qr-code{width:220px;height:220px;background:#fff;padding:10px;margin:18px auto;display:grid;place-items:center}
.qr-code img,.qr-code canvas{max-width:100%;max-height:100%}
.modal-box p{color:#a7b6c5;line-height:1.25}
.modal-secondary{display:block;width:100%;margin-top:7px}
.hidden-action{display:none!important}
.demo-note{color:#d8ebad;border-top:1px solid #36523c;border-bottom:1px solid #36523c;padding:8px 0;margin-bottom:8px}
.empty,.error{text-align:center;padding:18px;color:var(--muted)}
.error{color:#ef9ba8}
@media(max-width:920px){.battle-top{grid-template-columns:1fr}.weapons{padding-top:0}.weapon-list{grid-template-columns:repeat(5,1fr)}.weapon{grid-template-columns:1fr;text-align:center}.weapon img{margin:auto}.weapon-arrow{display:none}}
@media(max-width:700px){body{font-size:18px}.weapon-list{grid-template-columns:repeat(2,1fr)}.hp-area{width:82%}.battle-row{grid-template-columns:1fr 1fr}.battle-head span:nth-child(3),.battle-head span:nth-child(4){display:none}.wallet-strip{align-items:flex-start;flex-direction:column}.wallet-actions{width:100%}}


/* =========================================================
   v8 compact desktop layout + softer boss hover
   ========================================================= */

/* Compact the page so the beginning of BATTLE LOG is visible
   in the first desktop viewport, as in the reference screenshot. */
.page{
  width:min(1240px,calc(100% - 20px));
  padding-top:10px;
}

.hero{
  padding-bottom:12px;
}

.eyebrow{
  font-size:21px;
  margin-bottom:4px;
}

.hero h1{
  font-size:clamp(25px,3.25vw,42px);
  line-height:1.18;
}

/* A little less room for the weapon column, more room for the boss. */
.battle-top{
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
}

/* Match the visual importance of the boss status. */
.weapons{
  padding-top:24px;
}

.weapons h2{
  margin:0 0 14px;
  font-size:clamp(16px,1.65vw,23px);
  line-height:1.45;
  color:#f1f6fb;
  text-shadow:0 2px 0 #233a52;
}

.weapon{
  padding:2px 0;
}

.weapon img{
  width:82px;
  height:66px;
}

.boss-status{
  margin:0 0 5px;
  font-size:clamp(16px,1.85vw,24px);
}

.hp-area{
  margin-bottom:5px;
}

/* This is the main change: the original 4:3 images are cropped
   inside a shorter viewport instead of being shown in full. */
.scene{
  height:clamp(390px,49vh,475px);
  aspect-ratio:auto;
  overflow:hidden;
}

.boss-image{
  width:100%;
  height:100%;
  object-fit:cover;
  /*
     Crop a little more sky and foreground, while keeping the house,
     chimney and moon naturally framed.
  */
  object-position:center 53%;
}

/* Keep the interaction area over the actual house after cropping. */
.boss-target{
  left:15%;
  top:5%;
  width:69%;
  height:91%;
}

/* Retire the old polygon outline completely. */
.boss-outline{
  display:none!important;
}

/*
  Soft, house-localized hover treatment.
  No polygon borders, triangles or underline.
  It is just a feathered dark/cool overlay concentrated over the house.
*/
.boss-hover-shade{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  background:
    radial-gradient(
      ellipse 67% 76% at 50% 52%,
      rgba(17,42,72,.30) 0%,
      rgba(19,63,106,.24) 48%,
      rgba(24,92,157,.12) 65%,
      rgba(24,92,157,.035) 77%,
      transparent 88%
    );
  filter:drop-shadow(0 0 9px rgba(45,141,255,.20));
}

/* Hover only affects the boss area; the city image is no longer globally dimmed. */
.scene:not(.damage-100) .boss-target:hover .boss-hover-shade{
  opacity:1;
}

/* Cancel the previous full-image hover dimming. */
.scene:not(.damage-100):has(.boss-target:hover) .boss-image{
  filter:none!important;
}

/* HP tooltip should still appear from boss hover. */
.boss-column:has(.scene:not(.damage-100) .boss-target:hover) .hp-tooltip{
  opacity:1;
  transform:translateY(0);
}

/* Dead boss remains completely inert visually. */
.scene.damage-100 .boss-hover-shade{
  display:none!important;
}

/* Pull Battle Log up closer to the scene. */
.battle-log-section{
  margin-top:2px;
  padding-top:10px;
}

.battle-log-title{
  margin-bottom:5px;
}

.battle-log-title h2{
  font-size:21px;
}

/* Keep compact feel on medium desktop screens. */
@media (min-width:921px) and (max-height:760px){
  .hero{
    padding-bottom:8px;
  }

  .eyebrow{
    font-size:19px;
  }

  .hero h1{
    font-size:clamp(24px,3vw,36px);
  }

  .scene{
    height:clamp(350px,47vh,430px);
  }

  .weapon img{
    width:76px;
    height:60px;
  }

  .weapon-damage{
    margin-top:5px;
  }
}

/* On mobile, return to a natural 4:3-ish framing so the boss is not overcropped. */
@media(max-width:920px){
  .battle-top{
    grid-template-columns:1fr;
  }

  .scene{
    height:auto;
    aspect-ratio:4/3;
  }

  .boss-image{
    object-position:center center;
  }

  .weapons{
    padding-top:0;
  }
}


/* =========================================================
   v9 — native 1200×685 boss scenes, NO CROPPING
   ========================================================= */

/* Both columns end on exactly the same baseline. */
.battle-top{
  align-items:stretch;
}

.weapons{
  padding-top:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Make weapon heading visually comparable to boss status. */
.weapons h2{
  font-size:clamp(18px,1.85vw,24px);
  line-height:1.45;
  margin:0 0 8px;
}

/* Five weapon rows fill the same vertical block as the boss column. */
.weapon-list{
  flex:1;
  display:grid;
  grid-template-rows:repeat(5,1fr);
  align-items:stretch;
}

.weapon{
  min-height:0;
}

/* Right side: status + HP + the complete 1200×685 image. */
.boss-column{
  display:flex;
  flex-direction:column;
}

.boss-status{
  flex:0 0 auto;
}

.hp-area{
  flex:0 0 auto;
}

/* Critical change: preserve the source aspect ratio exactly.
   No object-fit:cover, no clipping, no object-position tricks. */
.scene{
  position:relative;
  width:100%;
  height:auto!important;
  aspect-ratio:1200 / 685!important;
  overflow:visible;
  flex:0 0 auto;
}

.boss-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill!important;
  object-position:initial!important;
}

/* Interaction region over the actual house in the new 1200×685 composition. */
.boss-target{
  left:14.8%;
  top:4.0%;
  width:68.5%;
  height:92%;
}

/* No old polygon outline at all. */
.boss-outline{
  display:none!important;
}

/* Soft local hover over the house only. */
.boss-hover-shade{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  background:
    radial-gradient(
      ellipse 65% 82% at 50% 51%,
      rgba(10,24,42,.34) 0%,
      rgba(17,50,88,.25) 48%,
      rgba(31,105,184,.10) 69%,
      transparent 86%
    );
}

.scene:not(.damage-100) .boss-target:hover .boss-hover-shade{
  opacity:1;
}

.scene:not(.damage-100):has(.boss-target:hover) .boss-image{
  filter:none!important;
}

/*
  Overlay coordinates recalibrated for the NEW 1200×685 files.
  These are percentages of the full source image, so responsive scaling
  does not move the lights/smoke away from the artwork.
*/
.left-eye{
  left:38.4%!important;
  top:39.8%!important;
  width:4.1%!important;
  height:8.4%!important;
}
.right-eye{
  left:45.2%!important;
  top:39.5%!important;
  width:4.1%!important;
  height:8.5%!important;
}
.top-window{
  left:39.3%!important;
  top:21.0%!important;
  width:3.4%!important;
  height:8.5%!important;
}
.left-window{
  left:31.1%!important;
  top:47.0%!important;
  width:4.5%!important;
  height:10.5%!important;
}
.right-window{
  left:57.4%!important;
  top:48.0%!important;
  width:5.7%!important;
  height:12.8%!important;
}

/* Chimney mouth in the new 1200×685 composition. */
.smoke{
  left:68.8%!important;
  top:8.0%!important;
}

/* v8 compact-height cropping is explicitly cancelled. */
@media (min-width:921px) and (max-height:760px){
  .scene{
    height:auto!important;
    aspect-ratio:1200 / 685!important;
  }
}

@media(max-width:920px){
  .scene{
    height:auto!important;
    aspect-ratio:1200 / 685!important;
  }
}

/* Battle log starts immediately after the common bottom edge. */
.battle-log-section{
  margin-top:6px;
}


/* =========================================================
   v10 — fix huge empty gap at narrow desktop/tablet widths
   ========================================================= */

@media(max-width:920px){

  /* Once columns stack, each block must size itself by content.
     Do not keep the desktop equal-height flex behavior. */
  .battle-top{
    display:block!important;
  }

  .weapons{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    margin-bottom:14px;
  }

  .weapon-list{
    display:grid!important;
    flex:none!important;
    height:auto!important;
    min-height:0!important;

    /* Five weapons on one row where there is enough width. */
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    gap:4px;
  }

  .weapon{
    min-height:0!important;
    height:auto!important;
    align-self:start!important;
    grid-template-columns:1fr!important;
    padding:4px 2px 8px!important;
    text-align:center!important;
  }

  .weapon img{
    width:72px!important;
    height:62px!important;
    margin:0 auto 2px!important;
  }

  .weapon-name{
    font-size:10px!important;
    line-height:1.35!important;
  }

  .weapon-damage{
    font-size:12px!important;
    margin-top:5px!important;
  }

  .weapon-arrow{
    display:none!important;
  }

  .boss-column{
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }

  .boss-status{
    margin-top:5px!important;
  }

  .scene{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1200 / 685!important;
  }

  .battle-log-section{
    margin-top:8px!important;
  }
}

/* On phones, 5 items become too cramped, so use 2 columns.
   This also remains content-height only — no blank reserved area. */
@media(max-width:620px){
  .weapon-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .weapon img{
    width:78px!important;
    height:66px!important;
  }
}


/* =========================================================
   v11 — weapon controls are disabled after boss defeat
   ========================================================= */

.weapon:disabled{
  cursor:not-allowed!important;
  opacity:.34;
  filter:grayscale(.75) brightness(.72);
  transform:none!important;
}

.weapon:disabled:hover{
  transform:none!important;
  filter:grayscale(.75) brightness(.72)!important;
}

.weapon:disabled .weapon-name,
.weapon:disabled .weapon-damage,
.weapon:disabled .weapon-arrow{
  color:#697786!important;
}


/* =========================================================
   v12 — wallet-friendly payment popup
   ========================================================= */
.payment-details{
  width:100%;
  margin:18px 0 12px;
  text-align:left;
  font-size:19px;
}
.payment-line{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #1c3044;
  padding:5px 0;
}
.payment-label{
  flex:0 0 82px;
  color:#8797aa;
}
.payment-value,.payment-amount{
  color:#eef4fb;
}
.payment-address{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9ddfff;
  font-size:15px;
}
.copy-icon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0!important;
  display:grid;
  place-items:center;
  background:transparent!important;
  color:#8dcfff!important;
  font-family:Arial,sans-serif!important;
  font-size:21px!important;
  line-height:1;
}
.copy-icon:hover{
  color:#fff!important;
  background:#14263a!important;
}
.base-icon,.usdc-icon{
  display:inline-grid;
  place-items:center;
  width:21px;
  height:21px;
  margin-right:3px;
  border-radius:50%;
  background:#1652f0;
  color:white;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:800;
}
.base-icon{
  border-radius:4px;
  font-size:11px;
}
.qr-code{
  margin-top:14px;
  margin-bottom:11px;
}
.wallet-deep-link{
  display:inline-block;
  color:#71c5ff;
  text-decoration:none;
  font-size:18px;
  margin:0 auto 4px;
}
.wallet-deep-link:hover{
  text-decoration:underline;
}
.wallet-deep-link.disabled-link{
  opacity:.35;
  pointer-events:none;
}


/* v13 — short weapon-size hint */
.weapon-hint{
  margin:11px 0 0;
  color:#708397;
  font-family:"VT323","Courier New",monospace;
  font-size:17px;
  line-height:1.15;
  text-align:center;
}


/* =========================================================
   v14 — Base SVG, compact address and bottom copy toast
   ========================================================= */
.network-value{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.base-icon-svg{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 21px;
}
/* supersedes the old text-based Base icon */
.base-icon{display:none!important;}
.payment-address{
  flex:0 0 auto;
  min-width:auto;
  overflow:visible;
  text-overflow:clip;
  color:#9ddfff;
  font-family:"VT323","Courier New",monospace;
  font-size:18px;
  letter-spacing:.15px;
}
.copy-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:9999;
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  padding:10px 15px;
  border:1px solid #31516f;
  background:rgba(7,16,27,.96);
  color:#d9efff;
  box-shadow:0 8px 26px rgba(0,0,0,.38);
  font-family:"VT323","Courier New",monospace;
  font-size:19px;
  line-height:1;
  white-space:nowrap;
  transition:opacity .16s ease,transform .16s ease;
}
.copy-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
@media(max-width:620px){
  .copy-toast{
    bottom:14px;
    max-width:calc(100vw - 28px);
    white-space:normal;
    text-align:center;
  }
}


/* v16 — social footer */
.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:72px;
  padding:22px 12px 28px;
}
.social-link{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  opacity:.72;
  transition:opacity .15s ease, transform .15s ease;
}
.social-link:hover{
  opacity:1;
  transform:translateY(-1px);
}
.social-link.is-hidden{
  display:none;
}
.x-logo{
  width:25px;
  height:25px;
  fill:currentColor;
  color:#e7edf5;
}


/* v18 — X post link moved next to the eyebrow */
.site-footer{
  display:none!important;
  min-height:0!important;
  padding:0!important;
}

.eyebrow-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}

.eyebrow-row .eyebrow{
  margin:0;
  line-height:25px;
}

.eyebrow-row .social-link{
  flex:0 0 auto;
  width:25px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.72;
  transform:none;
}

.eyebrow-row .social-link:hover{
  opacity:1;
  transform:none;
}

.eyebrow-row .social-link.is-hidden{
  display:none;
}

.eyebrow-row .x-logo{
  display:block;
  width:18px;
  height:18px;
}


/* v19 — header spacing and official USDC asset */
.eyebrow-row{
  margin-bottom:6px;
}

.token-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.usdc-logo-svg{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 21px;
}


/* =========================================================
   v21 — HP text appears inside the health bar on hover
   ========================================================= */

.hp-track{
  position:relative;
  overflow:hidden;
}

.hp-fill{
  position:relative;
  z-index:1;
}

.hp-tooltip{
  pointer-events:none;
  opacity:0;
  position:absolute;
  inset:4px;
  min-width:0;
  padding:0 6px;
  background:transparent;
  border:0;
  box-shadow:none;
  transform:none;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

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

  color:#fff;
  font-family:"VT323","Courier New",monospace;
  font-size:19px;
  line-height:1;

  /* White stays readable over red/yellow/green HP and over the dark empty track. */
  text-shadow:
    -1px -1px 0 #07111b,
     1px -1px 0 #07111b,
    -1px  1px 0 #07111b,
     1px  1px 0 #07111b,
     0  0  4px #07111b;

  transition:opacity .13s ease;
}

.hp-area:hover .hp-tooltip,
.boss-column:has(.scene:not(.damage-100) .boss-target:hover) .hp-tooltip{
  opacity:1;
  transform:none;
}

/* At 100% the boss itself is not interactive anymore, but the HP bar still shows its text on hover. */
.scene.damage-100 + *{
  /* intentionally empty: keeps previous defeated interaction rules unchanged */
}

@media(max-width:620px){
  .hp-tooltip{
    font-size:17px;
  }
}


/* v22 — vertically align wallet action labels */
.wallet-actions{
  align-items:stretch;
}

.wallet-actions button,
.wallet-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}