/* CPPR responsive layer - shared by all pages.
   Desktop design is untouched; these rules only apply as screens shrink. */

/* ============ READABILITY BOOST (all pages, all screens) ============
   Slightly larger header + fonts on the most-read elements. These are
   design-level sizes, so uniform scaling carries them to every screen.
   (No !important: the phone header rules further down still win there.) */
header { padding: 15px 26px; }
.brand img { width: 46px; height: 46px; }
.brand span { font-size: 24px; }
nav a { font-size: 15.5px; }
.wchip { font-size: 14.5px; }
.wchip .sub { font-size: 15px; }
/* stat chips: Copperlode / Total Deployed / You Deployed / Time Remaining
   (.mid-col scopes these to the mine page - stake/explore chips are already larger) */
.chip .k { font-size: 12.5px; }
.mid-col .chip .v { font-size: 20px; }
.mid-col .chip .v img { width: 19px; height: 19px; }
.mid-col .chip .v .unit { font-size: 14px; }
.lode-v { font-size: 18.5px; }
.lode-plus { font-size: 16.5px; }
.chip.timer .v { font-size: 30px; }
.round-sub { font-size: 13px; }
/* grid tiles */
.t-val { font-size: 19.5px; }
.t-id { font-size: 13.5px; }
.t-miners { font-size: 13px; }
/* deploy console + rewards */
.label { font-size: 13px; }
.bal-line { font-size: 14px; }
.amount .num { font-size: 28px; }
.row { font-size: 14px; }
.row .rv { font-size: 15px; }
.row.total .rv { font-size: 17px; }
.r-row { font-size: 15px; }
.r-row .rv { font-size: 16px; }
/* CPPR and ETH icons render at IDENTICAL sizes wherever they sit together
   (!important beats the inline width/height attributes on the eth icons) */
.wchip img { width: 18px !important; height: 18px !important; }
.lode-v img { width: 20px !important; height: 20px !important; }
.row .rv img, .r-row .rv img { width: 18px !important; height: 18px !important; }
.pcard .v img { width: 22px !important; height: 22px !important; }
.chip .v img { width: 20px !important; height: 20px !important; }

/* winners + chat */
.w-row { font-size: 14.5px; }
.m-name { font-size: 13.5px; }
.m-time { font-size: 11.5px; }
/* overflow-wrap:anywhere - long unbroken strings wrap onto new lines
   instead of getting cut off at the chat's edge */
.m-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.msg { min-width: 0; }
.chat-empty { font-size: 13.5px; }
.composer input { font-size: 14px; }
.composer button { font-size: 14px; }
.panel-title { font-size: 13px; }
/* stake page */
.tier .tn { font-size: 14px; }
.tier .tm { font-size: 13.5px; }
.lock-label { font-size: 12.5px; }
.claim-card .k { font-size: 12px; }
.claim-card .usd { font-size: 13px; }
.lock-row { font-size: 14.5px; }
.lock-when:not(.perm) { font-size: 12.5px; }
/* the PERMANENT badge: a proper readable pill - upright sans (the mono
   font it inherited rendered slanted at tiny sizes), roomier padding */
.lock-when.perm {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 4px 10px;
  width: auto;
  min-width: 0;
  text-align: center;
  line-height: 1.2;
  border-radius:var(--r);
}
.a-empty { font-size: 14.5px; }
/* explore page */
.pcard .k { font-size: 12.5px; }
.pcard .v { font-size: 24px; }
.thead { font-size: 12.5px; }
.trow { font-size: 14.5px; }
/* about page */
.acc-body p, .page p { font-size: 15.5px; }
.step h3 { font-size: 15.5px; }
.step p { font-size: 14.5px; }
.rcard h3 { font-size: 15.5px; }
.rcard p { font-size: 14.5px; }
.lode-card p { font-size: 15px; }
.fair p { font-size: 14.5px; }
.fl { font-size: 14.5px; }

/* ============ NAVIGATION (all pages) ============
   The desktop CSS hides the nav under 1200px, which left tablets/phones
   with no way to switch pages. Bring it back as a full-width second row. */
@media (max-width: 1200px) {
  html:not(.uniscale) nav {
    display: flex !important;
    order: 10;
    width: 100%;
    justify-content: center;
    gap: 22px;
    padding-top: 8px;
  }
  html:not(.uniscale) header { flex-wrap: wrap; }
  /* uniform-scale mode shows the normal 1920-design inline nav */
  html.uniscale nav { display: flex !important; }
}

/* ============ HEADER (all pages) ============ */
@media (max-width: 760px) {
  /* a slightly more compact header so the game gets more room on phones */
  header { padding: 8px 12px !important; gap: 10px !important; }
  .brand img { width: 26px !important; height: 26px !important; }
  .brand span { font-size: 15px; }
  .wchip { font-size: 11.5px !important; padding: 5px 8px !important; }
  #dexBtns { display: none; } /* keep the mobile header tidy */
}
@media (max-width: 640px) {
  header { padding: 6px 10px !important; gap: 6px 8px !important; }
  .brand span { font-size: 14px; }
  .wallet { flex-wrap: wrap; gap: 5px !important; justify-content: flex-end; }
  .wchip { font-size: 11px !important; padding: 4px 7px !important; gap: 5px !important; }
  .wchip .sub { font-size: 10.5px !important; }
  .wchip img { width: 15px !important; height: 15px !important; }
  /* nav as a compact single row directly under the brand/wallet */
  nav { gap: 10px !important; font-size: 13px !important; padding-top: 4px !important; }
  nav a { padding: 5px 10px !important; }
}

/* ============ NAV WRAPPING ============
   A sixth nav link no longer fit a
   phone: measured on a 375px screen, the last link ran to 407px and hung off
   the edge. Let it wrap instead of overflowing - a second row of links is fine,
   a link you cannot reach is not. */
@media (max-width: 520px) {
  nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 8px !important;
  }
  nav a { padding: 4px 8px !important; font-size: 12.5px !important; }
}

/* ============ MINE PAGE - fluid full layout ============
   Keep the full layout (chat + grid + winners + panel) on every desktop/laptop
   by shrinking the side panels and tiles as the screen narrows. The chat only
   drops when there is genuinely no room; we only stack on mobile/tablet. */

/* never clip vertically: top-align so the stat chips sit right below the header
   (fixes chips being hidden behind the header on shorter screens) */
.left { overflow-y: auto !important; justify-content: flex-start !important; padding-top: 16px !important; }

/* the right panel's cards (chips / deploy console / rewards) must NEVER be
   squashed into each other - if space runs short the page scrolls instead */
.right > * { flex-shrink: 0 !important; }

/* Chip widths must never follow their content (the ETH<->USD tap/hover swap
   was resizing the whole chip row): min-width:0 removes the min-content
   floor so flex distributes purely by ratio. */
.chips .chip { min-width: 0; }

/* ============ UNIFORM DESKTOP SCALING ============
   header.js renders every desktop at the exact 1920x1080 design and scales
   the whole canvas to fit (html.uniscale + body zoom). These are the FIXED
   design metrics; the fluid rules below only serve browsers without zoom. */
html.uniscale .tile { width: 152px !important; height: 152px !important; } /* 156 minus room for the bigger header/fonts */
html.uniscale .chat { width: 306px !important; }
html.uniscale .winners { width: 308px !important; }
html.uniscale .right { width: 372px !important; }
html.uniscale .grid { gap: 13px !important; }
html.uniscale .left { padding: 16px 20px !important; }

/* Tile size = whatever fits BOTH the height budget (viewport minus header,
   stats bar and paddings) and the width budget (viewport minus the side
   panels), so wide-but-short or OS-scaled displays get full-size tiles with
   no dead space under the grid. (fallback for browsers without zoom) */
html:not(.uniscale) .tile {
  width: clamp(88px, min((100vh - 300px) / 5, (100vw - 1110px) / 5), 152px) !important;
  height: clamp(88px, min((100vh - 300px) / 5, (100vw - 1110px) / 5), 152px) !important;
}
/* BIG screens (Mac/4K class): never clamp the island to a box smaller than
   its content (that pushed it off-center and clipped the Copperlode chip) -
   let it self-size, grow the tiles to fill, and center it vertically. */
@media (min-width: 1800px) {
  .left-stack { max-width: none; }
  html:not(.uniscale) .tile { width: clamp(88px, min((100vh - 300px) / 5, (100vw - 1110px) / 5), 200px) !important;
          height: clamp(88px, min((100vh - 300px) / 5, (100vw - 1110px) / 5), 200px) !important; }
}
@media (min-height: 1150px) {
  .left { justify-content: center !important; }
}

/* MEDIUM (<=1600px): compact panels + smaller tiles so the FULL layout, chat
   included, still fits down to ~1300px */
@media (max-width: 1600px) {
  html:not(.uniscale) .chat { width: 244px !important; }
  html:not(.uniscale) .winners { width: 244px !important; }
  html:not(.uniscale) .right { width: 322px !important; }
  html:not(.uniscale) .tile { width: clamp(64px, min((100vh - 300px) / 5, (100vw - 910px) / 5), 140px) !important;
          height: clamp(64px, min((100vh - 300px) / 5, (100vw - 910px) / 5), 140px) !important; }
  html:not(.uniscale) .grid { gap: 10px !important; }
  html:not(.uniscale) .left { padding: 14px 16px !important; }
}
/* tighter just above the chat-drop point */
@media (max-width: 1400px) {
  html:not(.uniscale) .chat { width: 210px !important; }
  html:not(.uniscale) .winners { width: 216px !important; }
  html:not(.uniscale) .right { width: 300px !important; }
  html:not(.uniscale) .tile { width: clamp(58px, min((100vh - 300px) / 5, (100vw - 830px) / 5), 124px) !important;
          height: clamp(58px, min((100vh - 300px) / 5, (100vw - 830px) / 5), 124px) !important; }
}

/* <=1300px: no room for the chat sidebar - hide it, keep grid+winners+panel */
@media (max-width: 1300px) {
  html:not(.uniscale) .chat { display: none !important; }
  html:not(.uniscale) .right { width: 340px !important; }
  html:not(.uniscale) .tile { width: clamp(64px, min((100vh - 300px) / 5, (100vw - 660px) / 5), 132px) !important;
          height: clamp(64px, min((100vh - 300px) / 5, (100vw - 660px) / 5), 132px) !important; }
}

/* <= 1040px - or any narrow-but-tall (portrait) screen up to 1280px, like a
   rotated monitor: stack the game vertically (grid -> panel -> winners) */
@media (max-width: 1040px), (max-width: 1280px) and (orientation: portrait) {
  /* scroll the page instead of locking it to one viewport */
  html, body { overflow-y: auto !important; height: auto !important; min-height: 100%; }
  #app { height: auto !important; min-height: 100vh; }
  main { flex-direction: column; }
  .left { overflow: visible !important; justify-content: flex-start !important;
          align-items: stretch !important; height: auto !important; }
  .left-stack { max-width: 820px; margin: 0 auto; width: 100%; }

  /* flatten the nested columns so sections can be freely reordered */
  .left-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px; }
  .mid-col, .left-col { display: contents !important; }
  .chips { order: 0; flex-wrap: wrap; }
  .chips .chip { flex: 1 1 210px; }
  /* fixed basis on wrap layouts: content changes can't resize the chips */
  .chips .chip.lode { flex: 1 1 210px; }
  .grid-col { order: 1; }
  /* html:not(.uniscale) prefix: must outrank the scoped desktop rules above */
  html:not(.uniscale) .right { order: 2; width: 100% !important; height: auto !important; }
  html:not(.uniscale) .winners { order: 3; width: 100% !important; height: 320px !important; }
  html:not(.uniscale) .tile { width: 100% !important; height: auto !important; aspect-ratio: 1/1; }
}
@media (max-width: 640px) {
  .grid { gap: 7px !important; }
  html:not(.uniscale) .tile {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius:var(--r) !important;
  }
  .t-val { font-size: 13px !important; }
  .t-id { font-size: 10.5px !important; }
  .t-miners { font-size: 10px !important; }
  .chips .chip { flex: 1 1 46%; padding: 10px 12px !important; }
  .chips .chip.lode { flex: 1 1 100%; } /* full row, size fixed regardless of content */
  .chip .v { font-size: 15px !important; }
  .field-actions { flex-wrap: wrap; gap: 8px !important; }
  html:not(.uniscale) .winners { height: 280px !important; }
  .claims { grid-template-columns: 1fr !important; }
  .claims .stake { grid-column: span 1 !important; }
  .confirm { padding: 16px !important; }
}

/* ============ MOBILE/COMPACT CHAT (mine page) ============
   Wherever the chat sidebar is hidden, a round floating button (bottom-left)
   opens the chat as an overlay panel so nobody loses access to it. */
.chat-fab {
  display: none;
  position: fixed; left: 14px; bottom: 14px;
  width: 52px; height: 52px; border-radius: 50%;
  z-index: 1001;
  align-items: center; justify-content: center;
  background: var(--champagne, #ff8a3d); color: #000000;
  border: none; cursor: pointer; font-size: 20px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.chat-fab:active { transform: scale(0.94); }
@media (max-width: 1300px) {
  html:not(.uniscale) .chat-fab { display: flex; }
  /* The FAB is fixed to the bottom-LEFT corner at z-index 1001, which parked
     it directly on top of the winners pager's "previous page" button - the
     control was visible but untappable, so browsing back through the winners
     list was impossible on a phone. Pull the pager's controls to the right,
     out of that corner, and reserve the corner's width so nothing drifts back
     into it. Everything stays on one row and in the same order. */
  html:not(.uniscale) .w-pager {
    justify-content: flex-end;
    gap: 14px;
    padding-left: 76px;
  }
  /* html prefix: must outrank the scoped hide rule above or the overlay
     never appears when the FAB is tapped */
  html .chat.mobile-open {
    display: flex !important;
    position: fixed !important; left: 12px; bottom: 76px;
    width: min(330px, calc(100vw - 24px)) !important;
    height: min(440px, 62vh) !important;
    min-height: 260px;
    z-index: 1000;
    border: 1px solid var(--line-2, #282828) !important;
    border-radius:var(--r);
    background: var(--surface, #070707);
    box-shadow: 0 14px 44px rgba(0,0,0,0.55);
    overflow: hidden;
  }
  /* the sidebar collapse control makes no sense on the overlay */
  .chat.mobile-open .chat-toggle { display: none; }
}

/* While the floating chat panel is open, the page behind it must not
   scroll - closing the chat makes it scrollable/usable again. */
html.chat-open, html.chat-open body { overflow: hidden !important; }
/* reaching the top/bottom of the message list must not chain into
   scrolling the page behind the chat */
.chat .messages { overscroll-behavior: contain; }

/* ============ STAKE PAGE ============ */
@media (max-width: 640px) {
  .shell { gap: 12px !important; }
  .chips .chip { flex: 1 1 46%; }
  .tiers { flex-wrap: wrap !important; }
  .tiers .tier { flex: 1 1 30%; }
  .quick { flex-wrap: wrap; }
  .lock-row { flex-wrap: wrap; gap: 6px 10px !important; }
  .page { padding: 14px !important; }
  /* FLEX share card scales to the phone */
  .flex-card, #fcCard { max-width: 100% !important; }
}

/* ============ EXPLORE PAGE ============ */
/* explorer links inside the round detail rows */
.d-tx { color: var(--champagne, #ff8a3d); text-decoration: none; font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.d-tx:hover { text-decoration: underline; }
.d-miner .a a:hover { color: var(--champagne, #ff8a3d) !important; }

@media (max-width: 860px) {
  /* the 8-column results table scrolls sideways instead of crushing */
  .activity { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .activity .thead, .activity .trow { min-width: 780px; }
  .activity .detail { min-width: 780px; }
  .proto { flex-wrap: wrap; }
  .proto .pcard { flex: 1 1 45%; }
  .page { padding: 14px !important; }
}
@media (max-width: 640px) {
  .proto .pcard { flex: 1 1 100%; }
  .pager { flex-wrap: wrap; gap: 8px; }
}

/* ============ ABOUT PAGE ============ */
@media (max-width: 760px) {
  .hero h1 { font-size: 30px !important; line-height: 1.2 !important; }
  .steps { grid-template-columns: 1fr !important; }
  .trio { grid-template-columns: 1fr !important; }
  .tiers { flex-wrap: wrap !important; }
  .tiers .tier { flex: 1 1 30%; }
  .fee-legend { flex-wrap: wrap; gap: 8px 14px !important; }
  .shell, .page { padding: 14px !important; }
  .acc-body { padding: 14px !important; }
}

/* ============ BETA GATE already responsive ============ */

/* very small phones: keep everything breathing */
@media (max-width: 380px) {
  .wchip.xchip { display: none; }
  nav { gap: 12px; font-size: 13px; }
}

/* ---------------- header "More" dropdown ---------------- */
/* Lives here rather than in each page's <style> because the nav is duplicated
   across every page - one copy of the rules keeps them from drifting apart. */
.nav-more{ position:relative; display:flex; }
.nav-more-btn{
  display:flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:var(--r); border:none; background:none;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--text-2,#b8b0a7); cursor:pointer;
}
.nav-more-btn:hover{ color:var(--text,#fff); background:var(--surface-2,#0c0c0c); }
.nav-more.on .nav-more-btn,
.nav-more-btn.active{ color:var(--text,#fff); background:var(--surface-3,#141414); }
.nav-more-btn .car{ font-size:9px; opacity:0.65; transition:transform .16s ease; }
.nav-more.on .nav-more-btn .car{ transform:rotate(180deg); }
.nav-more-menu{
  /* Anchored to the button's RIGHT edge, not its left. More is always the last
     nav item, so on a phone it sits hard against the screen edge and a
     left-anchored menu opened ~79px off-screen. Right-anchoring is correct at
     every width. */
  position:absolute; top:calc(100% + 6px); right:0; z-index:80;
  display:none; flex-direction:column; gap:2px; min-width:150px; padding:6px;
  background:var(--surface,#070707); border:1px solid var(--line-2,#282828);
  border-radius:var(--r); box-shadow:0 10px 28px rgba(0,0,0,0.5);
}
.nav-more.on .nav-more-menu{ display:flex; }
.nav-more-menu a{
  padding:8px 11px; border-radius:var(--r); font-size:13.5px; font-weight:600;
  color:var(--text-2,#b8b0a7); text-decoration:none; white-space:nowrap;
}
.nav-more-menu a:hover{ color:var(--text,#fff); background:var(--surface-2,#0c0c0c); }
.nav-more-menu a.active{ color:var(--text,#fff); background:var(--surface-3,#141414); }