/* The supplied home-page plaque, reused without changing the source image.
   The silhouette masks its black matte. Labels remain accessible live text.
   This layer overrides earlier important material rules, leaving the game
   board, mission cards, artwork hotspots and placement pieces untouched. */
@layer tts-controls {
  body.tts-edition :is(h1, h2, h3, .panel-heading),
  body.tts-edition :is(h1, h2, h3, .panel-heading) > span {
    font-family: "Black Ops One", "Arial Narrow", sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
  }
  body.tts-edition .tts-plaque-button {
    --plaque-height: 56px;
    --plaque-type-ratio: .64;
    position: relative;
    isolation: isolate;
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-items: center !important;
    align-content: center !important;
    height: var(--plaque-height) !important;
    min-height: var(--plaque-height) !important;
    min-width: 104px;
    padding: 0 calc(var(--plaque-height) * .7) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f9d77f !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: calc(var(--plaque-height) * var(--plaque-type-ratio)) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 0 -1px 0 #fff0bc80, 0 2px 0 #805315, 0 3px 3px #000 !important;
    white-space: nowrap !important;
    filter: drop-shadow(0 3px 3px #0008) !important;
    cursor: pointer;
    transition: filter 120ms ease !important;
  }
  body.tts-edition .tts-plaque-button::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    content: "" !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url('./assets/through-the-shadows/gold-plaque.png') center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: polygon(4.7% 20%,5.5% 16%,7% 14%,11.8% 14%,12.5% 15.5%,27% 15.5%,31% 12%,34% 13%,40% 7%,45% 4%,50% 3%,55% 4%,61% 8%,66% 13%,69% 12%,73% 15%,87.5% 15%,88% 14%,93% 14%,94.5% 16%,95.3% 20%,95.3% 79%,94.5% 84%,93% 86%,88% 86%,87% 84%,73% 84%,70% 88%,66% 85%,60% 92%,55% 96%,50% 97%,45% 96%,40% 92%,34% 85%,31% 88%,27% 85%,13% 85%,12% 86%,7% 86%,5.5% 84%,4.7% 79%) !important;
    pointer-events: none !important;
  }
  body.tts-edition .tts-plaque-button::after { display: none !important; content: none !important; }
  body.tts-edition .tts-plaque-button > :is(span, strong) { font: inherit !important; color: inherit !important; text-shadow: inherit !important; }
  body.tts-edition .tts-plaque-button:hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 3px 4px #0009) !important; }
  body.tts-edition .tts-plaque-button:focus-visible { outline: 3px solid #fff0ad !important; outline-offset: 3px !important; }
  body.tts-edition .tts-plaque-button:active:not(:disabled) { filter: brightness(.88) !important; }
  body.tts-edition .tts-plaque-button[aria-pressed="true"] { filter: brightness(1.2) drop-shadow(0 0 5px #efc66488) !important; }
  body.tts-edition .tts-plaque-button:disabled { opacity: .48 !important; cursor: default !important; }
  body.tts-edition .tts-plaque-button[hidden] { display: none !important; }

  body.tts-edition .tts-heading button { --plaque-height: 56px; min-width: 160px; padding-inline: 23px !important; }
  body.tts-edition #tts-play { --plaque-height: 76px; min-width: 215px; }
  body.tts-edition .tts-fleet-header button { --plaque-height: 56px; }
  body.tts-edition .tts-fleet-tabs button { --plaque-height: 52px; --plaque-type-ratio: .52; max-width: 245px !important; padding-inline: 16px !important; text-transform: none !important; }
  body.tts-edition .tts-fleet-footer button { --plaque-height: 52px; --plaque-type-ratio: .6; }
  body.tts-edition :is(#tts-fleet-prev, #tts-fleet-next, #tts-dialog-close, #feedback-close, .achievements-close) { --plaque-height: 48px; --plaque-type-ratio: .8; width: 80px !important; min-width: 80px !important; padding: 0 !important; }
  body.tts-edition .tts-dialog button:not(.tts-art-nav) { --plaque-height: 54px; --plaque-type-ratio: .59; }
  body.tts-edition .tts-fire-options button { --plaque-height: 62px; --plaque-type-ratio: .52; width: 100%; padding-inline: 20px !important; }
  body.tts-edition .tts-home-audio button { --plaque-height: 44px; --plaque-type-ratio: .57; }
  body.tts-edition #tts-home-settings { min-width: 82px; }
  body.tts-edition .tts-compact-actions button { --plaque-height: 46px; --plaque-type-ratio: .56; }
  body.tts-edition .tts-film-controls button { --plaque-height: 54px; --plaque-type-ratio: .56; }
  body.tts-edition .tts-tablet > .tts-plaque-button {
    --plaque-height: 48px;
    --plaque-type-ratio: .46;
    position: absolute !important;
    left: 4% !important;
    right: 8% !important;
    bottom: 9% !important;
    width: 84% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    transform: rotate(6deg) !important;
    transform-origin: 50% 50% !important;
  }

  body.tts-edition .map-room-top-controls > button { --plaque-height: max(42px, min(3.28vw, 5.83svh)); --plaque-type-ratio: .58; padding-inline: 6px !important; }
  body.tts-edition :is(#map-room-achievements, #map-room-feedback) { --plaque-height: max(32px, min(2.5vw, 4.444svh)); --plaque-type-ratio: .5; margin-top: max(4px, min(.3125vw, .556svh)) !important; }
  body.tts-edition .map-room-panel-control { --plaque-height: max(38px, min(2.97vw, 5.28svh)); --plaque-type-ratio: .52; padding-inline: 10px !important; }
  body.tts-edition .map-room-rail-heading > span { font-size: max(40px, min(3.125vw, 5.556svh)) !important; }
  body.tts-edition #map-room-auto-arrange { --plaque-height: max(28px, min(2.19vw, 3.89svh)); --plaque-type-ratio: .5; }
  body.tts-edition #map-room-deploy { --plaque-height: max(44px, min(3.44vw, 6.11svh)); --plaque-type-ratio: .62; }
  body.tts-edition #map-room-back { --plaque-height: max(38px, min(2.97vw, 5.28svh)); }
  body.tts-edition #map-room-mute { --plaque-height: max(18px, min(1.4vw, 2.489svh)); --plaque-type-ratio: .52; min-width: 0 !important; padding: 0 !important; }
  body.tts-edition :is(#pause-button, #restart-button, #home-button, #combat-feedback-open) { --plaque-height: clamp(40px, 2.4vw, 46px); --plaque-type-ratio: .6; padding-inline: 14px !important; }
  body.tts-edition #combat-feedback-open { --plaque-type-ratio: .52; }
  body.tts-edition .battle-audio-console > .battle-audio-row { grid-template-columns: 64px 104px minmax(0, 1fr) !important; }
  body.tts-edition :is(#battle-mute, #battle-sfx-mute) { --plaque-height: 32px; --plaque-type-ratio: .5; min-width: 0 !important; padding: 0 !important; }
  body.tts-edition :is(#attrition-history-open, [data-gps-reaction]) { --plaque-height: 36px; --plaque-type-ratio: .52; padding-inline: 12px !important; }
  body.tts-edition :is(#feedback-cancel, #feedback-submit) { --plaque-type-ratio: .52; padding-inline: 30px !important; }
  body.tts-edition #tts-shell .tts-mode-card { font-family: Georgia, "Times New Roman", serif !important; }
  @media (min-width: 651px) and (max-width: 1100px) {
    body.tts-edition .tts-fleet-tabs button { --plaque-height: 42px; }
  }
  @media (max-width: 650px) {
    body.tts-edition .tts-heading button { --plaque-height: 38px; min-width: 140px !important; padding-inline: 23px !important; }
    body.tts-edition #tts-play { --plaque-height: 58px; min-width: 130px; }
    body.tts-edition .tts-fleet-header button { --plaque-height: 36px; --plaque-type-ratio: .54; padding-inline: 12px !important; min-width: 80px; }
    body.tts-edition .tts-fleet-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.tts-edition .tts-fleet-tabs button { --plaque-height: 38px; --plaque-type-ratio: .52; padding-inline: 10px !important; min-width: 0; width: 100%; }
    body.tts-edition .tts-fleet-footer button { --plaque-height: 38px; --plaque-type-ratio: .52; padding-inline: 12px !important; }
    body.tts-edition :is(#tts-fleet-prev, #tts-fleet-next, #tts-dialog-close) { width: 60px !important; min-width: 60px !important; --plaque-height: 38px; --plaque-type-ratio: .8; }
    body.tts-edition .tts-dialog button:not(.tts-art-nav) { --plaque-height: 46px; --plaque-type-ratio: .54; padding-inline: 17px !important; }
    body.tts-edition .tts-fire-options button { --plaque-height: 58px; }
    body.tts-edition .tts-compact-actions button { --plaque-height: 40px; --plaque-type-ratio: .52; padding-inline: 14px !important; }
    body.tts-edition .tts-film-controls button { --plaque-height: 38px; --plaque-type-ratio: .52; padding-inline: 13px !important; }
    body.tts-edition .tts-home-audio button { --plaque-height: 38px; --plaque-type-ratio: .55; }
  }
}

.tts-heading h2 { font-size: clamp(22px, 2.65vw, 38px); }
.tts-dialog { width: min(730px, calc(100vw - 24px)); }
.tts-dialog h2 { font-size: clamp(24px, 2.1vw, 34px); }
.tts-dialog > header { margin-bottom: 18px; }
.tts-fire-options { gap: 24px; }
.tts-fire-options p { margin: 12px 10px 0; color: #dce5e9; }
.tts-menu-links { gap: 10px 8px; }
.tts-menu-links a { width: 100%; }
.tts-fleet-tabs { gap: 6px; }
.tts-fleet-header h2 { font-size: clamp(22px, 2.4vw, 38px); }
.tts-home-audio { gap: 0; }
@media (max-width: 650px) {
  .tts-heading { display: grid; grid-template-columns: 1fr 1fr; }
  .tts-heading > div { grid-row: 1; grid-column: 1 / -1; }
  .tts-heading > button:first-child { grid-row: 2; grid-column: 1; justify-self: start; }
  .tts-heading > button:last-child { grid-row: 2; grid-column: 2; justify-self: end; }
  .tts-dialog { padding: 18px; }
  .tts-dialog h2 { font-size: 24px; }
  .tts-heading h2 { font-size: 21px; }
  .tts-fleet-header h2 { font-size: 18px; }
  .tts-fire-options { gap: 18px; }
  .tts-fire-options p { margin-top: 6px; }
}