/* PIANO ARMY · the rosters experiment (web/army-rosters.css; web/js/army-rosters.js). The menu's Rosters switch and
   its three rosters of five with each direction's roster; the round's level over the Cards bar, the Rosters button left
   of the squad strip, the strip by direction, the editor, and each tower button's roster chip. */

/* the menu */
.comp [hidden] { display: none !important; }
.rtoggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.rtoggle .exp { padding: 1px 6px; border-radius: 4px; background: #3a2f12; color: #ffd34a; font: 700 11px/1.4 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.rmenu { margin: 10px 0; }
.rrows { display: flex; flex-direction: column; gap: 8px; }
.rrow { display: grid; grid-template-columns: 74px repeat(5, 1fr); gap: 6px; align-items: stretch; }
.rname { align-self: center; font: 800 14px/1.1 "Barlow Condensed", sans-serif; color: var(--gold, #f0cf85); text-transform: uppercase; }
.rslot { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px 2px 4px; border-radius: 10px; min-width: 0; background: linear-gradient(#2b3a63, #1f2a47); }
.rslot.ranged { background: linear-gradient(#24474a, #1a3335); }
.rslot.siege { background: linear-gradient(#4a3a22, #33281a); }
.rslot.cavalry { background: linear-gradient(#3a2f5c, #272042); }
.rslot.heavy { background: linear-gradient(#4a2a2a, #331c1c); }
.rslot img { height: 40px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.rslot .k { font: 700 11px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--soft, #c9d1e4); margin-top: 2px; text-align: center; }
.rslot small { font: 700 10px/1.2 "Barlow Condensed", sans-serif; color: var(--dim, #8a93a8); }
.rslot.shut { opacity: .55; }
.rslot.shut img { filter: grayscale(.7) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.rdirs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.rdirs > b { flex: 1 0 100%; font: 700 13px/1.2 "Barlow Condensed", sans-serif; color: var(--soft, #c9d1e4); text-transform: uppercase; }
.rdir { display: flex; align-items: center; gap: 4px; }
.rdir span { font: 700 13px/1 "Barlow Condensed", sans-serif; min-width: 48px; }
.rdir button { width: 30px; padding: 4px 0; border-radius: 999px; font: 800 14px/1 "Barlow Condensed", sans-serif; }
.rdir button.on { background: var(--gold, #f0cf85); color: #2a2010; border-color: var(--gold, #f0cf85); }

/* the round: the level over the Cards bar */
.rlevel { font: 600 14px/1 "Barlow Condensed", sans-serif; color: var(--soft, #c9d1e4); white-space: nowrap; }
.rlevel b { color: var(--gold, #f0cf85); font-size: 17px; }

/* the Rosters button, left of the strip: the two one piece of the toolbar's row (army-stage.js groupStrip, Rosters on),
   so they wrap together (Lionel: "a roster editor button that's on the bottom tool bar next to the existing army roster
   (to the left)"); side by side in landscape; where the two do not fit across (portrait), the button on the row just
   above the strip, at its left */
.fieldctl .rsquad { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.rosterbtn { pointer-events: auto; align-self: stretch; padding: 4px 12px; border-radius: 12px; background: rgba(14, 18, 28, .86); border: 1px solid var(--line); font: 800 14px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--gold, #f0cf85); }
.rosterbtn.on { background: var(--gold, #f0cf85); color: #2a2010; }

/* the strip by direction: each direction's letter and roster, its five slots (the shut ones dim with their level) */
.fieldctl .squad .rgrp { display: flex; align-items: center; gap: 2px; }
.fieldctl .squad .rgrp + .rgrp { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); }
.fieldctl .squad .rgrp > b { font: 800 14px/1 "Barlow Condensed", sans-serif; color: var(--gold, #f0cf85); margin-right: 2px; }
.fieldctl .squad .rgrp > b sub { font-size: 10px; color: var(--soft, #c9d1e4); }
.fieldctl .squad .rgrp i { position: relative; width: 30px; height: 33px; cursor: pointer; }
.fieldctl .squad .rgrp i.shut { opacity: .32; }
.fieldctl .squad .rgrp i em { position: absolute; right: 1px; bottom: 0; font: 800 10px/1 "Barlow Condensed", sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
#stage[data-orient="portrait"] .fieldctl .squad .rgrp i { width: 20px; height: 23px; }
#stage[data-orient="portrait"] .fieldctl .squad .rgrp + .rgrp { margin-left: 3px; padding-left: 3px; }
#stage[data-orient="portrait"] .rosterbtn { padding: 3px 8px; font-size: 12px; }

/* the roster badges over the field: each direction's roster, just ahead of its tower where its units come out
   (army-stage.js placeBadges, placed again only when the view or a choice changes) */
.rbadges { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.rbadge { position: absolute; left: 0; top: 0; pointer-events: auto; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(20, 30, 58, .92); border: 2px solid var(--gold, #f0cf85); color: var(--gold, #f0cf85); font: 800 16px/24px "Barlow Condensed", sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); cursor: pointer; }
.rbadge::before { content: "R"; position: absolute; left: -2px; top: -9px; font: 800 9px/1 "Barlow Condensed", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.rbadge:hover { background: rgba(240, 207, 133, .25); }
.rbadge.fallen { opacity: .75; border-style: dashed; }
#stage[data-orient="portrait"] .rbadge { width: 24px; height: 24px; font-size: 14px; line-height: 20px; }

/* the editor over the field */
.redit { width: min(720px, calc(100% - 24px)); text-align: left; padding: 14px 16px; }
.redit .rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.redit .rhead h2 { font-size: 26px; margin: 0; }
.redit .rhead .sub { flex: 1 1 200px; }
#stage[data-orient="portrait"] .redit .rrow { grid-template-columns: 52px repeat(5, 1fr); gap: 4px; }
#stage[data-orient="portrait"] .redit .rslot img { height: 30px; }
#stage[data-orient="portrait"] .redit .rslot .k { font-size: 9px; }
@media (max-width: 640px) { .rmenu .rrow { grid-template-columns: 52px repeat(5, 1fr); gap: 4px; } .rmenu .rslot img { height: 30px; } .rmenu .rslot .k { font-size: 9px; } }