/* The fight's HUD on a phone held sideways (css/phone.css has the gate and the icons). The status rail is hidden
   (the game keeps updating it) and js/ui/phone-hud.js draws a pill from it: stars, phase, goal, clock, the bill;
   a tap opens its sheet. The player card is a chip (portrait, armour, boost) until tapped. The minimap is
   small, the buttons are icons in an arc round Fire, the pause menu is a short box. About a tenth of the
   screen, the middle kept clear. */
.ph-pill, .ph-sheet, .ph-wp, .ph-pause-sum, .ph-news { display: none; }

/* ---- the pill and its sheet */
:root.ph #hud .ph-pill {
  position: absolute; z-index: 5; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center;
  height: 32px; max-width: calc(100% - 300px); padding: 0 4px; color: var(--ink); cursor: pointer; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--line-dim); border-radius: 5px; font: inherit;
}
:root.ph #hud .ph-pill .sg, :root.ph .ph-pause-sum .sg { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 9px; font: 700 13px 'Chakra Petch', var(--cjk), sans-serif; white-space: nowrap; }
:root.ph .ph-pill .sg + .sg, :root.ph .ph-pause-sum .sg + .sg { border-left: 1px solid var(--line-dim); }
:root.ph .ph-pill .sg .ph-i, :root.ph .ph-pause-sum .sg .ph-i { font-size: 14px; color: var(--line); }
:root.ph .ph-pill .sg.stars, :root.ph .ph-pause-sum .sg.stars { gap: 1px; color: var(--amber); }
:root.ph .ph-pill .sg.stars .ph-i, :root.ph .ph-pause-sum .sg.stars .ph-i { color: var(--amber); }
:root.ph .ph-pill .sg.hot, :root.ph .ph-pause-sum .sg.hot { color: #ff7a6c; }
:root.ph .ph-pill .sg.hot .ph-i, :root.ph .ph-pause-sum .sg.hot .ph-i { color: #ff7a6c; }
:root.ph .ph-pill .sg.more { padding: 0 7px; }
:root.ph .ph-pill .sg.more .ph-i { color: var(--dim); transition: rotate 0.15s; }
:root.ph .ph-pill.open .sg.more .ph-i { rotate: 180deg; }
:root.ph #hud .ph-sheet {
  position: absolute; z-index: 5; left: 50%; top: calc(44px + var(--safe-t)); transform: translateX(-50%); width: min(380px, calc(100% - 300px)); display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; color: var(--ink); pointer-events: auto; background: var(--panel); border: 1px solid var(--line-dim); border-radius: 5px; font: 600 12px/1.25 'Chakra Petch', var(--cjk), sans-serif;
}
:root.ph .ph-sheet .l { display: flex; align-items: center; gap: 8px; }
:root.ph .ph-sheet .l .ph-i { font-size: 15px; color: var(--line); }
:root.ph .ph-sheet .l .t { flex: 1; min-width: 0; }
:root.ph .ph-sheet .l .t small { display: block; margin-top: 1px; font-weight: 500; font-size: 11px; color: var(--dim); }
:root.ph .ph-sheet .l .v { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--dim); white-space: nowrap; }
:root.ph .ph-sheet .loss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root.ph .ph-sheet .loss > div { display: flex; flex-direction: column; gap: 3px; font: 600 10.5px 'Chakra Petch', var(--cjk), sans-serif; color: var(--dim); }
:root.ph .ph-sheet .loss .ph-i { font-size: 12px; }
:root.ph .ph-sheet .loss i { display: block; height: 5px; background: rgba(255, 255, 255, 0.14); }
:root.ph .ph-sheet .loss i b { display: block; height: 100%; }
:root.ph #hud .ph-wp {
  position: absolute; z-index: 4; left: 50%; top: calc(46px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  pointer-events: none; color: #fff; background: var(--panel); border: 1px solid var(--line-dim); border-radius: 5px; font: 700 12px 'Chakra Petch', var(--cjk), sans-serif; white-space: nowrap;
}
:root.ph .ph-wp .ph-i { font-size: 13px; color: var(--amber); }
/* the rail itself: kept (the game updates it, and the overlays below it measure it) but not seen */
:root.ph #hud.mission-status .cp-status {
  position: absolute; left: 50%; top: calc(8px + var(--safe-t)); width: 330px; height: 32px; margin: 0 0 0 -165px; overflow: hidden; opacity: 0; pointer-events: none; filter: none;
}

/* ---- the player card: a chip (portrait, armour, boost); a tap opens the whole card */
:root.ph #hud.hud .cards { left: calc(10px + var(--safe-l)); right: auto; top: calc(8px + var(--safe-t)); bottom: auto; width: auto; display: flex; gap: 6px; pointer-events: auto; z-index: 6; }
:root.ph #hud.hud .cards:not(.ph-open) .card { position: relative; flex: none; width: 150px; min-width: 0; max-width: none; height: 40px; padding: 0; background: var(--panel); border: 1px solid var(--line-dim); border-radius: 5px; clip-path: none; cursor: pointer; }
:root.ph #hud.hud .cards:not(.ph-open) .card::before { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card > :not(.card-portrait, .card-head, .card-hp, .card-gauges, .card-down, .card-combo, .card-note) { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card-head { position: absolute; left: 4px; top: -8px; width: auto; height: auto; display: flex; gap: 4px; align-items: center; }
:root.ph #hud.hud .cards:not(.ph-open) .card-head > :not(.card-p, .stock) { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card-p { padding: 0 4px; font: 800 9px/14px 'Chakra Petch', sans-serif; border-radius: 2px; }
:root.ph #hud.hud .cards:not(.ph-open) .card-portrait { display: block; position: absolute; left: 4px; top: 3px; right: auto; bottom: auto; width: 32px; height: 32px; object-fit: cover; object-position: center top; border: 1px solid var(--line-dim); border-radius: 3px; filter: none; opacity: 1; }
:root.ph #hud.hud .cards:not(.ph-open) .card-hp { position: absolute; left: 44px; right: 8px; top: 9px; width: auto; height: 8px; margin: 0; transform: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card-hp-n { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card-gauges { position: absolute; left: 44px; right: 8px; top: 23px; width: auto; display: block; margin: 0; }
:root.ph #hud.hud .cards:not(.ph-open) .card-gauges .gauge:not(.g-boost) { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .g-boost { display: block; height: 5px; min-height: 0; margin: 0; }
:root.ph #hud.hud .cards:not(.ph-open) .g-boost > :not(.g-bar) { display: none; }
:root.ph #hud.hud .cards:not(.ph-open) .g-boost .g-bar { display: block; height: 5px; margin: 0; transform: none; }
:root.ph #hud.hud .cards:not(.ph-open) .card-down { inset: 0; font-size: 10px; }
:root.ph #hud.hud .cards:not(.ph-open) .card-combo, :root.ph #hud.hud .cards:not(.ph-open) .card-note { top: calc(100% + 4px); bottom: auto; }

/* ---- the news TV: an icon, a tap opens it a while (js/ui/phone-hud.js). Its chip sits over the buttons' arc, the
   TV opens beside the minimap; hidden, it keeps its size (it measures itself) */
:root.ph #hud .ph-news:not([hidden]) {
  position: absolute; z-index: 6; right: calc(10px + var(--safe-r)); bottom: calc(187px + var(--safe-b)); display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px;
  color: var(--ink); cursor: pointer; pointer-events: auto; background: var(--panel); border: 1px solid var(--line-dim); border-radius: 5px; font: inherit;
}
:root.ph #hud .ph-news::after { content: ''; position: absolute; inset: -7px -2px; }
:root.ph #hud .ph-news .ph-i { font-size: 16px; color: var(--line); }
:root.ph #hud .ph-news b { padding: 1px 5px; border-radius: 2px; background: #d4262f; color: #fff; font: 800 9.5px 'Chakra Petch', sans-serif; letter-spacing: 0.08em; }
:root.ph #hud .ph-news[aria-expanded="true"] { border-color: var(--line); }
:root.ph #hud .news:not(.full):not(.ph-open) { visibility: hidden; }
:root.ph #hud .news.ph-open { z-index: 6; left: auto; right: calc(104px + var(--safe-r)); top: calc(48px + var(--safe-t)); bottom: auto; width: min(220px, 30vw); pointer-events: auto; cursor: pointer; }
/* (the radio, the army's chatter with the rest: a strip under the chip, which keeps its place while the card's open over it) */
:root.ph #hud.hud .cp-left { top: calc(56px + var(--safe-t)); width: min(220px, 28vw); }

/* ---- the minimap: small; a tap grows it */
:root.ph #hud.hud .minimap { top: calc(52px + var(--safe-t)); right: calc(10px + var(--safe-r)); bottom: auto; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; clip-path: none; pointer-events: auto; transition: width 0.15s, height 0.15s, border-radius 0.15s; }
:root.ph #hud.hud .minimap.ph-big { width: 150px; height: 150px; border-radius: 5px; }
:root.ph #hud.hud .feed { top: calc(144px + var(--safe-t)); }

/* ---- pause and zoom: small, top right (hit areas padded to 44px) */
:root.ph body:has(#hud:not([hidden])) :is(#pause-btn, #zoom-btn) { position: fixed; left: auto; transform: none; top: calc(8px + var(--safe-t)); width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; font-size: 12px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line-dim); }
:root.ph body:has(#hud:not([hidden])) #pause-btn { right: calc(10px + var(--safe-r)); }
:root.ph body:has(#hud:not([hidden])) #zoom-btn { right: calc(54px + var(--safe-r)); }
:root.ph body:has(#hud:not([hidden])) :is(#pause-btn, #zoom-btn)::after { content: ''; position: absolute; inset: -4px; }

/* ---- the buttons: icons in an arc round Fire, the specials with their pictures and a ring for the wait */
:root.ph .touch .buttons { position: absolute; inset: 0; display: block; pointer-events: none; }
:root.ph .touch .buttons .tb { position: absolute; pointer-events: auto; border-radius: 50%; width: 44px; height: 44px; }
:root.ph .touch .buttons .tb-label { display: none; }
:root.ph .touch .buttons .tb .tb-icon { display: grid; place-items: center; font-size: 22px; line-height: 1; }
:root.ph .touch .buttons .tb .tb-icon .ph-i { width: 1em; height: 1em; }
:root.ph .touch .buttons .tb-fire { width: 62px; height: 62px; right: calc(25px + var(--safe-r)); bottom: calc(35px + var(--safe-b)); border-color: rgba(255, 255, 255, 0.55); }
:root.ph .touch .buttons .tb-jump { width: 48px; height: 48px; right: calc(98px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); }
:root.ph .touch .buttons .tb-attack { width: 48px; height: 48px; right: calc(104px + var(--safe-r)); bottom: calc(76px + var(--safe-b)); }
:root.ph .touch .buttons .tb-s1 { right: calc(30px + var(--safe-r)); bottom: calc(120px + var(--safe-b)); }
:root.ph .touch .buttons .tb-s2 { right: calc(82px + var(--safe-r)); bottom: calc(142px + var(--safe-b)); }
:root.ph .touch .buttons .tb-ult { right: calc(138px + var(--safe-r)); bottom: calc(132px + var(--safe-b)); }
:root.ph .touch .buttons .tb-guard { right: calc(172px + var(--safe-r)); bottom: calc(56px + var(--safe-b)); color: #6cb6ff; }
:root.ph .touch .buttons .tb-surge { right: calc(170px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); color: var(--amber); }
:root.ph .touch .buttons .tb-walk { right: calc(218px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); }
:root.ph .touch .buttons :is(.tb-s1, .tb-s2, .tb-ult)[data-art] { background: var(--art) center / cover no-repeat; border-color: var(--line-dim); }
:root.ph .touch .buttons :is(.tb-s1, .tb-s2, .tb-ult)[data-art] .tb-icon { display: none; }
:root.ph .touch .buttons .tb-ult[data-art] { color: inherit; }
:root.ph .touch .buttons .tb-ult.ready { background: var(--art) center / cover no-repeat; border-color: var(--amber); box-shadow: 0 0 12px var(--amber); }
:root.ph .touch .buttons :is(.tb-s1, .tb-s2, .tb-ult)[data-art].cooling { border-color: var(--line-dim); }
:root.ph .touch .buttons :is(.tb-s1, .tb-s2, .tb-ult)[data-art]:not(.cooling):not(.gone) { border-color: var(--amber); }
:root.ph .touch .buttons .tb-ult[data-art]:not(.ready) { border-color: var(--line-dim); }
:root.ph .touch .buttons .tb .tb-cool { background: conic-gradient(rgba(4, 9, 19, 0.74) calc(var(--cool, 0) * 360deg), transparent 0); }

/* ---- pause: a short box, the mission's standing in its heading, the screen behind it dimmed */
:root.ph body:has(#pause:not([hidden])) :is(#hud, #touch) { opacity: 0.4; }
:root.ph #pause .overlay-box { width: 430px; max-width: calc(100% - 20px); height: auto; padding: 12px; display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; clip-path: none; border-top: 2px solid var(--line); }
:root.ph #pause .overlay-box h2 { grid-column: 1; grid-row: 1; margin: 0; font: 800 14px 'Chakra Petch', var(--cjk), sans-serif; font-style: normal; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; align-self: center; }
:root.ph #pause .ph-pause-sum { grid-column: 2 / 4; grid-row: 1; justify-self: end; min-width: 0; max-width: 100%; overflow: hidden; display: flex; align-items: center; height: 24px; }
:root.ph #pause .ph-pause-sum .sg { padding: 0 7px; font-size: 12px; }
:root.ph #pause .overlay-box > button { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-size: 12.5px; letter-spacing: 0.05em; }
:root.ph #pause .overlay-box > button .ph-i { font-size: 18px; color: var(--line); }
:root.ph #pause #resume { grid-column: 1; grid-row: 2 / 4; flex-direction: column; gap: 8px; min-height: 112px; font-size: 16px; }
:root.ph #pause #resume .ph-i { font-size: 30px; color: #1a0f00; fill: currentColor; stroke: none; }
:root.ph #pause #quit .ph-i { color: #ff8a7c; }

:root.ph #pause #map-btn[hidden] ~ #quit { grid-column: 2 / 4; }

/* the travel chip says where and how far: the in-world pointer keeps only its arrow then */
:root.ph #hud:has(.ph-wp:not([hidden])) .cp-arrow[data-kind="goal"] > span { display: none; }

/* what shows under the pill (the travel chip) pushes the bosses and the alerts below it */
:root.ph #hud.mission-status .cp-alert { top: calc(var(--cp-status-bottom, 40px) + 36px); }
:root.ph #hud:has(.ph-wp:not([hidden])) .cp-bosses { top: calc(78px + var(--safe-t)); }