/* ============================================================
   VICTORY SOLMERA - screens.css
   Home, career, modes, meta screens and the result screens.
   ============================================================ */

/* ---------------- Home ---------------- */

.homebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: var(--aqua);
  box-shadow: var(--sh-2);
}
.brand__mark svg { width: 22px; height: 22px; }
.brand__txt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--ink-3);
  line-height: 1.15;
}
.brand__txt b { display: block; color: var(--ink); font-size: 15px; letter-spacing: 1.6px; }

.pstrip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: left;
}
.pstrip:active { background: var(--surface-2); }
.pstrip__mid { flex: 1; min-width: 0; }
.pstrip__top { display: flex; align-items: center; gap: 7px; }
.pstrip__top b { font-size: 14.5px; }
.pstrip__rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-d);
  background: var(--teal-l);
  padding: 2px 8px;
  border-radius: 999px;
}
.pstrip__xp { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.pstrip__streak {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 5px 6px;
  border-radius: 12px;
  background: var(--amber-l);
  color: #A96A00;
  line-height: 1.05;
}
.pstrip__streak svg { width: 16px; height: 16px; }
.pstrip__streak b { font-size: 14px; font-weight: 800; }
.pstrip__streak span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; }

/* Hero: the pitch panel */

.hero {
  position: relative;
  margin: 12px 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-2);
  min-height: 158px;
  display: flex;
  align-items: stretch;
}
.pitch-hero { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__body {
  position: relative;
  z-index: 1;
  padding: 15px 15px 14px;
  color: #fff;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 4px;
}
.hero__kicker svg { width: 14px; height: 14px; }
.hero__t {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 11px;
}
.hero__meta span {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.hero__row { display: flex; gap: 8px; }
.hero__row .btn { white-space: nowrap; font-size: 13.5px; padding: 0 11px; gap: 6px; }
.hero__row .btn svg { width: 17px; height: 17px; }
.hero__row .btn:first-child { flex: 1.25; }
.hero__thumb {
  position: relative;
  z-index: 1;
  padding: 14px 12px 0 0;
  align-self: flex-start;
}
.hero__gridglyph { width: 54px; height: 54px; color: var(--aqua); opacity: .55; }

/* Quick actions */

.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.quick__b {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 4px 9px;
  display: grid;
  place-items: center;
  gap: 5px;
  box-shadow: var(--sh-1);
}
.quick__b svg { width: 22px; height: 22px; color: var(--teal-d); }
.quick__b span { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.quick__b:active { background: var(--teal-l); }

/* Mode grid */

.mgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.mtile {
  position: relative;
  border-radius: var(--r-md);
  padding: 13px 7px 10px;
  display: grid;
  place-items: center;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  overflow: hidden;
  min-height: 96px;
}
.mtile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--teal);
}
.mtile__ic {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
}
.mtile__ic svg { width: 20px; height: 20px; }
.mtile__n { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.15; }
.mtile__s { font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.2; }
.mtile:active { background: var(--surface-2); }

.mtile--navy::before  { background: var(--navy-3); }
.mtile--navy .mtile__ic  { background: var(--navy-l); color: var(--navy-3); }
.mtile--amber::before { background: var(--amber); }
.mtile--amber .mtile__ic { background: var(--amber-l); color: #A96A00; }
.mtile--coral::before { background: var(--coral); }
.mtile--coral .mtile__ic { background: var(--coral-l); color: #C63A29; }
.mtile--mint::before  { background: var(--mint); }
.mtile--mint .mtile__ic  { background: var(--mint-l); color: #0F8B4E; }
.mtile--violet::before { background: var(--violet); }
.mtile--violet .mtile__ic { background: var(--violet-l); color: #5A47D6; }

/* ---------------- Mode hub ---------------- */

.mcard {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  margin-bottom: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: left;
}
.mcard__ic {
  width: 46px; height: 46px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
  flex: 0 0 auto;
}
.mcard__ic svg { width: 24px; height: 24px; }
.mcard__b { flex: 1; min-width: 0; }
.mcard__b b { display: block; font-size: 15px; }
.mcard__b i { display: block; font-style: normal; font-size: 12.2px; color: var(--ink-3); line-height: 1.35; margin: 2px 0 6px; }
.mcard__meta { display: flex; gap: 5px; flex-wrap: wrap; }
.mcard__c { width: 18px; height: 18px; color: var(--ink-4); flex: 0 0 auto; }
.mcard--navy .mcard__ic  { background: var(--navy-l); color: var(--navy-3); }
.mcard--amber .mcard__ic { background: var(--amber-l); color: #A96A00; }
.mcard--coral .mcard__ic { background: var(--coral-l); color: #C63A29; }
.mcard--mint .mcard__ic  { background: var(--mint-l); color: #0F8B4E; }
.mcard--violet .mcard__ic { background: var(--violet-l); color: #5A47D6; }

.mhead {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  margin-bottom: 12px;
}
.mhead__ic {
  width: 48px; height: 48px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
  flex: 0 0 auto;
}
.mhead__ic svg { width: 26px; height: 26px; }
.mhead__b { flex: 1; min-width: 0; }
.mhead__b b { font-size: 16px; }
.mhead__b i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.mhead__meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-weight: 700; }
.mhead--navy .mhead__ic  { background: var(--navy-l); color: var(--navy-3); }
.mhead--amber .mhead__ic { background: var(--amber-l); color: #A96A00; }
.mhead--coral .mhead__ic { background: var(--coral-l); color: #C63A29; }
.mhead--mint .mhead__ic  { background: var(--mint-l); color: #0F8B4E; }
.mhead--violet .mhead__ic { background: var(--violet-l); color: #5A47D6; }

/* ---------------- Career ---------------- */

.cbanner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 92px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  box-shadow: var(--sh-2);
}
.cbanner__b { position: relative; z-index: 1; padding: 14px; color: #fff; width: 100%; }
.cbanner__b b { font-size: 15px; display: block; }
.cbanner__b i { display: block; font-style: normal; font-size: 11.5px; color: #A9CFEA; margin-top: 2px; }
.cbanner .bar { background: rgba(255,255,255,.18); }

.chcard {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  margin-bottom: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: left;
}
.chcard__badge {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: var(--aqua);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .5px;
  flex: 0 0 auto;
}
.chcard__b { flex: 1; min-width: 0; }
.chcard__t { display: flex; align-items: center; gap: 6px; }
.chcard__t b { font-size: 15px; }
.chcard__lk svg { width: 14px; height: 14px; color: var(--ink-4); }
.chcard__b i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin: 1px 0 6px; }
.chcard__meta { display: flex; gap: 5px; flex-wrap: wrap; }
.chcard__ic {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--teal-d);
  flex: 0 0 auto;
}
.chcard__ic svg { width: 22px; height: 22px; }
.chcard.is-locked { opacity: .62; }
.chcard.is-locked .chcard__badge { background: var(--surface-3); color: var(--ink-4); }

.unlocknote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 8px 12px;
  font-size: 11.8px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}
.unlocknote svg { width: 15px; height: 15px; flex: 0 0 auto; }

.chhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  margin-bottom: 14px;
}
.chhead__badge {
  width: 48px; height: 48px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color: var(--aqua);
  font-weight: 800;
  flex: 0 0 auto;
}
.chhead__b { flex: 1; min-width: 0; }
.chhead__row { display: flex; gap: 6px; flex-wrap: wrap; }
.chhead__ic { color: var(--teal-d); flex: 0 0 auto; }
.chhead__ic svg { width: 26px; height: 26px; }

/* Puzzle map */

.pmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.pnode {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 6px 8px;
  display: grid;
  place-items: center;
  gap: 3px;
  box-shadow: var(--sh-1);
  min-height: 104px;
}
.pnode__n {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-4);
}
.pnode__th { display: grid; place-items: center; height: 48px; margin-top: 6px; }
.pnode__th svg { width: 46px; height: 46px; }
.pnode__th > svg:not(.thumb) { width: 22px; height: 22px; color: var(--ink-4); }
.pnode:not(.is-locked) .pnode__th > svg:not(.thumb) { width: 26px; height: 26px; color: var(--teal-d); opacity: .5; }
.pnode__g { font-size: 10px; color: var(--ink-3); font-weight: 700; }
.pnode.is-done { background: var(--teal-l); border-color: #BFF0E9; }
.pnode.is-done .thumb rect { fill: var(--teal-d); }
.pnode.is-locked { opacity: .55; }
.pnode:active { transform: scale(.98); }

.chnav { display: flex; gap: 8px; margin-top: 16px; }
.chnav .btn { flex: 1; font-size: 12.5px; min-height: 44px; padding: 0 10px; }

/* ---------------- Preview ---------------- */

.pv {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 14px;
  text-align: center;
  box-shadow: var(--sh-2);
  position: relative;
}
.pv__shirt {
  position: relative;
  width: 60px; height: 60px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  color: var(--teal-d);
}
.pv__shirt svg { width: 56px; height: 56px; }
.pv__no {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.pv h2 { font-size: 19px; font-weight: 800; }
.pv__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.pv__grid { display: flex; justify-content: center; margin: 14px 0 10px; }
.pv__best {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.pv__best--new { background: var(--teal-l); color: var(--teal-d); }
.pv__best--new svg { width: 15px; height: 15px; }

.prules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.prule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12.2px;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.prule svg { width: 17px; height: 17px; color: var(--teal-d); flex: 0 0 auto; }

.challrule, .crule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--violet-l);
  border: 1px solid #DCD6FF;
  margin: 12px 0;
}
.challrule svg, .crule svg { width: 22px; height: 22px; color: #5A47D6; flex: 0 0 auto; }
.challrule b, .crule b { display: block; font-size: 14px; }
.challrule i, .crule i { display: block; font-style: normal; font-size: 12.2px; color: var(--ink-2); }
.crules .crule { margin: 0 0 8px; }

.rewrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rewrow__i {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 5px;
  display: grid;
  place-items: center;
  gap: 1px;
  box-shadow: var(--sh-1);
}
.rewrow__i svg { width: 20px; height: 20px; color: var(--teal-d); }
.rewrow__i b { font-size: 15px; font-weight: 800; }
.rewrow__i i { font-style: normal; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }

/* Preview grid (empty board, clues only) */

.pgrid {
  display: grid;
  grid-template-columns: calc(var(--pgc) * var(--pcl)) auto;
  grid-template-rows: calc(var(--pgr) * var(--pcl)) auto;
  gap: 2px;
}
.pgrid__corner { }
.pgrid__top { display: grid; grid-template-columns: repeat(var(--pw), var(--pc)); }
.pgc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  font-size: calc(var(--pcl) * .78);
  color: var(--ink-2);
  font-weight: 700;
  line-height: 1.05;
}
.pgrid__left { display: grid; grid-template-rows: repeat(var(--ph), var(--pc)); }
.pgr {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding-right: 3px;
  font-size: calc(var(--pcl) * .78);
  color: var(--ink-2);
  font-weight: 700;
}
.pgrid__cells {
  display: grid;
  grid-template-columns: repeat(var(--pw), var(--pc));
  grid-template-rows: repeat(var(--ph), var(--pc));
  border: 1.5px solid var(--grid-blk);
  background: var(--grid-line);
  gap: 1px;
  padding: 1px;
}
.pgrid__cells i { background: var(--cell-blank); }
.pgrid__cells i.bx { box-shadow: inset 1px 0 0 var(--grid-blk); }
.pgrid__cells i.by { box-shadow: inset 0 1px 0 var(--grid-blk); }
.pgrid__cells i.bx.by { box-shadow: inset 1px 0 0 var(--grid-blk), inset 0 1px 0 var(--grid-blk); }

/* ---------------- Board rows / lists ---------------- */

.brow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-align: left;
}
.brow__th {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  flex: 0 0 auto;
}
.brow__th > svg:not(.thumb) { width: 20px; height: 20px; color: var(--ink-4); }
.brow:not(.is-locked) .brow__th > svg:not(.thumb) { color: var(--teal-d); opacity: .55; }
.brow__b { flex: 1; min-width: 0; }
.brow__b b { display: block; font-size: 14px; }
.brow__b i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.brow__r { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; }
.brow__best { font-size: 10.5px; color: var(--ink-3); font-weight: 700; }
.brow__c { width: 17px; height: 17px; color: var(--ink-4); flex: 0 0 auto; }
.brow.is-locked { opacity: .58; }
.brow.is-done .brow__th { background: var(--teal-l); }
.brow.is-done .thumb rect { fill: var(--teal-d); }

/* ---------------- Daily ---------------- */

.dailyhero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 128px;
  display: flex;
  align-items: center;
  box-shadow: var(--sh-2);
}
.dailyhero__b { position: relative; z-index: 1; padding: 15px; color: #fff; flex: 1; min-width: 0; }
.dailyhero__k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--aqua);
}
.dailyhero__k svg { width: 14px; height: 14px; }
.dailyhero__b h2 { font-size: 19px; font-weight: 800; margin-top: 4px; }
.dailyhero__m { font-size: 12px; color: #A9CFEA; margin-top: 3px; }
.dailyhero__t { position: relative; z-index: 1; padding-right: 14px; }

.dstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0; }
.dchip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 2px 5px;
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow: var(--sh-1);
}
.dchip__d { font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.dchip__i svg { width: 14px; height: 14px; color: var(--ink-4); }
.dchip.is-done { background: var(--teal-l); border-color: #BFF0E9; }
.dchip.is-done .dchip__i svg { color: var(--teal-d); }
.dchip.is-today { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }

/* ---------------- Endless / tournament ---------------- */

.waves { display: grid; gap: 7px; }
.wave {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.wave__n {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--violet-l);
  color: #5A47D6;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.wave__g { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.wave__i svg { width: 17px; height: 17px; color: var(--ink-4); }
.wave.is-done { background: var(--teal-l); border-color: #BFF0E9; }
.wave.is-done .wave__i svg { color: var(--teal-d); }
.wave--more { color: var(--ink-3); font-size: 12.5px; gap: 8px; }
.wave--more svg { width: 20px; height: 20px; color: var(--violet); }

.cuphero {
  text-align: center;
  padding: 18px 16px 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-3));
  color: #fff;
  box-shadow: var(--sh-2);
}
.cuphero__ic {
  width: 60px; height: 60px;
  margin: 0 auto 8px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  color: var(--amber);
}
.cuphero__ic svg { width: 32px; height: 32px; }
.cuphero h2 { font-size: 19px; font-weight: 800; }
.cuphero__m { font-size: 12.5px; color: #A9CFEA; margin-top: 3px; }
.cuphero .bar { background: rgba(255,255,255,.18); margin-top: 12px; }

.trounds { display: grid; gap: 7px; }
.tround {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-align: left;
}
.tround__n {
  width: 32px; height: 32px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--amber-l);
  color: #A96A00;
  font-weight: 800;
  flex: 0 0 auto;
}
.tround__b { flex: 1; min-width: 0; }
.tround__b b { display: block; font-size: 14px; }
.tround__b i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.tround__i svg { width: 18px; height: 18px; color: var(--ink-4); }
.tround.is-done { background: var(--teal-l); border-color: #BFF0E9; }
.tround.is-done .tround__i svg { color: var(--teal-d); }
.tround.is-next { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }
.tround.is-locked { opacity: .55; }

/* ---------------- Profile ---------------- */

.pcard {
  text-align: center;
  padding: 18px 16px 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-3));
  color: #fff;
  box-shadow: var(--sh-2);
}
.pcard__av { margin: 0 auto 10px; border-radius: 22px; }
.pcard__lvl { font-size: 20px; font-weight: 800; }
.pcard__rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--aqua);
}
.pcard__rank svg { width: 15px; height: 15px; }
.pcard .bar { background: rgba(255,255,255,.18); margin-top: 13px; }
.pcard__xp { font-size: 11.5px; color: #A9CFEA; margin-top: 6px; }

.avrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avpick {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 4px 7px;
  display: grid;
  place-items: center;
  gap: 4px;
  box-shadow: var(--sh-1);
}
.avpick span { font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.avpick.is-on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }
.avpick.is-locked { opacity: .5; }
.avpick__lock {
  position: absolute;
  top: 5px; right: 6px;
}
.avpick__lock svg { width: 13px; height: 13px; color: var(--ink-4); }

.ranks, .chests { display: grid; gap: 7px; }
.rank, .chest {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  opacity: .6;
}
.rank.is-on, .chest.is-on { opacity: 1; }
.rank__ic, .chest__ic {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-2);
  flex: 0 0 auto;
}
.rank.is-on .rank__ic, .chest.is-on .chest__ic { background: var(--teal-l); color: var(--teal-d); }
.rank__ic svg, .chest__ic svg { width: 18px; height: 18px; }
.rank__b, .chest__b { flex: 1; min-width: 0; }
.rank__b b, .chest__b b { display: block; font-size: 13.8px; }
.rank__b i, .chest__b i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.rank__ok svg, .chest.is-done .chest__ic svg { color: var(--mint); }
.rank__ok svg, .rank__lock svg { width: 18px; height: 18px; color: var(--ink-4); }

/* ---------------- Missions / achievements ---------------- */

.mrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.mrow__b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left; }
.mrow__ic {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
  flex: 0 0 auto;
}
.mrow__ic svg { width: 19px; height: 19px; }
.mrow__t { flex: 1; min-width: 0; }
.mrow__t b { display: block; font-size: 13.8px; }
.mrow__t i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.mrow__p { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 700; margin-top: 3px; }
.mrow__rw {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 800; color: var(--amber);
  flex: 0 0 auto;
}
.mrow__rw svg { width: 14px; height: 14px; }
.mrow__ok svg { width: 20px; height: 20px; color: var(--mint); }
.mrow.is-done { opacity: .62; }
.mrow.is-ready { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }

.achs { display: grid; gap: 8px; }
.ach {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-align: left;
  opacity: .68;
}
.ach.is-on { opacity: 1; }
.ach.is-ready { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-l); }
.ach__ic {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-3);
  flex: 0 0 auto;
}
.ach.is-on .ach__ic--t1 { background: #F6E7D8; color: #A5703C; }
.ach.is-on .ach__ic--t2 { background: #E6EDF3; color: #6B7F92; }
.ach.is-on .ach__ic--t3 { background: var(--amber-l); color: #A96A00; }
.ach__ic svg { width: 21px; height: 21px; }
.ach__b { flex: 1; min-width: 0; }
.ach__b b { display: block; font-size: 13.8px; }
.ach__b i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ach__p { font-size: 11px; font-weight: 800; color: var(--ink-3); flex: 0 0 auto; }
.ach__ok svg { width: 19px; height: 19px; color: var(--mint); }
.ach__new svg { width: 19px; height: 19px; color: var(--amber); }

.detail {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 16px 16px;
  box-shadow: var(--sh-2);
}
.detail__ic {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  border-radius: 21px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
}
.detail__ic svg { width: 32px; height: 32px; }
.detail__ic--t1 { background: #F6E7D8; color: #A5703C; }
.detail__ic--t2 { background: #E6EDF3; color: #6B7F92; }
.detail__ic--t3 { background: var(--amber-l); color: #A96A00; }
.detail h2 { font-size: 19px; font-weight: 800; }
.detail p { font-size: 13.2px; color: var(--ink-2); margin: 5px 0 0; }
.detail__p { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 6px; }

/* ---------------- Rewards ---------------- */

.dayrws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dayrws .dayrw:last-child { grid-column: 1 / -1; }
.dayrw {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 8px;
  display: grid;
  place-items: center;
  gap: 3px;
  box-shadow: var(--sh-1);
}
.dayrw__d { font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.dayrw__ic svg { width: 24px; height: 24px; color: var(--amber); }
.dayrw__v { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.dayrw__v svg { width: 13px; height: 13px; color: var(--violet); }
.dayrw__b { font-size: 10.5px; color: var(--ink-3); }
.dayrw.is-done { background: var(--teal-l); border-color: #BFF0E9; }
.dayrw.is-done .dayrw__ic svg { color: var(--teal-d); }
.dayrw.is-next { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-l); }

/* ---------------- Shop ---------------- */

.bundles, .bshops, .kits, .invs { display: grid; gap: 8px; }
.bundle, .bshop, .kit, .inv {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.bundle__ic, .bshop__ic, .inv__ic, .kit__sw {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
  flex: 0 0 auto;
}
.bundle__ic svg, .bshop__ic svg, .inv__ic svg, .kit__sw svg { width: 21px; height: 21px; }
.bundle__b, .bshop__b, .inv__b, .kit__b { flex: 1; min-width: 0; }
.bundle__b b, .bshop__b b, .inv__b b, .kit__b b { display: block; font-size: 13.8px; }
.bundle__b i, .bshop__b i, .inv__b i, .kit__b i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.35;
}
.bshop__have { display: block; font-size: 10.5px; color: var(--teal-d); font-weight: 700; margin-top: 3px; }
.bshop__have svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.bshop__buy { display: grid; gap: 5px; flex: 0 0 auto; }
.inv__n {
  min-width: 34px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--teal-d);
  flex: 0 0 auto;
}
.inv.is-empty { opacity: .58; }
.inv.is-empty .inv__n { color: var(--ink-4); }
.kit--g0 .kit__sw { background: var(--teal-l); color: var(--teal-d); }
.kit--g1 .kit__sw { background: var(--navy-l); color: var(--navy-3); }
.kit--g2 .kit__sw { background: var(--amber-l); color: #A96A00; }
.kit--g3 .kit__sw { background: var(--mint-l); color: #0F8B4E; }
.kit--g4 .kit__sw { background: var(--coral-l); color: #C63A29; }
.kit--g5 .kit__sw { background: var(--violet-l); color: #5A47D6; }
.kit.is-on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }
.kit__ok svg { width: 20px; height: 20px; color: var(--mint); }

.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 6px;
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow: var(--sh-1);
}
.pack__ic svg { width: 24px; height: 24px; color: var(--amber); }
.pack b { font-size: 15px; font-weight: 800; }
.pack i { font-style: normal; font-size: 10.5px; color: var(--violet); font-weight: 700; }
.pack__n { font-size: 10.5px; color: var(--ink-2); font-weight: 700; }
.pack__note { font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .4px; }

.invavs, .invkits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.invav, .invkit {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 4px 7px;
  display: grid;
  place-items: center;
  gap: 4px;
  box-shadow: var(--sh-1);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.invav.is-on, .invkit.is-on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); }
.invkit svg { width: 24px; height: 24px; color: var(--teal-d); }
.invkit--g1 svg { color: var(--navy-3); }
.invkit--g2 svg { color: var(--amber); }
.invkit--g3 svg { color: var(--mint); }
.invkit--g4 svg { color: var(--coral); }
.invkit--g5 svg { color: var(--violet); }

/* ---------------- Collection ---------------- */

.cabinet {
  text-align: center;
  padding: 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-3));
  color: #fff;
  box-shadow: var(--sh-2);
}
.cabinet__ic {
  width: 54px; height: 54px;
  margin: 0 auto 8px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  color: var(--amber);
}
.cabinet__ic svg { width: 28px; height: 28px; }
.cabinet h2 { font-size: 17px; font-weight: 800; }
.cabinet p { font-size: 12.2px; color: #A9CFEA; margin: 4px 0 0; }
.cabinet .bar { background: rgba(255,255,255,.18); margin-top: 12px; }

.colgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 9px;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  box-shadow: var(--sh-1);
  opacity: .62;
  min-height: 108px;
}
.col.is-on { opacity: 1; background: var(--surface); border-color: #BFF0E9; }
.col__ic {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-4);
}
.col.is-on .col__ic { background: var(--teal-l); color: var(--teal-d); }
.col__ic svg { width: 22px; height: 22px; }
.col__t { font-size: 12.5px; font-weight: 800; }
.col__d { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; }
.col__p { font-size: 11px; font-weight: 800; color: var(--ink-4); }

/* ---------------- Statistics / leaderboard ---------------- */

.srows { display: grid; gap: 7px; }
.srow2 {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.srow2__ic svg { width: 19px; height: 19px; color: var(--teal-d); }
.srow2__n { font-size: 13.5px; font-weight: 700; }
.srow2__v { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.srow2 .bar { grid-column: 1 / -1; margin-top: 2px; }

.hrows { display: grid; gap: 7px; }
.hrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.hrow__ic {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.hrow.is-win .hrow__ic { background: var(--teal-l); color: var(--teal-d); }
.hrow.is-loss .hrow__ic { background: var(--coral-l); color: var(--coral); }
.hrow__ic svg { width: 16px; height: 16px; }
.hrow__b { flex: 1; min-width: 0; }
.hrow__b b { display: block; font-size: 13.2px; }
.hrow__b i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.hrow__s { flex: 0 0 auto; color: var(--ink-3); font-size: 12px; }

.lbs { display: grid; gap: 6px; }
.lb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.lb__p {
  width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.lb__av { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
.lb__b { flex: 1; min-width: 0; }
.lb__b b { display: block; font-size: 13.2px; }
.lb__b i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.lb__s { font-size: 13px; font-weight: 800; color: var(--teal-d); flex: 0 0 auto; }
.lb__m svg { width: 18px; height: 18px; color: var(--amber); }
.lb.is-me { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-l); background: var(--teal-l); }
.lb.is-top .lb__p { color: var(--amber); }

/* ---------------- Help / about ---------------- */

.helphero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--sh-1);
  margin-bottom: 12px;
}
.helphero p { font-size: 13.2px; color: var(--ink-2); margin: 12px 0 0; line-height: 1.55; }
.demo { display: flex; align-items: center; gap: 10px; justify-content: center; }
.demo__clue {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-2);
  letter-spacing: 3px;
}
.demo__cells { display: flex; gap: 2px; }
.demo__cells i {
  width: 30px; height: 30px;
  border: 1.5px solid var(--grid-blk);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  color: var(--cell-mark);
  border-radius: 3px;
}
.demo__cells i.on { background: var(--navy); border-color: var(--navy); }

.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px;
  box-shadow: var(--sh-1);
  margin-bottom: 12px;
}
.article p { font-size: 13.4px; color: var(--ink-2); line-height: 1.6; margin: 0 0 11px; }
.article p:last-child { margin-bottom: 0; }
.article__ic {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--teal-l);
  color: var(--teal-d);
  margin-bottom: 12px;
}
.article__ic svg { width: 25px; height: 25px; }

.aboutcard {
  text-align: center;
  padding: 20px 16px 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-3));
  color: #fff;
  box-shadow: var(--sh-2);
}
.aboutcard__mark {
  width: 66px; height: 66px;
  margin: 0 auto 10px;
  border-radius: 22px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  color: var(--aqua);
}
.aboutcard__mark svg { width: 34px; height: 34px; }
.aboutcard h2 { font-size: 21px; font-weight: 800; letter-spacing: .4px; }
.aboutcard p { font-size: 12.8px; color: #A9CFEA; margin: 3px 0 0; }
.aboutcard__v { font-size: 11.5px; color: #7FA6C8; margin-top: 8px; }

/* ---------------- Result screens ---------------- */

.screen--result .screen__scroll { padding-top: 14px; }

.result {
  text-align: center;
  padding: 20px 16px 18px;
  border-radius: var(--r-xl);
  color: #fff;
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.result--win     { background: linear-gradient(150deg, #0A8A80, #16D9C6); color: #04262A; }
.result--perfect { background: linear-gradient(150deg, #0A1E38, #0FB5A6 130%); }
.result--record  { background: linear-gradient(150deg, #123252, #7C6CFF 150%); }
.result--loss    { background: linear-gradient(150deg, #4A3038, #8C5A52); }

.result__ring {
  width: 76px; height: 76px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.3);
  animation: pop .4s cubic-bezier(.2,.9,.3,1.4) both;
}
.result__ring svg { width: 40px; height: 40px; }
.result__ring--gold { background: rgba(255,200,92,.28); border-color: rgba(255,200,92,.75); color: #FFD98A; }
.result__ring--rec { background: rgba(255,255,255,.16); color: #fff; }
.result__ring--loss { background: rgba(255,255,255,.14); color: #FFD7CF; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

.result h1 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.result__sub { font-size: 13px; opacity: .88; margin-top: 4px; }
.result__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 12.5px;
  font-weight: 800;
}
.result__ribbon svg { width: 15px; height: 15px; }

.reveal { text-align: center; margin: 14px 0 4px; }
.reveal .thumb { margin: 0 auto; }
.reveal__cap { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 7px; }

.recbars { display: grid; gap: 9px; margin-top: 14px; text-align: left; }
.recbar span { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .6px; }
.recbar b { display: block; font-size: 17px; font-weight: 800; }
.recbar .bar { background: rgba(255,255,255,.2); }
.recbar .bar i { background: rgba(255,255,255,.5); }
.recbar--new .bar i { background: linear-gradient(90deg, var(--aqua), #fff); }