/* ==========================================================================
   ShoutBox Online — the inner pages on top of main.css (05/11): forms, messages, my account (characters, gear and
   bag with the game's icons), information, VIP and shop purchase forms, payment, ranking extras
   ========================================================================== */

/* ---------- common ---------- */
.hint { color: var(--text-3); font-size: .9rem; }
.empty { padding: 28px 20px; text-align: center; color: var(--text-3); }
.err, .ok { padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; }
.err { background: rgba(200, 30, 51, .14); border: 1px solid rgba(255, 59, 79, .45); color: #ffb0b8; }
.ok { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .4); color: #a8f0c0; }
.page-body .err, .page-body .ok { margin-bottom: 18px; }
.panel { padding: 24px; }
.panel > .card__title { margin-bottom: 16px; }
.panel p + p { margin-top: 10px; }
.card .table-wrap { border-radius: inherit; }
.card .table-wrap .rank-table th:first-child, .card .table-wrap .rank-table td:first-child { padding-left: 20px; }
.card .table-wrap .rank-table th:last-child, .card .table-wrap .rank-table td:last-child { padding-right: 20px; }
.rank-sub { margin: 34px 0 14px; font: 700 1.25rem/1.2 var(--font-display); letter-spacing: .03em; }
.form-grid { display: grid; gap: 16px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.dot, .online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); vertical-align: middle; }
.online-dot { margin-right: 8px; }
.field select, .field textarea { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 500 1rem var(--font-body); }

/* ranking extras */
.segmented { flex-wrap: wrap; }
.segmented a:hover { color: var(--text); }
.gflag { image-rendering: pixelated; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(233, 182, 90, .45); flex: none; border-radius: 2px; }
.gname-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.gwin { color: var(--gold-2); font-weight: 700; }
.gscore { font: 700 1.05rem/1 var(--font-display); color: var(--text); white-space: nowrap; }
.rank-table .pct, .data .pct { color: var(--online); font-weight: 700; }
.vip-badge.vip-1 { background: linear-gradient(180deg, #f2f4f8, #9aa3b2); color: #1b1e25; }
.vip-1 { color: #dfe6f0; } .vip-2 { color: var(--gold-2); }
b.vip-0 { color: var(--text); }

/* ---------- my account ---------- */
.acc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.acc-side { position: sticky; top: calc(var(--header-h) + 16px); padding: 20px; display: grid; gap: 18px; }
.acc-who { display: flex; gap: 14px; align-items: center; }
.acc-who b { display: block; font-size: 1.1rem; }
.acc-who small { display: block; }
.acc-avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font: 700 1.5rem/1 var(--font-display);
  color: #2a1404; background: linear-gradient(180deg, #ffd98a, #c98a2b); box-shadow: 0 0 20px rgba(255, 180, 70, .3); }
.vip-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-2); }
.vip-tag.vip-1 { background: linear-gradient(180deg, #f2f4f8, #9aa3b2); color: #1b1e25; }
.vip-tag.vip-2 { background: linear-gradient(180deg, #ffd98a, #c98a2b); color: #2a1404; }
.acc-nav { display: grid; gap: 4px; }
.acc-nav a, .acc-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent;
  font-weight: 600; font-size: .95rem; color: var(--text-2); text-align: left; transition: background .2s ease, color .2s ease; }
.acc-nav a:hover, .acc-nav button:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.acc-nav a[aria-current="page"] { background: var(--surface-3); color: var(--gold-2); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.acc-nav span { width: 20px; text-align: center; color: var(--gold); }
.acc-nav em { margin-left: auto; font-style: normal; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); color: var(--text-3); }
.acc-nav form { margin: 0; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
.acc-main { display: grid; gap: 24px; min-width: 0; }
.acc-pass form { max-width: 420px; }
.vip-line { margin-bottom: 16px; color: var(--text-2); }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.st-paid { background: rgba(74, 222, 128, .14); color: #a8f0c0; }
.st-pending { background: rgba(255, 106, 43, .16); color: #ffb48a; }
.st-cancelled, .st-failed, .st-expired { background: rgba(200, 30, 51, .14); color: #ffb0b8; }

/* character cards (the game's own pixel sprites) */
.char-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.char-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: radial-gradient(ellipse 70% 60% at 50% 35%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.char-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.char-card img { height: 112px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.cc-name { margin-top: 6px; font: 700 1.05rem/1.2 var(--font-display); }
.cc-cls { color: var(--accent); font-size: .85rem; font-weight: 600; }
.cc-lvl { color: var(--text-3); font-size: .84rem; } .cc-lvl b { color: var(--text); }
.cc-see { margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .7; transition: opacity .2s ease; }
.char-card:hover .cc-see { opacity: 1; }

/* one character */
.char-head { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: center;
  background: radial-gradient(ellipse 40% 90% at 10% 60%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.char-head .back { grid-column: 1 / -1; font-size: .88rem; font-weight: 600; color: var(--text-3); }
.char-head .back:hover { color: var(--gold-2); }
.char-art { height: 160px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }
.char-id h2 { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--font-display); }
.char-id > p { margin: 6px 0 14px; color: var(--accent); font-weight: 600; }
.char-id > p b { color: #fff; }
.on-tag { font: 700 .7rem/1 var(--font-body); vertical-align: middle; color: var(--online); border: 1px solid rgba(74, 222, 128, .5); border-radius: 999px; padding: 3px 8px; letter-spacing: .1em; text-transform: uppercase; }
.char-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin: 0; }
.char-stats div { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.char-stats dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.char-stats dd { margin: 2px 0 0; font: 700 1.05rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.char-stats .gold { color: var(--gold-2); }
.char-gear { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.char-gear > * { min-width: 0; }
.eq-grid { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; }
.eq-slot { position: relative; height: 76px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line);
  background: radial-gradient(circle, rgba(60, 40, 70, .35), rgba(8, 5, 11, .85)); box-shadow: inset 0 0 12px rgba(0, 0, 0, .8); }
.eq-slot { min-width: 0; }
.eq-slot .it { position: absolute; inset: 6%; }   /* the icon fills the slot and never sizes it */
.eq-slot:nth-child(n+4):nth-child(-n+6) { height: 126px; }   /* weapon, armor, shield: the tall items */
.eq-empty { font-size: .64rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; text-align: center; opacity: .7; }
.bag { --c: 40px; position: relative; width: calc(8 * var(--c)); height: calc(8 * var(--c)); border-radius: 6px; border: 1px solid var(--line-strong);
  background-color: rgba(8, 5, 11, .85); background-image: linear-gradient(rgba(233, 182, 90, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 182, 90, .1) 1px, transparent 1px);
  background-size: var(--c) var(--c); margin-bottom: 12px; max-width: 100%; }
.bag .it { position: absolute; background: rgba(60, 40, 80, .35); outline: 1px solid rgba(233, 182, 90, .15); outline-offset: -1px; }
.it { cursor: help; }
.it svg, .it .ico-img { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.it.exc { background: rgba(60, 200, 90, .12); outline-color: rgba(94, 224, 122, .4); }
.it.exc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(140, 255, 160, .35) 50%, transparent 70%);
  background-size: 250% 100%; animation: excShine 2.6s linear infinite; }
@keyframes excShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.it .qty, .it .plus { position: absolute; font-size: .72rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.it .qty { right: 3px; bottom: 3px; color: #fff; }
.it .plus { left: 3px; top: 3px; color: #ffd86a; }
.it.hi .plus { color: #ffb04a; text-shadow: 0 0 6px rgba(255, 160, 40, .9), 0 0 2px #000; }
.it .tip { display: none; position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px;
  padding: 10px 14px; text-align: center; border: 1px solid var(--gold-3); border-radius: 10px; background: rgba(11, 7, 16, .97); box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.it .tip b { font-size: .92rem; color: var(--text); } .it .tip p { margin: 4px 0 0; font-size: .8rem; color: var(--text-2); line-height: 1.45; }
.it:hover .tip, .it:focus .tip { display: block; }
.it:hover, .it:focus { z-index: 10; outline-color: var(--gold); }
.t-exc { color: #7aea8a !important; } .t-luck { color: #8ac8ff; } .t-pearl { color: #e0b8ff; }
.t-genoff { color: #8a8a8a !important; }
.t-gen { color: #2aff6a !important; font-weight: 700; text-shadow: 0 0 6px rgba(42,255,106,.5); }   /* genuine items */
.it.gen { box-shadow: inset 0 0 10px rgba(42,255,106,.55), 0 0 6px rgba(42,255,106,.5); }
.it.gen > img, .it.gen > svg { filter: sepia(1) hue-rotate(65deg) saturate(3.2) brightness(1.08); }

/* ---------- information ---------- */
.info-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 2px; padding: 12px; max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.toc a { padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: .92rem; color: var(--text-2); transition: background .2s ease, color .2s ease; }
.toc a:hover { background: rgba(255, 255, 255, .04); color: var(--gold-2); }
.info-body { display: grid; gap: 22px; min-width: 0; }
.info-body > section { scroll-margin-top: calc(var(--header-h) + 16px); }
.info-body p { color: var(--text-2); }
.info-note { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border-left: 3px solid var(--gold-3); background: rgba(0, 0, 0, .22); color: var(--text-2); font-size: .93rem; }
.info-body .panel { overflow-x: auto; }
.data { margin-top: 14px; font-size: .94rem; }
.data th { padding: 10px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-align: left; background: rgba(0, 0, 0, .2); }
.data td { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .05); color: var(--text-2); vertical-align: top; }
.data .cname { color: var(--text); font-weight: 600; }
.formula { display: inline-block; margin: 12px 8px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .25);
  font: 600 .92rem/1.3 var(--font-body); color: var(--gold-2); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.gem { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(0, 0, 0, .22); }
.gem svg { flex: none; width: 38px; height: 38px; filter: drop-shadow(0 0 8px var(--c)); }
.gem b { display: block; color: var(--gold-2); } .gem span { color: var(--text-2); font-size: .9rem; }
.rules { display: grid; gap: 10px; }
.rules li { position: relative; padding-left: 22px; color: var(--text-2); }
.rules li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: .7rem; color: var(--gold); }
.kbd { display: inline-block; min-width: 26px; text-align: center; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line-strong); border-bottom-width: 3px;
  background: var(--surface-3); font-weight: 700; font-size: .82rem; color: var(--gold-2); }
.enh-sw { display: inline-block; width: 26px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: middle; }
.enh-sw.enh1 { background: #ff4a4a; box-shadow: 0 0 6px #ff4a4a; }
.enh-sw.enh2 { background: linear-gradient(90deg, #3a8aff 50%, #ff4a4a 50%); box-shadow: 0 0 6px #c06aff; }
.enh-sw.enh3 { background: linear-gradient(90deg, #3a8aff 33%, #ff4a4a 33% 66%, #ffd23a 66%); box-shadow: 0 0 8px #ffd23a; }
.info-body .card__link { display: inline-block; margin-top: 14px; }

/* ---------- VIP and shop: the purchase forms ---------- */
.vip-now { margin-bottom: 26px; text-align: center; color: var(--text-2); }
.plans { margin-top: 18px; }
.plan .hint { text-align: center; }
.vplan-1 { --accent: #c9d2e0; } .vplan-2 { --accent: var(--gold); }
.vplan-1 .plan__name { color: #e6ecf5; } .vplan-2 .plan__name { color: var(--gold-2); }
.buy { display: grid; gap: 14px; margin-top: 4px; }
.opts { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.opts legend { margin-bottom: 8px; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.opts.two { grid-template-columns: 1fr 1fr; }
.opts.two legend { grid-column: 1 / -1; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, .25); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.opts.two .opt span { flex-direction: column; align-items: flex-start; gap: 2px; }
.opt b { font-weight: 700; } .opt i { font-style: normal; font-size: .86rem; color: var(--text-3); }
.opt:hover span { border-color: var(--gold-3); }
.opt input:checked + span { border-color: var(--gold); background: rgba(233, 182, 90, .1); box-shadow: 0 0 0 1px var(--gold) inset; }
.opt input:checked + span i { color: var(--gold-2); }
.opt input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.product { --accent: var(--gold); }
.product__icon { display: grid; place-items: center; width: 108px; height: 108px; }
.product__icon svg, .product__icon img { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 55%, transparent)); }
.product__icon img.shop-vamp { width: auto; height: 136px; image-rendering: auto; }
.product__media { height: 160px; }
.product__body h2 { font-size: 1.18rem; font-weight: 700; }
.product__body .buy { margin-top: 10px; }
.product__foot .price { color: #fff; }

/* ---------- payment ---------- */
.pay { max-width: 520px; margin-inline: auto; display: grid; justify-items: center; gap: 16px; text-align: center; }
.price-big { font: 700 2.4rem/1 var(--font-display); color: var(--gold-2); }
.qr { background: #fff; padding: 10px; border-radius: 12px; box-shadow: 0 0 40px rgba(233, 182, 90, .3); image-rendering: pixelated; }
.wait { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(233, 182, 90, .25); border-top-color: var(--gold); animation: turn 1s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- log in / create account ---------- */
.auth .lead { font-size: 1rem; }
.auth__box .hint { margin-top: -6px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .acc { grid-template-columns: 1fr; }
  .acc-side { position: static; }
  .acc-nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .acc-nav form { border-top: 0; padding-top: 0; margin-top: 0; }
  .info-layout { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; flex-wrap: wrap; max-height: none; }
  .toc a { padding: 6px 10px; font-size: .86rem; }
}
@media (max-width: 860px) {
  .char-gear { grid-template-columns: 1fr; }
  .char-head { grid-template-columns: 1fr; text-align: center; }
  .char-art { margin: 0 auto; height: 128px; }
}
@media (max-width: 640px) {
  .panel { padding: 18px; }
  .bag { --c: calc((100vw - 76px) / 8); }
  .eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eq-slot { height: auto; aspect-ratio: 1; }
  .eq-slot:nth-child(n+4):nth-child(-n+6) { height: auto; aspect-ratio: 3 / 4; }
  .opts.two { grid-template-columns: 1fr; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; text-align: center; padding: 9px 10px; }
  .rank-table .player__avatar { width: 34px; height: 34px; }
  .table-wrap .rank-table th:nth-child(3), .table-wrap .rank-table td:nth-child(3) { display: table-cell; }   /* (main.css hides it for the home's top 5) */
}

/* the duel tournament's champion (ranking) */
.t-champ-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-color: rgba(242,193,78,.5); background: linear-gradient(90deg, rgba(242,193,78,.14), transparent); }
.t-champ-card .t-crown { font-size: 2.4rem; filter: drop-shadow(0 0 10px rgba(242,193,78,.7)); }

/* the game's market on the site (07/11) */
.mk-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 12px; }
.mk-filters input, .mk-filters select, .mk-form input, .mk-form select { background: rgba(0,0,0,.35); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.mk-filters input[type=search] { flex: 1 1 200px; }
.mk-list { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2); flex-wrap: wrap; }
.mk-it { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-ic { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: rgba(0,0,0,.35); border-radius: 8px; }
.mk-ic svg, .mk-ic img { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
.mk-ic .qty { position: absolute; right: 2px; bottom: 0; font-size: .7rem; color: #fff; text-shadow: 0 1px 2px #000; }
.mk-n { display: flex; flex-direction: column; min-width: 0; }
.mk-n small { color: var(--muted); }
.mk-it[data-tier="C"] .mk-ic { box-shadow: inset 0 0 0 1px rgba(90,200,120,.5); }
.mk-it[data-tier="B"] .mk-ic { box-shadow: inset 0 0 0 1px rgba(90,150,255,.6); }
.mk-it[data-tier="A"] .mk-ic { box-shadow: inset 0 0 0 1px rgba(180,90,255,.6); }
.mk-it[data-tier="S"] .mk-ic { box-shadow: inset 0 0 0 1px rgba(242,193,78,.8); }
.mk-p { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #f2d48a; }
.mk-p svg, .mk-p img { width: 18px; height: 18px; }
.mk-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; margin-bottom: 12px; }
.mk-pick { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.mk-pick:has(input:checked) { border-color: var(--gold); background: rgba(242,193,78,.08); }
.mk-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.mk-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.mk-p .coin, .coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0b0, #e0a73d 55%, #8a5a10); box-shadow: 0 0 0 1px #6a4410 inset; vertical-align: -1px; }

/* ---------- speed (07/11): the same look, less work for phones ---------- */
.site-header.is-solid, .site-header--solid { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 900px), (pointer: coarse) {
  .site-header, .site-header.is-solid, .site-header--solid, .drawer, .stats, .btn--ghost { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .site-header.is-solid, .site-header--solid { background: rgba(11, 7, 16, .96); }
  .stats { background: linear-gradient(180deg, rgba(31, 22, 40, .98), rgba(18, 11, 24, .98)); }
  .btn--ghost { background: rgba(20, 12, 26, .85); }
}
section.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* the "online now" pulse (07/11): the same ring, grown with transform and opacity (the box-shadow one repainted every frame) */
.pulse { animation: none !important; position: relative; box-shadow: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74, 222, 128, .6); animation: pulse-ring 2s ease-out infinite; will-change: transform, opacity; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
.live::before { will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }

/* the embers (07/11): glowing dots that rise (outer), sway (inner) and flicker, all on the graphics card */
.embers-css { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.embers-css i { position: absolute; bottom: -12px; width: var(--s); height: var(--s); animation: ember-rise var(--d) linear var(--dl) infinite; will-change: transform; }
.embers-css b { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--h), 100%, 72%, 1) 0%, hsla(var(--h), 100%, 58%, .9) 22%, hsla(var(--h), 100%, 55%, .3) 48%, transparent 70%);
  animation: ember-sway var(--sw) ease-in-out var(--dl) infinite alternate, ember-flick calc(var(--sw) * .7) ease-in-out var(--dl) infinite alternate; will-change: transform, opacity; }
@keyframes ember-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--x), -110vh, 0); } }
@keyframes ember-sway { from { transform: translateX(-6px) scale(2.2); } to { transform: translateX(6px) scale(2.2); } }
@keyframes ember-flick { from { opacity: .25; } to { opacity: .85; } }

/* ---------- the shop window (07/11): cards of one height, choices as pills, the payment in a dialog ---------- */
.shop2 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.shop2 .product { display: flex; flex-direction: column; height: 100%; }
.shop2 .product__media { height: 150px; flex: none; }
.shop2 .product__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 4px; }
.shop2 .product__body h2 { font-size: 1.12rem; line-height: 1.25; }
.shop2 .product__desc { color: var(--text-2); font-size: .92rem; line-height: 1.5; flex: 1; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { flex: 1 1 0; min-width: 72px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .25);
  color: var(--text-2); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.pill:hover { border-color: var(--gold); color: var(--text); }
.pill.on { border-color: var(--gold); background: rgba(233, 182, 90, .14); color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold) inset; }
.shop2 .product__foot { padding: 14px 20px 20px; border-top: 1px solid var(--line); margin-top: 12px; }
.shop2 .price b { font-size: 1.35rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.checkout { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface, #1a1220); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.checkout::backdrop { background: rgba(5, 3, 8, .72); }
.checkout form { display: grid; gap: 14px; padding: 20px 22px 22px; }
.checkout header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout header h2 { font-family: Cinzel, Georgia, serif; font-size: 1.25rem; color: var(--gold-2); }
.checkout .x { border: 0; background: transparent; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.checkout__sum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.checkout__sum b { font-size: 1.3rem; }

/* ---------- (07/11) the market's item tooltip ---------- */
.mk-it { position: relative; outline: none; }
.mk-it .tip { display: none; position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 280px;
  padding: 10px 14px; text-align: left; border: 1px solid var(--gold-3); border-radius: 10px; background: rgba(11, 7, 16, .97); box-shadow: 0 10px 30px rgba(0, 0, 0, .7); pointer-events: none; }
.mk-it .tip b { font-size: .92rem; color: var(--text); } .mk-it .tip p { margin: 4px 0 0; font-size: .8rem; color: var(--text-2); line-height: 1.45; }
.mk-it:hover .tip, .mk-it:focus .tip { display: block; }
.mk-row:hover, .mk-row:focus-within { position: relative; z-index: 5; }
.mk-filters select[name=tier] { min-width: 120px; }

/* ---------- (07/11) the shop's cart ---------- */
.product__btns { display: inline-flex; gap: 8px; align-items: center; }
.product__btns [data-add] { display: inline-flex; align-items: center; gap: 2px; }
.shop2 .product__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cart-fab { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--gold); background: linear-gradient(180deg, #3a2410, #1c1008); color: var(--gold-2); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.cart-fab[hidden] { display: none; }
.cart-fab b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: #1a1008; font-size: .8rem; display: inline-grid; place-items: center; }
.cart-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 10px; background: rgba(11, 7, 16, .95);
  border: 1px solid var(--gold-3); color: var(--text); font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.cart-toast[hidden] { display: none; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.cart-lines li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.cart-lines li > span:first-child { flex: 1; min-width: 0; display: grid; } .cart-lines small { color: var(--text-2); font-size: .8rem; }
.cart-lines .cart-v { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cart-lines .empty { justify-content: center; color: var(--text-2); }
.checkout .x.sm { font-size: 1.2rem; padding: 0 4px; }
@media (max-width: 640px) { .cart-fab { right: 16px; bottom: 16px; } .cart-fab span { display: none; } }

/* ---------- (07/11) patch notes ---------- */
.patches { display: grid; gap: 18px; max-width: 860px; }
.patch { padding: 20px 22px; }
.patch.latest { border-color: var(--gold-3); box-shadow: 0 0 0 1px rgba(233, 182, 90, .25), 0 20px 50px rgba(0, 0, 0, .35); }
.patch__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.patch__head time { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.patch__head h2 { font-family: Cinzel, Georgia, serif; font-size: 1.2rem; margin: 0; }
.patch__badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(233, 182, 90, .15); color: var(--gold-2); font-size: .78rem; font-weight: 700; border: 1px solid var(--gold-3); }
.patch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.patch__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; color: var(--text-2); }
.ptag { flex: none; min-width: 74px; text-align: center; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.ptag--new { background: rgba(90, 200, 120, .15); color: #8ee6a4; border: 1px solid rgba(90, 200, 120, .4); }
.ptag--balance { background: rgba(90, 150, 255, .15); color: #9cc0ff; border: 1px solid rgba(90, 150, 255, .4); }
.ptag--fix { background: rgba(255, 140, 90, .15); color: #ffb08a; border: 1px solid rgba(255, 140, 90, .4); }
@media (max-width: 640px) { .patch__list li { flex-direction: column; gap: 4px; } }