/* Styles for the later systems: hero skins, sandbox tools, the Trail Maker,
   Odyssey, Teams and Contested Grove. Uses the woodland tokens from
   style.css (sheet parchment, cream-on-moss cards, gold accents). */

/* ---- Hero skins (Heroes sheet) ------------------------------------------- */
.hs-skins { margin-top: 12px; padding: 10px 12px 12px; border-radius: 16px; background: var(--sheet-2); display: grid; gap: 8px; }
.hs-skin-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hs-skin-head b { font-size: 16px; }
.hs-skin-head small { color: var(--sheet-soft); font-size: 12.5px; }
.hs-skin-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.hs-skin { flex: 0 0 auto; display: grid; grid-template-columns: 46px auto; align-items: center; gap: 7px; min-height: 54px; padding: 4px 10px 4px 4px;
  border: 0; border-radius: 14px; font: inherit; color: var(--sheet-text); text-align: left; cursor: pointer;
  background: var(--sheet); box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px transparent; transition: transform .2s var(--spring); }
.hs-skin:active { transform: translateY(2px) scale(.97); transition-duration: .05s; }
.hs-skin.on { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 3px var(--gold); }
.hs-skin.worn .hs-skin-pic { box-shadow: 0 0 0 2px var(--gold); }
.hs-skin-pic { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff6dc, #d9c49a); }
.hs-skin-pic img { width: 112%; height: 112%; object-fit: contain; margin-top: 12%; }
.hs-skin b { display: block; font-size: 13.5px; white-space: nowrap; }
.hs-skin small { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--sheet-soft); font-weight: 700; }
.hs-skin small svg { width: 13px; height: 13px; }
.hs-skin-buy { justify-self: start; background: linear-gradient(#ffe08a, #e9b43e); color: #3a2a08; box-shadow: 0 4px 0 #9a6c12; }
.hs-skin-buy svg { width: 15px; height: 15px; }
.hs-skin-buy.poor { filter: saturate(.45); }
.hs-skin-buy.armed { color: #fff; background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 4px 0 var(--go-deep); animation: m-armed .9s ease-in-out infinite; }
.hs-skin-note { color: var(--sheet-soft); font-size: 12.5px; }

/* ---- Skins: wardrobe panels and the Market collection (ui/skins-ui.js) ---- */
.hs-skin[style*="--rc"] { box-shadow: 0 3px 0 var(--rc), inset 0 0 0 2px transparent; }
.hs-skin[style*="--rc"].on { box-shadow: 0 3px 0 var(--rc), inset 0 0 0 3px var(--gold); }
.sk-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #1d1405; background: var(--rc); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.sk-detail { display: grid; gap: 6px; padding: 8px 10px 10px; border-radius: 12px; background: var(--sheet); box-shadow: inset 4px 0 0 var(--rc, var(--sheet-3)); }
.sk-dhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sk-dhead b { font-size: 16px; }
.sk-detail p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--sheet-soft); }
.sk-act { justify-self: start; height: 42px; font-size: 15px; gap: 5px; }
.sk-act svg { width: 16px; height: 16px; }
.sk-buy { background: linear-gradient(#ffe08a, #e9b43e); color: #3a2a08; box-shadow: 0 4px 0 #9a6c12; }
.sk-buy.poor { filter: saturate(.45); }
.sk-buy.armed { color: #fff; background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 4px 0 var(--go-deep); animation: m-armed .9s ease-in-out infinite; }
.sk-claim { animation: sk-pulse 1.2s ease-in-out infinite; }
@keyframes sk-pulse { 50% { transform: scale(1.05); filter: brightness(1.12); } }
.sk-goal { display: grid; gap: 4px; justify-self: stretch; }
.sk-goal small { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; font-size: 12.5px; line-height: 1.25; color: var(--sheet-text); text-align: left; }
.sk-goal small svg { width: 14px; height: 14px; flex: none; }
.sk-bar { position: relative; display: block; height: 18px; border-radius: 999px; background: rgba(0,0,0,.2); overflow: hidden; }
.sk-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--rc, #7fc24a), #fff3b0); }
.sk-bar b { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 18px; color: #1d1405; font-variant-numeric: tabular-nums; }
.sk-note { font-size: 12px; color: var(--sheet-soft); }
.sk-tally { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px; font-size: 13.5px; }
.sk-tally b { font-size: 17px; }
.sk-tally [style*="--rc"] b { color: #b8860b; }
.sk-tally .go b { color: var(--go-b, #45a236); }
.sk-picks { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 9px; scrollbar-width: thin; }
.sk-pick { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; width: 58px; padding: 4px 2px 3px; border: 0; border-radius: 12px;
  font: inherit; cursor: pointer; color: var(--sheet-text); background: var(--sheet); box-shadow: 0 3px 0 var(--sheet-drop); transition: transform .2s var(--spring); }
.sk-pick:active { transform: translateY(2px) scale(.96); transition-duration: .05s; }
.sk-pick svg, .sk-pick canvas { width: 44px; height: 44px; }
.sk-pick small { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-pick.on { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 3px var(--gold); }
.sk-pick.full small { color: #9a6c12; }
.sk-dot { position: absolute; top: 3px; right: 5px; width: 11px; height: 11px; border-radius: 50%; background: #ff6a3a; box-shadow: 0 0 0 2px var(--sheet), 0 0 8px #ffb070; animation: sk-pulse 1.2s ease-in-out infinite; }
.sk-card { border-top: 4px solid var(--rc); }
.sk-card .sk-pic { border: 0; padding: 0; background: none; font: inherit; cursor: zoom-in; }
.sk-card.ready { box-shadow: 0 4px 0 var(--card-drop), 0 0 0 3px var(--rc), 0 0 16px var(--rc); }
.sk-card .sk-act, .sk-card .sk-goal { justify-self: stretch; margin-top: auto; }
.sk-card .sk-goal small { color: inherit; }

/* ---- Paragons on the Upgrades page ---------------------------------------- */
.us-para { margin: 6px 0 0; padding: 6px 9px; border-radius: 10px; font-size: 12px; line-height: 1.3; color: #fff6dc;
  background: linear-gradient(135deg, #4a2a7a, #7a3a9a 60%, #9a6c22); box-shadow: inset 0 0 0 1.5px rgba(255,226,140,.5); }
.us-para b { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.us-para svg { width: 14px; height: 14px; flex: none; color: #ffd666; }
.us-para span { display: block; opacity: .92; }
.us-para span svg { display: inline; width: 12px; height: 12px; vertical-align: -1px; }

/* ---- Sandbox tools ------------------------------------------------------- */
.hud-btn.powers.sandbox { background: linear-gradient(#9fd6ff, #3a8ea3); }
.sb-live { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sb-live > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--sheet-2); font-size: 13px; }
.sb-live svg { width: 16px; height: 16px; }
.sb-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sb-raiders { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
.sb-raider { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-height: 48px;
  padding: 4px 8px 4px 4px; border: 0; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; color: var(--card-text);
  background: linear-gradient(var(--card-a), var(--card-b)); box-shadow: 0 3px 0 var(--card-drop), inset 0 0 0 1px var(--card-line); transition: transform .2s var(--spring); }
.sb-raider:active { transform: translateY(2px) scale(.97); transition-duration: .05s; }
.sb-raider.boss { box-shadow: 0 3px 0 var(--card-drop), inset 0 0 0 2px #e2a52c; }
.sb-ico { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; }
.sb-ico svg { width: 36px; height: 36px; }
.sb-raider b { font-size: 13px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-raider small { font-size: 11px; color: var(--card-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tools { display: grid; gap: 7px; }
.sb-tool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 7px 10px; border-radius: 12px; background: var(--sheet-2); }
.sb-tool > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.sb-tool > b svg { width: 18px; height: 18px; }
.sb-tool > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-tool .sbtn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }

/* ---- Trail Maker ----------------------------------------------------------- */
.trail.maker { box-shadow: 0 4px 0 var(--sheet-drop), inset 0 0 0 2px var(--gold); }
.trail-art.maker-art { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #e9d9b0 0 12px, #dcc796 12px 24px); color: #6a4708; }
.trail-art.maker-art svg { width: 44%; height: 44%; }
.mm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.mm-card { display: grid; gap: 4px; align-content: start; padding: 8px; border: 0; border-radius: 16px; font: inherit; text-align: left; color: var(--sheet-text);
  background: var(--sheet-2); box-shadow: 0 4px 0 var(--sheet-drop); }
.mm-card.new { cursor: pointer; place-items: center; text-align: center; min-height: 170px; box-shadow: 0 4px 0 var(--sheet-drop), inset 0 0 0 2px var(--gold); }
.mm-card.new:active { transform: translateY(2px); }
.mm-card b { font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-card small { font-size: 12px; color: var(--sheet-soft); }
.mm-thumb { display: block; aspect-ratio: 3 / 2; border-radius: 11px; overflow: hidden; background: #cdbf98; }
.mm-card.new .mm-thumb { width: 64px; height: 64px; aspect-ratio: auto; display: grid; place-items: center; border-radius: 50%; color: #6a4708; background: #f3e2b4; }
.mm-card.new .mm-thumb svg { width: 32px; height: 32px; }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.mm-acts .sbtn { height: 40px; font-size: 14.5px; padding: 0 8px; }
.mm-leaves { display: inline-flex; gap: 2px; vertical-align: middle; }
.mm-leaves i { width: 8px; height: 8px; border-radius: 50% 0; background: rgba(90,70,40,.22); transform: rotate(45deg); }
.mm-leaves i.on { background: #6aa64e; }
.mm-diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.mm-diff { display: grid; gap: 2px; padding: 10px; border: 0; border-radius: 14px; font: inherit; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 4px 0 var(--go-deep); }
.mm-diff.d-easy { background: linear-gradient(#7cb35a, #4f8a3a); box-shadow: 0 4px 0 #2f5a24; }
.mm-diff.d-hard { background: linear-gradient(#d9653b, #a8462a); box-shadow: 0 4px 0 #6a2a18; }
.mm-diff:active { transform: translateY(3px); box-shadow: none; }
.mm-diff b { font-size: 18px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.mm-diff small { font-size: 12px; opacity: .92; }

/* The editor: canvas on the left, tools on the right, filling the screen. */
.sheet.mm-editor { width: min(1240px, 100%); height: 100%; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 280px);
  gap: 8px; overflow: hidden; text-align: left; background: var(--sheet); }
@media (max-width: 520px) {
  .sheet.mm-editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 38%) minmax(0, 1fr); }
}
.mm-stage { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }
.mm-canvas { display: block; border-radius: 12px; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 3px var(--sheet-edge), 0 4px 0 var(--sheet-drop); background: #4f8038; }
.mm-hint { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); margin: 0; max-width: 90%; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  font-size: 13px; font-weight: 700; color: #fff6dc; background: rgba(30,24,14,.82); opacity: 0; transition: opacity .2s, transform .2s; text-align: center; }
.mm-hint.show { opacity: 1; transform: translate(-50%, 0); }
.mm-hint.bad { background: rgba(140,40,24,.9); }
.mm-side { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 4px; overscroll-behavior: contain; }
.mm-side .m-sub { margin: 4px 0 0; }
.mm-side > * { flex-shrink: 0; }
.m-store .m-card p { overflow-wrap: anywhere; }
.mm-name input { font-size: 16px; }
.mm-seg { display: flex; flex-wrap: wrap; }
.mm-seg button { flex: 1 1 auto; min-height: 36px; font-size: 13px; }
.mm-tip { margin: 0; font-size: 12px; line-height: 1.3; color: var(--sheet-soft); }
.mm-props { display: flex; flex-wrap: wrap; gap: 5px; }
.mm-props button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--sheet-text); background: var(--sheet-2); box-shadow: 0 2px 0 var(--sheet-drop); }
.mm-props button.on { color: #fff; background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 2px 0 var(--go-deep); }
.mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mm-row .sbtn, .mm-done { height: 40px; font-size: 14px; padding: 0 8px; }
.mm-row .sbtn.armed { color: #fff; background: linear-gradient(#d9653b, #b94d2b); box-shadow: 0 4px 0 #7f2f18; }
.mm-row .sbtn:disabled { opacity: .5; cursor: default; }
.mm-check { padding: 7px 9px; border-radius: 12px; background: #f3d9c8; color: #6a2a18; }
.mm-check.ok { background: #dfe8c4; color: #2f5a24; }
.mm-check b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; }
.mm-check b svg { width: 15px; height: 15px; }
.mm-check small { display: block; font-size: 12px; margin-top: 2px; }
.mm-check ul { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; line-height: 1.3; color: var(--sheet-soft); }
.mm-check li.bad { color: #8a2a18; font-weight: 700; }
/* ---- Odyssey --------------------------------------------------------------- */
.od-islands { list-style: none; margin: 0 0 8px; padding: 2px 2px 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.od-isl { position: relative; flex: 0 0 200px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px 6px 6px;
  border-radius: 14px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); }
.od-isl .m-thumb { width: 64px; height: 43px; border-radius: 9px; }
.od-isl small { display: block; font-size: 11px; color: var(--sheet-soft); }
.od-isl b { display: block; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-isl em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.25; color: var(--sheet-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.od-isl.s-done { opacity: .75; }
.od-isl.s-now { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 3px var(--gold); }
.od-mark { position: absolute; top: -6px; right: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px;
  color: #fff; background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 2px 0 var(--go-deep); }
.od-mark svg { width: 14px; height: 14px; }
.od-mark.now { color: #3a2a08; background: linear-gradient(#ffd666, #e2a52c); box-shadow: 0 2px 0 #9a6c12; }
.od-boat { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-bottom: 8px; }
.od-pick { position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 7px; border: 0; border-radius: 14px; font: inherit; cursor: pointer; color: var(--card-text);
  background: linear-gradient(var(--card-a), var(--card-b)); box-shadow: 0 3px 0 var(--card-drop), inset 0 0 0 1px var(--card-line); transition: transform .2s var(--spring); }
.od-pick:active { transform: translateY(2px) scale(.97); transition-duration: .05s; }
.od-pick.on { box-shadow: 0 3px 0 var(--card-drop), inset 0 0 0 3px var(--gold); }
.od-pic { width: 52px; height: 52px; display: grid; place-items: center; }
.od-pic img { width: 100%; height: 100%; object-fit: contain; }
.od-pick b { font-size: 13.5px; }
.od-pick small { font-size: 10.5px; color: var(--card-soft); text-align: center; line-height: 1.2; }
.od-pick em { position: absolute; top: 4px; right: 5px; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: #3a2a08; background: linear-gradient(#ffd666, #e2a52c); }
.od-run { display: grid; gap: 6px; padding: 9px 11px; border-radius: 14px; background: var(--sheet-2); margin-bottom: 8px; }
.od-run > b { font-size: 15px; }
.od-lives { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #8a2a18; }
.od-lives svg { width: 16px; height: 16px; }
.od-crew-list { display: flex; flex-wrap: wrap; gap: 6px; }
.od-crew-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 2px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--sheet); }
.od-crew-chip .od-pic { width: 30px; height: 30px; }
.od-note { margin: 0 0 8px; padding: 7px 10px; border-radius: 12px; font-size: 13px; background: #f3e7c4; }
.od-note.bad { background: #f3d9c8; color: #6a2a18; }
.od-note svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Teams -------------------------------------------------------------------- */
.tm-emblem { width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff6dc, var(--tc)); box-shadow: 0 0 0 3px var(--tc), 0 3px 0 rgba(0,0,0,.25); }
.tm-emblem img { width: 118%; height: 118%; object-fit: contain; margin-top: 18%; }
.tm-tag { display: inline-block; padding: 1px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: #fff; background: var(--tc); vertical-align: 2px; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.tm-box { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 16px; background: var(--sheet-2); }
.tm-box .m-sub { margin: 0; }
.tm-field { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.tm-field input { height: 40px; min-width: 0; border-radius: 10px; border: 2px solid var(--sheet-edge); padding: 0 10px; font: inherit; font-size: 16px; background: var(--sheet); color: var(--sheet-text); }
.tm-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-colors button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--tc); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.tm-colors button.on { box-shadow: 0 0 0 3px #fff6dc, 0 0 0 5px var(--tc); }
.tm-picks { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.tm-picks button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; padding: 2px; cursor: pointer; background: var(--sheet); box-shadow: 0 2px 0 var(--sheet-drop); }
.tm-picks button.on { box-shadow: inset 0 0 0 3px var(--gold); }
.tm-picks img { width: 100%; height: 100%; object-fit: contain; }
.tm-list, .tm-members, .ct-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tm-list li, .tm-members li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--sheet); }
.tm-list li b, .tm-members li b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-list li small, .tm-members li small { display: block; font-size: 11.5px; color: var(--sheet-soft); }
.tm-list .sbtn, .tm-acts .sbtn { height: 36px; font-size: 13px; padding: 0 10px; }
.tm-closed svg { width: 18px; height: 18px; color: var(--sheet-soft); }
.tm-members li { background: var(--sheet-2); }
.tm-members li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.tm-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tm-role { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; color: #3a2a08; background: linear-gradient(#ffd666, #e2a52c); }
.tm-role.officer { color: #fff; background: linear-gradient(#5cc3e6, #3a8ea3); }
.tm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, var(--sheet-2)), var(--sheet-2)); }
.tm-card > span > b { display: block; font-size: 18px; }
.tm-card small { display: block; font-size: 12px; color: var(--sheet-soft); }
.tm-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.tm-invite code { font-size: 15px; letter-spacing: 2px; padding: 2px 8px; border-radius: 8px; background: var(--sheet); }
.tm-invite .sbtn { height: 32px; font-size: 12.5px; padding: 0 9px; }
.tm-chat { list-style: none; margin: 0 0 8px; padding: 8px; display: grid; gap: 5px; max-height: 210px; overflow: auto; border-radius: 14px; background: var(--sheet-2); }
.tm-chat li { display: grid; gap: 1px; padding: 5px 9px; border-radius: 10px; background: var(--sheet); max-width: 85%; justify-self: start; font-size: 13.5px; overflow-wrap: anywhere; }
.tm-chat li b { font-size: 11.5px; color: var(--accent); }
.tm-chat li.me { justify-self: end; background: #e3ecc8; }
.tm-chat li.sys { justify-self: center; background: transparent; font-size: 12px; font-style: italic; color: var(--sheet-soft); text-align: center; }
.tm-say input { font-size: 16px; }

/* ---- Contested Grove ------------------------------------------------------------ */
.ct-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 10px; border-radius: 12px; background: var(--sheet-2); font-size: 13.5px; }
.ct-team > span { color: var(--sheet-soft); font-weight: 700; }
.ct-relic-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f3e2b4; color: #6a4708 !important; }
.ct-relic-chip svg { width: 14px; height: 14px; }
.ct-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 8px; }
.ct-map { position: relative; flex: none; }
.ct-hex { position: absolute; width: 54px; height: 62px; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #d9c49a; transition: transform .15s var(--spring), filter .15s; }
.ct-hex::before { content: ''; position: absolute; inset: 4px; clip-path: inherit; background: #efe1bd; }
.ct-hex.k-inner::before { background: #e6d3a5; }
.ct-hex.k-heart::before { background: #f2d77c; }
.ct-hex.held { background: color-mix(in srgb, var(--tc) 70%, #000); }
.ct-hex.held::before { background: var(--tc); }
.ct-hex.mine { background: #fff6dc; }
.ct-hex.open:not(.held)::after { content: ''; position: absolute; inset: 9px; clip-path: inherit; background: rgba(92,194,58,.22); }
.ct-hex.on { transform: scale(1.1); z-index: 2; filter: drop-shadow(0 0 6px rgba(242,193,78,.9)); }
.ct-hex span { position: relative; z-index: 1; display: grid; place-items: center; }
.ct-hex span svg { width: 22px; height: 22px; }
.ct-hex b { font-size: 11px; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.ct-hex:active { transform: scale(.95); }
.ct-tile { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border-radius: 16px; background: var(--sheet-2); min-width: 0; }
.ct-tile .eyebrow { margin: 0; }
.ct-name { font-size: 20px; line-height: 1.1; }
.ct-mode, .ct-holder, .ct-locked { margin: 0; font-size: 13px; line-height: 1.35; }
.ct-relic { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 6px 8px; border-radius: 10px; font-size: 12.5px; background: #f3e2b4; }
.ct-relic svg { width: 18px; height: 18px; flex: none; }
.ct-locked { display: flex; gap: 5px; align-items: center; color: var(--sheet-soft); }
.ct-locked svg { width: 15px; height: 15px; flex: none; }
.ct-standings li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 9px; border-radius: 10px; background: var(--sheet-2); font-size: 13.5px; }
.ct-standings li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.ct-standings em { font-style: normal; font-weight: 700; text-align: center; color: var(--sheet-soft); }
.ct-standings span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .ct-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

@media (max-height: 420px) {
  .sheet.mm-editor { padding: 6px; gap: 6px; }
  .mm-side { gap: 5px; }
  .mm-seg button { min-height: 32px; }
  .mm-tip { font-size: 11.5px; }
}

/* ---- Online server address (Profile > Online) ------------------------------ */
.m-server { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.m-server span { flex: none; font-size: 13px; font-weight: 700; color: var(--sheet-soft); }
.m-server input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--sheet-3); background: var(--sheet-2); color: var(--sheet-text); font: inherit; font-size: 14px; }
.m-server input:focus { outline: none; border-color: #f2c14e; }
.reward-row .rw.rank i { margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(88,191,60,.22); color: var(--good-text); }

/* ---- Events hub: sections, new event kinds, hunt tiers, podiums ------------ */
.m-ev-sec { margin: 0 0 14px; }
.m-ev-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 8px; font-size: 15px; letter-spacing: .4px; }
.m-ev-head svg { width: 20px; height: 20px; }
.m-ev-head small { font-size: 12px; font-weight: 500; color: var(--sheet-soft); letter-spacing: 0; }
.m-event.expert { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #d4643a; background: linear-gradient(170deg, color-mix(in srgb, #d4643a 10%, var(--sheet-2)), var(--sheet-2) 55%); }
.m-event.hunt { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #7a1f1f; }
.m-event.odyssey { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #2f8aa8; }
.m-event.duo { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #5cc3e6; }
.m-event.duohunt { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #f2c14e; background: linear-gradient(170deg, color-mix(in srgb, #5cc3e6 10%, var(--sheet-2)), var(--sheet-2) 55%); }
.m-event.goals { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #5e9e47; }
.m-event.territory { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #c9a24a; }
.m-event.trial { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #8a5ac8; }
.m-event > .m-prize { margin: 0; }
.m-thumb.ico.trial { background: radial-gradient(circle at 50% 35%, #e6d6ff, #8a5ac8 65%, #3a2470); }
.m-thumb.ico.goals { background: radial-gradient(circle at 50% 35%, #e3f5c8, #5e9e47 65%, #24501c); }
.m-prize span.item { background: linear-gradient(#ffe08a, #e9b43e); color: #3a2a08; }
.m-prize .done svg { width: 13px; height: 13px; }

.m-tiers { display: flex; align-items: center; gap: 0; margin: 2px 0; }
.m-tiers > i { flex: 1; height: 3px; min-width: 6px; border-radius: 3px; background: var(--sheet-3); }
.m-tier {
  flex: none; position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; font: inherit; padding: 0;
  color: var(--sheet-soft); background: var(--sheet-3); box-shadow: 0 3px 0 var(--sheet-drop); transition: transform .18s var(--spring);
}
.m-tier b { font-size: 13px; line-height: 1; }
.m-tier svg { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--sheet); color: var(--sheet-soft); }
.m-tier.open { color: #fff; background: radial-gradient(circle at 50% 30%, #ff8a5a, #a8301a); box-shadow: 0 3px 0 #5a1408; }
.m-tier.done { color: #3a2a08; background: radial-gradient(circle at 50% 30%, #fff1a8, #e2a52c); box-shadow: 0 3px 0 #9a6c12; }
.m-tier.done svg { color: #3d672f; }
.m-tier.on { outline: 3px solid var(--accent); outline-offset: 2px; }
.m-tier:active { transform: scale(.92); }
.m-tiers.big { margin: 6px 0 10px; }
.m-tiers.big .m-tier { width: 48px; height: 48px; }
.m-tiers.big .m-tier b { font-size: 16px; }
@media (max-width: 420px) { .m-tiers.big .m-tier { width: 38px; height: 38px; } }

.m-prize-table > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.m-prize-table > span .m-prize, .m-prize-table > span > span { margin: 0; }
.m-prize-table > span.podium { background: color-mix(in srgb, #f2c14e 22%, var(--sheet-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #f2c14e 60%, transparent); }
.m-prize-table > span > span:not(.item) { padding: 0 4px; background: none; color: inherit; }

.m-podiums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.m-podium { padding: 10px; border-radius: 16px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); }
.m-podium h4 { margin: 0 0 6px; font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
.m-podium h4 small { font-weight: 500; color: var(--sheet-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-podium ol { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.m-podium li { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 8px 3px 4px; border-radius: 10px; font-size: 13px; }
.m-podium li em { font-style: normal; font-weight: 700; font-size: 12px; text-align: center; }
.m-podium li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-podium li small { font-variant-numeric: tabular-nums; color: var(--sheet-soft); }
.m-podium li.p1 { background: color-mix(in srgb, #f2c14e 30%, transparent); }
.m-podium li.p2 { background: color-mix(in srgb, #c9d3dc 40%, transparent); }
.m-podium li.p3 { background: color-mix(in srgb, #d68a4a 28%, transparent); }
.m-podium p { margin: 0 0 4px; font-size: 12.5px; color: var(--sheet-soft); }
.m-pair { display: inline-flex; }
.m-pair .m-ava + .m-ava { margin-left: -10px; }
.reward-row .rw.gift svg { color: var(--gold); }

/* ---- Trials -------------------------------------------------------------------- */
.tr-progress { flex: none; display: grid; gap: 4px; justify-items: end; font-size: 13px; color: var(--sheet-soft); }
.tr-progress b { font-size: 20px; color: var(--sheet-text); }
.tr-bar { width: 140px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--sheet-3); }
.tr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9ad06a, #8a5ac8); border-radius: inherit; }
.tr-chapter { margin: 0 0 14px; }
.tr-chapter h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.tr-chapter h3 > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.tr-chapter h3 b { font-size: 16px; }
.tr-chapter h3 small { font-size: 12.5px; font-weight: 500; color: var(--sheet-soft); }
.tr-chapter h3 em { flex: none; font-style: normal; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; color: var(--sheet-soft); }
.tr-chapter h3 em svg { width: 14px; height: 14px; }
.tr-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; color: #fff; background: radial-gradient(circle at 50% 30%, #b08ae0, #5a3a9a); box-shadow: 0 3px 0 #2a1a4a; }
.tr-chapter.locked .tr-num { filter: grayscale(1); opacity: .6; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tr-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #8a5ac8; }
.tr-card.done { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #58bf3c; }
.tr-card.locked { opacity: .62; box-shadow: 0 3px 0 var(--sheet-drop); }
.tr-card header { display: flex; align-items: center; gap: 8px; }
.tr-card header > span:nth-child(2) { display: grid; min-width: 0; flex: 1; line-height: 1.15; }
.tr-card header small { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.tr-card header b { font-size: 15.5px; }
.tr-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sheet-3); box-shadow: 0 2px 0 var(--sheet-drop); }
.tr-ico svg { width: 30px; height: 30px; }
.tr-done { flex: none; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; font-weight: 700; color: #3d672f; }
.tr-done svg { width: 14px; height: 14px; }
.tr-story { margin: 0; font-size: 12.5px; font-style: italic; line-height: 1.3; color: var(--sheet-soft); }
.tr-goal { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.tr-card footer { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.tr-card footer .m-prize { flex: 1 1 140px; margin: 0; }
.tr-card footer .sbtn { height: 38px; font-size: 14px; padding: 0 12px; }
.tr-card footer .sbtn svg { width: 16px; height: 16px; }
.tr-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sheet-soft); }
.tr-lock svg { width: 13px; height: 13px; flex: none; }

/* ---- Team goals ------------------------------------------------------------------ */
.tg-goals { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.tg-goal { display: flex; gap: 10px; padding: 10px; border-radius: 14px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); }
.tg-goal.coop { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px #5cc3e6; }
.tg-goal > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tg-goal b { font-size: 15px; }
.tg-goal small { font-size: 12.5px; color: var(--sheet-soft); }
.tg-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sheet-3); }
.tg-ico svg { width: 28px; height: 28px; }
.tg-coop { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 7px; border-radius: 99px; font-style: normal; font-size: 11px; color: #0f3a4a; background: #9fe0f2; vertical-align: 2px; }
.tg-coop svg { width: 13px; height: 13px; }
.tg-bar { position: relative; display: block; height: 18px; margin: 4px 0 2px; border-radius: 99px; background: var(--sheet-3); overflow: visible; }
.tg-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7cc95a, #f2c14e); }
.tg-bar > em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--sheet-text); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.tg-mark { position: absolute; top: -3px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--sheet-drop); }
.tg-mark.bronze.on { background: #b0703a; } .tg-mark.silver.on { background: #8c9aa6; } .tg-mark.gold.on { background: #d9a21a; }
.tg-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-tier { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px 8px; border-radius: 10px; font-size: 12px; background: var(--sheet); opacity: .8; }
.tg-tier svg { width: 13px; height: 13px; }
.tg-tier .m-prize { margin: 0; }
.tg-tier.on { opacity: 1; }
.tg-tier.bronze.on { box-shadow: inset 0 0 0 2px #b0703a; } .tg-tier.silver.on { box-shadow: inset 0 0 0 2px #8c9aa6; } .tg-tier.gold.on { box-shadow: inset 0 0 0 2px #d9a21a; }
.tg-mine { font-weight: 700; }
.tg-bonus { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: var(--sheet-2); }
.tg-bonus > svg { width: 24px; height: 24px; }
.tg-bonus.on { background: color-mix(in srgb, #f2c14e 30%, var(--sheet-2)); }
.tg-bonus .m-prize { margin: 0; }
.tg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tg-helpers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tg-helpers li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 9px; border-radius: 10px; background: var(--sheet-2); font-size: 13.5px; }
.tg-helpers em { font-style: normal; font-weight: 700; color: var(--sheet-soft); text-align: center; }
.tg-helpers span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-places { display: grid; gap: 4px; margin-top: 8px; }
.tg-places > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 8px; border-radius: 10px; font-size: 12.5px; }
.tg-places .p1 { background: color-mix(in srgb, #f2c14e 30%, transparent); }
.tg-places .p2 { background: color-mix(in srgb, #c9d3dc 40%, transparent); }
.tg-places .p3 { background: color-mix(in srgb, #d68a4a 28%, transparent); }
.tg-places .m-prize { margin: 0; }

/* ---- Co-op lobby: challenge card ----------------------------------------------- */
.coop-event-prize { margin: 6px 0 0; font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.coop-event-prize span { padding: 1px 8px; border-radius: 99px; background: rgba(242,193,78,.25); }
.coop-event-prize svg { width: 14px; height: 14px; }

@media (max-height: 520px) {
  .tr-story { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-tier { width: 34px; height: 34px; }
}

/* ---- Paragon portrait on the Animals page card ------------------------------- */
.us-para { overflow: hidden; }
.us-para .us-para-pic { float: right; width: 64px; height: 64px; margin: -4px -4px 0 6px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(176,122,255,.55)); }

/* ---- Events hub: Grove Pass, streak, festival, new event kinds -------------- */
.m-event header > span:nth-child(2) { flex: 1; }
.m-sheet .m-event header > span.m-star-chip { display: inline-flex; flex: none; align-self: flex-start; margin-left: auto; line-height: 1.2; }
.m-star-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(#fff1a8, #e9b43e); color: #4a3208; box-shadow: 0 2px 0 #9a6c12; }
.m-star-chip svg { width: 14px; height: 14px; }
.m-medal-count .m-star-chip { margin-left: 6px; vertical-align: 1px; }
.m-event.quick { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #7fd6c0; }
.m-event.gauntlet { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #ff9a5a; }
.m-event.elite { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 #7a1f1f; background: linear-gradient(170deg, color-mix(in srgb, #c8402a 12%, var(--sheet-2)), var(--sheet-2) 55%); }
.m-event.festival { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 3px 0 var(--fc, #f2c14e); }
.m-event.is-done { opacity: .82; }
.m-prize span.lbl { background: none; padding-left: 0; color: var(--sheet-soft); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.m-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.m-pool > svg { width: 18px; height: 18px; flex: none; }
.m-pool b { color: var(--gold-text, #f9d891); font-variant-numeric: tabular-nums; }
.m-pool small { color: var(--sheet-soft); font-size: 11.5px; }
.m-pool.big { justify-content: center; margin: 4px 0 2px; font-size: 15px; }
.m-pool.big > svg { width: 22px; height: 22px; }

.m-week { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.m-passcard, .m-streakcard { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 18px; background: var(--sheet-2);
  box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px color-mix(in srgb, #f2c14e 45%, transparent); }
.m-passcard header, .m-streakcard header { display: flex; align-items: center; gap: 10px; }
.m-passcard header > span:nth-child(2), .m-streakcard header > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.m-passcard small, .m-streakcard small { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.m-passcard small svg { width: 12px; height: 12px; }
.m-passcard header b, .m-streakcard header b { font-size: 22px; }
.m-passcard header em, .m-streakcard header em { font-style: normal; font-size: 12.5px; color: var(--sheet-soft); }
.m-passcard footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.m-passcard footer .sbtn { flex: 1 1 auto; height: 40px; font-size: 14px; }
.m-pass-ico, .m-streak-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.m-pass-ico { background: radial-gradient(circle at 50% 35%, #fff6c8, #e9b43e 60%, #8a5a12); box-shadow: 0 3px 0 #5a3a08; }
.m-streak-ico { background: radial-gradient(circle at 50% 35%, #e6ffd0, #6aa64e 60%, #2f5a2a); box-shadow: 0 3px 0 #1f3a1a; filter: grayscale(.7); }
.m-pass-ico svg, .m-streak-ico svg { width: 60%; height: 60%; }
.m-streakcard.lit .m-streak-ico { filter: none; animation: m-flicker 2.4s ease-in-out infinite; }
.m-streakcard.warn { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px #ff9a5a; }
.m-streakcard.warn .m-streak-ico { filter: none; }
.m-streakcard p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--sheet-soft); }
.m-pass-skin { flex: none; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(circle at 50% 30%, #e6d6ff, #8a5ac8 65%, #3a2470); box-shadow: 0 3px 0 #2a1850, inset 0 0 0 2px #b07aff; }
.m-pass-skin img { width: 120%; height: 120%; object-fit: contain; margin-bottom: -14%; }
.m-pass-skin svg { width: 80%; height: 80%; }
.m-pass-skin.big { width: 84px; height: 84px; margin: 0 auto; }
.m-pass-bar { position: relative; height: 12px; border-radius: 999px; background: var(--tag); overflow: hidden; }
.m-pass-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #e9b43e, #fff1a8); box-shadow: 0 0 10px rgba(242,193,78,.6); transition: width .5s var(--ease-out); }
.m-pass-dots { display: flex; justify-content: space-between; gap: 3px; }
.m-pass-dots i { flex: 1; height: 7px; border-radius: 999px; background: var(--tag); }
.m-pass-dots i.claimed { background: #7fc24a; }
.m-pass-dots i.ready { background: #f2c14e; box-shadow: 0 0 8px rgba(242,193,78,.8); }
.m-pass-dots i.grand { flex: 1.6; background: color-mix(in srgb, #b07aff 45%, var(--tag)); }
.m-pass-dots i.grand.claimed { background: #b07aff; }
.m-glow { animation: m-glow 1.6s ease-in-out infinite; }
@keyframes m-glow { 50% { filter: brightness(1.18); box-shadow: 0 3px 0 var(--go-deep), 0 0 16px rgba(242,193,78,.75); } }
@keyframes m-flicker { 50% { transform: scale(1.06) rotate(-3deg); } }

.m-fest { --fc: #f2c14e; }
.m-fest-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--fc) 45%, var(--sheet-2)), var(--sheet-2) 70%); box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px var(--fc); }
.m-fest-banner > span:last-child { display: grid; line-height: 1.2; min-width: 0; }
.m-fest-banner small { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.m-fest-banner b { font-size: 22px; }
.m-fest-banner em { font-style: normal; font-size: 13px; }
.m-fest-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff, var(--fc) 70%); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.m-fest-ico svg { width: 62%; height: 62%; }
.m-fest-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 6px 10px; border-radius: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--fc, #f2c14e) 22%, var(--sheet-2)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fc, #f2c14e) 70%, transparent); }
.m-fest-note svg { width: 18px; height: 18px; }

/* ---- Grove Pass sheet --------------------------------------------------------- */
.m-pass-track { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.m-pass-tier { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); }
.m-pass-tier .m-prize { margin: 0; }
.m-pass-tier em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--sheet-soft); display: inline-flex; align-items: center; gap: 4px; }
.m-pass-tier em svg { width: 14px; height: 14px; }
.m-pass-n { display: flex; align-items: baseline; gap: 6px; }
.m-pass-n b { font-size: 22px; line-height: 1; }
.m-pass-n small { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--sheet-soft); }
.m-pass-n small svg { width: 13px; height: 13px; }
.m-pass-tier.locked { opacity: .78; }
.m-pass-tier.ready { box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px #f2c14e, 0 0 14px rgba(242,193,78,.35); }
.m-pass-tier.ready em { color: var(--gold-text, #f9d891); }
.m-pass-tier.claimed em { color: var(--good-text); }
.m-pass-tier.grand { grid-column: span 2; background: linear-gradient(160deg, color-mix(in srgb, #b07aff 22%, var(--sheet-2)), var(--sheet-2) 70%); }
.m-pass-tier.chest { background: linear-gradient(160deg, color-mix(in srgb, #f2c14e 16%, var(--sheet-2)), var(--sheet-2) 70%); }
.m-pass-track.miles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.m-howstars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; margin-bottom: 12px; }
.m-howstars span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 10px; background: var(--sheet-2); font-size: 13px; }
.m-howstars em { font-style: normal; font-weight: 800; color: var(--gold-text, #f9d891); }

/* ---- Leaderboards: groups, online dots, Ranked teaser, profiles ----------------- */
.m-boards .m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; }
.m-boards .m-chip { height: 32px; padding: 0 12px; font-weight: 700; color: var(--sheet-soft); }
.m-boards .m-chip.on { color: #3a2a08; background: linear-gradient(#fff1a8, #e9b43e); box-shadow: 0 3px 0 #9a6c12; }
.m-tab.soon i { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #f2c14e; color: #4a3208; text-shadow: none; }
.m-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #58bf3c; box-shadow: 0 0 6px #58bf3c; vertical-align: 1px; }
.m-board li.tap { cursor: pointer; transition: transform .15s var(--spring), filter .15s; }
.m-board li.tap:hover { filter: brightness(1.08); }
.m-board li.tap:active { transform: scale(.98); }
.m-board em i { display: grid; place-items: center; }
.m-board em i svg { width: 24px; height: 24px; }
.m-board .m-medal-2 svg { filter: grayscale(1) brightness(1.25); }
.m-board .m-medal-3 svg { filter: sepia(.6) hue-rotate(-20deg) saturate(1.4) brightness(.85); }
.m-ranked-soon { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 16px; border-radius: 20px;
  background: radial-gradient(circle at 50% 0, rgba(242,193,78,.22), transparent 70%), var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop), inset 0 0 0 2px color-mix(in srgb, #f2c14e 50%, transparent); }
.m-ranked-soon h3 { margin: 0; font-size: 24px; }
.m-ranked-soon p { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.4; }
.m-soon-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  background: linear-gradient(#fff1a8, #e9b43e); color: #4a3208; box-shadow: 0 2px 0 #9a6c12; }
.m-soon-badge svg { width: 14px; height: 14px; }
.m-divisions { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0; padding: 0; }
.m-divisions li { display: grid; justify-items: center; gap: 3px; width: 74px; }
.m-divisions li span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #fff, var(--dc) 70%); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.m-divisions li span svg { width: 60%; height: 60%; }
.m-divisions li b { font-size: 12.5px; }
.m-soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.m-soon-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.m-soon-list svg { width: 18px; height: 18px; flex: none; }
.m-pl-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px; border-radius: 18px;
  background: linear-gradient(120deg, var(--ba, var(--sheet-3)), var(--bb, var(--sheet-2))); box-shadow: 0 3px 0 var(--sheet-drop); }
.m-pl-head > span { min-width: 0; display: grid; gap: 2px; }
.m-pl-name { font-size: 24px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-pl-head small { font-size: 13px; }
.m-pl-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.m-pl-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--sheet-2); box-shadow: 0 3px 0 var(--sheet-drop); }
.m-pl-stat > span { grid-row: 1 / span 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--tag); }
.m-pl-stat > span svg { width: 22px; height: 22px; }
.m-pl-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.m-pl-stat em { font-style: normal; font-size: 12px; color: var(--sheet-soft); }
.m-pl-stat small { font-size: 11.5px; color: var(--gold-text, #f9d891); }
@media (max-width: 720px) { .m-week { grid-template-columns: minmax(0, 1fr); } .m-pass-tier.grand { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .m-glow, .m-streakcard.lit .m-streak-ico { animation: none; } }