/* Phone layout (js/mobile.js). Loaded last so it wins over style.css / hud.css.
   Compact: Nutty gets the screen. Top-right shows only market cap + nuts busted; one slim "next bust" strip sits
   above a one-row button bar. Everything else (stats, tension, level, bonding, trades) lives in a slide-up sheet. */
#m-details, #m-close, #m-trade { display: none; }

@media (max-width: 640px) {
  body:not(.stream) #side { width: auto; max-width: 46vw; gap: 6px; justify-items: end; }
  body:not(.stream) .mc { padding: 7px 10px 6px; text-align: right; }
  body:not(.stream) .mc .k, body:not(.stream) .mc #ath, body:not(.stream) .mc .more, body:not(.stream) #stats { display: none; }
  body:not(.stream) .mc .v { font-size: 24px; line-height: 1; }
  body:not(.stream) .mc .sub { justify-content: flex-end; margin-top: 3px; }
  body:not(.stream) .nuts { font-size: 11px; padding: 3px 4px 3px 6px; box-shadow: 0 3px 0 var(--edge); }
  body:not(.stream) .nuts svg { width: 18px; height: 18px; }
  body:not(.stream) .nuts b { font-size: 16px; min-width: 30px; padding: 2px 7px 1px; }
  body:not(.stream) .trades { display: none; }
  #m-details { display: inline-flex; align-items: center; gap: 4px; font: 900 11px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--panel); border: 2px solid var(--edge); border-radius: 999px; padding: 7px 10px; box-shadow: 0 3px 0 var(--edge); cursor: pointer; }
  body.stream #m-details { display: none; }

  /* latest trade: a small pill under the chips, fades after a few seconds */
  #m-trade { display: block; position: fixed; right: max(var(--gut), env(safe-area-inset-right)); top: var(--m-trade-top, 150px); z-index: 5; font: 900 12px/1 var(--body); padding: 6px 9px; border-radius: 999px; border: 2px solid var(--edge); background: var(--panel); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; }
  #m-trade.show { opacity: 1; transform: none; }
  #m-trade.buy b { color: var(--buy, #7ee081); } #m-trade.sell b { color: #ff6b7f; }
  body.stream #m-trade, body.m-sheet #m-trade { display: none; }

  /* slim next-bust strip above the bar; the other meters live in the sheet */
  body:not(.stream):not(.m-sheet) #progress { position: fixed; left: max(var(--gut), env(safe-area-inset-left)); right: max(var(--gut), env(safe-area-inset-right)); bottom: calc(var(--m-bar-h, 96px) + max(var(--gut), env(safe-area-inset-bottom)) + 6px); padding: 7px 10px; gap: 0; border-radius: 12px; }
  body:not(.stream):not(.m-sheet) #progress .tension, body:not(.stream):not(.m-sheet) #progress .lvl, body:not(.stream):not(.m-sheet) #progress .bond { display: none; }
  body:not(.stream):not(.m-sheet) #progress .pbar { height: 7px; margin-top: 4px; }

  /* bottom bar: compact heat row + one row of buttons */
  #bar { gap: 7px; padding: 8px 9px 9px; border-radius: 14px; }
  #bar .heat .row { margin-bottom: 4px; }
  #bar .word { font-size: 17px; }
  #bar .meter { height: 11px; }
  #bar .btns { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 6px; }
  #bar .btn { padding: 9px 10px; font-size: 13px; min-height: 40px; }
  #bar .btn .long, #bar .btn .m-long { display: none; }
  #bar #copy { font-size: 12px; padding: 9px 8px; }
  #bar #xl:not([hidden]) { grid-column: auto; }
  .m-short { display: inline; }

  /* the sheet: everything, full width, scrollable */
  body.m-sheet #side { position: fixed; left: 0; right: 0; top: auto; bottom: 0; max-width: none; width: auto; max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain; justify-items: stretch; gap: 10px; padding: 44px 12px max(14px, env(safe-area-inset-bottom)); background: var(--bg); border-top: 3px solid var(--edge); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.5); z-index: 30; animation: mSheet .22s ease-out; }
  body.m-sheet .mc { text-align: left; }
  body.m-sheet .mc .k, body.m-sheet .mc #ath { display: revert; }
  body.m-sheet .mc .sub { justify-content: space-between; }
  body.m-sheet #stats { display: grid; grid-template-columns: 1fr 1fr; }
  body.m-sheet .trades { display: block; }
  body.m-sheet #tl li:nth-child(n + 5) { display: grid; }
  body.m-sheet #m-details { display: none; }
  body.m-sheet #m-close { display: grid; place-items: center; position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: inherit; font-size: 20px; cursor: pointer; }
  body.m-sheet #m-close::before { content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); }
  body.m-sheet::after { content: ""; position: fixed; inset: 0; background: rgba(8,5,14,.45); z-index: 29; }
  @keyframes mSheet { from { transform: translateY(40px); opacity: .4; } }
}
@media (min-width: 641px) { .m-short { display: none; } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { body.m-sheet #side { animation: none; } }
/* #hud is position:fixed (its own stacking context), so lift it over the sheet's dimmer. */
@media (max-width: 640px) { body.m-sheet #hud { z-index: 31; } }
@media (max-width: 640px) {
  body.m-sheet #stats { column-gap: 22px; row-gap: 6px; }
  body.m-sheet #stats div { display: flex; justify-content: space-between; gap: 8px; }
  body:not(.stream) #brand .badge { max-width: none; white-space: nowrap; font-size: 8.5px; padding: 4px 6px; }
}
/* one row whatever buttons are present (X appears once configured): Buy takes the spare width */
@media (max-width: 640px) {
  #bar .btns { display: flex; }
  #bar .btns > * { flex: none; }
  #bar #buy { flex: 1 1 auto; min-width: 0; }
  body:not(.stream) #brand #example-badge { max-width: 170px; white-space: normal; line-height: 1.25; }
}
/* Stream mode is a desktop/OBS thing; keep the phone bar to one row. */
@media (max-width: 640px) { #stream-open { display: none; } }