/* EV — handheld field-guide terminal. Tokens from the pixel mockups (mockups/pixel/). */
:root{
  --red:#0052FF; --red-dk:#003BC2; --red-lt:#3D7BFF; --live:#E0463C; /* shell = Coinbase blue ("red" names kept from the handheld mockups) */
  --navy:#1B1F3B; --navy-2:#2A3160; --ink:#1B1F3B;
  --cream:#F8F4E3; --cream-2:#EFE8CF; --paper:#FFFDF5;
  --yellow:#F2C94C; --yellow-dk:#C99A1C;
  --violet:#7B5CFF; --blue:#8DB7F5; --blue-dk:#3F6FD1;
  --green:#3BB54A; --green-dk:#23863A; --hp-y:#F2C94C; --hp-r:#E0463C;
  --sky:#0A0F2C;
  --px:"Pixelify Sans", ui-monospace, monospace;
  --caps:"Silkscreen", "Pixelify Sans", monospace;
  --r:10px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--sky); color:var(--ink);
  font-family:var(--px); font-size:17px; line-height:1.35;
  -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img{image-rendering:auto}
.pix{image-rendering:pixelated}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- device shell ---------- */
.device{
  max-width:1280px; margin:20px auto; padding:14px 16px 12px;
  background:var(--red); border-radius:26px;
  box-shadow:inset 0 -8px 0 var(--red-dk), inset 0 4px 0 var(--red-lt), 0 10px 0 rgba(0,0,0,.25);
}
.shell-top{display:flex; align-items:center; gap:18px; padding:2px 8px 12px}
.brand img{display:block; height:44px; width:auto}
.menu{display:flex; gap:6px; margin-left:8px}
.menu a{
  font-family:var(--caps); font-size:15px; text-decoration:none; color:var(--cream);
  padding:8px 12px 7px 22px; border-radius:8px; position:relative;
}
.menu a:hover{background:var(--red-dk)}
.menu a.on{background:var(--cream); color:var(--navy); box-shadow:inset 0 -3px 0 var(--cream-2)}
.menu a.on::before{content:"▶"; position:absolute; left:7px; top:8px; font-size:11px; animation:blink 1s steps(2) infinite}
.shell-label{margin-left:auto; font-family:var(--caps); color:#BFD3FF; font-size:14px; letter-spacing:.04em; display:flex; align-items:center; gap:8px}
.shell-label img{width:26px; height:26px; image-rendering:pixelated}

.screen{
  background:var(--navy); border-radius:18px; padding:10px;
  min-height:620px; outline:none;
}
.shell-bottom{display:flex; gap:16px; align-items:center; padding:12px 8px 2px; color:var(--cream); font-size:13px}
.shell-bottom b{font-family:var(--caps); font-weight:400}
.legal{opacity:.8; font-size:12px; line-height:1.3}
.tabbar{display:none}

/* ---------- building blocks ---------- */
.panel{background:var(--cream); border-radius:var(--r); border:4px solid var(--navy); box-shadow:inset 0 -4px 0 var(--cream-2)}
.box{background:var(--paper); border:3px solid var(--navy); border-radius:8px}
.hd{
  font-family:var(--caps); font-size:clamp(18px,2.1vw,26px); line-height:1; margin:0;
  background:var(--blue); color:var(--navy); padding:10px 14px 8px; border-radius:6px;
  border:3px solid var(--navy); box-shadow:inset 0 -4px 0 rgba(27,31,59,.18);
}
.hd.navy{background:var(--navy); color:var(--cream)}
.cap{font-family:var(--caps); font-size:12px; letter-spacing:.03em; color:var(--navy-2)}
.big{font-family:var(--px); font-weight:700; line-height:.95; letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:#5a5f7d}
.pill{display:inline-block; font-family:var(--caps); font-size:12px; padding:3px 7px 2px; border-radius:5px; border:2px solid var(--navy); background:var(--yellow)}
.pill.red{background:var(--live); color:#fff}
.pill.navy{background:var(--navy); color:var(--cream)}
.pill.violet{background:var(--violet); color:#fff}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
  font-family:var(--caps); font-size:16px; padding:12px 18px 10px; border-radius:8px;
  background:var(--yellow); border:3px solid var(--navy); box-shadow:inset 0 -4px 0 var(--yellow-dk);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px); box-shadow:inset 0 -2px 0 var(--yellow-dk)}
.btn.ghost{background:var(--paper); box-shadow:inset 0 -4px 0 var(--cream-2)}
.cursor{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* HP-style bar */
.hp{display:flex; align-items:center; gap:6px}
.hp-bar{
  flex:1; height:14px; border:3px solid var(--navy); border-radius:5px; background:#DDE3D5; overflow:hidden; min-width:60px;
}
.hp-bar i{
  display:block; height:100%; background:
   repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.18) 10px 12px), var(--green);
  transition:width .6s steps(12);
}
.hp-bar.y i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.18) 10px 12px), var(--hp-y)}
.hp-bar.r i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.18) 10px 12px), var(--hp-r)}
.hp-bar.v i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.18) 10px 12px), var(--violet)}

/* dialogue box */
.dialog{
  position:relative; display:flex; gap:14px; align-items:center;
  background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:12px 40px 12px 12px;
  box-shadow:inset 0 0 0 3px var(--cream-2);
}
.dialog .portrait{width:78px; height:78px; flex:none; border-radius:6px; border:3px solid var(--navy); background:var(--blue); object-fit:cover}
.dialog p{margin:0; font-size:clamp(17px,1.7vw,22px); line-height:1.35}
.dialog::after{content:"▼"; position:absolute; right:14px; bottom:10px; font-size:14px; animation:blink 1s steps(2) infinite}

/* search */
.search{position:relative; display:flex; align-items:center; gap:10px; background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:4px 6px 4px 14px; box-shadow:0 0 0 4px var(--red)}
.search .ico{font-family:var(--caps); font-size:18px}
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--caps);
  font-size:15px; padding:12px 0 10px; color:var(--navy); text-transform:uppercase;
}
.search input::placeholder{color:#8a8ea8}
.search .btn{padding:9px 14px 7px; font-size:14px}
.suggest{position:absolute; left:-4px; right:-4px; top:calc(100% + 6px); z-index:20; background:var(--paper); border:4px solid var(--navy); border-radius:10px; overflow:hidden; display:none}
.suggest.show{display:block}
.suggest button{display:flex; width:100%; justify-content:space-between; gap:10px; border:0; background:none; text-align:left; padding:10px 14px; font-family:var(--px); font-size:17px; cursor:pointer; border-bottom:2px solid var(--cream-2)}
.suggest button:hover,.suggest button.act{background:var(--yellow)}
.suggest .n{font-family:var(--caps); font-size:12px; color:var(--navy-2)}

/* slab image frame */
.slab{background:#C9CDD8; border:3px solid var(--navy); border-radius:8px; padding:6px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.slab img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.thumb{width:44px; height:58px; border-radius:5px; border:2px solid var(--navy); background:#C9CDD8; object-fit:cover; flex:none}

.loading{padding:40px; text-align:center; font-family:var(--caps); color:var(--navy)}
.err{padding:28px; text-align:center}

/* ---------- TITLE ---------- */
.title{
  position:relative; border-radius:10px; overflow:hidden; min-height:640px;
  background:#7EB7F0 url(assets/title-bg.webp) center/cover no-repeat;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows:1fr auto auto;
}
.title-left{padding:34px 0 10px 34px; display:flex; flex-direction:column; gap:16px; z-index:2}
.title-logo{width:min(520px,100%); height:auto; display:block; filter:drop-shadow(0 6px 0 rgba(27,31,59,.35))}
.ribbon{align-self:flex-start; font-family:var(--caps); color:#fff; background:var(--red); border:4px solid var(--navy); border-radius:8px; padding:9px 16px 7px; font-size:clamp(15px,1.6vw,22px); margin-top:-6px}
.press{font-family:var(--caps); font-size:clamp(18px,2vw,26px); color:var(--navy); text-decoration:none; align-self:flex-start; background:rgba(255,253,245,.85); border:3px solid var(--navy); border-radius:8px; padding:6px 14px 4px}
.title-row{display:flex; gap:16px; align-items:flex-start}
.startmenu{background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:8px; min-width:190px}
.startmenu a{display:block; font-family:var(--caps); font-size:19px; text-decoration:none; padding:7px 10px 5px 30px; border-radius:6px; position:relative}
.startmenu a:hover,.startmenu a:focus{background:var(--red); color:#fff; outline:none}
.startmenu a:hover::before,.startmenu a:focus::before{content:"▶"; position:absolute; left:9px; font-size:13px; top:9px}
.title-row .search{flex:1; max-width:420px}
.title-mascot{align-self:end; justify-self:center; width:min(560px,100%); z-index:1; margin-bottom:-6px}
.title-mascot img{width:100%; height:auto; display:block; animation:bob 2.4s steps(4) infinite; filter:drop-shadow(0 10px 0 rgba(27,31,59,.25))}
@keyframes bob{50%{transform:translateY(-8px)}}
.title .dialog{grid-column:1 / -1; margin:0 24px 12px; z-index:2}
.statusline{grid-column:1 / -1; margin:0 auto 16px; background:var(--navy); color:var(--cream); border-radius:8px; padding:9px 18px 7px; font-family:var(--caps); font-size:14px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; z-index:2}
.statusline b{color:var(--yellow); font-weight:400}

/* ---------- CHASE (two-page field guide) ---------- */
.guide{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:10px}
.page{background:var(--cream); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px; min-width:0}
.entry-head{display:flex; align-items:center; gap:10px; background:var(--navy); color:var(--cream); border-radius:8px; padding:8px 12px 6px}
.entry-head .big{font-size:clamp(20px,2.2vw,30px)}
.entry-head .pill{margin-left:auto}
.entry-body{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px}
.entry-body .slab{height:210px}
.copies{display:flex; flex-direction:column; gap:6px}
.copy{display:flex; gap:8px; align-items:center; background:var(--paper); border:3px solid var(--navy); border-radius:7px; padding:6px 8px}
.copy .crown{font-family:var(--caps); font-size:14px; width:22px; text-align:center; color:var(--yellow-dk)}
.copy .t{font-size:15px; line-height:1.15; flex:1; min-width:0}
.copy .v{font-family:var(--caps); color:var(--blue-dk); font-size:16px; white-space:nowrap}
.statbox{background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:10px 12px}
.statbox .row{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.routes{display:flex; flex-direction:column; gap:7px}
.route{
  display:grid; grid-template-columns:22px minmax(0,1.3fr) minmax(0,1fr) 78px 80px minmax(90px,1fr);
  align-items:center; gap:8px; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:9px 10px 8px;
  cursor:pointer; position:relative; text-align:left; width:100%;
}
.route:hover{background:#FFF6D6}
.route.best{background:var(--yellow)}
.route .i{font-family:var(--caps); font-size:14px}
.route .pk{font-family:var(--caps); font-size:16px; line-height:1.1}
.route .pk .sub{display:block; font-family:var(--px); font-size:13px; color:var(--navy-2); margin-top:3px}
.route .ven{font-size:14px; line-height:1.1; color:var(--navy-2)}
.route .odds,.route .cost{font-family:var(--caps); font-size:14px; white-space:nowrap}
.route .tag{position:absolute; right:-6px; top:-12px}
.routes-head{display:grid; grid-template-columns:22px minmax(0,1.3fr) minmax(0,1fr) 78px 80px minmax(90px,1fr); gap:8px; padding:0 13px}
.route.sel{outline:3px dashed var(--violet); outline-offset:2px}
.chase-top{display:flex; gap:10px; margin-bottom:10px}
.chase-top .search{flex:1}
.filters{display:flex; gap:6px; flex-wrap:wrap}
.chip{text-decoration:none; color:var(--navy); font-family:var(--caps); font-size:13px; padding:9px 11px 7px; border-radius:8px; border:3px solid var(--navy); background:var(--paper); cursor:pointer}
.chip.on{background:var(--yellow)}
.note{font-size:13px; color:#5a5f7d}
.empty{padding:30px 20px; text-align:center}
.hints{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px}

/* ---------- TAPE (encounter) ---------- */
.encounter{
  position:relative; border-radius:10px; overflow:hidden; height:380px;
  background:#9BD08A url(assets/battle-bg.webp) center/cover no-repeat;
}
.foe{position:absolute; left:calc(73% - 64px); top:9%; width:128px; height:176px; display:flex; flex-direction:column; align-items:center}
.foe .slab{width:128px; height:176px; box-shadow:0 0 0 4px rgba(255,255,255,.6), 0 0 28px 8px rgba(242,201,76,.8); animation:bob 2s steps(4) infinite}
.hero{position:absolute; left:8%; bottom:-6px; width:240px}
.hero img{width:100%; height:auto; display:block}
.foe-card{position:absolute; left:18px; top:18px; background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:10px 14px 8px; min-width:280px; max-width:46%}
.foe-card .big{font-size:20px}
.encounter .dialog{position:absolute; left:40%; right:14px; bottom:14px}
.encounter .dialog p{font-size:18px}
.tape-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:10px; margin-top:10px}
.log{display:flex; flex-direction:column; gap:6px; max-height:430px; overflow:auto; padding-right:4px}
.pull{display:grid; grid-template-columns:26px 44px minmax(0,1fr) auto 44px; align-items:center; gap:10px; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:5px 10px 5px 6px; text-decoration:none}
.pull .bang:empty{visibility:hidden}
.pull .bang{font-family:var(--caps); background:var(--yellow); border:2px solid var(--navy); border-radius:5px; text-align:center; font-size:14px; animation:blink 1s steps(2) infinite}
.pull .t{font-size:16px; line-height:1.15}
.pull .s{font-size:13px; color:var(--navy-2)}
.pull .v{font-family:var(--caps); color:var(--green-dk); font-size:16px; text-align:right}
.pull .ago{font-family:var(--caps); font-size:12px; text-align:right}
.pull.hit{background:#FFF3C8}
.pull.fresh{animation:flash .8s steps(4)}
@keyframes flash{0%,50%{background:var(--yellow)}}
.trainer{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.trainer .cell{background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:8px 10px}
.trainer .cell .big{font-size:22px}
.chaselist{display:flex; flex-direction:column; gap:5px}
.chaselist a{display:flex; justify-content:space-between; gap:8px; text-decoration:none; background:var(--paper); border:3px solid var(--navy); border-radius:7px; padding:6px 10px}
.chaselist a:hover{background:var(--yellow)}
.chaselist .v{font-family:var(--caps); font-size:14px; color:var(--blue-dk)}

/* ---------- PACKS (PC box) ---------- */
.box-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px}
.pack{background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px}
.pack-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.pack .price{font-family:var(--caps); font-size:26px}
.pack .tiers{display:flex; flex-direction:column; gap:4px}
.pack .tier{display:grid; grid-template-columns:78px 1fr 46px; gap:6px; align-items:center; font-size:13px}
.pack .tier .cap{font-size:11px}
.pack .tops{display:flex; gap:6px}
.pack .tops img{width:52px; height:70px; object-fit:cover; border:2px solid var(--navy); border-radius:5px; background:#C9CDD8}

/* ---------- LEAGUE / API ---------- */
.league{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:10px}
.league .stage{background:#2A2F63 url(assets/title-bg.webp) center/cover no-repeat; border-radius:10px; min-height:420px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.league .stage img{width:min(360px,80%); height:auto; margin-bottom:-4px}
.badges{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.badge{background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:10px; text-align:center; font-family:var(--caps); font-size:13px}
.badge img{width:56px; height:56px; display:block; margin:0 auto 6px}
ol.rules{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px}
.code{font-family:ui-monospace,Consolas,monospace; font-size:14px; background:var(--navy); color:var(--cream); border-radius:8px; padding:12px 14px; overflow:auto; white-space:pre}
.endpoint{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:9px 12px}
.endpoint code{font-family:var(--caps); font-size:14px}

/* ---------- AGENTS ---------- */
.agents{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:10px}
.term{background:var(--navy); color:var(--cream); border-radius:8px; border:3px solid #000; padding:12px 14px; height:340px; overflow:auto;
  font-family:var(--px); font-size:16px; line-height:1.4; display:flex; flex-direction:column; gap:6px}
.term .tl{white-space:pre-wrap; word-break:break-word}
.term .sys{color:#9FB6FF; font-size:13px}
.term .you b{color:var(--yellow); font-weight:400; font-family:var(--caps); font-size:13px}
.term .call{color:#BFD3FF; font-size:14px}
.term .call b{color:#7FE08A; font-weight:400; font-family:var(--caps); font-size:13px}
.term .call .fn{color:var(--yellow)}
.term .ans{color:#fff}
.term .res{display:flex; flex-direction:column; gap:3px; padding-left:14px; border-left:3px solid var(--red-lt)}
.term .res a{color:#CFE0FF; text-decoration:none; font-size:14px}
.term .res a:hover{color:var(--yellow)}
.term .err{color:#FF8A80}
.tools{display:flex; flex-direction:column; gap:6px}
.tools .endpoint .note{flex-basis:100%}
.roadmap{border-color:var(--violet)}
.press-row{display:flex; gap:10px; flex-wrap:wrap}
.press.agent{display:inline-flex; align-items:center; gap:8px; background:var(--yellow)}
.press.agent img{width:28px; height:28px; border-radius:4px}

/* ---------- responsive ---------- */
/* ---------- PACK page (details · possible pulls · market chart · recent rips) ---------- */
.packview{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr); gap:10px}
.hd .hd-r{float:right; font-family:var(--px); font-size:15px; font-weight:700; letter-spacing:0; margin-top:4px}
.hd .pill{vertical-align:middle; margin-left:8px}
.pd-top{display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; align-items:start}
.pd-art{width:118px; height:auto; filter:drop-shadow(0 6px 0 rgba(27,31,59,.25))}
.pd-name{font-family:var(--px); font-weight:700; font-size:26px; line-height:1}
.kv{display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid var(--cream-2); padding:6px 0 4px; font-family:var(--caps); font-size:13px}
.kv b{font-family:var(--px); font-size:16px}
.kv b.neg{color:#C0392B} .kv b.pos{color:var(--green-dk)}
.types{display:flex; gap:6px; flex-wrap:wrap}
.type{display:inline-block; font-family:var(--caps); font-size:11px; text-transform:uppercase; padding:3px 8px 2px; border-radius:6px; border:2px solid var(--navy); background:var(--tc); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); white-space:nowrap}
.type[data-t=electric],.type[data-t=ice],.type[data-t=normal],.type[data-t=ground],.type[data-t=steel]{color:var(--navy); text-shadow:none}
.menu-btns{display:flex; flex-direction:column; gap:8px}
.menu-btns .btn{justify-content:space-between; width:100%}
.tiers{display:flex; flex-direction:column; gap:4px}
.tier{display:grid; grid-template-columns:78px 1fr 70px; gap:6px; align-items:center}
.tier .cap{font-size:11px}
.pulls{display:flex; flex-direction:column; gap:6px}
.pp{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; text-decoration:none; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:6px 10px 6px 6px}
.pp:hover{background:#FFF6D6}
.pp.top{background:var(--yellow)}
.pp .thumb{width:48px; height:62px}
.pp-m{display:flex; flex-direction:column; min-width:0}
.pp-n{font-family:var(--px); font-weight:700; font-size:17px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp-r{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.pp-v{font-family:var(--px); font-weight:700; font-size:18px}
.chart-head{display:flex; align-items:center; gap:8px}
.chart-head .cap{flex:1}
.chart{position:relative; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:6px; min-height:120px}
.chart svg{display:block; touch-action:none}
.chart .grid{stroke:#D9D2B8; stroke-width:1; stroke-dasharray:3 4}
.chart .ax{font-family:var(--px); font-size:11px; fill:#5a5f7d}
.chart .up{fill:var(--green); stroke:var(--green-dk)} .chart .dn{fill:#E0463C; stroke:#A82F27}
.chart .wick{stroke-width:2}
.chart .xh{stroke:var(--navy); stroke-width:1; stroke-dasharray:2 3}
.chart .tip{position:absolute; top:6px; background:var(--navy); color:var(--cream); border-radius:6px; padding:6px 8px; font-size:13px; line-height:1.3; pointer-events:none; width:150px}
.chart-empty{padding:18px 12px; text-align:center}
.chart-empty p{margin:0 0 6px}
.ranges{display:flex; gap:6px; flex-wrap:wrap}
.ranges .chip{padding:7px 10px 5px}
.ranges .chip.partial:not(.on){opacity:.55}
.chg{font-family:var(--px); font-weight:700; font-size:14px; white-space:nowrap} .chg.up{color:var(--green-dk)} .chg.dn{color:#C0392B}
.rips{display:flex; flex-direction:column; gap:4px; max-height:300px; overflow:auto}
.rip{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; gap:8px; align-items:center; background:var(--paper); border:2px solid var(--navy); border-radius:7px; padding:4px 8px 4px 4px}
.who{display:flex; align-items:center; gap:6px; text-decoration:none; font-family:var(--caps); font-size:12px; min-width:0}
.who:hover{color:var(--blue-dk)}
.av{width:30px; height:30px; border-radius:6px; flex:none}
.rip-c{text-align:left; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rip-v{font-family:var(--px); font-weight:700} .rip-v.pos{color:var(--green-dk)}
/* packs grid additions */
.pack .pack-top{text-decoration:none; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:start}
.pk-art{width:52px; height:auto}
.pk-t .types{margin-top:5px}
.pk-chg{font-size:12px; text-align:right; margin-top:4px}
/* live now */
.livelist{display:flex; flex-direction:column; gap:5px}
.live{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; text-decoration:none; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:5px 10px 5px 6px}
.live:hover{background:#FFF6D6}
.live img{width:34px; height:auto}
.live-m{display:flex; flex-direction:column}
.live-n{font-family:var(--px); font-weight:700; font-size:16px}
.live-p{font-family:var(--px); font-size:14px}
.live-r{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
/* trainer card + badges */
.trainer-card{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; background:var(--paper); border:3px solid var(--navy); border-radius:10px; padding:12px}
.tc-av{width:96px; height:auto; border-radius:8px}
.badgecase{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:#E9E4CF; border:3px solid var(--navy); border-radius:10px; padding:8px}
.bdg{display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--caps); font-size:10px; text-align:center; filter:grayscale(1); opacity:.45}
.bdg.on{filter:none; opacity:1}
.bdg img{width:44px; height:44px; object-fit:contain}
.lg-stage{background:#7EB7F0 url(assets/title-bg.webp) center 60%/cover no-repeat; border-radius:8px; border:3px solid var(--navy); height:170px; display:flex; justify-content:center; align-items:flex-end; overflow:hidden}
.lg-stage img{height:160px; width:auto}
.trainers{display:flex; flex-direction:column; gap:5px}
.trow{display:grid; grid-template-columns:28px 34px minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; text-decoration:none; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:5px 10px 5px 6px}
.trow:hover{background:#FFF6D6}
.trow .rk{font-family:var(--caps); text-align:center; font-size:14px; border-radius:50%; background:var(--cream-2); border:2px solid var(--navy); width:26px; height:26px; line-height:22px}
.trow.m1 .rk{background:var(--yellow)} .trow.m2 .rk{background:#D6DCE4} .trow.m3 .rk{background:#E3A868}
.trow .av{width:34px; height:34px}
.tn{display:flex; flex-direction:column; font-family:var(--caps); font-size:13px}
.tb{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tv{font-family:var(--px); font-weight:700; color:var(--green-dk)}

/* link wizard */
.linkbox{display:flex; flex-direction:column; gap:10px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.step{font-family:var(--caps); font-size:12px; border:3px solid var(--navy); border-radius:8px; background:var(--paper); padding:7px 4px 5px; cursor:pointer; display:flex; gap:6px; align-items:center; justify-content:center; color:var(--navy)}
.step b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--cream-2); border:2px solid var(--navy); font-weight:400; font-size:11px}
.step.on{background:var(--yellow)} .step.done b{background:var(--green); color:#fff}
.step-body{display:flex; flex-direction:column; gap:8px}
.agent-menu{background:var(--paper); border:4px solid var(--navy); border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:2px}
.agent-opt{display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:8px; text-align:left; border:0; background:none; padding:9px 10px 7px; border-radius:7px; cursor:pointer; color:var(--navy)}
.agent-opt .cur{visibility:hidden; font-size:12px}
.agent-opt:hover,.agent-opt:focus,.agent-opt.on{background:var(--red); color:#fff; outline:none}
.agent-opt:hover .cur,.agent-opt:focus .cur,.agent-opt.on .cur{visibility:visible}
.agent-opt:hover .note,.agent-opt.on .note{color:#DCE6FF}
.an{font-family:var(--caps); font-size:16px}
.code[data-copy]{cursor:copy; position:relative; white-space:pre-wrap; word-break:break-all}
.code.copied::after,.chip.copied::after{content:" ✓ copied"; color:var(--yellow)}
.code.small{font-size:11px; max-height:160px}
.note.warn{background:#FFF1C2; border:2px dashed var(--yellow-dk); border-radius:6px; padding:6px 8px; color:var(--navy)}
.linklog{height:210px}
.linklog .res-l{color:#CFE0FF; font-size:13px}
.pg-form{display:flex; flex-direction:column; gap:8px; background:var(--paper); border:3px solid var(--navy); border-radius:8px; padding:10px}
.pg-form label{display:flex; flex-direction:column; gap:3px}
.pg-form input{font-family:var(--px); font-size:16px; border:3px solid var(--navy); border-radius:7px; padding:8px 10px 6px; background:#fff; color:var(--navy)}
.pg-form .btn{align-self:flex-start}
.pg-btns{display:flex; gap:6px}
.ok-tag{color:#7FE08A; margin-left:6px}
.raw summary{cursor:pointer; margin-bottom:4px}
.code.json{max-height:260px; font-size:12px; white-space:pre}
.json .jk{color:#9FC1FF} .json .js{color:#FFE08A} .json .jn{color:#7FE08A}

/* odds audit */
.au-row{display:grid; grid-template-columns:78px 58px 58px minmax(0,1fr) auto; gap:6px; align-items:center; padding:3px 0; border-bottom:2px solid var(--cream-2); font-family:var(--px); font-size:15px}
.au-row.au-h{border:0; padding-top:6px}
.au-row .cap{font-size:11px}
.au-v{font-family:var(--caps); font-size:11px; padding:2px 6px 1px; border-radius:5px; border:2px solid var(--navy); background:var(--cream-2); white-space:nowrap}
.au-v.ok{background:#BFE8C4} .au-v.hot{background:#FFE08A} .au-v.cold{background:#F6B4AE}

/* budget planner */
.planner{border-color:var(--yellow-dk); background:#FFF8DC}
.budget-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px}
.budget-row input{width:110px; font-family:var(--px); font-weight:700; font-size:18px; padding:7px 8px 5px; border:3px solid var(--navy); border-radius:8px; background:var(--paper); color:var(--navy)}
.budget-row .chip{padding:7px 9px 5px}

/* =========================================================================================
   v0.6 — "DS shell outside, modern market inside" (Kimba's direction):
   modern sans body, pixel type only for small labels, ~half the outlines gone,
   yellow only for actions/opportunities, Coinbase blue for infrastructure/selection.
   ========================================================================================= */
:root{--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --line:rgba(27,31,59,.10); --soft:0 1px 2px rgba(27,31,59,.06), 0 0 0 1px rgba(27,31,59,.07)}
body{font-family:var(--sans); -webkit-font-smoothing:antialiased; font-size:15px}
.screen{background:var(--cream)}
.page{background:transparent; padding:14px 12px; gap:12px}
.big,.pd-name,.pp-n,.pp-v,.live-n,.tv,.rip-v,.kv b,.chg,.au-row,.budget-row input{font-family:var(--sans); font-weight:700; letter-spacing:-.01em}
.note{font-family:var(--sans); color:#5E6384; font-size:13px}
/* headings: small pixel labels instead of boxed slabs */
.hd,.hd.navy{background:none; border:0; box-shadow:none; color:var(--navy); padding:2px 0 0; font-size:14px; letter-spacing:.08em}
.hd .hd-r{font-family:var(--sans); font-size:13px; font-weight:600; color:#5E6384; margin-top:0}
.entry-head{background:none; color:var(--navy); padding:0}
.entry-head .big{font-size:24px}
/* rows & cards: no outlines, soft shadow */
.route,.pull,.pp,.live,.trow,.copy,.endpoint,.statbox,.box,.trainer .cell,.rip,.chaselist a,.pack,.pg-form,.trainer-card,.badgecase,.agent-menu,.chart{border:0; box-shadow:var(--soft); background:#fff}
.route.best,.pp.top{background:#fff; box-shadow:inset 4px 0 0 var(--yellow), var(--soft)}
.pull.hit{background:#fff; box-shadow:inset 4px 0 0 var(--yellow), var(--soft)}
.route:hover,.pp:hover,.live:hover,.trow:hover,.pull:hover,.chaselist a:hover{background:#F6F8FF}
.route .pk,.an,.tn{font-family:var(--sans); font-weight:700; letter-spacing:0}
.route .odds,.route .cost{font-family:var(--sans); font-weight:700}
.route .pk .sub{font-family:var(--sans); font-weight:500}
.kv{font-family:var(--sans); font-size:13px; border-bottom:1px solid var(--line); color:#5E6384}
.kv b{color:var(--navy)}
.statbox .row .cap,.cap{letter-spacing:.06em}
.planner{background:#FFFBEA; box-shadow:inset 4px 0 0 var(--yellow), var(--soft)}
.audit{background:#fff}
.au-row{border-bottom:1px solid var(--line); font-size:14px}
.au-v{border:0}
.thumb,.pp .thumb{border:0; border-radius:4px; box-shadow:0 0 0 1px var(--line)}
.slab{border:0; background:#E9ECF4}
/* chips: blue = selection/infrastructure; yellow reserved for actions */
.chip{border:1px solid rgba(27,31,59,.18); background:#fff; font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:0; padding:7px 11px}
.chip.on{background:var(--red); border-color:var(--red); color:#fff}
.btn{font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:0; border:2px solid var(--navy); box-shadow:inset 0 -3px 0 var(--yellow-dk); padding:11px 16px 10px}
.btn.ghost{background:#fff; border:1px solid rgba(27,31,59,.2); box-shadow:none; font-weight:600}
.search{border:1px solid rgba(27,31,59,.2); box-shadow:0 0 0 3px rgba(0,82,255,.12); border-radius:12px}
.search input{font-family:var(--sans); text-transform:none; font-size:16px; font-weight:500}
.dialog{border-width:3px; box-shadow:none}
.dialog p{font-family:var(--sans); font-size:15px; line-height:1.45}
.term{border:0; font-family:ui-monospace, "SFMono-Regular", Consolas, monospace; font-size:13px}
.type{border:0; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.04em}
.menu a{font-size:13px}
.shell-bottom{font-family:var(--sans)}

/* ---------- HOME (hero · command box · 01/02/03 · EV Agent) ---------- */
.home{display:flex; flex-direction:column; gap:14px; padding:6px}
.hh{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:10px; align-items:end;
  background:#7EB7F0 url(assets/title-bg.webp) center 70%/cover no-repeat; border-radius:12px; padding:22px 22px 0; overflow:hidden}
.hh-l{display:flex; flex-direction:column; gap:12px; padding-bottom:22px}
.hh-logo{width:150px; height:auto; filter:drop-shadow(0 4px 0 rgba(27,31,59,.3))}
.hh h1{margin:0; font-family:var(--sans); font-weight:800; font-size:clamp(28px,3.2vw,46px); line-height:1.02; letter-spacing:-.03em; color:var(--navy); text-shadow:0 2px 0 rgba(255,255,255,.55); max-width:15ch}
.lead{margin:0; font-size:17px; line-height:1.45; color:#23294D; max-width:44ch}
.hh .lead{background:rgba(255,253,245,.82); border-radius:10px; padding:8px 12px; align-self:flex-start}
.cmd{background:#fff; border-radius:14px; padding:12px; box-shadow:0 8px 24px rgba(27,31,59,.18); display:flex; flex-direction:column; gap:8px; max-width:560px}
.cmd-row{display:flex; gap:8px}
.cmd-row input{flex:1; min-width:0; font-family:var(--sans); font-size:18px; font-weight:600; border:1px solid rgba(27,31,59,.18); border-radius:10px; padding:12px 14px; color:var(--navy); background:#F7F8FC}
.cmd-row input:focus{outline:2px solid var(--red); outline-offset:1px}
.cmd-hints{display:flex; gap:6px; flex-wrap:wrap}
.hh-r{display:flex; justify-content:center; align-items:flex-end}
.hh-r img{width:100%; max-width:380px; height:auto; display:block; margin-bottom:-4px; animation:bob 2.4s steps(4) infinite; filter:drop-shadow(0 8px 0 rgba(27,31,59,.22))}
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.stages > div{background:#fff; border-radius:12px; box-shadow:var(--soft); padding:12px 14px; display:flex; flex-direction:column; gap:3px}
.stages b{font-family:var(--caps); font-weight:400; color:var(--red); font-size:13px}
.stages .st{font-weight:800; font-size:18px; letter-spacing:-.01em}
.home .statusline{margin:0 auto; grid-column:auto}

/* ---------- EV AGENT module ---------- */
.evagent{background:var(--navy); color:#E9EDFF; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px}
.ea-head{display:flex; gap:12px; align-items:center}
.ea-head img{width:48px; height:48px; border-radius:10px; background:var(--red)}
.ea-title{font-family:var(--caps); font-size:16px; color:var(--yellow); letter-spacing:.08em}
.evagent .note{color:#AEB6DA}
.ea-form{display:flex; gap:8px}
.ea-form input{flex:1; min-width:0; font-family:var(--sans); font-size:16px; font-weight:600; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; border-radius:10px; padding:11px 14px}
.ea-form input:focus{outline:2px solid var(--red-lt)}
.ea-steps{display:flex; flex-direction:column; gap:6px; font-size:14px}
.ea-step{display:flex; gap:10px; align-items:center; color:#C9D2F5}
.ea-step .ea-i{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; background:rgba(255,255,255,.1)}
.ea-step.ok .ea-i{background:var(--green); color:#fff}
.ea-step.err{color:#FFB4AB}
.ea-step b{color:#fff}
.evagent .bm{background:#fff; color:var(--navy)}
.ea-sheet:not([hidden]){display:block}

/* ---------- Best market card (chase + agent) ---------- */
.market-head{padding:8px 6px 0}
.market-head h1{margin:0 0 6px; font-family:var(--sans); font-weight:800; font-size:clamp(24px,2.6vw,36px); letter-spacing:-.025em; line-height:1.05; color:var(--navy)}
.bestmarket{display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; padding:0 6px}
.bm{display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:16px; align-items:center; background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow:inset 5px 0 0 var(--yellow), 0 6px 18px rgba(27,31,59,.10)}
.bm-art{width:72px; height:auto}
.bm-name{font-weight:800; font-size:20px; letter-spacing:-.01em; margin-bottom:8px}
.bm-stats{display:flex; flex-wrap:wrap; gap:6px 22px}
.bm-stats div{display:flex; flex-direction:column}
.bm-stats b{font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.bm-stats span{font-size:11px; font-weight:600; color:#5E6384; text-transform:uppercase; letter-spacing:.06em}
.bm-btns{display:flex; flex-direction:column; gap:8px}
.bm-btns .btn{justify-content:center; white-space:nowrap}
.sheet{background:#fff; color:var(--navy); border-radius:12px; padding:12px 14px; box-shadow:var(--soft); display:flex; flex-direction:column; gap:8px; margin-top:8px}
.sheet .code{white-space:pre-wrap; word-break:break-all}

/* ---------- handheld frame (desktop): grips + stretchable middle, so the screen fills the window ----------
   gb-left / gb-right are the grips cut from the generated console; the middle is built from 4px slices of its
   top and bottom body (gb-top / gb-bot, repeat-x) with the "EV FIELD GUIDE" label centred. Screen = the rest. */
.gb-side,.gb-top,.gb-bot{display:none}
.gb-screen{container:scr / inline-size}
@media (min-width:861px){
  html,body{height:100%; overflow:hidden}
  body{display:grid; place-items:center; background:var(--sky)}
  .gb{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,100%); height:calc(100vh - 16px); width:calc(100vw - 16px); max-width:calc((100vh - 16px) * 2.7)}
  .gb-side{display:block; position:relative; height:100%}
  .gb-img{display:block; height:100%; width:auto; image-rendering:pixelated; user-select:none; pointer-events:none}
  .gb-mid{display:grid; grid-template-rows:11.752% minmax(0,1fr) 10.865%; height:100%; min-width:0}
  .gb-top{display:flex; justify-content:center; background:url(assets/gb-top.webp) repeat-x; background-size:auto 100%; image-rendering:pixelated}
  .gb-label{height:100%; width:auto; image-rendering:pixelated; pointer-events:none}
  .gb-bot{display:block; background:url(assets/gb-bot.webp) repeat-x; background-size:auto 100%; image-rendering:pixelated}
  .gb-screen{position:relative; overflow-y:auto; overflow-x:hidden; background:var(--navy); scrollbar-width:thin; scrollbar-color:var(--red-lt) var(--navy); overscroll-behavior:contain; min-height:0}
  .gb-screen .device{margin:0; border-radius:0; padding:8px 8px 6px; background:var(--navy); box-shadow:none}
  .gb-screen .shell-top{padding:0 2px 8px; gap:10px}
  .gb-screen .brand img{height:30px}
  .gb-screen .menu{margin-left:0; gap:2px; flex-wrap:wrap}
  .gb-screen .menu a{font-size:13px; padding:7px 9px 6px 18px}
  .gb-screen .menu a.on::before{left:5px; top:7px; font-size:10px}
  .gb-screen .shell-label{display:none}
  .gb-screen .screen{border-radius:10px; padding:0; min-height:0}
  .gb-screen .shell-bottom{padding:10px 2px 2px}
  .gb-key{position:absolute; border:0; padding:0; background:transparent; cursor:pointer; border-radius:10px; -webkit-tap-highlight-color:transparent}
  .gb-key:hover{background:rgba(255,255,255,.08)}
  .gb-key.down,.gb-key:active{background:rgba(0,0,0,.28)}
  .gb-key:focus-visible{outline:3px dashed var(--yellow); outline-offset:2px}
  .gb-key.round{border-radius:50%}
  /* positions as % of each grip image (left grip 305x902, right grip 305x902) */
  .gb-key[data-k=up]{left:35.4%; top:29%; width:23%; height:8.4%}
  .gb-key[data-k=down]{left:35.4%; top:45.6%; width:23%; height:8.4%}
  .gb-key[data-k=left]{left:11.5%; top:37.2%; width:24%; height:8.4%}
  .gb-key[data-k=right]{left:58.9%; top:37.2%; width:24%; height:8.4%}
  .gb-key[data-k=select]{left:14%; top:61.5%; width:30%; height:9.5%}
  .gb-key[data-k=start]{left:54.9%; top:61.5%; width:30%; height:9.5%}
  .gb-key[data-k=a]{left:53.1%; top:30.8%; width:34.4%; height:11.6%}
  .gb-key[data-k=b]{left:20.2%; top:41.3%; width:34.4%; height:11.6%}
}

/* ---------- layout by SCREEN width (container), so the same rules serve the phone and the handheld screen ---------- */
@container scr (max-width:1020px){
  .route,.routes-head{grid-template-columns:22px minmax(0,1.3fr) 74px 74px minmax(80px,1fr)}
  .route .ven,.routes-head .ven{display:none}
}
@container scr (max-width:1100px){
  .packview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .packview > .page:last-child{grid-column:1 / -1}
}
@container scr (max-width:860px){
  .hh{grid-template-columns:1fr; padding:16px 14px 0}
  .hh-r{display:none}
  .hh-l{padding-bottom:16px}
  .stages{grid-template-columns:1fr}
  .cmd-row{flex-direction:column}
  .bm{grid-template-columns:56px minmax(0,1fr); padding:12px}
  .bm-art{width:56px}
  .bm-btns{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap}
  .bm-stats{gap:6px 16px}
  .bm-stats b{font-size:18px}
  .ea-form{flex-direction:column}
  .packview{grid-template-columns:1fr}
  .trow{grid-template-columns:28px 34px minmax(0,1fr) auto}
  .trow .tb{display:none}
  .rip{grid-template-columns:minmax(0,1fr) auto}
  .rip .rip-c{display:none}
  .title{grid-template-columns:minmax(0,1fr); grid-template-rows:auto; min-height:0}
  .title-left{min-width:0; padding:18px 16px 0}
  .press{font-size:16px}
  .title-row{flex-direction:column-reverse; align-items:stretch}
  .title-row .search{max-width:none}
  .startmenu{display:none}
  .title-mascot{width:min(78%,420px); margin:4px auto -4px; grid-row:2}
  .title .dialog{margin:0 10px 10px}
  .statusline{margin:0 10px 12px; font-size:12px}

  .guide,.tape-grid,.league,.agents{grid-template-columns:1fr}
  .term{height:300px}
  .entry-body{grid-template-columns:110px minmax(0,1fr)}
  .entry-body .slab{height:156px}
  .route,.routes-head{grid-template-columns:minmax(0,1fr) 96px 58px; padding:10px; gap:6px}
  .route .odds,.route .cost{font-family:var(--px); font-weight:700; font-size:15px}
  #route-stat .big{font-size:26px!important}
  .statbox .row{flex-wrap:wrap}
  .route .i,.routes-head .i,.route .hpcell,.routes-head .hpcell{display:none}
  .route .tag{right:6px}
  .chase-top{flex-direction:column}
  .encounter{height:300px}
  .hero{width:170px; left:2%}
  .foe{left:auto; right:8%; top:18px; width:96px}
  .foe .slab{width:96px; height:132px}
  .foe-card{min-width:0; max-width:54%; padding:8px 10px 6px}
  .foe-card .big{font-size:15px}
  .encounter .dialog{left:10px; right:10px; bottom:10px; padding:8px 30px 8px 10px}
  .encounter .dialog p{font-size:15px}
  .pull{grid-template-columns:44px minmax(0,1fr) auto}
  .pull .bang,.pull .ago{display:none}
  .dialog .portrait{width:56px; height:56px}
}

/* handheld-sized screen: keep the title two-up (logo left, mascot right) */
@container scr (min-width:600px) and (max-width:860px){
  .title{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .title-left{padding:18px 0 8px 16px; gap:12px}
  .title-mascot{grid-row:1; grid-column:2; width:100%; align-self:end; margin:0}
  .title .dialog{grid-column:1 / -1}
  .statusline{grid-column:1 / -1}
}

/* ---------- phone (viewport): full-bleed blue shell + bottom tab bar ---------- */
@media (max-width:860px){
  body{font-size:16px; background:var(--red)}
  .brand img{filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
  .device{margin:0; border-radius:0; padding:calc(8px + var(--safe-t)) 8px calc(96px + var(--safe-b)); box-shadow:none; min-height:100vh}
  .shell-top{padding:4px 4px 10px}
  .brand img{height:36px}
  .menu,.shell-label{display:none}
  .screen{padding:6px; border-radius:14px; min-height:0}
  .shell-bottom{flex-direction:column; align-items:flex-start; gap:4px; padding:10px 4px}
  .tabbar{
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--navy); padding:6px 6px calc(6px + var(--safe-b)); border-top:4px solid var(--red-dk);
  }
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--cream); font-family:var(--caps); font-size:11px; padding:6px 0 4px; border-radius:8px; min-height:52px; justify-content:center}
  .tabbar img{width:28px; height:28px; image-rendering:pixelated}
  .tabbar a.on{background:var(--yellow); color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* =========================================================================================
   v0.7 — Coinbase interior. Game identity stays in the shell, mascot, pixel packs, badges,
   type tags and battle scenes; the app inside speaks Coinbase: blue #0052FF actions & bars,
   cool white canvas, pill buttons, green/red only for gains/losses.
   ========================================================================================= */
:root{--cb:#0052FF; --cb-dk:#0041CC; --cb-lt:#E8EEFF; --cb-ink:#0A0B0D; --cb-2:#5B616E; --cb-bg:#F5F8FF; --cb-line:#E3E8F2;
  --cb-up:#098551; --cb-dn:#CF202F}
body{color:var(--cb-ink)}
.screen{background:var(--cb-bg)}
.note{color:var(--cb-2)}
.cap{color:var(--cb-2)}
/* app header inside the handheld: white bar, blue active tab */
@media (min-width:861px){
  .gb-screen{background:#fff; scrollbar-color:var(--cb) #fff}
  .gb-screen .device{background:#fff}
  .gb-screen .shell-top{border-bottom:1px solid var(--cb-line); margin:-8px -8px 8px; padding:8px 12px}
  .gb-screen .shell-bottom{color:var(--cb-2)}
}
.menu a{color:var(--cb-ink); font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0; padding:8px 14px; border-radius:999px}
.gb-screen .menu a{color:var(--cb-ink)}
.menu a:hover{background:var(--cb-lt)}
.menu a.on{background:var(--cb); color:#fff; box-shadow:none}
.menu a.on::before{content:none}
@media (max-width:860px){ .menu a{color:#fff} }
/* headings: small blue pixel labels */
.hd,.hd.navy{color:var(--cb)}
.stages b{color:var(--cb)}
/* buttons: Coinbase pills */
.btn{background:var(--cb); color:#fff; border:0; border-radius:999px; box-shadow:none; padding:12px 20px}
.btn:hover{background:var(--cb-dk); filter:none}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn.ghost{background:#EEF0F3; color:var(--cb-ink); border:0}
.btn.ghost:hover{background:#E1E5EB}
.chip{border-radius:999px; border:1px solid var(--cb-line); color:var(--cb-ink)}
.chip.on{background:var(--cb); border-color:var(--cb); color:#fff}
.search{border-radius:999px; border:1px solid var(--cb-line); box-shadow:0 0 0 3px rgba(0,82,255,.10); padding-left:18px}
.search .btn{padding:9px 18px}
.cmd .btn,.ea-form .btn{white-space:nowrap}
.pill{background:var(--cb-lt); color:var(--cb); border:0; border-radius:999px; padding:4px 9px 3px}
.pill.navy{background:var(--cb-ink); color:#fff}
.pill.red{background:var(--cb-dn); color:#fff}
.pill.violet{background:var(--cb); color:#fff}
/* bars: blue, rounded, with faint pixel steps so they still read as game meters */
.hp-bar{height:10px; border:0; border-radius:999px; background:#E3E9F7}
.hp-bar i{border-radius:999px; background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.28) 10px 12px), var(--cb)}
.hp-bar.y i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.28) 10px 12px), #7FA6FF}
.hp-bar.r i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.28) 10px 12px), var(--cb-dn)}
.hp-bar.v i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.28) 10px 12px), #0033AD}
/* highlights: blue accent instead of yellow */
.route.best,.pp.top,.pull.hit{box-shadow:inset 4px 0 0 var(--cb), var(--soft)}
.route.sel{outline:2px solid var(--cb); outline-offset:1px}
.route .tag{background:var(--cb); color:#fff}
.bm{box-shadow:inset 5px 0 0 var(--cb), 0 8px 24px rgba(0,82,255,.10)}
.planner{background:#F5F8FF; box-shadow:inset 4px 0 0 var(--cb), var(--soft)}
.step.on{background:var(--cb); color:#fff; border-color:var(--cb)}
.step{border:1px solid var(--cb-line); border-radius:999px}
.step.done b{background:var(--cb-up)}
.agent-opt:hover,.agent-opt:focus,.agent-opt.on{background:var(--cb)}
.au-v{border-radius:999px} .au-v.ok{background:#E3F4EC; color:var(--cb-up)} .au-v.hot{background:var(--cb-lt); color:var(--cb)} .au-v.cold{background:#FBE7E9; color:var(--cb-dn)}
/* money colours */
.pull .v,.tv,.rip-v.pos,.kv b.pos,.chg.up{color:var(--cb-up)}
.kv b.neg,.chg.dn{color:var(--cb-dn)}
.copy .v,.chaselist .v{color:var(--cb)}
.chart .up{fill:var(--cb-up); stroke:#066B41} .chart .dn{fill:var(--cb-dn); stroke:#A51A26}
/* dialog boxes keep their RPG frame, in Coinbase ink */
.dialog{background:#fff; border-color:var(--cb-ink); box-shadow:none}
.dialog .portrait{background:var(--cb)}
/* status strip & EV Agent: light market strip, dark pro panel with blue accents */
.statusline{background:#fff; color:var(--cb-ink); box-shadow:var(--soft); font-family:var(--sans); font-weight:600; letter-spacing:0; font-size:13px; border-radius:999px; padding:9px 18px}
.statusline b{color:var(--cb)}
.evagent{background:#0A0B0D}
.ea-title{color:#7FA6FF}
.ea-head img{background:var(--cb)}
.ea-form input:focus{outline-color:var(--cb)}
.ea-step.ok .ea-i{background:var(--cb)}
.term{background:#0A0B0D}
.term .you b{color:#7FA6FF}
.linklog .res-l{color:#AFC4FF}
.code{background:#0A0B0D}
/* cards */
.stages > div,.cmd{border-radius:16px}
.cmd-row input{border-radius:999px; background:#F5F8FF; padding:12px 18px}
.cmd-row input:focus{outline-color:var(--cb)}
.lg-stage,.hh{border-radius:16px}
/* phone tab bar: white, blue active */
@media (max-width:860px){
  .tabbar{background:#fff; border-top:1px solid var(--cb-line); box-shadow:0 -4px 16px rgba(10,11,13,.06)}
  .tabbar a{color:var(--cb-2); font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0}
  .tabbar a.on{background:var(--cb-lt); color:var(--cb)}
  .screen{background:var(--cb-bg)}
}
/* v0.7 polish: numbers in the market font, tidy filter row */
.pack .price,.copy .v,.pull .v,.pull .ago,.chaselist .v,.route .i,.trow .rk,.bdg,.tier .cap{font-family:var(--sans); font-weight:700; letter-spacing:0}
.pack .price{font-size:22px}
.chase-top{align-items:center}
.chase-top .filters{align-items:center}
.search{background:#fff}
.search input{color:var(--cb-ink)}
.au-row .cap{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:0; text-transform:capitalize}

/* =========================================================================================
   v0.8 — elevated game-market UI (owner's reference): glossy raised buttons with icons,
   dark glowing app bar, dark hero with glass stat tiles, speech bubble, icon chips,
   route stepper, agent insight. Coinbase blue stays the system colour; yellow = game CTA.
   ========================================================================================= */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
:root{--lift:0 1px 2px rgba(10,20,60,.06), 0 10px 28px rgba(10,20,60,.08); --glow:0 8px 22px rgba(0,82,255,.38)}

/* ---- buttons: raised, glossy, with bevel ---- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:12px;
  background:linear-gradient(180deg,#4A8DFF 0%,#1F66FF 45%,#0052FF 60%,#0046DD 100%); color:#fff; font-weight:800; letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,20,90,.28), 0 2px 0 #0038B8, var(--glow);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; text-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn:hover{background:linear-gradient(180deg,#5B98FF 0%,#2B70FF 45%,#0A5BFF 60%,#004CEB 100%); transform:translateY(-1px); filter:none}
.btn:active{transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,20,90,.28), 0 1px 0 #0038B8, 0 3px 10px rgba(0,82,255,.3)}
.btn img{width:24px; height:24px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.btn-game{background:linear-gradient(180deg,#FFF0A8 0%,#FFD84D 42%,#F2C94C 60%,#E3AE22 100%); color:#1B1F3B; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(140,90,0,.3), 0 2px 0 #B8861A, 0 8px 22px rgba(242,180,40,.45)}
.btn-game:hover{background:linear-gradient(180deg,#FFF5C2 0%,#FFDF66 42%,#F6D05A 60%,#E9B52E 100%)}
.btn-game:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(140,90,0,.3), 0 1px 0 #B8861A, 0 3px 10px rgba(242,180,40,.35)}
.btn.ghost{background:linear-gradient(180deg,#FFFFFF,#F2F5FB); color:var(--cb-ink); text-shadow:none;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #DCE3F0, 0 2px 0 #CFD8E8, 0 4px 12px rgba(10,20,60,.06)}
.btn.ghost:hover{background:linear-gradient(180deg,#FFFFFF,#E9EFFA)}
.btn.lg{padding:15px 24px 14px; font-size:16px; text-transform:uppercase; letter-spacing:.06em; border-radius:14px}
.btn.lg img{width:30px; height:30px}
.search .btn,.cmd .btn{border-radius:10px}
.search .btn{background:linear-gradient(180deg,#FFF0A8 0%,#FFD84D 42%,#F2C94C 60%,#E3AE22 100%); color:#1B1F3B; text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(140,90,0,.3), 0 2px 0 #B8861A}

/* ---- chips ---- */
.chip{box-shadow:0 1px 2px rgba(10,20,60,.05); transition:transform .12s, box-shadow .12s}
.chip:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgba(10,20,60,.08)}
.chip.on{background:linear-gradient(180deg,#3D86FF,#0052FF); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,82,255,.35)}

/* ---- cards: rounder, softer, lift on hover ---- */
.route,.pull,.pp,.live,.trow,.copy,.endpoint,.statbox,.pack,.pg-form,.trainer-card,.chart,.stages > div,.rip,.chaselist a{border-radius:14px; box-shadow:var(--lift)}
.route,.pull,.pp,.live,.trow,.pack,.chaselist a{transition:transform .14s ease, box-shadow .14s ease}
.route:hover,.pull:hover,.pp:hover,.live:hover,.trow:hover,.pack:hover,.chaselist a:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(10,20,60,.06), 0 16px 34px rgba(10,20,60,.12)}
.route.best,.pp.top,.pull.hit{box-shadow:inset 4px 0 0 var(--cb), var(--lift)}
.bm{border-radius:18px; box-shadow:inset 5px 0 0 var(--cb), 0 0 0 1px rgba(0,82,255,.10), 0 14px 36px rgba(0,82,255,.14)}
.hp-bar{height:11px; box-shadow:inset 0 1px 2px rgba(10,20,60,.12)}
.hp-bar i{background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.3) 10px 12px), linear-gradient(180deg,#5B98FF,#0052FF)}

/* ---- app bar: dark, glowing active tab, icon tabs ---- */
.menu a{display:inline-flex; align-items:center; gap:7px}
.menu a img{width:20px; height:20px; object-fit:contain; image-rendering:pixelated}
@media (min-width:861px){
  .gb-screen .shell-top{background:linear-gradient(180deg,#0E1540,#0A0F2C); border-bottom:1px solid rgba(255,255,255,.08)}
  .gb-screen .menu a{color:#D5DDF7}
  .gb-screen .menu a:hover{background:rgba(255,255,255,.08)}
  .gb-screen .shell-label{display:flex; margin-left:auto; color:#D5DDF7; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:5px 12px 5px 6px}
  .gb-screen .shell-label img{width:22px; height:22px; border-radius:6px}
}
.menu a.on{background:linear-gradient(180deg,#3D86FF,#0052FF); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px rgba(0,82,255,.65)}

/* ---- HOME hero ---- */
.hh{background:linear-gradient(100deg, rgba(7,12,44,.94) 0%, rgba(7,12,44,.82) 36%, rgba(10,30,110,.35) 64%, rgba(0,0,0,0) 100%), #0A1238 url(assets/title-bg.webp) center 70%/cover no-repeat;
  border-radius:20px; padding:26px 26px 0; box-shadow:0 18px 40px rgba(7,12,44,.28); position:relative}
.hh-l{gap:14px; padding-bottom:24px}
.hh-logo{width:170px; filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(242,201,76,.35))}
.hh h1{color:#fff; font-size:clamp(30px,3.4vw,50px); text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 28px rgba(80,140,255,.55); max-width:none}
.hh .lead{background:none; padding:0; color:#C9D4F5; font-size:17px}
.cmd{background:rgba(255,255,255,.96); border-radius:16px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.4)}
.cmd-row{align-items:center}
.cmd-ico{font-size:20px; color:#8A93B0; padding-left:8px}
.cmd-row input{background:transparent; border:0; padding:12px 6px; font-size:17px}
.cmd-row input:focus{outline:none}
.hstats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.hstats > div{display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:9px 11px; backdrop-filter:blur(6px)}
.hstats img{grid-row:1 / 3; width:30px; height:30px; object-fit:contain}
.hstats b{color:#fff; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.1}
.hstats span{color:#AEB9E0; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.hcta{display:flex; gap:12px; flex-wrap:wrap}
.hh-r{position:relative}
.hh-r img{max-width:400px; filter:drop-shadow(0 10px 0 rgba(0,0,0,.3)) drop-shadow(0 0 30px rgba(0,82,255,.45))}
.bubble{position:absolute; top:6%; right:2%; z-index:2; background:#fff; color:var(--navy); border-radius:16px; padding:10px 14px;
  font-family:var(--caps); font-size:13px; line-height:1.35; box-shadow:0 8px 20px rgba(0,0,0,.25); transform:rotate(3deg)}
.bubble b{color:var(--cb); font-weight:400}
.bubble::after{content:""; position:absolute; left:18px; bottom:-10px; border:10px solid transparent; border-top-color:#fff; border-bottom:0}

/* quick chips with icons */
.quick{display:flex; gap:8px; flex-wrap:wrap}
.qchip{display:inline-flex; align-items:center; gap:7px; text-decoration:none; background:#fff; color:var(--cb-ink); font-weight:700; font-size:13px;
  border-radius:12px; padding:8px 13px 8px 9px; box-shadow:0 0 0 1px #E1E7F3, 0 2px 6px rgba(10,20,60,.05); transition:transform .12s, box-shadow .12s}
.qchip img{width:22px; height:22px; object-fit:contain}
.qchip:hover{transform:translateY(-1px); box-shadow:0 0 0 1px #CBD6EE, 0 8px 16px rgba(10,20,60,.1)}
.qchip.on{background:linear-gradient(180deg,#3D86FF,#0052FF); color:#fff; box-shadow:0 4px 14px rgba(0,82,255,.35)}

/* stages as a connected route stepper */
.stages{position:relative; gap:14px}
.stages > div{position:relative; padding:14px 16px 14px 58px}
.stages b{position:absolute; left:14px; top:14px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(180deg,#3D86FF,#0052FF); box-shadow:0 4px 12px rgba(0,82,255,.35); font-size:12px}
.stages > div:not(:last-child)::after{content:""; position:absolute; right:-14px; top:29px; width:14px; height:3px; background:linear-gradient(90deg,#0052FF,#7FA6FF)}

/* agent + insight row */
.home-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; align-items:start}
.evagent{background:linear-gradient(160deg,#0E1540 0%,#0A0B0D 70%); border-radius:18px; box-shadow:0 0 0 1px rgba(90,140,255,.22), 0 18px 40px rgba(7,12,44,.3)}
.ea-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.ea-step{flex-direction:column; align-items:flex-start; gap:8px; padding-right:10px; position:relative; font-size:13px; line-height:1.35}
.ea-step .ea-i{width:26px; height:26px; font-size:12px; position:relative; z-index:1}
.ea-step:not(:last-child)::before{content:""; position:absolute; left:26px; right:0; top:12px; height:2px; background:rgba(255,255,255,.12)}
.ea-step.ok:not(:last-child)::before{background:linear-gradient(90deg,#0052FF,#7FA6FF)}
.insight{border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#0052FF,#7B5CFF,#F2C94C) border-box;
  border:2px solid transparent; box-shadow:0 14px 34px rgba(10,20,60,.1)}
.ins-head{display:flex; gap:10px; align-items:center}
.ins-head img{width:44px; height:44px; border-radius:12px; background:var(--cb)}
.ins-t{font-family:var(--caps); color:var(--cb); font-size:14px; letter-spacing:.06em}
.ins-row{display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; padding:10px 0; border-top:1px solid var(--cb-line)}
.ins-row:first-child{border-top:0; padding-top:0}
.ins-row img{width:28px; height:28px; object-fit:contain}
.ins-row p{margin:0; font-size:14px; line-height:1.45; color:var(--cb-ink)}
.ins-row b{color:var(--cb)}

@container scr (max-width:1100px){
  .home-grid{grid-template-columns:1fr}
  .hstats{grid-template-columns:repeat(2,1fr)}
}
@container scr (max-width:860px){
  .hh{padding:18px 16px 0}
  .hh h1{font-size:30px}
  .hcta .btn{flex:1 1 100%}
  .bubble{display:none}
  .stages > div:not(:last-child)::after{display:none}
  .ea-steps{grid-template-columns:1fr; gap:8px}
  .ea-step{flex-direction:row; align-items:center}
  .ea-step:not(:last-child)::before{display:none}
  .cmd-row{flex-direction:row}
  .cmd .btn{padding:11px 14px}
}
@container scr (max-width:860px){
  .hh{grid-template-columns:minmax(0,1fr)}
  .hh-l{min-width:0}
  .hstats > div{min-width:0}
  .hstats b{font-size:17px}
  .cmd-row .btn{flex:none}
  .hcta .btn.lg{font-size:14px; padding:13px 16px 12px}
}

/* =========================================================================================
   v0.9 — retro × Coinbase hybrid: Game Boy pixel type and pixel-framed cards/meters come back,
   colours stay Coinbase (blue #0052FF system, white/cool canvas, green/red money).
   ========================================================================================= */
:root{--sans:"Pixelify Sans", ui-monospace, monospace; --px-line:#1B1F3B; --px-soft:#C9D5EE;
  --retro:0 0 0 2px var(--px-soft), 0 4px 0 2px var(--px-soft); --retro-hi:0 0 0 2px var(--cb), 0 4px 0 2px #0038B8}
body{font-family:var(--sans); font-size:16px; -webkit-font-smoothing:none}
.note{font-size:14px}
/* the app fills the whole handheld screen */
@media (min-width:861px){ .gb-screen .device{max-width:none; width:100%} }
/* headline type: chunky pixel, no negative tracking */
.hh h1,.market-head h1{font-family:"Pixelify Sans", monospace; font-weight:700; letter-spacing:.01em; line-height:1.05}
.hh h1{text-shadow:0 3px 0 rgba(0,0,0,.45), 0 0 26px rgba(80,140,255,.6)}
.big,.bm-stats b,.hstats b,.pack .price,.pp-v,.tv,.rip-v,.kv b,.chg,.bm-name,.pd-name,.stages .st,.ea-title,.ins-t{font-family:"Pixelify Sans", monospace; letter-spacing:.01em}
.cap,.hd,.hd.navy,.bm-stats span,.hstats span,.stages b,.kv span{font-family:var(--caps); letter-spacing:.06em}
/* buttons & tabs: pixel caps on the Coinbase blue / game yellow bevels */
.btn{font-family:var(--caps); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:14px; border-radius:10px}
.btn.lg{font-size:16px}
.btn.ghost{box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft)}
.menu a{font-family:var(--caps); font-weight:400; font-size:13px; letter-spacing:.05em}
.chip,.qchip,.step{font-family:var(--caps); font-weight:400; font-size:12px; letter-spacing:.04em; border-radius:8px}
.chip{border:0; box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft)}
.chip.on,.qchip.on{box-shadow:0 0 0 2px var(--cb), 0 3px 0 2px #0038B8}
.qchip{box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft)}
/* pixel-framed cards: crisp 2px outline + solid drop instead of blur */
.route,.pull,.pp,.live,.trow,.copy,.endpoint,.statbox,.pack,.pg-form,.trainer-card,.chart,.stages > div,.rip,.chaselist a,.cmd,.insight,.badgecase,.agent-menu{border-radius:10px; box-shadow:var(--retro)}
.route:hover,.pull:hover,.pp:hover,.live:hover,.trow:hover,.pack:hover,.chaselist a:hover{transform:translateY(-2px); box-shadow:0 0 0 2px #9FB6EA, 0 6px 0 2px #9FB6EA}
.route.best,.pp.top,.pull.hit,.bm,.planner{box-shadow:var(--retro-hi)}
.bm{border-radius:12px}
.insight{border:0; background:#fff; box-shadow:0 0 0 2px var(--cb), 0 4px 0 2px #0038B8}
.evagent{border-radius:12px; box-shadow:0 0 0 2px #2A3A8C, 0 5px 0 2px #0A0F2C}
.hh{border-radius:14px; box-shadow:0 0 0 3px var(--px-line), 0 6px 0 3px var(--px-line)}
.hstats > div{border-radius:10px; border:2px solid rgba(255,255,255,.22)}
/* meters: chunky pixel bars, Coinbase blue fill */
.hp-bar{height:14px; border:2px solid var(--px-line); border-radius:4px; background:#E3E9F7; box-shadow:none}
.hp-bar i{border-radius:0; background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.35) 8px 10px), linear-gradient(180deg,#4A8DFF 0 45%,#0052FF 45% 100%)}
.hp-bar.y i{background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.35) 8px 10px), linear-gradient(180deg,#A9C3FF 0 45%,#7FA6FF 45% 100%)}
.hp-bar.r i{background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.35) 8px 10px), linear-gradient(180deg,#E8505C 0 45%,#CF202F 45% 100%)}
.hp-bar.v i{background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.35) 8px 10px), linear-gradient(180deg,#3558C8 0 45%,#0033AD 45% 100%)}
/* inputs */
.search,.cmd-row input,.ea-form input,.pg-form input,.budget-row input{font-family:"Pixelify Sans", monospace}
.search{border:0; box-shadow:0 0 0 2px var(--px-line), 0 3px 0 2px var(--px-line); border-radius:10px}
.cmd{padding:6px}
.dialog p{font-family:"Pixelify Sans", monospace; font-size:17px}
.type{font-family:var(--caps); font-weight:400; font-size:10px; border-radius:5px; box-shadow:0 2px 0 rgba(0,0,0,.25)}
.statusline{font-family:var(--caps); font-weight:400; letter-spacing:.04em; border-radius:10px; box-shadow:var(--retro)}
.bubble{border-radius:10px; box-shadow:0 0 0 3px var(--px-line), 0 5px 0 3px var(--px-line)}
.bubble::after{border-top-color:#fff}

/* ---------- wallet chip, panel, connect modal, toasts ---------- */
.wwrap{position:relative; margin-left:8px}
.wchip{display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font-family:var(--caps); font-size:12px; letter-spacing:.04em; color:#fff;
  background:linear-gradient(180deg,#4A8DFF,#0052FF); border-radius:10px; padding:7px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #0038B8, 0 0 14px rgba(0,82,255,.45)}
.wchip.on{background:rgba(255,255,255,.1); box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.wchip img{width:18px; height:18px; border-radius:4px}
.wchip .net{font-size:10px; background:var(--cb); color:#fff; border-radius:6px; padding:2px 6px}
.wchip .net.warn{background:var(--cb-dn)}
.wdot{color:var(--yellow)}
.wpanel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:320px; background:#fff; color:var(--cb-ink); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 0 0 2px var(--px-line), 0 6px 0 2px var(--px-line), 0 20px 40px rgba(0,0,0,.25)}
.wpanel[hidden]{display:none}
.wrow{display:flex; justify-content:space-between; align-items:center; gap:8px}
.waddr{font-family:ui-monospace,Consolas,monospace; font-size:12px; word-break:break-all; text-align:left; border:0; background:#F2F5FB; border-radius:8px; padding:8px 10px; cursor:copy; color:var(--cb-ink)}
.waddr.copied::after{content:" ✓ copied"; color:var(--cb)}
.wnet{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wnet .btn{padding:7px 12px; font-size:12px}
.wbal{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wbal div{background:#F5F8FF; border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; box-shadow:0 0 0 2px var(--px-soft)}
.wbal b{font-family:"Pixelify Sans",monospace; font-size:20px}
.wbal span{font-family:var(--caps); font-size:10px; color:var(--cb-2)}
.wwatch{display:flex; flex-wrap:wrap; gap:6px}
.wmodal{position:fixed; inset:0; z-index:100; background:rgba(7,12,44,.55); display:grid; place-items:center; padding:16px}
.wbox{width:min(420px,100%); background:#fff; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 0 0 3px var(--px-line), 0 7px 0 3px var(--px-line), 0 30px 60px rgba(0,0,0,.35)}
.wlist{display:flex; flex-direction:column; gap:6px}
.wopt{display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; border:0; cursor:pointer; background:#fff; border-radius:10px; padding:10px 12px;
  font-family:"Pixelify Sans",monospace; font-size:17px; color:var(--cb-ink); box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft); text-align:left}
.wopt:hover{box-shadow:0 0 0 2px var(--cb), 0 3px 0 2px #0038B8}
.wopt img{width:32px; height:32px; border-radius:8px}
.wgo{color:var(--cb)}
.wlinks{display:flex; flex-wrap:wrap; gap:6px}
.wlinks .btn{font-size:11px; padding:8px 10px}
.btn.watch.on{box-shadow:0 0 0 2px var(--cb), 0 3px 0 2px #0038B8; color:var(--cb)}
#toasts{position:fixed; right:16px; bottom:16px; z-index:90; display:flex; flex-direction:column; gap:8px; max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex; gap:10px; align-items:flex-start; background:#fff; border-radius:12px; padding:10px 12px; transition:opacity .35s, transform .35s;
  box-shadow:0 0 0 3px var(--px-line), 0 6px 0 3px var(--px-line), 0 16px 30px rgba(0,0,0,.25)}
.toast.out{opacity:0; transform:translateY(8px)}
.toast img{width:40px; height:40px; border-radius:8px; background:var(--cb); flex:none}
.toast p{margin:0; font-family:"Pixelify Sans",monospace; font-size:15px; line-height:1.35; color:var(--cb-ink)}
.toast a{color:var(--cb)}
@media (max-width:860px){
  .shell-top{align-items:center}
  .wwrap{margin-left:auto}
  .wpanel{position:fixed; left:8px; right:8px; top:64px; width:auto}
  #toasts{bottom:88px}
}
/* fixes: header rows inside sheets were block-level, so Close sat on top of the label */
.sheet .row,.statbox .row,.wbox .wrow{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet .row .chip{flex:none}
.panel.empty{max-width:100%; overflow:hidden}
.panel.empty .dialog{max-width:100%; box-sizing:border-box}
/* card book */
.bookchip{background:var(--cb-lt); color:var(--cb); font-weight:700}
.bookchip:hover{background:#D9E4FF}
.cardbook{margin-top:12px; background:#fff; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:0 0 0 2px var(--cb), 0 4px 0 2px #0038B8; text-align:left}
.cardbook[hidden]{display:none}
.book-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.book-head .cap{flex:1; min-width:180px}
.book-q{font-family:"Pixelify Sans",monospace; font-size:15px; border:0; border-radius:8px; padding:8px 10px; background:#F5F8FF; box-shadow:0 0 0 2px var(--px-soft); min-width:180px}
.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; max-height:420px; overflow:auto; padding:4px}
.book-card{display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--cb-ink); background:#fff; border-radius:10px; padding:9px 10px; box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft)}
.book-card:hover{box-shadow:0 0 0 2px var(--cb), 0 3px 0 2px #0038B8}
.book-card .type{align-self:flex-start}
.bn{font-family:"Pixelify Sans",monospace; font-weight:700; font-size:16px}

/* =========================================================================================
   v1.1 — readability: clean Inter for everything you read (body, numbers, labels, buttons, chips);
   pixel type only on big headlines. Pixel frames, meters, art and the shell keep the retro feel.
   ========================================================================================= */
:root{--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --caps:"Inter", system-ui, sans-serif}
body{font-family:var(--sans); font-size:15px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.note{font-family:var(--sans); font-size:13.5px; line-height:1.5}
.big,.bm-stats b,.hstats b,.pack .price,.pp-v,.tv,.rip-v,.kv b,.chg,.bm-name,.pd-name,.pp-n,.live-n,.bn,.stages .st,.route .pk,.route .odds,.route .cost,
.copy .v,.pull .v,.pull .ago,.chaselist .v,.wbal b,.au-row,.an,.tn,.dialog p,.toast p,.wopt,.search input,.cmd-row input,.ea-form input,.pg-form input,.budget-row input,.book-q,
.route .i,.trow .rk,.bdg,.tier .cap,.pull .t,.pp-m .note{font-family:var(--sans); letter-spacing:-.005em}
.big,.bm-stats b,.hstats b,.pack .price,.pp-v,.bm-name,.pd-name,.stages .st{font-weight:800}
.bm-stats b{font-size:22px} .hstats b{font-size:18px}
.pp-n,.live-n,.bn,.route .pk,.an,.tn{font-weight:700}
.dialog p{font-size:15px; line-height:1.5}
/* labels & section heads: clean uppercase instead of tiny pixel caps */
.cap,.hd,.hd.navy,.bm-stats span,.hstats span,.kv span,.stages b,.wbal span,.ins-t,.ea-title,.book-head .cap{font-family:var(--sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.cap{font-size:11px}
.hd,.hd.navy{font-size:13px; letter-spacing:.1em}
.ea-title,.ins-t{font-size:13px}
/* buttons, tabs, chips: clean bold */
.btn{font-family:var(--sans); font-weight:800; letter-spacing:.02em; font-size:14px}
.btn.lg{font-size:15px; letter-spacing:.04em}
.menu a{font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0}
.chip,.qchip,.step,.type,.wchip,.au-v,.pill,.statusline{font-family:var(--sans); font-weight:700; letter-spacing:.02em}
.chip,.qchip{font-size:12.5px}
.type{font-size:10px; letter-spacing:.05em}
.statusline{font-size:13px}
.term{font-family:ui-monospace, "SFMono-Regular", Consolas, monospace}
/* pixel type kept for big headlines only */
.hh h1,.market-head h1,.entry-head .big,.foe-card .big{font-family:"Pixelify Sans", monospace; letter-spacing:.01em}


/* ---------- v1.2 MARKETS index ---------- */
.mk{display:flex; flex-direction:column; gap:14px; padding:6px}
.mk-head{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:end; background:linear-gradient(100deg,#0A1238,#0E1540 60%,#13307F); color:#fff; border-radius:14px; padding:20px 22px;
  box-shadow:0 0 0 3px var(--px-line), 0 6px 0 3px var(--px-line)}
.mk-head h1{margin:4px 0 8px; font-family:"Pixelify Sans",monospace; font-size:clamp(28px,3vw,42px); line-height:1.05; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.4)}
.mk-head .cap{color:#7FA6FF}
.mk-head .lead{color:#C9D4F5; font-size:15px; max-width:56ch}
.mk-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.mk-tiles div{background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.16); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column}
.mk-tiles b{font-size:22px; font-weight:800}
.mk-tiles span{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#AEB9E0}
.mk-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mk-cats{display:flex; gap:6px; flex-wrap:wrap; flex:1}
.mk-cats .ct{opacity:.65; margin-left:3px}
.mk-q{font-family:var(--sans); font-size:14px; border:0; border-radius:8px; padding:9px 12px; background:#fff; box-shadow:0 0 0 2px var(--px-soft); min-width:200px}
.mk-table{background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--retro)}
.mk-row{display:grid; grid-template-columns:34px minmax(210px,1.6fr) repeat(5,minmax(62px,.62fr)) minmax(180px,1.5fr) minmax(64px,.6fr) minmax(64px,.6fr); gap:8px; align-items:center;
  padding:10px 14px; border-top:1px solid var(--cb-line); text-decoration:none; color:var(--cb-ink); transition:background .12s}
a.mk-row:hover{background:#F2F6FF}
.mk-th{border-top:0; background:#F5F8FF; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cb-2); position:sticky; top:0; z-index:2}
.th{border:0; background:none; font:inherit; color:inherit; text-align:right; cursor:pointer; padding:0; text-transform:inherit; letter-spacing:inherit}
.th.on{color:var(--cb)}
.mk-th > span:nth-child(2){text-align:left}
.mk-i{color:var(--cb-2); font-weight:700; font-size:13px}
.mk-pack{display:flex; align-items:center; gap:10px; min-width:0}
.mk-pack img{width:34px; height:44px; object-fit:contain; flex:none}
.mk-pack > span{display:flex; flex-direction:column; min-width:0}
.mk-pack b{font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-n{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:14px}
.mk-n b.pos{color:var(--cb-up)}
.mk-chase{display:flex; align-items:center; gap:8px; min-width:0}
.mk-chase .thumb{width:30px; height:40px}
.mk-chase > span{display:flex; flex-direction:column; min-width:0}
.mk-chase b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-th .th:nth-of-type(6){text-align:left}
/* market page header */
.mkt-hero{display:grid; grid-template-columns:90px minmax(0,1fr) minmax(220px,300px); gap:18px; align-items:center; background:#fff; border-radius:14px; padding:16px 18px; margin:6px 6px 12px; box-shadow:var(--retro-hi)}
.mkt-art{width:90px; height:auto; max-height:120px; object-fit:contain}
.mkt-main h1{margin:2px 0 10px; font-family:"Pixelify Sans",monospace; font-size:clamp(24px,2.4vw,34px); line-height:1.05}
.mkt-stats{gap:6px 24px}
.avail{display:flex; flex-direction:column; gap:6px}
.av-row{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; text-decoration:none; color:var(--cb-ink); background:#F5F8FF; border-radius:8px; padding:7px 10px; font-size:14px}
.av-row .note{grid-column:2; font-size:12px}
.av-row.live{box-shadow:0 0 0 2px var(--cb)}
.av-row.live:hover{background:#E8EEFF}
.av-p{font-weight:800; color:var(--cb)}
.av-row.soon{opacity:.7}
.pill.soon{background:#EEF0F3; color:var(--cb-2)}
.cost .sub{display:block; font-size:11px; font-weight:600; color:var(--cb-2)}
.thesis{background:#fff; border-radius:12px; padding:12px 16px; font-size:15px; line-height:1.55; box-shadow:0 0 0 2px var(--cb), 0 4px 0 2px #0038B8}
.thesis b{color:var(--cb)}
.thesis span{font-weight:700}
.thesis a{color:var(--cb); font-weight:800; text-decoration:none; white-space:nowrap}
@container scr (max-width:1100px){
  .mk-row{grid-template-columns:30px minmax(170px,1.5fr) repeat(3,minmax(60px,.6fr)) minmax(70px,.7fr) minmax(60px,.6fr)}
  .mk-row > :nth-child(4),.mk-row > :nth-child(6),.mk-row > :nth-child(8){display:none}
  .mkt-hero{grid-template-columns:70px minmax(0,1fr)}
  .mkt-art{width:70px}
  .avail{grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@container scr (max-width:640px){
  .mk-head{grid-template-columns:1fr; padding:16px}
  .mk-row{grid-template-columns:minmax(0,1fr) auto auto; row-gap:4px; padding:10px 12px}
  .mk-th{display:none}
  .mk-row > *{display:none}
  .mk-row > .mk-pack,.mk-row > :nth-child(3),.mk-row > :nth-child(5),.mk-row > :nth-child(7){display:block}
  .mk-row > .mk-pack{display:flex}
  .mk-n::before{content:attr(data-l); display:block; font-size:10px; font-weight:700; color:var(--cb-2); text-transform:uppercase; letter-spacing:.06em}
  .mk-row{grid-template-columns:minmax(0,1fr) 64px 64px 64px}
  .mk-q{min-width:0; flex:1}
  .mkt-stats{gap:6px 16px}
}

/* =========================================================================================
   v1.2 fonts (owner's reference): Jersey 15 for headings, Handjet for body / numbers / labels.
   Both are readable condensed pixel faces; Handjet runs narrow, so sizes go up a step.
   ========================================================================================= */
:root{--sans:"Handjet", "Inter", system-ui, sans-serif; --caps:"Handjet", "Inter", system-ui, sans-serif; --head:"Jersey 15", "Handjet", sans-serif}
body{font-family:var(--sans); font-size:19px; font-weight:500; letter-spacing:.01em; -webkit-font-smoothing:antialiased}
.note{font-family:var(--sans); font-size:17px; font-weight:500; line-height:1.35}
.big,.bm-stats b,.hstats b,.pack .price,.pp-v,.tv,.rip-v,.kv b,.chg,.bm-name,.pd-name,.pp-n,.live-n,.bn,.stages .st,.route .pk,.route .odds,.route .cost,
.copy .v,.pull .v,.pull .ago,.chaselist .v,.wbal b,.au-row,.an,.tn,.dialog p,.toast p,.wopt,.search input,.cmd-row input,.ea-form input,.pg-form input,.budget-row input,.book-q,
.route .i,.trow .rk,.bdg,.tier .cap,.pull .t,.pp-m .note,.mk-n,.mk-pack b,.mk-chase b,.mk-tiles b,.av-row,.thesis,.mk-q,.statusline{font-family:var(--sans); letter-spacing:.01em}
.big,.bm-stats b,.hstats b,.pack .price,.pp-v,.bm-name,.pd-name,.stages .st,.mk-tiles b,.mk-pack b,.kv b,.mk-n{font-weight:700}
.bm-stats b{font-size:28px} .hstats b{font-size:24px} .mk-tiles b{font-size:28px} .pack .price{font-size:28px} .pp-v{font-size:22px}
.pp-n,.live-n,.bn,.route .pk,.an,.tn,.mk-pack b{font-weight:700; font-size:19px}
.mk-n{font-size:18px} .mk-chase b{font-size:17px}
.dialog p{font-size:21px; line-height:1.3}
.toast p{font-size:18px}
.cap,.hd,.hd.navy,.bm-stats span,.hstats span,.kv span,.stages b,.wbal span,.ins-t,.ea-title,.book-head .cap,.mk-th,.mk-tiles span{font-family:var(--caps); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.cap{font-size:14px} .bm-stats span,.hstats span,.mk-tiles span{font-size:13px}
.btn{font-family:var(--caps); font-weight:700; font-size:18px; letter-spacing:.06em}
.btn.lg{font-size:20px}
.menu a{font-family:var(--caps); font-weight:600; font-size:18px; letter-spacing:.04em}
.chip,.qchip,.step,.wchip,.au-v,.pill,.statusline{font-family:var(--caps); font-weight:700; letter-spacing:.04em}
.chip,.qchip{font-size:16px}
.type{font-family:var(--caps); font-weight:700; font-size:13px; letter-spacing:.06em}
/* headings: Jersey 15 */
.hh h1,.market-head h1,.mk-head h1,.mkt-main h1,.entry-head .big,.foe-card .big,.hd,.hd.navy,.ea-title,.ins-t,.stages .st,.bm-name,.pd-name{font-family:var(--head); font-weight:400; letter-spacing:.03em}
.hd,.hd.navy{font-size:22px; letter-spacing:.06em}
.ea-title,.ins-t{font-size:20px}
.stages .st{font-size:24px} .bm-name{font-size:26px} .pd-name{font-size:32px}
.hh h1{font-size:clamp(36px,4vw,60px)} .market-head h1,.mk-head h1{font-size:clamp(32px,3.2vw,48px)} .mkt-main h1{font-size:clamp(30px,2.8vw,42px)}
.term{font-family:ui-monospace, "SFMono-Regular", Consolas, monospace; font-size:13px}
/* top bar a step bigger */
.gb-screen .brand img{height:38px}
.menu a,.gb-screen .menu a{font-size:21px; padding:9px 16px}
.menu a img{width:24px; height:24px}
.gb-screen .shell-label{font-size:17px; padding:6px 14px 6px 7px}
.gb-screen .shell-label img{width:26px; height:26px}
.wchip{font-size:18px; padding:9px 16px}
.wchip img{width:22px; height:22px}
/* hero command box: dark blue */
.cmd{background:linear-gradient(180deg,#13307F,#0A1A55); box-shadow:0 0 0 2px #3D6BFF, 0 4px 0 2px #0A1238, 0 10px 30px rgba(0,0,0,.3)}
.cmd-row input{color:#fff}
.cmd-row input::placeholder{color:#AFC4FF}
.cmd-ico{color:#AFC4FF}
/* live activity rows: bigger text, blue sub-line */
.pull .t{font-size:22px; font-weight:600}
.pull .s{font-size:18px; color:var(--cb); font-weight:600}
.pull .v{font-size:22px}
.pull .ago{font-size:17px}
.pull .thumb{width:52px; height:68px}
.pull{grid-template-columns:26px 52px minmax(0,1fr) auto 48px}
@container scr (max-width:640px){
  .mk-bar{flex-direction:column; align-items:stretch}
  .mk-cats{flex-wrap:nowrap; overflow-x:auto; padding:3px 3px 8px; scrollbar-width:none}
  .mk-cats .chip{flex:none}
  .mk-q{width:100%}
}
@container scr (max-width:640px){ .mk,.mk-bar,.mk-cats,.mk-table{min-width:0; max-width:100%} .mk-cats{width:100%} }
/* X profile link */
.xlink{display:inline-flex; align-items:center; gap:7px; margin-left:auto; text-decoration:none; color:#fff; font-family:var(--caps); font-weight:700; font-size:17px; letter-spacing:.03em;
  background:#000; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 14px 6px 10px}
.xlink:hover{background:#15181d}
.xmark{font-size:18px; line-height:1}
.gb-screen .xlink + .shell-label{margin-left:8px}
.xfoot{color:var(--cb); font-weight:700; text-decoration:none; white-space:nowrap}
.xfoot:hover{text-decoration:underline}
@media (max-width:860px){ .xlink{margin-left:auto; padding:6px 10px} .xlink .xh{display:none} .wwrap{margin-left:8px} }
/* venue filter row */
.mk-venues{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mk-venues .cap{margin-right:4px}
.soonchip{opacity:.55; cursor:default}
@container scr (max-width:640px){ .mk-venues{flex-wrap:nowrap; overflow-x:auto; padding:3px 3px 8px; min-width:0; max-width:100%; scrollbar-width:none} .mk-venues .chip{flex:none} }
/* DROPS — coming soon */
.drops{position:relative; border-radius:14px; overflow:hidden; background:#05060C; margin:6px; box-shadow:0 0 0 3px var(--px-line), 0 6px 0 3px var(--px-line)}
.drops-img{display:block; width:100%; height:auto; max-height:78vh; object-fit:cover}
.drops-over{position:absolute; left:0; right:0; bottom:0; padding:28px 30px; background:linear-gradient(0deg, rgba(3,5,14,.92) 0%, rgba(3,5,14,.6) 55%, transparent 100%)}
.drops-over .cap{color:#7FA6FF}
.drops-over h1{margin:6px 0 0; font-family:var(--head); font-weight:400; font-size:clamp(40px,5vw,72px); letter-spacing:.04em; color:#fff; text-shadow:0 0 30px rgba(0,82,255,.6)}
@media (max-width:860px){ .tabbar{grid-template-columns:repeat(6,1fr)} .tabbar a{font-size:10px} }
@media (min-width:861px){ .drops-img{max-height:58vh; object-position:50% 40%} }
/* v1.3 drops: never crop the art — show it whole, headline sits in the image's empty left side */
.drops{aspect-ratio:3 / 2; max-height:calc(100% - 12px)}
.drops-img{width:100%; height:100%; max-height:none; object-fit:contain; background:#05060C}
@media (min-width:861px){ .drops-img{max-height:none} .drops{max-height:none; width:min(100%, calc((100vh - 290px) * 1.5)); margin:6px auto} }
.drops-over{top:0; right:auto; bottom:0; width:42%; display:flex; flex-direction:column; justify-content:center; padding:24px 28px; background:none}
@media (max-width:860px){ .drops{aspect-ratio:auto} .drops-img{height:auto} .drops-over{position:static; width:auto; padding:16px 18px 20px; background:#05060C} }
/* Powered by cards */
.powered{margin:12px 0 4px; padding:14px; background:#fff; border-radius:12px; box-shadow:var(--retro)}
.powered > .cap{color:var(--cb); margin-bottom:10px}
.pw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.pw-card{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; text-decoration:none; color:var(--cb-ink); background:#F5F8FF; border-radius:10px; padding:10px 12px;
  box-shadow:0 0 0 2px var(--px-soft), 0 3px 0 2px var(--px-soft); transition:transform .12s, box-shadow .12s}
.pw-card:hover{transform:translateY(-2px); box-shadow:0 0 0 2px var(--cb), 0 4px 0 2px #0038B8}
.pw-card img{width:34px; height:34px; object-fit:contain}
.pw-card > span{display:flex; flex-direction:column; min-width:0}
.pw-card b{font-family:var(--head); font-weight:400; font-size:21px; letter-spacing:.03em}
.pw-card .note{font-size:15px; line-height:1.25}
@media (max-width:860px){ .powered{margin:12px 0 4px} .pw-grid{grid-template-columns:1fr 1fr} .pw-card{grid-template-columns:30px minmax(0,1fr)} .pw-card .pill{display:none} }
@container scr (min-width:861px){ .pw-grid{grid-template-columns:repeat(3,1fr)} }
@container scr (min-width:1400px){ .pw-grid{grid-template-columns:repeat(6,1fr)} }