/* Builder and Play Mode use the same scorched material, while editable controls
   retain their outlines so players can still see where to tap. */
@media screen {
  .lead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0 !important;
  }
  .lead::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(27,18,24,.42),rgba(27,18,24,.11)),url('assets/ash-title-ruins.webp') center bottom / cover no-repeat;
    opacity: .82;
  }
  .mast, footer { border-top: 0 !important; border-bottom: 0 !important; }
  .panel-title { border-bottom: 0 !important; padding-bottom: 0; }
  .panel,
  .formation,
  .recruit-choice,
  .note,
  .doctrine,
  .unit-ref {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .panel::before,
  .formation::before,
  .recruit-choice::before,
  .note::before,
  .doctrine::before,
  .unit-ref::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: linear-gradient(130deg,rgba(24,17,21,.23),rgba(38,20,17,.06)),url('assets/ash-parchment.webp') center/cover;
    opacity: .86;
    -webkit-mask-image: radial-gradient(ellipse 80% 84% at center,#000 59%,#0009 79%,transparent 100%);
    mask-image: radial-gradient(ellipse 80% 84% at center,#000 59%,#0009 79%,transparent 100%);
  }
  .formation,
  .recruit-choice,
  .note,
  .doctrine,
  .unit-ref {
    --ash-builder-leaf: url('assets/ash-frame-cinder.webp');
    --ash-builder-leaf-opacity: .9;
  }
  .formation:nth-child(3n + 1),
  .recruit-choice:nth-child(3n + 1),
  .doctrine {
    --ash-builder-leaf: url('assets/ash-frame-ember.webp');
    --ash-builder-leaf-opacity: .66;
  }
  .formation:nth-child(3n),
  .recruit-choice:nth-child(3n),
  .note {
    --ash-builder-leaf: url('assets/ash-frame-oxblood.webp');
    --ash-builder-leaf-opacity: .9;
  }
  .formation::before,
  .recruit-choice::before,
  .note::before,
  .doctrine::before,
  .unit-ref::before {
    inset: 0;
    background: var(--ash-builder-leaf) center / 100% 100% no-repeat !important;
    opacity: var(--ash-builder-leaf-opacity);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .formation-body {
    background: transparent !important;
    border-top: 0 !important;
    padding-top: 5px;
  }
  .fighter-row { border-top: 0 !important; padding: 16px 0; }
  .battle-fighter { border-bottom: 0 !important; }
  .recruit-choice { padding: 24px 21px; }
  .formation { margin-bottom: 24px; }
  .formation-head { padding: 23px 26px 12px; }
  .formation .formation-body { padding-left: 26px; padding-right: 26px; padding-bottom: 22px; }
  button,select,input { box-shadow: none !important; }
  @media (max-width: 570px) {
    .lead::before { background-position: 70% bottom; opacity: .7; }
    .panel { margin-bottom: 14px; }
    .formation-head { padding: 19px 17px 10px; }
    .formation .formation-body { padding: 8px 17px 18px; }
    .recruit-choice { padding: 21px 19px; }
  }
}

/* 2.5 layout polish: calm, non-stretching surfaces below the illustrated header. */
@media screen {
  .panel,.formation,.recruit-choice,.note,.doctrine,.unit-ref {
    background:linear-gradient(145deg,#30262b,#241d23 78%) !important;
    border:1px solid #725747 !important;
    border-radius:3px !important;
    box-shadow:0 7px 20px #0b080b45 !important;
  }
  .panel::before,.formation::before,.recruit-choice::before,.note::before,.doctrine::before,.unit-ref::before { content:none !important; }
  .panel-title { border-bottom:1px solid #705448 !important;padding-bottom:14px; }
  .formation-head { border-bottom:1px solid #624b42; }
  .formation-body { background:transparent !important; }
  .recruit-grid {display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;}
  .recruit-grid > .recruit-choice {flex:1 1 220px;max-width:315px;}
  .recruit-choice {display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;min-width:0;gap:7px;}
  .recruit-choice strong {font:400 clamp(20px,2vw,27px)/1.2 Georgia,serif;color:#f2d9b7;}
  .recruit-choice p {font:14px/1.55 Georgia,serif;color:#e1ccb8;min-height:0;margin:3px 0 14px;}
  .recruit-choice button {margin-top:auto;min-width:0;max-width:255px;}
  .recruit-choice .required-choice {border-color:#bc9366;}
  .note,.doctrine,.unit-ref {padding-block:16px;}
  .panel :is(input,select,button) {max-width:100%;}
  @media(max-width:570px) {
    .recruit-grid > .recruit-choice {flex-basis:100%;max-width:none;}
    .recruit-choice {padding:22px 18px !important;}
    .recruit-choice p {font-size:14px;margin-bottom:10px;}
    .recruit-choice button {max-width:none;}
  }
}

/* Align the utilitarian builder with the wider Age of Ash visual language. */
@media screen {
  .mast {background:linear-gradient(180deg,#1e171b,#171216) !important;border-bottom:1px solid #654c40 !important;}
  .mast .brand b {font:400 clamp(17px,1.8vw,25px)/1.1 Georgia,serif;letter-spacing:.055em;color:#ecd6b2;}
  .mast .brand small {font:500 9px/1.4 Georgia,serif;letter-spacing:.22em;color:#bba583;}
  .mast .sigil {border:0 !important;}
  .builder-site-nav a {font:400 15px/1.2 Georgia,serif;letter-spacing:0;color:#d9c9b6;padding:10px 12px;}
  .builder-site-nav .builder-back {background:transparent;color:#ead1aa;border-color:transparent;font-weight:400;margin-right:0;}
  .builder-site-nav .builder-back:hover {background:#30262b;border-color:#705346;}
  .mast-actions .pill {border-radius:2px;letter-spacing:.05em;text-transform:uppercase;}
  .mast-actions .pill.active {background:#703e42;color:#fae6c6;border-color:#a07853;}
  .lead h1 {font-family:Georgia,serif;letter-spacing:-.025em;}
  .panel-title h2 {font-family:Georgia,serif;font-weight:400;letter-spacing:.02em;}
  .panel .secondary:is(a),.panel a.secondary,.formation a,.note a {color:#f0d09e !important;text-decoration-color:#b78c5b;}
  .panel a.secondary {background:#4c3230;border:1px solid #946d53 !important;}
  .panel a.secondary:hover {color:#fff0d5 !important;background:#67413c;border-color:#c79c6a !important;}
  .panel :is(button,select,input):focus-visible {outline:2px solid #d5ad6a;outline-offset:2px;}
  @media(max-width:1110px) {.builder-site-nav a {font-size:14px;}}
  @media(max-width:570px) {
    .mast .brand b {font-size:15px;}
    .mast .brand small {font-size:8px;letter-spacing:.13em;}
    .builder-site-nav a {font-size:13px;padding:9px 10px;}
  }
}