@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--green:#07352e;--green2:#114d41;--green3:#1f6657;--gold:#e2bd74;--gold2:#a97734;--cream:#faf8f2;--cream2:#f3eee2;--ink:#213b35;--muted:#6b7b73;--line:#e7e8df;--white:#fff;--radius:20px;--shadow:0 16px 48px rgba(14,47,38,.065)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--cream);font:15px/1.75 'DM Sans','Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img,video{max-width:100%}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:'Plus Jakarta Sans','DM Sans',sans-serif;letter-spacing:-.04em;line-height:1.23}h2{font-size:clamp(27px,3vw,39px)}h3{font-size:19px}p{margin-bottom:1.1rem}strong{font-weight:800}::selection{background:#d4b275;color:#12382c}.container{width:min(1200px,calc(100% - 60px));margin-inline:auto}.skip-link{position:absolute;top:-70px;left:24px;background:#fff;color:#102f29;padding:12px 16px;z-index:999}.skip-link:focus{top:12px}.site-shell{min-height:100vh;display:flex;flex-direction:column}.site-shell main{flex:1}.site-header{position:sticky;top:0;z-index:100;background:rgba(248,247,240,.97);backdrop-filter:blur(18px);border-bottom:1px solid #e8e7db}.header-inside{height:86px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;line-height:1.16;flex-shrink:0}.brand-symbol{width:45px;height:48px;display:grid;place-items:center;background:var(--green);border-radius:10px;color:#e6c98f;font-weight:700;font-size:30px;font-family:'Noto Sans CJK SC','Microsoft YaHei',serif;box-shadow:inset 0 -4px 0 #092b26,0 4px 0 #d4d2be}.brand strong{display:block;font-size:17px;letter-spacing:-.065em;color:#0b3029}.brand-accent{color:#bb8d46}.brand small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#85928b;font-weight:700}.main-nav{display:flex;align-items:center;gap:6px}.main-nav a{padding:9px 10px;border-radius:7px;color:#3c5d53;font-size:12px;font-weight:800;white-space:nowrap;transition:background .15s,color .15s}.main-nav a:hover,.main-nav a[aria-current=page]{color:var(--green);background:#e5ebdf}.menu-toggle{display:none;border:0;background:transparent;padding:10px;min-width:42px}.menu-toggle span{height:2px;width:24px;background:var(--green);display:block;margin:5px;border-radius:5px}
.eyebrow{font-size:11px;line-height:1.4;font-weight:800;letter-spacing:.19em;color:#aa813b;text-transform:uppercase;margin:0 0 14px}.hero{min-height:618px;position:relative;color:#fff;background:#082c26;overflow:hidden}.hero-image{background-image:linear-gradient(90deg,rgba(4,35,30,.97) 0%,rgba(4,35,30,.87) 34%,rgba(4,35,30,.20) 71%,rgba(4,35,30,.05) 100%),url('/assets/images/hero-mahjong.webp');background-size:cover;background-position:center 45%;position:absolute;inset:0}.hero::before{content:'';height:1px;background:rgba(255,255,255,.1);position:absolute;top:0;left:0;right:0;z-index:1}.hero-inner{min-height:618px;position:relative;display:flex;align-items:center;padding-block:75px}.hero-content{max-width:660px}.hero-pill{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(226,189,116,.48);border-radius:40px;color:#f0d7a3;padding:8px 17px;display:inline-flex;gap:9px;align-items:center;margin-bottom:23px}.dot{width:6px;height:6px;border-radius:50%;background:#dabc7e;display:inline-block}.hero h1{font-size:clamp(48px,5.8vw,77px);letter-spacing:-.075em;line-height:1.09;font-weight:800;margin-bottom:23px;color:#faf7e9}.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--gold);letter-spacing:-.052em}.hero-content>p{max-width:525px;color:#e0e9df;font-size:17px;line-height:1.95;margin-bottom:30px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px}.btn{border-radius:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;padding:12px 22px;line-height:1.3;white-space:nowrap;font-size:13px;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s}.btn:hover{transform:translateY(-2px)}.btn:focus-visible,.main-nav a:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #d2a558;outline-offset:3px}.btn-gold{background:var(--gold);color:#142d25}.btn-gold:hover{background:#f1cf90}.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(7,53,46,.14)}.btn-outline:hover{background:rgba(255,255,255,.10)}.btn-dark{color:#fff;background:var(--green)}.btn-dark:hover{background:var(--green2)}.btn-plain{color:var(--green);background:#eff3ec;border-color:#dde8dc}.btn-plain:hover{background:#e1eae0}.hero-stats{margin-top:43px;display:flex;gap:0;flex-wrap:wrap}.hero-stats>span{display:flex;flex-direction:column;min-width:135px;padding:0 24px;border-left:1px solid rgba(255,255,255,.20)}.hero-stats>span:first-child{padding-left:0;border:0}.hero-stats strong{font:800 26px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff}.hero-stats small{font-size:11px;color:#c5d4cc;letter-spacing:.025em}.quick-bar{background:#fff;border-bottom:1px solid var(--line)}.quick-inner{min-height:67px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.quick-inner>span{font-size:12px;font-weight:800;color:#97a29a;text-transform:uppercase;letter-spacing:.1em}.quick-inner a{font-size:12px;font-weight:700;color:var(--green2)}.quick-inner a:hover{text-decoration:underline}.quick-inner b{color:#ccb789;font-size:13px}.section{padding-block:92px}.section-heading{max-width:730px;margin-bottom:37px}.section-heading h2{font-size:clamp(27px,3vw,40px);margin-bottom:14px}.section-heading>p:last-child{font-size:15px;color:var(--muted);line-height:1.9}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.content-card{position:relative;min-height:224px;background:#fff;padding:29px 29px 52px;border:1px solid #e5e8df;border-radius:16px;box-shadow:0 5px 20px rgba(9,46,36,.02);transition:transform .2s,box-shadow .2s,border-color .2s}.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c5d8c9}.card-tag{font-size:10px;font-weight:800;color:var(--gold2);letter-spacing:.13em}.content-card h3{font-size:20px;margin:15px 0 12px}.content-card p{font-size:13px;color:var(--muted);line-height:1.85}.card-arrow{position:absolute;bottom:22px;right:27px;font-size:21px;color:#a98b53}.section-warm{background:#efece2}.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}.two-col .section-heading{margin-bottom:20px}.body-copy{font-size:15px;color:#586a61;line-height:2}.text-link{display:inline-flex;gap:12px;align-items:center;font-size:13px;font-weight:800;color:#146151;margin-top:12px}.text-link:hover{text-decoration:underline}.example-panel{background:#fff;border:1px solid #dfe2d6;border-radius:18px;padding:23px;box-shadow:var(--shadow);overflow:hidden}.example-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:21px}.example-header>span:first-child{font-size:10px;letter-spacing:.12em;font-weight:800;color:#73847a}.success-tag{background:#e4f0e5;border:1px solid #d1e6d1;padding:5px 10px;border-radius:20px;font-size:10px;color:#266549;font-weight:700}.hand-preview{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}.hand-group{display:flex;background:#e9eee8;padding:8px 5px;border-radius:9px;gap:1px;max-width:100%;overflow:hidden}.tile{width:47px;height:63px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}.example-panel p{color:#66776a;font-size:13px;line-height:1.9;margin-top:15px;margin-bottom:0}.example-footnote{display:block;font-size:11px;color:#a0aa9d;margin-top:9px}.visual-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.visual-card{display:block;background:#fff;border:1px solid #e5e8e1;border-radius:16px;padding:34px 26px 25px;transition:transform .2s,border .2s}.visual-card:hover{transform:translateY(-3px);border-color:#93b1a3}.visual-card .tile-hand{justify-content:center;background:#eff1e8;padding:21px 6px;border-radius:10px;min-height:117px}.tile-hand{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.visual-card h3{font-size:18px;margin:19px 0 7px}.visual-card p{font-size:13px;color:var(--muted);margin:0}.center-cta{text-align:center;margin-top:32px}.video-section{background:#0c3931;color:#e7efe9}.video-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}.video-section .section-heading h2{color:#fff}.video-section .section-heading>p:last-child{color:#bccfc5}.video-section .text-link{color:#e5c383}.check-list{list-style:none;padding:0;margin:25px 0}.check-list li{position:relative;padding:4px 0 4px 26px;color:#e1ede4;font-size:13px}.check-list li:before{content:'✓';position:absolute;left:1px;color:#e1bc76}.video-frame{background:#082821;border:1px solid #407566;padding:10px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.video-frame video{display:block;width:100%;aspect-ratio:16/9;border-radius:9px;background:#0b2c25}.video-frame p{font-size:11px;color:#a5c0b5;margin:10px 8px 2px}.faq-list{border:1px solid #e6e9dd;border-radius:15px;overflow:hidden;background:#fff}.faq-list details+details{border-top:1px solid #e8eadf}.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:21px 25px;font-weight:800;font-size:14px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:24px;font-weight:400;color:#977240}.faq-list details[open] summary:after{content:'−'}.faq-answer{padding:0 25px 19px;color:var(--muted);font-size:14px;line-height:1.85}.faq-answer p:last-child{margin-bottom:0}.closing-cta{background:#082e28;color:#fff;text-align:center;padding:88px 20px;background-image:radial-gradient(circle at 50% 15%,#135549 0,transparent 65%)}.closing-cta h2{font-size:clamp(30px,4.4vw,52px);color:#fff;letter-spacing:-.065em;margin-bottom:27px}.site-footer{background:#08251f;color:#b6c8bf;padding-top:66px}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:65px;padding-bottom:57px}.brand-footer .brand-symbol{background:#194b3f;box-shadow:none}.brand-footer strong{color:#fff}.footer-top p{font-size:13px;line-height:1.85;margin-top:20px;max-width:380px}.footer-top h3{font-size:13px;color:#f1dfbd;margin:4px 0 21px;letter-spacing:.05em}.footer-top>div:nth-child(n+2) a{display:block;color:#b6c8bf;font-size:13px;margin-bottom:10px}.footer-top a:hover{color:#fff}.footer-note{font-size:11px!important;color:#83978c;margin-top:18px!important}.footer-bottom{border-top:1px solid #315046;padding:19px 0 23px;display:flex;justify-content:space-between;gap:20px;color:#9eb6a9;font-size:11px}
/* Article pages */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:80px;padding-top:33px;padding-bottom:110px}.article-main{min-width:0}.breadcrumbs{display:flex;align-items:center;gap:11px;font-size:12px;color:#86968d;margin-bottom:40px}.breadcrumbs a:hover{color:#0b5b4d}.breadcrumbs span:last-child{color:#315449;font-weight:700}.page-intro{margin-bottom:41px}.page-intro h1{font-size:clamp(37px,4vw,53px);line-height:1.13;letter-spacing:-.06em;margin-bottom:20px}.page-intro .lead{font-size:17px;line-height:1.85;color:#61766a;max-width:760px}.article-sidebar{padding-top:98px}.sidebar-sticky{position:sticky;top:115px;border:1px solid #e1e6db;background:#fff;border-radius:15px;padding:24px 22px;box-shadow:0 9px 30px rgba(0,0,0,.02)}.sidebar-sticky a{font-size:12px;display:block;margin:7px -8px;padding:8px;border-radius:5px;font-weight:700;color:#426154}.sidebar-sticky a:hover{color:var(--green);background:#eef4eb}.sidebar-sticky hr{border:0;border-top:1px solid #e9ede5;margin:21px 0}.sidebar-sticky p:last-child{font-size:11px;color:#81958a;line-height:1.85;margin:0}.prose{font-size:15px;color:#53685d;line-height:1.98}.prose p{margin-bottom:21px}.prose h2{font-size:clamp(24px,2.6vw,32px);margin:48px 0 15px;color:#1f4036}.prose h2:first-child{margin-top:0}.prose ul,.prose ol{padding-left:22px;margin:0 0 25px}.prose li{margin:9px 0;padding-left:3px}.prose a{color:#14634f;text-decoration:underline}.numbered-copy li{padding-bottom:8px}.inline-panel{margin:30px 0 38px;background:#fdfefb}.inline-panel .hand-preview{gap:8px}.callout{border-radius:12px;margin:31px 0;border-left:4px solid #56866f;background:#eaf3e9;padding:22px 25px}.callout strong{display:block;font-size:14px;color:#245944;margin-bottom:6px}.callout p{font-size:13px;line-height:1.9;margin:0;color:#567364}.callout.warn{border-color:#d49e47;background:#fbf1dd}.callout.warn strong{color:#80612d}.callout.warn p{color:#856e49}.next-guide{background:var(--green);color:#e6eee8;border-radius:17px;margin-top:48px;padding:30px 34px}.next-guide>span{font-size:11px;letter-spacing:.14em;color:#c8ad76;font-weight:800}.next-guide h3{font-size:24px;color:#fff;margin:11px 0 15px}.next-guide p{color:#b9d0c5;font-size:13px}.next-guide .btn{background:var(--gold);color:var(--green);margin-right:15px}.next-guide .text-link{color:#f6d99a}.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 27px}.count-grid>div{background:#edf3eb;border:1px solid #dce5d7;border-radius:12px;padding:17px;text-align:center}.count-grid strong{display:block;color:#165a49;font-size:31px;line-height:1.2}.count-grid span{font-size:11px;color:#6b8476}.anchor-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:37px;padding:15px;background:#fff;border-radius:10px;border:1px solid #e5eae2}.anchor-nav span{font-size:11px;color:#95a39a;font-weight:800}.anchor-nav a{font-size:12px;color:#1e5f4f;font-weight:800}.anchor-nav a:hover{text-decoration:underline}.tile-section{padding-top:24px;margin-bottom:37px;border-top:1px solid #e0e5dc}.subsection-header{display:flex;gap:17px;align-items:center;margin-bottom:22px}.category-symbol{font-size:27px;color:#d4ac67;display:grid;place-items:center;background:var(--green);width:54px;height:55px;flex:none;border-radius:13px}.subsection-header .eyebrow{margin-bottom:5px}.subsection-header h2{font-size:25px;margin:0 0 5px}.subsection-header p:last-child{font-size:13px;color:#71867a;margin:0}.tile-gallery{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;background:#fff;padding:16px 10px;border:1px solid #e6e7dc;border-radius:15px}.tile-gallery figure{margin:0;min-width:0;text-align:center}.tile-gallery .tile{width:100%;height:auto;max-width:65px;display:block;margin:auto}.tile-gallery figcaption{font-size:9px;font-weight:700;line-height:1.5;color:#738a7d;margin-top:8px}.steps{margin:29px 0}.step{display:flex;gap:23px;padding:27px 0;border-bottom:1px solid #e5e7df}.step:first-child{border-top:1px solid #e5e7df}.step-number{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;background:#e6ecdf;color:#18624d;font-size:15px;font-weight:800;flex-shrink:0}.step h3{margin:0 0 8px}.step p{font-size:14px;color:#64796c;line-height:1.9;margin:0}.info-table-wrap{max-width:100%;overflow-x:auto;border:1px solid #e1e6df;border-radius:12px;background:#fff;margin:28px 0}.info-table{border-collapse:collapse;width:100%;min-width:550px;font-size:13px}.info-table th{background:#eaf0e7;color:#2a5948;text-align:left;padding:13px 14px}.info-table td{border-top:1px solid #edf0e9;padding:14px;vertical-align:top;color:#617366}.info-table td:first-child{font-weight:800;color:#274e40}.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:26px 0}.comparison-card{background:#fff;border:1px solid #e1e6dc;border-radius:14px;padding:21px;min-width:0}.comparison-card .tile-hand{margin:18px 0;background:#f0f2e9;padding:11px 8px;border-radius:10px;min-height:85px}.comparison-card .tile{width:51px;height:68px}.comparison-card p{font-size:13px;color:#6a7e71;line-height:1.85;margin:0}.correct-label,.incorrect-label{font-size:10px;color:#258265;letter-spacing:.08em;font-weight:800}.incorrect-label{color:#b95954}.comparison-card.invalid{border-color:#ead6d3}.hand-caption-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.hand-caption-grid span{text-align:center;background:#edf2ea;padding:3px 10px;font-size:10px;color:#36624f;font-weight:800;border-radius:16px}.faq-page-content{margin-top:26px}.error-page{padding:130px 0;min-height:60vh}.error-page h1{font-size:42px;max-width:600px}.error-page p:not(.eyebrow){color:#64786e}
/* Glossary */
.glossary-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin:27px 0}.glossary-controls label{font-size:13px;font-weight:800}.glossary-controls input{flex:1;min-width:190px;background:#fff;border:1px solid #dfe6df;border-radius:10px;padding:12px 16px;outline:none;color:#24473b}.glossary-controls input:focus{border-color:#4e9076}.glossary-controls span{font-size:12px;color:#8e9e90}.glossary-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0 70px}.term-item{background:#fff;border:1px solid #e3e9df;border-radius:13px;padding:21px}.term-item h3{font-size:16px;margin-bottom:7px}.term-item p{font-size:12px;line-height:1.8;color:#6e8074;margin:0}.term-item[hidden]{display:none!important}
/* Training */
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:35px}.training-panel{border:1px solid #e3e7dc;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 7px 25px rgba(7,53,46,.035);min-height:443px}.training-head{padding:25px 27px;border-bottom:1px solid #e8ebe4;display:flex;justify-content:space-between;gap:14px}.training-head h2{font-size:22px;margin:0 0 8px}.training-head p:not(.eyebrow){color:#768779;font-size:12px;line-height:1.8;margin:0}.lesson-chip{font-size:10px;color:#36684c;padding:5px 9px;border-radius:18px;background:#edf5ea;height:fit-content;white-space:nowrap}.flashcard-area{display:flex;flex-direction:column;align-items:center;padding:22px}.flash-tile{background:#edf2e9;min-height:168px;min-width:146px;display:grid;place-items:center;border-radius:12px}.flash-tile .tile{width:97px;height:129px}.flashcard-area>p{font-size:12px;color:#6c8074;margin:15px 0 5px}.flash-answer{font-weight:800;color:#1b5c49;min-height:28px;font-size:15px}.training-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;justify-content:center}.training-actions .btn{min-height:42px;padding:9px 14px}.quiz-area{padding:23px 26px}.quiz-intro{font-size:14px;color:#718679;line-height:1.9}.quiz-question{font-weight:800;font-size:17px;margin-bottom:15px;line-height:1.55}.quiz-options{display:grid;gap:8px}.quiz-option{border:1px solid #dce5da;background:#f8faf5;border-radius:9px;text-align:left;padding:10px 13px;color:#254438;font-weight:700;font-size:12px;cursor:pointer}.quiz-option:hover:not(:disabled){border-color:#74a08b}.quiz-option.selected-correct{border-color:#459770;background:#e4f4e8}.quiz-option.selected-wrong{border-color:#d7796c;background:#fbe8e3}.quiz-option:disabled{cursor:default}.quiz-feedback{background:#f2f3e9;border-radius:8px;padding:11px 13px;font-size:12px;line-height:1.7;margin-top:12px}.quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.quiz-actions small{color:#82968a}.quiz-actions .btn{min-height:39px;padding:9px 14px}.hand-builder-section{padding-top:47px}.builder{background:#fff;border:1px solid #e1e8dd;border-radius:17px;padding:26px;box-shadow:var(--shadow)}.builder-top{display:flex;align-items:center;justify-content:space-between;font-weight:800;gap:12px;margin-bottom:15px}.counter{font-size:12px;border:1px solid #d2e2d5;background:#edf5ea;border-radius:22px;padding:4px 11px;color:#316d52;white-space:nowrap}.selected-hand{min-height:104px;background:#eaf0e8;border:1px dashed #bbd0bf;border-radius:10px;padding:14px;display:flex;align-items:center;gap:3px;flex-wrap:wrap}.selected-hand .tile{width:49px;height:65px;cursor:pointer;transition:transform .12s}.selected-hand .tile:hover{transform:translateY(-6px)}.empty-hand{color:#809788;margin:0;font-size:13px}.hand-result{padding:15px 18px;margin:13px 0;border:1px solid #e3e8dc;background:#f6f8f2;border-radius:10px;font-size:13px;color:#5b7565}.hand-result.success{background:#e1f3e8;border-color:#b9dbbd;color:#165e3b}.hand-result.failure{background:#fff1e9;border-color:#f2d8c7;color:#895332}.builder-buttons{display:flex;gap:9px;flex-wrap:wrap}.builder-buttons .btn{min-height:41px;font-size:12px;padding:9px 13px}.builder-note{margin:15px 0 19px;color:#7f8d81;font-size:12px}.tile-picker{display:grid;gap:21px}.picker-row{border-top:1px solid #edf0e9;padding-top:18px}.picker-row h3{font-size:13px;color:#385749;margin:0 0 12px}.picker-row .tile-hand{gap:7px}.tile-choice{position:relative;background:#f0f3e9;border:1px solid #dfe9db;border-radius:7px;padding:6px 3px;min-width:52px;cursor:pointer;display:inline-flex;align-items:center;flex-direction:column;gap:2px}.tile-choice:hover{border-color:#83ad90;background:#e4ece0}.tile-choice:disabled{opacity:.35;cursor:default}.tile-choice .tile{width:43px;height:57px}.tile-choice small{font-size:9px;color:#7a9283}.mini-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.mini-card-grid .content-card{min-height:190px}.end-nav{padding-top:55px}
@media(max-width:1190px){.header-inside{height:76px}.main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fbfaf5;flex-direction:column;align-items:stretch;padding:12px max(24px,calc((100vw - 1200px)/2));gap:0;box-shadow:0 20px 30px rgba(0,0,0,.1);border-bottom:1px solid #e1e7dd}.main-nav.is-open{display:flex}.main-nav a{padding:13px 10px;font-size:14px}.menu-toggle{display:block}.article-layout{gap:40px;grid-template-columns:minmax(0,1fr) 220px}.hero{min-height:570px}.hero-inner{min-height:570px}}
@media(max-width:900px){.container{width:min(100% - 36px,1200px)}.card-grid,.visual-category-grid,.glossary-list,.mini-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col,.video-split{grid-template-columns:1fr;gap:35px}.section{padding-block:64px}.video-frame{max-width:730px}.article-layout{display:block;padding-top:28px;padding-bottom:80px}.article-sidebar{display:none}.tile-gallery{grid-template-columns:repeat(9,minmax(0,1fr))}.hero-image{background-position:60% center}.hero-content{max-width:540px}.footer-top{gap:30px}}
@media(max-width:650px){.brand-symbol{width:39px;height:42px;font-size:25px}.brand strong{font-size:15px}.brand small{font-size:9px}.header-inside{height:69px}.hero,.hero-inner{min-height:636px}.hero-inner{align-items:flex-end;padding-bottom:52px;padding-top:70px}.hero-image{background-image:linear-gradient(0deg,rgba(4,35,30,.99) 6%,rgba(4,35,30,.83) 49%,rgba(4,35,30,.18) 100%),url('/assets/images/hero-mahjong.webp');background-size:auto 100%;background-position:60% center}.hero h1{font-size:clamp(42px,11.5vw,61px)}.hero-content>p{font-size:14px;line-height:1.85}.hero-stats{margin-top:31px}.hero-stats>span{min-width:95px;padding:0 12px}.hero-stats strong{font-size:22px}.hero-stats small{font-size:9px}.quick-inner{padding:13px 0;gap:8px}.quick-inner>span{width:100%}.quick-inner a{font-size:10px}.quick-inner b{font-size:10px}.card-grid,.visual-category-grid,.glossary-list,.mini-card-grid,.training-grid,.comparison-grid{grid-template-columns:1fr}.section{padding-block:55px}.section-heading{margin-bottom:25px}.content-card{min-height:180px;padding:22px 25px 42px}.content-card h3{margin-top:9px}.two-col{gap:28px}.hero-actions{gap:8px}.btn{min-height:44px;padding:11px 16px;font-size:12px;gap:9px}.example-panel{padding:14px}.example-header{flex-wrap:wrap}.hand-group{padding:5px 3px;gap:0}.hand-preview{gap:5px}.hand-group .tile{width:31px;height:42px}.hand-caption-grid{display:none}.example-panel p{font-size:12px}.footer-top{grid-template-columns:1fr 1fr;gap:25px 12px}.footer-top>div:first-child{grid-column:span 2}.site-footer{padding-top:45px}.footer-bottom{flex-direction:column;gap:4px}.page-intro h1{font-size:clamp(32px,9vw,45px)}.page-intro .lead{font-size:14px}.page-intro{margin-bottom:28px}.breadcrumbs{margin-bottom:24px}.prose{font-size:14px}.prose h2{font-size:24px;margin-top:37px}.count-grid{grid-template-columns:repeat(4,1fr);gap:5px}.count-grid>div{padding:11px 2px}.count-grid strong{font-size:24px}.count-grid span{font-size:9px}.tile-gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:15px}.subsection-header{align-items:flex-start}.subsection-header h2{font-size:20px}.subsection-header p:last-child{font-size:12px}.category-symbol{width:42px;height:44px;font-size:22px}.tile-gallery .tile{max-width:64px}.step{gap:15px}.step-number{width:38px;height:38px;font-size:12px;flex-shrink:0}.step h3{font-size:17px}.step p{font-size:13px}.next-guide{padding:26px 20px}.next-guide h3{font-size:22px}.training-panel{min-height:0}.training-grid{padding-bottom:5px}.builder{padding:16px}.selected-hand .tile{width:34px;height:45px}.builder-top{font-size:12px}.tile-picker .tile-hand{gap:5px}.tile-choice{min-width:47px}.tile-choice .tile{width:40px;height:54px}.glossary-list{gap:10px}.closing-cta{padding:65px 15px}}
@media(max-width:380px){.brand strong{font-size:13px}.hero h1{font-size:42px}.hero-stats>span{min-width:85px}.hand-group .tile{width:27px;height:36px}.tile-gallery{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}

.tile-remover{line-height:0;border-radius:5px}.tile-remover:hover{background:rgba(25,93,71,.08)!important}.tile-remover:focus-visible{outline:3px solid #d4ab61;outline-offset:2px}.tile-remover .tile{display:block}

.poster-download{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 19px;margin-bottom:20px;border:1px solid #cbdcc7;border-radius:12px;background:#edf5e9}.poster-download strong{display:block;font-size:14px;color:#1f5b46}.poster-download span{display:block;font-size:12px;color:#698674}.poster-download .btn{min-height:41px;font-size:11px}@media(max-width:600px){.poster-download{flex-direction:column;align-items:flex-start}.poster-download .btn{width:100%}}


/* 2026 Mahjong knowledge portal expansion */
.site-header .header-inside{height:78px}.site-header .main-nav{gap:1px}.site-header .main-nav a{font-size:11px;padding:9px 7px}.site-header .brand strong{font-size:16px}
.article-intro{background:linear-gradient(135deg,#082f28 0%,#0f493c 62%,#1c604c 100%);color:#fff;padding:38px 0 66px;position:relative;overflow:hidden}
.article-intro:after{content:'麻';position:absolute;right:5vw;top:-140px;font-size:360px;color:rgba(245,221,166,.055);font-family:serif;pointer-events:none}
.breadcrumbs{display:flex;gap:12px;align-items:center;font-size:12px;color:#cbdccf;margin-bottom:44px}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs span:last-child{max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-head{max-width:870px;position:relative;z-index:1}.article-head h1{color:#fff;font-weight:800;font-size:clamp(36px,4.6vw,62px);line-height:1.12;letter-spacing:-.057em;margin:0 0 18px}.article-lead{color:#deebe2;font-size:17px;line-height:1.9;max-width:800px}.article-meta{display:flex;gap:18px;flex-wrap:wrap;color:#b7ccbf;font-size:11px;font-weight:700}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:66px;align-items:start;padding-top:50px;padding-bottom:100px}
.article-main{min-width:0}.prose{font-size:15px;line-height:1.92;color:#4a6054}.prose h2{scroll-margin-top:95px;font-size:clamp(24px,2.7vw,32px);color:#143d32;margin-top:50px;margin-bottom:17px}.prose h3{font-size:20px;color:#164738;margin-top:30px}.prose p{margin-bottom:20px}.prose strong{color:#1d4738}.prose a{color:#116f58;text-decoration:underline;text-underline-offset:3px}.prose ul,.prose ol{padding-left:24px;margin:14px 0 26px}.prose li{padding-left:5px;margin:9px 0}.prose table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto;margin:23px 0 29px;border:1px solid #dce4db;border-radius:10px;background:#fff}.prose th{background:#ebf2eb;color:#234d3c;font-weight:800;text-align:left}.prose th,.prose td{padding:12px 14px;border-bottom:1px solid #e6ebe3;min-width:85px}.prose tr:last-child td{border:0}.prose tr:hover td{background:#fafdf8}
.article-side{position:sticky;top:110px}.aside-panel{background:#fff;border:1px solid #e0e8dd;padding:21px;border-radius:14px;box-shadow:var(--shadow)}.aside-panel b{display:block;color:#a1844f;font-size:10px;letter-spacing:.15em;margin-bottom:14px}.aside-panel a{display:block;color:#436457;padding:9px 3px;border-bottom:1px solid #e9ece6;font-size:12px;font-weight:700}.aside-panel a:last-child{border:0}.aside-panel a:hover{color:#0e754d}.aside-callout{margin-top:16px;background:#e8efdf;border:1px solid #dce4d3;padding:20px;border-radius:12px}.aside-callout strong{display:block;color:#275e43;font-size:13px;margin-top:6px}.aside-callout p{font-size:12px;color:#668073;margin:7px 0}.aside-callout a{font-size:12px;font-weight:800;color:#09644c}
.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dce7dc;border-radius:14px;background:#fff;overflow:hidden;gap:0;margin:8px 0 30px}.fact-strip>div{padding:18px 20px;border-right:1px solid #e6ede3}.fact-strip>div:last-child{border:0}.fact-strip span{display:block;color:#859589;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.fact-strip strong{font-size:14px;color:#144f3e}.insight-box,.next-note{border-radius:11px;background:#ecf2e7;padding:22px 24px;border-left:4px solid #b6a073;margin:25px 0}.insight-box p,.next-note p{margin:8px 0 0}.example-flex{display:flex;gap:12px;flex-wrap:wrap;margin:23px 0}.example-flex>div{background:#f0f2e9;border-radius:11px;padding:12px 15px;flex:1;min-width:150px}.example-flex strong{display:block;font-size:12px;margin-bottom:8px}.tile-example{display:flex;gap:2px;align-items:center;flex-wrap:wrap}.tile-example .tile{width:41px;height:55px}.tick-list li::marker{color:#1d8064}.warning-list li::marker{color:#c8864f}.source-mini{font-size:12px;border-top:1px solid #dfe6dc;margin-top:45px;padding-top:17px;line-height:2;color:#7b8e81}.source-mini a{color:#2a735b;text-decoration:underline;margin-right:6px}.related-reading{margin-top:40px}.related-reading h2{font-size:25px}.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.related-card{background:white;border:1px solid #e2e9dd;border-radius:12px;padding:21px;display:flex;flex-direction:column;gap:8px;min-height:132px}.related-card span{font-size:9px;color:#b18c53;letter-spacing:.12em;font-weight:800}.related-card strong{font-size:14px;color:#174e3c}.related-card b{font-size:12px;margin-top:auto;color:#217a5a}.related-card:hover{border-color:#81b49a}
.fan-group{margin:34px 0}.fan-group h3{background:#133f34;color:#fff;padding:12px 18px;border-radius:10px 10px 0 0;margin:0;font-size:17px}.fan-group h3 small{font-size:12px;font-weight:500;color:#bbddca}.fan-list{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #dbe5da;border-radius:0 0 10px 10px;overflow:hidden}.fan-list>div{padding:10px 15px;display:flex;gap:10px;align-items:center;min-height:52px;border-bottom:1px solid #e2eae0;background:#fff}.fan-list>div:nth-child(4n+2),.fan-list>div:nth-child(4n+3){background:#f5f8f3}.fan-list span{color:#b0b7ab;font-size:10px;font-weight:800}.fan-list strong{font-size:12px;flex:1;color:#315746}.fan-list b{color:#a47740;font-size:11px}
.calculator,.solitaire-game{background:#fff;border:1px solid #d7e4d8;border-radius:15px;padding:27px;margin:26px 0 40px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}.form-grid label{display:block;font-size:12px;font-weight:800;color:#516b5e}.form-grid select,.form-grid input{display:block;width:100%;padding:12px 13px;border:1px solid #cddbd0;border-radius:8px;background:#fafbf8;color:#254736;font-size:14px;margin-top:6px}.form-grid select:focus,.form-grid input:focus{outline:2px solid #a6caac}.calc-result{margin-top:18px;background:#eaf2e8;color:#1a553e;padding:18px;border-radius:10px;line-height:1.8;font-size:14px}.calc-result strong{color:#105736}.calc-result small{display:block;color:#54755e}.calc-result.warning{background:#fff1db;color:#89561e}
.game-actions{display:flex;gap:9px;flex-wrap:wrap}.game-actions .btn{min-height:40px;font-size:12px;padding:8px 13px}.game-status{font-size:13px;margin:20px 0 13px;color:#355d46}.solitaire-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;background:#153c32;padding:12px;border-radius:12px;max-width:660px}.sol-tile{padding:0;background:#e7d7ad;border:2px solid transparent;border-radius:7px;aspect-ratio:64/85;display:grid;place-items:center;position:relative;min-width:0}.sol-tile img{width:100%;max-width:64px;height:auto;max-height:80px}.sol-tile:disabled{opacity:.26;cursor:not-allowed;filter:grayscale(70%)}.sol-tile.free{background:#fff4d3;box-shadow:0 2px 0 #ab9a79}.sol-tile.selected{border-color:#edb247;background:#ffedae}.sol-tile.hint{outline:3px solid #ebbb57}.sol-tile.removed{visibility:hidden}.solitaire-progress{display:flex;justify-content:space-between;margin-top:11px;color:#6b7d70;font-size:12px;font-weight:800}.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.variant-item{display:flex;align-items:center;gap:14px;border:1px solid #dee5d9;border-radius:12px;background:white;padding:16px 20px;transition:transform .2s,border .2s}.variant-item:hover{transform:translateY(-2px);border-color:#a4bba8}.variant-num{font-weight:900;color:#b58e55;font-size:16px}.variant-item span:nth-child(2){display:flex;flex-direction:column;flex:1}.variant-item strong{font-size:14px;color:#225443}.variant-item small{font-size:11px;color:#7e8e83}.variant-item b{color:#7d9c83;font-size:19px}.upgrade-note{background:#edf3ea;padding:30px;border-radius:14px;margin-top:30px;margin-bottom:30px}
@media(max-width:1100px){.site-header .main-nav a{font-size:10px;padding:7px 5px}.site-header .brand strong{font-size:14px}.site-header .header-inside{gap:10px}}
@media(max-width:900px){.site-header .main-nav a{font-size:12px;padding:11px}.article-layout{grid-template-columns:1fr;gap:24px}.article-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px}.aside-callout{margin-top:0}}
@media(max-width:650px){.article-intro{padding:22px 0 42px}.breadcrumbs{margin-bottom:26px}.article-head h1{font-size:clamp(30px,8vw,42px)}.article-lead{font-size:14px}.article-meta{gap:8px}.article-layout{padding-top:20px;padding-bottom:60px}.prose h2{margin-top:37px}.fact-strip{grid-template-columns:1fr}.fact-strip>div{border-right:0;border-bottom:1px solid #e6ede3;padding:12px 18px}.fact-strip>div:last-child{border:0}.related-grid,.variant-grid,.fan-list,.form-grid,.article-side{grid-template-columns:1fr}.calculator,.solitaire-game{padding:14px}.solitaire-board{gap:2px;padding:7px}.sol-tile{border-width:1px;border-radius:4px}.variant-item{padding:11px 13px}.prose th,.prose td{padding:8px 10px}}
@media print{.site-header,.article-side,.site-footer,.related-reading,.game-actions,.closing-cta{display:none!important}.article-intro{color:#000;background:#fff}.article-head h1{color:#000}.article-lead{color:#000}.article-layout{display:block}.prose table{overflow:visible}}

@media (max-width:1190px){.site-header .main-nav a{font-size:14px;padding:13px 10px}.site-header .brand strong{font-size:16px}}

.sample-hand{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0;padding:17px;background:#f0f2e9;border-radius:14px}.sample-group{padding:9px;background:#fff;border-radius:9px;border:1px solid #e2e7dc}.sample-group strong{display:block;color:#5d7969;font-size:10px;margin-bottom:7px}.sample-group .tile{width:37px;height:51px}.quiz-panel{background:#fff;border:1px solid #dce6d9;border-radius:17px;padding:25px;margin:20px 0 34px}.quiz-head{display:flex;justify-content:space-between;gap:10px;color:#53735f;font-weight:800;font-size:12px}.quiz-progress-bar{height:6px;background:#e3eee5;border-radius:10px;margin:15px 0 23px;overflow:hidden}.quiz-progress-bar span{height:100%;display:block;background:#2b8265;width:0;transition:width .2s}.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:21px 0}.quiz-option{text-align:left;border:1px solid #d4e2d4;border-radius:10px;background:#f8faf6;padding:13px 16px;color:#31513c;font-weight:700}.quiz-option:hover:not(:disabled){background:#e4f0e5}.quiz-option.correct{background:#cdebd1;border-color:#46966b}.quiz-option.incorrect{background:#ffe7e1;border-color:#d98a7d}.quiz-feedback{min-height:44px;padding:9px 0;color:#2c644b;font-weight:700;font-size:13px}.print-actions{background:#e8f0e6;padding:20px;border-radius:12px;margin:15px 0}.print-actions p{font-size:12px;margin:8px 0 0}@media(max-width:650px){.quiz-answers{grid-template-columns:1fr}.quiz-panel{padding:15px}.sample-hand{padding:8px;gap:5px}.sample-group{padding:5px}.sample-group .tile{width:28px;height:39px}}@media print{.print-actions{display:none!important}.article-intro{padding:0 0 20px}.article-head .article-meta{display:none}}

.light-video{margin:18px 0 30px;background:#e4e9dc;border-color:#ccd7c8;box-shadow:none}