/* Short, quiet motion; illustrated scenes retain a complete static state. */
.fx-art { width: min(100%, 320px); height: clamp(90px, 20vmin, 190px); margin: 0 auto 4px; pointer-events: none; }
.fx-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-art svg g { transform-box: fill-box; transform-origin: center; }
.swal2-popup:has(.fx-art) { width: min(580px,92vw); max-height: 94vh; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%,#23423955,transparent 65%),linear-gradient(145deg,#162d42,#102139); color: #eaf0ee; border: 1px solid #aa946477; border-radius: 22px; box-shadow: 0 20px 65px #0009,inset 0 1px #ffffff14; }
.swal2-popup:has(.fx-art) > .swal2-icon { display: none !important; }
.swal2-popup:has(.fx-art) .swal2-title { color: #f3dfb5; font-size: clamp(22px,3vmin,32px); padding-top: 24px; }
.swal2-popup:has(.fx-art) .swal2-html-container { color: #e2eceb; line-height: 1.5; margin-top: 8px; }
.swal2-popup:has(.fx-art) .swal2-confirm { border-radius: 10px; min-width: 100px; }
.fx-rise { animation: fx-rise .75s cubic-bezier(.2,.8,.2,1) both; }
.fx-flag { transform-origin: left !important; animation: fx-flag .85s .12s cubic-bezier(.2,.8,.3,1) both; }
.fx-stamp { animation: fx-stamp .55s .45s cubic-bezier(.2,.9,.3,1) both; }
.fx-building { animation: fx-construct .8s cubic-bezier(.2,.7,.2,1) both; transform-origin: bottom !important; }
.fx-roof { animation: fx-roof .85s .08s cubic-bezier(.15,.7,.2,1) both; }
.fx-crane { animation: fx-crane 1.25s ease-in-out both; transform-origin: bottom left !important; }
.fx-sparks { animation: fx-spark 1.1s .22s ease-out both; }
.fx-paper { animation: fx-paper .7s cubic-bezier(.2,.8,.2,1) both; }
.fx-gavel { transform-origin: 90% 90% !important; animation: fx-gavel .95s cubic-bezier(.3,.4,.2,1) both; }
.fx-impact { animation: fx-spark .8s .4s ease-out both; }
.fx-tree { transform-origin: bottom !important; animation: fx-tree 1s cubic-bezier(.2,.8,.2,1) both; }
.fx-medal { animation: fx-rise .7s .35s ease-out both; }
.fx-letter { animation: fx-letter 1.1s cubic-bezier(.2,.7,.2,1) both; }
.fx-envelope-flap { transform-origin: bottom !important; animation: fx-envelope .65s ease-out both; }
.fx-needle { animation: fx-needle 1.25s cubic-bezier(.2,.8,.2,1) both; }
.fx-lens { animation: fx-lens 1.2s cubic-bezier(.2,.6,.2,1) both; }
.fx-hand-left { animation: fx-hand-left .9s cubic-bezier(.2,.8,.2,1) both; }
.fx-hand-right { animation: fx-hand-right .9s cubic-bezier(.2,.8,.2,1) both; }
.fx-coin-one { animation: fx-rise .65s .08s ease-out both; }
.fx-coin-two { animation: fx-rise .65s .18s ease-out both; }
.fx-coin-three { animation: fx-rise .65s .28s ease-out both; }
.fx-trophy { animation: fx-trophy 1s cubic-bezier(.2,.8,.2,1) both; }
.fx-rays { animation: fx-rays 1.2s ease-out both; transform-origin: center bottom !important; }
.fx-podium-pawn { animation: fx-rise .9s var(--fx-delay, 0ms) cubic-bezier(.2,.8,.2,1) both; }
.fx-stage { position: fixed; right: 16px; top: 16px; width: clamp(200px, 22vw, 300px); z-index: 95; pointer-events: none; background: linear-gradient(145deg,#142c41f5,#0d1d2fee); border: 1px solid #90ac9170; border-radius: 20px; box-shadow: 0 12px 32px #0005, inset 0 1px #ffffff12; padding: 4px 12px 12px; text-align: center; animation: fx-stage 1.85s ease both; }
.fx-stage .fx-art { height: 145px; }
.fx-stage > span { font-size: clamp(12px,1.6vmin,18px); color: #f2dfb5; font-weight: 600; }
.fx-flying-coin { position: fixed; z-index: 1100; min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #fff1b8; color: #704d20; background: linear-gradient(140deg,#fff0be,#e4b864 55%,#bd8b41); box-shadow: 0 3px 8px #0004, inset 0 0 0 3px #fff7d344; pointer-events: none; font-size: 12px; font-weight: 800; }
.fx-final-board { box-shadow: 0 0 28px #e8bd6540, inset 0 0 30px #e8bd6530 !important; }
.fx-final-modal .question-banner { border-bottom-color: #eac478; background-image: linear-gradient(110deg,#263b41,#48382d); }
.fx-final-modal h1 { animation: fx-final-title .75s ease-out both; }
.fx-winner .result-trophy { animation: fx-trophy 1s cubic-bezier(.2,.8,.2,1) both; }
.fx-winner .result-row { animation: fx-rise .6s ease-out both; }
.fx-winner .result-row:nth-child(2) { animation-delay: .08s; }
.fx-winner .result-row:nth-child(3) { animation-delay: .16s; }
.fx-winner .result-row:nth-child(4) { animation-delay: .24s; }
.fx-podium { margin: 0 auto; }
.fx-podium .fx-art { height: 130px; }
.question-team .team-emblem { position: relative; }
.fx-sigil { position: absolute; inset: -6px; z-index: 1; border-radius: 10px; background: #102739; pointer-events: none; }
.fx-sigil .fx-art { width: 100%; height: 100%; margin: 0; }
.effects-toggle { position: fixed; left: max(8px,env(safe-area-inset-left)); bottom: max(8px,env(safe-area-inset-bottom)); z-index: 90; padding: 8px 12px; border: 1px solid #647d90; border-radius: 9px; background: #102139ed; color: #e4edf1; font: 600 12px Outfit,sans-serif; cursor: pointer; display: none; }
body:has(#smartboard-frame[style*="flex"]) .effects-toggle { display: block; }
.effects-toggle:focus-visible { outline: 3px solid #f1ce89; outline-offset: 3px; }
.effects-disabled .fx-art *, .effects-disabled .fx-winner *, .effects-disabled .fx-final-modal h1 { animation: none !important; }
.effects-disabled .dice.is-rolling { animation: none !important; }
.effects-disabled .pawn-indicator { transition: none !important; }
@media (min-height:601px) {
  .game-results:has(.fx-podium svg) .result-trophy { display: none; }
  .fx-podium .fx-art { height: 25vmin; width: 40vmin; max-width: 100%; }
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fx-flag { from { opacity: 0; transform: scaleX(.05); } to { opacity: 1; transform: scaleX(1); } }
@keyframes fx-stamp { 0% { opacity: 0; transform: translateY(-26px) rotate(-8deg) scale(1.15); } 65% { opacity: 1; transform: translateY(2px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes fx-construct { from { opacity: .25; transform: scaleY(.05); } to { opacity: 1; transform: scaleY(1); } }
@keyframes fx-roof { 0% { opacity: 0; transform: translateY(-25px); } 35% { opacity: 1; } 80% { transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fx-crane { 0% { opacity: 0; transform: translateX(-12px); } 20%,70% { opacity: 1; transform: translateX(0); } 100% { opacity: .45; transform: translateX(-3px); } }
@keyframes fx-spark { 0% { opacity: 0; transform: scale(.65); } 45% { opacity: 1; transform: scale(1.1); } 100% { opacity: .55; transform: scale(1); } }
@keyframes fx-paper { from { opacity: 0; transform: translateX(18px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes fx-gavel { 0%,15% { transform: rotate(-26deg); } 48% { transform: rotate(8deg); } 65% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@keyframes fx-tree { 0% { opacity: 0; transform: scale(.15); } 75% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-letter { 0% { transform: translateY(40px); } 55% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
@keyframes fx-envelope { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
@keyframes fx-needle { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
@keyframes fx-lens { 0% { opacity: 0; transform: translate(24px,12px) rotate(10deg); } 50% { opacity: 1; transform: translate(-7px,0) rotate(-4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fx-hand-left { 0% { opacity: 0; transform: translateX(-35px); } 70% { opacity: 1; transform: translateX(2px); } 100% { opacity: 1; transform: none; } }
@keyframes fx-hand-right { 0% { opacity: 0; transform: translateX(35px); } 70% { opacity: 1; transform: translateX(-2px); } 100% { opacity: 1; transform: none; } }
@keyframes fx-trophy { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fx-rays { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-stage { 0% { opacity: 0; transform: translateY(-8px); } 14%,78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes fx-final-title { from { opacity: .4; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (orientation:landscape) and (max-height:600px) {
  .swal2-popup:has(.fx-art) { border-radius: 14px; padding-bottom: 10px; }
  .swal2-popup:has(.fx-art) .swal2-title { padding-top: 12px; font-size: 19px; }
  .swal2-popup:has(.fx-art) .swal2-html-container { font-size: 14px; margin: 6px 12px 0; }
  .swal2-popup:has(.fx-art) .swal2-actions { margin-top: 10px; }
  .fx-art { height: min(21vh,95px); margin-bottom: 0; }
  .fx-stage { top: 6px; right: 6px; width: 170px; padding: 2px 6px 7px; border-radius: 12px; }
  .fx-stage .fx-art { height: 82px; }
  .fx-stage > span { font-size: 11px; }
  .fx-podium { display: none; }
  .effects-toggle { padding: 5px 8px; font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .fx-art *, .fx-winner *, .fx-final-modal h1 { animation: none !important; }
  .fx-stage, .fx-flying-coin { display: none; }
}

/* Estate scenes: one shared material palette, staged construction, no input layer. */
.fx-estate { position: relative; width: min(100%, 390px); height: clamp(165px, 27vmin, 240px); margin: 4px auto 12px; background: radial-gradient(ellipse at 50% 62%, #6d997c19, transparent 65%); }
.fx-estate::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, #d4b57470, transparent); }
.fx-estate svg { overflow: hidden; }
.swal2-popup:has(.fx-estate) { background: radial-gradient(ellipse at 50% 22%, #35625835, transparent 65%), linear-gradient(150deg, #193348, #0b1b2b 85%); border-color: #bc9e616e; box-shadow: 0 24px 85px #000a, inset 0 1px #ffefd52b, inset 0 -1px #b08e4c33; }
.swal2-popup:has(.fx-estate) .swal2-title { letter-spacing: .025em; }
.swal2-popup:has(.fx-estate) .swal2-confirm { background: linear-gradient(145deg, #e9cd8b, #bb914c) !important; color: #172c34 !important; box-shadow: 0 3px 0 #795d31, inset 0 1px #fff1c8; border-radius: 9px; font-weight: 800; }
.estate-document-title { font: 800 11px Outfit, sans-serif; letter-spacing: 3px; }
.estate-receipt-label { fill: #c8bb96; font: 600 6px Outfit, sans-serif; letter-spacing: .7px; }
.estate-receipt-amount { fill: #f5dfa9; font: 800 12px Outfit, sans-serif; }
.estate-foundation { animation: estate-foundation .55s cubic-bezier(.16,1,.3,1) both; }
.estate-boundary, .estate-network { stroke-dasharray: 100; animation: estate-trace .85s .12s ease-out both; }
.estate-flagpole { animation: estate-emerge .7s .22s cubic-bezier(.16,1,.3,1) both; }
.estate-banner { transform-origin: left !important; animation: fx-flag .7s .5s cubic-bezier(.16,1,.3,1) both; }
.estate-deed { animation: estate-deed .85s cubic-bezier(.16,1,.3,1) both; }
.estate-seal { animation: estate-seal .52s .64s cubic-bezier(.22,.9,.28,1) both; }
.estate-lower-floor { transform-origin: bottom !important; animation: estate-floor .7s .15s cubic-bezier(.16,1,.3,1) both; }
.estate-upper-floor { transform-origin: bottom !important; animation: estate-floor .7s .4s cubic-bezier(.16,1,.3,1) both; }
.estate-roof { animation: estate-roof .75s .46s cubic-bezier(.16,1,.3,1) both; }
.estate-window { fill: #f7d58a; animation: estate-window .6s var(--estate-delay, 950ms) ease-out both; }
.estate-crane { opacity: 0; animation: estate-crane 1.65s ease both; }
.estate-scaffold { opacity: 0; animation: estate-scaffold 1.4s ease both; }
.estate-dust { opacity: 0; transform-origin: center !important; animation: estate-dust .8s .38s ease-out both; }
.estate-completion { animation: estate-completion .7s 1s ease-out both; }
.estate-glints { animation: estate-glints .9s .9s ease-out both; }
.estate-transfer-coin { transform: translate(var(--coin-x, 160px), var(--coin-y, 70px)); animation: estate-transfer 1s var(--estate-delay, 0ms) cubic-bezier(.25,.6,.4,1) both; }
.estate-money-route { animation: estate-route 1.5s ease both; }
.estate-vault-out { animation: estate-vault-out .8s ease both; }
.estate-vault-in { animation: estate-vault-in 1.2s .25s ease both; }
.estate-receipt { animation: estate-emerge .6s .35s cubic-bezier(.16,1,.3,1) both; }
.estate-set-plot { animation: estate-emerge .7s var(--estate-delay, 0ms) cubic-bezier(.16,1,.3,1) both; }
.estate-crest { animation: estate-seal .8s .5s cubic-bezier(.16,1,.3,1) both; }
.fx-property-halo { position: fixed; z-index: 94; border: 2px solid; border-radius: 5px; pointer-events: none; box-sizing: border-box; }
.owner-bar { border-radius: 2px 2px 5px 2px; background-image: linear-gradient(135deg, #ffffff66, transparent 55%, #00000022); }
.building-art { filter: drop-shadow(0 2px 1px #0005); }
.fx-amount-toast { position: fixed; z-index: 1101; pointer-events: none; white-space: nowrap; border: 1px solid #9ed9b966; border-radius: 20px; padding: 5px 10px; background: #112e2ff5; color: #a0edbc; font: 800 12px Outfit, sans-serif; box-shadow: 0 5px 16px #0006; }
.fx-amount-toast.is-outgoing { color: #ffd2bd; border-color: #df9d8366; background: #3c2529f5; }
.fx-flying-coin { width: auto; height: 26px; min-width: 26px; font-size: 11px; box-shadow: 0 4px 9px #0005, inset 0 0 0 3px #fff7d344, inset 0 -3px #9a6f3444; }
.effects-paused .fx-art *, .effects-paused .fx-stage { animation-play-state: paused !important; }
.effects-disabled .estate-crane, .effects-disabled .estate-scaffold, .effects-disabled .estate-dust { opacity: 0; }
@keyframes estate-foundation { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes estate-trace { from { stroke-dashoffset: 100; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes estate-emerge { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes estate-deed { from { opacity: 0; transform: translate(16px,-24px) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes estate-seal { 0% { opacity: 0; transform: translateY(-22px) scale(1.22); } 60% { opacity: 1; transform: translateY(2px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes estate-floor { from { opacity: 0; transform: scaleY(.08) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes estate-roof { 0% { opacity: 0; transform: translateY(-28px); } 55% { opacity: 1; } 80% { transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes estate-window { from { fill: #1a414b; } to { fill: #f7d58a; } }
@keyframes estate-crane { 0% { opacity: 0; transform: translateX(-15px); } 20%,68% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-12px); } }
@keyframes estate-scaffold { 0% { opacity: 0; } 25%,60% { opacity: .45; } 100% { opacity: 0; } }
@keyframes estate-dust { 0% { opacity: 0; transform: scale(.65); } 30% { opacity: .4; } 100% { opacity: 0; transform: scale(1.3) translateY(-4px); } }
@keyframes estate-completion { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .3; } }
@keyframes estate-glints { 0% { opacity: 0; transform: scale(.8); } 45% { opacity: 1; } 100% { opacity: .35; transform: none; } }
@keyframes estate-transfer { 0% { opacity: 0; transform: translate(72px,110px) scale(.6); } 15% { opacity: 1; } 50% { transform: translate(159px,57px) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(251px,110px) scale(.7); } }
@keyframes estate-route { from { opacity: .2; stroke-dashoffset: 24; } to { opacity: .6; stroke-dashoffset: 0; } }
@keyframes estate-vault-out { 30% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes estate-vault-in { 45% { filter: brightness(1.3); transform: translateY(-3px); } 100% { filter: brightness(1); transform: none; } }
@media (orientation: landscape) and (max-height: 600px) {
  .fx-estate { height: min(29vh, 114px); margin: 0 auto 4px; }
  .swal2-popup:has(.fx-estate) .swal2-title { font-size: 19px; padding-top: 10px; }
  .swal2-popup:has(.fx-estate) .swal2-html-container { font-size: 13px; line-height: 1.35; margin: 4px 12px 0; }
  .swal2-popup:has(.fx-estate) .swal2-actions { margin-top: 8px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .fx-estate { height: clamp(150px, 25vh, 220px); }
  .swal2-popup:has(.fx-estate) .swal2-title { font-size: 22px; padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .estate-crane, .estate-scaffold, .estate-dust { opacity: 0; }
}