:root { --ink:#183b2f; --muted:#657369; --paper:#f8f7ef; --line:#dddcd1; --green:#245640; --red:#b34334; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible { outline:3px solid #ae6b21; outline-offset:5px; border-radius:3px; }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:24px; z-index:10; background:white; padding:14px; }
.skip:focus { top:8px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:21px; font-weight:500; white-space:nowrap; letter-spacing:-.6px; }
.brand img { flex:none; }
.brand b { font-weight:800; }
.site-header nav { display:flex; align-items:center; gap:32px; font-size:14px; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover,.quiet-link:hover { text-decoration:underline; }
.site-header .nav-contact { border:1px solid #bbc5b8; border-radius:30px; padding:12px 18px; }
.nav-contact span { padding-left:14px; }
.hero { display:grid; grid-template-columns:1.08fr 1fr; gap:48px; align-items:center; padding-block:34px 76px; }
.eyebrow { font-size:11px; line-height:1.6; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; }
.small-tile { font-size:21px; color:var(--red); font-family:serif; letter-spacing:0; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-block:24px; font-size:clamp(48px,4.7vw,72px); font-weight:500; line-height:1.07; letter-spacing:-3.2px; }
.hero h1 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:#347157; }
.hero-description { max-width:390px; color:var(--muted); font-size:16px; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:30px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:23px; padding:17px 23px; border-radius:50px; background:var(--green); color:white; text-decoration:none; font-size:13px; font-weight:700; line-height:1.4; transition:background .15s; }
.button:hover { background:#133d2b; }
.button span { font-size:19px; }
.quiet-link { font-size:13px; text-decoration:none; }
.quiet-link span { margin-left:7px; }
.hero-note { margin-top:42px; font-size:10px; letter-spacing:1.6px; color:var(--muted); }
.hero-art { position:relative; min-height:560px; border-radius:22px; overflow:hidden; isolation:isolate; background:#146c6b; }
.room-art { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 32%; opacity:.8; }
.art-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,24,30,.22),transparent 40%,rgba(2,39,38,.85)); }
.art-label { position:absolute; top:28px; left:28px; color:#fff8e4; font-size:9px; font-weight:700; letter-spacing:2px; }
.tile-fan { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:35px; }
.mahjong-tile { width:116px; height:163px; border-radius:14px; background:linear-gradient(115deg,#fffcef,#ede5c7); box-shadow:0 12px 0 #246d56,0 17px 0 #113c31,0 28px 27px #002e3980; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.tile-one { transform:translate(29px,8px) rotate(-20deg); z-index:1; }
.tile-two { transform:translate(0,-15px) rotate(-2deg); z-index:3; }
.tile-three { transform:translate(-24px,4px) rotate(18deg); z-index:4; }
.tile-mark { font-family:serif; font-weight:700; font-size:78px; line-height:1; }
.bamboo { color:#246a4e; }
.red { color:#be3c2b; }
.tile-bottom { position:absolute; bottom:16px; letter-spacing:1.4px; font-size:6px; color:#716f58; font-weight:700; }
.dots { display:grid; grid-template-columns:repeat(2,21px); gap:7px 20px; margin-top:-11px; }
.dots i { width:21px; height:21px; border:5px solid #2671a2; border-radius:50%; }
.dots i:nth-child(3),.dots i:nth-child(4) { border-color:#ae3830; }
.art-caption { position:absolute; left:28px; right:28px; bottom:27px; color:#f5f7df; display:flex; align-items:end; justify-content:space-between; gap:15px; font-size:12px; line-height:1.65; letter-spacing:1px; }
.round-arrow { border:1px solid #c6dacc70; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:22px; }
.game-section { border-top:1px solid var(--line); padding-block:70px 78px; display:grid; grid-template-columns:1fr 1.3fr; gap:90px; }
.section-intro h2 { font-size:38px; line-height:1.2; font-weight:500; letter-spacing:-1.4px; margin-block:17px 20px; }
.section-intro>p:last-child { font-size:14px; color:var(--muted); line-height:1.85; max-width:330px; }
.game-points { padding-top:4px; }
.game-points article { position:relative; padding:0 0 24px 45px; margin-bottom:27px; border-bottom:1px solid var(--line); }
.game-points article:last-child { margin-bottom:0; padding-bottom:0; border:0; }
.point-number { position:absolute; left:0; top:3px; font-size:10px; color:#6c8877; }
.game-points h3 { font-size:17px; font-weight:600; margin-bottom:10px; }
.game-points p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; max-width:390px; }
.support-section { background:#214b39; color:#f8f7ef; border-radius:16px; padding:40px 47px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.support-section .eyebrow { color:#c4cbaa; }
.support-section h2 { font-size:40px; letter-spacing:-1px; font-weight:500; margin-bottom:12px; }
.support-section p:last-child { color:#d0d9ca; font-size:13px; margin-bottom:0; line-height:1.6; }
.button.light { background:#f4edcf; color:#214b39; white-space:nowrap; }
.button.light:hover { background:white; }
.site-footer { margin-top:70px; padding-bottom:25px; }
.footer-top,.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-top { padding-bottom:25px; border-bottom:1px solid var(--line); }
.footer-top>a:last-child { font-size:13px; text-decoration:none; }
.footer-bottom { margin-top:23px; font-size:10px; color:#6d786d; line-height:1.8; }
.footer-bottom p { margin:0; }
.footer-bottom nav { display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom nav a { text-decoration:none; }
.footer-bottom nav a:hover { text-decoration:underline; }
.legal { padding-block:38px 24px; max-width:980px; }
.legal-heading { max-width:760px; }
.legal-heading h1 { font-size:clamp(38px,5vw,58px); letter-spacing:-2px; font-weight:500; line-height:1.1; margin:20px 0; }
.legal-heading>p:last-child { color:var(--muted); line-height:1.8; }
.updated { color:var(--muted); font-size:12px; }
.legal-nav { margin-block:28px 36px; border-block:1px solid var(--line); padding-block:18px; display:flex; gap:25px; flex-wrap:wrap; font-size:12px; }
.legal-nav a { text-decoration:none; color:var(--muted); }
.legal-nav a[aria-current=page] { color:var(--ink); font-weight:700; text-decoration:underline; }
.legal-body { max-width:800px; font-size:15px; line-height:1.9; color:#415248; overflow-wrap:anywhere; }
.legal-body p { margin-bottom:22px; }
.legal-body .legal-lead { font-size:17px; color:var(--ink); }
.legal-body h2 { font-size:23px; color:var(--ink); line-height:1.4; margin-block:38px 16px; }
.legal-body strong { color:#253f30; }
.legal-body ul,.legal-body ol { padding-left:24px; }
.legal-body li { padding-left:3px; margin-block:8px; }
.legal-body table { border-collapse:collapse; width:100%; font-size:13px; }
.legal-body td,.legal-body th { border:1px solid var(--line); text-align:left; padding:10px 12px; }
.legal-body .button { margin-block:5px 15px; }
.not-found { padding-block:80px; min-height:50vh; }
.not-found h1 { font-size:48px; letter-spacing:-2px; font-weight:500; }
@media (max-width:1050px) {
 .wrap { width:calc(100% - 64px); }
 .hero { gap:30px; }
 .hero h1 { font-size:52px; letter-spacing:-2.5px; }
 .hero-art { min-height:510px; }
 .hero-actions { gap:20px; }
 .game-section { gap:50px; }
 .mahjong-tile { width:100px; height:150px; }
}
@media (max-width:720px) {
 .wrap { width:calc(100% - 40px); }
 .site-header { padding-block:18px; gap:14px; }
 .brand { font-size:18px; gap:7px; }
 .brand img { width:34px; height:34px; }
 .site-header nav { gap:15px; font-size:12px; }
 .site-header nav>a:first-child { display:none; }
 .site-header .nav-contact { padding:9px 12px; }
 .nav-contact span { padding-left:4px; }
 .hero { grid-template-columns:1fr; padding-block:25px 45px; gap:24px; }
 .hero h1 { font-size:clamp(43px,10.6vw,64px); letter-spacing:-2.6px; margin-block:20px; }
 .hero-copy .eyebrow { font-size:8px; letter-spacing:1px; }
 .hero-description { max-width:420px; font-size:15px; line-height:1.8; }
 .hero-actions { margin-top:23px; gap:20px; }
 .button { font-size:12px; padding:15px 19px; gap:15px; }
 .hero-note { margin-top:25px; margin-bottom:0; font-size:9px; }
 .hero-art { min-height:440px; }
 .mahjong-tile { width:106px; height:154px; }
 .tile-mark { font-size:71px; }
 .art-label { font-size:8px; }
 .art-caption { font-size:10px; }
 .game-section { grid-template-columns:1fr; gap:30px; padding-block:40px 45px; }
 .section-intro h2 { font-size:34px; }
 .section-intro>p:last-child { max-width:420px; }
 .game-points article { margin-bottom:23px; padding-bottom:23px; }
 .support-section { padding:29px 26px; display:block; }
 .support-section h2 { font-size:34px; }
 .support-section .button { margin-top:23px; }
 .site-footer { margin-top:45px; }
 .footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; gap:20px; }
 .footer-bottom { gap:13px; }
 .footer-bottom nav { gap:12px 19px; }
 .legal { padding-block:25px 15px; }
 .legal-heading h1 { letter-spacing:-1.5px; }
 .legal-body { font-size:14px; line-height:1.85; }
 .legal-body h2 { font-size:21px; }
 .legal-nav { gap:17px; font-size:11px; }
 .not-found h1 { font-size:40px; }
}
@media (max-width:360px) {
 .site-header nav { gap:8px; }
 .site-header nav>a:nth-child(2) { display:none; }
 .hero-actions { gap:16px; }
 .mahjong-tile { width:90px; height:140px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }