/* Independent pieces over the existing production box. */
.tts-home-grid-aperture { position:absolute;z-index:2;display:grid;place-items:center;background:radial-gradient(ellipse at 40% 15%,#198dc0,#075887);box-shadow:inset 0 0 5px #56d0f7;pointer-events:none; }
.tts-home-play-grid { position:relative;flex:none;background:linear-gradient(90deg,#8cdcf26b 1px,transparent 1px),linear-gradient(#8cdcf26b 1px,transparent 1px),radial-gradient(ellipse at 40% 15%,#198dc0,#075887);background-size:calc(100% / 24) calc(100% / 20),calc(100% / 24) calc(100% / 20),100% 100%;box-shadow:inset -1px -1px #8cdcf26b; }
.tts-tabletop-pieces { position:absolute;inset:0;z-index:7;pointer-events:none; }
#tts-shell .tts-tabletop-piece,.tts-entry-world .tts-tabletop-piece { position:absolute;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none!important;outline-offset:0!important;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;filter:drop-shadow(2px 3px 2px #0008);transition:filter 140ms ease; }
/* Layered contact shadows make loose pieces sit on the wooden table. Because
   the filter belongs to the draggable button, its shadow travels with it. */
#tts-shell .tts-tabletop-piece[data-on-board="false"]:not(.is-picked-up) { filter:drop-shadow(1px 2px 1px #000c) drop-shadow(5px 7px 4px #0008); }
.tts-piece-art { position:absolute;inset:0;display:block;pointer-events:none; }
.tts-tabletop-piece:focus-visible .tts-piece-art { filter:drop-shadow(0 0 2px #fff2aa) drop-shadow(0 0 5px #c79736); }
.tts-piece-art img { position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none; }
#tts-shell .tts-tabletop-piece.is-picked-up { z-index:20;cursor:grabbing;filter:drop-shadow(3px 5px 2px #0009) drop-shadow(9px 17px 8px #0009) brightness(1.12); }
.tts-tabletop-piece.is-picked-up .tts-piece-art { scale:1.08; }
.tts-metal-tile { position:absolute;box-sizing:border-box;border:1px solid #928d80;background-color:#78776f;background-image:url('./assets/through-the-shadows/match/metal-source.png');background-size:2376.786% 1086.487%;background-position:42.353% 75.525%;box-shadow:inset 1px 1px 0 #ebe5d6,inset -2px -2px 0 #48453b; }
.tts-tabletop-help { position:absolute;z-index:8;left:32%;bottom:.2%;margin:0;color:#f8e6b8;background:#061423c9;padding:3px 7px;border-radius:3px;font:11px/1.3 Arial,sans-serif;pointer-events:none; }
#tts-shell:not([data-view="home"]) :is(.tts-home-grid-aperture,.tts-tabletop-pieces,.tts-tabletop-help,.tts-home-cord-extension) { visibility:hidden; }
.tts-entry-world :is(.tts-home-grid-aperture,.tts-tabletop-pieces) { visibility:visible!important; }
.tts-entry-world .tts-tabletop-help { display:none; }
.tts-match-tabletop-extras { position:absolute;inset:0;z-index:10;pointer-events:none; }
.tts-match-tabletop-extras[hidden] { display:none!important; }
.tts-carried-piece { position:absolute;filter:drop-shadow(2px 4px 3px #0008);pointer-events:none; }
.tts-entry-board .tts-match-tabletop-extras { z-index:5; }

/* Poker-card proportions, with the full title anchored at the foot. */
.tts-home-card-deck { aspect-ratio:5 / 7;width:9.2%;top:25.5%; }
.tts-home-card-face { justify-content:space-between;padding:14% 10% 12%; }
.tts-home-card-face img { width:92%;height:59%;object-fit:contain; }
.tts-home-card-face strong { display:block!important;position:relative!important;font-size:clamp(10px,1vw,20px);line-height:.98;letter-spacing:0; }
.tts-home-cord-extension { position:absolute;z-index:1;left:94.25%;top:92.5%;width:4.5%;height:65svh;pointer-events:none;overflow:visible; }

/* Cards and Play share one viewport, rather than a footer below the fold. */
#tts-modes { box-sizing:border-box;overflow:hidden;padding:12px 24px; }
#tts-modes .tts-mode-shell { width:min(1500px,100%);height:calc(100svh - 24px);min-height:0;max-height:none;padding:0;grid-template-columns:minmax(0,1fr) clamp(230px,22vw,330px);grid-template-rows:auto minmax(0,1fr);gap:16px 28px; }
#tts-modes .tts-heading { grid-column:1 / -1; }
#tts-mode-grid { min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px 24px;align-items:center;justify-items:center; }
#tts-mode-grid .tts-mode-card { width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:680 / 874;align-self:center;container-type:inline-size; }
#tts-mode-grid .tts-card-copy { gap:4%;padding:4%; }
#tts-mode-grid .tts-card-copy strong { font-size:clamp(13px,8cqw,28px); }
#tts-mode-grid .tts-card-copy small { font-size:clamp(11px,6.8cqw,24px);line-height:1.22; }
#tts-mode-grid .tts-card-status { font-size:clamp(9px,4cqw,13px); }
#tts-modes .tts-mode-footer { align-self:center;display:flex;flex-direction:column;align-items:stretch;gap:24px;margin:0;padding:24px 20px;max-height:100%;overflow:auto;border:1px solid #b79a6070; }
#tts-modes .tts-mode-footer h3 { font-size:clamp(22px,2vw,32px); }
#tts-modes .tts-mode-footer p { font-size:clamp(15px,1.3vw,20px); }
#tts-modes .tts-mode-footer small { font-size:clamp(13px,1.1vw,17px); }
#tts-modes #tts-play { flex:none;width:100%;min-width:0; }
@media (max-width:900px) {
  #tts-modes { padding:8px; }
  #tts-modes .tts-mode-shell { height:calc(100svh - 16px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px; }
  #tts-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
  #tts-mode-grid .tts-mode-card { width:min(100%,calc((100svh - 250px) * .389));height:auto; }
  #tts-modes .tts-mode-footer { display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;padding:10px;align-self:stretch; }
  #tts-modes .tts-mode-footer h3 { font-size:18px; }
  #tts-modes .tts-mode-footer p { font-size:13px; }
  #tts-modes .tts-mode-footer small { font-size:11px; }
  #tts-modes .tts-heading h2 { font-size:clamp(17px,3.3vw,28px); }
}

/* Keep the turn readout and every mode's actions in normal document flow. */
#battle-screen.tts-match .tts-rail-instruments { height:auto;min-height:0;flex:none; }
#battle-screen.tts-match :is(.tts-deployment-instruments,.tts-combat-instruments) { position:relative;inset:auto;height:auto;justify-content:flex-start;gap:8px; }
#battle-screen.tts-match .tts-match-layout[data-phase="combat"] .tts-deployment-instruments,
#battle-screen.tts-match .tts-match-layout[data-phase="deployment"] .tts-combat-instruments { display:none; }
#battle-screen.tts-match .tts-turn-panel { flex:none;min-height:104px;height:auto;padding:8px 4px; }
#battle-screen.tts-match .tts-match-status-panel { flex:none; }
#battle-screen.tts-match .tts-match-rail { overflow-y:auto;overflow-x:hidden;padding:3px 2px!important;scroll-padding-top:4px; }
#battle-screen.tts-match #blind-luck-fire.blind-luck-auto-start { --plaque-height:112px;--plaque-type-ratio:.2;position:absolute!important;left:50%!important;top:50%!important;z-index:40!important;width:min(420px,72%)!important;height:112px!important;min-height:112px!important;margin:0!important;padding:16px 28px!important;transform:translate(-50%,-50%)!important;display:grid!important;place-content:center!important;gap:5px!important;text-align:center!important;white-space:normal!important;box-shadow:0 18px 40px #00101fcc,0 0 0 3px #e6bf60,0 0 35px #58d9ff99!important; }
#battle-screen.tts-match #blind-luck-fire.blind-luck-auto-start[hidden] { display:none!important; }
#battle-screen.tts-match #blind-luck-fire.blind-luck-auto-start span { display:block;font:700 12px/1.1 Georgia,"Times New Roman",serif!important;letter-spacing:.24em!important;color:#e7c777!important; }
#battle-screen.tts-match #blind-luck-fire.blind-luck-auto-start strong { display:block;font:700 clamp(18px,2vw,28px)/1.05 Georgia,"Times New Roman",serif!important;letter-spacing:0!important;color:#f9d77f!important; }
#battle-screen.tts-match #blind-luck-fire.blind-luck-auto-start small { display:block;font:700 12px/1.1 Georgia,"Times New Roman",serif!important;letter-spacing:.06em!important;color:#dceeff!important;text-shadow:0 2px 2px #000!important; }
#battle-screen.tts-match .tts-own-panel .mini-map { max-width:min(100%,calc(27svh * 1.2))!important;margin-inline:auto!important; }
#battle-screen.tts-match .tts-placement-banner { min-height:80px;padding:10px; }
@media(max-height:800px) {
  #battle-screen.tts-match .tts-own-panel .mini-map { max-width:min(100%,calc(23svh * 1.2))!important; }
  #battle-screen.tts-match .tts-turn-panel { min-height:90px;gap:3px; }
  #battle-screen.tts-match .tts-turn-actor { font-size:19px; }
  #battle-screen.tts-match .tts-enemy-card { height:32px; }
  #battle-screen.tts-match .tts-match-rail { gap:5px; }
}

/* Draw grid lines on their own layer below the solid ship artwork. Target
   buttons and shot feedback remain above it and keep their existing hit areas. */
#battle-screen.tts-match #board-plane .board-surface::after { content:'';display:block!important;position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#79e8ff9c 1px,transparent 1px),linear-gradient(#79e8ff9c 1px,transparent 1px);background-size:calc(100% / 24) calc(100% / 20);box-shadow:none;border:0;opacity:1; }
#battle-screen.tts-match #target-grid .target-cell { border:0!important; }
#battle-screen.tts-match #mini-grid { z-index:auto!important;background:linear-gradient(90deg,#65cbef66 1px,transparent 1px),linear-gradient(#65cbef66 1px,transparent 1px);background-size:calc(100% / 24) calc(100% / 20); }
#battle-screen.tts-match #mini-grid .mini-cell { border:0!important;box-shadow:none; }
#battle-screen.tts-match #mini-formation-layer { z-index:3!important;pointer-events:none; }
#battle-screen.tts-match #mini-grid .mini-cell.is-hit { position:relative;z-index:4; }