.mjs-wrap{max-width:1120px;margin:0 auto;padding:18px;border-radius:24px;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.32),transparent 30%),linear-gradient(135deg,#2e4057 0%,#102033 52%,#090f1a 100%);box-shadow:0 22px 60px rgba(0,0,0,.28);color:#f8fafc;position:relative;overflow:hidden}.mjs-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:18px 20px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}.mjs-hero h2{margin:2px 0 6px;font-size:32px;line-height:1.1;color:#fff;font-weight:900}.mjs-hero p{margin:0;color:rgba(255,255,255,.78)}.mjs-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:#ffd98a}.mjs-stars{font-size:34px;color:#ffd66e;text-shadow:0 0 18px rgba(255,214,110,.35)}.mjs-controls,.mjs-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-bottom:12px}.mjs-controls label{padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-weight:800}.mjs-controls select{margin-left:6px;color:#102033;border:0;border-radius:10px;padding:7px 9px}.mjs-toolbar>div{min-width:110px;text-align:center;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.mjs-toolbar strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.62);margin-bottom:2px}.mjs-toolbar span{font-size:20px;font-weight:900;color:#fff}.mjs-controls .button,.mjs-controls .btn{border:0!important;border-radius:14px!important;padding:10px 16px!important;font-weight:900!important;background:linear-gradient(135deg,#ffd66e,#ff9f43)!important;color:#222!important;box-shadow:0 10px 22px rgba(255,159,67,.22)!important;text-shadow:none!important}.mjs-controls .button:disabled{opacity:.45;cursor:not-allowed}.mjs-shuffle-btn{background:linear-gradient(135deg,#a7f3d0,#34d399)!important}.mjs-message{text-align:center;min-height:30px;margin:10px 0 14px;font-weight:800;color:#ffe7a3}.mjs-board{position:relative;width:960px;height:600px;max-width:100%;margin:0 auto;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.13),transparent 34%),linear-gradient(160deg,#3b7b78,#194857 58%,#10283b);border:1px solid rgba(255,255,255,.2);border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -40px 80px rgba(0,0,0,.18),0 18px 36px rgba(0,0,0,.22)}.mjs-board:before{content:"";position:absolute;inset:18px;border-radius:18px;border:1px dashed rgba(255,255,255,.18);pointer-events:none}.mjs-board:after{content:"Mahjong";position:absolute;right:22px;bottom:16px;color:rgba(255,255,255,.12);font-weight:900;font-size:34px;letter-spacing:.08em;pointer-events:none}.mjs-tile{position:absolute;width:58px;height:74px;border:0;border-radius:13px;background:linear-gradient(145deg,#fff8df 0%,#f4e4b8 62%,#d8bb78 100%);box-shadow:0 7px 0 #9a7537,7px 10px 18px rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.75),inset -2px -2px 0 rgba(132,92,28,.16);display:flex;align-items:center;justify-content:center;font-size:31px;line-height:1;cursor:pointer;user-select:none;transition:transform .14s ease,opacity .25s ease,box-shadow .14s ease,filter .14s ease;color:#143b4d}.mjs-tile:before{content:"";position:absolute;inset:6px;border-radius:10px;border:1px solid rgba(89,64,20,.18);pointer-events:none}.mjs-tile:hover:not(.blocked):not(.removed){transform:translateY(-4px);box-shadow:0 9px 0 #9a7537,8px 14px 22px rgba(0,0,0,.36),0 0 0 4px rgba(255,214,110,.25),inset 2px 2px 0 rgba(255,255,255,.75)}.mjs-tile.selected{transform:translateY(-6px);box-shadow:0 9px 0 #9a7537,0 0 0 4px rgba(255,214,110,.88),0 0 28px rgba(255,214,110,.55),8px 16px 24px rgba(0,0,0,.38)}.mjs-tile.blocked{filter:saturate(.45) brightness(.72);opacity:.58;cursor:not-allowed}.mjs-tile.removed{opacity:0;transform:scale(.72) translateY(-18px) rotate(8deg);pointer-events:none}.mjs-tile.hint{animation:mjsHint 1s ease 3}.mjs-tile.combo{animation:mjsCombo .38s ease both}.mjs-tile.mjs-shuffled{animation:mjsPulse .42s ease both}@keyframes mjsHint{0%,100%{box-shadow:0 7px 0 #9a7537,7px 10px 18px rgba(0,0,0,.32)}50%{box-shadow:0 8px 0 #9a7537,0 0 0 5px rgba(94,234,212,.8),0 0 28px rgba(94,234,212,.55)}}@keyframes mjsCombo{50%{transform:scale(1.12) translateY(-7px)}}@keyframes mjsPulse{0%{transform:scale(.92) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}.mjs-win{position:absolute;inset:0;background:rgba(5,10,18,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:999}.mjs-win[hidden]{display:none!important}.mjs-win>div{max-width:420px;text-align:center;background:#fff;color:#132033;border-radius:24px;padding:30px;box-shadow:0 30px 70px rgba(0,0,0,.35)}.mjs-win h2{font-size:34px;margin:0 0 10px;color:#132033}.mjs-score-table{background:#fff;border-radius:12px;overflow:hidden}.mjs-score-table td,.mjs-score-table th{text-align:center}.mjs-score-table thead th{background:#172438;color:#fff!important;border-bottom:0!important}.mjs-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px}.mjs-stat-grid div{padding:16px;border-radius:14px;background:#f4f7fb;text-align:center}.mjs-stat-grid b{display:block;color:#64748b}.mjs-stat-grid span{font-size:24px;font-weight:900}@media(max-width:760px){.mjs-wrap{padding:12px;border-radius:16px}.mjs-hero{padding:14px}.mjs-hero h2{font-size:24px}.mjs-stars{font-size:24px}.mjs-board{height:650px;border-radius:18px}.mjs-tile{width:48px;height:62px;font-size:25px;border-radius:11px}.mjs-toolbar>div{min-width:86px;padding:8px 10px}.mjs-toolbar span{font-size:18px}.mjs-stat-grid{grid-template-columns:repeat(2,1fr)}}


/* v1.0.6 Mystic Theme */
.mjs-wrap{
    background:
        radial-gradient(circle at 18% 12%,rgba(177,91,255,.38),transparent 28%),
        radial-gradient(circle at 82% 8%,rgba(69,255,219,.22),transparent 26%),
        radial-gradient(circle at 50% 105%,rgba(255,199,95,.18),transparent 34%),
        linear-gradient(135deg,#10051f 0%,#160b2d 42%,#071524 100%)!important;
    box-shadow:0 0 0 1px rgba(207,159,255,.22),0 28px 90px rgba(0,0,0,.55),0 0 70px rgba(124,58,237,.22)!important;
}
.mjs-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.05),transparent);transform:translateX(-100%);animation:mjsAura 7s ease-in-out infinite;pointer-events:none}.mjs-wrap:after{content:"✦ ✧ ✦ ✧ ✦";position:absolute;left:22px;bottom:12px;color:rgba(210,185,255,.16);font-size:24px;letter-spacing:.5em;pointer-events:none}
.mjs-hero{background:linear-gradient(135deg,rgba(116,58,213,.28),rgba(15,23,42,.58))!important;border-color:rgba(216,180,254,.25)!important;box-shadow:inset 0 0 28px rgba(216,180,254,.09),0 12px 32px rgba(0,0,0,.24)}
.mjs-hero h2{color:#fff7d6!important;text-shadow:0 0 14px rgba(250,204,21,.42),0 0 34px rgba(168,85,247,.28)}
.mjs-kicker{color:#67e8f9!important;text-shadow:0 0 12px rgba(103,232,249,.65)}
.mjs-stars{color:#fde68a!important;text-shadow:0 0 12px rgba(253,230,138,.65),0 0 30px rgba(168,85,247,.45)!important}.mjs-controls label,.mjs-toolbar>div{background:rgba(18,12,39,.66)!important;border-color:rgba(216,180,254,.23)!important;box-shadow:inset 0 0 18px rgba(124,58,237,.13),0 8px 22px rgba(0,0,0,.22)!important}.mjs-controls select{background:#150b2b!important;color:#fef3c7!important;border:1px solid rgba(216,180,254,.35)!important}.mjs-controls .button,.mjs-controls .btn{background:linear-gradient(135deg,#7c3aed,#06b6d4)!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 12px 28px rgba(124,58,237,.34),0 0 22px rgba(6,182,212,.2)!important}.mjs-controls .button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}.mjs-shuffle-btn{background:linear-gradient(135deg,#f59e0b,#db2777)!important}.mjs-message{color:#fef3c7!important;text-shadow:0 0 14px rgba(251,191,36,.34)}
.mjs-board{background:
        radial-gradient(circle at 50% 42%,rgba(168,85,247,.22),transparent 32%),
        radial-gradient(circle at 23% 72%,rgba(45,212,191,.16),transparent 28%),
        repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.045) 0 1px,transparent 1px 18px),
        linear-gradient(160deg,#17062e,#0b1025 58%,#03121d)!important;
    border-color:rgba(216,180,254,.32)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -60px 110px rgba(0,0,0,.34),0 22px 54px rgba(0,0,0,.42),0 0 60px rgba(124,58,237,.22)!important}
.mjs-board:before{border:1px solid rgba(103,232,249,.24)!important;box-shadow:inset 0 0 26px rgba(103,232,249,.08);background:radial-gradient(circle at center,transparent 57%,rgba(216,180,254,.08) 58%,transparent 59%)}
.mjs-board:after{content:"Mystic Mahjong"!important;color:rgba(216,180,254,.13)!important;text-shadow:0 0 18px rgba(168,85,247,.4);font-family:Georgia,serif}
.mjs-tile{background:linear-gradient(145deg,#fff7d6 0%,#dec88a 48%,#8b6f37 100%)!important;color:#201037!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 7px 0 #4c2d13,8px 12px 22px rgba(0,0,0,.46),0 0 18px rgba(250,204,21,.13),inset 2px 2px 0 rgba(255,255,255,.7),inset -3px -3px 0 rgba(57,24,8,.18)!important;text-shadow:0 0 7px rgba(124,58,237,.18)}
.mjs-tile:before{border-color:rgba(76,29,149,.28)!important;box-shadow:inset 0 0 14px rgba(124,58,237,.08)}.mjs-tile:after{content:"";position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(124,58,237,.13);box-shadow:0 0 12px rgba(124,58,237,.08);pointer-events:none}.mjs-tile:hover:not(.blocked):not(.removed){box-shadow:0 9px 0 #4c2d13,8px 16px 28px rgba(0,0,0,.48),0 0 0 4px rgba(103,232,249,.26),0 0 26px rgba(103,232,249,.42),inset 2px 2px 0 rgba(255,255,255,.75)!important}.mjs-tile.selected{box-shadow:0 9px 0 #4c2d13,0 0 0 4px rgba(253,230,138,.9),0 0 38px rgba(253,230,138,.64),0 0 60px rgba(168,85,247,.42),8px 18px 28px rgba(0,0,0,.5)!important}.mjs-tile.blocked{filter:saturate(.36) brightness(.52) hue-rotate(12deg)!important;opacity:.55}.mjs-win{background:rgba(5,2,14,.78)!important;backdrop-filter:blur(7px)}.mjs-win>div{background:linear-gradient(145deg,#fff7d6,#d8b4fe)!important;color:#1e1035!important;border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(168,85,247,.45)!important}.mjs-win h2{color:#2e1065!important;text-shadow:0 0 16px rgba(168,85,247,.36)}.mjs-score-table{background:#130a28!important;color:#f8fafc!important;border:1px solid rgba(216,180,254,.22)}.mjs-score-table td{border-color:rgba(216,180,254,.13)!important}.mjs-score-table thead th{background:linear-gradient(135deg,#2e1065,#0e7490)!important;color:#fff7d6!important}.mjs-stat-grid div{background:linear-gradient(145deg,#170b32,#071524)!important;border:1px solid rgba(216,180,254,.2);box-shadow:inset 0 0 20px rgba(124,58,237,.1);color:#f8fafc}.mjs-stat-grid b{color:#a5f3fc!important}.mjs-stat-grid span{color:#fef3c7!important;text-shadow:0 0 12px rgba(250,204,21,.24)}@keyframes mjsAura{0%,60%,100%{transform:translateX(-120%);opacity:0}18%{opacity:1}38%{transform:translateX(120%);opacity:0}}


/* v107 fix: matched tiles must stay invisible even when state refreshes */
.mjs-tile.removed,
.mjs-tile.removed.blocked {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(.72) translateY(-18px) rotate(8deg) !important;
  pointer-events: none !important;
}


.mjs-login-required {
    border-radius: 24px;
    padding: 24px;
    background: radial-gradient(circle at top, rgba(138, 92, 246, .28), rgba(9, 11, 26, .94));
    border: 1px solid rgba(190, 167, 255, .28);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 30px rgba(138,92,246,.08);
}
.mjs-login-required p {
    margin: 18px 0 0;
}
.mjs-login-required .btn {
    margin-right: 8px;
}


/* v1.1.0 Arcane XXL visual upgrade */
.mjs-wrap{
    max-width:1280px!important;
    padding:22px!important;
    background:
        radial-gradient(circle at 15% 8%, rgba(150,70,255,.42), transparent 24%),
        radial-gradient(circle at 86% 10%, rgba(0,255,220,.24), transparent 25%),
        radial-gradient(circle at 50% 115%, rgba(255,183,77,.22), transparent 36%),
        linear-gradient(135deg,#07010f 0%,#160625 42%,#020b17 100%)!important;
}
.mjs-wrap:after{
    content:"ᚱ ᚢ ᚾ ᛖ ᛋ"!important;
    color:rgba(248,220,140,.18)!important;
    text-shadow:0 0 16px rgba(248,220,140,.45);
}
.mjs-hero{
    border-radius:28px!important;
    background:
        linear-gradient(135deg,rgba(91,33,182,.46),rgba(3,7,18,.72)),
        radial-gradient(circle at 70% 20%,rgba(34,211,238,.16),transparent 32%)!important;
}
.mjs-hero h2{
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:38px!important;
    letter-spacing:.02em;
}
.mjs-board{
    width:1080px!important;
    height:700px!important;
    border-radius:34px!important;
    background:
        radial-gradient(circle at 50% 40%,rgba(168,85,247,.30),transparent 33%),
        radial-gradient(circle at 20% 72%,rgba(45,212,191,.20),transparent 26%),
        radial-gradient(circle at 80% 78%,rgba(245,158,11,.12),transparent 24%),
        repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 18px),
        linear-gradient(160deg,#1c0635,#090719 56%,#020c16)!important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.1),
        inset 0 0 80px rgba(168,85,247,.16),
        inset 0 -70px 140px rgba(0,0,0,.44),
        0 28px 70px rgba(0,0,0,.55),
        0 0 80px rgba(124,58,237,.30)!important;
}
.mjs-board:before{
    inset:24px!important;
    border-radius:26px!important;
    border:1px solid rgba(250,204,21,.20)!important;
    background:
        radial-gradient(circle at center,transparent 54%,rgba(216,180,254,.10) 55%,transparent 56%),
        linear-gradient(90deg,transparent 49%,rgba(103,232,249,.10) 50%,transparent 51%);
}
.mjs-board:after{
    right:30px!important;
    bottom:22px!important;
    font-size:42px!important;
    letter-spacing:.12em!important;
}
.mjs-tile{
    width:76px!important;
    height:96px!important;
    border-radius:18px!important;
    font-size:43px!important;
    background:
        radial-gradient(circle at 50% 34%,rgba(255,255,255,.92),rgba(255,247,214,.55) 35%,transparent 36%),
        linear-gradient(145deg,#fff3c4 0%,#caa85d 52%,#5a3716 100%)!important;
    color:#18092b!important;
    border:1px solid rgba(255,244,190,.72)!important;
    box-shadow:
        0 10px 0 #2a1508,
        10px 15px 30px rgba(0,0,0,.58),
        0 0 18px rgba(250,204,21,.20),
        inset 3px 3px 0 rgba(255,255,255,.72),
        inset -4px -4px 0 rgba(46,16,101,.22)!important;
    text-shadow:0 0 9px rgba(124,58,237,.30),0 1px 0 rgba(255,255,255,.25)!important;
}
.mjs-tile:before{
    inset:8px!important;
    border-radius:14px!important;
    border:1px solid rgba(88,28,135,.36)!important;
    box-shadow:inset 0 0 18px rgba(124,58,237,.13),0 0 12px rgba(250,204,21,.10)!important;
}
.mjs-tile:after{
    inset:15px!important;
    border-color:rgba(6,182,212,.18)!important;
    box-shadow:0 0 16px rgba(6,182,212,.12), inset 0 0 8px rgba(250,204,21,.10)!important;
}
.mjs-tile:hover:not(.blocked):not(.removed){
    transform:translateY(-7px) scale(1.03)!important;
    box-shadow:
        0 12px 0 #2a1508,
        12px 20px 34px rgba(0,0,0,.62),
        0 0 0 5px rgba(103,232,249,.30),
        0 0 34px rgba(103,232,249,.55),
        0 0 60px rgba(168,85,247,.35),
        inset 3px 3px 0 rgba(255,255,255,.75)!important;
}
.mjs-tile.selected{
    transform:translateY(-9px) scale(1.05)!important;
    box-shadow:
        0 12px 0 #2a1508,
        0 0 0 5px rgba(253,230,138,.95),
        0 0 44px rgba(253,230,138,.75),
        0 0 80px rgba(168,85,247,.55),
        12px 22px 38px rgba(0,0,0,.64)!important;
}
.mjs-tile.blocked{filter:saturate(.28) brightness(.46) hue-rotate(18deg)!important;opacity:.46!important;}
.mjs-tile.hint{animation:mjsHintXXL 1s ease 3!important;}
@keyframes mjsHintXXL{
    0%,100%{box-shadow:0 10px 0 #2a1508,10px 15px 30px rgba(0,0,0,.58),0 0 18px rgba(250,204,21,.20)}
    50%{box-shadow:0 12px 0 #2a1508,0 0 0 6px rgba(34,211,238,.90),0 0 42px rgba(34,211,238,.75),0 0 80px rgba(168,85,247,.42)}
}
.mjs-controls .button,.mjs-controls .btn{
    border-radius:18px!important;
    padding:12px 19px!important;
    background:linear-gradient(135deg,#6d28d9,#0891b2 52%,#b45309)!important;
}
.mjs-toolbar>div{border-radius:18px!important;}
@media(max-width:760px){
    .mjs-wrap{padding:12px!important;}
    .mjs-hero h2{font-size:27px!important;}
    .mjs-board{height:600px!important;border-radius:22px!important;}
    .mjs-tile{width:52px!important;height:66px!important;font-size:30px!important;border-radius:13px!important;}
}

/* v1.1.1 balanced tiles: smaller stones, larger arcane symbols */
.mjs-tile{
    width:66px!important;
    height:84px!important;
    border-radius:16px!important;
    font-size:52px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
    text-shadow:
        0 0 12px rgba(124,58,237,.48),
        0 0 4px rgba(250,204,21,.38),
        0 1px 0 rgba(255,255,255,.35)!important;
    box-shadow:
        0 8px 0 #2a1508,
        9px 13px 25px rgba(0,0,0,.56),
        0 0 18px rgba(250,204,21,.18),
        inset 3px 3px 0 rgba(255,255,255,.72),
        inset -4px -4px 0 rgba(46,16,101,.22)!important;
}
.mjs-tile:before{
    inset:6px!important;
    border-radius:13px!important;
}
.mjs-tile:after{
    inset:11px!important;
    opacity:.65!important;
}
.mjs-tile:hover:not(.blocked):not(.removed){
    transform:translateY(-5px) scale(1.03)!important;
    box-shadow:
        0 10px 0 #2a1508,
        10px 17px 30px rgba(0,0,0,.62),
        0 0 0 4px rgba(103,232,249,.30),
        0 0 34px rgba(103,232,249,.55),
        0 0 55px rgba(168,85,247,.35),
        inset 3px 3px 0 rgba(255,255,255,.75)!important;
}
.mjs-tile.selected{
    transform:translateY(-7px) scale(1.05)!important;
    box-shadow:
        0 10px 0 #2a1508,
        0 0 0 4px rgba(253,230,138,.95),
        0 0 42px rgba(253,230,138,.75),
        0 0 72px rgba(168,85,247,.55),
        10px 19px 34px rgba(0,0,0,.64)!important;
}
@keyframes mjsHintXXL{
    0%,100%{box-shadow:0 8px 0 #2a1508,9px 13px 25px rgba(0,0,0,.56),0 0 18px rgba(250,204,21,.18)}
    50%{box-shadow:0 10px 0 #2a1508,0 0 0 5px rgba(34,211,238,.90),0 0 42px rgba(34,211,238,.75),0 0 72px rgba(168,85,247,.42)}
}
@media(max-width:760px){
    .mjs-tile{width:46px!important;height:58px!important;font-size:39px!important;border-radius:12px!important;}
    .mjs-tile:before{inset:5px!important;border-radius:10px!important;}
    .mjs-tile:after{inset:9px!important;}
}

/* v1.1.2 softer compact tiles: smaller stones, calmer symbols */
.mjs-tile{
    width:54px!important;
    height:70px!important;
    border-radius:13px!important;
    font-size:40px!important;
    font-weight:800!important;
    color:#2b1a3f!important;
    background:
        radial-gradient(circle at 50% 34%,rgba(255,255,255,.66),rgba(255,247,214,.36) 34%,transparent 36%),
        linear-gradient(145deg,#f5e5b0 0%,#b89452 54%,#4b3019 100%)!important;
    border:1px solid rgba(255,244,190,.45)!important;
    text-shadow:
        0 0 4px rgba(124,58,237,.20),
        0 1px 0 rgba(255,255,255,.22)!important;
    box-shadow:
        0 6px 0 #2a1508,
        7px 10px 20px rgba(0,0,0,.48),
        0 0 10px rgba(250,204,21,.08),
        inset 2px 2px 0 rgba(255,255,255,.58),
        inset -3px -3px 0 rgba(46,16,101,.16)!important;
}
.mjs-tile:before{
    inset:5px!important;
    border-radius:10px!important;
    border-color:rgba(88,28,135,.20)!important;
    box-shadow:inset 0 0 10px rgba(124,58,237,.06)!important;
}
.mjs-tile:after{
    inset:10px!important;
    opacity:.34!important;
    border-color:rgba(6,182,212,.10)!important;
    box-shadow:0 0 8px rgba(6,182,212,.06), inset 0 0 5px rgba(250,204,21,.05)!important;
}
.mjs-tile:hover:not(.blocked):not(.removed){
    transform:translateY(-4px) scale(1.02)!important;
    box-shadow:
        0 8px 0 #2a1508,
        8px 14px 24px rgba(0,0,0,.54),
        0 0 0 3px rgba(103,232,249,.18),
        0 0 20px rgba(103,232,249,.24),
        0 0 34px rgba(168,85,247,.18),
        inset 2px 2px 0 rgba(255,255,255,.62)!important;
}
.mjs-tile.selected{
    transform:translateY(-5px) scale(1.03)!important;
    box-shadow:
        0 8px 0 #2a1508,
        0 0 0 3px rgba(253,230,138,.65),
        0 0 24px rgba(253,230,138,.32),
        0 0 40px rgba(168,85,247,.24),
        8px 15px 26px rgba(0,0,0,.56)!important;
}
.mjs-tile.blocked{filter:saturate(.30) brightness(.50) hue-rotate(12deg)!important;opacity:.48!important;}
@keyframes mjsHintXXL{
    0%,100%{box-shadow:0 6px 0 #2a1508,7px 10px 20px rgba(0,0,0,.48),0 0 10px rgba(250,204,21,.08)}
    50%{box-shadow:0 8px 0 #2a1508,0 0 0 4px rgba(34,211,238,.55),0 0 28px rgba(34,211,238,.38),0 0 45px rgba(168,85,247,.22)}
}
@media(max-width:760px){
    .mjs-tile{width:40px!important;height:52px!important;font-size:31px!important;border-radius:10px!important;}
    .mjs-tile:before{inset:4px!important;border-radius:8px!important;}
    .mjs-tile:after{inset:8px!important;}
}

/* v1.1.3 popup mode + compact stones with larger, softer symbols */
.mjs-popup-page{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 20% 12%,rgba(124,58,237,.24),transparent 32%),
        radial-gradient(circle at 78% 18%,rgba(6,182,212,.16),transparent 30%),
        linear-gradient(145deg,#05020d 0%,#0d1024 52%,#050816 100%);
    font-family:Arial,Helvetica,sans-serif;
    color:#f8fafc;
    overflow:auto;
}
.mjs-popup-wrap{
    max-width:1180px!important;
    min-height:calc(100vh - 28px);
    margin:14px auto!important;
    box-sizing:border-box;
}
.mjs-popup-hero{padding:14px 18px!important;margin-bottom:10px!important;}
.mjs-popup-open{background:linear-gradient(135deg,#67e8f9,#a78bfa)!important;color:#12091f!important;}
.mjs-tile{
    width:48px!important;
    height:64px!important;
    font-size:45px!important;
    font-weight:700!important;
    color:rgba(43,26,63,.70)!important;
    text-shadow:
        0 0 3px rgba(124,58,237,.10),
        0 1px 0 rgba(255,255,255,.16)!important;
    background:
        radial-gradient(circle at 50% 35%,rgba(255,255,255,.52),rgba(255,247,214,.25) 34%,transparent 38%),
        linear-gradient(145deg,#efdca2 0%,#aa874a 56%,#412815 100%)!important;
    box-shadow:
        0 5px 0 #241205,
        6px 9px 17px rgba(0,0,0,.46),
        0 0 8px rgba(250,204,21,.05),
        inset 2px 2px 0 rgba(255,255,255,.48),
        inset -3px -3px 0 rgba(46,16,101,.12)!important;
}
.mjs-tile:before{inset:3px!important;border-radius:9px!important;opacity:.55!important;}
.mjs-tile:after{inset:6px!important;opacity:.18!important;}
.mjs-tile:hover:not(.blocked):not(.removed){
    transform:translateY(-3px) scale(1.015)!important;
    box-shadow:
        0 7px 0 #241205,
        7px 12px 20px rgba(0,0,0,.52),
        0 0 0 3px rgba(103,232,249,.15),
        0 0 18px rgba(103,232,249,.18),
        inset 2px 2px 0 rgba(255,255,255,.54)!important;
}
.mjs-tile.selected{
    transform:translateY(-4px) scale(1.025)!important;
    box-shadow:
        0 7px 0 #241205,
        0 0 0 3px rgba(253,230,138,.48),
        0 0 20px rgba(253,230,138,.24),
        0 0 34px rgba(168,85,247,.18),
        7px 13px 22px rgba(0,0,0,.54)!important;
}
.mjs-tile.blocked{filter:saturate(.32) brightness(.52) hue-rotate(10deg)!important;opacity:.50!important;}
@media(max-width:760px){
    .mjs-tile{width:38px!important;height:50px!important;font-size:36px!important;border-radius:9px!important;}
    .mjs-tile:before{inset:3px!important;border-radius:7px!important;}
    .mjs-tile:after{inset:5px!important;}
    .mjs-popup-wrap{margin:0!important;min-height:100vh;border-radius:0!important;}
}


/* v1.1.4 Homepage only popup launcher */
.mjs-home-only .mjs-popup-panel{
    margin-top:18px;
    padding:26px;
    text-align:center;
    border:1px solid rgba(213,181,99,.32);
    border-radius:22px;
    background:radial-gradient(circle at center, rgba(111,70,180,.22), rgba(13,10,24,.78));
    box-shadow:0 18px 50px rgba(0,0,0,.38), inset 0 0 34px rgba(169,121,255,.12);
}
.mjs-popup-big{
    font-size:18px!important;
    padding:14px 28px!important;
    border-radius:999px!important;
    letter-spacing:.03em;
}
.mjs-home-only .mjs-popup-panel p{
    margin:14px 0 0;
    opacity:.82;
}


/* v1.1.5 popup only: larger stones in separate game window */
.mjs-popup-page .mjs-tile{
    width:56px!important;
    height:74px!important;
    font-size:52px!important;
    border-radius:12px!important;
}
.mjs-popup-page .mjs-tile:before{inset:4px!important;border-radius:10px!important;}
.mjs-popup-page .mjs-tile:after{inset:7px!important;}
@media(max-width:760px){
    .mjs-popup-page .mjs-tile{width:44px!important;height:58px!important;font-size:42px!important;border-radius:10px!important;}
    .mjs-popup-page .mjs-tile:before{inset:3px!important;border-radius:8px!important;}
    .mjs-popup-page .mjs-tile:after{inset:5px!important;}
}


/* v119 Layout-Auswahl */
.mahjong-layout-bar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px auto 18px;
  padding:10px 14px;
  border:1px solid rgba(203,169,93,.25);
  border-radius:16px;
  background:rgba(12,8,24,.58);
  box-shadow:0 0 28px rgba(92,52,160,.18);
}
.mahjong-layout-bar label{
  color:rgba(235,213,164,.9);
  font-weight:700;
  letter-spacing:.04em;
}
.mahjong-layout-select{
  min-width:220px;
  border-radius:12px;
  border:1px solid rgba(203,169,93,.35);
  background:rgba(18,12,34,.95);
  color:#ead7a3;
  padding:8px 12px;
  outline:none;
}
.mahjong-layout-select option{
  background:#160f28;
  color:#ead7a3;
}

.mjs-difficulty{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:8px auto 10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(218,185,111,.28);
  background:rgba(20,14,38,.62);
  color:rgba(237,218,169,.88);
  font-size:13px;
  letter-spacing:.03em;
  box-shadow:0 0 18px rgba(107,77,180,.14);
}

/* v124 compact spacing */
.mjs-board{
  --mjs-spacing-note: compact;
}
.mjs-popup .mjs-board,
body.mjs-popup .mjs-board{
  max-width: 980px;
}

/* v132 layout-based highscores */
.mjs-layout-scores{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
  margin-top:12px;
}
.mjs-layout-score-card{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(218,185,111,.22);
  background:rgba(16,10,32,.48);
  box-shadow:0 0 24px rgba(90,62,160,.12);
}
.mjs-layout-score-card h3{
  margin:0 0 10px;
  color:rgba(238,218,169,.94);
  font-size:18px;
  letter-spacing:.03em;
}
.mjs-layout-score-card .table-responsive{
  margin:0;
}

/* v133 highscore layout buttons */
.mjs-layout-buttonbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  justify-content:center;
}
.mjs-layout-btn{
  border-radius:999px !important;
  padding:7px 13px !important;
  border:1px solid rgba(218,185,111,.25) !important;
  background:rgba(20,14,38,.55) !important;
  color:rgba(237,218,169,.9) !important;
  text-decoration:none !important;
}
.mjs-layout-btn.active,
.mjs-layout-btn:hover{
  background:rgba(138,98,210,.35) !important;
  border-color:rgba(236,205,127,.55) !important;
  box-shadow:0 0 18px rgba(138,98,210,.22);
}
.mjs-selected-layout-title{
  text-align:center;
  margin:8px 0 14px;
  color:rgba(237,218,169,.92);
  font-size:16px;
}