/* First-instance art direction. Shared rendering and gameplay stay authoritative. */
/* Board surfaces are controls, not a selectable document. Keep editable fields usable. */
.unit, .handcard, .tray__head { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }
/* Named emblems for this first board; other battlefields retain their own art. */
.field[data-header-art] .field__emblem {
  background-image: url('/modern/assets/generated-v5/header-emblems.png');
  background-size: 300% 100%; background-repeat: no-repeat;
  background-color: transparent; border-radius: 0; box-shadow: none;
}
.field[data-header-art="grove"] .field__emblem { background-position: left center; }
.field[data-header-art="void"] .field__emblem { background-position: center; }
.field[data-header-art="baron"] .field__emblem { background-position: right center; }
.bigaction { background-image: url('/modern/assets/generated-v1/action-button.webp'); }
.bigaction:not(:disabled):not(.bigaction--inert)::before { display: none; }
.field--scene .field__scrim { background: linear-gradient(180deg, #060b1010, #060b1030); }
.field--scene .field__scene { filter: saturate(1.12) contrast(1.05); }
.field__seam { height: 2px; margin: .1cqw 1.3cqw; }
.field__seam::after { width: .55cqw; height: .55cqw; }
.turnstate { padding: .65cqw 1.1cqw; border: 1px solid #ae8952; background: #07131dea; border-radius: 0 0 25% 25%; }
.turnstate__who { color: #83e9ff; }

/* Match the renderer's stacked breakpoint. Browser zoom changes CSS viewport
   dimensions: a separate 1000px/600px gate abruptly restored the old layout. */
@media (min-width: 701px) and (orientation: landscape) and (pointer: fine) {
  /* Keep the board in the flexible row even when the fixture banner is hidden. */
  body { height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #devbar { grid-row: 1; }
  #fixture-banner { grid-row: 2; }
  #stage {
    grid-row: 3;
    --stage-w: 100%;
    width: var(--stage-w);
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    font-size: 1.45vw;
  }
  #statusbar { grid-row: 4; }
  .hud--opp, .hud--you { left: 2%; width: 25%; height: 15%; }
  .hud--opp { top: 2%; }
  .hud--you { top: 69%; }
  .hud { gap: .25cqw; align-items: center; padding: .45cqw; background: #09131bea; border: 2px solid #a58146; border-radius: .5cqw; box-shadow: inset 0 0 0 2px #29281c, 0 4px 12px #0009; }
  .hud__who { width: 25%; }
  .hud__stats { flex: 1; background: none; box-shadow: none; padding: .1cqw; }
  .hud__points { font-size: 1.3cqw; }
  .hud__xp { font-size: .8cqw; color: #89dce9; }
  .hud__slots { padding: 0; gap: .35cqw; background: none; box-shadow: none; }
  .slot { width: 4.4cqw; }
  .slot__card { border: 1px solid #b99c57; }
  .slot__label { font-size: .58cqw; color: #edf1e6; }
  .hud__name { font-size: .8cqw; }
  .res--opp, .res--you { left: 2%; width: 25%; height: 7%; gap: .2cqw; }
  .res--opp { top: 17.5%; }
  .res--you { top: 84.5%; }
  .res__group { flex: 1; padding: .2cqw .3cqw; border: 1px solid #9e7e45; background: #07131bf0; }
  .res { gap: .25cqw; }
  .res__group { min-width: 0; }
  .res__group--runes { flex: 2.1; padding-inline: .45cqw; }
  .res__group--runedeck { flex: .75; }
  .res--you { width: 27%; }
  .runes { gap: .12cqw; max-width: 100%; }
  .rune { flex: 0 1 1.15cqw; min-width: 0; }
  .res__label { font-size: .55cqw; letter-spacing: .03em; }
  .res__row { min-height: 1.3cqw; }
  .rune { width: 1.15cqw; }
  .gem { width: 1.5cqw; }
  .ophand { left: 36%; right: 36%; top: -2.5%; height: 13%; gap: 0; }
  .opcard { width: 3.1cqw; margin-inline: -.35cqw; }
  .ophand__label {
    position: absolute; top: auto; bottom: 0; height: 1.55cqw;
    display: flex; align-items: center; justify-content: center; gap: .55cqw;
    padding: .1cqw 1.8cqw; border: 0; border-radius: 0; box-shadow: none;
    background: url('/modern/assets/generated-v6/base-tray.png') center/100% 135% no-repeat;
  }
  .ophand__label i { font-size: .7cqw; letter-spacing: .1em; color: #d2dce9; }
  .ophand__label b { font-size: .9cqw; }
  .shelf--opp { left: 31%; top: 13%; width: 39%; height: 11.5%; }
  .shelf--you { left: 30%; top: 69%; width: 41%; height: 14.5%; }
  .shelf { border: 0; border-image: none; padding: 1.25cqw 1.4cqw .45cqw; background: none; }
  .shelf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/modern/assets/generated-v6/base-tray.png') center/100% 125% no-repeat; pointer-events: none; }
  .shelf__label {
    top: .35cqw; transform: translateX(-50%); gap: .55cqw;
    padding: 0 .8cqw; background: transparent; border: 0;
    font-family: var(--ui); font-size: .66cqw; letter-spacing: .1em;
    color: #e1d2ae; line-height: 1.2;
  }
  .shelf--opp .shelf__label { color: #bedbf2; }
  .fields { left: 3%; right: 13%; top: 26%; height: 41%; gap: .55cqw; }
  .field { min-height: 0; overflow: visible; border-radius: 0; padding: .4cqw .6cqw .5cqw; box-shadow: none; background: #101819; }
  .field::after { content: ''; position: absolute; inset: -.6cqw -.8cqw; z-index: 5; pointer-events: none; border: 1.1cqw solid transparent; border-image: url('/modern/assets/generated-v4/battlefield-surround.png') 115 145 125 145 / 1.4cqw 1.55cqw stretch; }
  .field__head {
    min-height: 2.8cqw; padding: .35cqw .35cqw .4cqw; gap: .3cqw;
    background: linear-gradient(90deg, #06121ef2, #07101de8 65%, #091525f2);
    border-bottom: 1px solid color-mix(in srgb, var(--tint, #a28b53) 75%, #122338);
  }
  .field__title { position: relative; padding-inline: 2.5cqw; }
  .field[data-header-art] .field__head { min-height: 2.8cqw; }
  .field[data-header-art] .field__emblem { width: 1.7cqw; height: 1.7cqw; box-shadow: none; left: .25cqw; }
  .field[data-header-art="grove"] .field__head { background: linear-gradient(90deg, #04322bf5, #07121ded 65%); }
  .field[data-header-art="void"] .field__head { background: linear-gradient(90deg, #280c42f5, #0c1021ed 65%); }
  .field[data-header-art="baron"] .field__head { background: linear-gradient(90deg, #1f124af5, #080f25ed 65%); }
  .field__line { gap: 0; }
  .field__name {
    font-family: var(--ui); font-size: .68cqw;
    font-weight: 500; letter-spacing: .09em; line-height: 1.15;
    white-space: nowrap; color: #e6eef5; text-shadow: 0 1px 2px #000;
  }
  .field__score { font-size: .58cqw; line-height: 1.15; letter-spacing: .08em; }
  .field__score.is-you { color: #4dff9d; }
  .field__score.is-opp { color: #ff6878; }
  .field__btn { width: 1.25cqw; height: 1.25cqw; font-size: .78cqw; flex-shrink: 0; }
  .field__emblem {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1.1cqw; height: 1.1cqw;
    box-shadow: 0 0 .35cqw var(--tint, #627dac);
  }
  .might { width: 1.5cqw; height: 1.5cqw; }
  .might__n { font-size: 1cqw; line-height: 1.5cqw; }
  .dmg { width: 1.2cqw; height: 1.3cqw; }
  .dmg__n { font-size: .75cqw; line-height: 1.3cqw; }
  .gem { font-size: .8cqw; }
  .lane { padding: .2cqw .5cqw; align-content: center; }
  .handzone { left: 33%; right: 28%; bottom: -10%; height: 18%; z-index: 20; }
  .action { right: 1.3%; top: 35%; width: 10.3%; }
  .bigaction__label { font-size: 1.45cqw; }
  .turnstate__who { font-size: .85cqw; }
  .turnstate__phase { font-size: .7cqw; }
  .piles--opp, .piles--you { right: 1.3%; width: 23%; }
  .piles--opp { top: 2%; }
  .piles--you { bottom: 3%; }
  .pile--deck .pile__back { width: 4cqw; }
  .pile--minor { align-self: start; padding: .5cqw; }
  .pilechip { flex-direction: column; min-width: 3cqw; gap: .3cqw; }
  .pilechip small { font-size: .55cqw; }
  .chain { right: 1%; top: 64%; width: 11%; max-height: 13%; }
  #stage::after { content: ''; position: absolute; left: -.8%; top: 30%; width: 5%; height: 31%; background: url('/modern/assets/generated-v4/lantern-ivy.png') center/contain no-repeat; pointer-events: none; z-index: 6; }
}