/* mobile.css — the phone layer for both front doors (santahat.gold, launchvalhalla.fun).
   Loaded LAST (after style.css and the brand skin). Every rule lives inside a max-width media query, so desktop is untouched.
   Santa-only looks are scoped with html:not([data-brand="valhalla"]); Valhalla keeps its own header and type.
   Targets: no sideways scroll, 44px primary actions, 36–40px secondary controls, 16px+ in anything you type into,
   12px+ readable text, nothing important under a fixed bar, the trade box within one thumb-scroll of the chart. */

@media (max-width:760px){
  /* ---------- 0. base: no double-tap zoom delay, honest text size, safe areas ---------- */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(108px + env(safe-area-inset-top));scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .vb-modal :where(input,select,textarea){scroll-margin-bottom:96px}
  a,button,.btn,input,select,textarea,label,summary,[role=button]{touch-action:manipulation}
  body{-webkit-tap-highlight-color:rgba(255,200,90,.16)}
  main{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  /* iOS zooms the page on focus below 16px: a floor for every field (zero specificity, so sized fields keep their own size) */
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){font-size:max(16px,1em)}
  html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html select:not(.dd-native),html[data-brand] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html[data-brand] select:not(.dd-native){min-height:44px;box-sizing:border-box}
  /* primary actions: 44px tall (both skins set 38px for desktop) */
  html .btn,html[data-brand] .btn{min-height:44px}
  .dd .dd-btn{min-height:40px}
  /* a sheet or dialog is open: the page behind it stays put */
  html:has(.vb-overlay:not([hidden])),html:has(.gw-ov:not([hidden])){overflow:hidden}
  .vb-overlay,.gw-ov,.vb-modal,.gw-modal{overscroll-behavior:contain}

  /* ---------- 1. header (Santa): one compact row + a swipeable nav strip ---------- */
  html:not([data-brand="valhalla"]) header{padding:calc(6px + env(safe-area-inset-top)) 12px 0;gap:6px 10px;row-gap:6px}
  html:not([data-brand="valhalla"]) header img{width:32px;height:32px}
  html:not([data-brand="valhalla"]) header .brand{font-size:17px}
  html:not([data-brand="valhalla"]) #wallet .btn{min-height:40px;padding:0 14px;font-size:16px}
  html:not([data-brand="valhalla"]) header nav{margin:0 -12px;padding:2px 40px 8px 12px;width:calc(100% + 24px);gap:6px;scroll-padding-inline:12px;scroll-snap-type:x proximity}
  html:not([data-brand="valhalla"]) header nav>a:not([hidden]),html:not([data-brand="valhalla"]) header .nav-drop{min-height:38px;padding:0 14px;font-size:16px;display:inline-flex;align-items:center;scroll-snap-align:start}
  /* the strip scrolls: a fade at its right edge says so (an overlay, so the Activities menu below is never masked) */
  html:not([data-brand="valhalla"]) header::after{content:'';position:absolute;right:0;bottom:3px;width:40px;height:48px;pointer-events:none;background:linear-gradient(90deg,rgba(36,27,18,0),#241b12 75%);z-index:2}
  .nav-menu a{min-height:44px;justify-content:center}
  html[data-brand="valhalla"] header nav>a:not([hidden]),html[data-brand="valhalla"] header .nav-drop{min-height:36px;display:inline-flex;align-items:center}

  /* king bar under the header: a full-height tap row; hidden on the board, where the King panel already says it */
  .king-bar{min-height:44px;box-sizing:border-box;padding-left:12px;padding-right:12px}
  .king-bar .kb-go{padding:4px 10px;flex:none}
  .king-bar>b{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .king-bar>em{flex:none}
  .king-bar>img{flex:none}
  body:not(.tok):has(#s-eco.on #ecoKing:not([style*="none"])) #kingBar{display:none}

  /* ---------- 2. fixed things at the bottom: the install chip slimmer, the toast above it ---------- */
  .gw-appchip{left:10px;right:10px;padding:8px 8px 8px 10px;gap:8px;border-radius:12px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .gw-appchip img{width:36px;height:36px}
  .gw-appchip b{font-size:16px}
  .gw-appchip small{font-size:13px;line-height:1.25}
  .gw-appchip .btn{min-height:40px;padding:0 14px}
  .gw-appchip .gw-chipx{width:40px;height:40px}
  body.gw-chip-on{padding-bottom:calc(80px + env(safe-area-inset-bottom))}

  /* ---------- 3. sheets: every dialog rises from the bottom, inside the screen, actions pinned under the thumb ---------- */
  .vb-overlay{align-items:flex-end;padding:0;padding-top:env(safe-area-inset-top)}
  .vb-modal{width:100%;max-width:none;box-sizing:border-box;border-radius:16px 16px 0 0;max-height:calc(100dvh - 24px - env(safe-area-inset-top));overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 16px calc(14px + env(safe-area-inset-bottom));animation:gwUp .22s ease-out}
  .vb-modal::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:rgba(255,220,150,.28);margin:-4px auto 10px}
  .vb-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));z-index:3;margin:10px -16px calc(-14px - env(safe-area-inset-bottom));padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(23,17,11,0),var(--panel2,#17110b) 14px);flex-wrap:nowrap;gap:8px}
  .vb-actions .btn{min-width:0;flex:1 1 0;min-height:48px;padding:0 10px}
  .vb-actions .btn:not(.sec){flex-grow:1.6}
  .vb-actions>:not(.btn){flex:0 0 auto}

  /* ---------- 4. readable minimums (the pixel fonts read smaller than their size) ---------- */
  .claim .t{font-size:12px;line-height:1.5}
  .src-tag{font-size:12px}
  .king-id b em,.king-strip .king-id em{font-size:12px}
  .tr-chip{font-size:12px}
  html[data-brand="valhalla"] .cl-x small,html[data-brand="valhalla"] .cl-coin small,html[data-brand="valhalla"] .cl-when small,html[data-brand="valhalla"] .cl-row small,html[data-brand="valhalla"] .ft-card small{font-size:12.5px}
  html[data-brand="valhalla"] .stat>span,html[data-brand="valhalla"] .vh-stat>span,html[data-brand="valhalla"] .tp small,html[data-brand="valhalla"] .ge-tape-h span,html[data-brand="valhalla"] .gs-h,html[data-brand="valhalla"] .pts-badge.sm,html[data-brand="valhalla"] .pc-grad span,html[data-brand="valhalla"] .lq-tag,html[data-brand="valhalla"] .cup-name i.live,html[data-brand="valhalla"] .king-mini span,html[data-brand="valhalla"] .sf-grade small{font-size:12px}
  .tt-who .fl-btn,.fl-btn{font-size:13px;min-height:30px;padding:0 10px;position:relative}
  .fl-btn::before{content:'';position:absolute;inset:-7px -4px}
  #ttWinLbl{font-size:12px}
  .kms-k em{font-size:12px}
  .king-mini span{font-size:12px}
  .pl-step small{font-size:12px}
  .lp-risk-h{font-size:12px}
  .cup-row b,.ge-cup .cup-row b{font-size:12px}
  .cup-clock span{font-size:12px}
  .sf-grade small{font-size:12px}
  #ecoToken .ge-row .rk{font-size:11px}
  #ecoToken .ge-row .it b{font-size:12px}

  /* ---------- 5. segmented controls and chips: 36–40px, scroll sideways with a fade instead of wrapping ---------- */
  .ge-tabs button,.tt-tabs button{min-height:40px}
  .tt-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sw-slip button{min-height:40px;min-width:44px}
  .pick{min-height:40px;min-width:44px}
  .stepper button{min-width:40px;min-height:40px}
  .ca-links a{min-height:40px;display:inline-flex;align-items:center}
  #quick button{min-height:40px;min-width:44px}
  .stat span a,.ca-chain a,.note>a,.tc-box a{display:inline-flex;align-items:center;min-height:32px;position:relative}
  .stat span a::before,.note>a::before,.tc-box a::before{content:'';position:absolute;inset:-6px -4px}
  .gs-btn{min-height:40px}
  .ge-links a{min-height:40px;display:inline-flex;align-items:center}
  .turbo-btn{min-height:40px}
  .claims-hist summary{min-height:40px;display:flex;align-items:center}
  .cup-how summary{min-height:40px;display:flex;align-items:center}
  .ge-check .btn,.ge-check input{min-height:44px}
  .kms-row{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
  .act-run .act{min-height:36px}

  /* ---------- 6. the board ---------- */
  /* the list first: King of the Hill, then the coins, then the Cup */
  #s-eco .ge-main{display:flex;flex-direction:column}
  #s-eco .ge-main>#ecoCup{order:5}
  /* King of the Hill, compact: crown + icon + name on one row, five figures in one row, the trade button full width */
  .king-strip{grid-template-columns:auto 44px minmax(0,1fr);gap:8px 10px}
  .king-strip .king-ic{width:44px;height:44px}
  .king-mini{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .king-mini div{min-width:0;padding:5px 2px}
  .king-mini b{font-size:15px;overflow:hidden;text-overflow:ellipsis}
  .king-strip .king-go{grid-column:1/-1;width:100%}
  /* the board's title block, compact */
  #ecoBoard .ge-title{gap:8px;margin-bottom:6px}
  #ecoBoard .ge-title img{width:28px;height:28px}
  #ecoBoard .ge-title span{font-size:15px;line-height:1.3}
  /* the tools: tier tabs, then search + sort, then the actions */
  #s-eco .ge-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);gap:8px;align-items:center}
  #s-eco .ge-tools>.ge-tabs{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  #s-eco .ge-tools>.ge-tabs button{min-width:0}
  #s-eco .ge-tools>#ecoFind{grid-column:1;grid-row:2;max-width:none;width:100%;min-width:120px;box-sizing:border-box}
  #s-eco .ge-tools>label{grid-column:2;grid-row:2;font-size:16px;gap:6px;min-width:0;max-width:48vw}
  #s-eco .ge-tools>label .dd{min-width:0;flex:1 1 auto}
  #s-eco .ge-tools>label .dd-btn{min-height:44px;font-size:16px;min-width:0;max-width:100%;width:auto}
  #s-eco .ge-tools>label .dd-sizer{display:none}
  #s-eco .ge-tools>.ge-acts{grid-column:1/-1}
  /* Launch a coin: a floating button at the thumb, always one tap away while you browse the board */
  #s-eco #ecoLaunch{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;min-height:52px;padding:0 20px;border-radius:999px;font-size:17px;box-shadow:0 0 0 2px #0a0805,0 10px 26px rgba(0,0,0,.6),0 0 18px rgba(255,180,70,.35)}
  #s-eco #ecoLaunch::before{content:'+';font-size:22px;line-height:1;margin-right:8px;font-weight:bold}
  body.gw-chip-on #s-eco #ecoLaunch{bottom:calc(86px + env(safe-area-inset-bottom))}
  body:has(.bb-tray:not([hidden])) #s-eco #ecoLaunch,body:has(.vb-overlay:not([hidden])) #s-eco #ecoLaunch{display:none}
  #s-eco .ge-board{padding-bottom:76px}
  /* the coin rows: two tight lines per coin — [icon] TICKER badges … price / MC · LP … 24h — the way a trading app lists coins */
  #ecoBoard .ge-wide .ge-th{display:none}
  #ecoBoard .ge-wide .ge-row{grid-template-columns:24px 38px max-content minmax(0,1fr) minmax(64px,max-content) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:1px;padding:9px 6px;min-height:62px;box-sizing:border-box;align-items:center}
  #ecoBoard .ge-row .rk{grid-column:1;grid-row:1/3;font-size:12px;text-align:center}
  #ecoBoard .ge-row .it,#ecoBoard .ge-row .it>span{display:contents}
  #ecoBoard .ge-row .ge-ic{grid-column:2;grid-row:1/3;width:38px;height:38px}
  #ecoBoard .ge-row .it b{grid-column:3/5;grid-row:1;display:flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;font-size:12px;line-height:1.6;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
  #ecoBoard .ge-row .it b>*{flex:none;margin-top:0}
  #ecoBoard .ge-row .it b .ge-mode,#ecoBoard .ge-row .it b .sg,#ecoBoard .ge-row .it b .sm-crest,#ecoBoard .ge-row .it b .ge-isle{display:inline-flex;align-items:center;font-size:14px;line-height:1.1;padding:1px 4px}
  #ecoBoard .ge-row .it b .soc{display:none}
  #ecoBoard .ge-row .it small{grid-column:4;grid-row:2;min-width:0;margin:0;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #ecoBoard .ge-wide .ge-row .lp-inline{display:inline}
  #ecoBoard .ge-wide .ge-row .lp-inline span{display:inline}
  #ecoBoard .ge-wide .ge-row .lp-inline span+span,#ecoBoard .ge-row .it small .nm{display:none}
  #ecoBoard .ge-wide .ge-row .mc{display:block;grid-column:3;grid-row:2;text-align:left;min-width:0}
  #ecoBoard .ge-row .mc b{font-size:15px;line-height:1.2;white-space:nowrap}
  #ecoBoard .ge-row .mc b:not(.tk-up):not(.tk-dn){color:var(--txt)}
  #ecoBoard .ge-row .mc b::before{content:'MC ';color:var(--dim)}
  #ecoBoard .ge-row .pr{grid-column:5;grid-row:1;align-self:end}
  #ecoBoard .ge-row .pr b{font-size:17px;white-space:nowrap}
  #ecoBoard .ge-row .pr small{display:none}
  #ecoBoard .ge-row .c24{grid-column:5;grid-row:2;align-self:start}
  #ecoBoard .ge-row .c24 b{font-size:16px;white-space:nowrap}
  #ecoBoard .ge-wide .ge-row .c5,#ecoBoard .ge-wide .ge-row .c1,#ecoBoard .ge-wide .ge-row .c4,#ecoBoard .ge-wide .ge-row .vol,#ecoBoard .ge-wide .ge-row .lp,#ecoBoard .ge-wide .ge-row .lpr{display:none}
  /* the sweep "+" on every row (always shown on touch): a real 28px circle with its glyph back (style.css 1520 turned its ::before into a hit area) */
  #ecoBoard .ge-row .go{grid-column:6;grid-row:1/3;width:28px;justify-content:center}
  #ecoBoard .ge-row .go em{display:none}
  #ecoBoard .ge-row .bb-add{position:relative;right:auto;top:auto;margin:0;width:28px;height:28px;font-size:17px}
  #ecoBoard .ge-row .bb-add::after{content:'+'}
  #ecoBoard .ge-row .bb-add.in::after{content:'\2713';font-size:14px}
  .q-up[hidden]{display:none}
  html[data-brand="valhalla"] #ecoBoard .ge-row .pr b{font-size:15px}
  html[data-brand="valhalla"] #ecoBoard .ge-row .c24 b{font-size:14px}
  html[data-brand="valhalla"] #ecoBoard .ge-row .mc b{font-size:13.5px}
  html[data-brand="valhalla"] #ecoBoard .ge-row .it small{font-size:13px}
  html[data-brand="valhalla"] #ecoBoard .ge-row .it b{font-size:13px}
  #ecoBoard .ge-row.base .rk,#ecoBoard .ge-row.gp .rk{font-size:0}
  #ecoBoard .ge-row.base .rk::before,#ecoBoard .ge-row.gp .rk::before{content:'\2605';font-size:15px;font-family:sans-serif;color:#ffd06a}

  /* ---------- 7. a coin's page: header, chart, then the trade box — not 5,000px further down ---------- */
  /* the token panel and the side column dissolve into one column so the trade box can sit right under the chart */
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) .ge{display:flex;flex-direction:column;gap:10px;background:linear-gradient(var(--panel),var(--panel2));border:1px solid var(--frame2,var(--edge));border-radius:8px;padding:12px 10px;box-shadow:0 0 0 2px #0a0805}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) .ge-main,#s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) .ge-side,#s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken{display:contents}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>*{order:10;margin-top:0;margin-bottom:0;min-width:0;align-self:stretch;width:auto;max-width:100%;box-sizing:border-box}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) .ge-side>*{order:20;margin:0;box-shadow:none;align-self:stretch;width:auto;max-width:100%;box-sizing:border-box}
  #geSafety:empty,#geGrow:empty,#geTrench:empty,#geRef:empty,.ge-gift:empty{display:none}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.ge-tok-head{order:1}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.ge-chartwrap{order:2}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) .ge-side>#ecoSwap{order:3}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.ge-gift{order:4}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.ge-stats{order:5}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.km-strip{order:6}
  #s-eco:has(#ecoToken>.ge-tok-head>.ge-tok-px) #ecoToken>.ge-ca{order:7}
  /* the head: back · icon · name on one row; price, 24h and Follow on the next */
  .ge-tok-head{display:grid;grid-template-columns:36px 52px minmax(0,1fr) auto;align-items:center;gap:8px 10px;margin-bottom:0}
  .ge-tok-head>.ge-back{grid-column:1;grid-row:1;width:40px;height:40px}
  .ge-tok-head>.ge-ic{grid-column:2;grid-row:1;width:52px;height:52px}
  .ge-tok-head>.ge-tok-id{grid-column:3;grid-row:1;min-width:0}
  .ge-tok-head>.soc{grid-column:4;grid-row:1;margin:0;gap:6px}
  .ge-tok-head>.soc .soc-b{width:38px;height:38px}
  .ge-tok-head>.ge-tok-px{grid-column:1/-1;grid-row:2;margin:0;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
  .ge-tok-head>.ge-tok-px>b{grid-column:1;font-size:28px}
  .ge-tok-head>.ge-tok-px>span{grid-column:1}
  .ge-tok-head>.ge-tok-px>.ge-watch{grid-column:2;grid-row:1/span 2;margin:0;min-height:40px}
  .ge-tok-head>.ge-tok-px.buy-pop>b{transform-origin:left center}
  .ge-tok-id>b{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ge-tok-id span{font-size:15px;line-height:1.3;display:block;overflow-wrap:break-word;word-break:normal}
  .ge-tok-id .ge-launcher{padding:4px 0}
  /* the chart: its controls in one swipeable row, the plot gets the height */
  .ge-chartwrap .ge-chart-src{position:static;justify-content:flex-end;margin:0 0 6px auto;width:max-content}
  .ge-chartwrap .ge-chart-src button{min-height:32px;padding:0 12px}
  .ge-ownchart{height:420px}
  .oc-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 8px;gap:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .oc-tools::-webkit-scrollbar{display:none}
  .oc-tools .tfs{flex:none}
  .oc-tools .tfs button{min-height:30px;padding:0 10px}
  .oc-tools .oc-legend{flex:none}
  .ge-chart{height:400px}
  /* the stats: three across, short tiles */
  .ge-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ge-stats div{padding:6px 8px;min-width:0}
  .ge-stats span{font-size:12px;letter-spacing:.04em}
  .ge-stats b{font-size:17px}
  /* the trade box */
  .ge-swap .sw-keys{display:none}
  .ge-swap .sw-go{min-height:52px;font-size:19px}
  .ge-swap .sw-max button,.ge-swap .sw-quick button{min-height:40px;min-width:52px}
  .ge-swap .sw-box{padding:8px 10px}
  /* long lists stay a scroll inside their own card, so the page under them is still reachable */
  #ecoTape{max-height:min(62vh,520px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #claims{max-height:min(60vh,480px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* the thumb-zone trade bar (created by the app.js patch in the mobile report; inert until then) */
  .m-trade{position:fixed;left:0;right:0;bottom:0;z-index:85;display:flex;align-items:center;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(46,36,26,.97),rgba(23,17,11,.98));border-top:1px solid var(--frame2,var(--edge));box-shadow:0 -10px 28px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .m-trade[hidden],.m-trade [hidden],html .m-trade .btn[hidden],html[data-brand] .m-trade .btn[hidden]{display:none}
  .m-trade .mt-id{flex:1;min-width:0;font-size:20px;font-weight:bold;color:var(--yel,#ffd76a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .m-trade .btn{min-height:50px;margin:0;font-size:18px;padding:0 16px;white-space:nowrap}
  .m-trade .mt-buy{flex:0 0 auto;min-width:44%}
  body:has(.m-trade:not([hidden])) .gw-appchip{display:none}
  body:has(.m-trade:not([hidden])){padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  body:has(.m-trade:not([hidden])) #toast{bottom:calc(84px + env(safe-area-inset-bottom))}

  /* ---------- 8. other pages ---------- */
  .pc .pc-buy{min-height:44px;min-width:56px}
  .cl-acts .linkbtn{min-height:40px;display:inline-flex;align-items:center;padding:0 8px}
  .lq-pool-h{flex-wrap:wrap}
}

/* ---------- narrow phones (≤420): the LP ratio drops out of the row, the row keeps one line of facts ---------- */
@media (max-width:420px){
  html[data-brand="valhalla"] #ecoBoard .ge-row .it small{display:none}
  .king-mini b{font-size:14px}
  .ge-tok-head{grid-template-columns:36px 46px minmax(0,1fr) auto;column-gap:8px}
  .ge-tok-head>.ge-ic{width:46px;height:46px}
}

/* ---------- the smallest phones (≤360): five King figures become three + two, the header brand shrinks ---------- */
@media (max-width:360px){
  html:not([data-brand="valhalla"]) header .brand{font-size:15px}
  html:not([data-brand="valhalla"]) #wallet .btn{padding:0 10px;font-size:15px}
  .king-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ecoBoard .ge-wide .ge-row{grid-template-columns:18px 32px max-content minmax(0,1fr) minmax(60px,max-content) auto;column-gap:6px}
  #ecoBoard .ge-row .ge-ic{width:32px;height:32px}
  #ecoBoard .ge-row .it small{display:none}
  .ge-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ge-tok-head>.soc .soc-b{width:34px;height:34px}
}