/* ==========================================================================
   The fight on a phone: the HUD keeps to the edges                         owner: the phone HUD (ui/hudmenu.js)
   Owner, 2026-10-25: "coins render in like, the middle of the screen. should really be closer to top left", "crowd
   favor and bottom row should sit closer to bottom of viewport", "boss health UI too close to center on mobile. we need
   to optimize mobile UI further to maximize usage of screen real estate", "perhaps menu items on top right are in a
   dropdown". Loads last, so it settles what the HUD's, co-op's, the meter's and the corner sound button's phone rules
   left; every rule sits in a phone query (portrait up to 600 px wide, landscape up to 500 px tall): desktop is untouched.
     top left    your plate, the coins tight under it (co-op: the partners' plates under those)
     top edge    a boss's name and a slim bar, pinned above everything; the HUD steps down under it
     top right   Pause and one menu button (landscape: the speed too); the menu holds the rest of the row, sound included
     bottom      one row on the bottom edge: the crowd's favor bar, then the powers; the damage meter's pill above, right
   ========================================================================== */
.hud-menu-btn{display:none}
.hud-menu[hidden]{display:none}

@media (max-width:600px),(max-height:500px){
  /* ---- top right: Pause and the menu button; the rest of the row lives in the menu (ui/hudmenu.js) ---- */
  .hud-menu-btn{display:grid}
  /* hidden, not removed: their keys (F, P, M, B, C) still look for a button on the page */
  .hud .ctrl-row>:not(#btn-pause,#btn-hudmenu){--in-menu:1;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);visibility:hidden;pointer-events:none}
  .hud-menu-btn[aria-expanded="true"]{background:var(--g-gold);transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 2px 0 var(--ink)}
  /* the cards keep Auto as its own button in its corner (qol.css shows it alone there; owner: "auto pick should be a
     toggle at top right"); the menu is for the fight */
  body[data-screen="draft"] .hud .ctrl-row>#btn-auto{--in-menu:0;position:relative;width:44px;height:44px;overflow:hidden;clip-path:none;visibility:visible;pointer-events:auto}
  body[data-screen="draft"] .hud-menu-btn{display:none}
  body[data-screen="draft"] .hud .ctrl-row>#btn-speed{visibility:hidden}
  /* the corner sound button is in the menu during a fight (it comes back on every other screen) */
  body[data-screen=""] .sound-top{display:none}

  /* the dropdown: a paper card that grows from the button, a row per setting with its state on the right */
  .hud-menu{
    position:fixed;z-index:calc(var(--z-modal,60) + 2);min-width:220px;max-width:calc(100vw - 32px);box-sizing:border-box;
    display:grid;gap:4px;padding:6px;background:var(--g-paper);border:var(--line-s) solid var(--ink);border-radius:var(--r-tile-lg,18px);
    box-shadow:inset 0 2px 0 #fff,var(--drop-s);transform-origin:calc(100% - 22px) -8px;animation:hm-in .18s var(--out);
  }
  .hud-menu::before{content:"";position:absolute;top:-9px;right:16px;width:14px;height:14px;background:#fffaf0;border-left:var(--line-s) solid var(--ink);border-top:var(--line-s) solid var(--ink);transform:rotate(45deg)}
  .hm-item{
    all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;
    min-height:46px;padding:4px 8px 4px 9px;border-radius:12px;touch-action:manipulation;-webkit-user-select:none;user-select:none;
    font:400 var(--t-name)/1.1 var(--f-display);color:var(--ink);transition:background-color .12s var(--out),transform .12s var(--out);
  }
  .hm-item:active{background:rgba(42,26,46,.08);transform:scale(.98)}
  .hm-item:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
  .hm-ic{display:grid;place-items:center;width:28px;height:28px}
  .hm-ic .ic{width:26px;height:26px;filter:drop-shadow(0 1px 0 var(--ink))}
  .hm-name{min-width:0;overflow-wrap:anywhere}
  .hm-state{min-width:42px;padding:5px 9px 6px;box-sizing:border-box;text-align:center;border:var(--line-xs) solid var(--ink);border-radius:999px;
    background:var(--paper-2);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .hm-item[aria-pressed="true"] .hm-state{background:var(--g-gold);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
  .hm-item[aria-pressed="false"] .hm-state{color:var(--ink-3)}
  @keyframes hm-in{from{opacity:0;transform:scale(.96)}}

  /* ---- cleaner (owner: "idk we need to clean up a bit"): what a player does not need mid-fight leaves the screen ----
     your name (you know who you are; the death stone and the cards say it), the health number (the bar says it), the
     status chips (blocks, momentum: the Stats panel's build says them, and the fight shows a block when it lands), the
     favor's label and count (its laurel and bar say it) */
  .hud-life .who,#hp-text,.hud-status,.favor-label{display:none}
  .life-top{justify-content:flex-start}
  .hud-life{max-width:240px}   /* the bar is all the plate holds now: the arena keeps the rest of the row */
  .hp-row{margin-top:3px}
  /* the gods' rings stay small, but each takes a finger: a 44 px target (::before; ::after is the spent tick) over a
     44 px slot of its own, so two never share a tap. The row starts where the medal ends (its tip is its own) and the
     targets reach up into the plate's top, not down onto the health bar. */
  .life-top .hud-gods{gap:0;margin-left:var(--hg-pull)}
  .hg-ring{margin-inline:calc((44px - var(--hg-w)) / 2)}
  .hg-ring::before{content:"";position:absolute;left:50%;bottom:-8px;width:44px;height:44px;translate:-50% 0}
  .hg-ring.patron::before{bottom:-6.5px}   /* the crowned ring is taller: its target ends where the bar begins too */

  /* ---- top edge: the boss, pinned; the HUD steps down under it ---- */
  .bossbar{
    top:calc(env(safe-area-inset-top,0px) + 6px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));
    width:auto;transform:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;
  }
  .boss-head{flex-wrap:nowrap;justify-content:flex-start;gap:6px;min-width:0}
  .boss-name{font-size:var(--t-name);-webkit-text-stroke:4px var(--ink);text-shadow:0 2px 0 var(--ink);white-space:nowrap}
  .boss-title{font-size:var(--t-label);padding:2px 7px 3px;box-shadow:0 2px 0 var(--ink)}
  .bar.boss{height:12px;border-width:2px;box-shadow:0 0 0 2px var(--ink),0 3px 0 1px var(--ink)}
  body:has(#bossbar:not([hidden])) .hud{padding-top:calc(env(safe-area-inset-top,0px) + 44px)}

  /* ---- bottom edge ---- */
  /* one row: the favor bar on the left, the powers on the right */
  .hud-bottom{flex-direction:row;align-items:flex-end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);gap:8px}
  .favor{flex:1 1 auto;min-width:0;width:auto;max-width:300px}
  .favor{gap:7px;padding:4px 12px 5px 5px;border-width:var(--line-s);border-radius:16px}
  .favor-ic{width:28px;height:28px}
  .favor-main{display:flex;align-items:center;gap:8px}
  .favor-label{flex:none;gap:6px}
  .favor-bar{flex:1;min-width:40px;height:12px;border-width:2px}
  .boons{flex:0 1 auto;justify-content:flex-end;flex-wrap:wrap-reverse;max-width:55%}
  .dmeter{--dm-bottom:calc(env(safe-area-inset-bottom,0px) + 58px);left:auto;right:max(16px,env(safe-area-inset-right,0px));align-items:flex-end}
}

/* ---- a portrait phone: Pause and the menu stacked in the corner; the coins tight under your plate ---- */
@media (max-width:600px){
  .hud{padding-top:calc(env(safe-area-inset-top,0px) + 8px);row-gap:6px}
  .glory{margin-top:0}
  .hud-gods{--hg-pull:-5px}
  .hg-ring{--hg-w:18px}
  .hg-ring.patron{--hg-w:21px}
}

/* ---- a landscape phone: one slim top row (plate, coins, the round, the buttons) and a slim bottom ---- */
@media (max-height:500px) and (min-width:601px){
  .hud{
    grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"life glory round btns" "mate mate round btns";
    column-gap:10px;row-gap:6px;padding-top:calc(env(safe-area-inset-top,0px) + 8px);
  }
  .hud .ctrl-row>#btn-speed{--in-menu:0;position:relative;width:44px;height:44px;overflow:visible;clip-path:none;visibility:visible;pointer-events:auto}
  .hud-life{grid-area:life;width:auto;min-width:0;max-width:300px;gap:7px;padding:4px 10px 6px 4px;border-width:var(--line-s)}
  .medal{width:38px;height:38px;border-width:var(--line-s)}
  .medal .ic{width:26px;height:26px}
  .who{font-size:var(--t-name)}
  .vita-tag,.cls{display:none}
  .bar{height:13px;border-width:2.5px}
  .hp-row{margin-top:2px;gap:6px}
  .num{font-size:var(--t-tag)}
  .glory{grid-area:glory;align-self:start;font-size:var(--t-name);padding:2px 10px 2px 3px}
  .glory .ic{width:24px;height:24px}
  .hud-round{grid-area:round;justify-self:center}
  .round-badge{width:72px;height:56px}
  .round-badge .wreath{width:76px;height:76px;top:-9px}
  .round-num{min-width:40px;height:40px;margin-top:-6px;padding:0 7px;font-size:var(--t-btn);-webkit-text-stroke:4px var(--ink)}
  .round-num::before{display:none}
  .foes{font-size:var(--t-label);padding:3px 8px 4px;border-width:2.5px}
  .hud-ctrl{display:contents}
  .ctrl-row{grid-area:btns;flex-direction:row;gap:8px}
  .icon-btn{width:44px;height:44px;border-radius:12px;font-size:var(--t-name)}
  .icon-btn .ic{width:25px;height:25px}
  .hud-mates{grid-area:mate}
  .favor{width:min(300px,40vw)}
  .hud-gods{--hg-pull:-7px}
  .hg-ring{--hg-w:26px}
  .hg-ring.patron{--hg-w:30px}
}