/* Friends Mahjong 10.16.3 — ceramic tiles + disposable, layout-independent FX.
   Hand/pool/meld widths, grid counts and coordinates are intentionally unchanged. */
:root{--mj-ivory:#fffaf0;--mj-gold:#ffd98a;--mj-jade:#26785c;--mj-rose:#eb95b0}
html[data-mj-skin="jade"] #table .tile.mj-tile,
html[data-mj-skin="jade"] #handDock .tile.mj-tile,.mj-fx-tile{
 background:linear-gradient(100deg,#fffdf5 0%,#fffdf5 9%,#f8eddb 62%,#e1ccb0 100%)!important;
 border:1px solid #cab499!important;border-top-color:#fffef7!important;border-left-color:#fef5df!important;
 box-shadow:inset 2px 2px 1px #fff,inset -2px -3px 2px #bea28285,inset 0 0 0 3px #fffcf345,0 1px 0 #e0cba9,0 3px 0 #bbaa8f,0 5px 0 #71a38a,0 8px 0 #225440,1px 10px 0 #153f32,2px 13px 12px #142e2852!important;
}
html[data-mj-skin="jade"] #table .tile.mj-tile.small{
 box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 1px #c3ab8580,0 1px 0 #e3cfae,0 3px 0 #437a5f,0 4px 0 #204c3b,0 6px 6px #142e2850!important;
}
html[data-mj-skin="jade"] #table .hand .tile.mj-tile::after,
html[data-mj-skin="jade"] #handDock .tile.mj-tile::after,
html[data-mj-skin="jade"] #table .drawn-area .tile.mj-tile::after,.mj-fx-tile::after{
 content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;
 background:linear-gradient(125deg,#ffffff7a 0%,#ffffff00 27%,#ffffff00 73%,#9e7f5610 100%);
 border:1px solid #fff9e877;box-shadow:inset 0 1px 0 #fffefa;
}
html[data-mj-skin="jade"] #table .hand .tile-svg,
html[data-mj-skin="jade"] #handDock .tile-svg,
html[data-mj-skin="jade"] #table .drawn-area .tile-svg,
.mj-fx-tile .tile-svg{filter:drop-shadow(0 1px .3px #856a4928)!important}
html[data-mj-skin="jade"] #table button.tile.mj-tile:not(:disabled),
html[data-mj-skin="jade"] #handDock button.tile.mj-tile:not(:disabled){cursor:pointer;transition:filter 140ms,border-color 140ms!important}
@media(hover:hover) and (pointer:fine){
 html[data-mj-skin="jade"] #table button.tile.mj-tile:not(:disabled):hover,
 html[data-mj-skin="jade"] #handDock button.tile.mj-tile:not(:disabled):hover{
  filter:brightness(1.08)!important;border-color:#e0b259!important;
  box-shadow:inset 0 0 0 2px #ffe4a2,0 3px 0 #d4c09e,0 8px 0 #29533f,0 10px 12px #152c2255!important;
 }
}
html[data-mj-skin="jade"] #table .tile.mj-selected,
html[data-mj-skin="jade"] #handDock .tile.mj-selected{opacity:.24!important;transform:none!important}
html[data-mj-skin="jade"] #table .drawn-area .tile.mj-tile,
html[data-mj-skin="jade"] #handDock .drawn-area .tile.mj-tile{
 border-color:#f0c979!important;box-shadow:inset 1px 1px 0 #fff,0 0 0 2px #f4d899,0 3px 0 #bbaa8f,0 8px 0 #225440,0 10px 10px #19372b55,0 0 15px #ffcf6266!important;
}
/* All particles, ribbons and flying tile copies are out of flow and transparent to input. */
#mjFxLayer,#mjFxWinLayer{position:fixed;inset:0;pointer-events:none!important;z-index:260;overflow:hidden;contain:strict}
#mjFxWinLayer{z-index:350}
#mjFxLayer *,#mjFxWinLayer *{pointer-events:none!important;box-sizing:border-box;user-select:none}
.mj-fx-tile{position:absolute;display:grid;place-items:center;margin:0;padding:2px 2px 6px;border-radius:8px;overflow:hidden;transform-origin:50% 80%;will-change:transform,opacity}
.mj-fx-tile .tile-svg{display:block;width:100%;height:100%}
.mj-fx-selected{overflow:visible;z-index:4;transform:translateY(-12px) rotate(-1deg);outline:2px solid #ffdc87;outline-offset:2px;
 box-shadow:inset 2px 2px 1px #fff,inset -2px -3px 2px #bea28275,0 2px 0 #dcccaf,0 7px 0 #438367,0 10px 0 #20503e,0 16px 20px #11271e70,0 0 20px #ffdc98aa,0 0 44px #f2b75b66!important;
 animation:mj-breathe 1.6s ease-in-out infinite alternate}
.mj-fx-selected::before{content:"";position:absolute;inset:-5px;border:1px solid #fff0bdbb;border-radius:12px;box-shadow:0 0 12px #ffcc7055}
.mj-selected-hint{position:absolute;left:50%;top:-30px;transform:translateX(-50%) rotate(1deg);padding:4px 10px;border:1px solid #d1a867;border-radius:20px;background:#fff0cdee;color:#704527;font:800 11px/1.15 system-ui;white-space:nowrap;box-shadow:0 3px 10px #442e2730}
.mj-selected-hint::after{content:"";position:absolute;top:100%;left:calc(50% - 4px);border:4px solid transparent;border-top-color:#fff0cd}
@keyframes mj-breathe{to{outline-color:#fff2bd;filter:brightness(1.07)}}
.mj-fx-call{position:absolute;width:270px;height:136px;display:flex;align-items:center;justify-content:center;gap:12px;filter:drop-shadow(0 7px 8px #082b2250);isolation:isolate;transform-origin:center}
.mj-fx-call::before{content:"";position:absolute;inset:20px 2px;z-index:-1;border:1px solid var(--fx-light);border-radius:18px;background:linear-gradient(115deg,var(--fx-dark),var(--fx-mid));box-shadow:inset 0 1px 0 #ffffff66,0 0 25px var(--fx-haze);transform:skew(-10deg)}
.mj-fx-call::after{content:"";position:absolute;left:-14px;right:-14px;top:27px;bottom:27px;z-index:-2;border-top:1px solid var(--fx-light);border-bottom:1px solid var(--fx-light);transform:skew(-10deg)}
.mj-fx-avatar{width:66px;height:66px;border-radius:50%;border:3px solid var(--fx-light);background:#fff5e9;box-shadow:0 3px 0 #16362a44;object-fit:cover;flex:none}
.mj-fx-word{font:1000 62px/1 "Noto Serif CJK TC","DFKai-SB",serif;color:#fff5da;letter-spacing:-2px;text-shadow:0 3px 0 var(--fx-dark),0 0 15px var(--fx-light);white-space:nowrap}
.mj-fx-call small{display:block;margin-top:5px;color:#fff7e5;font:700 11px/1.2 system-ui;letter-spacing:2px;text-align:center;white-space:nowrap}
.mj-fx-chi{--fx-light:#bdf6d7;--fx-dark:#1a564a;--fx-mid:#54ad89;--fx-haze:#91ffd35c}
.mj-fx-pong{--fx-light:#ffe5ba;--fx-dark:#873b5a;--fx-mid:#dc7b99;--fx-haze:#ffb0c766}
.mj-fx-kong{--fx-light:#e4ddff;--fx-dark:#433869;--fx-mid:#8b76bf;--fx-haze:#c4b4ff66}
.mj-fx-flower{--fx-light:#ffdcf0;--fx-dark:#854866;--fx-mid:#d894b0;--fx-haze:#ffc4e066}
.mj-fx-kong .mj-fx-word{font-size:55px}
.mj-fx-call.mj-enter-chi{animation:mj-chi 920ms cubic-bezier(.22,.75,.25,1) both}
.mj-fx-call.mj-enter-pong{animation:mj-pong 1050ms ease-out both}
.mj-fx-call.mj-enter-kong{animation:mj-kong 1220ms cubic-bezier(.18,.85,.26,1) both}
.mj-fx-call.mj-enter-flower{animation:mj-chi 850ms ease-out both}
@keyframes mj-chi{0%{opacity:0;translate:-85px 12px;rotate:-9deg}22%{opacity:1;translate:0 0;rotate:0deg}77%{opacity:1;translate:3px 0}100%{opacity:0;translate:60px -12px}}
@keyframes mj-pong{0%{opacity:0;scale:2;rotate:9deg}18%{opacity:1;scale:.91;rotate:-4deg}29%{scale:1.06;rotate:2deg}43%,77%{scale:1;rotate:0deg;opacity:1}100%{opacity:0;scale:.86;translate:0 -18px}}
@keyframes mj-kong{0%{opacity:0;translate:0 -100px;scale:1.2}20%{opacity:1;translate:0 9px;scale:.94}28%{translate:0 -5px;scale:1.03}42%,78%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -25px;scale:1.08}}
.mj-fx-ring{position:absolute;border:2px solid var(--particle-color,#ffe2a3);border-radius:50%;box-shadow:0 0 12px var(--particle-color,#ffe2a3);opacity:.8}
.mj-fx-particle{position:absolute;width:8px;height:8px;background:var(--particle-color);border-radius:2px;box-shadow:0 0 6px var(--particle-color)}
.mj-fx-particle.star{clip-path:polygon(50% 0%,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0% 50%,38% 37%);border-radius:0}
.mj-fx-particle.petal{border-radius:0 75% 35% 75%;width:9px;height:14px}
.mj-fx-win{position:absolute;width:430px;height:270px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff4d3;isolation:isolate;animation:mj-win 2000ms cubic-bezier(.2,.85,.25,1) both;filter:drop-shadow(0 12px 20px #23161c70)}
.mj-fx-win::before{content:"";position:absolute;inset:8px 0;z-index:-1;border:2px solid #f5cf8a;border-radius:42% 42% 27% 27%;background:radial-gradient(ellipse at 50% 5%,#736040,#253f33 52%,#1a2d28);box-shadow:inset 0 0 0 7px #d9b57a22,0 0 0 6px #f9d6a025,0 0 80px #ffc86d66}
.mj-win-eyebrow{font:700 10px/1 system-ui;letter-spacing:6px;color:#e9ca8f}
.mj-win-word{font:1000 98px/1.1 "Noto Serif CJK TC","DFKai-SB",serif;letter-spacing:4px;text-shadow:0 5px 0 #946f3e,0 0 25px #ffd78580;position:relative}
.mj-fx-win .mj-win-detail{font:800 19px/1.4 system-ui;color:#fff0d3}
.mj-win-tai{display:inline-block;color:#584125;background:linear-gradient(120deg,#fff1c4,#e6ba79);border-radius:20px;padding:3px 18px;margin-left:8px;font-size:18px;box-shadow:0 2px 0 #9c784a}
.mj-win-stars{color:#fce0a0;letter-spacing:18px;padding-left:18px;font-size:18px}
@keyframes mj-win{0%{opacity:0;scale:.35;rotate:-8deg}18%{opacity:1;scale:1.07;rotate:2deg}30%,76%{opacity:1;scale:1;rotate:0deg}100%{opacity:0;scale:1.06;translate:0 -20px}}
html[data-mj-skin="jade"] #result .modal{border-radius:25px!important;background:linear-gradient(145deg,#fff9e9,#f4e7d4)!important}
#result .mj-score-reveal{animation:mj-score-in 400ms ease-out both;animation-delay:var(--score-delay,0ms)}
@keyframes mj-score-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* Action buttons breathe without moving or resizing their reserved slots. */
html[data-mj-skin="jade"] #table .actionbar .btn:not(:disabled){box-shadow:inset 0 1px 0 #ffffff99,inset 0 0 0 3px #fff7e21c,0 5px 0 #47353075,0 9px 13px #142b2455,0 0 16px #f8d69a44!important}
html[data-mj-skin="jade"] #table .actionbar .btn:not(:disabled):active{filter:brightness(.93)!important}
/* Tiny utility in unused header space. Only its popover accepts input. */
#mjFxSettingsBtn{position:absolute;left:57.8%;top:2.3%;z-index:82;padding:9px 15px;border:1px solid #d0b193;border-radius:13px;background:linear-gradient(120deg,#58473fec,#302d2bee);color:#ffefd4;font:800 12px/1.2 system-ui;cursor:pointer;box-shadow:0 3px 0 #2a262338}
#mjFxSettings{position:fixed;right:18px;top:78px;z-index:460;width:260px;box-sizing:border-box;padding:18px;border:1px solid #d6b383;border-radius:20px;background:#243c34f7;color:#fff0d3;box-shadow:0 15px 50px #10211e80;font:13px/1.5 system-ui;max-height:75vh;overflow-y:auto}
#mjFxSettings[hidden]{display:none}
#mjFxSettings h3{margin:0 0 12px;font-size:16px}
#mjFxSettings label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0}
#mjFxSettings select{background:#fff0d6;border:0;border-radius:7px;padding:5px;color:#463928}
#mjFxSettings input{accent-color:#d8b577}
#mjFxSettings p{font-size:11px;color:#ccbea5;margin:12px 0 0}
#mjFxSettings button{background:#e4c18c;color:#423527;border:0;border-radius:10px;padding:7px 12px;cursor:pointer}
html[data-mj-fx="off"] .mj-fx-selected,html[data-mj-fx="lite"] .mj-fx-selected{animation:none}
@media(prefers-reduced-motion:reduce){.mj-fx-selected,.mj-fx-call,.mj-fx-win,#result .mj-score-reveal{animation:none!important;transition:none!important}}
/* Actual result component is .resultbox, not a separate replacement screen. */
html[data-mj-skin="jade"] #result .resultbox{
 position:relative;border:1px solid #c9a975;background:radial-gradient(ellipse at top,#35584a,#22392f 65%,#1b2c25)!important;
 color:#f0e3cb;border-radius:24px;box-shadow:inset 0 0 0 5px #edcf8c0c,0 22px 80px #091a15a0;padding:24px;
}
html[data-mj-skin="jade"] #result .resultbox::before{content:'ROUND COMPLETE';display:block;font:700 10px/1.5 system-ui;letter-spacing:5px;color:#c7aa7e;margin-bottom:7px}
html[data-mj-skin="jade"] #result h2{color:#fbe2a8!important;margin:0 0 16px!important;font-size:24px}
html[data-mj-skin="jade"] #result .scoreline{border-color:#d5be8630!important;padding:8px 4px}
html[data-mj-skin="jade"] #result .scoreline:first-child{background:linear-gradient(110deg,#ead1a8,#c4a073);color:#332e23;border-radius:12px;padding:12px;margin-bottom:9px;font-size:20px}
html[data-mj-skin="jade"] #result .result-audio{margin-top:14px}
html[data-mj-skin="jade"] #result #resultAudioStatus{color:#c6b596}
html[data-mj-skin="jade"] #result #resultReplayBtn{background:#f0dec4!important;border:1px solid #ab926d;color:#533d2f}
html[data-mj-skin="jade"] #result #nextBtn{background:linear-gradient(135deg,#efabc0,#c96f8d)!important;color:#fff5eb;border:1px solid #f1c9c9;box-shadow:0 3px 0 #805263}