/* Production composition using the two user-supplied raster assets.
   This final layer deliberately replaces the older baked tabletop patches and
   the experimental match lid while leaving every live control and game layer. */

/* Shared nautical tabletop */
.tts-edition .tts-tabletop {
  object-fit: cover;
  object-position: center;
}
body.tts-edition #battle-screen.tts-match {
  /* The enlarged box extends offscreen by design. Clip its overflow without
     making the entire match a scroll container that targeting can move. */
  overflow: clip !important;
  background-color: #32180e !important;
  background-image: url('./assets/through-the-shadows/production/nautical-table-v1.png') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
#battle-screen.tts-match .tts-match-layout::before {
  background: linear-gradient(180deg, #16090512, transparent 18% 82%, #16090518);
  box-shadow: none;
}

/* Home: the supplied complete box replaces all artwork assembled from masks. */
.tts-home-hardware,
.tts-home-cleanup,
.tts-gallery-cleanup {
  display: none !important;
}
.tts-home-game-box {
  position: absolute;
  z-index: 1;
  left: 14.1%;
  top: .2%;
  width: 46%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 18px #18090496) drop-shadow(0 3px 3px #160704b8);
}
.tts-home-match-box {
  position: absolute;
  z-index: 2;
  left: 19.27%;
  top: 48.1%;
  width: 35.47%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.tts-home-gps-logo {
  position: absolute;
  z-index: 4;
  top: .8%;
  right: auto;
  left: 1%;
  width: 13.5%;
  height: 15.6%;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px #180704aa);
}
.tts-home-logo-title {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 82%;
  height: auto;
}
.tts-home-logo-ghost {
  position: absolute;
  z-index: 2;
  top: 1%;
  right: 0;
  width: 43%;
  height: auto;
}
.tts-home-gps-logo > span {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: 0;
  left: 2%;
  color: #f0c25f;
  font: 700 clamp(9px, .8vw, 15px)/.92 Georgia, "Times New Roman", serif;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #210a03, 0 0 3px #120501;
}
#tts-shell:not([data-view="home"]) :is(.tts-home-game-box, .tts-home-match-box, .tts-home-gps-logo, .tts-home-card-deck, .tts-home-tablet-art) {
  display: none;
}
.tts-home-actions {
  z-index: 5;
  pointer-events: none;
}
.tts-home-actions > [data-tts-action] { pointer-events: auto; }

/* A small physical deck restores the card-table silhouette from the approved
   home reference.  It is built from existing identity artwork, so the retained
   production table and box stay completely untouched. */
.tts-home-card-deck {
  position: absolute;
  z-index: 6;
  top: 26%;
  left: 63.6%;
  width: 10.2%;
  aspect-ratio: .88;
  padding: 0;
  border: 0;
  border-radius: clamp(5px, .45vw, 8px);
  background: transparent;
  filter: drop-shadow(0 8px 8px #120602a6);
  transform: rotate(-2.2deg);
}
.tts-home-card-deck::before,
.tts-home-card-deck::after,
.tts-home-card-face {
  position: absolute;
  box-sizing: border-box;
  inset: 0;
  border: 2px solid #b68b43;
  border-radius: inherit;
  background:
    linear-gradient(145deg, #173952, #07192b 68%, #030d18);
  box-shadow: inset 0 0 0 2px #06111d, inset 0 0 0 4px #8e6a32, 0 4px 7px #0008;
  content: "";
}
.tts-home-card-deck::before { transform: translate(-8%, -5%) rotate(-5deg); }
.tts-home-card-deck::after { transform: translate(7%, -2%) rotate(4deg); }
.tts-home-card-face {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
  padding: 10% 7%;
  overflow: hidden;
}
.tts-home-card-face::before {
  position: absolute;
  inset: 6%;
  border: 1px solid #d0a75d;
  border-radius: 3px;
  content: "";
  pointer-events: none;
}
.tts-home-card-face img {
  z-index: 1;
  width: 84%;
  height: auto;
  filter: drop-shadow(0 2px 2px #000b);
}
.tts-home-card-face strong {
  z-index: 1;
  color: #efc669;
  font: 700 clamp(8px, .72vw, 13px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #000;
}
.tts-home-card-deck:hover,
.tts-home-card-deck:focus-visible {
  filter: brightness(1.12) drop-shadow(0 8px 8px #120602a6) drop-shadow(0 0 8px #f0c86a80);
}

/* The supplied plugged-in tablet is the physical foreground object.  The live
   video is clipped to its photographed screen so the bezel, connector and full
   cable remain part of the tabletop instead of being redrawn in CSS. */
.tts-home-tablet-art {
  position: absolute;
  z-index: 2;
  left: 58%;
  top: 49%;
  width: 40%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 13px 13px #170603a8) drop-shadow(0 3px 3px #090201b8);
}
.tts-tablet-loop {
  box-sizing: border-box;
  z-index: 3;
  left: 59.75%;
  top: 51.85%;
  width: 24.75%;
  height: 35.65%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #020611;
  box-shadow: none;
  clip-path: polygon(7.5% 0, 100% 8.4%, 95.2% 100%, 0 90.8%);
  transform: none;
  opacity: 1;
}
#tts-tablet-video {
  border-radius: 0;
  object-fit: cover;
}
.tts-tablet {
  z-index: 6;
  left: 58.7%;
  top: 49.6%;
  width: 28%;
  height: 41%;
  border-radius: clamp(16px, 1.45vw, 26px);
  clip-path: polygon(5% 0, 100% 8%, 94% 100%, 0 91%);
  transform: none;
}
.tts-tablet:hover,
.tts-tablet:focus-visible {
  box-shadow: 0 0 0 3px #f7da8d, 0 0 24px #f3c96766;
}

/* One quiet control column.  These are the same live plaque controls already
   used by the rest of the application. */
@layer tts-controls {
  body.tts-edition .tts-home-actions > .tts-plaque-button {
    --plaque-height: max(50px, min(4vw, 7.2svh));
    --plaque-type-ratio: .44;
    left: 82.5% !important;
    width: 20.5% !important;
    min-width: 0 !important;
    padding-inline: 14px !important;
  }
  body.tts-edition .tts-home-actions .tts-solo { top: 7.5% !important; }
  body.tts-edition .tts-home-actions .tts-pvp { top: 18.1% !important; }
  body.tts-edition .tts-home-actions .tts-inspect { top: 28.8% !important; }
  body.tts-edition .tts-home-actions .tts-achievements { top: 39.4% !important; }
  body.tts-edition .tts-home-actions .tts-war-deck { display: none !important; }
  body.tts-edition .tts-home-actions .tts-menu {
    top: 56.2% !important;
    left: 89.3% !important;
    width: 13.4% !important;
  }
}

/* Match the approved left-side stack: identity, audio console, then studio. */
.tts-home-corner {
  top: max(8px, calc((100svh - var(--home-table-height)) / 2 + var(--home-table-height) * .19));
  right: auto;
  bottom: auto;
  left: max(6px, calc((100vw - var(--home-table-width)) / 2 + var(--home-table-width) * .004));
  width: max(170px, min(13.1vw, 23.289svh));
  flex-direction: column-reverse;
  align-items: center;
  gap: clamp(22px, 4.2vh, 46px);
}
.tts-home-cgh { width: 100%; }
#tts-home-audio {
  width: 100%;
  padding: 7px 8px;
  gap: 7px;
  background: linear-gradient(180deg, #102e47f2, #061728f2);
  box-shadow: inset 0 0 0 2px #243746, 0 5px 14px #13060480;
}
#tts-home-audio .tts-home-audio-channel {
  grid-template-columns: 42px 72px minmax(0, 1fr);
  column-gap: 5px;
}
#tts-home-audio label { font-size: 11px; }
#tts-home-audio output { margin-top: 2px; font-size: 9px; }
@layer tts-controls {
  body.tts-edition #tts-home-audio .tts-plaque-button {
    --plaque-height: 28px;
    --plaque-type-ratio: .48;
    width: 72px;
    padding-inline: 5px !important;
  }
}

/* Match: retire the problem lid and chain assembly.  The playable grid keeps a
   shallow wooden/brass frame and sits directly on the same nautical table. */
#battle-screen.tts-match .tts-lid-stage,
#battle-screen.tts-match .tts-cabinet-chain,
#battle-screen.tts-match .tts-case-corner {
  display: none !important;
}
#battle-screen.tts-match .tts-board-space {
  --tts-lid-depth: 0px !important;
  justify-content: center;
}
#battle-screen.tts-match .tts-match-layout {
  --tts-polished-lid-depth: 0px;
  grid-template-columns: clamp(184px, 15.25vw, 258px) minmax(0, 1fr) clamp(236px, 18.4vw, 312px);
  padding: clamp(8px, .7vw, 12px);
  gap: clamp(7px, .7vw, 12px);
}
#battle-screen.tts-match .tts-match-rail {
  padding-top: 0 !important;
}
#battle-screen.tts-match .tts-cabinet-well {
  --tts-cabinet-side: clamp(28px, 2.55vw, 48px);
  --tts-cabinet-head: clamp(18px, 2.15vh, 25px);
  --tts-cabinet-front: clamp(46px, 5.4vh, 62px);
}
#battle-screen.tts-match .tts-placement-banner {
  position: relative;
  z-index: 6;
  inset: auto;
  display: grid;
  flex: none;
  align-content: center;
  width: 100%;
  min-height: clamp(96px, 12vh, 116px);
  margin: 0;
  padding: clamp(12px, 1.5vh, 16px) 14px;
  transform: none;
  border: 3px solid #d9b45b;
  border-radius: 0;
  background: linear-gradient(180deg, #0b3150f7, #04182bf8);
  box-shadow: inset 0 0 0 2px #020a12, 0 4px 10px #1b0806a8;
  color: #ffe39a;
  font: 800 clamp(15px, 1vw, 19px)/1.12 'Black Ops One', Georgia, serif !important;
  letter-spacing: .015em;
  white-space: normal;
}
#battle-screen.tts-match .tts-placement-banner span {
  margin-top: 7px;
  color: #edf7fb;
  font: 700 clamp(11px, .72vw, 14px)/1.25 Arial, sans-serif !important;
  letter-spacing: .01em;
  white-space: normal;
}
#battle-screen.tts-match .tts-match-brand,
#battle-screen.tts-match .tts-match-rail {
  background: none;
  border: 0;
  box-shadow: none;
}

/* Give the left-side identity a clear top, middle, and bottom.  The taller
   mark separates the subtitle from the compass artwork, naturally lowers the
   controls, and the auto top margin keeps the studio badge at the foot of the
   column without disturbing the board or right-hand rail. */
#battle-screen.tts-match .tts-match-brand {
  gap: clamp(10px, 1.2vh, 14px);
}
#battle-screen.tts-match .tts-match-mark {
  flex-basis: clamp(176px, 21.5vh, 210px);
}
#battle-screen.tts-match .tts-match-mark .tts-match-title {
  left: 0;
  width: 76%;
}
#battle-screen.tts-match .tts-match-mark .tts-match-ghost {
  top: -2%;
  right: -3%;
  width: 50%;
}
#battle-screen.tts-match .tts-match-subtitle {
  right: 6%;
  bottom: clamp(5px, .8vh, 9px);
  left: 6%;
}
#battle-screen.tts-match .tts-match-studio {
  width: 82%;
  margin: auto auto clamp(12px, 2.2vh, 24px);
}

@media (max-width: 1279px), (max-height: 719px) {
  #battle-screen.tts-match .tts-match-layout {
    grid-template-columns: 166px minmax(0, 1fr) 230px;
    padding: 7px;
    gap: 6px;
  }
  #battle-screen.tts-match .tts-match-rail { padding-top: 0 !important; }
  #battle-screen.tts-match .tts-board-space { --tts-lid-depth: 0px !important; }
  #battle-screen.tts-match .tts-cabinet-well {
    --tts-cabinet-side: 30px;
    --tts-cabinet-head: 16px;
    --tts-cabinet-front: 40px;
  }
  #battle-screen.tts-match .tts-match-mark {
    flex-basis: clamp(148px, 22vh, 176px);
  }
  #battle-screen.tts-match .tts-match-studio {
    width: 80%;
    margin-bottom: 10px;
  }
}

/* Revision 5: use the supplied match-box artwork as the cabinet itself.  The
   live board is measured into its blue aperture by the match presenter. */
#battle-screen.tts-match .tts-match-brand,
#battle-screen.tts-match .tts-match-rail {
  position: relative;
  z-index: 5;
}
#battle-screen.tts-match .tts-board-space {
  z-index: 1;
}
#battle-screen.tts-match .tts-match-box-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 16px #160704a8) drop-shadow(0 3px 3px #160704b8);
  pointer-events: none;
  user-select: none;
  transition: width .58s cubic-bezier(.22,.75,.2,1), height .58s cubic-bezier(.22,.75,.2,1), left .58s cubic-bezier(.22,.75,.2,1), top .58s cubic-bezier(.22,.75,.2,1);
}
#battle-screen.tts-match .tts-cabinet-well {
  --tts-cabinet-side: 0px;
  --tts-cabinet-head: 0px;
  --tts-cabinet-front: 0px;
  position: absolute;
  z-index: 2;
  inset: auto;
  filter: none;
  transition: left .58s cubic-bezier(.22,.75,.2,1), top .58s cubic-bezier(.22,.75,.2,1);
}
#battle-screen.tts-match .tts-match-frame {
  transition: width .58s cubic-bezier(.22,.75,.2,1), height .58s cubic-bezier(.22,.75,.2,1);
}
#battle-screen.tts-match .tts-match-layout[data-phase="combat"] .tts-match-box-art {
  filter: drop-shadow(0 18px 20px #160704b8) drop-shadow(0 3px 3px #160704c8);
}
@media (prefers-reduced-motion: reduce) {
  #battle-screen.tts-match :is(.tts-match-box-art,.tts-cabinet-well,.tts-match-frame) {
    transition: none !important;
  }
}
#battle-screen.tts-match :is(
  .tts-cabinet-wall,
  .tts-cabinet-front,
  .tts-cabinet-chain,
  .tts-case-corner,
  .tts-lid-stage
) {
  display: none !important;
}
#battle-screen.tts-match .tts-cabinet-well::before,
#battle-screen.tts-match .tts-cabinet-well::after {
  display: none !important;
}
#battle-screen.tts-match .tts-match-frame {
  border: 3px solid #b5965e;
  box-shadow: inset 0 0 8px #020b12, 0 0 0 1px #3a1c0e, 0 5px 12px #170405b8;
}
#battle-screen.tts-match #board-plane,
#battle-screen.tts-match .board-surface {
  aspect-ratio: auto !important;
}

/* Keep the subtitle visually attached to the mark on both game screens. */
.tts-home-gps-logo > span {
  top: 74%;
  bottom: auto;
}
#battle-screen.tts-match .tts-match-subtitle {
  top: 64%;
  bottom: auto;
}

/* The home audio console now follows the match console: each slider receives
   a full-width row, with the studio badge immediately below the panel. */
.tts-home-corner {
  gap: clamp(8px, 1.2vh, 14px);
}
#tts-home-audio .tts-home-audio-channel {
  grid-template-columns: minmax(0, 1fr) 72px;
  grid-template-rows: auto 18px;
  gap: 2px 6px;
}
#tts-home-audio label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
#tts-home-audio output {
  display: inline;
  margin: 0;
}
#tts-home-audio .tts-plaque-button {
  grid-column: 2;
  grid-row: 1;
}
#tts-home-audio input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 18px;
}
#tts-home-audio input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 0;
  border-radius: 4px;
  background: #caa759;
  box-shadow: none;
}
#tts-home-audio input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border: 1px solid #6d5121;
  border-radius: 50%;
  background: #f0ce7e;
  box-shadow: 0 1px 3px #0008;
}
#tts-home-audio input[type="range"]::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 4px;
  background: #caa759;
}
#tts-home-audio input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid #6d5121;
  border-radius: 50%;
  background: #f0ce7e;
}
.tts-home-deck-depth {
  position: absolute;
  z-index: 0;
  left: 55%;
  top: 40%;
  width: 135%;
  height: auto;
  transform: translate(-50%, -50%);
  /* The artwork extends beyond the original three-card button. Let the
     overhang receive clicks so the whole visible deck launches War. */
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

.tts-home-card-deck::before,
.tts-home-card-deck::after {
  z-index: 1;
}

.tts-home-card-face {
  z-index: 2;
}