/* Tabletop with top controls, a compact status rail and shared setup/combat surface. */
body.tts-edition[data-stage="battle-screen"] { overflow:hidden; background:#754b2c; }
body.tts-edition #battle-screen.tts-match { position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#78512f url('./assets/through-the-shadows/match/tabletop-wood.jpg') center/cover!important; }
#battle-screen.tts-match::before,#battle-screen.tts-match::after { display:none!important; }
#battle-screen.tts-match > :is(.battle-header,.enemy-horizon,.animated-ocean,.battlefield-shell) { display:none!important; }
#battle-screen.tts-match .tts-match-layout { position:absolute;inset:0;display:grid;grid-template-columns:clamp(180px,14.5vw,370px) minmax(0,1fr) clamp(280px,21vw,520px);gap:16px;padding:18px;box-sizing:border-box; }
.tts-match-brand { display:flex;flex-direction:column;gap:24px;min-height:0;padding-top:clamp(22px,3vh,42px);padding-bottom:18px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin; }
.tts-match-mark { display:flex;flex-direction:column;align-items:center;gap:0;flex:none;padding:0 6px; }
.tts-match-mark img { display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(1px 3px 2px #1a080899); }
.tts-match-mark .tts-match-ghost { max-height:20vh;width:92%; }
.tts-match-mark .tts-match-title { max-height:24vh; }
.tts-match-subtitle { display:block;width:100%;margin-top:clamp(3px,.7vh,10px);color:#f2c86f;font:700 clamp(11px,.9vw,17px)/1.02 Georgia,serif;letter-spacing:.1em;text-align:center;text-shadow:0 2px 1px #341807,0 0 7px #ffd67855;white-space:normal; }
#battle-screen.tts-match .tts-top-controls { flex:none;align-self:stretch;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:8px;padding:6px 8px;border:2px solid #bca166;border-radius:8px;background:#061a2cef; }
.tts-command-actions,.tts-audio-controls { display:contents; }
#battle-screen.tts-match .tts-top-controls :is(.tts-command-actions > button,.battle-audio-row) { grid-area:auto!important; }
.tts-board-space { position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px; }
#battle-screen.tts-match .tts-board-space > .tts-match-frame { margin-top:0;margin-bottom:auto; }
#battle-screen.tts-match .tts-match-frame { position:relative;box-sizing:content-box;flex:none;border:12px solid #8d6435;border-image:url('./assets/through-the-shadows/match/frame-source.png') 28 36 23 28 stretch;box-shadow:0 3px 10px #281407c7; }
#battle-screen.tts-match #board-plane { position:relative!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:6/5!important;border:0!important;border-radius:0!important;box-shadow:inset 0 0 0 2px #80d8ff!important;background:radial-gradient(ellipse at 40% 10%,#1b99c5,#0a6c98 58%,#06597f)!important;transform:none!important;filter:none!important;backdrop-filter:none!important;overflow:visible!important; }
#battle-screen.tts-match #board-plane::before,#battle-screen.tts-match #board-plane::after { display:none!important; }
#battle-screen.tts-match .board-surface { position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:6/5!important; }
#battle-screen.tts-match .board-surface { border:0!important;padding:0!important;margin:0!important;box-shadow:none!important; }
#battle-screen.tts-match #target-grid { position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;gap:0!important;border:0!important;border-radius:0!important;background:none!important;grid-template-columns:repeat(24,minmax(0,1fr))!important;grid-template-rows:repeat(20,minmax(0,1fr))!important; }
#battle-screen.tts-match .target-cell { width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:1px solid #65cbef99!important;border-radius:0!important;box-shadow:inset 0 0 3px #46c7f255!important;background:transparent!important; }
#battle-screen.tts-match .target-cell:disabled { opacity:1!important; }
#battle-screen.tts-match .target-cell.is-friendly { background:transparent!important; }
#battle-screen.tts-match .target-cell.is-selected-hull { background:#f0d5754a!important;box-shadow:inset 0 0 0 2px #ffe498!important; }
#battle-screen.tts-match .target-cell:focus-visible { outline:3px solid #fff1b8!important;outline-offset:-3px;z-index:6; }
#battle-screen.tts-match #island-layer,#battle-screen.tts-match #grid-north,#battle-screen.tts-match #grid-west { display:none!important; }
#battle-screen.tts-match #formation-layer { position:absolute!important;inset:0!important;width:100%!important;height:100%!important; }
#battle-screen.tts-match .formation-sprite { filter:drop-shadow(1px 3px 2px #001723aa); }
#battle-screen.tts-match .formation-sprite,#battle-screen.tts-match .formation-sprite * { pointer-events:none!important; }
#battle-screen.tts-match .mini-map::before,#battle-screen.tts-match .mini-map::after { display:none!important; }
#battle-screen.tts-match .tts-metal-islands { position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none; }

#battle-screen.tts-match .tts-placement-banner { flex:none;position:relative;inset:auto;transform:none;width:100%;min-height:82px;box-sizing:border-box;margin:0;padding:12px 9px;text-align:center;border:2px solid #e3c16a;border-radius:9px;background:#061b2eee;box-shadow:0 3px 5px #0007;color:#ffe6a2;font:clamp(17px,1.4vw,32px)/1.2 'Black Ops One',Georgia,serif!important; }
#battle-screen.tts-match .tts-placement-banner span { display:block;margin-top:8px;font:clamp(12px,.9vw,19px)/1.3 Arial,sans-serif!important;color:#dfebed; }
#battle-screen.tts-match .tts-match-rail { min-width:0;min-height:0;display:flex;flex-direction:column;gap:clamp(5px,.75vh,9px);overflow-y:auto;scrollbar-width:thin; }
.tts-match-studio { display:block;flex:none;align-self:center;width:100%;height:clamp(110px,18vh,225px);margin-top:auto; }
.tts-match-studio img { display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 3px 2px #1a080899); }
.tts-match-studio:focus-visible { outline:3px solid #fff1b8;outline-offset:3px; }
.tts-enemy-panel,.tts-own-panel { position:relative;flex:none;box-sizing:border-box;padding:8px;background:#061a2c;border:2px solid #d3b369;border-radius:7px; }
#battle-screen.tts-match .tts-match-rail h2 { margin:0 0 7px!important;text-align:center;color:#ffe5a3;font:clamp(13px,1.1vw,21px)/1.2 'Black Ops One',Georgia,serif!important;letter-spacing:0!important; }
.tts-enemy-cards { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px; }
.tts-enemy-card { position:relative;height:clamp(42px,6.2vh,76px);min-width:0;box-sizing:border-box;border:1px solid #a78b4e;border-radius:3px;background:#03101b;color:#f4db91;overflow:hidden; }
#battle-screen.tts-match .tts-enemy-card b { position:absolute;left:5px;top:4px;font:700 clamp(13px,1vw,18px)/1 Arial!important; }
.tts-enemy-card canvas { position:absolute;left:19px;top:3px;width:calc(100% - 23px);height:calc(100% - 16px); }
#battle-screen.tts-match .tts-enemy-card small { position:absolute;right:5px;bottom:3px;color:#95e7b8;font:700 clamp(11px,.8vw,14px)/1 Arial!important; }
.tts-enemy-card.is-sunk { opacity:.45; }
#battle-screen.tts-match .tts-own-panel .mini-map { position:relative!important;inset:auto!important;aspect-ratio:6/5!important;width:100%!important;height:auto!important;max-height:none!important;padding:0!important;margin:0!important;border:1px solid #697e83!important;background:#11263b!important;transform:none!important;box-shadow:none!important; }
#battle-screen.tts-match .mini-grid { position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:repeat(24,1fr)!important;grid-template-rows:repeat(20,1fr)!important;gap:0!important;width:100%!important;height:100%!important; }
#battle-screen.tts-match .mini-cell { border-radius:0!important;min-width:0!important;min-height:0!important;padding:0!important; }
#battle-screen.tts-match .mini-sweep { display:none!important; }
#battle-screen.tts-match[data-board-orientation="x"] .tts-own-panel .mini-map { transform:scaleX(-1)!important; }
#battle-screen.tts-match[data-board-orientation="y"] .tts-own-panel .mini-map { transform:scaleY(-1)!important; }
#battle-screen.tts-match[data-board-orientation="xy"] .tts-own-panel .mini-map { transform:scale(-1)!important; }
.tts-match-primary { margin-top:auto;display:flex;flex-direction:column;gap:5px;flex:none; }
.tts-match-secondary { display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none; }
#battle-screen.tts-match .tts-match-layout button[hidden] { display:none!important; }
#battle-screen.tts-match #deploy-fleet:disabled { filter:grayscale(.45);opacity:.48;cursor:not-allowed; }
#battle-screen.tts-match .battle-audio-console { display:contents!important; }
#battle-screen.tts-match .battle-audio-row { position:static!important;display:grid!important;align-items:center;width:100%!important;box-sizing:border-box;gap:4px 8px!important;padding:0!important;min-width:0; }
#battle-screen.tts-match .tts-top-controls .battle-audio-row { border-left:2px solid #c5a55e!important;padding-left:8px!important; }
#battle-screen.tts-match .battle-audio-name { display:flex;align-items:center;justify-content:space-between;gap:7px;font:12px Arial,sans-serif!important; }
#battle-screen.tts-match .battle-audio-name strong,#battle-screen.tts-match .battle-audio-name output { font-size:12px!important; }
#battle-screen.tts-match .battle-volume-control { position:relative!important;inset:auto!important;grid-column:1/-1!important;grid-row:2!important;display:block!important;width:100%!important;height:30px!important;min-height:0!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important; }
#battle-screen.tts-match .battle-volume-control::before,#battle-screen.tts-match .battle-volume-control::after { display:none!important; }
#battle-screen.tts-match .battle-volume-control input { position:relative!important;inset:auto!important;display:block;width:100%!important;height:30px!important;margin:0!important;opacity:1; }
#battle-screen.tts-match .battle-volume-control input[type="range"] { appearance:none!important;-webkit-appearance:none!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer; }
#battle-screen.tts-match .battle-volume-control input[type="range"]::-webkit-slider-runnable-track { height:5px!important;background:#caa759!important;border:0!important;border-radius:4px!important;box-shadow:none!important; }
#battle-screen.tts-match .battle-volume-control input[type="range"]::-webkit-slider-thumb { appearance:none!important;-webkit-appearance:none!important;width:15px!important;height:15px!important;margin-top:-5px!important;background:#f0ce7e!important;border:1px solid #6d5121!important;border-radius:50%!important;box-shadow:0 1px 3px #0008!important; }
#battle-screen.tts-match .battle-volume-control input[type="range"]::-moz-range-track { height:5px;background:#caa759;border:0;border-radius:4px; }
#battle-screen.tts-match .battle-volume-control input[type="range"]::-moz-range-thumb { width:14px;height:14px;background:#f0ce7e;border:1px solid #6d5121;border-radius:50%; }
#battle-screen.tts-match #gps-shot-clock { position:relative;inset:auto;width:100%;box-sizing:border-box; }
/* Only an actual player replacement becomes visible. It floats above the board
   and does not add height to the already-tight right rail. */
#battle-screen.tts-match #attrition-controls[hidden] { display:none!important; }
#battle-screen.tts-match #attrition-controls:not([hidden]) { position:fixed!important;z-index:140!important;top:clamp(90px,11vh,126px)!important;left:50%!important;display:grid!important;width:min(620px,calc(100vw - 32px))!important;transform:translateX(-50%);pointer-events:none;animation:tts-attrition-notice 5.4s ease both; }
#battle-screen.tts-match #attrition-controls .attrition-copy { gap:5px;padding:12px 18px;border:3px solid #f1ce72;border-radius:10px;background:linear-gradient(180deg,#174d79f7,#06182df8);box-shadow:inset 0 0 0 2px #020817,0 12px 38px #000c,0 0 26px #e9c56566; }
#battle-screen.tts-match #attrition-controls .attrition-copy>span { color:#f2d58e;font:800 clamp(13px,1.1vw,19px)/1.05 Arial,sans-serif!important;letter-spacing:.12em;text-transform:uppercase; }
#battle-screen.tts-match #attrition-controls .attrition-copy>strong { color:#fff5ce;font:800 clamp(22px,2vw,34px)/1.05 'Black Ops One',Georgia,serif!important;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 3px #000; }
#battle-screen.tts-match #attrition-controls .attrition-copy>small { color:#f4fbff;font:700 clamp(14px,1.2vw,20px)/1.25 Arial,sans-serif!important;white-space:normal; }
#battle-screen.tts-match.is-player-replacement .tts-own-panel { z-index:35;transform-origin:100% 50%;animation:tts-attrition-map-spotlight 5.4s ease both; }
#battle-screen.tts-match.is-player-replacement .mini-formation-layer .is-arriving-replacement { z-index:20;animation:tts-attrition-ship-arrival 1s ease-in-out 5;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #63edff)!important; }
@keyframes tts-attrition-notice { 0%{opacity:0;transform:translate(-50%,-12px) scale(.94)} 10%,78%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-4px) scale(.98)} }
@keyframes tts-attrition-map-spotlight { 0%,100%{transform:scale(1);box-shadow:none} 12%,78%{transform:scale(1.27);box-shadow:0 16px 42px #000d,0 0 0 4px #f1ce72,0 0 28px #68dcff99} }
@keyframes tts-attrition-ship-arrival { 0%,100%{opacity:.6;transform:scale(.92)} 50%{opacity:1;transform:scale(1.18)} }
#battle-screen.tts-match #gps-reactions { position:static!important;display:flex;flex-wrap:wrap;gap:4px; }
#battle-screen.tts-match #gps-reactions[hidden] { display:none!important; }
@media(max-height:950px) {
  #battle-screen.tts-match .tts-match-layout { padding:10px;gap:10px; }
  .tts-match-brand { gap:18px;padding-top:24px;padding-bottom:10px; }
  #battle-screen.tts-match .tts-top-controls { gap:5px;padding:5px 6px; }
  #battle-screen.tts-match .tts-match-rail { gap:3px; }
  .tts-enemy-panel,.tts-own-panel { padding:5px; }
  #battle-screen.tts-match .tts-match-rail h2 { margin-bottom:3px!important;font-size:15px!important;line-height:1.05!important; }
  #battle-screen.tts-match .tts-placement-banner { min-height:0;padding:5px 6px 4px;font-size:clamp(11px,.85vw,17px)!important;line-height:1!important;white-space:nowrap; }
  #battle-screen.tts-match .tts-placement-banner span { margin-top:3px;font-size:12px!important;line-height:1.1!important;white-space:normal; }
  .tts-enemy-cards { gap:3px; }
  .tts-enemy-card { height:44px; }
  .tts-match-primary { gap:2px; }
  .tts-match-secondary { grid-template-columns:1fr;gap:5px; }
}
@media(max-height:800px) {
  #battle-screen.tts-match .tts-match-layout { padding:8px;gap:8px; }
  .tts-match-brand { gap:12px;padding-top:18px;padding-bottom:6px; }
  #battle-screen.tts-match .tts-top-controls { gap:3px;padding:3px 4px; }
  #battle-screen.tts-match .tts-match-rail { gap:2px; }
  .tts-enemy-card { height:36px; }
  .tts-enemy-panel,.tts-own-panel { padding:4px; }
  #battle-screen.tts-match .tts-match-rail h2 { margin-bottom:2px!important;font-size:12px!important; }
  #battle-screen.tts-match .tts-enemy-card small { font-size:11px!important; }
  #battle-screen.tts-match .tts-placement-banner { min-height:0;padding:4px 5px;font-size:clamp(10px,.8vw,13px)!important; }
  #battle-screen.tts-match .tts-placement-banner span { margin-top:2px;font-size:11px!important;line-height:1.05!important; }
  #battle-screen.tts-match .tts-own-panel .mini-map { width:88%!important;margin-left:auto!important;margin-right:auto!important; }
  .tts-match-secondary { gap:4px; }
}
@media(max-width:1100px) {
  #battle-screen.tts-match .tts-match-layout { grid-template-columns:175px minmax(0,1fr) 250px;gap:8px;padding:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .tts-match * { scroll-behavior:auto!important; }
  #battle-screen.tts-match #attrition-controls:not([hidden]) { animation:none!important;opacity:1; }
  #battle-screen.tts-match.is-player-replacement .tts-own-panel { animation:none!important;transform:scale(1.08);box-shadow:0 0 0 4px #f1ce72,0 0 24px #68dcff99; }
  #battle-screen.tts-match.is-player-replacement .mini-formation-layer .is-arriving-replacement { animation:none!important;opacity:1; }
}
@layer tts-controls {
  body.tts-edition #battle-screen.tts-match :is(.tts-command-actions,.tts-match-rail) .tts-plaque-button { --plaque-height:clamp(40px,4.9vh,62px);--plaque-type-ratio:.44;position:relative!important;inset:auto!important;width:100%!important;min-width:0!important;margin:0!important;padding:0 10px!important;display:block!important;white-space:normal!important; }
  body.tts-edition #battle-screen.tts-match #attrition-history-open { --plaque-height:38px;--plaque-type-ratio:.37; }
  body.tts-edition #battle-screen.tts-match .tts-match-secondary .tts-plaque-button { --plaque-height:clamp(38px,4.5vh,48px);--plaque-type-ratio:.36; }
  body.tts-edition #battle-screen.tts-match #combat-feedback-open { flex:none; }
  body.tts-edition #battle-screen.tts-match .tts-match-layout .tts-plaque-button[hidden] { display:none!important; }
  body.tts-edition #battle-screen.tts-match .battle-audio-console > .battle-audio-row { grid-template-columns:minmax(0,1fr) clamp(60px,4.2vw,92px)!important; }
  body.tts-edition #battle-screen.tts-match :is(#battle-mute,#battle-sfx-mute) { --plaque-height:32px;--plaque-type-ratio:.48;min-width:0!important;width:100%!important;padding:0 5px!important; }
  @media(max-height:950px) {
    body.tts-edition #battle-screen.tts-match .tts-match-rail .tts-plaque-button { --plaque-height:56px;--plaque-type-ratio:.44; }
    body.tts-edition #battle-screen.tts-match .tts-match-secondary .tts-plaque-button { --plaque-height:50px;--plaque-type-ratio:.4; }
  }
  @media(max-height:800px) {
    body.tts-edition #battle-screen.tts-match .tts-match-rail .tts-plaque-button { --plaque-height:48px;--plaque-type-ratio:.44; }
    body.tts-edition #battle-screen.tts-match .tts-match-secondary .tts-plaque-button { --plaque-height:44px;--plaque-type-ratio:.39; }
  }
  body.tts-edition .tts-entry-controls .tts-plaque-button { --plaque-height:58px;--plaque-type-ratio:.45;min-width:0!important;padding:0 15px!important; }
  body.tts-edition .tts-resume-match { --plaque-height:58px;--plaque-type-ratio:.4;position:fixed!important; }
  body.tts-edition .tts-resume-match[hidden] { display:none!important; }
}
.tts-resume-match { position:fixed;z-index:70;left:50%;top:18px;transform:translateX(-50%);width:240px;height:60px; }
.tts-resume-match[hidden] { display:none; }
.tts-match-entry { position:fixed;z-index:1000;inset:0;pointer-events:auto;background:transparent; }
.tts-match-entry[hidden] { display:none!important; }
.tts-entry-board { position:absolute;overflow:hidden;background:radial-gradient(ellipse at 40% 10%,#1b99c5,#0a6c98 58%,#06597f);box-shadow:inset 0 0 0 2px #80d8ff; }
.tts-entry-grid { position:absolute;inset:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(20,minmax(0,1fr)); }
.tts-entry-grid i { min-width:0;min-height:0;box-sizing:border-box;border:var(--entry-line,1px) solid #65cbef99;box-shadow:inset 0 0 3px #46c7f255; }
.tts-entry-board > canvas,.tts-entry-ships { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.tts-entry-ships .formation-sprite { position:absolute;filter:drop-shadow(1px 3px 2px #001723aa); }
.tts-entry-ships .formation-sprite svg { display:block;width:100%;height:100%;overflow:visible; }
.tts-entry-ships .formation-sprite { isolation:isolate; }
/* The final dissolve reveals the original, attached ship grounding. Cloned
   reflections must never render as a second opaque hull during the camera move. */
.tts-entry-ships :is(.tts-ship-reflection,.tts-ship-wake) { display:none!important; }
.tts-entry-cards { position:fixed;inset:0;pointer-events:none; }
.tts-entry-controls { position:absolute;z-index:5;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:20px; }
.tts-entry-controls button { width:210px;height:64px; }
body.tts-entering-match #tts-modes { opacity:0;pointer-events:none; }
body.tts-entering-match .tts-home-actions,body.tts-entering-match .tts-compact-actions { opacity:0; }
.tts-match-entry:focus-visible { outline:none; }

/* Phase 1: one physical open-box composition with a perspective lid. */
#battle-screen.tts-match .tts-match-layout {
  grid-template-columns:clamp(180px,15vw,288px) minmax(0,1fr) clamp(268px,21vw,380px);
  gap:clamp(8px,.8vw,15px);
  padding:clamp(8px,.85vw,16px);
  isolation:isolate;
}
#battle-screen.tts-match .tts-match-layout::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 45%,#2a110633 75%,#17080488 100%);
}
.tts-match-brand,.tts-match-rail {
  position:relative;
  z-index:2;
  box-sizing:border-box;
  min-height:0;
  overflow:hidden;
  border:clamp(4px,.45vw,8px) solid #5b270f;
  border-radius:4px;
  background:
    linear-gradient(90deg,#2e100a66,#8c4a2488 8%,transparent 22%,transparent 78%,#2e100a66),
    linear-gradient(180deg,#9a5d31,#6d361c 55%,#52230f);
  box-shadow:inset 0 0 0 2px #c28a4b88,inset 0 0 24px #230b07cc,0 4px 14px #1b0906aa;
}
.tts-match-brand {
  display:flex;
  flex-direction:column;
  gap:clamp(6px,.8vh,10px);
  padding:clamp(8px,1vh,12px) clamp(5px,.55vw,10px);
}
.tts-match-mark { gap:0;padding:0 3px;min-height:0; }
.tts-match-mark .tts-match-ghost { width:88%;max-height:16vh; }
.tts-match-mark .tts-match-title { width:98%;max-height:20vh; }
.tts-match-subtitle { margin-top:1px;font-size:clamp(10px,.85vw,16px);line-height:1.02; }
.tts-left-console {
  flex:none;
  display:grid;
  gap:clamp(5px,.65vh,8px);
  padding:clamp(6px,.6vw,10px);
  border:2px solid #c9a458;
  border-radius:5px;
  background:linear-gradient(180deg,#09243a,#03101c);
  box-shadow:inset 0 0 0 2px #02090f,inset 0 8px 18px #16426633,0 3px 8px #190904aa;
}
.tts-command-actions,.tts-audio-controls { display:block; }
#battle-screen.tts-match .tts-command-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(4px,.45vw,7px);
}
body.tts-edition #battle-screen.tts-match .tts-command-actions .tts-plaque-button {
  --plaque-height:clamp(38px,5.1vh,52px);
  --plaque-type-ratio:.32;
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 5px!important;
  letter-spacing:-.045em!important;
  line-height:.94!important;
}
#battle-screen.tts-match .tts-command-actions > #restart-button { --plaque-type-ratio:.31; }
#battle-screen.tts-match .tts-command-actions > #combat-feedback-open { --plaque-type-ratio:.29;letter-spacing:-.065em!important; }
#battle-screen.tts-match .tts-command-actions > #home-button { grid-area:1/1!important; }
#battle-screen.tts-match .tts-command-actions > #pause-button { grid-area:1/2!important; }
#battle-screen.tts-match .tts-command-actions > #restart-button { grid-area:2/1!important; }
#battle-screen.tts-match .tts-command-actions > #combat-feedback-open { grid-area:2/2!important; }
#battle-screen.tts-match .tts-audio-controls .battle-audio-console {
  display:grid!important;
  grid-template-columns:1fr;
  gap:0;
  overflow:hidden;
  border:1px solid #816536;
  border-radius:3px;
  background:linear-gradient(180deg,#061929,#020c15);
  box-shadow:inset 0 0 0 1px #02070c,inset 0 5px 12px #1742672b;
}
#battle-screen.tts-match .tts-audio-controls .battle-audio-row {
  grid-template-columns:minmax(0,1fr) clamp(48px,4vw,62px)!important;
  gap:3px 6px!important;
  padding:5px 6px 6px!important;
  border:0!important;
  border-radius:0;
  background:transparent!important;
}
#battle-screen.tts-match .tts-audio-controls .battle-audio-row + .battle-audio-row { border-top:1px solid #806a3c!important; }
#battle-screen.tts-match .tts-audio-controls .battle-audio-name { min-width:0;gap:4px;font-family:Georgia,"Times New Roman",serif!important; }
#battle-screen.tts-match .tts-audio-controls .battle-audio-name strong { font-size:clamp(10px,.78vw,13px)!important; }
#battle-screen.tts-match .tts-audio-controls .battle-audio-name output { font-size:clamp(10px,.72vw,12px)!important; }
#battle-screen.tts-match .tts-audio-controls .battle-volume-control { grid-column:1/-1!important;grid-row:2!important;height:14px!important; }
#battle-screen.tts-match .tts-audio-controls .battle-volume-control input { height:14px!important; }
body.tts-edition #battle-screen.tts-match .tts-audio-controls :is(#battle-mute,#battle-sfx-mute) {
  --plaque-height:24px;
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 4px!important;
  overflow:hidden!important;
  border:1px solid #a88039!important;
  border-radius:3px!important;
  background:linear-gradient(180deg,#123454,#041426 62%,#020b14)!important;
  box-shadow:inset 0 0 0 1px #02070d,inset 0 1px #e7c66a44!important;
  color:#f4d37e!important;
  font-size:clamp(10px,.8vw,13px)!important;
  letter-spacing:0!important;
  text-shadow:0 2px 2px #000!important;
  filter:none!important;
}
body.tts-edition #battle-screen.tts-match .tts-audio-controls :is(#battle-mute,#battle-sfx-mute)::before { display:none!important;content:none!important; }
.tts-match-studio { width:94%;height:clamp(82px,14vh,150px);margin-top:auto; }

.tts-board-space {
  --tts-lid-depth:clamp(148px,19vh,220px);
  position:relative;
  z-index:4;
  gap:0;
  overflow:visible;
}
.tts-lid-stage {
  position:relative;
  z-index:80;
  flex:none;
  width:100%;
  height:var(--tts-lid-depth);
  pointer-events:none;
}
.tts-match-lid {
  position:absolute;
  z-index:80;
  left:50%;
  bottom:-5px;
  width:var(--tts-lid-width,calc(100% + clamp(180px,16vw,310px)));
  height:calc(100% + 10px);
  transform:translateX(-50%);
  clip-path:polygon(1% 0,99% 0,89% 100%,11% 100%);
  pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(180deg,#41150d 0 7%,#8b3c1d 8% 13%,transparent 14% 86%,#7a3218 87% 94%,#31100b 95%),
    linear-gradient(105deg,#32120c,#8f4c28 12%,#5b2817 30%,#a56336 72%,#3a160e);
  filter:drop-shadow(0 10px 8px #190704bb) drop-shadow(0 2px 1px #d39a56aa);
}
.tts-match-lid::before {
  content:"";
  position:absolute;
  inset:clamp(12px,1.2vw,20px) 8% clamp(17px,1.5vw,25px);
  clip-path:polygon(1% 0,99% 0,90% 100%,10% 100%);
  background:
    radial-gradient(circle at 21% 48%,transparent 0 17%,#65401c33 17.5% 18%,transparent 18.5%),
    repeating-linear-gradient(24deg,transparent 0 24px,#5c361c22 25px 27px),
    linear-gradient(100deg,#b88951,#d2ac72 46%,#9b7041);
  box-shadow:inset 0 0 30px #4c210dc7,inset 0 0 0 2px #e0bd7a88;
}
.tts-match-lid::after {
  content:"";
  position:absolute;
  left:11%;right:11%;bottom:0;height:10px;
  background:linear-gradient(180deg,#c8893b,#5d2a0d 46%,#e0ac55 62%,#4b1d08);
  box-shadow:0 -3px 8px #1b0708aa;
}
.tts-lid-map {
  position:absolute;
  z-index:1;
  left:17%;top:20%;width:25%;height:54%;
  opacity:.46;
  transform:rotate(-2deg);
  background:
    radial-gradient(circle at 35% 44%,transparent 0 19%,#3d261755 20% 21%,transparent 22%),
    conic-gradient(from 12deg at 35% 44%,transparent 0 7%,#3d261744 7.5% 8%,transparent 8.5% 20%,#3d261744 20.5% 21%,transparent 21.5%),
    repeating-linear-gradient(14deg,transparent 0 20px,#3d26172d 21px 22px);
  border:1px solid #4b2d1888;
}
.tts-lid-ghost,.tts-lid-title { position:absolute;z-index:2;display:block;object-fit:contain;filter:drop-shadow(1px 3px 2px #2a0d0baa); }
.tts-lid-ghost { left:19%;top:22%;width:18%;height:48%;opacity:.42; }
.tts-lid-title { right:20%;top:18%;width:43%;height:58%;object-fit:fill; }
.tts-lid-subtitle {
  position:absolute;
  z-index:2;
  right:19%;top:73%;width:44%;
  color:#3b190e;
  font:800 clamp(9px,.9vw,17px)/1 'Black Ops One',Georgia,serif;
  letter-spacing:.12em;
  text-align:center;
  text-shadow:0 1px #e9c89166;
}
.tts-lid-hinge {
  position:absolute;
  z-index:4;
  bottom:2px;
  width:11%;
  height:clamp(9px,1.1vh,14px);
  border:1px solid #583208;
  border-radius:2px;
  background:linear-gradient(180deg,#f0cb6d,#9a601c 45%,#f0c361 55%,#6b3a0e);
  box-shadow:inset 0 0 0 1px #ffe3a366,0 2px 4px #1a0907aa;
}
.tts-lid-hinge-left { left:31%; }
.tts-lid-hinge-center { left:50%;transform:translateX(-50%); }
.tts-lid-hinge-right { right:31%; }

#battle-screen.tts-match .tts-cabinet-well {
  --tts-cabinet-side:clamp(26px,2.25vw,40px);
  --tts-cabinet-head:clamp(14px,1.8vh,22px);
  --tts-cabinet-front:clamp(48px,6.5vh,72px);
  position:relative;
  z-index:81;
  flex:none;
  display:grid;
  grid-template-columns:var(--tts-cabinet-side) auto var(--tts-cabinet-side);
  grid-template-rows:var(--tts-cabinet-head) auto var(--tts-cabinet-front);
  align-items:stretch;
  justify-items:stretch;
  filter:drop-shadow(0 10px 10px #180705aa);
}
#battle-screen.tts-match .tts-cabinet-well::before {
  content:"";
  position:absolute;
  z-index:11;
  inset:0;
  border:2px solid #421008;
  border-top-color:#9d4d25;
  border-radius:0 0 6px 6px;
  box-shadow:inset 0 0 0 1px #c06e3633;
  pointer-events:none;
}
#battle-screen.tts-match .tts-match-frame {
  position:relative;
  z-index:12;
  grid-column:2;
  grid-row:2;
  margin:0;
  border-width:clamp(9px,.7vw,13px);
  box-shadow:inset 0 0 14px #020b12,0 0 0 2px #2c0b07,0 8px 20px #170405e0;
}
.tts-cabinet-wall,.tts-cabinet-front,.tts-cabinet-chain {
  pointer-events:none;
  user-select:none;
}
.tts-cabinet-wall {
  position:relative;
  z-index:4;
  overflow:hidden;
  background-color:#4d160e;
  background-image:
    linear-gradient(90deg,#210604aa,#8c321c66 32%,#c26a3738 55%,#230705aa),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,560px auto;
  background-blend-mode:normal,multiply;
  box-shadow:inset 0 0 15px #160305e6,inset 0 0 0 2px #9f5128aa;
}
.tts-cabinet-wall::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,#f3a65d18 45%,transparent 70%);
}
.tts-cabinet-wall-top {
  z-index:7;
  grid-column:1/4;
  grid-row:1;
  border-top:2px solid #2a0805;
  border-bottom:2px solid #d3884688;
  background-position:center 46%;
  box-shadow:inset 0 5px 9px #150304e8,inset 0 -4px 7px #e58e4633,0 4px 8px #120204c7;
}
.tts-cabinet-wall-left {
  grid-column:1;
  grid-row:2;
  clip-path:none;
  border-left:2px solid #8e4222;
  border-right:2px solid #230605;
  background-position:34% center;
}
.tts-cabinet-wall-right {
  grid-column:3;
  grid-row:2;
  clip-path:none;
  border-left:2px solid #230605;
  border-right:2px solid #8e4222;
  background-position:66% center;
}
.tts-cabinet-wall-left::before,.tts-cabinet-wall-right::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#090102aa,transparent 45%,#090102d9);
}
.tts-cabinet-chain {
  position:absolute;
  z-index:18;
  top:calc(var(--tts-cabinet-head) * -2.7);
  display:flex;
  flex-direction:column;
  align-items:center;
  width:16px;
  filter:drop-shadow(1px 2px 1px #190704) drop-shadow(0 0 2px #f2b95888);
}
.tts-cabinet-chain-left { left:calc(var(--tts-cabinet-side) * .35); }
.tts-cabinet-chain-right { right:calc(var(--tts-cabinet-side) * .35); }
.tts-cabinet-chain i {
  display:block;
  flex:none;
  box-sizing:border-box;
  width:clamp(8px,.75vw,12px);
  height:clamp(14px,1.45vw,21px);
  margin-top:clamp(-5px,-.34vw,-3px);
  border:clamp(2px,.17vw,3px) solid #d79a39;
  border-left-color:#6d340d;
  border-radius:50%;
  background:#38120722;
  box-shadow:inset 1px 0 #ffdb7b88;
  transform:rotate(8deg);
}
.tts-cabinet-chain i:nth-child(even) {
  position:relative;
  z-index:2;
  border-color:#f0bd59 #7a3b10 #845018 #e9b653;
  transform:rotate(-8deg) scaleX(.58);
}
.tts-cabinet-chain::before,.tts-cabinet-chain::after {
  content:"";
  position:relative;
  z-index:3;
  display:block;
  flex:none;
  box-sizing:border-box;
  width:clamp(12px,1vw,16px);
  height:clamp(12px,1vw,16px);
  border:2px solid #6b340d;
  border-radius:50%;
  background:radial-gradient(circle,#251006 0 23%,#f3c968 26% 42%,#8a4a13 46% 67%,#3a1507 71%);
  box-shadow:0 0 0 2px #5a210b,0 2px 4px #170304;
}
.tts-cabinet-chain::before { margin-bottom:-3px; }
.tts-cabinet-chain::after { margin-top:-3px; }
.tts-cabinet-front {
  position:relative;
  z-index:9;
  grid-column:1/4;
  grid-row:3;
  display:grid;
  place-items:center;
  margin-top:0;
  clip-path:none;
  border:3px solid #4a1209;
  border-top-color:#b66130;
  border-radius:0 0 6px 6px;
  background-color:#59190f;
  background-image:
    linear-gradient(180deg,#1c0405 0,#8e301c 13%,#611a11 58%,#2a0807 100%),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,620px auto;
  background-position:center,center 72%;
  background-blend-mode:normal,multiply;
  box-shadow:inset 0 6px 10px #140203c7,inset 0 -5px 8px #bc5c2a44,0 4px 0 #2b0a06;
}
.tts-cabinet-clasp {
  position:relative;
  z-index:2;
  display:block;
  width:clamp(68px,8vw,104px);
  height:clamp(16px,2.15vh,25px);
  border:2px solid #5c2c08;
  border-radius:50% 50% 32% 32%/38% 38% 56% 56%;
  background:linear-gradient(180deg,#f5ce69,#a9681e 38%,#70400f 52%,#d99b3a 68%,#6c350d);
  box-shadow:inset 0 0 0 2px #ffe6a455,0 2px 5px #170404cc;
}
.tts-cabinet-clasp::before {
  content:"";
  position:absolute;
  left:50%;
  top:25%;
  width:20%;
  height:72%;
  transform:translateX(-50%);
  border:1px solid #4d2106;
  border-radius:2px;
  background:linear-gradient(90deg,#75410d,#f0bd50 48%,#63320a);
  box-shadow:0 1px 2px #210804;
}
#battle-screen.tts-match .tts-placement-banner {
  position:absolute;
  z-index:88;
  top:calc(var(--tts-lid-depth) - 26px);
  left:50%;
  width:min(68%,560px);
  min-height:0;
  margin:0;
  padding:6px 14px 5px;
  transform:translateX(-50%);
  border-width:2px;
  font-size:clamp(11px,.95vw,17px)!important;
  line-height:1!important;
  pointer-events:none;
}
#battle-screen.tts-match .tts-placement-banner span {
  margin-top:2px;
  font-size:clamp(9px,.7vw,12px)!important;
  line-height:1.05!important;
}
#battle-screen.tts-match .tts-match-rail {
  display:flex;
  flex-direction:column;
  gap:clamp(4px,.55vh,7px);
  padding:clamp(5px,.55vw,9px);
  overflow:hidden;
}
.tts-turn-panel,.tts-match-status-panel,.tts-enemy-panel,.tts-own-panel {
  border:2px solid #d7b45e;
  border-radius:5px;
  background:linear-gradient(180deg,#08243b,#031522);
  box-shadow:inset 0 0 0 2px #020a12,0 3px 6px #1d0906aa;
}
.tts-turn-panel[hidden],.tts-match-status-panel[hidden],.tts-placement-banner[hidden],.tts-compact-hud[hidden] { display:none!important; }
.tts-turn-panel {
  flex:none;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  min-height:clamp(60px,9vh,96px);
  padding:5px;
  color:#f6d57f;
  text-align:center;
}
.tts-turn-heading { display:flex;align-items:baseline;justify-content:center;gap:clamp(6px,.55vw,11px); }
.tts-turn-label { font:800 clamp(14px,1.2vw,23px)/1 'Black Ops One',Georgia,serif; }
.tts-turn-number { color:#d9ff65;font:900 clamp(20px,1.8vw,34px)/.8 Consolas,monospace;text-shadow:0 0 7px #aaff3288; }
.tts-turn-actor { color:#e9f7ff;font:800 clamp(10px,.85vw,16px)/1 Arial,sans-serif;letter-spacing:.12em; }
#battle-screen.tts-match .tts-turn-mode { color:#85d8f1;font:800 clamp(8px,.62vw,11px)/1 Arial,sans-serif!important;letter-spacing:.08em; }
.tts-match-status-panel { flex:none;padding:4px 6px 6px; }
#battle-screen.tts-match .tts-match-status-panel h2 { margin:0 0 3px!important; }
.tts-match-status-panel > div { display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #c9a240; }
.tts-match-status-panel > div span {
  display:grid;
  place-items:center;
  padding:2px;
  color:#f4d47a;
  font:800 clamp(10px,.8vw,14px)/1 Arial,sans-serif;
}
.tts-match-status-panel > div span + span { border-left:1px solid #c9a240; }
.tts-match-status-panel strong { display:block;margin-top:3px;color:#d9ff65;font:900 clamp(15px,1.2vw,23px)/1 Consolas,monospace; }
.tts-match-status-panel span:first-child strong { color:#77eaff; }
.tts-compact-hud {
  --tts-hud-tile:clamp(34px,4vw,46px);
  position:absolute;
  z-index:34;
  top:clamp(7px,1.1vw,13px);
  left:50%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(8px,1.2vw,16px);
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 4px 5px #00101bbd);
}
#battle-screen.tts-match .tts-compact-hud .tts-hud-mode-name {
  position:absolute;
  left:50%;
  top:calc(var(--tts-hud-tile) * 2 + 5px);
  transform:translateX(-50%);
  padding:2px 8px;
  border:1px solid #c9a240;
  border-radius:10px;
  background:#031522f2;
  color:#ffe4a1;
  font:800 clamp(8px,.75vw,10px)/1 Arial,sans-serif!important;
  letter-spacing:.08em;
  white-space:nowrap;
}
.tts-hud-piece { display:grid;grid-auto-rows:var(--tts-hud-tile); }
.tts-hud-turn-piece { grid-template-columns:repeat(3,var(--tts-hud-tile)); }
.tts-hud-turn-piece .tts-hud-turn-label { grid-column:2;grid-row:1; }
.tts-hud-turn-piece .tts-hud-turn-number { grid-column:3;grid-row:1; }
.tts-hud-turn-piece .tts-hud-actor-a { grid-column:1;grid-row:2; }
.tts-hud-turn-piece .tts-hud-actor-b { grid-column:2;grid-row:2; }
.tts-hud-count-piece { grid-template-columns:repeat(2,var(--tts-hud-tile)); }
#battle-screen.tts-match .tts-compact-hud .tts-hud-cell {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:2px solid #8c866e;
  background:linear-gradient(145deg,#777467,#3e403b 48%,#151b19 100%);
  box-shadow:inset 0 0 0 1px #d0c8a477,inset 0 0 8px #050706,0 1px 2px #000;
  color:#f6e4b1;
  font:900 clamp(7px,.85vw,11px)/1 Arial,sans-serif!important;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 2px 2px #000;
}
#battle-screen.tts-match .tts-compact-hud .tts-hud-count-piece strong,
#battle-screen.tts-match .tts-compact-hud .tts-hud-turn-number {
  color:#d9ff65;
  font-family:Consolas,monospace;
  font-size:clamp(12px,1.3vw,18px)!important;
  text-shadow:0 0 6px #aaff3288;
}
.tts-hud-player-count { color:#77eaff!important;text-shadow:0 0 6px #4dcfff88!important; }
.tts-hud-turn-piece .tts-hud-cell { background:linear-gradient(145deg,#213c46,#091718 52%,#020909); }
.tts-match-primary,.tts-match-secondary { flex:none;display:grid;grid-template-columns:1fr;gap:clamp(4px,.45vh,6px);margin:0; }
.tts-match-layout[data-phase="deployment"] .tts-turn-panel { order:1; }
.tts-match-layout[data-phase="deployment"] .tts-match-status-panel { order:2; }
.tts-match-layout[data-phase="deployment"] .tts-match-primary { order:3; }
.tts-match-layout[data-phase="deployment"] .tts-match-secondary { order:4; }
.tts-match-layout[data-phase="deployment"] .tts-enemy-panel { order:5; }
.tts-match-layout[data-phase="deployment"] .tts-own-panel { order:6; }
.tts-match-layout[data-phase="deployment"] .tts-rail-aux { order:7; }
.tts-match-layout[data-phase="combat"] .tts-turn-panel { order:1; }
.tts-match-layout[data-phase="combat"] .tts-match-status-panel { order:2; }
.tts-match-layout[data-phase="combat"] .tts-enemy-panel { order:3; }
.tts-match-layout[data-phase="combat"] .tts-own-panel { order:4; }
.tts-match-layout[data-phase="combat"] .tts-rail-aux { order:5; }
.tts-rail-aux { display:grid;gap:4px; }
.tts-enemy-panel,.tts-own-panel { padding:clamp(4px,.45vw,7px); }

@media(max-height:850px) {
  .tts-board-space { --tts-lid-depth:clamp(112px,17vh,138px); }
  #battle-screen.tts-match .tts-cabinet-well {
    --tts-cabinet-side:clamp(34px,2.85vw,42px);
    --tts-cabinet-head:14px;
    --tts-cabinet-front:clamp(42px,6.1vh,50px);
  }
  .tts-match-brand { gap:5px;padding-top:6px;padding-bottom:6px; }
  .tts-match-mark .tts-match-ghost { max-height:14vh; }
  .tts-match-mark .tts-match-title { max-height:18vh; }
  .tts-match-studio { height:clamp(74px,12vh,98px); }
  .tts-left-console { gap:4px;padding:5px; }
  #battle-screen.tts-match .tts-audio-controls .battle-audio-row { padding:4px 5px 5px!important; }
  #battle-screen.tts-match .tts-audio-controls .battle-volume-control,
  #battle-screen.tts-match .tts-audio-controls .battle-volume-control input { height:16px!important; }
  #battle-screen.tts-match .tts-placement-banner { top:calc(var(--tts-lid-depth) - 22px);padding:4px 10px 3px; }
  .tts-turn-panel { min-height:55px; }
}
@media(max-height:740px) {
  .tts-board-space { --tts-lid-depth:110px; }
  #battle-screen.tts-match .tts-cabinet-well { --tts-cabinet-side:30px;--tts-cabinet-head:12px;--tts-cabinet-front:40px; }
  .tts-cabinet-chain i:nth-child(n+12) { display:none; }
  .tts-match-mark .tts-match-ghost { max-height:12vh; }
  .tts-match-mark .tts-match-title { max-height:16vh; }
  .tts-match-subtitle { font-size:10px; }
  .tts-match-studio { height:70px; }
}
@media(max-width:1279px),(max-height:719px) {
  .tts-compact-hud:not([hidden]) { display:flex; }
}
@media(max-width:1100px) {
  #battle-screen.tts-match .tts-match-layout { grid-template-columns:175px minmax(0,1fr) 250px;gap:8px;padding:8px; }
  #battle-screen.tts-match .tts-cabinet-well { --tts-cabinet-side:30px; }
}
@media(prefers-reduced-motion:reduce) {
  .tts-match-lid,.tts-placement-banner,.tts-turn-panel,.tts-match-status-panel { transition:none!important; }
}

/* Phase 3: lacquered wood cabinet and one independent water-light layer. */
.tts-match-brand,.tts-match-rail {
  background-color:#5b2b18;
  background-image:
    linear-gradient(90deg,#1d0807b8 0,#a9623030 9%,transparent 24% 76%,#1d0807c7 100%),
    linear-gradient(180deg,#a05c32aa,#6a301bcc 52%,#3e180ddb),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,auto,720px auto;
  background-position:center,center,center 48%;
  background-blend-mode:normal,multiply,soft-light;
}
.tts-match-lid {
  background-color:#5b2615;
  background-image:
    linear-gradient(180deg,#2b0808 0 7%,#a24b25 8% 13%,transparent 14% 86%,#7a3218 87% 94%,#260706 95%),
    linear-gradient(105deg,#2c0c08e8,#9b4d26b8 16%,#542013bd 48%,#9d5129aa 78%,#2b0d09e8),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,auto,940px auto;
  background-position:center,center,center 43%;
  background-blend-mode:normal,multiply,soft-light;
}
.tts-match-lid::before {
  background-image:
    radial-gradient(circle at 21% 48%,transparent 0 17%,#4a2a1659 17.5% 18%,transparent 18.5%),
    repeating-linear-gradient(24deg,transparent 0 24px,#4e2c1824 25px 27px),
    linear-gradient(100deg,#c29660d9,#e0bd83c7 46%,#a87949d9),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,auto,auto,900px auto;
  background-position:center,center,center,center 32%;
  background-blend-mode:normal,multiply,normal,soft-light;
}
.tts-cabinet-wall {
  background-color:#4b160f;
  background-image:
    linear-gradient(90deg,#1b0405d9,#8e321c8c 31%,#c36c384f 55%,#210506df),
    repeating-linear-gradient(90deg,transparent 0 7px,#f3a65d0c 8px 9px),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,auto,610px auto;
  background-position:center,center,center 66%;
  background-blend-mode:multiply,screen,soft-light;
}
.tts-cabinet-front {
  background-color:#59190f;
  background-image:
    linear-gradient(180deg,#170304e8 0,#9a391fd6 14%,#641d13e6 58%,#260605f2 100%),
    linear-gradient(90deg,#250805b8,transparent 13% 87%,#250805b8),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,auto,760px auto;
  background-position:center,center,center 72%;
  background-blend-mode:normal,multiply,soft-light;
}
#battle-screen.tts-match #board-plane {
  background-color:#075a7d!important;
  background-image:
    radial-gradient(ellipse at 42% 8%,#7ee6ff30 0,transparent 36%),
    repeating-linear-gradient(106deg,transparent 0 17px,#7adcf00d 18px 19px,transparent 20px 38px),
    repeating-linear-gradient(19deg,transparent 0 23px,#b9f2ff0a 24px 25px,transparent 26px 51px),
    linear-gradient(180deg,#168fba 0,#08749e 46%,#045b82 100%)!important;
  background-size:auto,96px 96px,132px 132px,auto!important;
  box-shadow:inset 0 0 0 2px #8eeaffcc,inset 0 0 68px #001d3a70!important;
}
#battle-screen.tts-match #board-plane .board-surface {
  isolation:isolate;
  overflow:hidden!important;
  background:transparent!important;
}
#battle-screen.tts-match #board-plane .board-surface::before {
  content:""!important;
  position:absolute;
  z-index:0;
  inset:-14%;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse at 14% 28%,#c8f7ff38 0 1.2%,transparent 8%),
    radial-gradient(ellipse at 69% 34%,#9beaff2d 0 1.6%,transparent 10%),
    radial-gradient(ellipse at 42% 78%,#b8f4ff30 0 1.3%,transparent 9%),
    repeating-radial-gradient(ellipse at 24% 36%,transparent 0 15px,#9defff17 16px 17px,transparent 18px 36px);
  background-size:58% 46%,66% 56%,62% 52%,190px 118px;
  opacity:.58;
  mix-blend-mode:screen;
  transform:translate3d(-1.5%,-.7%,0) scale(1.025);
  will-change:transform,opacity;
  animation:tts-water-caustic-drift 18s ease-in-out infinite alternate;
}
#battle-screen.tts-match #board-plane .board-surface::after {
  content:""!important;
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(122deg,#d4f8ff16 0 12%,transparent 26% 72%,#00345424 91%),
    radial-gradient(ellipse at 50% 46%,transparent 40%,#0032503b 82%,#00182f73 100%);
  box-shadow:inset 0 0 24px #a9efff18,inset 0 0 70px #001a3370;
}
#battle-screen.tts-match #formation-layer { z-index:8!important; }
#battle-screen.tts-match .tts-metal-islands { z-index:7; }
#battle-screen.tts-match #target-grid { z-index:12!important; }
#battle-screen.tts-match .target-cell:not(.is-hit):not(.is-miss):not(.is-pending):not(.is-charred) {
  border-color:#6ed5f057!important;
  box-shadow:inset 0 0 3px #61ddff1f!important;
}
#battle-screen.tts-match .target-cell:nth-child(4n):not(.is-hit):not(.is-miss):not(.is-pending):not(.is-charred) { border-right-color:#8ee8ff70!important; }
#battle-screen.tts-match .target-cell:hover:not(:disabled) {
  background:#72d9ff1c!important;
  box-shadow:inset 0 0 0 2px #d9f8ffcc,0 0 10px #5bdcff78!important;
}
@keyframes tts-water-caustic-drift {
  0% { transform:translate3d(-1.5%,-.7%,0) scale(1.025);opacity:.46; }
  52% { transform:translate3d(1.2%,.8%,0) scale(1.045);opacity:.62; }
  100% { transform:translate3d(-.2%,1.5%,0) scale(1.035);opacity:.52; }
}
body:not([data-stage="battle-screen"]) #battle-screen.tts-match #board-plane .board-surface::before,
body:has(dialog[open]) #battle-screen.tts-match #board-plane .board-surface::before { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
  #battle-screen.tts-match #board-plane .board-surface::before {
    animation:none!important;
    transform:none!important;
    opacity:.4;
    will-change:auto;
  }
}
@media(prefers-reduced-data:reduce) {
  #battle-screen.tts-match #board-plane .board-surface::before { animation:none;opacity:.22;will-change:auto; }
  #battle-screen.tts-match #board-plane .board-surface::after { background:radial-gradient(ellipse at 50% 46%,transparent 42%,#001a366e 100%); }
}

/* Phase 3 cabinet-craft refinement: mitered woodwork and dimensional brass. */
.tts-cabinet-wall-top::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 45%,#260705 47% 50%,#d17a3b55 52% 54%,transparent 56%) left center/var(--tts-cabinet-side) 100% no-repeat,
    linear-gradient(225deg,transparent 0 45%,#260705 47% 50%,#d17a3b55 52% 54%,transparent 56%) right center/var(--tts-cabinet-side) 100% no-repeat;
  filter:drop-shadow(0 1px 0 #160304);
}
.tts-cabinet-front::before,.tts-cabinet-front::after {
  content:"";
  position:absolute;
  z-index:3;
  top:-3px;
  bottom:-3px;
  width:calc(var(--tts-cabinet-side) + 3px);
  pointer-events:none;
  background-color:#54170f;
  background-image:
    linear-gradient(90deg,#210504d4,#a041236f 45%,#3a0c08d9),
    url('./assets/through-the-shadows/match/tabletop-wood.jpg');
  background-size:auto,560px auto;
  background-position:center,34% 66%;
  background-blend-mode:multiply,soft-light;
}
.tts-cabinet-front::before {
  left:-3px;
  clip-path:polygon(0 0,100% 0,0 100%);
  filter:drop-shadow(1px 1px 0 #1b0404) drop-shadow(1px 0 0 #b6603033);
}
.tts-cabinet-front::after {
  right:-3px;
  clip-path:polygon(0 0,100% 0,100% 100%);
  filter:drop-shadow(-1px 1px 0 #1b0404) drop-shadow(-1px 0 0 #b6603033);
}
.tts-lid-hinge {
  overflow:visible;
  border-color:#3d2109 #7e4b17 #2a1607;
  border-radius:3px;
  background:
    radial-gradient(circle at 8% 34%,#241305 0 1px,#f2d17c 1.4px 2.3px,#704313 2.7px 3.4px,transparent 3.8px),
    radial-gradient(circle at 92% 34%,#241305 0 1px,#f2d17c 1.4px 2.3px,#704313 2.7px 3.4px,transparent 3.8px),
    repeating-linear-gradient(90deg,#e1b554 0 2px,#9a651f 3px 5px,#cf9b3d 6px 8px);
  box-shadow:inset 0 1px #fff0aa88,inset 0 -2px 3px #3b1c07aa,0 2px 4px #160604c7;
}
.tts-lid-hinge::before {
  content:"";
  position:absolute;
  z-index:2;
  left:5%;
  right:5%;
  bottom:-5px;
  height:clamp(6px,.65vh,9px);
  border:1px solid #422408;
  border-radius:999px;
  background:linear-gradient(180deg,#f4d478 0,#c58a2c 28%,#684013 55%,#dca644 76%,#4d2a0b 100%);
  box-shadow:inset 0 1px #fff1b288,0 2px 3px #150504aa;
}
.tts-lid-hinge::after {
  content:"";
  position:absolute;
  z-index:3;
  left:41%;
  bottom:-6px;
  width:18%;
  height:clamp(8px,.82vh,11px);
  border:1px solid #422408;
  border-radius:2px;
  background:linear-gradient(90deg,#5b330e,#e8bc58 30%,#fff0a1 50%,#9a641e 76%,#472508);
  box-shadow:0 1px 2px #180604;
}
.tts-cabinet-chain i {
  border-color:#9b5f1d #e0ae4a #714111 #c78b2f;
  box-shadow:inset 1px 0 #ffe39b99,inset -1px 0 #3c1d08aa,0 1px 1px #160503;
}
.tts-cabinet-chain i:nth-child(even) {
  border-color:#e4b954 #6b3a0d #855016 #f1c667;
  box-shadow:inset 1px 0 #fff0acaa,0 1px 1px #160503;
}
.tts-cabinet-chain::before,.tts-cabinet-chain::after {
  width:clamp(17px,1.45vw,22px);
  height:clamp(21px,1.75vw,27px);
  border:1px solid #402107;
  border-radius:48% 48% 38% 38%/38% 38% 52% 52%;
  background:
    radial-gradient(circle at 50% 50%,#150a03 0 13%,#f1cc70 15% 24%,#754512 26% 37%,transparent 39%),
    radial-gradient(circle at 50% 14%,#2b1807 0 1px,#edcd7a 1.5px 2.5px,#68400f 3px 3.7px,transparent 4px),
    radial-gradient(circle at 50% 86%,#2b1807 0 1px,#edcd7a 1.5px 2.5px,#68400f 3px 3.7px,transparent 4px),
    linear-gradient(105deg,#5d350e,#d6a544 33%,#f0cc72 47%,#8a5719 61%,#3e2109);
  box-shadow:inset 0 1px #fff0ad88,inset 0 -2px 3px #3a1c07aa,0 0 0 2px #4d1b0b,0 2px 4px #170304;
}
.tts-cabinet-chain::before { margin-bottom:-5px; }
.tts-cabinet-chain::after { margin-top:-5px; }
.tts-cabinet-clasp {
  width:clamp(76px,8.4vw,112px);
  height:clamp(18px,2.35vh,28px);
  border-color:#3b2008 #7f5018 #281406;
  border-radius:6px 6px 10px 10px;
  background:
    radial-gradient(circle at 10% 50%,#231204 0 1px,#f0cf78 1.5px 2.7px,#6e4311 3px 4px,transparent 4.4px),
    radial-gradient(circle at 90% 50%,#231204 0 1px,#f0cf78 1.5px 2.7px,#6e4311 3px 4px,transparent 4.4px),
    repeating-linear-gradient(100deg,#d9a641 0 3px,#a66f22 4px 6px,#e6bd5d 7px 10px);
  box-shadow:inset 0 1px #fff1ab99,inset 0 -3px 5px #492607aa,0 3px 6px #160304cc;
}
.tts-cabinet-clasp::before {
  left:50%;
  top:-8px;
  width:24%;
  height:calc(100% + 13px);
  transform:translateX(-50%);
  border:1px solid #3d2007;
  border-radius:3px 3px 6px 6px;
  background:
    linear-gradient(90deg,#5c330d,#dca947 28%,#f6d77b 48%,#95601c 70%,#472508);
  box-shadow:inset 0 1px #fff1ae88,0 1px 3px #1d0805;
}
.tts-cabinet-clasp::after {
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:58%;
  width:clamp(7px,.65vw,10px);
  height:clamp(5px,.48vw,8px);
  transform:translate(-50%,-50%);
  border:1px solid #c59138;
  border-radius:50% 50% 35% 35%;
  background:radial-gradient(circle at 50% 35%,#080300 0 28%,#4b290b 31% 48%,#120703 52%);
  box-shadow:inset 0 1px 2px #000,0 1px #f5d47866;
}

/* User-directed lid/support refinement: wider crown, aligned supports and corner irons. */
.tts-match-lid {
  clip-path:polygon(0 0,100% 0,89% 100%,11% 100%);
}
.tts-cabinet-chain {
  top:calc(var(--tts-cabinet-head) * -6.3);
  transform-origin:50% 100%;
}
.tts-cabinet-chain-left {
  left:calc(var(--tts-cabinet-side) * .5 - 8px);
  transform:rotate(0deg);
}
.tts-cabinet-chain-right {
  right:calc(var(--tts-cabinet-side) * .5 - 8px);
  transform:rotate(0deg);
}
.tts-cabinet-chain i {
  height:clamp(21px,2.8vh,28px);
  margin-top:clamp(-3px,-.18vw,-1px);
}
#battle-screen.tts-match .tts-cabinet-well::after {
  content:"";
  position:absolute;
  z-index:17;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 9px calc(100% - 9px),#251305 0 1px,#f3d47e 1.5px 2.7px,#704513 3px 4px,transparent 4.4px),
    radial-gradient(circle at 9px calc(100% - 35px),#251305 0 1px,#f3d47e 1.5px 2.7px,#704513 3px 4px,transparent 4.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#251305 0 1px,#f3d47e 1.5px 2.7px,#704513 3px 4px,transparent 4.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 35px),#251305 0 1px,#f3d47e 1.5px 2.7px,#704513 3px 4px,transparent 4.4px),
    linear-gradient(180deg,#f0cd72,#ad7526 34%,#5c350f 58%,#d19a3d 78%,#4a270a) left bottom/54px 9px no-repeat,
    linear-gradient(90deg,#f0cd72,#ad7526 34%,#5c350f 58%,#d19a3d 78%,#4a270a) left bottom/9px 48px no-repeat,
    linear-gradient(180deg,#f0cd72,#ad7526 34%,#5c350f 58%,#d19a3d 78%,#4a270a) right bottom/54px 9px no-repeat,
    linear-gradient(270deg,#f0cd72,#ad7526 34%,#5c350f 58%,#d19a3d 78%,#4a270a) right bottom/9px 48px no-repeat;
  filter:drop-shadow(0 2px 2px #160503aa);
}
@media(max-height:740px) {
  .tts-cabinet-chain i:nth-child(n+12) { display:block; }
  .tts-cabinet-chain i:nth-child(n+14) { display:none; }
}

/* Phase 4 piece grounding: alpha-shaped reflections, contact waterlines and
   restrained wakes stay attached to their ship DOM, while islands are painted
   as one signature-cached canvas so moving/vanishing terrain leaves no ghosts. */
#battle-screen.tts-match :is(.formation-sprite:not(.is-miniature),.formation-current-component) {
  isolation:isolate;
  overflow:visible;
}
#battle-screen.tts-match :is(.formation-sprite:not(.is-miniature),.formation-current-component) > .formation-sprite-art:not(.tts-ship-reflection) {
  position:relative;
  z-index:3;
  filter:drop-shadow(-1px -1px .35px rgba(207,248,255,.42)) drop-shadow(1.5px 2.5px 1.2px rgba(0,20,31,.84));
}
#battle-screen.tts-match .tts-ship-reflection {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  opacity:.2;
  pointer-events:none;
  mix-blend-mode:screen;
  transform:translate(2.2%,7%) scale(.985);
  transform-origin:50% 50%;
  filter:brightness(0) saturate(100%) invert(78%) sepia(36%) saturate(754%) hue-rotate(151deg) brightness(95%) blur(.55px);
}
#battle-screen.tts-match .tts-ship-wake {
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.36;
  filter:drop-shadow(0 0 1px rgba(209,250,255,.46));
  transition:opacity .18s ease,transform .18s ease;
}
#battle-screen.tts-match :is(.is-horizontal,[data-orientation="horizontal"]) > .tts-ship-wake {
  inset:-12% -9%;
  background:
    radial-gradient(ellipse at 8% 50%,rgba(233,253,255,.74) 0 1.2%,rgba(149,232,244,.42) 2.5%,transparent 9%),
    linear-gradient(174deg,transparent 0 41%,rgba(226,252,255,.68) 43% 44.5%,rgba(92,210,230,.22) 46%,transparent 48%) center 18%/100% 48% no-repeat,
    linear-gradient(186deg,transparent 0 41%,rgba(208,248,253,.52) 43% 44%,rgba(58,181,207,.2) 46%,transparent 48%) center 82%/100% 48% no-repeat;
}
#battle-screen.tts-match :is(.is-vertical,[data-orientation="vertical"]) > .tts-ship-wake {
  inset:-8% -14%;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(233,253,255,.7) 0 1.2%,rgba(149,232,244,.4) 2.5%,transparent 9%),
    linear-gradient(84deg,transparent 0 41%,rgba(226,252,255,.64) 43% 44.5%,rgba(92,210,230,.2) 46%,transparent 48%) 18% center/48% 100% no-repeat,
    linear-gradient(96deg,transparent 0 41%,rgba(208,248,253,.5) 43% 44%,rgba(58,181,207,.18) 46%,transparent 48%) 82% center/48% 100% no-repeat;
}
#battle-screen.tts-match :is(.is-square,[data-orientation="square"]) > .tts-ship-wake {
  inset:-13%;
  border-radius:42%;
  background:radial-gradient(ellipse at 48% 52%,transparent 48%,rgba(220,250,254,.58) 53%,rgba(82,202,222,.18) 57%,transparent 65%);
}
#battle-screen.tts-match .formation-sprite.is-dragging .tts-ship-wake {
  opacity:.82;
  animation:tts-ship-wake-pulse .7s ease-in-out infinite alternate;
}
#battle-screen.tts-match .formation-sprite.is-selected:not(.is-dragging) .tts-ship-wake { opacity:.5; }
#battle-screen.tts-match .gps-sinking-v14 > :is(.tts-ship-reflection,.tts-ship-wake) { opacity:0!important; }
@keyframes tts-ship-wake-pulse {
  from { opacity:.56;transform:scale(.98); }
  to { opacity:.88;transform:scale(1.055); }
}
body:not([data-stage="battle-screen"]) #battle-screen.tts-match .formation-sprite.is-dragging .tts-ship-wake,
body:has(dialog[open]) #battle-screen.tts-match .formation-sprite.is-dragging .tts-ship-wake { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
  #battle-screen.tts-match .formation-sprite.is-dragging .tts-ship-wake { animation:none!important;opacity:.62;transform:none; }
  #battle-screen.tts-match .tts-ship-wake { transition:none; }
}

/* Phase 5: one instrument bay, a cabinet-anchored camera and quiet feedback. */
.tts-rail-instruments {
  position:relative;
  order:0;
  flex:none;
  height:clamp(204px,27vh,292px);
}
.tts-deployment-instruments,.tts-combat-instruments {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(6px,.85vh,11px);
  transition:opacity 220ms ease,visibility 220ms;
}
.tts-deployment-instruments .tts-match-secondary { gap:clamp(6px,.85vh,11px); }
.tts-match-layout[data-phase="combat"] .tts-deployment-instruments,
.tts-match-layout[data-phase="deployment"] .tts-combat-instruments {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.tts-combat-instruments .tts-turn-panel { order:0; }
.tts-combat-instruments .tts-match-status-panel { order:1; }
.tts-combat-instruments #blind-luck-fire { order:3; }
.tts-combat-instruments .tts-compact-hud {
  position:relative;
  top:auto;
  left:auto;
  order:2;
  margin:0 auto 24px;
  transform:none;
  --tts-hud-tile:clamp(28px,3.5vw,40px);
  gap:7px;
}
.tts-turn-number,.tts-match-status-panel strong { font-variant-numeric:tabular-nums; }
.tts-turn-number { color:#f4df9f;text-shadow:0 1px 2px #000; }
.tts-match-status-panel strong { color:#dfebd7; }
.tts-match-layout[data-actor="player"] .tts-turn-actor { color:#a5ebf5; }
.tts-match-layout[data-actor="cpu"] .tts-turn-actor { color:#f2c788; }
.tts-match-layout[data-paused="true"] .tts-turn-actor { color:#e6dcc6; }
#battle-screen.tts-match .tts-match-rail h2 { letter-spacing:.035em!important; }
#battle-screen.tts-match .tts-own-panel .mini-map { width:100%!important; }
#battle-screen.tts-match .tts-enemy-card { transition:opacity 220ms ease,border-color 180ms ease; }
#battle-screen.tts-match .tts-enemy-card.is-sunk { opacity:.55; }
#battle-screen.tts-match .tts-plaque-button:focus-visible {
  outline:2px solid #fff0b8!important;
  outline-offset:2px;
}
#battle-screen.tts-match .tts-plaque-button:active:not(:disabled) { translate:0 1px; }
.tts-entry-board { pointer-events:none; }
.tts-entry-grid i { border-color:#6ed5f057;box-shadow:inset 0 0 3px #61ddff1f; }
.tts-entry-grid i:nth-child(4n) { border-right-color:#8ee8ff70; }
#battle-screen.tts-entry-pullback .tts-board-space { will-change:transform; }
#battle-screen.tts-entry-pullback :is(.tts-match-brand,.tts-match-rail) { opacity:var(--tts-entry-rail-opacity,0); }
#battle-screen.tts-entry-pullback:not(.tts-entry-settled) :is(#board-plane,.tts-placement-banner,.tts-compact-hud) { visibility:hidden; }
#battle-screen.tts-match.tts-entry-pullback #board-plane .board-surface::before,
#battle-screen.tts-match:has(.tts-match-layout[data-paused="true"]) #board-plane .board-surface::before { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce) {
  .tts-deployment-instruments,.tts-combat-instruments,
  #battle-screen.tts-match .tts-enemy-card { transition:none!important; }
  #battle-screen.tts-match .tts-plaque-button:active:not(:disabled) { translate:none; }
}