/* Quiet woven botanicals, with all play surfaces above the non-interactive pattern. */
@media screen {
  .is-playing .mahjong-table {
    background-image: radial-gradient(ellipse at 42% 28%, #61947a24, transparent 72%), url("mat-botanicals.svg"), repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, #00000003 0 1px, transparent 1px 3px);
    background-size: auto, 360px 360px, auto, auto;
    background-color: #164b3f;
  }
  .is-playing .hand-result { bottom: auto; max-height: calc(100dvh - var(--dock-height) - 78px); padding: 0; border: 1px solid #c8b37f; border-radius: 16px; background: #fffaf0; box-shadow: 0 16px 55px #03291f80, 0 0 0 5px #e5c98a22; }
  .hand-result .hand-result-grid { padding: 1rem 1.2rem; }
  .hand-result .hand-result-next { border-radius: 8px; background: #f0ebdb; }
  .hand-result .hand-result-summary { margin-top: .7rem; }
  .result-finale { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 148px; overflow: hidden; padding: 18px 32px; background: #173f36; color: #fff4d4; animation: finale-duration 4.8s linear; }
  .result-finale::before { content: ""; position: absolute; inset: 10px; z-index: -1; border: 1px solid #e4c78b45; border-radius: 80px 8px; pointer-events: none; }
  .finale-copy { position: relative; z-index: 2; text-align: center; text-shadow: 0 2px 14px #0c2f27; }
  .hand-result .finale-eyebrow { color: #e9d3a1; font: 800 .65rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .hand-result .finale-title { margin: .1rem 0; color: #fff3ce; font: 500 clamp(2.5rem, 5vw, 4rem)/1.08 var(--serif); letter-spacing: -.03em; }
  .hand-result .finale-caption { color: #e8e7d5; font: 500 .82rem/1.4 var(--sans); }
  .finale-garden, .finale-fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .finale-flower { position: absolute; bottom: -20px; left: var(--x); width: 95px; height: 140px; transform: rotate(var(--tilt)); transform-origin: 50% 100%; animation: finale-bloom 1.1s cubic-bezier(.2,.7,.25,1) both; animation-delay: var(--delay); }
  .finale-flower .mj-tile-art { width: 100%; height: 100%; max-height: none; max-width: none; overflow: visible; }
  .finale-flower:nth-child(3n+1) .mj-art-flower > g { fill: #e3b7a0; stroke: #b8735a; }
  .finale-flower:nth-child(3n+2) .mj-art-flower > g { fill: #d97160; stroke: #a7493d; }
  .finale-flower:nth-child(3n) .mj-art-flower > g { fill: #e9cf8d; stroke: #bd8e47; }
  .finale-flower .mj-art-flower > path:not(:first-child) { fill: #6d9474; }
  .finale-burst { position: absolute; left: var(--x); top: var(--y); width: 150px; height: 150px; color: var(--spark); opacity: 0; transform: translate(-50%, -50%) scale(.2); animation: finale-burst 2.8s ease-out both; animation-delay: var(--delay); }
  .finale-burst svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .result-finale-loss { gap: 20px; background: linear-gradient(115deg, #193e38, #285653); }
  .result-finale-loss .finale-copy { text-align: left; max-width: 350px; }
  .result-finale-loss .finale-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
  .joker-dancer { flex: 0 0 126px; width: 126px; height: 132px; overflow: visible; }
  .joker-dancer .jester-body { transform-origin: 90px 120px; animation: joker-dance 1.15s ease-in-out 4; }
  .joker-dancer .jester-arm-left { transform-origin: 64px 83px; animation: joker-wave .575s ease-in-out 8; }
  .joker-dancer .jester-arm-right { transform-origin: 114px 83px; animation: joker-wave .575s ease-in-out 8 reverse; }
  .joker-dancer .jester-leg-left { transform-origin: 78px 116px; animation: joker-step 1.15s ease-in-out 4; }
  .joker-dancer .jester-leg-right { transform-origin: 104px 116px; animation: joker-step 1.15s ease-in-out 4 reverse; }
  .joker-dancer .jester-shadow { transform-origin: 90px 168px; animation: joker-shadow 1.15s ease-in-out 4; }
  .result-motion-tools { display: flex; justify-content: flex-end; padding: .25rem .7rem; background: #eee8d8; border-bottom: 1px solid #d4c8ad; }
  .result-motion-tools button { min-height: 36px; padding: .35rem .7rem; border: 0; border-radius: 5px; color: #365849; background: transparent; font: 700 .75rem/1.2 var(--sans); cursor: pointer; }
  .result-motion-tools button:hover, .result-motion-tools button:focus-visible { background: #dfdfcc; outline: 2px solid #94783b; }
  .result-finale.is-still, .result-finale.is-still * { animation: none !important; }
  .result-finale.is-still .finale-burst { display: none; }
  @keyframes finale-duration { from { outline-color: transparent; } to { outline-color: transparent; } }
  @keyframes finale-bloom { from { opacity: 0; transform: translateY(50px) rotate(0deg) scale(.65); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); } }
  @keyframes finale-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); } 15% { opacity: .85; } 65% { opacity: .5; } 100% { opacity: 0; transform: translate(-50%,-25%) scale(1.2); } }
  @keyframes joker-dance { 0%,100% { transform: translate(0,0) rotate(-4deg); } 25% { transform: translate(-6px,-7px) rotate(-9deg); } 50% { transform: translate(0,0) rotate(4deg); } 75% { transform: translate(6px,-7px) rotate(9deg); } }
  @keyframes joker-wave { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(20deg); } }
  @keyframes joker-step { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(15deg); } }
  @keyframes joker-shadow { 0%,50%,100% { transform: scaleX(1); opacity: .22; } 25%,75% { transform: scaleX(.8); opacity: .12; } }
}
@media screen and (max-width: 700px), screen and (max-height: 500px) {
  .is-playing .hand-result { top: 58px; width: min(900px, calc(100vw - 16px)); display: flex; flex-direction: column; }
  .is-playing .hand-result[hidden] { display: none; }
  .result-finale { flex: 0 0 auto; min-height: 128px; padding: 16px 20px; }
  .result-motion-tools { flex: 0 0 auto; }
  .finale-flower { width: 65px; height: 105px; bottom: -28px; }
  .finale-burst { width: 95px; height: 95px; }
  .hand-result .finale-eyebrow { font-size: .55rem; }
  .hand-result .finale-caption { font-size: .75rem; }
  .result-finale-loss { gap: 10px; }
  .joker-dancer { flex-basis: 94px; width: 94px; height: 96px; }
  .hand-result .hand-result-grid { display: contents; }
  .hand-result .hand-result-details { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .8rem; }
  .hand-result h3 { font-size: 1.4rem; }
  .hand-result .hand-result-next { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr); align-items: center; gap: .5rem; margin: 0 .8rem .8rem; padding: .6rem; border-top-width: 2px; }
  .hand-result .hand-result-next > strong { display: none; }
  .hand-result .hand-result-next small { font-size: .72rem; }
  .hand-result .hand-result-next .game-button { margin: 0; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .result-finale, .result-finale * { animation: none !important; }
  .finale-burst, .result-motion-tools { display: none !important; }
}
@media screen and (max-height: 600px) {
  .is-playing .hand-result { max-height: calc(100dvh - 80px); }
}
@media screen and (max-height: 500px) {
  .result-finale { min-height: 90px; padding: 8px 16px; }
  .hand-result .finale-title { font-size: 2rem; }
  .hand-result .finale-caption { display: none; }
  .result-finale-loss .finale-title br { display: none; }
  .joker-dancer { flex-basis: 72px; width: 72px; height: 72px; }
  .result-motion-tools { padding-block: 0; }
  .hand-result .hand-result-details { padding-block: .5rem; }
}
@media print {
  .result-finale, .result-motion-tools { display: none; }
}