/* Grolly v0.5.6 — Mobile-first reflow
   This file deliberately overrides legacy fixed/absolute mobile positioning.
   Rule: on phones, content flows vertically. Only the bottom nav, arena HUD and
   decorative layers may be fixed/absolute. */

:root{
  --phone-gutter:clamp(10px,3.2vw,16px);
  --phone-gap:10px;
  --phone-nav:64px;
}

html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}

@media (max-width:820px){
  :root{--nav-h:var(--phone-nav);--arena-top-safe:max(env(safe-area-inset-top,0px),10px)}

  /* -------- app shell: one viewport, every screen owns a vertical scroller -------- */
  html,body{width:100%;height:100%;overscroll-behavior-x:none}
  body.app-shell{position:fixed!important;inset:0!important;width:100%!important;height:var(--app-height,100dvh)!important;min-height:0!important;overflow:hidden!important}
  .app-main{position:absolute!important;inset:0 0 calc(var(--nav-h) + env(safe-area-inset-bottom,0px)) 0!important;width:100%!important;height:auto!important;overflow:hidden!important}
  .view,.page-view{position:absolute!important;inset:0!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:auto!important;scrollbar-width:none!important}
  .view::-webkit-scrollbar,.page-view::-webkit-scrollbar{display:none!important}
  .page-view{padding:max(12px,calc(env(safe-area-inset-top,0px) + 8px)) var(--phone-gutter) 26px!important}
  .view *{min-width:0}

  /* no floating share pill covering content. Admin remains reachable but tiny. */
  .global-mobile-actions{position:fixed!important;z-index:85!important;top:auto!important;left:auto!important;right:max(8px,env(safe-area-inset-right,0px))!important;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 8px)!important;display:flex!important;gap:6px!important;transform:none!important;pointer-events:none!important}
  .global-mobile-actions>*{pointer-events:auto!important}
  .global-share-pill{display:none!important}
  .admin-float-btn{width:36px!important;height:36px!important;min-height:36px!important;border-radius:50%!important;font-size:15px!important}
  body.battle-arena-active .global-mobile-actions{display:none!important}

  /* -------- bottom nav -------- */
  .bottom-nav{position:fixed!important;z-index:80!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))!important;padding:4px max(3px,env(safe-area-inset-right,0px)) max(4px,env(safe-area-inset-bottom,0px)) max(3px,env(safe-area-inset-left,0px))!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important}
  .bottom-nav button{min-width:0!important;width:100%!important;min-height:50px!important;padding:2px 1px!important;gap:2px!important;font-size:clamp(7px,2.2vw,9px)!important;overflow:hidden!important}
  .bottom-nav .nav-icon{font-size:clamp(18px,5vw,22px)!important;line-height:1!important}
  .bottom-nav button span:last-child{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .bottom-nav button.active:after{bottom:1px!important;width:26px!important}
  .nav-dot{top:6px!important}

  /* -------- HOME: true document flow, no coordinate-based HUD -------- */
  #viewHome{padding:0!important;background:#06091a!important}
  #viewHome .habitat{
    position:relative!important;inset:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"hud" "stage" "skills" "actions"!important;
    grid-template-rows:auto auto auto auto!important;
    align-content:start!important;
    gap:10px!important;
    width:100%!important;height:auto!important;min-height:100%!important;max-height:none!important;
    padding:max(10px,calc(env(safe-area-inset-top,0px) + 6px)) var(--phone-gutter) 18px!important;
    overflow:hidden!important;
  }
  #viewHome .world-waterfall,#viewHome .world-castle,#viewHome .world-crystals,#viewHome .world-stars,#viewHome .world-vignette,#viewHome .fantasy-world:before{pointer-events:none!important}
  #viewHome .world-waterfall{height:38%!important;top:18%!important}
  #viewHome .world-castle{width:38%!important;height:22%!important;top:8%!important;right:-8%!important}
  #viewHome .world-crystals{bottom:8%!important;width:42%!important;opacity:.34!important}
  #viewHome .world-vignette{box-shadow:inset 0 0 80px rgba(0,0,0,.48)!important}

  .home-hud{
    grid-area:hud!important;position:relative!important;z-index:15!important;
    top:auto!important;left:auto!important;right:auto!important;
    display:grid!important;grid-template-columns:54px minmax(0,1fr) 54px!important;
    gap:7px!important;align-items:start!important;width:100%!important;padding:0!important;
  }
  .level-pill{width:54px!important;min-width:0!important;min-height:36px!important;padding:5px!important;border-radius:13px!important;gap:3px!important;font-size:8px!important;justify-content:center!important}
  .level-pill .crown{font-size:10px!important}.level-track{height:3px!important}
  .resource-stack{width:54px!important;gap:4px!important;align-items:stretch!important}
  .resource-pill.top-resource{width:54px!important;min-height:36px!important;padding:4px!important;gap:4px!important;justify-content:center!important;font-size:9px!important}
  .resource-pill.top-resource .gem{font-size:13px!important}.resource-pill.top-resource .resource-plus{display:none!important}
  .social-shards-pill{width:54px!important;justify-content:center!important;padding:4px 3px!important;font-size:7px!important}
  .home-identity{padding:0 1px!important;text-align:center!important;overflow:hidden!important}
  .home-name-row{gap:4px!important;max-width:100%!important}
  .home-name-row h1{font-size:clamp(21px,7vw,30px)!important;line-height:1!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .home-name-row .tiny-btn{width:25px!important;height:25px!important;min-width:25px!important;font-size:11px!important}
  .home-serial{font-size:8px!important;margin-top:3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .home-badges{display:flex!important;justify-content:center!important;gap:3px!important;margin-top:4px!important;flex-wrap:wrap!important}
  .home-badges .rarity-chip,.home-badges .mood-chip,.home-badges .founder-chip{font-size:7px!important;line-height:1.05!important;padding:4px 5px!important}
  .home-rare-trait{max-width:100%!important;margin-top:4px!important;padding:4px 6px!important;font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  .creature-canvas-full{
    grid-area:stage!important;position:relative!important;z-index:3!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:calc(100% + (var(--phone-gutter) * 2))!important;
    margin-left:calc(var(--phone-gutter) * -1)!important;
    height:clamp(235px,72vw,320px)!important;min-height:235px!important;max-height:320px!important;
    overflow:hidden!important;touch-action:pan-y!important;
  }
  .creature-canvas-full canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;touch-action:pan-y!important}

  /* Skills become a normal grid instead of floating around the canvas. */
  #skillLines{display:none!important}
  .skill-layer{
    grid-area:skills!important;position:relative!important;inset:auto!important;z-index:12!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
    width:100%!important;height:auto!important;pointer-events:auto!important;
  }
  .skill-layer.hidden{display:none!important}
  .skill-callout,.skill-callout.instinct,.skill-callout.mind,.skill-callout.energy,.skill-callout.chaos,.skill-callout.bond{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;max-width:none!important;min-width:0!important;min-height:52px!important;
    transform:none!important;transform-origin:center!important;margin:0!important;
    padding:7px 8px!important;border-radius:15px!important;gap:6px!important;
    box-shadow:0 8px 22px #0005,0 0 12px color-mix(in srgb,currentColor 18%,transparent)!important;
  }
  .skill-callout.bond{grid-column:1/-1!important;justify-self:stretch!important}
  .skill-callout .skill-glyph{font-size:18px!important;flex:0 0 auto!important}
  .skill-callout>span:last-child{min-width:0!important}
  .skill-callout small{font-size:8px!important}.skill-callout strong{font-size:16px!important}.skill-callout i{width:24px!important;height:3px!important}

  .home-actions-wrap{
    grid-area:actions!important;position:relative!important;z-index:18!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;transform:none!important;margin:0!important;padding:0!important;
  }
  .viral-home-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important;margin:0 0 7px!important;padding:0!important;overflow:visible!important}
  .viral-home-row .grolly-video-pill{width:100%!important;min-width:0!important;min-height:38px!important;margin:0!important;padding:5px 4px!important;border-radius:14px!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .viral-home-row .grolly-video-pill b{overflow:hidden!important;text-overflow:ellipsis!important}
  .home-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;width:100%!important}
  .home-action{width:100%!important;height:54px!important;min-height:54px!important;padding:4px!important;border-radius:17px!important;gap:4px!important;font-size:10px!important}
  .home-action span{font-size:18px!important}.home-action b{font-size:10px!important}

  .care-burst{position:absolute!important;left:50%!important;top:36%!important;width:160px!important;height:160px!important}
  .care-toast{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 10px)!important;transform:none!important;min-width:0!important;width:auto!important;max-width:none!important}
  .empty-home{position:absolute!important;inset:0!important;padding:max(70px,calc(env(safe-area-inset-top,0px) + 54px)) 18px 30px!important;overflow-y:auto!important;justify-content:center!important}
  .empty-home h2{font-size:clamp(28px,9vw,40px)!important}.empty-home p{font-size:13px!important}.egg-stage{width:130px!important;height:150px!important}.egg{left:32px!important;top:12px!important;width:66px!important;height:94px!important}

  /* -------- generic page headers -------- */
  .page-header,.page-header.centered-title{
    width:100%!important;max-width:100%!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;
    gap:7px 8px!important;align-items:center!important;margin:0 0 12px!important;padding:0!important;
  }
  .page-header>h2,.page-header.centered-title>div:nth-child(2){grid-column:1/-1!important;grid-row:1!important;text-align:left!important}
  .page-header>h2,.page-header.centered-title h2{font-size:clamp(27px,8.5vw,36px)!important;line-height:1!important;margin:0!important;text-align:left!important}
  .page-header p{display:block!important;margin:4px 0 0!important;font-size:10px!important;color:#9ea9bf!important}
  .page-header.centered-title>div:first-child{display:none!important}
  .page-header>.level-pill{grid-column:1!important;grid-row:2!important;justify-self:start!important;width:auto!important;max-width:115px!important;min-width:80px!important}
  .page-header>.resource-pill,.page-header.centered-title>.resource-pill{grid-column:2!important;grid-row:2!important;justify-self:end!important;min-height:38px!important;padding:5px 8px!important}

  .segmented{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;width:100%!important;margin:0 0 12px!important;padding:4px!important;overflow:visible!important}
  .segmented button{width:100%!important;min-width:0!important;min-height:40px!important;padding:6px!important;font-size:9px!important;white-space:normal!important}

  /* -------- collection -------- */
  .collection-featured{
    position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"preview preview" "copy copy" "bond details"!important;
    gap:10px!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:10px!important;border-radius:22px!important;overflow:hidden!important;
  }
  .collection-featured:before{z-index:0!important}
  .album-featured-canvas{grid-area:preview!important;position:relative!important;inset:auto!important;z-index:1!important;width:100%!important;height:clamp(220px,66vw,290px)!important;min-height:220px!important;max-height:290px!important;margin:0!important}
  .featured-copy{grid-area:copy!important;position:relative!important;z-index:4!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;padding:0 2px!important}
  .featured-copy h3{font-size:clamp(25px,8vw,34px)!important;margin:4px 0 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .featured-copy p{font-size:9px!important;overflow-wrap:anywhere!important}
  .mini-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin-top:8px!important}
  .mini-stats span{min-width:0!important;padding:6px 8px!important;font-size:8px!important}.mini-stats b{font-size:12px!important}
  .featured-bond{grid-area:bond!important;position:relative!important;z-index:4!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:left!important;min-width:96px!important;padding:7px 9px!important;border-radius:14px!important}
  .featured-bond span{float:none!important;font-size:18px!important}.featured-bond small{font-size:7px!important}.featured-bond b{font-size:15px!important}
  .featured-details{grid-area:details!important;position:relative!important;z-index:4!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;min-width:104px!important;width:auto!important;min-height:42px!important;padding:7px 10px!important;align-self:stretch!important}
  .section-title{margin:16px 2px 9px!important}.section-title h3{font-size:22px!important}
  .rich-grid{width:100%!important;max-width:100%!important;margin:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0 0 74px!important}
  .g-card{min-width:0!important;width:100%!important;border-radius:17px!important}.g-thumb{height:clamp(108px,36vw,155px)!important}.g-card-info{padding:8px!important}.g-card-info h4{font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.g-card-info .meta,.g-card-info .rarity-text{font-size:7.5px!important}
  .floating-egg{position:sticky!important;z-index:20!important;float:right!important;right:auto!important;bottom:8px!important;height:44px!important;margin-top:-54px!important;margin-right:2px!important;padding:0 12px!important;font-size:9px!important}

  /* -------- link / resonance / battle setup -------- */
  .link-hero{width:100%!important;max-width:100%!important;height:190px!important;margin:0 auto -8px!important;gap:4px!important;display:grid!important;grid-template-columns:1fr 46px 1fr!important;align-items:center!important}
  .mini-grolly-orb{width:100%!important;height:180px!important;min-width:0!important}.partner-placeholder{height:128px!important;width:100%!important;font-size:38px!important}
  .heart-core{position:relative!important;left:auto!important;top:auto!important;transform:none!important;font-size:38px!important;text-align:center!important}
  .invite-shell{width:100%!important;max-width:100%!important;margin:0!important;padding:11px!important;border-radius:20px!important;overflow:hidden!important}
  .invite-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;margin:-11px -11px 11px!important}
  .invite-tabs button{min-width:0!important;min-height:44px!important;padding:5px!important;font-size:8px!important;white-space:normal!important}
  .invite-columns{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:12px 0!important}
  .link-box{min-width:0!important;width:100%!important;padding-left:9px!important}.link-box span{font-size:9px!important;min-width:0!important}.link-box button{width:42px!important;flex:0 0 42px!important}
  .invite-buttons{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .qr-card{width:100%!important}.qr-target{width:min(176px,58vw)!important;height:min(176px,58vw)!important}
  .legacy-tools{width:100%!important;max-width:100%!important;margin:10px 0 0!important;padding:11px!important}.legacy-grid{grid-template-columns:1fr!important;gap:8px!important}
  .battle-invite-screen{width:100%!important;max-width:100%!important;margin:0!important}
  .versus-card{width:100%!important;height:210px!important;border-radius:20px!important;display:grid!important;grid-template-columns:1fr 42px 1fr!important;gap:0!important}
  .versus-grolly{width:100%!important;height:100%!important;min-width:0!important}.versus-grolly.mystery{font-size:58px!important}.vs-burst{position:relative!important;left:auto!important;top:auto!important;transform:rotate(-5deg)!important;align-self:center!important;justify-self:center!important;font-size:30px!important}
  .quick-battle{grid-template-columns:1fr!important;gap:7px!important}

  /* -------- passport: no book-spread on phone -------- */
  .passport-page-head{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0 0 10px!important}
  .passport-page-head>div{width:100%!important;display:grid!important;grid-template-columns:28px 1fr!important;gap:5px!important;align-items:center!important}
  .passport-page-head h2{font-size:clamp(28px,9vw,36px)!important;margin:0!important}.passport-page-head p{font-size:9px!important;margin:2px 0 0!important}.back-glyph{font-size:32px!important}
  .passport-page-head select{width:100%!important;max-width:none!important;min-height:44px!important;font-size:16px!important}
  .passport-book{width:100%!important;max-width:100%!important;margin:0!important;display:grid!important;grid-template-columns:1fr!important;border-radius:21px!important;overflow:hidden!important}
  .passport-book:after{display:none!important}
  .passport-page{width:100%!important;min-height:0!important;padding:14px!important}
  .portrait-page{height:320px!important;border-right:0!important;border-bottom:1px solid #f0c76a31!important}.passport-canvas{inset:5% 5% 20%!important}.passport-code-block{left:18px!important;right:18px!important;bottom:14px!important}
  .data-page{padding:18px 14px!important}.data-page h2{font-size:clamp(30px,9vw,40px)!important;padding-right:66px!important}.official-seal{width:62px!important;height:62px!important;right:10px!important;top:10px!important;font-size:18px!important}.official-seal small{font-size:4.5px!important}
  .passport-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.passport-stat-grid div{padding:8px!important}.passport-stat-grid small{font-size:7px!important}.passport-stat-grid b{font-size:16px!important}
  .stamp-row{gap:5px!important;flex-wrap:wrap!important}.stamp-row span{width:38px!important;height:38px!important;font-size:16px!important}
  .passport-tabs{width:100%!important;max-width:100%!important;margin:10px 0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;overflow:visible!important}
  .passport-tabs button{width:100%!important;min-width:0!important;min-height:40px!important;padding:4px!important;font-size:7px!important}
  .passport-dashboard{width:100%!important;max-width:100%!important;margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .passport-panel{width:100%!important;padding:12px!important;border-radius:17px!important}.panel-title>div{gap:6px!important}.panel-title small{font-size:8px!important}.battle-history-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}.battle-history-summary span{min-width:0!important;padding:8px 4px!important;font-size:8px!important}.battle-history-summary b{font-size:17px!important}
  .lineage{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important}.lineage-node{padding:8px 4px!important;font-size:8px!important;overflow-wrap:anywhere!important}

  /* -------- modals / sheets / PWA gate -------- */
  .modal{position:fixed!important;inset:0!important;width:100%!important;height:var(--app-height,100dvh)!important;padding:max(8px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;align-items:flex-start!important;-webkit-overflow-scrolling:touch!important}
  .modal-card{width:100%!important;max-width:520px!important;max-height:none!important;margin:auto!important;padding:17px 13px!important;border-radius:21px!important;overflow:visible!important}
  .bottom-sheet{position:fixed!important;inset:0!important}.bottom-sheet .sheet-panel{width:100%!important;max-width:100%!important;max-height:min(82dvh,calc(var(--app-height,100dvh) - 12px))!important;overflow-y:auto!important;padding:16px var(--phone-gutter) max(16px,env(safe-area-inset-bottom,0px))!important}
  .gate{position:fixed!important;inset:0!important;width:100%!important;height:var(--app-height,100dvh)!important;padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;align-items:flex-start!important}
  .gate-card{width:100%!important;max-width:470px!important;max-height:none!important;margin:auto!important;padding:20px 15px!important;border-radius:22px!important}
  .scanner-shell{width:100%!important;max-width:520px!important;padding:max(10px,env(safe-area-inset-top,0px)) 10px max(10px,env(safe-area-inset-bottom,0px))!important}.camera-frame{width:100%!important;max-width:100%!important;aspect-ratio:1/1!important;height:auto!important}
  .battle-video-preview{width:min(230px,68vw)!important;max-height:58dvh!important}
  .epic-reveal-shell{width:100%!important;min-height:var(--app-height,100dvh)!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important}
  .epic-reveal-canvas{flex:0 0 clamp(230px,65vw,300px)!important;min-height:230px!important;height:clamp(230px,65vw,300px)!important}.epic-reveal-copy{width:calc(100% - 16px)!important;max-width:520px!important;margin:-4px auto max(10px,env(safe-area-inset-bottom,0px))!important;padding:17px 12px!important;border-radius:20px!important}.epic-reveal-copy h2{font-size:clamp(32px,10vw,44px)!important}.epic-reveal-skills{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}

  /* -------- arena: preserve immersive play, but HUD cannot exceed viewport -------- */
  .battle-view.arena-mode{padding:0!important;overflow:hidden!important}
  .battle-view.arena-mode .battle-arena{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;padding:0!important}
  .battle-view.arena-mode .battle-canvas{position:absolute!important;inset:0!important}
  .battle-view.arena-mode .arena-topbar{top:calc(env(safe-area-inset-top,0px) + 7px)!important;left:6px!important;right:6px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)!important;gap:4px!important}
  .fighter-hud{padding:6px!important;border-radius:12px!important;overflow:hidden!important}.fighter-line{gap:3px!important;font-size:8px!important}.fighter-line b{max-width:24vw!important}.hp-track{height:8px!important}.fighter-hud small{font-size:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.round-medallion{min-width:54px!important;width:54px!important;padding:6px 3px!important;border-radius:12px!important}.round-medallion b{font-size:11px!important}
  .battle-presence-banner{top:calc(env(safe-area-inset-top,0px) + 64px)!important;width:calc(100% - 14px)!important;max-width:420px!important;padding:7px 9px!important;border-radius:14px!important}.battle-presence-banner>span{font-size:17px!important}.battle-presence-banner b{font-size:9px!important}.battle-presence-banner small{font-size:7px!important}
  .battle-hud{position:absolute!important;left:6px!important;right:6px!important;bottom:max(6px,env(safe-area-inset-bottom,0px))!important;width:auto!important;max-width:none!important;padding:8px!important;border-radius:16px!important;overflow:hidden!important}.battle-narrative{font-size:8px!important;min-height:22px!important;margin:5px 0 6px!important}.core-row{gap:6px!important;font-size:6px!important}.combat-moves{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}.combat-moves button{min-width:0!important;min-height:46px!important;padding:3px 5px!important;border-radius:11px!important;grid-template-columns:18px minmax(0,1fr)!important}.combat-moves button span{font-size:15px!important}.combat-moves button b{font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.combat-moves button small{font-size:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .battle-exit-btn{top:auto!important;left:8px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 160px)!important;min-height:34px!important;padding:5px 8px!important}.battle-exit-btn span{display:none!important}.battle-impact-text{font-size:clamp(32px,12vw,46px)!important}

  /* -------- public profile -------- */
  body:not(.app-shell) .pub-wrap{width:100%!important;max-width:100%!important;padding:max(10px,env(safe-area-inset-top,0px)) var(--phone-gutter) max(20px,env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important}
  .pub-top{gap:8px!important}.pub-brand{font-size:9px!important}.pub-share{min-height:40px!important;padding:8px 10px!important;font-size:11px!important}
  .pub-hero{width:100%!important;max-width:100%!important;margin:9px 0 0!important;display:grid!important;grid-template-columns:1fr!important;border-radius:21px!important;overflow:hidden!important}
  .pub-canvas{width:100%!important;height:clamp(230px,72vw,310px)!important;min-height:230px!important;max-height:310px!important;overflow:hidden!important}.pub-canvas canvas{width:100%!important;height:100%!important}
  .pub-info{width:100%!important;padding:15px 12px 18px!important}.pub-info h1{font-size:clamp(29px,9vw,38px)!important;overflow-wrap:anywhere!important}.pub-code{font-size:9px!important;overflow-wrap:anywhere!important}.badges{gap:5px!important}.badge{font-size:7px!important;padding:5px 6px!important}.trait{font-size:10px!important;padding:9px!important}.stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}.stats div{padding:8px!important}.stats small{font-size:8px!important}.stats b{font-size:16px!important}.cta{min-height:48px!important;padding:12px 8px!important;font-size:13px!important}
  .life{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:9px 0 16px!important}.life-card{width:100%!important;padding:13px!important;border-radius:17px!important}

  /* -------- public invite -------- */
  .invite-public{width:100%!important;max-width:100%!important;min-height:100svh!important;justify-content:flex-start!important;padding:max(12px,env(safe-area-inset-top,0px)) var(--phone-gutter) max(20px,env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important}
  .invite-brand{font-size:9px!important}.invite-public h1{font-size:clamp(30px,9vw,42px)!important;margin:10px auto 3px!important;max-width:100%!important;overflow-wrap:anywhere!important}.invite-public>p{font-size:12px!important;margin:5px 0 8px!important}.status-pill{font-size:8px!important;padding:5px 7px!important}
  .invite-creature{width:100%!important;height:clamp(230px,72vw,310px)!important;min-height:230px!important;margin:6px 0!important;border-radius:20px!important;overflow:hidden!important}.invite-label{left:8px!important;right:8px!important;bottom:8px!important;padding:8px 10px!important;border-radius:13px!important}.invite-label b{font-size:17px!important}.invite-label span{font-size:8px!important;overflow-wrap:anywhere!important}.invite-cta{width:100%!important;min-height:48px!important;padding:12px 8px!important;font-size:13px!important}.invite-note{font-size:9px!important}.secondary-link{font-size:10px!important;margin-top:10px!important;overflow-wrap:anywhere!important}

  /* -------- landing / epic birth: stack, never exceed viewport width -------- */
  body.epic-landing{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
  .epic-first{width:100%!important;min-height:100svh!important;padding:max(10px,env(safe-area-inset-top,0px)) var(--phone-gutter) max(18px,env(safe-area-inset-bottom,0px))!important;overflow:hidden!important;align-items:start!important}
  .epic-wrap{width:100%!important;max-width:520px!important;min-height:calc(100svh - 28px)!important;justify-content:center!important}.epic-copy{width:100%!important}.epic-copy h1{font-size:clamp(34px,11vw,50px)!important}.epic-copy p{font-size:12px!important;padding:0 3px!important}
  .epic-stage{width:100%!important;max-width:430px!important;height:clamp(255px,74vw,360px)!important;min-height:255px!important;max-height:360px!important;margin:2px auto!important}.epic-egg{width:clamp(118px,35vw,156px)!important;height:clamp(160px,47vw,210px)!important}.epic-cta{max-width:100%!important;min-height:50px!important;padding:12px 20px!important;font-size:14px!important}
  .birth-rescue{width:100%!important;max-width:430px!important;margin:7px 0 0!important;padding:11px!important;border-radius:18px!important}.birth-rescue h2{font-size:22px!important}.birth-rescue p{font-size:11px!important}.birth-rescue strong{font-size:34px!important}.featured-public{width:100%!important;max-width:100%!important;padding:32px var(--phone-gutter) 60px!important}.featured-row{grid-template-columns:1fr!important;gap:7px!important}.featured-g{padding:13px!important;border-radius:16px!important}

  /* -------- admin -------- */
  body.admin-body{width:100%!important;max-width:100%!important;min-height:100svh!important;overflow-x:hidden!important;overflow-y:auto!important}
  .admin-body .topbar{width:100%!important;height:auto!important;min-height:56px!important;padding:max(8px,env(safe-area-inset-top,0px)) var(--phone-gutter) 8px!important;gap:7px!important;flex-wrap:wrap!important}.wordmark{font-size:9px!important;letter-spacing:.12em!important}.topbar .small{min-height:36px!important;padding:7px 9px!important;font-size:9px!important}
  .admin-main{width:100%!important;max-width:100%!important;margin:0!important;padding:10px var(--phone-gutter) max(30px,env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important}
  .stat-grid,.growth-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.stat-card,.growth-card,.admin-body .panel{min-width:0!important;padding:12px!important;border-radius:16px!important}.stat-card b,.growth-card b{font-size:21px!important}.stat-card span,.growth-card span{font-size:8px!important;overflow-wrap:anywhere!important}
  .admin-grid{grid-template-columns:1fr!important;gap:8px!important}.upgrade-card{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}.upgrade-card .primary{width:100%!important}
  .admin-main input,.admin-main select,.admin-main textarea,.admin-main button{width:100%!important;max-width:100%!important;font-size:16px!important}.admin-main label{overflow-wrap:anywhere!important}
  .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.admin-main table{width:max-content!important;min-width:560px!important;font-size:10px!important}.admin-main th,.admin-main td{padding:8px 7px!important;font-size:9px!important}
}

@media (max-width:360px){
  .home-hud{grid-template-columns:48px minmax(0,1fr) 48px!important}.level-pill,.resource-stack,.resource-pill.top-resource,.social-shards-pill{width:48px!important}.home-name-row h1{font-size:20px!important}.home-badges .founder-chip{display:none!important}
  .creature-canvas-full{height:230px!important;min-height:230px!important}
  .skill-layer{grid-template-columns:1fr!important}.skill-callout.bond{grid-column:auto!important}
  .viral-home-row{grid-template-columns:1fr!important}.viral-home-row .grolly-video-pill{min-height:36px!important}
  .home-action b{font-size:9px!important}.home-action span{font-size:16px!important}
  .rich-grid{grid-template-columns:1fr!important}.g-thumb{height:180px!important}
  .passport-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-grid,.growth-grid{grid-template-columns:1fr!important}
}

@media (max-width:820px) and (orientation:landscape) and (max-height:520px){
  :root{--phone-nav:54px}
  .creature-canvas-full{height:220px!important;min-height:220px!important}
  #viewHome .habitat{padding-top:6px!important}
  .home-hud{grid-template-columns:50px minmax(0,1fr) 50px!important}.level-pill,.resource-stack,.resource-pill.top-resource,.social-shards-pill{width:50px!important}
  .battle-view.arena-mode .battle-hud{max-height:43vh!important;overflow-y:auto!important}.battle-exit-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 135px)!important}
}
@media (max-width:820px){
  .admin-main input[type="checkbox"]{width:auto!important;min-height:0!important;height:auto!important;max-width:none!important}
}