@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&&family=Ma+Shan+Zheng&family=Noto+Serif+TC:wght@100;300;400;500;600;700;900&display=swap');body{background-color:#000000;width:1080px;max-width:100%;color:#FFFFFF;margin-left:auto;margin-right:auto;margin-top:0;padding:0}a, a:link, a:visited{color:gray;text-decoration:none}td{padding:10px;vertical-align:middle}.nes-balloon{margin-bottom:12px;padding:0.5rem 1rem}.footer{position:fixed;z-index:9999;left:0px;bottom:0px;padding-top:20px;width:100%;margin-left:auto;margin-right:auto;text-align:center}.footlink{font-size:x-small;background-color:#000000}select{padding:3px;font-size:11px;border:1px solid #ccc;border-radius:8px;background-color:#fff}.loader{width:80px;height:70px;margin:48px;border:5px solid #000;padding:0 8px;box-sizing:border-box;background:linear-gradient(#fff 0 0) 00/8px 20px,linear-gradient(#fff 0 0) 100% 0/8px 20px,radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,#000;background-repeat:no-repeat;animation:l3 1s infinite linear}@keyframes l3{25%{background-position:0 0 ,100% 100%,100% calc(100% - 5px)}50%{background-position:0 100%,100% 100%,0calc(100% - 5px)}75%{background-position:0 100%,100%0,100% 5px}}.loader2{width:120px;height:110px;margin:48px;border:5px solid #0;padding:0 8px;box-sizing:border-box;background:linear-gradient(#0000FF 0 0) 00/8px 20px,linear-gradient(#0000FF 0 0) 100% 0/8px 20px,radial-gradient(farthest-side,#0000FF 90%,#0000) 0 5px/8px 8px content-box,#000;background-repeat:no-repeat;animation:l4 1s infinite linear}@keyframes l4{25%{background-position:0 0 ,100% 100%,100% calc(100% - 5px)}50%{background-position:0 100%,100% 100%,0calc(100% - 5px)}75%{background-position:0 100%,100%0,100% 5px}}:root{--bg-color:#121212;--panel-bg:rgba(235, 235, 235, 0.90);--text-main:#e0d6c2;--text-gold:#f0d090;--load-text:#996600;--accent-color:#ffff00;--border-color:#444}body{overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center}h1{margin:0;font-family:'Ma Shan Zheng', cursive;font-weight:400;font-size:2.5rem;color:var(--text-gold);letter-spacing:3px;text-shadow:0 2px 10px rgba(0,0,0,0.5)}.subtitle{font-size:0.9rem;color:#888;letter-spacing:1px;text-align:center}.main-stage{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:10px;width:100%;max-width:1200px;padding:20px;box-sizing:border-box}.hand-container{position:relative;width:420px;height:480px;flex:0 0 auto;display:flex;justify-content:center;align-items:center;margin-left:-20px}svg{width:100%;height:100%;filter:drop-shadow(0 10px 15px rgba(0,0,0,0.5));overflow:visible}.hand-path{fill:#f9bf9f;stroke:#000000;stroke-width:4;fill-rule:evenodd;vector-effect:non-scaling-stroke;transition:fill 0.3s}.crease-path{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-opacity:0.5}.zodiac-group{cursor:pointer;transition:opacity 0.2s}.zodiac-group:hover .hit-area{fill:rgba(255, 215, 0, 0.1);stroke:rgba(255, 215, 0, 0.5);stroke-width:2}.zodiac-text{font-family:'Noto Serif TC';font-weight:900;font-size:18px;fill:#5d4037;text-anchor:middle;dominant-baseline:middle;pointer-events:none;user-select:none}.zodiac-group.active .zodiac-text{fill:#d50000;font-size:24px;text-shadow:0 1px 3px rgba(255,255,255,0.5)}.active-ring{fill:none;stroke:#d50000;stroke-width:3;opacity:0;transition:opacity 0.3s}.zodiac-group.active .active-ring{opacity:1}.hit-area{fill:transparent;stroke:none}#overlay-fx{position:absolute;line-height:1em;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;z-index:10;display:flex;justify-content:center;align-items:center}#fx-text{font-family:'Ma Shan Zheng', cursive;font-size:7rem;line-height:1em;color:var(--accent-color);text-shadow:0 0 30px rgba(255, 215, 0, 0.8), 2px 2px 0px rgba(0,0,0,0.5);opacity:0;transform:scale(0.2)}@keyframes text-zoom-fade{0%{opacity:0;transform:scale(0.3);filter:blur(5px)}20%{opacity:1;transform:scale(1.0);filter:blur(0px)}70%{opacity:1;transform:scale(1.1);filter:blur(0px)}100%{opacity:0;transform:scale(1.5);filter:blur(8px)}}.animating{animation:text-zoom-fade 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards}.info-panel{flex:1;min-width:300px;max-width:450px;display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-left:20px;font-weight:600}#result-box{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:12px;padding:20px;min-height:240px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}.loading-container{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:160px;color:var(--load-text);font-weight:700}.spinner{width:50px;height:50px;border:6px solid rgba(255, 255, 0, 0.3);border-top:6px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{100%{transform:rotate(360deg)}}.result-content{display:none;opacity:0;transition:opacity 0.5s ease}.grid-layout{display:grid;grid-template-columns:auto 1fr;gap:15px 20px;align-items:center;font-size:1.2rem;margin-top:20px}.label{text-align:right;color:#333;font-size:1rem}.val-good-xl{color:#ff3333;font-weight:bold} .val-good-sm{color:#ff6633;font-weight:bold} .val-good{color:#ff9900;font-weight:bold} .val-bad{color:#009955;font-weight:bold} @media (max-width:900px){.main-stage{flex-direction:column;align-items:center;padding:10px 10px 30px 10px;gap:10px}.hand-container{width:100%;max-width:360px;height:auto;aspect-ratio:420/480}.info-panel{width:100%;padding-top:20px;padding-left:0px}}