:root{--bg:#071b12;--bg2:#0b2a1a;--bg3:#083423;--card:#0f261d;--card2:#122d22;--text:#f3f7f4;--muted:#c7d4cc;--muted2:#a9bbaf;--accent:#25d08f;--accent2:#d12b3b;--gold:#d6b35a;--line:rgba(243,247,244,.14);--line2:rgba(243,247,244,.1);--shadow:rgba(0,0,0,.55)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:radial-gradient(1100px 700px at 25% 12%,#25d08f1a,#0000 55%),radial-gradient(900px 600px at 80% 22%,#d12b3b14,#0000 60%),radial-gradient(1400px 900px at 50% 0%,var(--bg3),var(--bg));color:var(--text);overflow:hidden}a{color:inherit}.container{max-width:1200px;margin:0 auto;padding:24px}.card{background:linear-gradient(180deg,#122d22eb,#0a1c14e0);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:18px;padding:20px;box-shadow:0 18px 55px var(--shadow)}.btn{cursor:pointer;border:0;border-radius:14px;padding:12px 16px;font-weight:700;color:#07140f;background:linear-gradient(135deg,var(--accent),var(--gold));box-shadow:0 10px 26px #00000059}.btn:hover{filter:brightness(1.02) saturate(1.02)}.btn:active{transform:translateY(1px)}.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.btn.secondary:hover{background:#f3f7f40f}.input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#00000047;color:var(--text)}.input::placeholder{color:#c7d4ccd9}.grid{display:grid;gap:16px}.row{display:flex;gap:12px;align-items:center}.title{font-size:28px;font-weight:800;letter-spacing:.2px}.sub{color:var(--muted)}.tile{width:44px;height:60px;border-radius:10px;background:linear-gradient(180deg,#fbfbf7,#e8eadf);color:#08101a;display:flex;align-items:center;justify-content:center;font-weight:900;border:1px solid rgba(0,0,0,.18);box-shadow:0 10px 20px #00000047}.tile.small{width:34px;height:48px}.tile.selected{outline:3px solid rgba(37,208,143,.7)}.board{display:grid;grid-template-columns:1fr 320px;gap:18px}.pile{display:flex;flex-wrap:wrap;gap:8px}.hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.badge{padding:6px 10px;border-radius:999px;background:#0000004d;border:1px solid var(--line2);font-size:12px;color:#f3f7f4e6}.mh-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.mh-toggle input{display:none}.mh-toggle .slider{width:42px;height:22px;background-color:#f3f7f447;border:1px solid var(--line2);border-radius:999px;position:relative;transition:background-color .2s ease,border-color .2s ease}.mh-toggle .slider:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background-color:#fbfbf7;border-radius:50%;box-shadow:0 2px 8px #00000059;transition:transform .2s ease}.mh-toggle input:checked+.slider{background-color:#25d08f8c;border-color:#25d08f8c}.mh-toggle input:checked+.slider:before{transform:translate(20px)}.mh-viewport{height:100dvh;display:flex;flex-direction:column;box-sizing:border-box}.mh-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.mh-footer{flex:0 0 auto;border-top:1px solid var(--line2);background:linear-gradient(180deg,#122d22eb,#0a1c14e6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:12px;margin-top:12px}@keyframes mhPulse{0%{box-shadow:0 0 #25d08f52}70%{box-shadow:0 0 0 10px #25d08f00}to{box-shadow:0 0 #25d08f00}}@keyframes mhGlow{0%{filter:drop-shadow(0 0 0 rgba(37,208,143,0))}50%{filter:drop-shadow(0 0 10px rgba(37,208,143,.42))}to{filter:drop-shadow(0 0 0 rgba(37,208,143,0))}}.mh-turn-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#122d22eb,#0a1c14db);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mh-turn-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px #25d08f8c;flex:0 0 auto}.mh-turn-urgent .mh-turn-dot{background:var(--accent2);box-shadow:0 0 14px #d12b3b8c}.mh-turn-cta{font-weight:900;letter-spacing:.2px}.mh-turn-sub{color:#c7d4cceb;font-size:12px;margin-top:2px}.mh-focus-ring{border:1px solid var(--line2);border-radius:16px;padding:12px}.mh-focus-ring.active{border-color:#25d08f8c;box-shadow:0 0 0 2px #25d08f2e,0 18px 50px #0006;animation:mhPulse 1.6s ease-out infinite}.mh-focus-ring.urgent.active{border-color:#d12b3b99;box-shadow:0 0 0 2px #d12b3b29,0 18px 50px #0006}.mh-action-btn-highlight{outline:2px solid rgba(37,208,143,.5);box-shadow:0 0 0 3px #25d08f24}.mh-action-btn-highlight.urgent{outline-color:#d12b3b99;box-shadow:0 0 0 3px #d12b3b29}.mh-hand-tile-canplay{animation:mhGlow 1.4s ease-in-out infinite}.mh-hand-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.mh-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#00000047;border:1px solid var(--line2);color:#f3f7f4f2;font-size:12px;font-weight:800}:focus-visible{outline:3px solid rgba(214,179,90,.75);outline-offset:2px;border-radius:12px}.card{background:linear-gradient(180deg,#122d22eb,#0a1c14e0)!important;border:1px solid var(--line2);box-shadow:0 18px 55px var(--shadow)}.mh-footer{background:linear-gradient(180deg,#122d22eb,#0a1c14e6)!important}.card[style*="border-style: dashed"]{background:linear-gradient(180deg,#183a2beb,#0c2118e0)!important}[role=dialog][aria-label="Game ended"]>div{background:linear-gradient(180deg,#122d22f5,#0a1c14f0)!important;border:1px solid var(--line2);box-shadow:0 22px 70px #000000a6}[role=dialog][aria-label="Game ended"]{background:radial-gradient(800px 400px at 50% 0%,rgba(214,179,90,.12),transparent 60%),#000000bf}.card:has(.badge):has(div>div.sub):has(div[style*="margin-top: 12px"]>div.sub){position:relative;border-color:#25d08fa6!important;background:radial-gradient(420px 180px at 50% 0%,rgba(37,208,143,.18),transparent 60%),linear-gradient(180deg,#122d22f5,#0a1c14eb)!important;box-shadow:0 0 0 2px #25d08f4d,0 18px 55px #00000073}.card:has(.badge):has(div[style*="margin-top: 12px"]>div.sub):after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:20px;pointer-events:none;box-shadow:0 0 #25d08f73;animation:mhTurnPulse 1.8s ease-out infinite}@keyframes mhTurnPulse{0%{box-shadow:0 0 #25d08f73}70%{box-shadow:0 0 0 12px #25d08f00}to{box-shadow:0 0 #25d08f00}}.mh-footer .mh-focus-ring>.row:has(>div.row:last-child:not(:has(button)))>div.row:first-child{display:none!important}.mh-footer button[disabled],.mh-footer button[disabled] span{opacity:1!important}.mh-footer button[disabled] img{opacity:1!important;filter:none!important}@supports selector(body:has(article)){body:has(article){overflow-y:auto;overflow-x:hidden}body:has(article),body:has(article) #root{height:auto;min-height:100%}body:has(article) .container{height:auto;min-height:100vh}body:has(article) article.card{overflow:visible}body:has(article) article img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:16px}body:has(article) article figure{margin:14px 0 0}}@supports not selector(body:has(article)){body{overflow-y:auto;overflow-x:hidden}}.mh-brand-link{display:inline-flex;align-items:center;text-decoration:none;border-radius:14px;padding:6px 8px}.mh-brand-link:hover{background:#f3f7f40f}.mh-brand-link:active{transform:translateY(1px)}.mh-brand-mark{display:block;height:44px;width:auto}.mh-site-name{font-weight:900;letter-spacing:.2px;font-size:16px;color:var(--text);opacity:.95;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand{display:flex;align-items:center;gap:12px}@supports selector(body:has(main)){body:has(main){overflow-y:auto;overflow-x:hidden}body:has(main),body:has(main) #root{height:auto;min-height:100%}body:has(main) .container{min-height:100vh}}@supports not selector(body:has(main)){body{overflow-y:auto;overflow-x:hidden}}img{max-width:100%;height:auto}h1,h2,h3,p,a,button{overflow-wrap:anywhere}.grid>*{min-width:0}@media (max-width: 640px){.container{padding:16px}.card{padding:16px;border-radius:16px}.title{font-size:22px;line-height:1.15}.row{flex-wrap:wrap}.btn{width:100%;justify-content:center}}@media (max-width: 380px){.container{padding:12px}.card{padding:14px}.btn{padding:12px 14px}}@media (max-width: 900px){section.card[aria-label*="Play Hong Kong Mahjong online"] .grid,section.card[aria-label*=香港麻雀線上對戰] .grid{grid-template-columns:1fr!important;align-items:stretch!important}section.card[aria-label*="Play Hong Kong Mahjong online"] figure,section.card[aria-label*=香港麻雀線上對戰] figure{order:-1}section.card[aria-label*="Play Hong Kong Mahjong online"] figure img,section.card[aria-label*=香港麻雀線上對戰] figure img{width:100%;max-height:320px;object-fit:cover}}@media (max-width: 640px){section.card[aria-label*="Play Hong Kong Mahjong online"] .grid,section.card[aria-label*=香港麻雀線上對戰] .grid{gap:12px}section.card[aria-label*="Play Hong Kong Mahjong online"] .grid .mh-pill,section.card[aria-label*=香港麻雀線上對戰] .grid .mh-pill{width:100%;justify-content:center;padding:10px 12px}}section.card[aria-label*="Hong Kong Mahjong learning resources"] .grid,section.card[aria-label*=香港麻雀學習資源] .grid{align-items:stretch}@media (max-width: 900px){section.card[aria-label*="Hong Kong Mahjong learning resources"] .grid,section.card[aria-label*=香港麻雀學習資源] .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media (max-width: 640px){section.card[aria-label*="Hong Kong Mahjong learning resources"] .grid,section.card[aria-label*=香港麻雀學習資源] .grid{grid-template-columns:1fr!important}section.card[aria-label*="Hong Kong Mahjong learning resources"] a.card,section.card[aria-label*=香港麻雀學習資源] a.card{padding:16px!important}}html,body{max-width:100%}body,#root{overflow-x:hidden}