/* The physical card deck on the home tabletop opens a complete, self-contained game of War. */
.tts-war-deck { left: 53.35%; top: 16.3%; width: 12.4%; height: 23.3%; transform: rotate(-7deg); border-radius: 12px; z-index: 2; }
.tts-war-deck span { position: absolute; left: 7%; right: 7%; bottom: -11%; padding: 7px 3px; border: 1px solid #d8ad54; border-radius: 5px; background: #06182eef; color: #ffe197; box-shadow: 0 4px 14px #0009, inset 0 0 0 2px #17304a; font: 800 clamp(12px, 1.25vw, 21px)/1 Georgia, serif; letter-spacing: .05em; opacity: 0; transform: rotate(7deg) translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.tts-war-deck:hover span, .tts-war-deck:focus-visible span { opacity: 1; transform: rotate(7deg) translateY(0); }
.tts-war-deck:hover { box-shadow: inset 0 0 30px #ffd97930, 0 0 22px #ffd97955; }

.tts-war-dialog { width: min(960px, calc(100vw - 24px)); max-width: none; height: min(720px, calc(100svh - 20px)); max-height: none; padding: 8px; overflow: hidden; border: 2px solid #7f5b28; border-radius: 18px; background: #56351f url('./assets/through-the-shadows/match/tabletop-wood.jpg') center / cover; color: #f8e8bb; box-shadow: 0 28px 100px #000e, inset 0 0 0 3px #c89a4b; font-family: Georgia, 'Times New Roman', serif; }
.tts-war-dialog:focus { outline: none; }
.tts-war-dialog::backdrop { background: #02070dcc; backdrop-filter: blur(3px); }
.tts-war-cabinet { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 7px; padding: 10px; border: 1px solid #deb85e; border-radius: 11px; background: linear-gradient(145deg, #0a2135f7, #04121ff7); box-shadow: inset 0 0 28px #000b; }
.tts-war-header { min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #b99047; text-align: center; }
.tts-war-header > div { grid-column: 2; }
.tts-war-header p { margin: 0; color: #d9bd76; font: 400 11px/1.1 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.tts-war-header h2 { margin: 1px 0 4px; color: #ffe099; font-family: "Black Ops One", "Arial Narrow", sans-serif !important; font-size: clamp(28px, 4svh, 42px) !important; font-weight: 400 !important; line-height: .9; letter-spacing: .1em; text-indent: .1em; text-shadow: 0 2px #000, 0 0 12px #eebd4c44; }
.tts-war-close { --plaque-height: 44px; --plaque-type-ratio: .65; grid-column: 3; justify-self: end; width: 74px !important; min-width: 74px !important; padding: 0 !important; }
.tts-war-dialog button:focus-visible, .tts-war-rules summary:focus-visible { outline: 3px solid #fff2a8; outline-offset: 2px; }

.tts-war-scoreboard { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: stretch; gap: 7px; text-align: center; }
.tts-war-scoreboard > div { min-height: 50px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 4px 14px; border: 1px solid #a98542; border-radius: 5px; background: linear-gradient(#0a2236, #051523); box-shadow: inset 0 0 0 2px #17344a, inset 0 0 18px #0008; }
.tts-war-scoreboard span { color: #e4ca87; font: 400 13px/1.1 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .055em; }
.tts-war-scoreboard strong { color: #aefd8a; font: 800 26px/1 ui-monospace, Consolas, monospace; text-shadow: 0 0 8px #62f13f66; }
.tts-war-scoreboard .tts-war-rounds { grid-template-columns: 1fr auto; }
.tts-war-rounds small { grid-column: 1 / -1; margin-top: -7px; color: #b7c8cf; font: 400 10px/1 "Black Ops One", "Arial Narrow", sans-serif; text-transform: uppercase; }

.tts-war-felt { min-height: 0; display: grid; grid-template-columns: 1fr minmax(128px, .55fr) 1fr; align-items: center; gap: 10px; padding: 12px clamp(12px, 3vw, 34px); overflow: hidden; border: 2px solid #b78e45; border-radius: 10px; background-image: linear-gradient(#4f98b51f 1px, transparent 1px), linear-gradient(90deg, #4f98b51f 1px, transparent 1px), radial-gradient(circle at 50% 45%, #145778, #0a3754 58%, #06243b); background-size: 32px 32px, 32px 32px, auto; box-shadow: inset 0 0 45px #0008, 0 2px 0 #000; }
.tts-war-hand { min-width: 0; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 24px); }
.tts-war-card, .tts-war-card-slot, .tts-war-card-face { width: clamp(112px, 16svh, 154px); aspect-ratio: 5 / 7; box-sizing: border-box; border-radius: clamp(5px, .8svh, 8px); }
.tts-war-card { flex: 0 0 auto; position: relative; border: 2px solid #d1aa58; background: linear-gradient(145deg, #143751, #06192d 66%, #041322); box-shadow: -3px -3px 0 #0c2942, -4px -4px 0 #b98f43, -7px -6px 0 #092039, -8px -7px 0 #9e7838, 0 7px 14px #000b, inset 0 0 0 2px #06111c, inset 0 0 0 4px #b98f43; }
.tts-war-card::before { content: ''; position: absolute; inset: 6%; border: 1px solid #d1aa58; border-radius: 4px; background-image: url('./assets/through-the-shadows/match/ghost-v25.png'), url('./assets/through-the-shadows/match/title-v25.png'), linear-gradient(155deg, #12334d, #06182c 72%); background-position: center 12%, center 69%, center; background-size: 78% auto, 86% auto, 100% 100%; background-repeat: no-repeat; box-shadow: inset 0 0 18px #000b, 0 0 0 2px #06111c, 0 0 0 3px #b78d42; }
.tts-war-card::after { content: 'THROUGH THE SHADOWS'; position: absolute; z-index: 2; left: 12%; right: 12%; bottom: 7%; color: #f0bd58; text-align: center; font: 400 clamp(7px, 1svh, 10px)/1.05 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .025em; text-shadow: 0 1px #000, 0 0 4px #000; }
.tts-war-card > i { position: absolute; z-index: 1; inset: 9%; border: 1px solid #5d728055; border-radius: 3px; pointer-events: none; }
.tts-war-card-slot { flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #b28d4c; color: #d8c78bb3; background: linear-gradient(#0b3853aa, #06263daa); box-shadow: inset 0 0 0 2px #173d55, inset 0 0 22px #0007; font: 400 13px/1 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .12em; }
.tts-war-card-face { position: relative; display: block; overflow: hidden; border: 2px solid #c49b4e; background: radial-gradient(circle at 50% 42%, #fffef7, #eee3c8 70%, #d6c39a); color: #0c253b; box-shadow: 0 7px 17px #000a, inset 0 0 0 2px #fff8dd, inset 0 0 0 5px #9e7b3d55; }
.tts-war-card-face.is-red { color: #a5141d; }
.tts-war-card-face > strong { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(52px, 9svh, 88px)/1 Georgia, serif; text-shadow: 0 1px #fff8de, 0 2px 1px #765a2f33; }
.tts-war-corner { position: absolute; z-index: 1; top: 7px; left: 8px; display: grid; text-align: center; }
.tts-war-corner b { font: 800 clamp(18px, 2.8svh, 28px)/.9 Georgia, serif; }
.tts-war-corner i { font: normal clamp(15px, 2.2svh, 22px)/1 Georgia, serif; }
.tts-war-corner-bottom { top: auto; left: auto; right: 8px; bottom: 7px; transform: rotate(180deg); }
.tts-war-center { min-width: 0; display: grid; place-items: center; gap: 7px; text-align: center; }
.tts-war-center span { color: #d9bb72; font: 400 clamp(10px, 1.5svh, 13px)/1.2 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .06em; }
.tts-war-center strong { color: #fff0b0; font: 400 clamp(15px, 2.5svh, 24px)/1.15 "Black Ops One", "Arial Narrow", sans-serif; text-shadow: 0 2px #000; }
.tts-war-dialog.is-dealing .tts-war-card-face { animation: tts-war-turn .28s ease-out both; }
@keyframes tts-war-turn { from { opacity: .2; transform: translateY(-12px) rotateY(75deg); } to { opacity: 1; transform: none; } }

.tts-war-status { min-height: 20px; margin: 0; color: #f4ead0; text-align: center; font: 700 14px/1.3 Georgia, "Times New Roman", serif; }
.tts-war-actions { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 9px; }
.tts-war-actions .tts-plaque-button { --plaque-height: 56px; --plaque-type-ratio: .43; width: 100% !important; min-width: 0 !important; padding: 0 24px !important; }
.tts-war-actions .tts-war-primary { --plaque-type-ratio: .46; color: #fff1b9 !important; }
.tts-war-rules { color: #c9d5da; font: 13px/1.35 Georgia, "Times New Roman", serif; }
.tts-war-rules summary { width: max-content; margin: 0 auto; color: #dfc47f; cursor: pointer; font: 400 12px/1.2 "Black Ops One", "Arial Narrow", sans-serif; letter-spacing: .055em; }
.tts-war-rules p { max-width: 740px; margin: 5px auto 0; text-align: center; }

@media (max-width: 760px) {
  .tts-war-dialog { width: calc(100vw - 12px); height: calc(100svh - 12px); padding: 5px; }
  .tts-war-cabinet { gap: 5px; padding: 7px; }
  .tts-war-scoreboard > div { min-height: 43px; padding: 3px 7px; }
  .tts-war-scoreboard span { font-size: 10px; }
  .tts-war-scoreboard strong { font-size: 21px; }
  .tts-war-felt { grid-template-columns: 1fr 86px 1fr; padding: 8px; }
  .tts-war-hand { gap: 5px; }
  .tts-war-card, .tts-war-card-slot, .tts-war-card-face { width: clamp(78px, 17vw, 116px); }
  .tts-war-card-back { display: none; }
  .tts-war-actions .tts-plaque-button { --plaque-height: 48px; --plaque-type-ratio: .4; padding-inline: 15px !important; }
}

@media (max-height: 620px) {
  .tts-war-dialog { height: calc(100svh - 8px); padding: 4px; }
  .tts-war-header { min-height: 39px; }
  .tts-war-header p, .tts-war-rules { display: none; }
  .tts-war-header h2 { font-size: 27px; }
  .tts-war-close { --plaque-height: 38px; width: 66px !important; min-width: 66px !important; }
  .tts-war-scoreboard > div { min-height: 39px; }
  .tts-war-card, .tts-war-card-slot, .tts-war-card-face { width: clamp(82px, 20svh, 118px); }
  .tts-war-actions .tts-plaque-button { --plaque-height: 44px; --plaque-type-ratio: .39; }
}

@media (prefers-reduced-motion: reduce) {
  .tts-war-deck span { transition: none; }
  .tts-war-dialog.is-dealing .tts-war-card-face { animation: none; }
}