:root{--ink:#e9dfc5;--muted:#9ea9a0;--gold:#d9a84b;--gold2:#ffdb78;--jade:#0b3d36;--jade2:#155b4d;--red:#7a1f1a;--panel:rgba(5,16,17,.88);--line:rgba(219,172,78,.34);--tile:#eee1bf;--shadow:0 18px 60px #0009}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#031011;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#031011e8,#03101155 45%,#031011db),url('/assets/games/nine-gates-mahjong.svg') center/cover;filter:saturate(.88);z-index:-2}body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,transparent 0 22%,#0009 100%);z-index:-1}.shell{min-height:100vh;background:linear-gradient(180deg,#071617aa,#020909dd)}button,input,select{font:inherit}.topbar{height:76px;display:flex;align-items:center;gap:24px;padding:0 24px;border-bottom:1px solid var(--line);background:#041011e6;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:210px}.brand img{width:46px;height:46px;filter:drop-shadow(0 3px 12px #d9a84b55)}.brand strong{display:block;font-family:Georgia,serif;font-size:21px;letter-spacing:.08em;color:var(--gold2);text-transform:uppercase}.brand small{display:block;letter-spacing:.28em;font-size:10px;text-transform:uppercase}.topbar nav{display:flex;gap:4px;margin:auto}.topbar nav button,.round{border:0;background:transparent;color:#bbb8a8;padding:11px 16px;border-radius:999px;cursor:pointer}.topbar nav button[data-active=true]{background:#9b6b262b;color:var(--gold2);box-shadow:inset 0 0 0 1px var(--line)}.round{border:1px solid var(--line);width:42px;height:42px;padding:0}.view{min-height:calc(100vh - 76px)}.journey{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.7fr);gap:38px;align-items:center;padding:56px clamp(24px,5vw,76px)}.hero-copy{max-width:850px;padding:50px;background:linear-gradient(145deg,#031111df,#071e1ade);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-copy:after{content:"九門";position:absolute;right:-20px;bottom:-56px;font:180px Georgia,serif;color:#d9a84b0b}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:800}.hero-copy h1{font:clamp(46px,6vw,84px)/.94 Georgia,serif;margin:10px 0 24px;color:#f5e3b6;text-shadow:0 4px 28px #000}.hero-copy>p:not(.eyebrow){max-width:700px;font-size:18px;line-height:1.7;color:#cbd0c6}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.gold-button,.ghost-button{border-radius:5px;padding:12px 18px;cursor:pointer;font-weight:800;letter-spacing:.02em}.gold-button{border:1px solid #ffd982;background:linear-gradient(#d7a242,#996220);color:#140e05;box-shadow:inset 0 1px #fff8,0 5px 18px #0007}.ghost-button{border:1px solid var(--line);background:#071717c9;color:#d8d2be}.wide{width:100%}.hero-metrics{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid #ffffff12}.hero-metrics span{color:#9faaa0}.hero-metrics b{display:block;color:var(--gold2);font:28px Georgia,serif}.gate-path{display:grid;gap:8px}.gate{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#041314e8;border:1px solid #8e7a4b4f;box-shadow:0 8px 24px #0007;opacity:.76}.gate.open{border-color:#d9a84b;background:linear-gradient(90deg,#14362d,#091514);opacity:1}.gate b{font:26px Georgia,serif;color:#d9a84b66}.gate.open b{color:var(--gold2)}.gate span{font-family:Georgia,serif;font-size:16px}.gate small{display:block;font-family:Inter,sans-serif;color:#96a29b;margin-top:3px;font-size:11px}.table-view{display:grid;grid-template-columns:280px 1fr;padding:18px;gap:18px;background:#021011b8}.variant-panel{background:var(--panel);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow)}.variant-panel h2{font:28px Georgia,serif;color:var(--gold2);margin:7px 0}.variant-panel>p{color:#aeb8ae;line-height:1.5}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.chips span,.rule-card i{font-style:normal;padding:5px 7px;border:1px solid #ffffff18;background:#ffffff08;color:#b8c1b8;font-size:11px}.round-info{display:flex;justify-content:space-between;margin-top:24px;padding:15px 0;border-block:1px solid #ffffff10}.round-info span{font-family:Georgia,serif;color:var(--gold2)}.round-info b{font-size:11px;color:#a9b4ac}.table-log{min-height:72px}.mahjong-table{position:relative;min-height:760px;border:2px solid #b7893c55;border-radius:28px;background:radial-gradient(circle,#126052 0 4%,#0a4037 35%,#072f29 70%,#051d1b 100%);box-shadow:inset 0 0 80px #0009,var(--shadow);overflow:hidden}.mahjong-table:before{content:"";position:absolute;inset:15px;border:1px solid #d9a84b20;border-radius:22px;pointer-events:none}.seat{position:absolute}.north{top:22px;left:50%;transform:translateX(-50%);width:70%;text-align:center}.south{bottom:18px;left:5%;right:5%}.west{left:20px;top:19%;bottom:25%;width:15%}.east{right:20px;top:19%;bottom:25%;width:15%}.seat-label{display:flex;justify-content:center;gap:10px;color:#9faea6;font-size:12px}.seat-label b{color:var(--gold)}.rival-hand{display:flex;justify-content:center;gap:2px;margin:6px}.vertical{height:72%;flex-direction:column;align-items:center}.discards{display:grid;grid-template-columns:repeat(6,36px);justify-content:center;gap:2px;min-height:120px}.vertical-pool{grid-template-columns:repeat(3,36px);transform:scale(.9)}.player-row{display:flex;align-items:flex-end;justify-content:center;gap:12px}.player-hand,.melds{display:flex;gap:3px;justify-content:center;align-items:flex-end;min-height:70px}.player-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-inline:5%}.player-status>span{min-width:130px}.waits{display:flex;align-items:center;gap:3px;color:#b7c3ba;font-size:12px;min-height:40px}.table-actions{display:flex;gap:8px}.center-mark{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#d9a84b44;letter-spacing:.3em;font:12px Georgia,serif}.center-mark img{width:95px;opacity:.18}.tile,.tile-button{width:44px;height:62px;border-radius:6px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto}.tile{background:linear-gradient(145deg,#fff5d6,#d7c59f 72%,#b89965);border:1px solid #9f865d;color:#1c2c25;box-shadow:inset 1px 1px #fff9,inset -2px -3px #7b623355,0 3px 5px #0008;position:relative}.tile b{font:27px Georgia,'Noto Serif CJK SC',serif;line-height:1}.tile small{font:8px Georgia,serif;color:#8a1f19;margin-top:3px;text-transform:uppercase}.tile-p small{color:#9a2720}.tile-s small{color:#166b4e}.tile-z b{color:#8e251e}.tile.back{background:linear-gradient(145deg,#1d6d5a,#0d443a 70%,#062d29);border-color:#b79550;color:#d6ad52}.tile.back span{border:1px solid #d9a84b66;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}.tile-button{padding:0;border:0;background:transparent;cursor:pointer;transition:.12s transform,.12s filter}.tile-button:hover:not(:disabled){transform:translateY(-10px);filter:brightness(1.08)}.tile-button:disabled{cursor:default}.discards .tile{width:34px;height:46px}.discards .tile b{font-size:20px}.discards .tile small{font-size:6px}.rival-hand .tile{width:30px;height:42px}.claim{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:50;background:#061313f5;border:1px solid var(--gold);padding:18px 24px;box-shadow:var(--shadow);text-align:center}.claim div{display:flex;gap:8px;justify-content:center}.solitaire{display:grid;grid-template-columns:280px 1fr;padding:18px;gap:18px;background:#021011b8}.solitaire aside{background:var(--panel);border:1px solid var(--line);padding:24px}.solitaire h2{font:31px Georgia,serif;color:var(--gold2)}.solitaire aside p{line-height:1.55;color:#aeb9b1}.sol-stats{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.sol-stats b{color:var(--gold2);font-size:25px}.mini-list{display:grid;gap:7px;padding-top:18px;border-top:1px solid #ffffff12;color:#a6b0aa;font-size:12px}.mini-list b{color:#d8c99f}.sol-board{position:relative;min-height:760px;border:1px solid var(--line);background:radial-gradient(circle at 50% 45%,#164c42,#062722 68%,#031413);box-shadow:inset 0 0 80px #0009;overflow:auto}.sol-tile{position:absolute;left:calc(5% + var(--x)*7.1% + var(--z)*5px);top:calc(12% + var(--y)*72px - var(--z)*11px);z-index:calc(10 + var(--z));border:0;background:transparent;padding:0;cursor:pointer;filter:brightness(.65)}.sol-tile.free{filter:none}.sol-tile.selected{transform:translateY(-8px);filter:drop-shadow(0 0 8px #ffe18c)}.sol-tile .tile{width:48px;height:66px}.rules-view{padding:30px clamp(18px,4vw,60px);background:#021011d9}.rules-view>header{display:flex;justify-content:space-between;gap:30px;align-items:end}.rules-view h2{font:42px Georgia,serif;color:#f1d898;margin:6px 0}.rules-view header p{max-width:760px;color:#abb6ae}.coverage{display:flex;gap:8px}.coverage span{padding:12px 14px;border:1px solid var(--line);background:#071717}.coverage b{display:block;font:24px Georgia,serif;color:var(--gold2)}.rule-tools{display:flex;gap:10px;margin:24px 0}.rule-tools input,.rule-tools select{background:#061718;border:1px solid #ffffff1a;color:#d7d0bd;padding:12px 14px;outline:none}.rule-tools input{flex:1}.rules-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}.rules-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rule-card{text-align:left;background:#071516e8;border:1px solid #ffffff13;color:var(--ink);padding:16px;cursor:pointer;min-height:190px}.rule-card.active,.rule-card:hover{border-color:#d9a84b88;background:#0d2420}.rule-card span{display:block}.rule-card b{display:block;font:18px Georgia,serif;color:#ead39c}.rule-card small{color:#8fa098}.rule-card em{display:block;color:#d9a84b;font-style:normal;margin:12px 0 6px;letter-spacing:.1em}.rule-card p{color:#a9b3ab;line-height:1.45;font-size:12px}.rule-card div{display:flex;gap:4px;flex-wrap:wrap}.rules-detail{position:sticky;top:94px;align-self:start;background:#071516f2;border:1px solid var(--line);padding:22px;min-height:260px}.rules-detail h3{font:26px Georgia,serif;color:var(--gold2)}.rules-detail p{color:#aab5ad;line-height:1.55}.rules-detail dl div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff0c}.rules-detail dt{color:#81928a}.rules-detail dd{margin:0;text-align:right}.result-modal{position:fixed;inset:0;z-index:80;background:#000b;display:grid;place-items:center}.result-modal[hidden]{display:none}.result-modal>div{width:min(480px,90vw);background:linear-gradient(145deg,#0a2924,#071414);border:1px solid var(--gold);padding:34px;text-align:center;box-shadow:var(--shadow)}.result-modal h2{font:38px Georgia,serif;color:var(--gold2);margin:8px}.result-modal p{color:#c0c9c1}.result-modal small{display:block;color:#8fa098;margin-bottom:22px}@media(max-width:1100px){.journey{grid-template-columns:1fr}.gate-path{grid-template-columns:repeat(3,1fr)}.table-view,.solitaire{grid-template-columns:1fr}.variant-panel,.solitaire aside{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mahjong-table,.sol-board{min-height:680px}.rules-list{grid-template-columns:repeat(2,1fr)}.rules-layout{grid-template-columns:1fr}.rules-detail{position:static}.west,.east{display:none}.north{width:90%}}@media(max-width:720px){.topbar{height:auto;min-height:66px;padding:8px 10px;gap:8px;flex-wrap:wrap}.brand{min-width:0}.brand strong{font-size:16px}.brand img{width:36px;height:36px}.topbar nav{order:3;width:100%;overflow:auto;justify-content:flex-start}.topbar nav button{padding:8px 12px;white-space:nowrap}.view{min-height:calc(100vh - 112px)}.journey{padding:16px}.hero-copy{padding:26px}.hero-copy h1{font-size:46px}.gate-path{grid-template-columns:1fr 1fr}.hero-metrics{gap:13px}.table-view,.solitaire{padding:8px}.variant-panel,.solitaire aside{display:block}.mahjong-table{min-height:620px;border-radius:14px}.tile,.tile-button{width:30px;height:44px}.tile b{font-size:20px}.tile small{font-size:6px}.player-hand{gap:1px;overflow-x:auto;justify-content:flex-start}.south{left:2%;right:2%}.discards{grid-template-columns:repeat(6,25px)}.discards .tile{width:24px;height:34px}.north .rival-hand{display:none}.player-status{font-size:11px;align-items:flex-end}.waits{display:none}.rules-view{padding:16px}.rules-view>header{display:block}.rules-view h2{font-size:32px}.coverage{overflow:auto}.rule-tools{display:grid}.rules-list{grid-template-columns:1fr}.sol-board{min-height:610px}.sol-tile{left:calc(2% + var(--x)*7.5% + var(--z)*3px);top:calc(9% + var(--y)*58px - var(--z)*8px)}.sol-tile .tile{width:35px;height:49px}}
.custom-rule-form{display:grid;gap:14px}.custom-rule-form>label,.custom-rule-form .lab-grid label{display:grid;gap:5px;color:#aab5ad;font-size:11px}.custom-rule-form input,.custom-rule-form select{width:100%;background:#031011;border:1px solid #ffffff18;color:#e5dcc6;padding:9px}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.custom-rule-form fieldset{border:1px solid #ffffff12;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.custom-rule-form legend{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.custom-rule-form fieldset label{font-size:11px;color:#b9c1bb}.custom-rule-form fieldset input{width:auto;margin-right:6px}@media(max-width:720px){.lab-grid,.custom-rule-form fieldset{grid-template-columns:1fr}}