/* My Skyblock helper cards (Claude BFD92, 9 Oct 2026): real outfit portrait, clean stats, tool durability. */
.cc .hc-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.hx { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; isolation: isolate;
  background: linear-gradient(160deg, rgba(var(--kr), .10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px -34px rgba(0,0,0,.95);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s; animation: hxIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes hxIn { from { opacity: 0; transform: translateY(10px); } }
.hx::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--kr), .7), transparent); opacity: .7; }
.hx:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--kr), .35), 0 30px 60px -34px rgba(0,0,0,.95); }
.hx-top { display: flex; align-items: center; gap: 16px; padding: 18px 18px 0; }
.hx-pic { position: relative; flex: none; width: 92px; height: 92px; overflow: hidden; border-radius: 18px;
  background: radial-gradient(circle at 50% 110%, rgba(var(--kr), .55), transparent 70%), radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 60%), #0c0d12;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.hx-bust { position: absolute; left: 50%; bottom: -4px; width: 100px; height: 100px; transform: translateX(-50%) scale(.96); opacity: 0; image-rendering: pixelated; transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); }
.hx-bust.on { opacity: 1; transform: translateX(-50%) scale(1); }
.hx-kind { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(6,7,10,.82); color: var(--k); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cc .hx-kind svg { width: 13px; height: 13px; }
.hx-id { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.hx-name b { display: block; max-width: 100%; overflow: hidden; color: #fff; font: 700 17px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.hx-id > small { color: #a1a1aa; font-size: 12.5px; }
.hx-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(74,222,128,.1); color: #86efac; font: 600 11.5px Inter, sans-serif; box-shadow: inset 0 0 0 1px rgba(74,222,128,.22); }
.hx-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hx-pill.y { background: rgba(251,191,36,.1); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(251,191,36,.25); }
.hx-pill.r { background: rgba(248,113,113,.1); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(248,113,113,.25); }
.hx-pill.rest { background: rgba(255,255,255,.05); color: #a1a1aa; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.hx-pill.rest i { box-shadow: none; opacity: .6; }
.hx-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; margin: 16px 18px 0; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.06); }
.hx-stats span { display: grid; gap: 2px; padding: 10px 12px; background: #0d0e13; }
.hx-stats b { color: #fff; font: 700 15px "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.hx-stats span:first-child b { color: #fcd34d; }
.hx-stats small { color: #71717a; font-size: 11px; }
.hx-foot { display: grid; gap: 10px; margin-top: auto; padding: 16px 18px 18px; }
.hx-stats + .hx-foot, .hx-top + .hx-foot { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.hx-tool { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; align-items: center; gap: 12px; color: #e4e4e7; font-size: 13px; }
.hx-tool > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-tool em { color: #a1a1aa; font: 600 12px "JetBrains Mono", ui-monospace, monospace; font-style: normal; text-align: right; }
.hx-bar { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.hx-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--kr), .6), var(--k)); }
.hx-bar.mid i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.hx-bar.low i { background: linear-gradient(90deg, #dc2626, #f87171); }
.hx-dots { display: flex; gap: 4px; }
.hx-dots i { width: 14px; height: 6px; border-radius: 3px; background: var(--k); opacity: .85; }
.hx-note { display: flex; align-items: center; gap: 8px; margin: 0; color: #a1a1aa; font-size: 12.5px; line-height: 1.45; }
.cc .hx-note svg { width: 14px; height: 14px; flex: none; color: #71717a; }
/* Resting (island not loaded): calmer, the portrait slightly dimmed */
.hx.idle { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); }
.hx.idle::before { opacity: .25; }
.hx.idle .hx-pic { background: radial-gradient(circle at 50% 110%, rgba(var(--kr), .25), transparent 70%), #0c0d12; }
.hx.idle .hx-bust.on { filter: saturate(.7) brightness(.85); }
/* List view */
.cc .hc-grid.cc-list { grid-template-columns: 1fr; gap: 10px; }
.cc .cc-list .hx { display: grid; grid-template-columns: minmax(250px, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
.cc .cc-list .hx-top { padding: 12px 16px; }
.cc .cc-list .hx-pic { width: 64px; height: 64px; border-radius: 14px; }
.cc .cc-list .hx-bust { width: 70px; height: 70px; }
.cc .cc-list .hx-stats { margin: 0; }
.cc .cc-list .hx-foot { margin: 0; padding: 12px 16px; border-top: 0; }
@media (max-width: 900px) {
  .cc .hc-grid { grid-template-columns: minmax(0, 1fr); }
  .cc .cc-list .hx { grid-template-columns: 1fr; }
  .cc .cc-list .hx-stats { margin: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .hx, .hx-bust { animation: none; transition: none; } }

/* Helpers page top section */
.hs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; margin: 0 0 30px; }
.hs-total { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 22px; overflow: hidden; border-radius: 20px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,157,.12), transparent 60%), rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hs-total small { color: #00ff9d; font: 700 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.hs-total b { color: #fff; font: 800 48px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; }
.hs-total span { color: #a1a1aa; font-size: 12.5px; }
.hs-bar { display: flex; gap: 3px; height: 6px; margin-top: 12px; }
.hs-bar i { min-width: 6px; border-radius: 99px; background: var(--k); box-shadow: 0 0 10px -2px var(--k); }
.hs-bar i.none { flex: 1; background: rgba(255,255,255,.08); box-shadow: none; }
.hs-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hs-k { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--kr), .10), rgba(255,255,255,.02) 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  animation: hxIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 50ms); }
.hs-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(var(--kr), .15); color: var(--k); }
.cc .hs-ic svg { width: 17px; height: 17px; }
.hs-tx { align-self: end; min-width: 0; }
.hs-tx b { display: block; color: #fff; font: 700 14.5px Inter, sans-serif; }
.hs-tx small { display: block; margin-top: 3px; color: #8a8a94; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-num { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; }
.cc .hs svg.hs-ring { position: absolute; inset: 0; width: 42px; height: 42px; stroke-width: 3; }
.hs-num em { color: #fff; font: 700 14px "JetBrains Mono", ui-monospace, monospace; font-style: normal; }
.hs-k.zero { opacity: .55; }
@media (max-width: 1100px) { .hs { grid-template-columns: minmax(0, 1fr); } .hs-total { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } .hs-total small { flex-basis: 100%; } .hs-bar { flex-basis: 100%; } }
@media (max-width: 1100px) { .hs-kinds { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 560px) { .hs-kinds { grid-template-columns: 1fr 1fr; } .hs-total b { font-size: 40px; } }

/* Overview: earned today + the four stats in one container */
.ov-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); margin: 0 0 30px; overflow: hidden; border-radius: 22px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(0,255,157,.10), transparent 55%), rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.9); }
.ov-today { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab spark" "num spark" "sub spark"; align-items: center; gap: 6px 18px; padding: 24px 26px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.ov-lab { grid-area: lab; display: flex; align-items: center; gap: 8px; color: #a7f3d0; font: 700 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.cc .ov-lab svg { width: 16px; height: 16px; color: #fbbf24; }
.ov-today b { grid-area: num; color: #fff; font: 800 clamp(32px, 3.4vw, 44px)/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ov-today b small { color: #a1a1aa; font: 600 14px Inter, sans-serif; letter-spacing: 0; }
.ov-sub { grid-area: sub; color: #a1a1aa; font-size: 13px; }
.ov-spark { grid-area: spark; display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.ov-spark i { width: 8px; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #00ff9d, rgba(0,255,157,.18)); animation: ovGrow .7s cubic-bezier(.22,1,.36,1) both; transform-origin: bottom; }
.ov-spark i:last-child { background: linear-gradient(180deg, #fbbf24, rgba(251,146,60,.3)); }
@keyframes ovGrow { from { transform: scaleY(0); } }
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid rgba(255,255,255,.07); }
.ov-stat { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 22px 20px; border: 0; border-left: 1px solid rgba(255,255,255,.05); background: none; color: inherit; text-align: left; cursor: pointer; transition: background .25s; }
.ov-stat:first-child { border-left: 0; }
.ov-stat:hover, .ov-today:hover { background: rgba(255,255,255,.03); }
.ov-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.cc .ov-ic svg { width: 16px; height: 16px; }
.ov-stat b { color: #fff; font: 700 20px "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-stat small { color: #8a8a94; font: 600 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1250px) { .ov-hero { grid-template-columns: minmax(0, 1fr); } .ov-stats { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); } }
@media (max-width: 600px) { .ov-stats { grid-template-columns: 1fr 1fr; } .ov-stat:nth-child(3) { border-left: 0; } .ov-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.05); } .ov-today { padding: 20px; } .ov-spark { height: 48px; } }

/* Overview: top helpers table */
.th-wrap { overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); background: rgba(255,255,255,.015); }
.th { width: 100%; border-collapse: collapse; }
.th th { padding: 11px 12px; color: #71717a; font: 600 10.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; text-align: left; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.06); }
.th td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: #d4d4d8; font-size: 13px; vertical-align: middle; }
.th tbody tr { animation: hxIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 45ms); transition: background .2s; }
.th tbody tr:last-child td { border-bottom: 0; }
.th tbody tr:hover { background: rgba(255,255,255,.025); }
.th .num { text-align: right; white-space: nowrap; font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.th .num small { color: #71717a; font: 500 11px Inter, sans-serif; }
.th .num em { color: #52525b; font-style: normal; }
.th .gold { color: #fcd34d; font-weight: 700; }
.th-n { width: 28px; color: #71717a; font: 700 12px "JetBrains Mono", ui-monospace, monospace; }
.th tbody tr:first-child .th-n { color: #fbbf24; }
.th-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.th-who span { min-width: 0; }
.th-who b { display: block; overflow: hidden; color: #fff; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.th-who small { display: block; color: #8a8a94; font-size: 12px; white-space: nowrap; }
.th-face { position: relative; flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px -6px rgba(0,0,0,.8), 0 0 0 3px rgba(0,0,0,.25); }
.th-face i { position: absolute; inset: 0; background-image: var(--skin); background-repeat: no-repeat; background-size: 288px 288px; background-position: -36px -36px; image-rendering: pixelated; }
.th-face i.hat { background-position: -180px -36px; }
.th-st { display: inline-flex; align-items: center; gap: 6px; color: #86efac; font: 600 12px Inter, sans-serif; white-space: nowrap; }
.th-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.th-st.y { color: #fcd34d; } .th-st.r { color: #fca5a5; } .th-st.rest { color: #8a8a94; } .th-st.rest i { box-shadow: none; }
.th-tool { display: inline-block; width: 42px; height: 5px; margin-right: 8px; overflow: hidden; vertical-align: middle; border-radius: 99px; background: rgba(255,255,255,.08); }
.th-tool i { display: block; width: var(--w); height: 100%; background: var(--k); }
.th-tool.mid i { background: #fbbf24; } .th-tool.low i { background: #f87171; }
@media (max-width: 1250px) { .th th:nth-child(7), .th td:nth-child(7), .th th:nth-child(6), .th td:nth-child(6) { display: none; } }
@media (max-width: 600px) { .th th:nth-child(4), .th td:nth-child(4), .th th:nth-child(3), .th td:nth-child(3) { display: none; } .th td, .th th { padding: 9px 10px; } }
.ov-block { margin-top: 30px; }
@media (max-width: 1250px) { .th th:nth-child(7), .th td:nth-child(7), .th th:nth-child(6), .th td:nth-child(6) { display: table-cell; } }
@media (max-width: 760px) { .th th:nth-child(7), .th td:nth-child(7), .th th:nth-child(6), .th td:nth-child(6) { display: none; } }
/* Overview stats: centred, big clean icons (no tile behind them) */
.ov-stat { justify-items: center; text-align: center; gap: 8px; }
.ov-ic { width: auto; height: auto; border-radius: 0; background: none; }
.cc .ov-ic svg { width: 30px; height: 30px; stroke-width: 1.7; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 45%, transparent)); }
/* Top helpers table: headings centred over their columns (and the values under them); Helper stays left */
.th th, .th td, .th .num { text-align: center; }
.th th:nth-child(2), .th td:nth-child(2) { text-align: left; }
.th td .th-st { justify-content: center; }

/* Island cards: name on the picture, gold sale pill, labelled buttons */
.cc .sbx-isl.ic-card { grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; min-height: 330px; border-radius: 22px; }
.ic-card .sbx-isl-pic { min-height: 240px; }
.ic-card .sbx-isl-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,.72) 0%, rgba(5,6,10,0) 34%, rgba(5,6,10,0) 70%, rgba(5,6,10,.35) 100%); pointer-events: none; }
.ic-over { position: absolute; z-index: 2; top: 16px; left: 18px; right: 150px; display: grid; gap: 3px; }
.ic-over b { overflow: hidden; color: #fff; font: 800 21px/1.15 Outfit, Inter, sans-serif; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.ic-over small { color: rgba(255,255,255,.72); font: 600 12px Inter, sans-serif; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.ic-sale { position: absolute; z-index: 2; top: 16px; right: 16px; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: rgba(6,6,8,.88); box-shadow: inset 0 0 0 1.5px #d4af37, 0 8px 20px -8px rgba(0,0,0,.9); backdrop-filter: blur(6px); color: #e9c75f; font: 600 11.5px Inter, sans-serif; letter-spacing: .02em; }
.ic-sale b { color: #fff3c4; font: 700 14px "JetBrains Mono", ui-monospace, monospace; }
.ic-sale.build { box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.6); color: #fcd34d; }
.ic-foot { display: grid; gap: 10px; padding: 14px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
.ic-foot p { margin: 0; color: #a1a1aa; font-size: 13px; line-height: 1.45; }
.ic-acts { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.ic-acts.one { grid-template-columns: 1fr; }
.ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #f4f4f5; font: 600 13px Inter, sans-serif; white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.ic-btn:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.ic-btn:first-child { background: #f4f4f5; color: #0b0b10; box-shadow: none; }
.ic-btn:first-child:hover { background: #fff; }
.ic-btn.bad { background: rgba(248,113,113,.1); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
.ic-btn.bad:hover { background: rgba(248,113,113,.18); color: #fecaca; }
.cc .ic-btn svg { width: 15px; height: 15px; flex: none; }
.ic-card.empty .ic-over b { color: #d4d4d8; text-shadow: none; }
.ic-card.empty .ic-over small { color: #71717a; text-shadow: none; }
.ic-card.empty .sbx-isl-pic::after { display: none; }
/* List view (12 Oct 2026, Parky): a clean picture on the left (no text or picture controls on it), the island's name,
   details and compact buttons in a row on the right. Phones keep the stacked card. */
.ic-info { display: none; }
.cc .cc-list .sbx-isl.ic-card { grid-template-rows: none; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; height: auto; }
.cc .cc-list .ic-card .sbx-isl-pic { min-height: 150px; }
.cc .cc-list .ic-foot { align-content: center; border-top: 0; border-left: 1px solid rgba(255,255,255,.06); }
@media (max-width: 1100px) and (min-width: 761px) { .ic-acts { grid-template-columns: 1fr; } }
@media (min-width: 761px) {
  .cc .cc-list .sbx-isl.ic-card { grid-template-columns: 230px minmax(0, 1fr); align-items: center; border-radius: 18px; }
  .cc .cc-list .ic-card .sbx-isl-pic { min-height: 0; height: 132px; margin: 10px; border-radius: 12px; }
  .cc .cc-list .ic-card .sbx-isl-pic::after, .cc .cc-list .ic-card .ic-over, .cc .cc-list .ic-card .ic-sale, .cc .cc-list .ic-card .iv-ui { display: none; }
  .cc .cc-list .ic-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 22px 14px 12px; border-left: 0; background: none; }
  .cc .cc-list .ic-info { display: grid; justify-items: start; gap: 5px; min-width: 0; }
  .ic-info b { max-width: 100%; overflow: hidden; color: #fff; font: 800 20px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
  .ic-info small { color: #a1a1aa; font: 600 13px Inter, sans-serif; }
  .ic-chip { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 3px; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #d4af37; color: #e9c75f; font: 600 11.5px Inter, sans-serif; }
  .ic-chip b { color: #fff3c4; font: 700 13px "JetBrains Mono", ui-monospace, monospace; }
  .ic-chip.build { box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.6); color: #fcd34d; }
  .cc .cc-list .ic-foot > p { display: none; }
  .cc .cc-list .ic-card.empty .ic-info small::after { content: " · start one in game, or buy one in Real Estate"; }
  .cc .cc-list .ic-acts { display: flex; gap: 8px; }
  .cc .cc-list .ic-btn { height: 38px; padding: 0 16px; }
}
@media (max-width: 760px) { .cc .cc-list .sbx-isl.ic-card { grid-template-columns: 1fr; } .cc .cc-list .ic-foot { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); } }

/* NX-MAP v1: real island pictures (island-view.js) */
canvas.iv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.iv-on { background: radial-gradient(120% 90% at 50% 0%, #2b4a6b 0%, #142235 55%, #0b1220 100%); }
.iv-on > canvas.iv { opacity: 1; }
.iv-on > svg { display: none; }
.sbx-isl:hover .iv-on > canvas.iv, .re-card:hover .iv-on > canvas.iv { transform: scale(1.03); }
.iv-ui { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.iv-at { color: rgba(255,255,255,.7); font: 600 11px Inter, sans-serif; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.iv-btns { display: flex; gap: 6px; pointer-events: auto; }
.iv-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(6,8,12,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(6px); color: #f4f4f5; font: 600 11.5px Inter, sans-serif; cursor: pointer; transition: background .2s; }
.iv-btn:hover { background: rgba(6,8,12,.85); }
.cc .iv-btn svg, .iv-btn svg { position: static; width: 14px; height: 14px; transform: none; stroke: currentColor; }
.sbx-photo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sbx-photo b { display: block; color: #fff; font-size: 14px; }
.sbx-photo small { display: block; margin-top: 2px; color: #a1a1aa; font-size: 12.5px; }
.sbx-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sbx-photo-btns label { cursor: pointer; }

/* Redeem: one clean centred box (9 Oct 2026, Parky). The form shows only the code field and button; entering a code swaps
   the box to what it gives, with Go back / Confirm. Overrides the earlier open layout in cc.css. */
.cc .cc-rd { display: grid; place-items: center; max-width: none; padding: 24px 0 48px; }
.cc .cc-rd-card { justify-items: center; gap: 14px; width: min(440px, 100%); padding: 30px 26px 26px; border-radius: 24px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0,255,157,.08), transparent 60%), rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(0,0,0,.9); }
.cc form.cc-rd-card .cc-rd-ic, .cc .cc-rd-pv .cc-rd-ic { display: grid; width: 54px; height: 54px; margin: 0; border-radius: 16px; }
.cc .cc-rd-card h3 { padding: 0; color: #fff; font: 800 22px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.cc .cc-rd-card > p { max-width: 340px; margin: 0; color: #a1a1aa; font-size: 14px; }
.cc .cc-rd-field { width: 100%; border-radius: 14px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cc .cc-rd-field:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.cc .cc-rd-field input { height: 54px; padding: 0 0 0 48px; font: 700 17px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-align: center; }
.cc .cc-rd-card > .cc-wbtn { justify-self: stretch; width: 100%; margin: 0; }
.cc .cc-rd-msg { margin: 0; }
.cc .cc-rd-pv { padding: 30px 26px 26px; border-top: 0; }
.cc .cc-rd-code { justify-self: center; margin: 0; }
.cc .cc-rd-btns { justify-content: center; width: 100%; margin-top: 6px; }
.cc .cc-rd-btns .cc-wbtn { flex: 1; padding: 0 18px; }
.cc .cc-rd-btns .cc-wbtn svg { width: 16px; height: 16px; }
.cc .cc-rd-card .cc-rd-tick { margin: 0; }

/* Welcome: Xbox gamertag box (it goes on the server allow list) */
.cc-gt { display: grid; gap: 6px; width: min(340px, 100%); margin: 4px auto 0; text-align: left; }
.cc-gt span { color: #a1a1aa; font: 600 12px Inter, sans-serif; }
.cc-gt input { height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font: 600 15px Inter, sans-serif; text-align: center; outline: none; }
.cc-gt input:focus { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }