/* theme.css - Performium Network redesign
 * Loaded AFTER main.css in the layout. Overrides old chrome.
 * Font/image paths are relative to assets/css/ (one level up from mockup source).
 */

@font-face{font-family:"Segoe";src:url("../fonts/SegoeUI-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Segoe";src:url("../fonts/SegoeUI.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Segoe";src:url("../fonts/SegoeUI-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Segoe";src:url("../fonts/SegoeUI-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0b0d12;--bg-2:#0f1219;--surface:#14171f;--surface-2:#191d27;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);
  --ink:#f4f5f8;--ink-2:#a7adba;--ink-3:#71788a;
  --red:#d6140f;--red-bright:#ff3b33;--brand-grad:linear-gradient(135deg,#ff3a33,#c4110d 55%,#7e0d0d);
  --online:#3ad35a;--r:10px;--r-lg:16px;
  --chamfer:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  --maxw:1320px;--ease:cubic-bezier(.16,1,.3,1);
}

/* --- reset: override old main.css page chrome --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe","Segoe UI",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:700}
p{margin:0}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--red);color:#fff;padding:10px 16px}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s var(--ease),background .2s,border-color .2s;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--brand-grad);color:#fff;padding:12px 20px;clip-path:var(--chamfer);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn--primary:hover{transform:translateY(-2px)}.btn--primary:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);padding:11px 18px;border-radius:var(--r)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;background:rgba(11,13,18,.86);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:32px}
.brand b{font-size:17px;letter-spacing:.07em}
.brand i{color:var(--ink-3);font-weight:600;font-size:17px;letter-spacing:.07em;font-style:normal}
.head-mid{display:flex;align-items:center;gap:18px;margin-left:6px}
.ip{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 7px 6px 15px}
.ip .dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 0 rgba(58,211,90,.5);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,211,90,.45)}70%{box-shadow:0 0 0 8px rgba(58,211,90,0)}100%{box-shadow:0 0 0 0 rgba(58,211,90,0)}}
.ip code{font-family:"Segoe",monospace;font-weight:700;font-size:16px;color:var(--ink)}
.ip .copy{display:inline-flex;align-items:center;gap:6px;background:var(--brand-grad);color:#fff;border:none;clip-path:var(--chamfer);
  padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;transition:transform .16s var(--ease)}
.ip .copy:hover{transform:translateY(-1px)}.ip .copy svg{width:14px;height:14px}
.head-stats{display:flex;gap:20px;color:var(--ink-2);font-size:13px}
.head-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.head-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.social-top{display:flex;gap:14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.social-top a:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);width:42px;height:42px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:20px;height:20px;margin:auto}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:248px 1fr;gap:34px;align-items:start}
.layout>.wrap{}
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding:34px 24px 0}

/* ---------- sidebar (all menu options) ---------- */
.side{position:sticky;top:98px}
.nav-group+.nav-group{margin-top:24px}
.nav-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 8px 12px}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);color:var(--ink-2);
  font-weight:600;font-size:15px;transition:color .18s,background .18s;position:relative}
.nav-list a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-list a .ic{width:17px;height:17px;flex:none;opacity:.8}
.nav-list a.active{color:#fff;background:linear-gradient(90deg,rgba(196,17,13,.18),transparent)}
.nav-list a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--brand-grad)}
.side-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.side-foot .nav-h{margin-left:12px}
.side-foot a{display:inline-block;color:var(--ink-2);font-weight:600;font-size:14px;padding:5px 12px}
.side-foot a:hover{color:var(--ink)}

/* ---------- main ---------- */
.main{min-width:0;padding-bottom:80px}
.masthead{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:radial-gradient(80% 120% at 92% 10%,rgba(150,16,14,.22),transparent 60%),var(--surface-2);
  padding:44px 40px;display:flex;align-items:center;gap:30px;margin-bottom:40px;perspective:1200px}
.masthead::after{content:"";position:absolute;inset:0;z-index:1;background-image:url("../img/minecraft.png");background-size:54px;opacity:.04;pointer-events:none}
.masthead-copy{position:relative;z-index:2;max-width:560px}
.masthead h1{font-size:clamp(30px,4vw,46px)}
.masthead p{margin-top:14px;color:var(--ink-2);font-size:17px;max-width:46ch}
.masthead .connect{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* ambient red glow: breathes (opacity) + parallax (transform, JS) */
.mh-glow{position:absolute;z-index:0;inset:-25% -12% -25% 30%;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(46% 56% at 74% 42%,rgba(214,20,15,.40),rgba(150,16,14,.12) 46%,transparent 72%);
  filter:blur(14px);animation:glowBreath 7.5s var(--ease) infinite}
@keyframes glowBreath{0%,100%{opacity:.55}50%{opacity:.95}}
/* mark: outer holds 3D context + entrance, inner img is floated/tilted by JS */
.mh-art{position:relative;z-index:2;margin-left:auto;width:188px;flex:none;transform-style:preserve-3d}
.masthead-mark{width:100%;will-change:transform;transform-style:preserve-3d;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(214,20,15,.25))}
/* staggered entrance (Apple-style rise + de-blur) */
.rise{opacity:0;animation:rise .95s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(28px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
/* scroll-reveal (Apple-style rise + de-blur), staggered via --rd */
.reveal{opacity:0;transform:translateY(26px);filter:blur(5px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 22px}
.sec-head h2{font-size:clamp(24px,3vw,34px)}
.sec-head .more{color:var(--ink-2);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.sec-head .more:hover{color:var(--ink)}

/* feature + social row */
.feat-row{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:stretch;margin-bottom:54px}

/* news card */
.ncard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .25s var(--ease),border-color .25s}
.ncard:hover{transform:translateY(-4px);border-color:var(--line-2)}
.ncard__media{aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.ncard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ncard:hover .ncard__media img{transform:scale(1.04)}
.ncard__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-bright);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 11px}
.ncard__body h3{font-size:17px;letter-spacing:-.01em}
.ncard__exc{color:var(--ink-2);font-size:14px}
.ncard__meta{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

/* big featured */
.ncard--big{grid-row:span 1}
.ncard--big .ncard__media{aspect-ratio:16/8}
.ncard--big .ncard__body{padding:24px 26px 26px;gap:12px}
.ncard--big .ncard__body h3{font-size:clamp(22px,2.4vw,30px)}

/* social panel */
.social-panel{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;
  background:radial-gradient(110% 80% at 100% 0%,rgba(196,17,13,.14),transparent 60%),var(--surface)}
.social-panel h3{font-size:20px}
.social-panel p{margin:12px 0 20px;color:var(--ink-2);font-size:15px}
.social-list{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.social-list a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r);font-weight:600;background:var(--surface-2);transition:border-color .2s,transform .2s var(--ease)}
.social-list a:hover{border-color:var(--line-2);transform:translateX(3px)}
.social-list .arrow{color:var(--ink-3)}

/* ---------- scroller (maintained) ---------- */
.scroller-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.scroller-nav{display:flex;gap:8px}
.snav{width:42px;height:42px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s var(--ease)}
.snav:hover{background:var(--surface-2)}.snav:active{transform:scale(.95)}
.snav svg{width:20px;height:20px}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.scroller::-webkit-scrollbar{display:none;width:0;height:0}
.scroller .ncard{scroll-snap-align:start}
.scroller .ncard__media{aspect-ratio:16/9}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:54px 0 30px;margin-top:30px}
.ftop{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.footer .brand img{width:200px}
.fbadge img{height:54px;opacity:.9}
.fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;color:var(--ink-3);font-size:13px}
.legal{display:flex;flex-wrap:wrap;gap:18px}
.legal a:hover{color:var(--ink-2)}

/* ---------- content panel (long-form content pages: Community Rules, Server Guides) ---------- */
.content-panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:36px 40px;margin-bottom:40px;color:var(--ink-2);font-size:15px;line-height:1.75}
.content-panel h1{color:var(--ink);font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.content-panel h2{color:var(--ink);font-size:22px;margin:34px 0 18px;padding-top:22px;border-top:1px solid var(--line)}
.content-panel h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.content-panel h3{color:var(--ink);font-size:17px;margin-bottom:8px}
.content-panel p,.content-panel span{color:var(--ink-2)}
.content-panel a{color:var(--red-bright);font-weight:600;transition:color .18s}
.content-panel a:hover{color:var(--ink)}
.content-panel ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.content-panel ul li{padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.content-panel ul li h3{margin:0;font-size:15px}
.content-panel .rule{padding:18px 0;border-bottom:1px solid var(--line)}
.content-panel .rule:last-child{border-bottom:none;padding-bottom:0}
.content-panel .rule h3{margin-bottom:8px}

/* ---------- vote list (Vote page: "Vote on" label paired with an outbound site button, one row each) ---------- */
/* Scoped under .content-panel so these win over the generic .content-panel ul li chip rule without editing it. */
.content-panel .vote-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.content-panel .vote-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.content-panel .vote-row:hover{border-color:var(--line-2);transform:translateY(-2px)}
.content-panel .vote-label{color:var(--ink);font-weight:600;font-size:15px}
.content-panel .vote-btn{flex:none;color:var(--ink)}
.content-panel .vote-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .menu-btn{display:flex}
  .head-stats,.social-top{display:none}
  .feat-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  .head-mid{display:none}
  .masthead{flex-direction:column;align-items:flex-start;padding:28px}
  .masthead-mark{display:none}
  .content-panel{padding:24px}
}
.drawer{position:fixed;inset:0;z-index:55;background:rgba(8,10,15,.97);backdrop-filter:blur(8px);display:none;overflow:auto;padding:84px 26px 30px}
.drawer.open{display:block}
.drawer .close{position:absolute;top:20px;right:20px;background:none;border:1px solid var(--line-2);border-radius:var(--r);width:42px;height:42px;color:var(--ink);cursor:pointer}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ip .dot{animation:none}.ncard,.btn{transition:none}
  .rise{animation:none;opacity:1}.mh-glow{animation:none}.masthead-mark{transform:none!important}
  .reveal{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- form controls (Account settings, ChangePassword, Link_Minecraft) ---------- */
/* Scoped under their own class names so nothing overrides existing components. */
.field{margin-bottom:16px}
.input-text{display:block;width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--ink);font-family:inherit;font-size:15px;padding:11px 14px;transition:border-color .2s var(--ease)}
.input-text:focus{outline:none;border-color:var(--red-bright)}
.input-text::placeholder{color:var(--ink-3)}
.input-text[disabled]{opacity:.6;cursor:not-allowed}
.checkbox-row{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--ink-2);font-size:14px}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--red);flex:none}
.field-error{display:block;margin-top:10px;color:var(--red-bright);font-size:14px}
.btn--full{width:100%;justify-content:center}
.content-panel--center{max-width:480px;margin-inline:auto}

/* ---------- linked-account cards (Account/Index, Profile, Accounts/Index; also rendered by StaffTeam, out of this batch) ---------- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-top:18px}
.acct-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;text-align:center;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.acct-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.acct-card__media{width:56px;height:56px;margin:0 auto;border-radius:var(--r);overflow:hidden;background:var(--surface);
  background-size:cover;background-position:center}
.acct-card__media img{width:100%;height:100%;object-fit:cover}
.acct-card__title{color:var(--ink);font-weight:700;font-size:15px}
.acct-card__meta{color:var(--ink-3);font-size:13px}

/* ---------- support tickets (Contact, Tickets, Ticket, GetTickets) ---------- */
/* Scoped under their own class names so nothing overrides existing components. */
.ticket-table{width:100%;border-collapse:collapse;color:var(--ink-2);font-size:14px}
.ticket-table th{text-align:left;padding:12px 14px;color:var(--ink-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line-2)}
.ticket-table td{padding:14px;border-bottom:1px solid var(--line)}
.ticket-table tr:last-child td{border-bottom:none}
.ticket-table tbody tr:hover td{background:var(--surface-2)}
.ticket-table td a{color:var(--ink);font-weight:600}
.ticket-table td a:hover{color:var(--red-bright)}

/* New Ticket overlay. NewPost()/ClosePost() toggle inline display:block/none
   directly (never flex), so centering relies on margin-inline:auto on the
   dialog under display:block, mirroring the .drawer fixed-overlay pattern. */
.ticket-modal{position:fixed;inset:0;z-index:55;background:var(--bg);backdrop-filter:blur(8px);overflow:auto;padding:60px 20px}
.ticket-modal__dialog{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  max-width:560px;margin-inline:auto;padding:32px 36px 36px}
.ticket-modal__dialog h2{color:var(--ink);font-size:22px;margin-bottom:20px}
.ticket-modal__close{background:none;border:1px solid var(--line-2);border-radius:var(--r);width:36px;height:36px;color:var(--ink);cursor:pointer;float:right}
.ticket-modal__close svg{width:14px;height:14px}

/* token-only select skin, matches .input-text; js-select may replace the
   native element at runtime, style the native element regardless */
select.input-text{cursor:pointer}

/* ticket reply thread */
.ticket-thread{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.ticket-msg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:var(--ink-2);font-size:14px}
.ticket-msg b{color:var(--ink)}
.ticket-msg__meta{color:var(--ink-3);font-size:13px;margin-left:8px}
.ticket-msg--alt{background:var(--bg-2)}
.ticket-msg--incoming{background:var(--surface);border-color:var(--line-2)}
.ticket-msg--private{background:var(--surface);border-color:var(--red-bright)}
.ticket-msg__private-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-bright);margin-right:8px}

/* two-column ticket layout (main + sidebar), collapses to one column narrow */
.ticket-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
@media(max-width:1040px){.ticket-layout{grid-template-columns:1fr}}

/* ticket status pill: TicketStatus is ticket-specific, safe to override globally */
.TicketStatus{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.TicketStatus.Open{color:var(--online)}
.TicketStatus.Closed{color:var(--ink-3)}
.TicketStatus.NeedResponse{color:var(--red-bright)}

/* support-level readout: Standard/Ultimate are generic tier classes reused
   elsewhere (batch 6 membership tiers), so scope the override to this
   batch's own surfaces only */
.ticket-modal .Standard,.ticket-layout .Standard,.ticket-table .Standard{color:var(--ink-2)}
.ticket-modal .Standard.Plus,.ticket-layout .Standard.Plus,.ticket-table .Standard.Plus{color:var(--online)}
.ticket-modal .Ultimate,.ticket-layout .Ultimate,.ticket-table .Ultimate{color:var(--red-bright)}

/* ---------- phase2.6 foundation fixes (shared .uk-text-lead heading contrast + .ip code background clear) ---------- */
.uk-text-lead{color:var(--ink)}
.ip code{background:transparent}

/* ---------- phase2.7 rewards / wallet / membership ---------- */
/* Scoped under their own class names so nothing overrides existing components. */

/* token-count tiles (Wallet, Rewards/Index, CustomItem "Custom Item Tokens" panels) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-top:12px}
.stat-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.stat-tile__value{color:var(--ink);font-size:22px;font-weight:700}
.stat-tile__label{color:var(--ink-3);font-size:13px}

/* Minecraft vault / pending-item card (Wallet, Rewards/Index, CustomItem preview) */
.vault-item{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-top:14px;color:var(--ink-2);font-size:14px}
.vault-item a{color:var(--red-bright);font-weight:600}
.vault-item a:hover{color:var(--ink)}

/* reward tile (_RewardItem partial) and its grid wrapper (Rewards/Index) */
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:18px}
.reward-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;text-align:center;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.reward-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.reward-card__title{color:var(--ink);font-weight:700;font-size:14px;display:block}
.reward-card__media{border-radius:var(--r);overflow:hidden;background:var(--surface)}
.reward-card__media img{width:100%;display:block}
.reward-card--small{position:relative;display:inline-block;width:50px;height:50px;margin-left:10px;overflow:visible}
.reward-card--small img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);position:relative;z-index:1}
.reward-card__tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;
  color:var(--ink-2);font-size:12px;white-space:nowrap;visibility:hidden;opacity:0;
  transition:opacity .2s var(--ease);z-index:2}
.reward-card--small:hover .reward-card__tooltip{visibility:visible;opacity:1}

/* Redeem's prize-reveal animation area and the won-items prize list */
.prize-reveal{text-align:center}
.won-items{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;margin:20px auto 0;max-width:640px;padding:0}
.won-items li{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.won-items img{width:64px;height:64px;object-fit:contain}
.won-items span{color:var(--ink-2);font-size:13px}

/* CustomItem's Color Code Guide tooltip: reuses main.css's .tooltip/.tooltiptext
   position/visibility mechanics (untouched), overrides only the light-mode
   background/text/border colors this selector set, at equal specificity and
   later load order so it wins without touching main.css */
.tooltip .tooltiptext{background:var(--surface);color:var(--ink);border-color:var(--line-2)}

/* ---------- phase2.8 support staff / admin ---------- */
/* Scoped under their own class names so nothing overrides existing components. */

/* pending custom-item approval card grid (PendingItems) */
.mc-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:18px}
.mc-item-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.mc-item-card a{color:var(--red-bright);font-weight:600}
.mc-item-card a:hover{color:var(--ink)}
.mc-item-empty{color:var(--ink-2);margin-top:12px}

/* CKEditor 5 dark override (ManageContent) - the plugin asset ships its own
   light styles; this maps the editable area, toolbar, and borders to tokens */
.ck.ck-editor__main > .ck-editor__editable{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.ck.ck-editor__editable.ck-focused{border-color:var(--line-2)}
.ck.ck-toolbar{background:var(--surface);border-color:var(--line-2)}

/* ---------- staff-card Minecraft portrait fix (fix/staff-card-mc-image-crop) ---------- */
/* .acct-card__media/.acct-card rules above stay untouched - other cards depend on the
   fixed 56x56 square. This modifier is opt-in on the Minecraft branch of
   _LinkedAccount.cshtml only, so the full-body minotar render gets a tall portrait
   box instead of being cover-cropped to a square. */
.acct-card__media--mc{width:72px;height:128px;background-size:contain;background-repeat:no-repeat;background-position:center}
.acct-card__media--mc img{width:100%;height:100%;object-fit:contain;object-position:center}
.ck-content{background:var(--surface-2);color:var(--ink)}

/* ---------- phase2.9 community forums ---------- */
/* Scoped under their own class names so nothing overrides existing components. */

/* forum-list rows (Index) and topic rows (GetPosts), both splice/render inside .content-panel */
.content-panel .forum-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;margin-top:12px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.content-panel .forum-row:hover{border-color:var(--line-2);transform:translateY(-2px)}
.content-panel .forum-row__title{color:var(--ink);font-weight:700;font-size:15px}
.content-panel .forum-row__title:hover{color:var(--red-bright)}
.content-panel .forum-row__meta{color:var(--ink-2);font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.content-panel .forum-row__label{color:var(--ink-3)}
.content-panel .forum-row__last-post{color:var(--ink-2)}
.content-panel .forum-row__counts{color:var(--ink-3);font-size:13px;margin-left:auto;text-align:right}
.content-panel .forum-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.content-panel .forum-row__replies{color:var(--ink-3);font-size:13px;flex:none}

/* vote rail: topic rows (GetPosts) and every reply-thread level share the same JS-read hooks */
.forum-row__vote,.reply-item__vote{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;color:var(--ink-3)}
.forum-row__vote a,.reply-item__vote a{cursor:pointer;color:var(--ink-2);transition:color .18s}
.forum-row__vote a:hover,.reply-item__vote a:hover{color:var(--ink)}
.forum-row__vote .ico_u.selected,.reply-item__vote .ico_u.selected{color:var(--online)}
.forum-row__vote .ico_d.selected,.reply-item__vote .ico_d.selected{color:var(--red-bright)}
.forum-row__vote .Votes_Text,.reply-item__vote .Votes_Text{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* Forum.cshtml search/sort/new-post filter row */
.forum-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.forum-filters__search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px}
.forum-filters__search .input-text{flex:1}
.forum-filters__sort select{min-width:170px}
.forum-filters__new{margin-left:auto;color:var(--ink-2);font-size:14px}

/* threaded, votable, collapsible reply block: ForumPost's top post and every
   recursive _ForumReply level share this shape */
.reply-item{display:flex;gap:16px;padding:18px 0}
.reply-item+.reply-item{border-top:1px solid var(--line)}
.reply-item--top{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px}
.reply-item__body{flex:1;min-width:0;color:var(--ink-2);font-size:14px}
.reply-item__meta{color:var(--ink-3);font-size:13px;margin-bottom:8px;padding:6px 8px;border-radius:var(--r);transition:background .18s}
.reply-item__meta.collapsed_bg{background:var(--surface-2)}
.reply-item__meta a{color:var(--ink);font-weight:600}
.reply-item__short{color:var(--ink-3);font-size:13px}
.reply-item .collapsed{display:none}

/* nested child replies indent by depth, clamped so a deep thread never runs off-screen */
.reply-item__body .reply-item{margin-left:24px;max-width:calc(100% - 24px)}
.reply-item__body .reply-item .reply-item{margin-left:20px;max-width:calc(100% - 20px)}
.reply-item__body .reply-item .reply-item .reply-item{margin-left:16px;max-width:calc(100% - 16px)}
.reply-item__body .reply-item .reply-item .reply-item .reply-item{margin-left:12px;max-width:calc(100% - 12px)}

/* reply/edit form controls, shared by ForumPost's top post and every _ForumReply level */
.reply-form-controls{margin-top:10px}
.reply-form-controls a{color:var(--red-bright);font-weight:600;cursor:pointer}
.reply-form-controls a:hover{color:var(--ink)}

/* ForumPost's trailing replies container (Container/loadingContent/repliesContent splice anchors) */
.reply-thread-wrap{margin-top:20px}

/* token-only overrides for the main.css light-mode classes the markup keeps */
.forum-row .Category,.reply-item .Category{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface);border:1px solid var(--line-2);color:var(--red-bright)}
.forum-row .Sticky,.reply-item .Sticky{color:var(--red-bright)}
.forum-row .Locked,.reply-item .Locked{color:var(--ink-3)}
.reply-item .Banned{color:var(--red-bright);font-weight:700;margin-left:6px}
.reply-item .DeletedMod{color:var(--ink-3);font-style:italic}
.reply-item .NoReply{color:var(--ink-3)}
.reply-item .edited{color:var(--ink-3);font-size:12px;margin-left:8px}
.reply-item .ModTools{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;color:var(--ink-3);font-size:13px}
.reply-item .ModTools a{color:var(--red-bright);font-weight:600}
.reply-item .ModTools a:hover{color:var(--ink)}
.content-panel .RestrictedForum{color:var(--ink-2);padding:16px 0}

/* ---------- phase2.10 store / resale market ---------- */
/* Scoped under their own class names so nothing overrides existing components. */

/* Store/Index filter row: search + fake sort/category/platform/players selects,
   the placeholder price range, and the item count, all inline on one row */
.store-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.store-filters__search{flex:1;min-width:200px}
.store-filters__search .input-text{width:100%}
.store-filters select.input-text{min-width:150px;flex:none}
.store-filters__range{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.store-filters__range input[type="range"]{accent-color:var(--red)}
.store-filters__count{margin-left:auto;color:var(--ink-3);font-size:14px}
.store-filters__count a{color:var(--ink-2)}
.store-filters__count a:hover{color:var(--red-bright)}

/* Store/Index product card grid. Media keeps the landscape art unforced
   (no square object-fit:cover box), matching the safe .reward-card__media
   treatment rather than the cropping .acct-card__media one. */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:18px}
.store-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.store-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.store-card__media{background:var(--surface);overflow:hidden}
.store-card__media img{width:100%;display:block}
.store-card__info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.store-card__title{color:var(--ink);font-weight:700;font-size:15px}
.store-card__title:hover{color:var(--red-bright)}
.store-card__genre{color:var(--ink-3);font-size:13px}
.store-card__rating-and-price{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.store-card__rating{color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:4px}
.store-card__star{color:var(--red-bright)}
.store-card__price{color:var(--ink);font-weight:700;font-size:14px}
.store-card__bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.store-card__platform{color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.store-card__users .users-list{display:flex;list-style:none;margin:0;padding:0}
.store-card__users .users-list li{margin-left:-8px;border-radius:999px;overflow:hidden;border:2px solid var(--surface-2);width:24px;height:24px}
.store-card__users .users-list li:first-child{margin-left:0}
.store-card__users .users-list img{width:100%;height:100%;object-fit:cover;display:block}

/* Store/Market/Index two-column layout: market row list (left) + upload panel (right) */
.market-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;margin-top:18px}
@media(max-width:1040px){.market-layout{grid-template-columns:1fr}}
.market-layout__main{display:flex;flex-direction:column;gap:18px}

/* resale-market row list, spliced inside a .content-panel */
.market-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.market-item{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 16px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.market-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.market-item__media{width:96px;flex:none;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.market-item__media img{width:100%;height:auto;display:block}
.market-item__info{flex:1;min-width:0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:center}
.market-item__title a{color:var(--ink);font-weight:700;font-size:14px}
.market-item__title a:hover{color:var(--red-bright)}
.market-item__game-name{color:var(--ink-3);font-size:13px}
.market-item__starting{color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:6px}
.market-item__starting b{color:var(--ink);font-weight:700}
.market-item__starting b.price-down{color:var(--red-bright)}
.market-item__quantity{color:var(--ink-3);font-size:13px;text-align:right}
@media(max-width:640px){.market-item__info{grid-template-columns:1fr}.market-item__quantity{text-align:left}}

/* themed up/down price arrow glyph, replacing the inline black-stroke SVGs
   (light-mode leak); token-driven border-triangle, no new color literal */
.market-item__arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.market-item__arrow--up{border-bottom:7px solid var(--online)}
.market-item__arrow--down{border-top:7px solid var(--red-bright)}

/* Upload Item panel: fake game select + inert "Next" button */
.store-upload select.input-text{margin-top:16px}
.store-upload .btn{margin-top:14px;width:100%;justify-content:center}

/* ---------- phase2.11 marketing manager ---------- */
/* Scoped under its own class name so nothing overrides existing components. */

/* _LayoutMarketing's two-link mini-nav (Raw Email Log | Campaign Status),
   spliced above @RenderBody() on every Marketing page */
.marketing-subnav{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;margin-bottom:18px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);color:var(--ink-2);font-size:14px}
.marketing-subnav a{color:var(--ink);font-weight:600;transition:color .18s var(--ease)}
.marketing-subnav a:hover{color:var(--red-bright)}

/* ---------- phase2.12 login / signup ---------- */
/* Scoped under their own class names so nothing overrides existing components.
   _LayoutLoginOnly's split hero (brand panel + @RenderBody() form) and the
   shared panel-head / panel-foot / panel-rule / panel-msg helpers reused
   across all six Account pages that render inside .content-panel--center. */

.login-shell{min-height:100dvh;display:flex;align-items:center;padding:56px 24px}
.login-split{width:100%;max-width:1080px;margin-inline:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.login-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.login-brand a{display:inline-block;width:64px}
.login-brand a img{width:100%}
.login-brand span{font-family:"Marcellus",serif;font-size:26px;letter-spacing:.05em;color:var(--ink)}
.login-brand__tag{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:4px 0 0}
.login-social{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:12px}
.login-social li{width:40px;height:40px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.login-social li:hover{border-color:var(--line-2);transform:translateY(-2px)}
.login-social img{width:18px;height:18px}
.login-foot{display:block;text-align:center;padding:24px;color:var(--ink-3);font-size:13px}
.login-foot a{color:var(--ink-2);transition:color .18s var(--ease)}
.login-foot a:hover{color:var(--red-bright)}

@media(max-width:900px){
  .login-split{grid-template-columns:1fr;gap:36px;max-width:480px}
  .login-brand{align-items:center;text-align:center}
  .login-social{justify-content:center}
}

.panel-head{color:var(--ink);font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 22px;text-align:center}
.panel-foot{margin:18px 0 0;text-align:center;color:var(--ink-2);font-size:14px}
.panel-foot a{color:var(--red-bright);font-weight:600;margin-left:6px;transition:color .18s var(--ease)}
.panel-foot a:hover{color:var(--ink)}
.panel-rule{border:none;border-top:1px solid var(--line);margin:22px 0}
.panel-msg{color:var(--ink-2);font-size:14px;line-height:1.6}
.content-panel code{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:2px 6px;color:var(--ink-2);font-size:13px}

/* ---------- phase2.13 account modal ---------- */
/* modal-account is the site's only UIkit modal (grep-verified across
   Pages/). data-uk-modal, the id attribute, uk-modal-dialog,
   uk-modal-close-default, and data-uk-close all stay on the live markup for
   libs.js; the two rules below re-skin those two classes using an attribute
   selector instead of an id selector so this block stays free of a literal
   hash character and any inline rgb-function colour, per the marker-to-EOF
   guard test already used by every prior phase block. uk-flex-top stays on
   the root: no positioning is added here, so UIkit's own flex centering
   keeps placing the dialog exactly as it does today. */
[id=modal-account] .uk-modal-dialog{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg)}
[id=modal-account] .uk-modal-close-default{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}
[id=modal-account] .uk-modal-close-default:hover{color:var(--red-bright)}

.acct-modal__dialog{padding:32px 36px 36px}
.acct-modal__close{width:36px;height:36px;cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease)}
.acct-modal__title{color:var(--ink);font-size:22px;font-weight:700;margin:0 0 22px}
.acct-modal__actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.acct-modal__link{color:var(--ink-2);font-weight:600;transition:color .18s var(--ease)}
.acct-modal__link:hover{color:var(--red-bright)}

/* ---------- phase2.14 reskin defect sweep ---------- */

/* defect 3: home news-card title links inherited the old dark main.css link colour */
.ncard__body h3 a{color:var(--ink)}
.ncard__body h3 a:hover{color:var(--red-bright)}

/* defect 4: Redeem prize-reveal heading fell back to a dark heading colour */
.prize-reveal h4{color:var(--ink)}

/* defect 5: nav notification counts render in the theme red so a waiting item stands out */
.nav-list a .count{margin-left:auto;color:var(--red-bright);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}

/* defect 6: make the open native select list readable (best-effort; some OS pickers ignore option colours) */
.input-text option{background:var(--surface-2);color:var(--ink)}

/* defect 7: .TicketStatus is applied to the <td> itself; its inline-block pill took the
   cell out of table layout and exposed main.css's bare tr:hover cream background behind
   it. Restore normal cell behaviour so the row hover paints the cell uniformly. Status
   colour still comes from the existing .TicketStatus.Open/.Closed/.NeedResponse rules. */
.ticket-table td.TicketStatus{display:table-cell;background:transparent;border-radius:0;padding:14px}
.ticket-table tbody tr:hover td.TicketStatus{background:var(--surface-2)}

/* defect 8: main.css .Votes_Text{margin:auto} distributed the vote control over a tall
   post (top-middle-bottom). Zero the auto margins and pin the control to the top. Safe on
   the short list rows and replies (no visible slack there today). */
.forum-row__vote,.reply-item__vote{align-self:flex-start}
.forum-row__vote .Votes_Text,.reply-item__vote .Votes_Text{margin:0}

/* ---------- phase2.15: deployed-defect contrast fixes ---------- */

/* dim table headers (Tickets, Tickets Admin, Support Mod Log, Marketing pages,
   Account Membership) - theme.css:259 set --ink-3 (dim); brighten to --ink */
.ticket-table th{color:var(--ink)}

/* muted panel sub-headings (Wallet linked-account name, forum single-post title)
   inherited the panel's --ink-2; brighten to --ink */
.content-panel h4{color:var(--ink)}

/* nice-select (main.js: $('.js-select').niceSelect()) renders its open list on a
   light main.css surface with no option text colour, producing white-on-white for
   the Account dropdown. Override the same selectors, equal specificity, later file
   wins (theme.css loads after main.css). */
.nice-select .list{background-color:var(--surface-2);box-shadow:0 0 0 1px var(--line-2)}
.nice-select .option{color:var(--ink)}
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background-color:var(--surface);color:var(--ink)}
.nice-select .option.selected{color:var(--ink)}

/* phase2.15b: UIkit libs.min.css sets a bare h1..h6 dark-grey colour (old light-theme default)
   that beats inherited body colour on every plain heading and leaves them dark and hard to read
   on the dark theme. Set the default heading colour to the bright ink token; more-specific
   component rules still win. */
h1,h2,h3,h4,h5,h6{color:var(--ink)}

/* ---------- phase2.16 deployed-defect sweep ---------- */
/* defect 1: header cells keep an opaque themed background on hover so main.css bare
   tr:hover cream never shows behind the bright header text (covers all 8 .ticket-table). */
.ticket-table tr:hover th{background:var(--surface-2)}
/* defect 3: forum mod tools - kill the light-grey chip + stray margin on the mod links,
   and theme the native Upload Image / Convert to Ticket buttons and the category select. */
.reply-item .ModTools a{background:transparent;margin-left:0}
.reply-item .ModTools button,.reply-item .ModTools select{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 12px;font-family:inherit;font-size:13px;cursor:pointer}
.reply-item .ModTools button:hover,.reply-item .ModTools select:hover{border-color:var(--line-2)}
/* defect 5: sit the Vote label next to its button instead of pushed to the row edges. */
.content-panel .vote-row{justify-content:flex-start}
/* defect 6: letterbox each login social icon to its own aspect ratio instead of squishing. */
.login-social img{object-fit:contain}
/* defect 7: long unbroken user text (a one-URL forum post) wraps inside its container
   so no page exceeds the viewport width on a narrow screen. */
.content-panel,.reply-item__body,.reply-item__short,.ticket-msg,.forum-row__body{overflow-wrap:anywhere;word-break:break-word}

/* ---------- phase2.17 wallet item cards ---------- */

/* Minecraft inventory item-slot / hover-tooltip card grid for the Wallet page
   (Global Vault and Items Awaiting Approval). Same auto-fill grid + surface
   card formula as .acct-grid/.acct-card and .reward-grid/.reward-card. */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:18px}

/* the card itself: overrides the shipped .vault-item full-width stacking
   without editing that base rule, so Rewards/Index and Rewards/CustomItem
   (which still use bare .vault-item) are unaffected */
.vault-item--slot{margin-top:0;display:flex;flex-direction:column;gap:6px;padding:14px;
  border-radius:var(--r);background:var(--surface);border:1px solid rgba(190,150,230,.35);
  min-width:0;overflow-wrap:anywhere;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.vault-item--slot:hover{border-color:rgba(190,150,230,.6);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(150,100,220,.18)}

/* the square item slot, an inset darker cell like a real inventory frame */
.vault-item__slot{width:64px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}

/* main.css fixes .MCImg at 40x40; this more-specific selector scales the pixel
   art up to fill the slot and keeps it crisp instead of blurred */
.vault-item--slot .vault-item__slot .MCImg{width:52px;height:52px;image-rendering:pixelated;object-fit:contain}

.vault-item__name{display:block;font-weight:600;font-size:15px}
.vault-item__lore{display:block;font-size:13px;margin-top:2px}
.vault-item__ench{display:block;font-size:13px;color:var(--ink-2)}

/* footer identifier line, pinned to the bottom of the flex card so cards of
   different heights in the same row still line up their footers */
.vault-item__meta{display:block;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);
  font-size:12px;font-weight:normal;text-decoration:none;color:var(--ink-3)}

.vault-item__action{display:inline-block;margin-top:4px}

/* ---------- phase2.18 mobile ticket tables ---------- */
/* The ticket pages render real tables; on narrow viewports the table pans
   sideways inside its own container at a readable minimum width instead of
   squashing. Keyed off the new wrapper class so the shared .ticket-table on
   ModLog is untouched. Token-only block per the marker-to-EOF scans. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll>.ticket-table{min-width:640px}
.table-scroll--admin>.ticket-table{min-width:860px}

/* ---------- phase2.19 mobile defect sweep ---------- */
/* At phone widths the ticket tables drop their secondary columns so the
   three that matter (Request Title, Status, Last Activity) fit without
   panning: the player table hides columns 4-5, the admin table hides
   3 and 5-7. Selectors are purely positional because the row fragments
   and the admin header-rebuild script are byte-locked, and everything
   keys off the .table-scroll wrappers so ModLog's bare .ticket-table is
   never matched. The min-width relax overrides the phase2.18 rules by
   source order at equal specificity. Token-only block per the
   marker-to-EOF scans. */
@media (max-width:700px){
  .table-scroll>.ticket-table{min-width:0}
  .table-scroll:not(.table-scroll--admin)>.ticket-table th:nth-child(n+4),
  .table-scroll:not(.table-scroll--admin)>.ticket-table td:nth-child(n+4){display:none}
  .table-scroll--admin>.ticket-table th:nth-child(3),
  .table-scroll--admin>.ticket-table td:nth-child(3),
  .table-scroll--admin>.ticket-table th:nth-child(n+5),
  .table-scroll--admin>.ticket-table td:nth-child(n+5){display:none}
}

/* ---------- phase2.20 mobile header overflow ---------- */
/* On some phones the compact header row was wider than the viewport,
   pushing the menu button past the page edge over a white strip. The
   brand's NETWORK word (already its own element, .brand i) hides at the
   existing 760px tier, and the header's own padding and icon gap
   tighten, bringing the row's demanded width from roughly 455px to
   roughly 330px. html gets the same dark token the body paints so any
   residual overflow shows dark, not the browser's white canvas - no
   html background rule existed anywhere. Token-only block per the
   marker-to-EOF scans. */
html{background:var(--bg)}
@media (max-width:760px){
  .brand i{display:none}
  .head>.wrap{padding-inline:14px}
  .head-right{gap:10px}
}