/* War is an independent blue-and-white card game within The Card Table. */
.hub-war-live { cursor:pointer; }
.hub-war-live:hover,.hub-war-live:focus-visible { transform:translateY(-5px);border-color:#b7e2ff;box-shadow:0 21px 43px #010c25bf;outline:2px solid #c2eaff;outline-offset:2px; }
.hub-war-action { background:#d4ecff;color:#164b7a;box-shadow:0 3px 0 #7bafd8; }
.hub-war-live:hover .hub-war-action { background:#fff; }
.hub-war-live .hub-soon-tag { background:#316a99;color:#ecf9ff; }
.war-screen { position:fixed;inset:0;z-index:160;min-height:100dvh;overflow-y:auto;padding:18px 24px 42px;background:radial-gradient(ellipse at 75% 12%,#1a5790 0,transparent 48%),radial-gradient(ellipse at 4% 89%,#144778 0,transparent 43%),#071a34;color:#f1f9ff; }
.war-shell { max-width:1130px;width:100%;margin:auto; }
.war-header { height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #6397bc61;padding-bottom:16px; }
.war-header-brand { display:flex;gap:10px;align-items:center;font:850 12px Outfit,sans-serif;letter-spacing:.15em; }
.war-header-brand small { font-size:11px;color:#8fc9f6; }
.war-brand-mark { display:grid;place-items:center;width:35px;height:35px;border:1px solid #80b9ec;border-radius:10px;font-size:23px; }
.war-nav-button,.war-inline-back { background:#1445768c;border:1px solid #6099cd;border-radius:9px;padding:10px 15px;color:#d9f0ff;font:750 12px 'DM Sans',sans-serif; }
.war-nav-button:hover,.war-inline-back:hover { background:#235d91; }
.war-eyebrow { color:#91cff9;font-size:10px;letter-spacing:.17em;font-weight:900; }
.war-home { padding:28px 0 0; }
.war-home-hero { display:grid;grid-template-columns:1.14fr .86fr;gap:30px;align-items:center;min-height:320px; }
.war-home-copy h1 { font:900 clamp(48px,6.4vw,78px)/.99 Outfit,sans-serif;letter-spacing:-.055em;margin:22px 0 18px; }
.war-home-copy h1 em { color:#a8dafd;font-style:normal; }
.war-home-copy p { color:#c1dced;font-size:15px;line-height:1.7;max-width:490px;margin:0; }
.war-home-copy p strong { color:#fff; }
.war-home-pills { display:flex;gap:8px;flex-wrap:wrap;margin:23px 0 0; }
.war-home-pills span { border:1px solid #5083ac;color:#aacfeb;border-radius:20px;padding:8px 12px;font-size:9px;font-weight:850;letter-spacing:.12em; }
.war-hero-cards { min-height:270px;position:relative;display:grid;place-items:center; }
.war-hero-halo { width:290px;height:290px;border:1px dashed #aadfff6b;border-radius:50%;box-shadow:0 0 115px #63b5f842; }
.war-hero-card { position:absolute;top:51px;left:calc(50% - 62px);height:194px;width:137px;padding:13px;border-radius:13px;background:#fffefa;border:5px solid #fff;box-shadow:0 17px 27px #031a3aab;color:#144a76;font:900 35px Outfit,sans-serif; }
.war-hero-card i { display:block;font:normal 20px Georgia,serif; }
.war-hero-card b { position:absolute;top:73px;left:38px;font:normal 78px Georgia,serif; }
.war-hero-king { color:#db4f64;transform:translateX(-70px) rotate(-20deg); }
.war-hero-ace { transform:translateX(70px) rotate(18deg); }
.war-hero-spark { position:absolute;top:20px;left:calc(50% + 102px);font-size:51px;color:#d1efff; }
.war-mode-heading { margin:18px 0; }
.war-mode-heading>span { color:#91c3e9;font-size:9px;font-weight:850;letter-spacing:.18em; }
.war-mode-heading h2 { margin:7px 0 0;font:850 26px Outfit,sans-serif;letter-spacing:-.025em; }
.war-mode-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.war-mode-card { display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:220px;padding:27px;border:1px solid #6f9fc8;border-radius:18px;background:#154471db;color:#f0faff;transition:transform .2s,border-color .2s; }
.war-mode-card:hover { transform:translateY(-4px);border-color:#ecfaff; }
.war-mode-primary { background:linear-gradient(135deg,#eaf6ff,#b5deff);color:#0c3c6a;border-color:#a1d5fc; }
.war-mode-kicker { font-size:9px;font-weight:950;letter-spacing:.16em;color:#8dd0ff; }
.war-mode-primary .war-mode-kicker { color:#3477b6; }
.war-mode-card strong { font:900 clamp(28px,3vw,38px) Outfit,sans-serif;letter-spacing:-.04em;margin-top:15px; }
.war-mode-card p { font-size:12px;line-height:1.65;max-width:390px;color:#c3dceb;margin:9px 0 20px; }
.war-mode-primary p { color:#3d688a; }
.war-mode-cta { margin-top:auto;font-size:10px;font-weight:900;letter-spacing:.12em;border-bottom:1px solid currentColor;padding-bottom:4px; }
.war-mode-cta span { margin-left:12px; }
.war-lobby { max-width:555px;margin:45px auto 0;padding:33px;background:#102f53;border:1px solid #5b96c7;border-radius:23px;box-shadow:0 18px 55px #010b22a1; }
.war-lobby>.war-eyebrow { display:block;margin-top:33px; }
.war-lobby h2 { font:900 46px Outfit,sans-serif;letter-spacing:-.05em;margin:12px 0; }
.war-lobby>p:not(.war-error) { color:#b6d4e8;font-size:13px;line-height:1.6; }
.war-join-choices { margin-top:24px; }
.war-primary-btn { background:#c8e9ff;color:#104d7f;border:0;border-radius:10px;padding:15px 21px;font-size:12px;font-weight:900;letter-spacing:.07em;box-shadow:0 4px 0 #67a4d5; }
.war-primary-btn:hover { background:#fff; }
.war-primary-btn:disabled { cursor:default;opacity:.65; }
.war-join-choices>.war-primary-btn { width:100%; }
.war-join-divider { display:flex;align-items:center;gap:12px;margin:27px 0 15px;color:#9bc1df;font-size:9px;font-weight:900;letter-spacing:.16em; }
.war-join-divider::before,.war-join-divider::after { content:'';height:1px;flex:1;background:#4b789c; }
.war-code-row { display:flex;gap:9px;margin:10px 0; }
.war-code-row input { min-width:0;flex:1;background:#092747;color:#effaff;border:1px solid #6299c8;border-radius:9px;padding:13px;font-size:13px;font-weight:800;letter-spacing:.06em; }
.war-code-row button { padding:11px 14px;border:1px solid #89bfea;border-radius:9px;background:#285c88;color:#fff;font-size:12px;font-weight:800;white-space:nowrap; }
.war-code-row button:hover { background:#3876a6; }
.war-waiting { display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 0 0;gap:16px; }
.war-waiting-pulse { display:grid;place-items:center;border:1px solid #8cd1ff;border-radius:50%;width:75px;height:75px;font-size:48px;color:#caeaff;animation:war-breathe 2s ease-in-out infinite; }
.war-waiting strong { font:800 18px Outfit,sans-serif; }
.war-room-code { display:flex;align-items:center;gap:14px;letter-spacing:.18em;font-size:10px;color:#a6cce9; }
.war-room-code b { color:#fff;font:900 21px Outfit,sans-serif;letter-spacing:.2em; }
.war-waiting .war-code-row { width:100%; }
.war-waiting small { font-size:11px;color:#8fb4d2; }
.war-error { min-height:20px;color:#ffb7bb;font-size:12px;font-weight:750; }
.war-arena { padding:19px 0 35px; }
.war-arena-top { display:flex;justify-content:space-between;align-items:center;gap:15px; }
.war-arena-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:21px 0 14px; }
.war-arena-heading h2 { margin:5px 0;font:900 38px Outfit,sans-serif;letter-spacing:-.045em; }
.war-score-chips { display:flex;gap:10px; }
.war-score-chips span { display:flex;align-items:center;gap:11px;padding:9px 13px;border:1px solid #5b93be;border-radius:9px;background:#154475;font-size:10px;font-weight:850;color:#c0dfff;letter-spacing:.11em; }
.war-score-chips b { font:900 19px Outfit,sans-serif;color:#fff; }
.war-felt { position:relative;border:1px solid #78aad2;border-radius:19px;padding:26px 28px 22px;min-height:392px;background:radial-gradient(ellipse at 50% 46%,#285f94,#103b70 70%,#0a2e59 100%);box-shadow:inset 0 0 0 7px #0b3059,0 17px 36px #0310248a; }
.war-players { display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);align-items:center;gap:14px;max-width:770px;margin:0 auto; }
.war-player-side { display:flex;align-items:center;flex-direction:column;gap:7px; }
.war-seat-name { font-size:10px;font-weight:900;letter-spacing:.15em;color:#c8e9ff; }
.war-card-total { color:#adcee5;font-size:11px; }
.war-card-total b { font:900 26px Outfit,sans-serif;color:#fff; }
.war-playing-card { width:clamp(104px,16vw,152px);aspect-ratio:.72;position:relative;margin:7px auto 9px;border:5px solid white;border-radius:13px;background:#fffefa;color:#164576;box-shadow:0 6px 0 #bfd6e4,0 14px 26px #041c42a1;display:flex;flex-direction:column;padding:12px 15px; }
.war-playing-card .war-rank { font:900 clamp(25px,4vw,35px)/1 Outfit,sans-serif; }
.war-playing-card .war-corner-suit { font:normal 22px Georgia,serif; }
.war-playing-card .war-large-suit { font:normal clamp(48px,7vw,77px) Georgia,serif;align-self:center;margin:auto; }
.war-playing-card.is-red { color:#db5060; }
.war-playing-card.is-back { background:repeating-linear-gradient(40deg,#13467e 0 9px,#2c6bab 10px 18px);border-color:#d4e6f3;box-shadow:inset 0 0 0 6px #17497e,0 6px 0 #6a96be,0 14px 26px #041c42a1;color:#e7f6ff;align-items:center;justify-content:center; }
.war-card-center { font-size:61px;filter:drop-shadow(0 1px 6px #031d4c); }
.war-playing-card.is-revealed { animation:war-flip .62s ease-out both; }
.war-playing-card.is-dealing { animation:war-dealing 1.1s ease-in-out infinite alternate; }
.war-center-space { text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px; }
.war-versus { font:900 18px Outfit,sans-serif;letter-spacing:.25em;color:#a9d8f8; }
.war-center-diamond { border:1px solid #8fbee7;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#e5f5ff;font-size:27px; }
.war-center-space small { font-size:9px;letter-spacing:.12em;color:#b5daf2;line-height:1.5;font-weight:850; }
.war-ready-chip { font-size:10px;letter-spacing:.11em;font-weight:900;color:#ceeaff; }
.war-ready-chip.is-waiting { color:#fbd7a7; }
.war-stages { display:flex;gap:9px;align-items:stretch;justify-content:center;flex-wrap:wrap;margin:15px auto 10px; }
.war-stage { padding:9px 13px;border:1px solid #70a8d2;border-radius:9px;background:#062a519c;min-width:112px;text-align:center; }
.war-stage small { display:block;color:#a1cbed;font-size:9px;font-weight:800;letter-spacing:.12em; }
.war-stage strong { display:block;margin-top:5px;font:850 17px Outfit,sans-serif;color:#f2faff; }
.war-stage em { color:#ffd1a7;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.13em; }
.war-battle-message { min-height:25px;text-align:center;color:#e0f4ff;font:850 14px Outfit,sans-serif;letter-spacing:.05em;margin:17px 0 2px; }
.war-battle-message.is-war { color:#ffd5a6;text-shadow:0 0 16px #f6be885d;font-size:18px; }
.war-action-area { text-align:center;padding:19px 0; }
.war-action-area p { margin:0 0 15px;font-size:12px;color:#a9cee9; }
.war-action-buttons { display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap; }
.war-flip-btn { min-width:218px;font-size:13px; }
.war-auto-btn { min-width:168px;padding:15px 17px;border:1px solid #83bcdf;border-radius:10px;background:#123d6b;color:#d5edff;font-size:12px;font-weight:900;letter-spacing:.06em;box-shadow:0 4px 0 #082a4f; }
.war-auto-btn:hover,.war-auto-btn:focus-visible { background:#215c91;outline:2px solid #a5dbff;outline-offset:2px; }
.war-auto-btn.is-active { border-color:#bbebff;background:#3b82bc;color:#fff;box-shadow:0 4px 0 #164c7b,0 0 19px #58bcf54d; }
.war-result { display:flex;flex-direction:column;align-items:center;gap:13px;margin:0 auto 20px;padding:21px 25px;max-width:590px;border:1px solid #79bde8;border-radius:18px;background:linear-gradient(135deg,#174c7e,#092c55);box-shadow:0 13px 29px #0210249c;text-align:center; }
.war-result-icon { font-size:45px; }
.war-result h2 { font:900 36px Outfit,sans-serif;margin:0;letter-spacing:-.045em; }
.war-result p { font-size:12px;color:#c3e0f4;margin:0 0 8px; }
.war-result-buttons { display:flex;gap:11px;justify-content:center;flex-wrap:wrap; }
.war-secondary-btn { padding:14px 20px;border:1px solid #83bcdf;background:#124575;color:#fff;border-radius:9px;font-size:12px;font-weight:850; }
.war-rules-dialog { max-width:570px;max-height:calc(100dvh - 34px);overflow:auto; }
@keyframes war-flip { 0% { transform:perspective(650px) rotateY(90deg) translateY(-20px);opacity:.2; } 65% { transform:perspective(650px) rotateY(-8deg) translateY(-7px);opacity:1; } 100% { transform:rotateY(0) translateY(0); } }
@keyframes war-dealing { from { transform:translateX(-5px) rotate(-2deg); } to { transform:translateX(5px) rotate(2deg); } }
@keyframes war-breathe { 50% { transform:scale(1.08);box-shadow:0 0 28px #a8dfff6b; } }
@media(max-width:760px) {
  .war-home-hero { grid-template-columns:1fr;gap:8px; }
  .war-hero-cards { display:none; }
  .war-mode-grid { grid-template-columns:1fr; }
  .war-mode-card { min-height:173px; }
  .war-felt { padding:20px 10px; }
  .war-players { grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:3px; }
  .war-center-space small { font-size:7px; }
  .war-center-diamond { width:38px;height:38px; }
}
@media(max-width:560px) {
  .war-screen { padding:12px 14px 30px; }
  .war-header { gap:7px; }
  .war-header-brand { font-size:10px;letter-spacing:.04em; }
  .war-brand-mark { width:27px;height:27px;font-size:18px; }
  .war-nav-button,.war-inline-back { padding:8px 9px;font-size:10px; }
  .war-home-copy h1 { font-size:clamp(39px,11.5vw,62px); }
  .war-home-copy p { font-size:13px; }
  .war-lobby { padding:22px 17px;margin-top:25px; }
  .war-lobby h2 { font-size:37px; }
  .war-code-row button { padding:10px; }
  .war-arena-heading h2 { font-size:31px; }
  .war-score-chips { gap:5px; }
  .war-score-chips span { gap:5px;padding:7px;font-size:9px; }
  .war-score-chips b { font-size:14px; }
  .war-playing-card { width:clamp(95px,27vw,138px);border-width:4px;padding:8px; }
  .war-card-center { font-size:45px; }
  .war-versus { font-size:12px; }
  .war-seat-name { font-size:9px; }
  .war-battle-message { font-size:12px; }
  .war-action-buttons { gap:12px; }
  .war-auto-btn { min-width:175px; }
}
@media(prefers-reduced-motion:reduce){.war-playing-card,.war-waiting-pulse { animation:none !important; }.war-mode-card { transition:none; }}

/* A two-sided reveal keeps the value hidden until the card actually turns. */
.war-playing-card {perspective:900px;padding:0;border:0;background:transparent;box-shadow:none;isolation:isolate;}
button.war-playing-card {appearance:none;cursor:pointer;touch-action:manipulation;}
button.war-playing-card:disabled {cursor:default;opacity:1;}
button.war-playing-card:focus-visible {outline:3px solid #c7f3ff;outline-offset:7px;}
button.war-playing-card:not(:disabled):hover {filter:brightness(1.12);}
.war-playing-card.is-back {background:transparent;box-shadow:none;}
.war-flip-inner {display:block;position:absolute;inset:0;transform-style:preserve-3d;}
.war-flip-back,.war-flip-front {position:absolute;inset:0;display:flex;flex-direction:column;border:5px solid white;border-radius:13px;padding:12px 15px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 0 #bfd6e4,0 14px 26px #041c42a1;}
.war-flip-back {background:repeating-linear-gradient(40deg,#13467e 0 9px,#2c6bab 10px 18px);border-color:#d4e6f3;box-shadow:inset 0 0 0 6px #17497e,0 6px 0 #6a96be,0 14px 26px #041c42a1;color:#e7f6ff;align-items:center;justify-content:center;}
.war-flip-front {background:#fffefa;color:#164576;transform:rotateY(180deg);}
.war-flip-front.is-red {color:#db5060;}
.war-playing-card.is-turning .war-flip-inner {animation:war-full-flip .85s cubic-bezier(.35,0,.2,1) both;}
@keyframes war-full-flip {0%,15% {transform:translateY(0) rotateY(0);} 38% {transform:translateY(-12px) rotateY(65deg);} 72% {transform:translateY(-9px) rotateY(190deg);} 100% {transform:translateY(0) rotateY(180deg);}}
.war-playing-card.is-flip-winner .war-flip-front {border-color:#b3f5d1;box-shadow:0 0 0 3px #7de8b3,0 0 32px #6de7b199;transition:box-shadow .2s,border-color .2s;}
.war-flip-outcome {display:block;min-height:22px;margin:5px 0;color:#b3f5d1;font:900 12px Outfit,sans-serif;letter-spacing:.06em;opacity:0;}
.war-flip-outcome.is-visible {opacity:1;animation:war-win-pop .65s ease-out both;}
@keyframes war-win-pop {from {transform:translateY(8px) scale(.9);opacity:0;} to {transform:translateY(0) scale(1);opacity:1;}}
@media(max-width:600px) {.war-flip-back,.war-flip-front {border-width:4px;padding:8px;}}
@media(prefers-reduced-motion:reduce) {.war-playing-card.is-turning .war-flip-inner {animation:none;transform:rotateY(180deg);} .war-flip-outcome.is-visible {animation:none;}}

/* Two packets riffle together, bridge flat, then separate into the players' decks. */
.war-felt {position:relative;}
.war-shuffle {position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:radial-gradient(ellipse at center,#245f96,#123a65);border-radius:inherit;overflow:hidden;}
.war-shuffle-cards {position:relative;width:100%;height:260px;perspective:1000px;}
.war-shuffle-card {position:absolute;top:65px;left:calc(50% - 42px);width:84px;height:118px;border:2px solid #d4eaff;border-radius:8px;background:repeating-linear-gradient(40deg,#174c83 0 6px,#347eb5 7px 12px);display:grid;place-items:center;color:#e4f5ff;font:35px Georgia,serif;box-shadow:0 2px 2px #061d36aa;transform-style:preserve-3d;animation:war-riffle-deal 4.1s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--riffle-delay);}
.war-shuffle strong {font:900 13px Outfit,sans-serif;letter-spacing:.16em;color:#dcf6ff;}
.war-shuffle small {font-size:12px;color:#b3d7f1;padding:0 20px;text-align:center;}
@keyframes war-riffle-deal {
  0%,8% {transform:translate(calc(var(--stack) * .25px),calc(var(--stack) * -.5px));}
  24% {transform:translate(calc(var(--side) * 75px),calc(var(--stack) * -.6px)) rotate(calc(var(--side) * -14deg));}
  42% {transform:translate(calc(var(--side) * 24px),calc(var(--stack) * -.85px)) rotate(calc(var(--side) * 5deg));}
  54% {transform:translate(calc(var(--side) * 3px),calc(var(--stack) * -.65px));}
  67% {transform:translate(0,calc(-22px - var(--stack) * .5px)) rotateX(calc(30deg + var(--side) * 12deg));}
  79% {transform:translate(0,calc(var(--stack) * -.5px)) rotateX(0);}
  100% {transform:translate(var(--deal-x),var(--deal-y)) scale(var(--deal-scale-x),var(--deal-scale-y));}
}
.war-tribute {margin:20px 0 14px;padding:18px;border:1px solid #e9c97999;border-radius:14px;background:#07244280;}
.war-tribute-heading {text-align:center;}
.war-tribute-heading>span {font:900 12px Outfit,sans-serif;letter-spacing:.12em;color:#f6d994;}
.war-tribute-heading p {font-size:12px;line-height:1.6;color:#c8dff0;margin:8px 0 16px;}
.war-tribute-piles {display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:center;}
.war-tribute-piles small {font-size:9px;font-weight:800;letter-spacing:.08em;color:#bedcf1;}
.war-down-pile {position:relative;height:118px;max-width:200px;margin:12px auto;border:1px dashed #6c9cc0;border-radius:12px;background:#123e6455;}
.war-down-card {position:absolute;top:10px;left:calc(50% - 60px + var(--pile-index) * 28px);width:64px;height:88px;border:2px solid #c4e3fb;border-radius:7px;display:grid;place-items:center;color:#d5eaff;font:28px Georgia,serif;background:repeating-linear-gradient(40deg,#174c83 0 5px,#347eb5 6px 10px);box-shadow:0 3px 8px #061a36aa;animation:war-place-down .45s ease-out both;animation-delay:var(--pile-delay);}
@keyframes war-place-down {from {opacity:0;transform:translateY(-65px) rotate(-12deg);} to {opacity:1;transform:translateY(0) rotate(0);}}
#warPlaceBtn {font-size:10px;padding:10px 13px;min-height:40px;}
#warPlaceBtn:disabled {opacity:.6;cursor:default;}
@media(max-width:600px) {.war-tribute {padding:12px 8px;}.war-tribute-piles {gap:8px;}.war-down-card {width:48px;height:68px;left:calc(50% - 46px + var(--pile-index) * 22px);}.war-down-pile {height:92px;}.war-shuffle-cards {height:220px;}.war-shuffle strong {font-size:11px;}}
@media(prefers-reduced-motion:reduce) {.war-shuffle-card {animation:none;transform:translate(calc(var(--side) * 65px),calc(var(--stack) * -.5px));}.war-down-card {animation:none;}}

/* Land the shuffled packets on the real table cards, then crossfade in place. */
.war-shuffle {background:transparent;overflow:visible;transition:opacity .4s ease;pointer-events:none;}
.war-shuffle-card {transform-origin:top left;will-change:transform;}
.war-shuffle.is-finishing {opacity:0;}
.war-shuffle strong,.war-shuffle small {transition:opacity .4s ease;}
.is-shuffle-handoff .war-shuffle strong,.is-shuffle-handoff .war-shuffle small {opacity:0;}
.war-players,.war-stages,.war-battle-message {transition:opacity .4s ease;}
.is-shuffling .war-players,.is-shuffling .war-stages,.is-shuffling .war-battle-message {opacity:0;}
.is-shuffling.is-shuffle-handoff .war-players,.is-shuffling.is-shuffle-handoff .war-stages,.is-shuffling.is-shuffle-handoff .war-battle-message {opacity:1;}
.is-shuffling .war-playing-card.is-dealing {animation:none;}
.war-arena-tools {display:flex;align-items:center;gap:15px;flex-wrap:wrap;justify-content:flex-end;}
.war-restart-dialog {max-width:440px;width:calc(100% - 32px);border:1px solid #78aad2;border-radius:20px;background:#10365c;color:#ecf7ff;padding:28px;box-shadow:0 22px 70px #0008;}
.war-restart-dialog::backdrop {background:#03162aca;backdrop-filter:blur(5px);}
.war-restart-dialog h2 {font:900 30px Outfit,sans-serif;margin:15px 0;}
.war-restart-dialog p {font-size:14px;line-height:1.65;color:#c4dff0;}
.war-restart-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap;}
.war-restart-actions button {min-height:44px;}
@media(prefers-reduced-motion:reduce) {.war-shuffle,.war-players,.war-stages,.war-battle-message {transition:none;}}

/* Stable table slots: changing labels and adding tied stages never reflows play. */
.war-players {min-height:340px;}
.war-stages {height:76px;min-height:76px;max-height:76px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:2px 0;scrollbar-width:thin;}
.war-stage {box-sizing:border-box;flex:0 0 158px;width:158px;height:66px;min-width:158px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.war-stage:first-child {margin-left:auto;}.war-stage:last-child {margin-right:auto;}
.war-stage strong {white-space:nowrap;}
.war-battle-message,.war-battle-message.is-war {height:56px;min-height:56px;max-height:56px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.5;overflow:hidden;}
.war-center-space small {min-height:28px;display:grid;place-items:center;}
.war-action-area p {height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1.5;}
.war-flip-btn {width:260px;max-width:100%;height:52px;min-height:52px;padding:8px 12px;line-height:1.3;}
.war-tribute {box-sizing:border-box;height:244px;min-height:244px;max-height:244px;padding:12px 14px;overflow:hidden;}
.war-tribute.is-inactive {opacity:.3;pointer-events:none;}
.war-tribute-heading p {height:36px;min-height:36px;max-height:36px;margin:5px 0 8px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1.5;}
.war-down-pile {height:86px;margin:8px auto;}
.war-down-card {height:66px;width:48px;left:calc(50% - 48px + var(--pile-index) * 24px);font-size:23px;}
#warPlaceBtn {height:40px;min-height:40px;max-width:100%;}
.war-collection {position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:inherit;}
.war-collection-cards {position:absolute;inset:0;}
.war-collect-card {position:absolute;left:var(--collect-x);top:var(--collect-y);width:56px;height:78px;border:2px solid #d7edff;border-radius:7px;color:#d7efff;display:grid;place-items:center;font:28px Georgia,serif;background:repeating-linear-gradient(40deg,#174c83 0 5px,#347eb5 6px 10px);box-shadow:0 5px 12px #03162988;animation:war-sweep-pile .85s cubic-bezier(.3,.02,.15,1) both;animation-delay:var(--collect-delay);}
@keyframes war-sweep-pile {0% {opacity:1;transform:translate(0,0) rotate(var(--collect-rotate));} 30% {opacity:1;transform:translate(0,-28px) rotate(0);} 85% {opacity:1;transform:translate(var(--collect-dx),var(--collect-dy)) scale(.7);} 100% {opacity:0;transform:translate(var(--collect-dx),var(--collect-dy)) scale(.45);}}
.war-collection-reward {position:absolute;left:50%;top:45%;width:min(320px,85%);transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;padding:22px 16px;border:1px solid #f6db8f;border-radius:16px;background:#082b4eea;color:#ffe5a0;box-shadow:0 0 44px #f1cd5d55;animation:war-grand-prize 1.6s ease both;}
.war-collection-reward strong {font:900 15px Outfit,sans-serif;letter-spacing:.06em;}
.war-collection-reward span {font:900 36px Outfit,sans-serif;}
@keyframes war-grand-prize {0%,20% {opacity:0;transform:translate(-50%,-40%) scale(.85);} 45%,100% {opacity:1;transform:translate(-50%,-50%) scale(1);}}
.is-collecting .war-playing-card,.is-collecting .war-down-card {opacity:0;transition:opacity .2s .1s;}
@media(max-width:600px) {.war-players {min-height:280px;}.war-tribute {height:260px;min-height:260px;max-height:260px;padding:12px 8px;}.war-battle-message,.war-battle-message.is-war {font-size:12px;}.war-stage {flex-basis:146px;width:146px;min-width:146px;}.war-collection-reward span {font-size:30px;}}
@media(prefers-reduced-motion:reduce) {.war-collect-card {animation:none;opacity:0;}.war-collection-reward {animation:none;}.is-collecting .war-playing-card,.is-collecting .war-down-card {transition:none;}}