:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#203c33;background:#eef1e9;font-synthesis:none;--green:#245e49;--ink:#203c33;--muted:#69786e;--line:#d8ded2;--gold:#9a7537}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 14% 48%,#dce6d8,transparent 55%),url('../assets/textures/paper.svg'),#eef1e9}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #bd9149;outline-offset:4px}[hidden],.hidden{display:none!important}
.site-header,.site-footer{max-width:1280px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:28px 44px}.wordmark{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:2px}.wordmark img{border-radius:10px}.wordmark small{font-size:11px;display:block;letter-spacing:4px;margin-top:3px;color:var(--muted);font-weight:400}.network-status{font-size:12px;color:var(--muted)}.network-status:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#72926b}
.home-layout{max-width:1120px;margin:28px auto 30px;display:grid;grid-template-columns:1fr 440px;gap:72px;align-items:center;padding:0 32px}.welcome{padding:12px 0 0;position:relative}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:600;color:var(--gold)}h1{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-weight:500;font-size:64px;line-height:1.27;letter-spacing:4px;margin:20px 0}h2{font-size:24px;letter-spacing:1px;margin:10px 0 22px}.intro{max-width:345px;font-size:14px;line-height:1.95;color:var(--muted);margin:0}.hero-tiles{position:relative;height:210px;margin:8px 0 4px;width:330px}.hero-tiles:after{content:"";position:absolute;bottom:14px;left:26px;width:265px;height:30px;border-radius:50%;background:#385c4220;filter:blur(14px)}.hero-tile{position:absolute;top:28px;width:98px;height:140px;display:block;border:1px solid #d6d0b8;border-radius:12px;background:linear-gradient(120deg,#fffef1,#eee9d3);box-shadow:2px 8px 0 #c7c5aa,3px 13px 0 #6a8970,5px 21px 20px #214a3321;z-index:1}.hero-tile .face{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}.tile-left{left:26px;transform:rotate(-16deg);top:38px}.tile-middle{left:120px;transform:rotate(-3deg);z-index:3;top:18px}.tile-right{left:213px;transform:rotate(12deg);top:34px;z-index:2}.quick-rule{display:flex;gap:28px;color:var(--muted);font-size:11px}.quick-rule span{display:flex;align-items:center;gap:8px}.quick-rule b{font-family:Georgia,serif;color:#52735c;font-size:27px;font-weight:400}.text-button{background:none;border:0;padding:0;color:var(--green);font-size:12px;margin:22px 0 6px}.text-button span{padding-left:10px}
.menu{border:1px solid #fff;border-radius:24px;padding:30px;background:#fafcf6e8;box-shadow:0 24px 70px #284a3212,0 3px 10px #284a3204}.card-heading h2{margin-bottom:24px}.main-actions{display:grid;gap:12px}.menu-btn{display:flex;align-items:center;gap:15px;text-align:left;width:100%;border:1px solid #d6dfd1;background:transparent;color:var(--ink);border-radius:13px;padding:20px;transition:background .18s,transform .18s,box-shadow .18s}.menu-btn:hover{background:#eaf0e5;transform:translateY(-1px)}.menu-btn.primary{background:var(--green);border-color:var(--green);color:#fff9e6;box-shadow:0 5px 12px #245e4914}.menu-btn.primary:hover{background:#1e513e}.menu-btn.continue-btn{background:#eee9d8;border-color:#dfd5b9}.menu-btn strong{font-size:18px;font-weight:600;letter-spacing:1px;display:block}.menu-btn small{font-size:11px;color:var(--muted);display:block;margin-top:7px}.menu-btn.primary small{color:#d2e0cb}.action-symbol{border:1px solid #aabca580;border-radius:9px;height:36px;width:36px;display:grid;place-items:center;font-family:serif;font-size:20px}.primary .action-symbol{border-color:#9fbba57a}.arrow{margin-left:auto;font:28px Georgia,serif;opacity:.6}.activity{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 0 22px;margin-top:6px;border-bottom:1px solid var(--line)}.activity div{text-align:center;border-right:1px solid var(--line)}.activity div:last-child{border:0}.activity b{font:23px Georgia,serif;display:block;font-variant-numeric:tabular-nums}.activity span{display:block;font-size:10px;color:var(--muted);margin-top:7px}.minor{display:flex;justify-content:space-between;gap:8px;margin-top:19px}.minor button{font-size:12px;color:var(--ink);padding:7px 0;border:0;background:none}.minor button:hover,.site-footer button:hover{text-decoration:underline}.storage-note{font-size:10px;color:#7d887d;text-align:center;line-height:1.7;margin:16px 0 0}.site-footer{font-size:10px;color:#7c897c;padding-top:10px;padding-bottom:20px;gap:20px;flex-wrap:wrap}.site-footer button{border:0;background:none;color:inherit;font-size:10px;padding:7px 0 7px 20px}.rule-badge{margin-left:12px;padding-left:12px;border-left:1px solid #c6d0bf;color:var(--gold)}
.panel{margin:auto;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #e4e6d9;border-radius:20px;background:#fafbf5;padding:30px;color:var(--ink);box-shadow:0 24px 80px #0e2d3b35}.panel::backdrop{background:#122b2475;backdrop-filter:blur(5px)}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.panel-heading h2{margin-top:7px;margin-bottom:16px}.close-panel{border:0;border-radius:50%;width:30px;height:30px;background:#e9eee2;color:#52684f;font-size:22px;line-height:1}.panel-note,.about-copy{font-size:13px;line-height:1.8;color:var(--muted)}.field{display:block;font-size:13px;margin-top:22px;margin-bottom:8px}input:not([type=range]),select{background:#fffef8;border:1px solid #cdd7c6;border-radius:8px;padding:11px 12px;color:var(--ink);min-width:0}input:not([type=range]){display:block;width:100%;margin-top:8px}.action{display:block;border:1px solid var(--green);background:var(--green);color:#fff9e6;width:100%;padding:13px;border-radius:9px;margin:16px 0 0;font-size:14px;font-weight:600}.action:hover{background:#1d513d}.action.secondary{background:#edf1e5;color:var(--green);border-color:#c6d2bf}.back{display:block;text-align:center;border:0;border-radius:8px;padding:12px;width:100%;background:none;color:var(--muted);font-size:12px;margin-top:10px}.back:hover{background:#e9efdf}.online-grid{display:grid;grid-template-columns:1fr 92px;gap:12px}.online-grid .action,.online-grid input{margin:0}.or{border-bottom:1px solid var(--line);height:24px;text-align:center;margin:12px 0 4px}.or span{position:relative;top:15px;background:#fafbf5;padding:0 12px;font-size:11px;color:var(--muted)}.invite-banner{padding:12px;background:#edf0d7;color:#5b642e;font-size:13px;border-radius:8px}.error{font-size:12px;color:#a13d30;line-height:1.6;margin:10px 0 0;min-height:0}.error:empty{display:none}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;padding:13px 0;border-bottom:1px solid #e4e9dc}.setting-row small{font-size:10px;color:var(--muted);display:block;line-height:1.6;margin-top:5px}.setting-row select{width:167px;padding:9px}.volume-control{display:flex;gap:10px;width:167px;align-items:center}.volume-control input{width:110px;accent-color:var(--green);margin:0}.volume-control output{font-size:11px;color:var(--muted);width:40px;font-variant-numeric:tabular-nums}.wide-panel{width:min(760px,calc(100vw - 32px))}.rules{font-size:13px;line-height:1.95}.rules h3{font-size:19px;margin-top:10px}.rules h4{font-size:15px;margin-bottom:6px;color:var(--green)}.rules ul{padding-left:20px}.rules li{padding:3px 0}.learn-list{padding-left:23px;font-size:14px;line-height:1.65}.learn-list li{padding:12px 0 8px 9px}.learn-list li::marker{color:var(--gold);font:20px Georgia,serif}.learn-list p{font-size:12px;color:var(--muted);line-height:1.9;margin:5px 0}.about-copy p{margin:12px 0}
.empty-history{padding:38px 18px;text-align:center;color:var(--muted);border:1px dashed #cdd6c4;border-radius:12px;margin:20px 0}.empty-history b{display:block;color:var(--ink);font-size:17px;margin-bottom:10px}.empty-history p{font-size:12px;line-height:1.8}.history-entry{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin:12px 0}.history-entry summary{display:flex;justify-content:space-between;gap:14px;align-items:center;cursor:pointer;font-size:14px;list-style:none}.history-entry summary:after{content:"＋";color:var(--muted)}.history-entry[open] summary:after{content:"−"}.history-entry summary small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.history-entry .history-score{margin-left:auto;font:22px Georgia,serif;white-space:nowrap}.score-positive{color:#306c4d}.score-negative{color:#a15340}.history-score-table{width:100%;border-collapse:collapse;font-size:12px;margin:20px 0 14px;text-align:left}.history-score-table th,.history-score-table td{padding:8px;border-bottom:1px solid #e3e8da}.history-score-table th{font-weight:500;color:var(--muted)}.result-details{font-size:12px;line-height:1.8}.result-details h4{margin-bottom:5px}.result-note{color:var(--gold);font-size:11px}.result-items{padding:12px;background:#ecf0e3;border-radius:8px}.result-items ul{padding-left:18px;margin:5px 0}.payment-flow{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.payment-flow span{padding:5px 8px;border-radius:6px;background:#e8eee0}.win-breakdown{padding:10px 0}.win-breakdown p{font-size:10px;color:var(--muted)}.breakdown-row{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end}.breakdown-group{display:inline-flex;gap:1px}.breakdown-group.pair{outline:1px solid #c2a474;border-radius:3px}.result-tile{display:inline-block;position:relative;width:25px;height:35px;background:#f5f0d9;border:1px solid #d4ccb1;border-radius:3px}.result-tile .face{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
@media(min-width:1100px) and (min-height:850px){.home-layout{margin-top:65px;margin-bottom:70px}.menu{padding:36px}.menu-btn{padding:23px 20px}}
@media(max-height:760px) and (min-width:901px){.site-header{padding-top:18px;padding-bottom:18px}.home-layout{margin-top:8px;margin-bottom:18px;gap:60px}.menu{padding:24px}.menu-btn{padding:15px 18px}.activity{padding:19px 0}.minor{margin-top:12px}.storage-note{margin-top:10px}h1{font-size:54px;margin:14px 0}.hero-tiles{height:190px;transform:scale(.85);transform-origin:left top;margin-bottom:0}.panel{padding:23px}.setting-row{padding:9px 0}.setting-row small{margin-top:2px}}
@media(max-width:900px){.site-header,.site-footer{padding-left:24px;padding-right:24px}.home-layout{grid-template-columns:minmax(0,1fr) minmax(330px,1fr);gap:30px;padding:0 24px}.menu{padding:23px}h1{font-size:48px}.hero-tiles{transform:scale(.8);transform-origin:left top;width:280px;height:180px;margin-bottom:-18px}.quick-rule{gap:14px}.quick-rule span{gap:5px;font-size:10px}.quick-rule b{font-size:24px}.intro{font-size:13px}.menu-btn{padding:18px 13px;gap:11px}}
@media(max-width:660px){.site-header{padding:20px}.network-status{font-size:10px}.wordmark{font-size:17px;gap:8px}.wordmark img{width:32px;height:32px}.home-layout{display:block;padding:0 20px;margin:14px auto 22px;max-width:470px}.welcome{padding-top:0;min-height:195px}.welcome .eyebrow{font-size:10px;letter-spacing:2px}h1{font-size:37px;margin:14px 0;letter-spacing:2px}.intro{max-width:235px;font-size:12px}.hero-tiles{position:absolute;top:15px;right:-42px;transform:scale(.47);transform-origin:top right;width:330px;height:180px;opacity:.95}.quick-rule{display:none}.text-button{margin:16px 0 22px}.menu{padding:24px;border-radius:19px}.menu h2{font-size:22px;margin-bottom:19px}.menu-btn{padding:18px}.menu-btn strong{font-size:17px}.site-footer{padding:0 20px 20px;font-size:9px;gap:6px;max-width:470px}.site-footer button{font-size:9px}.rule-badge{margin-left:8px;padding-left:8px}.panel{padding:22px;max-height:calc(100dvh - 28px)}.panel-heading h2{font-size:22px}.setting-row{font-size:12px;gap:8px}.setting-row select,.volume-control{width:145px}.volume-control input{width:93px}.setting-row small{max-width:170px}.history-entry{padding:13px 11px}.history-entry summary{font-size:12px}}
#settingsPanel[open]{display:flex;flex-direction:column}#settingsPanel>.panel-heading,#settingsPanel>.panel-note,#settingsPanel>.action,#settingsPanel>.back,#settingsPanel>.error{flex-shrink:0}.settings-fields{overflow:auto;min-height:0;overscroll-behavior:contain;padding-right:6px;margin-right:-6px}
@media(max-width:660px){.hero-tiles{right:-4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.reduce-motion *{transition:none!important}
.feedback-panel{width:min(680px,calc(100vw - 32px))}.feedback-panel[open]{display:flex;flex-direction:column;overflow:hidden}.feedback-panel>.panel-heading,.feedback-panel>.feedback-status,.feedback-panel>.feedback-actions,.feedback-panel>.back{flex-shrink:0}.about-scroll{overflow:auto;min-height:0;overscroll-behavior:contain;padding:0 5px 0 1px;margin-right:-5px}.feedback-editor{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.feedback-editor h3{font-size:17px;margin:0 0 8px;font-weight:600}.feedback-editor .field{margin-top:15px}.feedback-panel textarea{display:block;width:100%;resize:vertical;min-height:64px;font:inherit;font-size:13px;line-height:1.7;color:var(--ink);background:#fffef8;border:1px solid #cdd7c6;border-radius:8px;padding:10px 12px}.feedback-panel textarea:focus-visible{outline:3px solid #bd9149;outline-offset:3px}.feedback-panel .feedback-report{min-height:130px;background:#f0f3e9;font-size:12px;white-space:pre-wrap}.feedback-text-button{border:0;background:transparent;color:var(--green);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:5px 0;cursor:pointer}.feedback-channel{overflow-wrap:anywhere;user-select:text}.feedback-manual-note,.about-license{font-size:11px}.about-diagnostics{margin-top:14px}.about-diagnostics .panel-note,.feedback-status{white-space:pre-wrap;overflow-wrap:anywhere}.feedback-status{margin:12px 0 0;font-size:12px;min-height:1.7em}.feedback-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feedback-actions .action{margin-top:10px}.feedback-panel .back{margin-top:6px;padding:9px}.about-license{padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:460px){.feedback-panel{padding:20px}.feedback-actions{gap:8px}.feedback-actions .action{font-size:13px;padding:11px 8px}.feedback-panel textarea{font-size:12px}.feedback-panel .panel-note{font-size:12px}}