/* Battle interface (run.js renderBattle): the field edge to edge, the dock as a stone panel with four big pixel-icon
   commands, techniques in a two-column grid. Everything fits one screen, down to a small iPhone. */
body.in-battle main { padding-left: 0; padding-right: 0; }
/* the field takes the whole width; it only narrows on a very short screen, keeping 230 px for the commands */
body.in-battle .stage { width: min(100%, calc((100dvh - 230px) * 176 / 196)); border: 0; border-radius: 0; box-shadow: 0 4px 0 #0c0d0e, 0 10px 18px rgba(0, 0, 0, .5); }
body.in-battle .battle { gap: 10px; }
body.in-battle .dock { margin: 0 8px; border-radius: 6px; border-color: #0c0d0e; background: linear-gradient(#34373b, #26282b); box-shadow: inset 0 2px 0 #4c5056, inset 0 -2px 0 #1c1d20; }
body.in-battle .dock-head { padding: 8px 10px 2px; }
.cmd-who .turn-of { font: 400 17px var(--pixel); color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.cmd-who .turn-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.cmd-who .turn-kind { font: 400 12px var(--pixel); color: #c9bfae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-who .back { color: var(--gold); background: none; border: 0; padding: 0 2px 0 0; }

/* the four commands */
.cmd-root { grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 6px; }
.cmd-root .cbtn { align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 14px 2px 10px; border: 2px solid #0c0d0e; border-radius: 4px; font-size: .9rem;
  background: linear-gradient(#4a4d52, #34373b); box-shadow: inset 0 2px 0 #62666c, inset 0 -3px 0 #23252a, 0 3px 0 #0c0d0e; }
.cmd-root .cbtn .icon { display: block; }
.cmd-root .cmd-attaque { background: linear-gradient(#e88a3a, #c9641f); color: #1a0d04; box-shadow: inset 0 2px 0 #f7b06a, inset 0 -3px 0 #9a4612, 0 3px 0 #0c0d0e; }
.cmd-root .cbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 #62666c, 0 1px 0 #0c0d0e; }

/* techniques: name with its element gem, cost, one or two lines of text */
.cmd-skills { gap: 7px; }
.cmd-skills .cbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 2px 6px; min-height: 0; padding: 7px 8px;
  border: 2px solid #0c0d0e; border-radius: 4px; background: linear-gradient(#3d4044, #2e3034); box-shadow: inset 0 1px 0 #55595e, 0 2px 0 #0c0d0e; }
.cmd-skills .sk-top { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; text-align: left; }
.cmd-skills .sk-top b { font-size: .9rem; line-height: 1.05; }
.cmd-skills .sk-top { grid-column: 1; grid-row: 1; }
.cmd-skills .pm { grid-column: 2; grid-row: 1; font: 400 .7rem Digits, monospace; color: #9cc2ff; white-space: nowrap; }
.cmd-skills .sk-text { grid-column: 1 / -1; font-size: .76rem; line-height: 1.25; color: #cbc5b8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmd-skills .cbtn:disabled { opacity: .45; filter: grayscale(.7); }
.cmd-skills .cbtn.armed { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242, 155, 58, .45); }
.cmd-skills .cbtn.armed .pm { color: var(--gold); font-family: var(--pixel); }
.cmd-skills .cbtn.armed .sk-text { color: #f6b56a; font-family: var(--text); }
.gem { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: #d9c9a8; box-shadow: 0 0 0 2px #0c0d0e; }
.g-feu { background: #ff8a3a; } .g-glace { background: #7fd6ff; } .g-foudre { background: #ffe066; } .g-ombre { background: #b48cff; } .g-lumiere { background: #fff2a8; }
.g-heal, .g-revive, .g-cleanse { background: #8fe39a; } .g-buff { background: #f6c453; } .g-debuff { background: #c77dba; } .g-mag { background: #9cc2ff; } .g-steal { background: #e0b040; }

/* plates: the bars never leave their box, however long the hint under them */
.plate.foe, .plate.ally { grid-template-columns: minmax(0, 1fr); }
.plate.foe { width: 21%; }
.plate .ehint { white-space: normal; line-height: 1.05; }

/* short screens: the commands get slimmer, never the field */
@media (max-height: 700px) {
  body.in-battle .battle { gap: 6px; } body.in-battle .dock-head { padding-top: 5px; }
  .cmd-skills { gap: 5px; } .cmd-skills .cbtn { padding: 8px 7px; }
  .cmd-root .cbtn { padding: 10px 2px 8px; }
}
/* below 780 px, a technique shows its name and cost; its text appears once it is armed (first tap) */
@media (max-height: 780px) { .cmd-skills .cbtn .sk-text { display: none; } }

/* aiming: a caption on the field, the plates that can't be picked fade, the targets glow (sizes never change) */
.aim { position: absolute; left: 50%; top: 6px; transform: translate(-50%, -6px); max-width: 92%; padding: 5px 12px; border-radius: 14px; border: 2px solid #0c0d0e;
  background: rgba(16, 14, 12, .85); color: var(--ink); font: 13px/1.25 var(--text); text-align: center; width: max-content;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.aim.on { opacity: 1; transform: translate(-50%, 0); }
.aim b { font: 400 14px var(--pixel); color: var(--gold); }
.aim small { display: block; font: 400 11px var(--pixel); color: #f6b56a; margin-top: 2px; }
.plates.aiming .plate:not(.target), .plates.aiming .bossrow:not(.target) { opacity: .4; }
.plates .plate.target, .plates .bossrow.target { animation: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(242, 155, 58, .6); }
.mark.target { border-left-width: 7px; border-right-width: 7px; border-top: 10px solid var(--gold); }
.gem.g-foe { background: #ff7a6a; } .gem.g-item { background: #e0453a; }
.cmd-targets .sk-text { display: block !important; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; }
.cmd-targets .pm { color: var(--ink); }
.cmd-skills .cbtn.armed { transform: none; }
.bossbar.on ~ .aim { top: 46px; }
.cmd-skills .sk-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stage:has(.aim.on) .banner { opacity: 0; }

/* Victory and defeat: stone windows over a darkened field, the button right under them; the panel below steps aside. */
.dock.gone { visibility: hidden; }
.stage.over .plates, .stage.over .bossbar, .stage.over .aim, .stage.over .banner, .stage.over .say, .stage.over .duel-heading { opacity: 0; transition: opacity .4s; pointer-events: none; }
.stage.over.lose .battle-canvas { filter: grayscale(1) brightness(.6) sepia(.3) hue-rotate(-30deg) saturate(2); transition: filter 1.2s; }
.stage.marching .plates, .stage.marching .bossbar { opacity: 0; transition: opacity .3s; pointer-events: none; } /* the group walking onto or off the field */
.bend { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6% 8px 8px;
  background: rgba(6, 6, 8, 0); transition: background .6s; overflow-y: auto; overscroll-behavior: contain; }
.bend.on { background: rgba(6, 6, 8, .5); }
.bend.lose.on { background: radial-gradient(ellipse at 50% 40%, rgba(30, 4, 4, .35), rgba(40, 0, 0, .7)); }
.bend-title { text-align: center; opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.bend.on .bend-title { opacity: 1; transform: none; }
.bend-title b { display: block; font: 400 34px/1.1 Pixelify, serif; color: #ffd76a; letter-spacing: 1px;
  text-shadow: 3px 0 #0c0d0e, -3px 0 #0c0d0e, 0 3px #0c0d0e, 0 -3px #0c0d0e, 3px 3px #0c0d0e, 0 0 22px rgba(255, 190, 80, .5); }
.bend.lose .bend-title b { font-size: 28px; color: #e3483a; text-shadow: 2px 0 #0c0d0e, -2px 0 #0c0d0e, 0 2px #0c0d0e, 0 -2px #0c0d0e, 0 0 20px rgba(200, 40, 30, .6); }
.bend-title small { display: block; margin-top: 2px; font: italic 15px Vollkorn, serif; color: #e6dfd2; text-shadow: 1px 1px 0 #0c0d0e; }
.bend-body { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .4s .35s, transform .4s .35s; }
.bend.on .bend-body { opacity: 1; transform: none; }
.bend.lose .bend-body { transition-delay: 1s; }
.stone-win { position: relative; color: #f4f1ea; font: 400 15px Pixelify, serif; text-shadow: 1px 1px 0 #0a0a0c; text-align: left; border-radius: 6px; padding: 8px 12px;
  background: linear-gradient(180deg, #3c3f44 0%, #2a2c30 55%, #1e1f22 100%); border: 3px solid #c99a45;
  box-shadow: 0 0 0 2px #0c0d0e, inset 0 0 0 1px #6b5226, inset 0 2px 0 #565a60, 0 6px 14px rgba(0, 0, 0, .5); }
.bw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bw-pair .stone-win { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px; }
.bw-pair span { color: #d9b46a; } .bw-pair b { font: 400 18px Digits, monospace; } .bw-pair b.gold { color: #ffd76a; }
.bw-title { color: #d9b46a; font-size: 14px; margin-bottom: 4px; }
.bw-loot { display: flex; flex-direction: column; gap: 5px; }
.bw-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bw-row > :first-child { justify-self: center; }
.bw-row b { font: 400 15px Digits, monospace; }
.bw-row.bad span { color: #ff9a8a; }
.bw-row.relic span b { color: #ffcf7a; font: inherit; display: block; } .bw-row.relic small { display: block; font: 13px/1.3 Vollkorn, serif; color: #d8cfb8; text-shadow: none; }
.bw-row.relic.curse span b { color: #c79cff; }
.bw-row.ko > :first-child { filter: grayscale(1) brightness(.85); }
.bw-ico { font-style: normal; color: #ffcf7a; font-size: 16px; }
.bw-gem { display: block; width: 11px; height: 11px; transform: rotate(45deg); box-shadow: 0 0 0 2px #0c0d0e; }
.bw-none { margin: 0; font: italic 14px Vollkorn, serif; color: #cfc7b8; text-shadow: none; }
.bend-go { display: flex; justify-content: flex-end; gap: 8px; }
.bend-go.row { justify-content: center; flex-wrap: wrap; }
.bend-btn { font: 400 17px Pixelify, serif; color: #1a0d04; padding: 10px 18px; border: 2px solid #0c0d0e; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#e88a3a, #c9641f); box-shadow: inset 0 2px 0 #f7b06a, inset 0 -3px 0 #9a4612, 0 3px 0 #0c0d0e; }
.bend-btn.plain { color: #f4f1ea; background: linear-gradient(#4a4d52, #34373b); box-shadow: inset 0 2px 0 #62666c, inset 0 -3px 0 #23252a, 0 3px 0 #0c0d0e; }
.bend-btn:active { transform: translateY(2px); }
/* the XP rows inside the stone window */
.stone-win .xp-panel { margin: 0; gap: 0; }
.stone-win .xp-row { padding: 5px 0; align-items: center; }
.stone-win .xp-row + .xp-row { border-top: 1px solid rgba(201, 154, 69, .25); }
.stone-win .xp-head b { font: 400 15px Pixelify, serif; color: #f4f1ea; }
.stone-win .xp-lvl, .stone-win .xp-gain { font: 400 13px Digits, monospace; color: #cfd6f4; }
.stone-win .xp-lvl.flash { color: #ffe66a; text-shadow: 1px 1px 0 #3a2400, 0 0 8px rgba(255, 214, 90, .7); }
.stone-win .bar.xp { height: 6px; background: #141516; box-shadow: 0 0 0 1px #0c0d0e; border: 0; border-radius: 0; }
.stone-win .levelup { margin-top: 3px; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
.stone-win .levelup > b { font: 400 13px Pixelify, serif; color: #ffe66a; }
.stone-win .levelup .gains { display: none; }
.stone-win .levelup .newskill { font: 13px Vollkorn, serif; color: #ffe9a8; text-shadow: none; }
@media (max-height: 700px) { .bend { padding-top: 3%; gap: 6px; } .bend-title b { font-size: 28px; } .stone-win { padding: 6px 10px; } }
.stone-win .xp-row .grow { min-width: 0; } .stone-win .xp-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stone-win .xp-lvl, .stone-win .xp-gain { white-space: nowrap; }
.stone-win .xp-head { min-width: 0; } .stone-win .xp-head b { flex: 0 1 auto; }