/* Arc Duel — presentation only.

   THE ONE RULE IN HERE THAT IS NOT TASTE (§14).

   A phone's aspect changes by a factor of four between orientations, and for
   this game that is not a layout question: fit the field to the screen and
   portrait gives two bases close together under an enormous sky while
   landscape gives them far apart under a low ceiling. Same seed, two games.

   The world is contain-fit at a UNIFORM scale in app.js and is always fully
   visible. All this file does is decide where the LEFTOVER goes — and which
   leftover there is decides that for us: portrait spares height, so the
   controls sit below under a one-handed thumb; landscape spares width, so
   they become rails under a two-handed grip. */

:root {
  --bg: #0b1020;
  --panel: #151d33;
  --line: #2a3550;
  --ink: #e8eefc;
  --dim: #93a3c4;
  --accent: #4bd0e8;
  --hot: #ffcf5c;
  --go: #4ade80;
  --stop: #f87171;

  --sky: #101a33;
  --ground: #6f7d5a;
  --groundLip: #97a878;
  --p0: #4bd0e8;
  --p1: #ff8a5c;
  --trail: #cfe6ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}

#app { height: 100%; display: flex; flex-direction: column; }

/* #279: 44px is the tap floor Apple and Google both publish, and the header
   pill is the one control on every screen of every product. */
#hdr {
  display: flex; align-items: center; gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
#hdrTitle { font-weight: 700; font-size: 15px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Below this the header is five fixed pills and a growing chip; the title is
   the only thing on it that is also in the browser tab, so it is what goes. */
@media (max-width: 420px) { #hdrTitle { display: none; } }
#hud { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#roundChip { font-size: 13px; color: var(--dim); font-weight: 700; }
.pill {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); font-size: 18px; cursor: pointer;
}

.scr { display: none; flex: 1; min-height: 0; flex-direction: column; }
.scr.on { display: flex; }
#scr-menu, #scr-how {
  overflow-y: auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  align-items: stretch;
}

h1 { font-size: 30px; margin: 6px 0 2px; text-align: center; }
.sub { color: var(--dim); text-align: center; margin: 0 auto 14px; max-width: 30rem; }
.hint { color: var(--dim); font-size: 14px; margin: 4px auto 10px;
        max-width: 30rem; width: 100%; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; margin: 0 auto 10px; max-width: 30rem; width: 100%;
}
.card h2 { font-size: 17px; margin: 0 0 6px; }
.big {
  display: block; width: 100%; max-width: 22rem; margin: 8px auto;
  min-height: 52px; border-radius: 14px; cursor: pointer;
  background: #1c2942; color: var(--ink); font-size: 17px; font-weight: 700;
  border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.big.primary { background: var(--accent); color: #05222b; border-color: #2fb6cf; }
#statsLine { text-align: center; color: var(--dim); font-size: 14px; margin-top: 6px; }

/* the radiogroups on the menu */
#oppRow, #tierRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto 10px;
                    max-width: 30rem; width: 100%; }
#oppRow .opt, #tierRow .opt { flex: 1 1 30%; }
.opt {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 6px; border-radius: 10px;
  font: 600 13px/1.25 inherit; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.opt[aria-checked="true"] { border-color: var(--accent); background: #123449; color: #bdf0fb; }
.opt small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }

details#custom { max-width: 30rem; width: 100%; margin: 0 auto 10px; }
summary { min-height: 44px; display: flex; align-items: center; gap: 8px;
          cursor: pointer; font-weight: 700; padding: 6px 10px;
          background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.badge { color: var(--dim); font-size: 12px; font-weight: 400; }
.fields { padding: 8px 0 4px; }
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
         margin: 8px 0; min-height: 44px; }
.field .lbl { flex: 0 0 66px; font-size: 13px; color: var(--dim); }
.field > div[role="radiogroup"] { display: flex; flex: 1; gap: 6px; min-width: 0; }

/* ---- the play screen ---------------------------------------------------- */
#playWrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#stage { position: relative; flex: 1 1 auto; min-height: 0; order: 0;
         display: flex; align-items: center; justify-content: center; }
#cvs { display: block; touch-action: none; }

/* A ROW WHOSE CONTENTS GROW MUST WRAP. Six controls at 44px plus a 92px Fire
   button is 356px of content before gaps, and a 320px phone is a supported
   viewport — so the aim rail wraps rather than sliding its first control off
   the left edge. Only a row of fixed peers may stay on one line. */
.rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; flex: 0 0 auto;
        align-items: center; justify-content: center; }
#railL { order: 1; border-top: 1px solid var(--line); }
#railR { order: 2; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

/* EIGHT WEAPONS DO NOT FIT A LANDSCAPE RAIL, and the arithmetic is the reason
   the picker is grouped rather than just longer. The rail is 168 x ~183 on an
   iPhone SE; a 2-column grid of eight is four rows of 44px plus three 6px gaps
   = 194px, which overflows. Split into shells (5) and ground (3) and the
   worst case is three rows = 144px, which fits with room over. The grouping
   also happens to be the honest one: things that hurt, and things that move
   the ground. */
#wepGroup { display: flex; gap: 6px; flex: 0 0 auto; }
#wepGroup .opt { min-height: 44px; font-size: 12px; padding: 6px 10px; }
#wepRow { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0;
          justify-content: center; }
#wepRow .opt b { display: block; font-size: 10px; font-weight: 700; color: var(--hot); }
#wepRow .opt { flex: 0 1 auto; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.readout { min-height: 44px; min-width: 58px; flex: 0 0 auto; display: flex; align-items: center;
           justify-content: center; font: 700 15px/1 inherit;
           background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
           padding: 0 8px; }
.nudgeRow { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.viewRow { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.nudge {
  min-width: 44px; min-height: 44px; border-radius: 10px; cursor: pointer;
  background: #1c2942; color: var(--ink); border: 1px solid var(--line);
  font: 700 20px/1 inherit; touch-action: manipulation;
}
.fire {
  min-height: 44px; min-width: 88px; flex: 0 0 auto; border-radius: 12px; cursor: pointer;
  background: var(--hot); color: #2c2000; border: 1px solid #d8a92e;
  font: 800 16px/1 inherit; padding: 0 14px; touch-action: manipulation;
}
.fire[disabled] { opacity: .45; }

/* LANDSCAPE: the leftover is width, so the controls become rails. Two of
   them, left and right, because a landscape grip has two thumbs and they are
   nowhere near each other. */
@media (orientation: landscape) {
  #playWrap { flex-direction: row; }
  #railL { order: 0; flex-direction: column; width: 33vw; max-width: 168px;
           border-top: 0; border-right: 1px solid var(--line); }
  #stage { order: 1; }
  #railR { order: 2; flex-direction: column; width: 33vw; max-width: 168px;
           border-left: 1px solid var(--line); }
  #wepRow { flex-direction: row; flex-wrap: wrap; flex: 0 0 auto; }
  .rail { justify-content: flex-start; }
}

/* R-C15a: flex-start on the scrim, margin auto on the card. `align-items:
   center` cannot be scrolled to when the card is taller than the window. */
.ovl {
  position: absolute; inset: 0; display: none; z-index: 5;
  align-items: flex-start; justify-content: center;
  background: rgba(4,8,18,.82); padding: 16px; overflow-y: auto;
}
.ovl.on { display: flex; }
.ovlCard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; max-width: 24rem; width: 100%; margin: auto; text-align: center;
}
.ovlCard h2 { margin: 0 0 6px; }
.big-score { font-size: 34px; font-weight: 800; margin: 6px 0; }

/* the generated legends */
.lgRow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.lgArt { width: 26px; height: 18px; border-radius: 4px; flex: 0 0 26px;
         background: var(--m); border: 1px solid rgba(255,255,255,.25); }
.lgTxt { font-size: 14px; }
.lgTxt small { display: block; color: var(--dim); }

#draftRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
#draftRow .opt { flex: 0 1 auto; min-height: 44px; padding: 8px 12px; }

#toast {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--accent); color: var(--ink);
  padding: 8px 14px; border-radius: 12px; font-weight: 700; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 6;
  max-width: 80%; text-align: center;
}
#toast.on { opacity: 1; }

#footer { flex: 0 0 auto; }