/* Polaris's instrument layout. Compact cards remain available for touch and couch play. */
.card-portrait, .card-pilot, .ability-art, .g-value, .cp-obj-number { display: none; }
@media (min-width: 1000px) and (min-height: 600px) {
  /* One panel at the bottom left, one sheet of glass: the pilot and the mech (the portrait, the armour, a
     mission's SP under it, the parts and the gauges), then the specials (a clock going round over each
     while it cools, the ultimate's while its meter fills), then the pilot's three skills. */
  :root:not(.touch) .cards[data-n="1"] { --status-width: clamp(350px, 30vw, 420px); --tile: 88px; --art: 56px; left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); }
  :root:not(.touch) .cards[data-n="1"] .card { display: grid; grid-template: minmax(0, 1fr) / auto; gap: 5px 12px; width: max-content; max-width: 100%; min-width: 0; height: 178px; padding: 9px 10px 8px calc(var(--status-width) + 2px); }
  :root:not(.touch) .cards[data-n="1"] .card::before { border-width: 1px; border-top-width: 2px; background: linear-gradient(100deg, #081a29b0, #081a29f2 20%); }
  :root:not(.touch) .cards[data-n="1"] .card-portrait { display: block; position: absolute; left: -6px; bottom: 0; width: 138px; height: 180px; object-fit: contain; object-position: center bottom; filter: drop-shadow(3px 0 2px #081a2980); }
  :root:not(.touch) .cards[data-n="1"] .card-pilot { display: flex; gap: 8px; align-items: baseline; position: absolute; left: 130px; top: 12px; right: auto; width: calc(var(--status-width) - 144px); white-space: nowrap; overflow: hidden; }
  .card-pilot b { font-size: 15px; }
  .card-pilot span { font: 700 9px 'Chakra Petch', sans-serif; letter-spacing: .08em; color: var(--c); }
  :root:not(.touch) .cards[data-n="1"] .card-head { position: absolute; left: 130px; top: 39px; width: calc(var(--status-width) - 144px); gap: 5px; }
  :root:not(.touch) .cards[data-n="1"] .card-mech { font-size: 14px; }
  :root:not(.touch) .cards[data-n="1"] .card-code { display: none; }
  :root:not(.touch) .cards[data-n="1"] .card-p { font-size: 10px; padding: 2px 4px; }
  :root:not(.touch) .cards[data-n="1"] .card-hp { position: absolute; left: 130px; top: 63px; width: calc(var(--status-width) - 144px); height: 19px; margin: 0; }
  :root:not(.touch) .cards[data-n="1"] .card-hp::before { content: 'HP'; position: absolute; left: 5px; top: 3px; z-index: 2; font: 700 10px 'Chakra Petch', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
  :root:not(.touch) .cards[data-n="1"] .card-hp-n { font-size: 13px; }
  :root:not(.touch) .cards[data-n="1"] .card-body { display: contents; }
  :root:not(.touch) .cards[data-n="1"] .frame { position: absolute; left: 130px; top: 88px; width: 44px; height: 72px; }
  :root:not(.touch) .cards[data-n="1"] .card-gauges { position: absolute; left: 177px; top: 96px; width: calc(var(--status-width) - 191px); margin: 0; gap: 6px; }
  :root:not(.touch) .cards[data-n="1"] .gauge { grid-template-columns: 4.8em minmax(20px, 1fr) 30px; font-size: 10px; gap: 5px; }
  :root:not(.touch) .cards[data-n="1"] .g-name .key { display: none; }
  :root:not(.touch) .cards[data-n="1"] .g-value { display: block; font: 700 10px 'Chakra Petch', sans-serif; text-align: right; color: var(--ink); }
  /* Reserve a footer below all three gauges, including ammo, for the walking indicator. */
  :root:not(.touch) .cards[data-n="1"] .mv-walk { position: absolute; top: 60px; right: 0; font-size: 9px; }
  /* the specials: a tile each, its picture, its name under it; cooling, a clock over the picture (the dark
     part what's left, a hand going round, the rim lit as it comes back); the ultimate's the same while its
     meter fills, lit amber once it's full */
  :root:not(.touch) .cards[data-n="1"] .card-moves { position: relative; grid-area: 1 / 1 / -1 / 2; display: grid; grid-template-columns: repeat(3, var(--tile)); gap: 6px; min-height: 0; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
  :root:not(.touch) .cards[data-n="1"] .mv { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); place-items: center; height: auto; min-height: 0; padding: 5px 4px; gap: 2px; border: 1px solid color-mix(in srgb, var(--c) 30%, #102738); border-top: 2px solid var(--c); background: #0e2738e6; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
  :root:not(.touch) .cards[data-n="1"] .mv::before { display: none; }
  :root:not(.touch) .cards[data-n="1"] .mv .key { position: absolute; left: 4px; top: 4px; z-index: 3; min-width: 20px; padding: 0 3px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: #173246; font-size: 10px; line-height: 16px; }
  :root:not(.touch) .cards[data-n="1"] .ability-art { display: block; grid-area: 1 / 1; width: var(--art); height: var(--art); background-size: contain; background-repeat: no-repeat; background-position: center; transition: filter 0.2s, opacity 0.2s; }
  :root:not(.touch) .cards[data-n="1"] .mv-name { grid-area: 2 / 1; display: grid; place-items: center; width: 100%; min-height: 2.3em; max-height: 2.3em; overflow: hidden; white-space: normal; text-align: center; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
  :root:not(.touch) .cards[data-n="1"] .mv .cd { --a: calc((1 - var(--cool, 0)) * 360deg); display: none; visibility: inherit; grid-area: 1 / 1; position: relative; width: calc(var(--art) + 8px); height: calc(var(--art) + 8px); border-radius: 50%; background: conic-gradient(transparent 0 var(--a), #02080fbd var(--a)); }
  :root:not(.touch) .cards[data-n="1"] .mv .cd::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) 0 var(--a), #ffffff26 var(--a));
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
  :root:not(.touch) .cards[data-n="1"] .mv .cd::after { content: ''; position: absolute; left: calc(50% - 1px); top: 3px; width: 2px; height: calc(50% - 3px); border-radius: 1px; background: linear-gradient(to top, transparent, #fff); transform-origin: 50% 100%; rotate: var(--a); }
  :root:not(.touch) .cards[data-n="1"] .mv.cooling .cd, :root:not(.touch) .cards[data-n="1"] .mv.ult:not(.ready) .cd { display: block; }
  :root:not(.touch) .cards[data-n="1"] .mv.cooling .ability-art, :root:not(.touch) .cards[data-n="1"] .mv.ult:not(.ready) .ability-art { filter: saturate(0.55) brightness(0.9); }
  :root:not(.touch) .cards[data-n="1"] .mv.gone .cd { display: none; }
  :root:not(.touch) .cards[data-n="1"] .mv.gone .ability-art { filter: grayscale(1); opacity: .25; }
  :root:not(.touch) .cards[data-n="1"] .mv.ult .cells { display: none; }
  :root:not(.touch) .cards[data-n="1"] .mv.ult.ready { border-color: var(--amber); background: #302c1c; }
  :root:not(.touch) .cards[data-n="1"] .mv.ult.ready .ability-art { animation: ult-ready 0.7s ease-in-out infinite alternate; }
  @keyframes ult-ready { to { filter: brightness(1.3) drop-shadow(0 0 7px var(--amber)); } }
  :root:not(.touch) .cards[data-n="1"] .card > .chat { width: var(--status-width); bottom: calc(100% + 8px); }
  /* the pilot's skills beside the specials: a row each (its icon in its ring, its name, what it's doing) */
  :root:not(.touch) .cards[data-n="1"] .card.skilled { grid-template: minmax(0, 1fr) / auto auto; }
  :root:not(.touch) .cards[data-n="1"] .card-skills { grid-area: 1 / 2; grid-template-columns: none; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; width: 160px; min-height: 0; margin: 0; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
  :root:not(.touch) .cards[data-n="1"] .sk { grid-template-columns: 28px minmax(0, 1fr); padding: 2px 6px 2px 3px; }
  :root:not(.touch) .cards[data-n="1"] .sk-ring { width: 28px; height: 28px; }
  :root:not(.touch) .cards[data-n="1"] .sk .sk-icon { width: 17px; height: 17px; }
  :root:not(.touch) .cards[data-n="1"] .sk b { font-size: 12px; }
  :root:not(.touch) .cards[data-n="1"] .sk small { font-size: 10px; }
  :root:not(.touch) .cards[data-n="1"] .card-combo { right: auto; left: calc(var(--status-width) + 20px); }

  /* Campaign instruments follow the selected composition around the playfield. */
  /* (the fight's panel stays at the top in the middle, the mission's clock and bill in it; the mission's
     panel has the top left) */
  :root:not(.touch) #hud:has(.cp-hud) .hud-top .roster { display: none; }
  :root:not(.touch) #hud:has(.cp-hud) .hud-clock { grid-column: 2; }
  /* a mission's clock isn't the thing to watch: a small box top right, the zoom button's size, to the left of it (the district's name between fights stays in the middle) */
  :root:not(.touch) #hud:has(.cp-hud) .hud-clock.timed > b { position: fixed; z-index: 6; top: calc(16px + var(--safe-t)); right: calc(120px + var(--safe-r)); display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; padding: 0; font: 700 14px/1 'Chakra Petch', sans-serif; letter-spacing: 0; clip-path: none; background: rgba(9, 16, 30, 0.55); border: 1px solid var(--line-dim); }
  :root:not(.touch) #hud:is(:has(.cp-hud), .endless) .feed { top: calc(272px + var(--safe-t)); font-size: 11px; max-width: 260px; }
  :root:not(.touch) #hud:is(:has(.cp-hud), .endless) .minimap { top: calc(72px + var(--safe-t)); right: calc(16px + var(--safe-r)); bottom: auto; width: 190px; height: 190px; border: 1px solid var(--mech-accent); }
  /* (plain roam's radar is up top right now, mission-status.css: its card keeps the whole foot) */
  :root:not(.touch) #hud.roam:is(.endless, .battle-hud):not(:has(.cp-hud)) .cards[data-n="1"] { right: calc(210px + var(--safe-r)); }
  :root:not(.touch) .cp-obj { top: calc(16px + var(--safe-t)); left: calc(16px + var(--safe-l)); transform: none; max-width: calc(50% - 160px); display: grid; grid-template-columns: auto 28px minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 14px; align-items: center; border: 1px solid color-mix(in srgb, var(--mech-accent) 40%, transparent); border-top: 2px solid var(--mech-accent); white-space: normal; }
  :root:not(.touch) .cp-obj-number { display: block; font: 700 11px 'Chakra Petch', var(--cjk), sans-serif; color: var(--mech-accent); grid-row: 1 / 3; padding-right: 10px; border-right: 1px solid var(--line-dim); }
  :root:not(.touch) .cp-obj .cp-icon { grid-row: 1 / 3; }
  :root:not(.touch) .cp-obj-goal { grid-row: 2; grid-column: 3; font-size: 10px; }
  :root:not(.touch) .cp-obj-title { grid-row: 1; grid-column: 3; font-size: 16px; }
  :root:not(.touch) .cp-obj-progress { grid-row: 1 / 3; grid-column: 4; color: var(--mech-accent); }
  :root:not(.touch) .cp-side { top: calc(86px + var(--safe-t)); left: calc(16px + var(--safe-l)); transform: none; justify-items: start; }
  :root:not(.touch) .cp-radio { top: calc(152px + var(--safe-t)); width: 290px; font-size: 12px; }
  :root:not(.touch) .cp-radio p { font-size: 12px; }
  :root:not(.touch) body:has(#hud:not([hidden]) .cp-hud) .pause-btn { top: calc(16px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
  :root:not(.touch) body:has(#hud:not([hidden]) .cp-hud) .zoom-btn { right: calc(68px + var(--safe-r)); }
}
@media (min-width: 1000px) and (max-width: 1170px) and (min-height: 600px) {
  :root:not(.touch) .cards[data-n="1"] { --status-width: 330px; --tile: 76px; --art: 48px; }
  :root:not(.touch) .cards[data-n="1"] .card-moves { gap: 5px; }
  :root:not(.touch) .cards[data-n="1"] .card-gauges { left: 167px; width: calc(var(--status-width) - 181px); }
  :root:not(.touch) .cards[data-n="1"] .gauge { grid-template-columns: 4.5em 1fr; }
  :root:not(.touch) .cards[data-n="1"] .g-value { display: none; }
}