/* ==========================================================================
   Intermarket - mobile-first stylesheet (stable canvas 320-430px)
   File   : css/palette-mobile-c27c96.css
   Prefix : shellc27c9-  (classes and custom properties)
   Palette: #1A1A2E base / #BAFFC9 mint / #9932CC orchid / #F8F8FF ink / #DDA0DD plum
   Voice  : compact bold headings + light body, pill buttons over squared
            cards, grouped cover zones, step-by-step rhythm, motion budget
            spent on key CTAs only.
   ========================================================================== */

:root{
  --shellc27c9-bg:#1A1A2E;
  --shellc27c9-bg-deep:#101019;
  --shellc27c9-panel:#21213E;
  --shellc27c9-panel-soft:#262649;
  --shellc27c9-panel-deep:#1D1D36;
  --shellc27c9-line:rgba(248,248,255,.15);
  --shellc27c9-line-soft:rgba(248,248,255,.09);
  --shellc27c9-line-plum:rgba(221,160,221,.42);
  --shellc27c9-ink:#F8F8FF;
  --shellc27c9-ink-dim:rgba(248,248,255,.76);
  --shellc27c9-ink-faint:rgba(248,248,255,.55);
  --shellc27c9-mint:#BAFFC9;
  --shellc27c9-mint-deep:#8CE8A8;
  --shellc27c9-mint-ink:#123522;
  --shellc27c9-orchid:#9932CC;
  --shellc27c9-orchid-bright:#B44FE4;
  --shellc27c9-plum:#DDA0DD;
  --shellc27c9-plum-soft:rgba(221,160,221,.16);
  --shellc27c9-r-card:6px;
  --shellc27c9-r-cover:10px;
  --shellc27c9-r-btn:999px;
  --shellc27c9-hd-h:100px;
  --shellc27c9-bar-h:78px;
  --shellc27c9-shadow:0 12px 34px rgba(4,4,12,.5);
  --shellc27c9-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --shellc27c9-orchid-grad:linear-gradient(135deg,#8A2BB8 0%,#B44FE4 58%,#DDA0DD 120%);
  --shellc27c9-mint-grad:linear-gradient(135deg,#8CE8A8 0%,#BAFFC9 100%);
}

/* ---------- base ------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

html,body{margin:0;padding:0}

body{
  background:
    radial-gradient(620px 320px at 12% -4%,rgba(153,50,204,.20),transparent 62%),
    radial-gradient(520px 300px at 92% 8%,rgba(186,255,201,.07),transparent 60%),
    var(--shellc27c9-bg-deep);
  color:var(--shellc27c9-ink);
  font-family:var(--shellc27c9-font);
  font-size:14px;
  line-height:1.62;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
}

img{display:block;max-width:100%;border:0}

button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

a{color:var(--shellc27c9-mint);text-decoration:none}

a.shellc27c9-bodylink{
  color:var(--shellc27c9-mint);
  font-weight:700;
  border-bottom:1px dashed rgba(186,255,201,.55);
  padding-bottom:1px;
}

:focus-visible{outline:2px solid var(--shellc27c9-mint);outline-offset:2px;border-radius:4px}

::selection{background:rgba(186,255,201,.32);color:#101019}

/* the phone canvas: everything lives inside a 430px column, centered on wide
   screens so desktop keeps the mobile composition */
.shellc27c9-canvas{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--shellc27c9-bg);
  box-shadow:0 0 0 1px rgba(248,248,255,.06),0 0 60px rgba(0,0,0,.55);
  overflow-x:clip;
}

@media(min-width:480px){
  .shellc27c9-canvas{
    border-left:1px solid rgba(221,160,221,.18);
    border-right:1px solid rgba(221,160,221,.18);
  }
}

.shellc27c9-main{
  padding:calc(var(--shellc27c9-hd-h) + 10px) 12px calc(var(--shellc27c9-bar-h) + 22px);
}

/* ---------- fixed asymmetric header ----------------------------------- */

.shellc27c9-hd{
  position:fixed;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:60;
  background:linear-gradient(180deg,#1E1E38 0%,#191930 100%);
  border-bottom:1px solid var(--shellc27c9-line);
  box-shadow:0 8px 22px rgba(4,4,12,.42);
}

/* first row: brand cluster pushed left, action cluster pushed right,
   deliberately offset heights for the asymmetric silhouette */
.shellc27c9-hd-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 6px;
}

.shellc27c9-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin-right:auto;
  min-width:0;
}

/* the logo plate: tilted outlined plate gives the brand block its own axis */
.shellc27c9-brand-plate{
  flex:0 0 auto;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border:1.5px solid var(--shellc27c9-mint);
  border-radius:13px 7px 13px 7px;
  background:linear-gradient(150deg,rgba(186,255,201,.16),rgba(153,50,204,.28));
  transform:rotate(-4deg);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.shellc27c9-brand-plate img{
  width:32px;height:32px;
  object-fit:contain;
  transform:rotate(4deg);
}

.shellc27c9-brand-name{
  font-size:19px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.1;
  text-transform:uppercase;
}

.shellc27c9-brand-name span{color:var(--shellc27c9-mint)}

/* action cluster: register sits taller than login (staggered CTAs) */
.shellc27c9-hd-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.shellc27c9-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  border-radius:var(--shellc27c9-r-btn);
  font-weight:800;
  letter-spacing:.3px;
  white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.shellc27c9-btn-main{
  padding:10px 18px;
  font-size:13px;
  color:#FFFFFF;
  background:var(--shellc27c9-orchid-grad);
  border:1px solid rgba(248,248,255,.28);
  box-shadow:0 5px 16px rgba(153,50,204,.45);
}

.shellc27c9-btn-main:active{
  transform:translateY(1px) scale(.97);
  box-shadow:0 2px 8px rgba(153,50,204,.4);
}

.shellc27c9-btn-line{
  padding:9px 13px;
  font-size:12px;
  color:var(--shellc27c9-mint);
  border:1.5px solid rgba(186,255,201,.7);
  background:rgba(186,255,201,.06);
}

.shellc27c9-btn-line:active{transform:scale(.96);background:rgba(186,255,201,.14)}

/* second row: expandable navigation rail */
.shellc27c9-rail{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:44px;
  padding:2px 12px 6px;
  background:rgba(16,16,25,.35);
}

.shellc27c9-burger{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:0 12px 0 10px;
  width:100%;
  border:1px solid var(--shellc27c9-line);
  border-radius:12px;
  background:rgba(248,248,255,.04);
  color:var(--shellc27c9-ink);
  font-weight:700;
  font-size:13px;
}

.shellc27c9-burger:active{background:rgba(186,255,201,.12)}

.shellc27c9-burger-ico{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:20px;height:16px;
}

.shellc27c9-burger-ico i{
  display:block;height:2px;border-radius:2px;
  background:var(--shellc27c9-mint);
  transition:transform .2s ease,opacity .2s ease,width .2s ease;
}

.shellc27c9-burger-ico i:nth-child(2){width:70%;background:var(--shellc27c9-plum)}
.shellc27c9-burger-ico i:nth-child(3){width:45%}

.shellc27c9-burger[aria-expanded="true"] .shellc27c9-burger-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.shellc27c9-burger[aria-expanded="true"] .shellc27c9-burger-ico i:nth-child(2){opacity:0}
.shellc27c9-burger[aria-expanded="true"] .shellc27c9-burger-ico i:nth-child(3){width:100%;transform:translateY(-6px) rotate(-45deg)}

.shellc27c9-rail-tag{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  color:var(--shellc27c9-ink-faint);
  letter-spacing:.4px;
}

.shellc27c9-rail-tag b{color:var(--shellc27c9-plum);font-weight:800}

/* expandable menu panel drops from the header */
.shellc27c9-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  background:rgba(14,14,24,.97);
  border-top:0 solid transparent;
}

.shellc27c9-menu.shellc27c9-open{
  max-height:460px;
  overflow-y:auto;
  border-top:1px solid var(--shellc27c9-line);
  box-shadow:0 18px 30px rgba(4,4,12,.5);
}

.shellc27c9-menugrp{padding:8px 12px 2px}

.shellc27c9-menugrp + .shellc27c9-menugrp{border-top:1px dashed var(--shellc27c9-line-soft)}

.shellc27c9-menugrp-t{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--shellc27c9-plum);
  padding:4px 2px 6px;
}

.shellc27c9-menulk{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:8px 10px;
  border-radius:9px;
  color:var(--shellc27c9-ink-dim);
  font-size:13.5px;
  font-weight:600;
}

.shellc27c9-menulk:active{background:rgba(186,255,201,.1);color:var(--shellc27c9-mint)}

.shellc27c9-menulk em{
  font-style:normal;
  font-size:10px;
  font-weight:800;
  color:var(--shellc27c9-mint-ink);
  background:var(--shellc27c9-mint);
  border-radius:5px;
  padding:1px 6px;
  margin-left:auto;
}

.shellc27c9-menulk .shellc27c9-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--shellc27c9-line-plum);
  flex:0 0 auto;
}

.shellc27c9-menulk.shellc27c9-here{color:var(--shellc27c9-mint);background:rgba(186,255,201,.08)}
.shellc27c9-menulk.shellc27c9-here .shellc27c9-dot{background:var(--shellc27c9-mint)}

/* ---------- hero carousel ---------------------------------------------- */

.shellc27c9-hero{
  position:relative;
  margin:2px 0 14px;
  border-radius:var(--shellc27c9-r-cover);
  overflow:hidden;
  border:1px solid var(--shellc27c9-line);
  background:var(--shellc27c9-panel-deep);
}

.shellc27c9-slides{position:relative;height:184px}

.shellc27c9-slide{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  text-align:left;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .5s ease,transform .6s ease;
  pointer-events:none;
}

.shellc27c9-slide.shellc27c9-on{opacity:1;transform:scale(1);pointer-events:auto}

.shellc27c9-slide-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

.shellc27c9-slide-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:34px 12px 10px;
  background:linear-gradient(180deg,rgba(16,16,25,0) 0%,rgba(16,16,25,.82) 46%,rgba(16,16,25,.95) 100%);
}

.shellc27c9-slide-kick{
  align-self:flex-start;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--shellc27c9-mint-ink);
  background:var(--shellc27c9-mint);
  border-radius:5px;
  padding:2px 8px;
}

.shellc27c9-slide-t{
  font-size:16.5px;
  font-weight:800;
  line-height:1.25;
  color:#FFFFFF;
}

.shellc27c9-slide-s{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--shellc27c9-ink-dim);
}

.shellc27c9-slide-go{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:800;
  color:#FFFFFF;
  background:var(--shellc27c9-orchid);
  border:1px solid rgba(248,248,255,.3);
  border-radius:var(--shellc27c9-r-btn);
  padding:3px 11px;
}

.shellc27c9-slide:active .shellc27c9-slide-go{background:var(--shellc27c9-orchid-bright)}

.shellc27c9-dots{
  position:absolute;
  right:10px;bottom:8px;
  display:flex;
  gap:6px;
  z-index:3;
}

.shellc27c9-dot{
  width:26px;height:22px;
  display:grid;
  place-items:center;
}

.shellc27c9-dot i{
  display:block;
  width:7px;height:7px;
  border-radius:999px;
  background:rgba(248,248,255,.4);
  transition:width .22s ease,background .22s ease;
}

.shellc27c9-dot.shellc27c9-on i{width:18px;background:var(--shellc27c9-mint)}

/* ---------- intro block ------------------------------------------------ */

.shellc27c9-intro{margin:2px 0 16px}

.shellc27c9-h1{
  margin:0 0 8px;
  font-size:23px;
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.2px;
}

.shellc27c9-h1 b{color:var(--shellc27c9-mint);font-weight:800}

.shellc27c9-lead{margin:0 0 10px;color:var(--shellc27c9-ink-dim)}
.shellc27c9-lead + .shellc27c9-lead{margin-top:-4px}

/* quick-spec strip: label/value rows reading like a spec sheet */
.shellc27c9-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:12px 0 0;
}

.shellc27c9-fact{
  border:1px solid var(--shellc27c9-line);
  border-left:3px solid var(--shellc27c9-plum);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel-deep);
  padding:7px 9px;
}

.shellc27c9-fact-k{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--shellc27c9-ink-faint);
}

.shellc27c9-fact-v{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--shellc27c9-mint);
  line-height:1.35;
}

/* ---------- generic section scaffolding -------------------------------- */

.shellc27c9-sec{margin:20px 0}

.shellc27c9-h2{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 8px;
  font-size:18px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.1px;
}

.shellc27c9-h2::before{
  content:"";
  flex:0 0 auto;
  width:14px;height:14px;
  align-self:center;
  border-radius:4px 4px 4px 0;
  background:var(--shellc27c9-orchid-grad);
  transform:rotate(8deg);
}

.shellc27c9-sec-p{margin:0 0 8px;color:var(--shellc27c9-ink-dim)}

.shellc27c9-note{
  font-size:11.5px;
  color:var(--shellc27c9-ink-faint);
}

/* ---------- step rail (progressive rhythm) ----------------------------- */

.shellc27c9-steps{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0 0;
}

.shellc27c9-step{
  position:relative;
  display:flex;
  gap:11px;
  align-items:flex-start;
  border:1px solid var(--shellc27c9-line);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel-deep);
  padding:9px 11px;
}

.shellc27c9-step-no{
  flex:0 0 auto;
  width:34px;height:34px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  color:var(--shellc27c9-mint-ink);
  background:var(--shellc27c9-mint-grad);
  border-radius:10px 10px 10px 2px;
}

.shellc27c9-step:nth-child(even) .shellc27c9-step-no{
  background:var(--shellc27c9-orchid-grad);
  color:#FFFFFF;
  border-radius:10px 10px 2px 10px;
}

.shellc27c9-step-t{font-size:13.5px;font-weight:800;margin:1px 0 2px}

.shellc27c9-step-p{margin:0;font-size:12px;color:var(--shellc27c9-ink-dim);line-height:1.5}

/* ---------- game zones: grouped cover cards ---------------------------- */

.shellc27c9-zone{margin:18px 0}

.shellc27c9-zone-cover{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  margin-bottom:9px;
  border:1px solid var(--shellc27c9-line);
  border-radius:var(--shellc27c9-r-cover);
  background:
    linear-gradient(120deg,var(--shellc27c9-zacc,rgba(186,255,201,.2)) 0%,transparent 58%),
    var(--shellc27c9-panel-deep);
  overflow:hidden;
}

.shellc27c9-zone-cover::after{
  content:"";
  position:absolute;
  top:-12px;right:-8px;
  width:74px;height:74px;
  border:9px solid var(--shellc27c9-zacc,rgba(186,255,201,.2));
  border-radius:50%;
  opacity:.5;
}

.shellc27c9-z1{--shellc27c9-zacc:rgba(186,255,201,.22)}
.shellc27c9-z2{--shellc27c9-zacc:rgba(180,79,228,.30)}
.shellc27c9-z3{--shellc27c9-zacc:rgba(221,160,221,.26)}
.shellc27c9-z4{--shellc27c9-zacc:rgba(153,50,204,.32)}
.shellc27c9-z5{--shellc27c9-zacc:rgba(140,232,168,.24)}

.shellc27c9-zone-idx{
  flex:0 0 auto;
  font-size:20px;
  font-weight:800;
  line-height:1;
  color:var(--shellc27c9-mint);
  opacity:.9;
}

.shellc27c9-zone-t{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.shellc27c9-zone-n{
  flex:0 0 auto;
  margin-left:auto;
  font-size:10.5px;
  font-weight:800;
  color:var(--shellc27c9-ink);
  border:1px solid var(--shellc27c9-line-plum);
  border-radius:999px;
  padding:2px 9px;
  background:rgba(14,14,24,.55);
}

.shellc27c9-zone-note{
  flex-basis:100%;
  margin:0;
  font-size:11.5px;
  color:var(--shellc27c9-ink-faint);
  line-height:1.45;
}

/* compact game grid: 4 columns on 320px, 5 columns from 400px up */
.shellc27c9-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

@media(min-width:400px){
  .shellc27c9-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
}

.shellc27c9-game{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:44px;
  padding:5px;
  border:1px solid var(--shellc27c9-line-soft);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel);
  text-align:center;
  overflow:hidden;
}

.shellc27c9-game:active{
  border-color:rgba(186,255,201,.6);
  background:var(--shellc27c9-panel-soft);
}

.shellc27c9-game-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
  background:var(--shellc27c9-panel-deep);
}

.shellc27c9-game-t{
  font-size:10.5px;
  line-height:1.3;
  font-weight:700;
  color:var(--shellc27c9-ink-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  overflow-wrap:anywhere;
}

.shellc27c9-game:active .shellc27c9-game-t{color:var(--shellc27c9-mint)}

/* ---------- CTA band (staggered primary/secondary buttons) -------------- */

.shellc27c9-cta{
  margin:20px 0;
  padding:15px 13px 14px;
  border-radius:14px;
  border:1px solid rgba(221,160,221,.4);
  background:
    radial-gradient(240px 120px at 88% -18%,rgba(186,255,201,.16),transparent 70%),
    linear-gradient(140deg,rgba(153,50,204,.34),rgba(26,26,46,.9) 72%);
}

.shellc27c9-cta-t{
  margin:0 0 4px;
  font-size:17px;
  font-weight:800;
  color:#FFFFFF;
}

.shellc27c9-cta-p{margin:0 0 11px;font-size:12.5px;color:var(--shellc27c9-ink-dim)}

.shellc27c9-cta-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.shellc27c9-cta-big{
  align-self:stretch;
  min-height:50px;
  font-size:15px;
  color:#FFFFFF;
  background:var(--shellc27c9-orchid-grad);
  border:1px solid rgba(248,248,255,.3);
  border-radius:var(--shellc27c9-r-btn);
  box-shadow:0 6px 18px rgba(153,50,204,.5);
  transition:transform .16s ease,box-shadow .16s ease;
}

.shellc27c9-cta-big:active{transform:translateY(2px) scale(.985);box-shadow:0 2px 8px rgba(153,50,204,.4)}

.shellc27c9-cta-small{
  align-self:flex-start;
  min-height:42px;
  padding:8px 18px;
  font-size:12.5px;
  margin-left:26px;
  color:var(--shellc27c9-mint);
  border:1.5px solid rgba(186,255,201,.65);
  border-radius:var(--shellc27c9-r-btn);
  background:rgba(16,16,25,.4);
}

.shellc27c9-cta-small:active{transform:scale(.96)}

/* ---------- category highlights (numbered pick rows) -------------------- */

.shellc27c9-pick{display:flex;flex-direction:column;gap:8px;margin-top:10px}

.shellc27c9-pickrow{
  position:relative;
  display:flex;
  gap:11px;
  padding:9px 10px 9px 8px;
  border:1px solid var(--shellc27c9-line);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel-deep);
}

.shellc27c9-pickrow::before{
  content:attr(data-idx);
  flex:0 0 auto;
  align-self:flex-start;
  font-size:21px;
  font-weight:800;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--shellc27c9-plum);
  padding-top:3px;
  min-width:26px;
}

.shellc27c9-pickrow:nth-child(odd)::before{-webkit-text-stroke:1px var(--shellc27c9-mint-deep)}

.shellc27c9-pickbody{min-width:0}

.shellc27c9-pickt{margin:0 0 2px;font-size:13.5px;font-weight:800;color:var(--shellc27c9-ink)}

.shellc27c9-pickp{margin:0;font-size:12px;color:var(--shellc27c9-ink-dim);line-height:1.52;overflow-wrap:anywhere}

/* ---------- testimonials ------------------------------------------------ */

.shellc27c9-say{display:flex;flex-direction:column;gap:9px;margin-top:10px}

.shellc27c9-quote{
  border:1px solid var(--shellc27c9-line);
  border-left:4px solid var(--shellc27c9-mint);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel-deep);
  padding:10px 11px;
}

.shellc27c9-quote:nth-child(even){
  border-left-color:var(--shellc27c9-orchid-bright);
  margin-left:14px;
}

.shellc27c9-quote:nth-child(3){border-left-color:var(--shellc27c9-plum)}

.shellc27c9-quote-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}

.shellc27c9-ava{
  flex:0 0 auto;
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:11.5px;font-weight:800;
  color:var(--shellc27c9-mint-ink);
  background:var(--shellc27c9-mint-grad);
}

.shellc27c9-quote:nth-child(even) .shellc27c9-ava{background:var(--shellc27c9-orchid-grad);color:#fff}

.shellc27c9-quote-meta{min-width:0}

.shellc27c9-quote-name{display:block;font-size:12.5px;font-weight:800;line-height:1.2}

.shellc27c9-quote-rate{
  display:inline-flex;
  gap:2px;
  align-items:center;
  color:var(--shellc27c9-plum);
  font-size:10px;
  letter-spacing:1.5px;
}

.shellc27c9-quote-txt{margin:0;font-size:12.5px;color:var(--shellc27c9-ink-dim);line-height:1.55}

/* ---------- RTP panel ---------------------------------------------------- */

.shellc27c9-rtp{
  border:1px solid var(--shellc27c9-line);
  border-radius:12px;
  background:var(--shellc27c9-panel-deep);
  padding:12px;
  margin-top:10px;
}

.shellc27c9-rtp-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px dashed var(--shellc27c9-line);
}

.shellc27c9-rtp-stat{
  flex:0 0 auto;
  width:92px;height:92px;
  display:grid;
  place-items:center;
  border:2px solid var(--shellc27c9-mint);
  border-radius:18px 18px 18px 4px;
  background:rgba(186,255,201,.07);
  transform:rotate(-3deg);
}

.shellc27c9-rtp-num{
  font-size:23px;
  font-weight:800;
  line-height:1;
  color:var(--shellc27c9-mint);
}

.shellc27c9-rtp-cap{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--shellc27c9-ink-faint);margin-top:4px}

.shellc27c9-rtp-lead{margin:0;font-size:12.5px;color:var(--shellc27c9-ink-dim)}

.shellc27c9-rtp-rows{display:flex;flex-direction:column;gap:7px}

.shellc27c9-rtp-row{display:flex;gap:9px;align-items:flex-start}

.shellc27c9-rtp-chip{
  flex:0 0 auto;
  min-width:30px;
  text-align:center;
  font-size:10.5px;
  font-weight:800;
  color:#fff;
  background:var(--shellc27c9-orchid);
  border-radius:6px;
  padding:2px 5px;
  margin-top:2px;
}

.shellc27c9-rtp-row p{margin:0;font-size:12.5px;color:var(--shellc27c9-ink-dim);line-height:1.5}

.shellc27c9-rtp-note{
  margin:11px 0 0;
  padding:9px 11px;
  border:1px solid var(--shellc27c9-line-plum);
  border-left-width:4px;
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-plum-soft);
  font-size:11.5px;
  color:var(--shellc27c9-ink-dim);
}

/* ---------- achievement track ------------------------------------------- */

.shellc27c9-track{
  position:relative;
  margin-top:12px;
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.shellc27c9-track::before{
  content:"";
  position:absolute;
  left:8px;top:6px;bottom:8px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--shellc27c9-mint),var(--shellc27c9-orchid) 70%,var(--shellc27c9-plum));
}

.shellc27c9-mile{position:relative}

.shellc27c9-mile::before{
  content:"";
  position:absolute;
  left:-20px;top:5px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--shellc27c9-bg);
  border:3px solid var(--shellc27c9-mint);
}

.shellc27c9-mile:nth-child(even)::before{border-color:var(--shellc27c9-orchid-bright)}
.shellc27c9-mile:last-child::before{border-color:var(--shellc27c9-plum);width:14px;height:14px;left:-21px}

.shellc27c9-mile-t{margin:0 0 2px;font-size:13.5px;font-weight:800}

.shellc27c9-mile-t span{color:var(--shellc27c9-mint)}

.shellc27c9-mile-p{margin:0;font-size:12px;color:var(--shellc27c9-ink-dim);line-height:1.5}

/* ---------- glossary ----------------------------------------------------- */

.shellc27c9-gloss{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:10px;
}

.shellc27c9-term{
  border:1px solid var(--shellc27c9-line);
  border-radius:var(--shellc27c9-r-card);
  background:var(--shellc27c9-panel-deep);
  padding:8px 10px;
}

.shellc27c9-term-t{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--shellc27c9-mint);
  border:1px solid rgba(186,255,201,.4);
  border-radius:6px;
  padding:1px 8px;
  margin-bottom:4px;
}

.shellc27c9-term-p{margin:0;font-size:12px;color:var(--shellc27c9-ink-dim);line-height:1.5}

/* ---------- quick ledger (label/value rail after the game zones) ---------- */

.shellc27c9-ledger{
  border:1px solid var(--shellc27c9-line);
  border-radius:12px;
  background:var(--shellc27c9-panel-deep);
  padding:4px 12px;
  margin-top:10px;
}

.shellc27c9-ledger-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  margin:0;
}

.shellc27c9-ledger-row + .shellc27c9-ledger-row{border-top:1px dashed var(--shellc27c9-line-soft)}

.shellc27c9-ledger-row b{
  flex:0 0 86px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--shellc27c9-plum);
}

.shellc27c9-ledger-row span{
  font-size:12.5px;
  font-weight:600;
  color:var(--shellc27c9-ink-dim);
  line-height:1.45;
}

/* ---------- extended footer (two-column directory) ----------------------- */

.shellc27c9-ext{
  margin:22px -12px 0;
  padding:16px 14px 14px;
  border-top:1px solid var(--shellc27c9-line);
  background:
    radial-gradient(300px 130px at 8% 0%,rgba(153,50,204,.18),transparent 70%),
    var(--shellc27c9-panel-deep);
}

.shellc27c9-ext-brand{margin:0 0 12px}

.shellc27c9-ext-brand-t{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:800;margin:0 0 5px;
}

.shellc27c9-ext-brand-t img{width:22px;height:22px;object-fit:contain}

.shellc27c9-ext-brand p{margin:0;font-size:11.5px;color:var(--shellc27c9-ink-faint);line-height:1.55}

.shellc27c9-ext-t{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--shellc27c9-plum);
  margin:14px 0 8px;
  padding-left:9px;
  border-left:3px solid var(--shellc27c9-orchid);
}

.shellc27c9-dir{
  column-count:2;
  column-gap:10px;
}

.shellc27c9-dirlk{
  display:flex;
  align-items:center;
  gap:7px;
  break-inside:avoid;
  min-height:40px;
  padding:6px 8px;
  margin-bottom:5px;
  border:1px solid var(--shellc27c9-line-soft);
  border-radius:9px;
  background:rgba(248,248,255,.03);
  color:var(--shellc27c9-ink-dim);
  font-size:11.5px;
  font-weight:700;
  line-height:1.25;
}

.shellc27c9-dirlk svg{flex:0 0 auto;color:var(--shellc27c9-mint)}

.shellc27c9-dirlk:active{background:rgba(186,255,201,.12);color:var(--shellc27c9-mint)}

.shellc27c9-promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.shellc27c9-promo{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:8px 10px;
  border:1px solid var(--shellc27c9-line-plum);
  border-radius:11px;
  background:linear-gradient(140deg,rgba(153,50,204,.24),rgba(16,16,25,.5));
  color:var(--shellc27c9-ink);
  font-size:11.5px;
  font-weight:700;
  text-align:left;
  line-height:1.3;
}

.shellc27c9-promo svg{flex:0 0 auto;color:var(--shellc27c9-mint)}

.shellc27c9-promo:active{transform:scale(.97);border-color:var(--shellc27c9-mint)}

.shellc27c9-promo i{
  font-style:normal;
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--shellc27c9-plum);
}

.shellc27c9-ext-note{
  margin:14px 0 0;
  padding:9px 11px;
  border:1px dashed rgba(221,160,221,.5);
  border-radius:var(--shellc27c9-r-card);
  font-size:10.5px;
  color:var(--shellc27c9-ink-faint);
  line-height:1.55;
}

/* ---------- common footer ------------------------------------------------ */

.shellc27c9-foot{
  padding:14px 14px calc(var(--shellc27c9-bar-h) + 18px);
  text-align:center;
  font-size:11px;
  color:var(--shellc27c9-ink-faint);
}

.shellc27c9-foot b{color:var(--shellc27c9-ink-dim);font-weight:700}

/* ---------- outlined bottom function bar --------------------------------- */

.shellc27c9-barnav{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:60;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));
  background:rgba(15,15,24,.96);
  border-top:1px solid var(--shellc27c9-line-plum);
  backdrop-filter:blur(8px);
}

.shellc27c9-baritem{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:58px;
  padding:4px 2px 6px;
  border:1px solid var(--shellc27c9-line);
  border-radius:12px;
  color:var(--shellc27c9-ink-faint);
  background:rgba(248,248,255,.03);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}

.shellc27c9-baritem svg{transition:transform .2s ease}

.shellc27c9-baritem-t{font-size:9.5px;font-weight:800;letter-spacing:.2px;line-height:1.1;text-align:center}

.shellc27c9-baritem:active{background:rgba(186,255,201,.1)}

.shellc27c9-baritem:active svg{transform:translateY(-2px) scale(1.08)}

/* active role: full color switch + lifted icon + mint dot indicator */
.shellc27c9-baritem.shellc27c9-here{
  color:var(--shellc27c9-mint);
  border-color:rgba(186,255,201,.75);
  background:rgba(186,255,201,.10);
}

.shellc27c9-baritem.shellc27c9-here svg{transform:translateY(-2px)}

.shellc27c9-baritem.shellc27c9-here::after{
  content:"";
  position:absolute;
  bottom:3px;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--shellc27c9-mint);
}

/* promo roles carry an orchid tint to read differently from real routes */
.shellc27c9-baritem--promo{border-color:rgba(180,79,228,.55)}

.shellc27c9-baritem--promo .shellc27c9-baritem-t{color:var(--shellc27c9-plum)}

/* ---------- icon sizing --------------------------------------------------- */

.shellc27c9-ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.shellc27c9-ico-s{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- motion & misc ------------------------------------------------ */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

.shellc27c9-skip{
  position:absolute;
  left:-999px;top:0;
}

.shellc27c9-skip:focus{
  left:8px;top:8px;
  z-index:99;
  background:var(--shellc27c9-mint);
  color:var(--shellc27c9-mint-ink);
  padding:8px 12px;
  border-radius:8px;
  font-weight:800;
}

/* ---------- help-page utilities ----------------------------------------- */
.shellc27c9-help-lead{
  margin:0 0 14px;
  padding:12px 13px;
  border-left:4px solid var(--shellc27c9-mint);
  border-radius:4px 12px 12px 4px;
  background:linear-gradient(100deg,rgba(186,255,201,.11),rgba(153,50,204,.12));
  color:var(--shellc27c9-ink-dim);
}

.shellc27c9-help-kicker{
  display:inline-block;
  margin:0 0 7px;
  padding:3px 8px;
  border-radius:5px;
  background:var(--shellc27c9-plum-soft);
  color:var(--shellc27c9-plum);
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.shellc27c9-checklist{display:flex;flex-direction:column;gap:7px;margin:10px 0 0;padding:0;list-style:none}
.shellc27c9-checkitem{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:9px;
  align-items:start;
  padding:9px 10px;
  border:1px solid var(--shellc27c9-line);
  border-radius:10px 4px 10px 4px;
  background:var(--shellc27c9-panel-deep);
}
.shellc27c9-checkmark{
  display:grid;place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--shellc27c9-mint-grad);
  color:var(--shellc27c9-mint-ink);
  font-size:12px;font-weight:900;
}
.shellc27c9-checktitle{display:block;margin:1px 0 2px;font-size:13px;font-weight:800}
.shellc27c9-checktext{margin:0;color:var(--shellc27c9-ink-dim);font-size:12px;line-height:1.5}

.shellc27c9-device-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.shellc27c9-device{
  min-width:0;
  padding:10px;
  border-top:3px solid var(--shellc27c9-orchid-bright);
  border-radius:4px 4px 11px 11px;
  background:var(--shellc27c9-panel-deep);
}
.shellc27c9-device:nth-child(2n){border-top-color:var(--shellc27c9-mint)}
.shellc27c9-device h3{margin:0 0 4px;font-size:13px}
.shellc27c9-device p{margin:0;color:var(--shellc27c9-ink-dim);font-size:11.5px;line-height:1.48}

.shellc27c9-compare{margin-top:10px;border:1px solid var(--shellc27c9-line);border-radius:11px;overflow:hidden;background:var(--shellc27c9-panel-deep)}
.shellc27c9-compare-row{display:grid;grid-template-columns:82px 1fr;gap:9px;padding:9px 10px;font-size:11.5px;line-height:1.48}
.shellc27c9-compare-row + .shellc27c9-compare-row{border-top:1px dashed var(--shellc27c9-line-soft)}
.shellc27c9-compare-row b{color:var(--shellc27c9-plum);font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.shellc27c9-compare-row span{color:var(--shellc27c9-ink-dim)}

.shellc27c9-help-promo{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0}
.shellc27c9-help-promo .shellc27c9-btn{min-height:44px;padding:8px 13px;font-size:11.5px}
.shellc27c9-help-promo .shellc27c9-btn-main{flex:1 1 150px}
.shellc27c9-help-promo .shellc27c9-btn-line{flex:0 1 auto}

.shellc27c9-answer-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.shellc27c9-answer{padding:9px 11px 10px;border-right:3px solid var(--shellc27c9-plum);background:rgba(248,248,255,.035);border-radius:9px 3px 3px 9px}
.shellc27c9-answer:nth-child(2n){border-right-color:var(--shellc27c9-mint)}
.shellc27c9-answer h3{margin:0 0 3px;font-size:13px;line-height:1.35}
.shellc27c9-answer p{margin:0;color:var(--shellc27c9-ink-dim);font-size:12px;line-height:1.5}

.shellc27c9-wallet-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.shellc27c9-wallet-step{position:relative;min-height:98px;padding:9px 8px;border:1px solid var(--shellc27c9-line);border-radius:12px 4px 12px 4px;background:var(--shellc27c9-panel-deep)}
.shellc27c9-wallet-step strong{display:block;color:var(--shellc27c9-mint);font-size:12px;margin-bottom:4px}
.shellc27c9-wallet-step p{margin:0;color:var(--shellc27c9-ink-dim);font-size:11px;line-height:1.42}
.shellc27c9-wallet-step em{display:block;margin-bottom:5px;color:var(--shellc27c9-plum);font-style:normal;font-size:10px;font-weight:800}

.shellc27c9-warning{margin:11px 0;padding:10px 11px;border:1px dashed rgba(221,160,221,.65);border-radius:5px 12px 5px 12px;color:var(--shellc27c9-ink-dim);font-size:11.5px;line-height:1.52;background:var(--shellc27c9-plum-soft)}
.shellc27c9-two-col{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.shellc27c9-mini-panel{padding:10px;border:1px solid var(--shellc27c9-line);border-radius:10px;background:var(--shellc27c9-panel-deep)}
.shellc27c9-mini-panel h3{margin:0 0 5px;font-size:13px}
.shellc27c9-mini-panel ul{margin:0;padding-left:16px;color:var(--shellc27c9-ink-dim);font-size:11.5px;line-height:1.52}

@media(max-width:350px){
  .shellc27c9-wallet-flow{grid-template-columns:1fr}
  .shellc27c9-wallet-step{min-height:0}
  .shellc27c9-compare-row{grid-template-columns:70px 1fr}
}