/* My Skyblock hub (Claude Main, 11 Oct 2026).
   Home is a welcome and one card per section (the Tools page cards: they spin when tapped on a phone, and light up
   on a computer). Every section gets a top bar with a back button and a menu of all sections. Below 900px every
   section is laid out for phones: glass panels, plain numbers, rows instead of tables. Loads last. */

/* ---------- Page ---------- */
.mb .mb-main.nx.cc { width: min(1180px, calc(100% - 48px)); padding-top: 12px; padding-bottom: 72px; }
.cc-app { display: block; }
.cc-view { min-width: 0; }

/* ---------- Home: welcome ---------- */
.hb { display: grid; gap: 30px; }
.hb-hi { display: grid; justify-items: center; gap: 8px; padding-top: 18px; text-align: center; animation: ccPage .6s var(--cc-ease) both; }
.hb-hi small { color: var(--cc-g); font: 700 11px var(--cc-mono); letter-spacing: .22em; text-transform: uppercase; }
.hb-hi h1 { max-width: 100%; margin: 0; overflow: hidden; color: #fff; font: 800 clamp(34px, 5vw, 52px)/1.05 Outfit, Inter, sans-serif; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.hb-seen { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--cc-line); color: #c4c4cc; font: 600 13px Inter, sans-serif; }
.hb-seen i { width: 8px; height: 8px; border-radius: 50%; background: #71717a; }
.hb-seen.on { color: #d1fae5; box-shadow: inset 0 0 0 1px rgba(0,255,157,.25); }
.hb-seen.on i { background: var(--cc-g); box-shadow: 0 0 10px var(--cc-g); animation: reBlink 2s ease-in-out infinite; }

/* ---------- Home: cards ---------- */
.hb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.hb-card { grid-column: span 2; position: relative; display: block; height: 158px; padding: 0; border: 0; border-radius: 20px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; perspective: 1400px;
  animation: ccPage .55s var(--cc-ease) both; animation-delay: calc(var(--i) * 40ms); transition: transform .45s var(--cc-ease); -webkit-tap-highlight-color: transparent; }
.hb-card.big { grid-column: span 3; height: 260px; }
.hb-in { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.25,.6,.25,1); }
.hb-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 14px; overflow: hidden; border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--c), .07), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), #0a0a0c;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.06); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: box-shadow .4s; }
.hb-back { transform: rotateY(180deg); }
.hb-ic { display: grid; place-items: center; margin-bottom: 8px; color: rgb(var(--c)); }
.cc .hb-ic svg { width: 34px; height: 34px; stroke-width: 1.6; filter: drop-shadow(0 0 14px rgba(var(--c), .45)); transition: transform .45s var(--cc-ease); }
.hb-card.big .hb-ic svg { width: 48px; height: 48px; }
.hb-art { display: block; width: 118px; margin: -10px 0 0; }
.hb-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 20px rgba(0,255,157,.18)); animation: sbxFloat 6s ease-in-out infinite; }
.hb-card:not(.big) .hb-art { width: 74px; margin: -6px 0 2px; }
.hb-face b { color: #fff; font: 900 13px/1.3 Montserrat, Outfit, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hb-card.big .hb-face b { font-size: 16px; }
.hb-face small { color: #a1a1aa; font: 600 12.5px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.hb-card.big .hb-front small { color: rgb(var(--c)); font: 700 14px var(--cc-mono); }
.hb-about { display: none; max-width: 230px; margin-top: 6px; color: #8a8a94; font: 500 13px/1.5 Inter, sans-serif; font-style: normal; }
.hb-card.big .hb-about { display: block; }
.hb-back em { max-width: 240px; color: #b9b9c4; font: 500 12.5px/1.45 Inter, sans-serif; font-style: normal; }
.hb-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(var(--c)); color: #080808; font: 900 10px Montserrat, Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.cc .hb-go svg { width: 13px; height: 13px; stroke-width: 2.6; }

/* Computers: the card lights up in its colour */
@media (hover: hover) {
  .hb-card:hover, .hb-card:focus-visible { outline: none; transform: translateY(-4px) scale(1.02); z-index: 2; }
  .hb-card:hover .hb-face, .hb-card:focus-visible .hb-face { box-shadow: inset 0 0 0 2px rgb(var(--c)), inset 0 0 18px rgba(var(--c), .18), 0 0 38px rgba(var(--c), .38); }
  .hb-card:hover .hb-ic svg { transform: scale(1.1); }
}
.hb-card:active { transform: scale(.98); }

/* Server address */
.hb-server { display: flex; align-items: center; gap: 14px; width: min(560px, 100%); margin: 6px auto 0; padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--cc-line); animation: ccPage .6s .3s var(--cc-ease) both; }
.hb-srv-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(0,255,157,.08); color: var(--cc-g); }
.cc .hb-srv-ic svg { width: 18px; height: 18px; }
.hb-srv-tx { display: grid; flex: 1; min-width: 0; gap: 1px; }
.hb-srv-tx small { color: var(--cc-dim); font: 700 10px var(--cc-mono); letter-spacing: .16em; text-transform: uppercase; }
.hb-srv-tx b { overflow: hidden; color: #fff; font: 700 14.5px var(--cc-mono); text-overflow: ellipsis; white-space: nowrap; }
.hb-srv-tx em { color: var(--cc-mut); font: 500 12px Inter, sans-serif; font-style: normal; }
.hb-copy { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #f4f4f5; color: #0b0b10; font: 700 13px Inter, sans-serif; cursor: pointer; transition: transform .2s var(--cc-ease), background .2s; }
.cc .hb-copy svg { width: 15px; height: 15px; }
.hb-copy:hover { background: #fff; transform: translateY(-1px); }
.hb-copy:active { transform: scale(.96); }

@media (max-width: 1180px) and (min-width: 901px) {
  .hb-card.big { grid-column: span 6; height: 220px; }
  .hb-card { grid-column: span 4; }
}

/* ---------- Section top bar: back button, section name, menu ---------- */
.cc-top:empty { display: none; }
.cc-bar { position: relative; z-index: 40; display: grid; justify-items: start; gap: 12px; margin: 6px 0 22px; animation: ccPage .45s var(--cc-ease) both; }
.cc-back { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--cc-line2);
  color: #e4e4e7; font: 600 13.5px Inter, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s, transform .2s var(--cc-ease); }
.cc .cc-back svg { width: 17px; height: 17px; stroke-width: 2.2; transition: transform .25s var(--cc-ease); }
.cc-back:hover { background: rgba(255,255,255,.08); }
.cc-back:hover svg { transform: translateX(-2px); }
.cc-back:active { transform: scale(.97); }
.cc-pick { position: relative; }
.cc-pick-btn { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 0; padding: 4px 10px 4px 0; border: 0; border-radius: 14px; background: none; color: #fff; cursor: pointer; text-align: left; }
.cc-pick-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(var(--c), .1); box-shadow: inset 0 0 0 1px rgba(var(--c), .28); color: rgb(var(--c)); }
.cc .cc-pick-ic svg { width: 22px; height: 22px; }
.cc-pick-btn h1 { margin: 0; overflow: hidden; color: #fff; font: 800 30px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.cc .cc-pick-chev { flex: none; width: 22px; height: 22px; color: var(--cc-mut); stroke-width: 2.2; transition: transform .35s var(--cc-ease), color .2s; }
.cc-pick-btn:hover .cc-pick-chev { color: #fff; }
.cc-pick.open .cc-pick-chev { color: #fff; transform: rotate(180deg); }

.cc-drop { position: absolute; top: calc(100% + 10px); left: 0; width: 460px; padding: 14px; border-radius: 22px; visibility: hidden; opacity: 0; pointer-events: none;
  background: rgba(13,14,19,.975); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -20px rgba(0,0,0,.95); transform: translateY(-8px) scale(.97); transform-origin: top left;
  transition: opacity .25s ease, transform .35s var(--cc-ease), visibility 0s .35s; }
.cc-pick.open .cc-drop { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: opacity .25s ease, transform .35s var(--cc-ease), visibility 0s; }
.cc-dd-h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.cc-dd-h > span { color: var(--cc-dim); font: 700 10.5px var(--cc-mono); letter-spacing: .18em; text-transform: uppercase; }
.cc-dd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-dd-i { display: grid; justify-items: center; align-content: center; gap: 8px; min-width: 0; height: 88px; padding: 8px 6px; border: 0; border-radius: 16px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--cc-line);
  color: #e4e4e7; font: 600 12.5px Inter, sans-serif; text-align: center; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s var(--cc-ease); }
.cc-dd-i > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dd-ic { display: grid; place-items: center; color: rgb(var(--c)); }
.cc .cc-dd-ic svg { width: 24px; height: 24px; }
.cc-dd-i:hover { background: rgba(var(--c), .07); box-shadow: inset 0 0 0 1px rgba(var(--c), .35); }
.cc-dd-i:active { transform: scale(.97); }
.cc-dd-i[aria-current="true"] { background: rgba(var(--c), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--c), .6); color: #fff; }
.cc-dd.list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cc-dd.list .cc-dd-i { display: flex; align-items: center; justify-content: flex-start; gap: 14px; height: 50px; padding: 0 14px; font-size: 14.5px; text-align: left; }
.cc-dd.list .cc-dd-ic { width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--c), .1); }
.cc .cc-dd.list .cc-dd-ic svg { width: 17px; height: 17px; }
.cc-dd-home { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px; margin-top: 10px; border: 0; border-radius: 14px; background: #f4f4f5; color: #0b0b10; font: 700 14px Inter, sans-serif; cursor: pointer; transition: background .2s; }
.cc .cc-dd-home svg { width: 17px; height: 17px; }
.cc-dd-home:hover { background: #fff; }

/* The page heading sits in the top bar, so each section starts with its short description */
.cc .nx-head.cc-sub { align-items: center; margin-bottom: 22px; }
.cc .nx-head.cc-sub p { margin: 0; }
.cc .re-head h2 { display: none; }

/* ---------- Money: one wallet card ---------- */
.mn-wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: center; gap: 0 26px; margin: 0 0 22px; padding: 24px 26px; border-radius: 22px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(251,191,36,.1), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); box-shadow: inset 0 0 0 1px var(--cc-line); animation: ccPage .5s var(--cc-ease) both; }
.mn-main { display: grid; gap: 6px; }
.mn-main small { display: inline-flex; align-items: center; gap: 8px; color: #fcd34d; font: 700 11px var(--cc-mono); letter-spacing: .16em; text-transform: uppercase; }
.cc .mn-main small svg { width: 17px; height: 17px; color: #fbbf24; }
.mn-main b { color: #fff; font: 800 clamp(34px, 4vw, 46px)/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mn-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mn-grid > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px var(--cc-line); }
.mn-grid small { color: var(--cc-dim); font: 600 11.5px Inter, sans-serif; }
.mn-grid b { color: #fff; font: 700 17px var(--cc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-grid b.up { color: #4ade80; } .mn-grid b.down { color: #f87171; }
.mn-xp { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--cc-line); color: var(--cc-mut); font-size: 13.5px; }
.cc .mn-xp svg { width: 16px; height: 16px; color: #a78bfa; }
.mn-xp b { color: #fff; font-family: var(--cc-mono); }
@media (max-width: 1180px) { .mn-wallet { grid-template-columns: minmax(0, 1fr); gap: 18px; } .mn-xp { margin-top: 0; } }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  .mb .mb-main.nx.cc { width: calc(100% - 28px); padding-top: 0; padding-bottom: 56px; }

  /* Home */
  .hb { gap: 22px; }
  .hb-hi { gap: 6px; padding-top: 6px; }
  .hb-hi h1 { font-size: clamp(30px, 9vw, 40px); }
  .hb-seen { font-size: 12.5px; padding: 6px 12px; }
  .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hb-card, .hb-card.big { grid-column: auto; height: 164px; border-radius: 18px; }
  .hb-card .hb-ic svg, .hb-card.big .hb-ic svg { width: 34px; height: 34px; }
  .hb-card.big .hb-face b, .hb-face b { font-size: 12px; letter-spacing: .08em; }
  .hb-card.big .hb-front small, .hb-face small { color: #a1a1aa; font: 600 12px Inter, sans-serif; }
  .hb-card .hb-about, .hb-card.big .hb-about { display: none; }
  .hb-card .hb-art, .hb-card.big .hb-art { width: 82px; margin: -8px 0 0; }
  .hb-face { padding: 14px 10px; }
  .hb-back em { font-size: 11.5px; }
  /* Tapped: spin round (the section opens as it finishes) */
  .hb-card.spin .hb-in { transform: rotateY(180deg); }
  .hb-card.spin .hb-face { box-shadow: inset 0 0 0 2px rgb(var(--c)), inset 0 0 16px rgba(var(--c), .2), 0 0 30px rgba(var(--c), .4); }
  .hb-server { gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; }
  .hb-srv-ic { display: none; }
  .hb-srv-tx b { font-size: 13.5px; }
  .hb-copy span { display: none; }
  .hb-copy { width: 44px; padding: 0; justify-content: center; }

  /* Top bar */
  .cc-bar { gap: 10px; margin: 2px 0 18px; }
  .cc-pick { position: static; width: 100%; }
  .cc-pick-btn { width: 100%; }
  .cc-pick-btn h1 { font-size: 26px; }
  .cc-pick-ic { width: 40px; height: 40px; border-radius: 12px; }
  .cc-drop { left: 0; right: 0; width: auto; padding: 12px; border-radius: 20px; }
  .cc-dd-i { height: 82px; font-size: 12px; }

  /* Section intro + controls */
  .cc .nx-head.cc-sub { display: grid; gap: 12px; margin-bottom: 18px; }
  .cc .nx-head.cc-sub p { color: var(--cc-mut); font-size: 14px; }
  .cc .nx-head.cc-sub .cc-head-acts { justify-content: flex-start; }

  /* Glass panels instead of bracketed boxes */
  .cc .sbx-two { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .cc .sbx-two > div { padding: 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); box-shadow: inset 0 0 0 1px var(--cc-line); }
  .cc .sbx-two > div::before, .cc .sbx-two > div::after { display: none; }
  .cc .nx-sec-h { margin: 26px 0 12px; }
  .cc .nx-sec-h h3 { font-size: 11px; }
  .cc .nx-sec-h h3 small { display: block; margin-top: 4px; font-size: 11px; }

  /* Money */
  .mn-wallet { gap: 16px; padding: 20px 16px 16px; border-radius: 22px; }
  .mn-main { justify-items: center; text-align: center; }
  .mn-main b { font-size: 42px; }
  .mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mn-grid > div { padding: 11px 12px; }
  .mn-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .mn-grid b { font-size: 16px; }
  .mn-xp { justify-content: center; font-size: 13px; text-align: center; }
  .cc .cc-upd { padding: 6px 11px; font-size: 11px; }
  .sbx-donut { justify-content: center; }

  /* Tables become clean rows: name and number on top, the details in small grey underneath */
  .cc .nx-tablewrap { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
  .cc.sbx .nx-table tr { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 13px 16px; }
  .cc.sbx .nx-table td[data-l] { grid-column: auto; display: block; color: var(--cc-dim); font-size: 12.5px; font-weight: 500; }
  .cc.sbx .nx-table td[data-l]::before { content: none; }
  .cc.sbx .nx-table td[data-l] + td[data-l] { text-align: right !important; }
  .cc.sbx .nx-table td:first-child b { font-size: 14.5px; }
  .cc.sbx .nx-table td.head { font-size: 15px; }
  .cc .cc-tx-head { display: grid; gap: 12px; margin-top: 26px; }
  .cc .cc-tx-head .cc-head-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cc .cc-tx-head .nx-seg { width: 100%; }
  .cc .cc-tx-head .nx-seg button { flex: 1; }
  .cc-pager { justify-content: center; }

  /* Today: earned today, then four simple rows */
  .cc .ov-hero { border-radius: 22px; }
  .cc .ov-today { padding: 20px 18px; }
  .cc .ov-stats { grid-template-columns: 1fr 1fr; }
  .cc .ov-stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; text-align: left; }
  .cc .ov-stat .ov-ic { grid-row: 1 / span 2; }
  .cc .ov-stat .ov-ic svg { width: 24px; height: 24px; }
  .cc .ov-stat b { font-size: 17px; }
  .cc .ov-stat small { font-size: 10px; letter-spacing: .08em; }

  /* Top helpers: name and coins on top, status and coins a minute underneath */
  .cc .th-wrap { border-radius: 20px; }
  .cc .th thead { display: none; }
  .cc .th, .cc .th tbody { display: block; }
  .cc .th tbody tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
  .cc .th tbody tr:last-child { border-bottom: 0; }
  .cc .th td { display: block !important; padding: 0; border: 0; text-align: left; }
  .cc .th td.th-n { grid-row: 1 / span 2; width: auto; }
  .cc .th td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .cc .th td:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; font-size: 15px; }
  .cc .th td:nth-child(3) { grid-column: 2; grid-row: 2; padding-left: 48px; }
  .cc .th td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; color: var(--cc-dim); font-size: 12px; }
  .cc .th td:nth-child(4)::after { content: " / min"; }
  .cc .th td:nth-child(6), .cc .th td:nth-child(7) { display: none !important; }
  .cc .th td .th-st { justify-content: flex-start; }
  .cc .cc-top-bar .nx-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cc .cc-top-bar .nx-seg::-webkit-scrollbar { display: none; }
  .cc .cc-top-bar .nx-seg button { flex: none; }

  /* Islands, helpers, skins: one clean column (skins two across) */
  .cc .sbx-isl-grid:not(.cc-list) { gap: 14px; }
  .cc .oc-grid:not(.cc-list) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cc .hc-grid:not(.cc-list) { gap: 12px; }
}
@media (max-width: 380px) {
  .hb-grid { gap: 10px; }
  .hb-card, .hb-card.big { height: 150px; }
  .cc-pick-btn h1 { font-size: 23px; }
  .cc-dd { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-in, .cc-drop, .hb-card { transition: none !important; }
}
@media (max-width: 900px) { .cc .nx-head.cc-sub .cc-upd { justify-self: start; } }

/* ---------- Round 2 (Parky, 11 Oct 2026): darker glass cards with a neon edge, centred text on phones ---------- */
.hb-face { background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 38%, rgba(255,255,255,0) 60%), radial-gradient(120% 80% at 50% 0%, rgba(var(--c), .06), transparent 60%), rgba(6,7,10,.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), .32), inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px -6px rgba(var(--c), .35), 0 18px 40px -24px rgba(0,0,0,.9); }
/* One card at a time glows softly, like the Tools page */
@keyframes hbPulse { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(var(--c), .32), inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px -6px rgba(var(--c), .35), 0 18px 40px -24px rgba(0,0,0,.9); }
  50% { box-shadow: inset 0 0 0 2px rgba(var(--c), .85), inset 0 0 14px rgba(var(--c), .18), 0 0 32px rgba(var(--c), .4), 0 18px 40px -24px rgba(0,0,0,.9); } }
.hb-card.pulse .hb-front { animation: hbPulse 6s cubic-bezier(.45,0,.55,1) both; }
@media (max-width: 900px) {
  /* Centre everything on phones */
  .cc .nx-head.cc-sub { justify-items: center; text-align: center; }
  .cc .nx-head.cc-sub .cc-head-acts { justify-content: center; }
  .cc .nx-head.cc-sub .cc-upd { justify-self: center; }
  .cc .nx-sec-h { justify-content: center; text-align: center; }
  .cc .nx-sec-h h3 { flex-wrap: wrap; justify-content: center; }
  .cc-bar { justify-items: center; }
  .cc-pick { display: flex; justify-content: center; }
  .cc-pick-btn { width: auto; padding-right: 0; }
  .mn-grid > div, .mn-grid > div:last-child:nth-child(odd) { display: grid; justify-items: center; text-align: center; }
  .cc .ov-today { justify-items: center; text-align: center; }
  .cc .ov-stat { justify-items: center; text-align: center; grid-template-columns: 1fr; }
  .cc .ov-stat .ov-ic { grid-row: auto; }
  .cc .cc-tx-head { justify-items: center; text-align: center; }
  .cc .nx-empty { text-align: center; }
  /* Less space above */
  .hb-hi { padding-top: 0; }
  .cc-bar { margin-top: 0; }
}
@media (max-width: 900px) {
  .cc .ov-today { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lab" "num" "sub" "spark"; }
  .cc .ov-lab { justify-content: center; }
  .cc .ov-spark { justify-content: center; margin-top: 6px; }
}

/* ---------- Round 3 (Parky, 11 Oct 2026): title beside the back button, full-width menu ---------- */
.cc-bar { display: flex; align-items: center; gap: 14px; }
.cc-pick { position: static; display: block; width: auto; min-width: 0; }
.cc-pick-btn { width: auto; }
.cc-drop { left: 0; right: 0; width: auto; top: calc(100% + 12px); padding: 16px 0 18px; border-radius: 0; background: rgba(8,9,13,.97);
  box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.08), 0 40px 60px -30px rgba(0,0,0,.95); transform: translateY(-6px); transform-origin: top center; }
.cc-dd { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cc-dd.list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-dd-home { width: auto; margin: 12px auto 0; padding: 0 22px; }
@media (max-width: 900px) {
  .cc-bar { justify-content: flex-start; gap: 10px; }
  .cc-back { flex: none; height: 36px; padding: 0 12px 0 8px; }
  .cc-back span { font-size: 0; }
  .cc-back span::after { content: "Back"; font-size: 13.5px; }
  .cc-pick { flex: 1; display: block; }
  .cc-pick-btn { gap: 9px; padding: 0; max-width: 100%; }
  .cc-pick-btn h1 { font-size: 22px; }
  .cc-pick-ic { width: 34px; height: 34px; border-radius: 10px; }
  .cc .cc-pick-ic svg { width: 18px; height: 18px; }
  /* Edge to edge on phones */
  .cc-drop { left: -14px; right: -14px; padding: 14px 14px 16px; }
  .cc-dd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-dd.list { grid-template-columns: minmax(0, 1fr); }
  .cc-dd-home { width: 100%; }
}
@media (max-width: 380px) { .cc-dd { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cc-dd-i { font-size: 11.5px; } }
@media (max-width: 900px) {
  .cc .hs-total { justify-content: center; text-align: center; }
  .cc .hs-total > span { flex-basis: 100%; }
  .cc .hs-k:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .cc .cc-page > .nx-foot, .cc .pm-foot, .cc .pm-note { justify-content: center; text-align: center; } }
@media (max-width: 900px) { .cc .re-head { align-items: center; text-align: center; } }

/* ---------- Round 4 (Parky, 11 Oct 2026): the menu looks like the site's phone drawer ----------
   Dark rows, white text, a coloured icon on its own, a soft chevron. Grid view keeps the same rows two across. */
.cc-drop { background: #050507; }
.cc-dd { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-dd.list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cc-dd-i, .cc-dd.list .cc-dd-i { display: flex; align-items: center; justify-content: flex-start; gap: 12px; height: 52px; padding: 0 16px; border-radius: 12px;
  background: #0a0a0c; box-shadow: inset 0 0 0 1px rgba(39,39,42,.55); color: #f4f4f5; font: 600 14px Inter, system-ui, sans-serif; text-align: left; }
.cc-dd-ic, .cc-dd.list .cc-dd-ic { width: auto; height: auto; border-radius: 0; background: none; }
.cc .cc-dd-ic svg, .cc .cc-dd.list .cc-dd-ic svg { width: 18px; height: 18px; stroke-width: 2; }
.cc-dd-i > span:last-child { flex: 1; }
.cc-dd-i::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 1.5px solid #71717a; border-bottom: 1.5px solid #71717a; transform: rotate(-45deg); }
.cc-dd-i:hover { background: #111114; box-shadow: inset 0 0 0 1px rgba(63,63,70,.7); }
.cc-dd-i[aria-current="true"] { background: rgba(var(--c), .08); box-shadow: inset 0 0 0 1px rgba(var(--c), .45); }
.cc-dd-i[aria-current="true"]::after { border-color: rgb(var(--c)); }
.cc-dd-home { height: 48px; border-radius: 12px; }
@media (max-width: 900px) {
  .cc-dd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-dd:not(.list) .cc-dd-i { gap: 10px; padding: 0 12px; font-size: 13.5px; }
  .cc-dd:not(.list) .cc-dd-i::after { display: none; }
}
@media (max-width: 380px) { .cc-dd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Game account, linked (11 Oct 2026): one pill, NexusHub <-> Minecraft ---------- */
.ga-link { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(6,7,10,.7); box-shadow: inset 0 0 0 1px rgba(0,255,157,.28), 0 0 24px -8px rgba(0,255,157,.35); animation: ccPage .5s var(--cc-ease) both; }
.ga-side { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ga-side img { flex: none; width: auto; height: 24px; }
.ga-mc { image-rendering: pixelated; }
.ga-side b { overflow: hidden; color: #fff; font: 700 14.5px Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ga-sync { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,255,157,.1); color: var(--cc-g); }
.cc .ga-sync svg { width: 16px; height: 16px; stroke-width: 2.2; }
.ga-note { margin: 16px 0 0; color: var(--cc-dim); font-size: 13px; text-align: center; }
@media (max-width: 420px) { .ga-link { gap: 10px; padding: 9px 14px; } .ga-side b { font-size: 13.5px; } .ga-sync { width: 26px; height: 26px; } }
.cc .cc-page:has(.ga-link) .nx-head { justify-content: center; text-align: center; }
/* Just linked: a tick, then the connected card pops in */
.ga-done { display: grid; justify-items: center; gap: 6px; margin: 4px 0 14px; text-align: center; }
.ga-done h2 { margin: 0; color: #fff; font: 800 28px/1.1 Outfit, Inter, sans-serif; }
.ga-link.fresh { animation: gaPop .7s .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes gaPop { from { opacity: 0; transform: scale(.85); } }
.cc .cc-page:has(.ga-done) .cc-gate-btns { justify-content: center; margin-top: 18px; }
.cc-gate-steps li > span { min-width: 0; line-height: 1.45; }

/* ---------- Round 5 (Parky, 11 Oct 2026): computers flip the cards on hover; phones keep them still ---------- */
.hb-front .hb-about { display: none !important; }
@media (hover: hover) and (min-width: 901px) {
  .hb-in { transition: transform .8s cubic-bezier(.25,.6,.25,1); }
  .hb-card:hover .hb-in, .hb-card:focus-visible .hb-in { transform: rotateY(180deg); }
  .hb-card:hover, .hb-card:focus-visible { transform: scale(1.03); }
  .hb-back em { font-size: 13.5px; }
  .hb-card.big .hb-back b { font-size: 17px; }
  .hb-card.big .hb-back em { max-width: 230px; font-size: 14px; }
}
@media (max-width: 900px) {
  .hb-card:active .hb-face { box-shadow: inset 0 0 0 2px rgb(var(--c)), inset 0 0 16px rgba(var(--c), .2), 0 0 26px rgba(var(--c), .4); }
}

/* Section top bar on computers: back button on the left, a big centred title */
@media (min-width: 901px) {
  .cc-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 4px 0 30px; }
  .cc-back { justify-self: start; }
  .cc-pick { grid-column: 2; }
  .cc-pick-btn { gap: 16px; padding: 4px 6px; }
  .cc-pick-btn h1 { font-size: 44px; letter-spacing: -.03em; }
  .cc-pick-ic { width: 56px; height: 56px; border-radius: 17px; }
  .cc .cc-pick-ic svg { width: 28px; height: 28px; }
  .cc .cc-pick-chev { width: 26px; height: 26px; }
  .cc-drop { transform-origin: top center; }
  .cc .nx-head.cc-sub { justify-content: center; text-align: center; }
  .cc .nx-head.cc-sub > div:first-child { flex: 0 1 auto; }
  .cc .nx-head.cc-sub p { margin: 0 auto; }
}
/* Phones: the section menu sits on the right */
@media (max-width: 900px) {
  .cc-bar { justify-content: space-between; }
  .cc-pick { flex: 0 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
  .cc-pick-btn { justify-content: flex-end; }
}

/* ---------- Round 6 (Parky, 11 Oct 2026): truly centred on phones; Top helpers sort shows what you picked ---------- */
@media (max-width: 900px) {
  /* Grid columns only grew as wide as their text, so "centred" blocks leaned left on wider phones */
  .cc .nx-head.cc-sub, .cc .cc-tx-head, .hb-hi, .mn-main, .ga-done { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .cc .nx-head.cc-sub > div:first-child { width: 100%; flex: none; }
  .cc .nx-head.cc-sub p { max-width: 520px; margin: 0 auto; }
  .cc .cc-tx-head > div:first-child { width: 100%; }
  .cc .cc-tx-head .cc-head-acts { justify-items: center; }
  .cc .nx-sec-h { width: 100%; }
  /* Top helpers: the sort buttons in the middle (they scroll sideways if the phone is too narrow) */
  .cc .cc-top-bar { display: flex; justify-content: center; }
  .cc .cc-top-bar .nx-seg { margin: 0 auto; }
  /* The number on the right is whatever you sorted by; coins made sits underneath */
  .cc .th.by-rate td:nth-child(4) { grid-row: 1; color: #fff; font-size: 15px; font-weight: 700; }
  .cc .th.by-rate td:nth-child(5), .cc .th.by-work td:nth-child(5), .cc .th.by-tools td:nth-child(5) { grid-row: 2; font-size: 12px; color: #fcd34d; }
  .cc .th.by-rate td:nth-child(5)::after, .cc .th.by-work td:nth-child(5)::after, .cc .th.by-tools td:nth-child(5)::after { content: " made"; color: var(--cc-dim); font-weight: 500; }
  .cc .th.by-work td:nth-child(4), .cc .th.by-tools td:nth-child(4) { display: none !important; }
  .cc .th.by-work td:nth-child(6) { display: block !important; grid-column: 3; grid-row: 1; text-align: right; font-size: 15px; font-weight: 700; color: #fff; }
  .cc .th.by-tools td:nth-child(7) { display: block !important; grid-column: 3; grid-row: 1; text-align: right; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
}
.mn-grid > div { grid-template-columns: minmax(0, 1fr); }

/* ---------- Island settings (Parky, 11 Oct 2026): one tidy list under the picture ---------- */
.is-list { display: grid; gap: 10px; align-content: start; }
.is-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 12px 16px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(6,7,10,.6); box-shadow: inset 0 0 0 1px rgba(var(--c), .22);
  color: #fff; font: inherit; transition: box-shadow .25s, transform .2s var(--cc-ease), background .25s; animation: ccPage .45s var(--cc-ease) both; }
.is-row:nth-child(2) { animation-delay: 40ms; } .is-row:nth-child(3) { animation-delay: 80ms; } .is-row:nth-child(4) { animation-delay: 120ms; }
.is-row:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--c), .6), 0 0 22px -8px rgba(var(--c), .5); }
.is-row:active { transform: scale(.985); }
.is-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: rgba(var(--c), .12); color: rgb(var(--c)); }
.cc .is-ic svg, .sbx-dialog .is-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.is-tx { display: grid; flex: 1; min-width: 0; gap: 3px; }
.is-tx b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #fff; font: 700 15px Inter, sans-serif; }
.is-tx small { color: #8a8a94; font: 500 12.5px/1.4 Inter, sans-serif; }
.cc .is-chev { flex: none; width: 18px; height: 18px; color: #52525b; }
.is-row.bad .is-tx b { color: #fca5a5; }
.is-new, .is-soon { padding: 2px 8px; border-radius: 999px; font: 800 9.5px "JetBrains Mono", ui-monospace, monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.is-new { background: rgba(0,255,157,.14); color: #00ff9d; box-shadow: 0 0 12px -2px rgba(0,255,157,.5); }
.is-soon { background: rgba(250,204,21,.12); color: #facc15; }
.sbx-dialog .is-dl { margin-top: 14px; }
.sbx-dialog .is-row { min-height: 72px; }
@media (max-width: 900px) {
  .cc .sbx-isl-panel { gap: 16px; }
  .cc .sbx-isl-panel > .nx-foot { text-align: center; }
}
.cc .sbx-isl-hero svg { stroke: none; }
@media (max-width: 900px) {
  .cc .cc-page > .nx-head:not(.cc-sub) { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .cc .cc-page > .nx-head:not(.cc-sub) > div:first-child { flex: none; width: 100%; }
}
/* Tablets (761-900px): island cards were three narrow columns with stacked buttons cut off; now they fit side by side */
@media (max-width: 900px) and (min-width: 761px) {
  .cc .sbx-isl-grid:not(.cc-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc .sbx-isl-grid:not(.cc-list) .ic-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 761-1100px: an older fixed card shape cut off the top button; the card now grows to fit and View / Sell / Reset sit in one row */
@media (max-width: 1100px) and (min-width: 761px) {
  .cc .sbx-isl-grid:not(.cc-list) .sbx-isl.ic-card { aspect-ratio: auto; }
  .cc .sbx-isl-grid:not(.cc-list) .ic-acts:not(.one) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Download island progress (NX-DUMP v1, 12 Oct 2026) ---------- */
.dl-step { display: grid; justify-items: center; gap: 10px; padding: 14px 4px 6px; text-align: center; }
.dl-step > b { color: #fff; font: 800 20px/1.2 Outfit, Inter, sans-serif; }
.dl-step > p { margin: 0; color: #a1a1aa; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.dl-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,255,157,.08); box-shadow: inset 0 0 0 1px rgba(0,255,157,.25); color: #00ff9d; }
.dl-ic i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: #00ff9d; animation: ccSpin .9s linear infinite; }
.dl-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dl-step.bad .dl-ic { background: rgba(248,113,113,.08); box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); color: #f87171; }
.dl-how { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: s; text-align: left; }
.dl-how li { display: flex; align-items: flex-start; gap: 10px; color: #d4d4d8; font-size: 14px; line-height: 1.45; }
.dl-how li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font: 700 12px "JetBrains Mono", monospace; }
.dl-how b { color: #fff; } .dl-how a { color: #00ff9d; }
/* Island picture buttons (Turn, 3D/Map): the picture's "no outline" rule hid their line icons (fixed 12 Oct 2026) */
.cc .iv-btn svg, .cc .sbx-isl-hero .iv-btn svg, .cc .sbx-isl-pic .iv-btn svg { fill: none !important; stroke: currentColor !important; }
.dl-how li > span { min-width: 0; } .sbx-dialog .dl-step { overflow-wrap: anywhere; }
.sbx-dialog { overflow-x: hidden; } .dl-ic { overflow: hidden; }

/* 11 sections since the Doorbell (12 Oct 2026): the last card sits alone on its row, so it goes in the middle. */
.hb-card:nth-child(11):last-child { grid-column: 6 / span 2; }
@media (max-width: 1180px) and (min-width: 901px) { .hb-card:nth-child(11):last-child { grid-column: 5 / span 4; } }
@media (max-width: 900px) { .hb-card:nth-child(11):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } }