:root{--cream:#fcf8f4;--ink:#2a0904;--muted:#816961;--gold:#fbbf30;--red:#fa3f59;--blue:#1898fc;--border:#e9dcd3;--white:#fff;--radius:26px;font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button,a,input,select,textarea,summary{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}[hidden]{display:none!important}img{max-width:100%}button{border:0}a{color:inherit;text-decoration:none}.app-shell{max-width:1280px;padding:0 42px;margin:auto}.topbar{display:flex;align-items:center;gap:28px;min-height:112px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand img{width:70px;height:44px;object-fit:cover;border-radius:10px}.brand strong{font-size:25px;letter-spacing:1px;display:block;line-height:1.15}.brand small{font-size:11px;font-weight:700;display:block;margin-top:4px;letter-spacing:1.4px}.main-nav{display:flex;align-items:center;gap:10px;margin:auto}.nav-item{min-height:44px;padding:10px 18px;border-radius:30px;color:var(--muted);background:transparent;font-size:14px;font-weight:700;white-space:nowrap}.nav-item.active{background:var(--ink);color:var(--white)}.nav-item span{font-size:11px;opacity:.65;margin-left:4px}.settings-btn{background:#fff4e5;border:1px solid #eaded4;border-radius:50%;width:44px;height:44px;padding:11px;color:var(--ink);flex-shrink:0}.settings-btn svg{width:22px;height:22px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:40px 0 28px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--muted);margin:0 0 12px;line-height:1.5}h1{font-size:36px;line-height:1.3;letter-spacing:1px;margin:0 0 10px}h2,h3,p{margin-top:0}.heading-sub{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:0}.rule-pill{display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #efc9ce;background:#fff0f2;border-radius:25px;padding:11px 16px;font-size:12px;font-weight:700}.rule-dot{width:7px;height:7px;background:var(--red);border-radius:50%}.game-layout{display:grid;grid-template-columns:365px minmax(0,1fr);gap:26px;align-items:start}.setup-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:26px}.panel-heading{margin-bottom:25px}.mini-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:#987160}.panel-heading h2{font-size:21px;line-height:1.5;margin:7px 0 0}fieldset{padding:0;border:0;margin:0 0 24px;min-width:0}legend{font-size:13px;font-weight:700;margin-bottom:12px;line-height:1.5}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-option{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;border:1px solid var(--border);border-radius:15px;background:var(--white);color:var(--ink);padding:14px 12px;min-height:100px}.mode-option.selected{border-color:var(--ink);background:#fff5dc;box-shadow:inset 0 0 0 1px var(--ink)}.mode-option strong{font-size:14px}.mode-icon{font-size:20px;color:#b58514;line-height:1}.mode-option[data-mode="couple"] .mode-icon{color:var(--red)}.mode-option small{font-size:11px;color:var(--muted);line-height:1.4}.field-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin:0 0 10px}.field-label span{font-weight:400;color:var(--muted);font-size:11px}textarea{resize:vertical;min-height:74px;max-height:150px;border:1px solid var(--border);border-radius:12px;width:100%;padding:12px;font-size:15px;background:#fffcf8;color:var(--ink);line-height:1.6}.field-note{font-size:11px;color:var(--muted);margin:7px 0 23px;line-height:1.6}.pool-field{margin-bottom:17px}.pool-option{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;padding:12px 10px;margin-bottom:8px;min-height:65px;cursor:pointer}.pool-option input{width:16px;height:16px;margin:0;accent-color:var(--ink);flex-shrink:0}.pool-symbol{display:grid;place-items:center;width:29px;height:34px;border-radius:8px;flex-shrink:0;background:#fff3c8;color:#8a5a00;font-size:21px}.small .pool-symbol{background:#eaf5ff;color:#0778ce}.large .pool-symbol{background:#ffe8ec;color:#c92741}.pool-copy{flex:1;min-width:0}.pool-copy strong{display:block;font-size:12px;line-height:1.6}.pool-copy em{font-style:normal;color:var(--muted);font-size:10px;margin-left:4px;font-weight:400}.pool-copy small{display:block;font-size:10px;color:var(--muted);line-height:1.6}.pool-option b{font-size:11px;color:var(--muted)}.lobby-summary{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:18px 0}.primary-btn,.secondary-btn{min-height:49px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:15px;width:100%;padding:13px 18px;font-size:14px;font-weight:700;line-height:1.4}.primary-btn{background:var(--ink);color:var(--white)}.primary-btn:hover{background:#512215}.secondary-btn{background:var(--white);color:var(--ink);border:1px solid var(--border)}.primary-btn span{font-size:19px}.start-btn{background:var(--gold);color:var(--ink)}.start-btn:hover{background:#ffd064}.rule-note{font-size:11px;line-height:1.8;color:var(--muted);margin:12px 0 0}.form-error{padding:10px;background:#fff0f2;color:#bb1932;font-size:12px;line-height:1.6;border-radius:10px}.play-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px 30px;min-height:687px;overflow:hidden;position:relative}.play-top{display:flex;justify-content:space-between;align-items:center;min-height:32px;margin-bottom:12px}.play-label{font-size:10px;color:var(--muted);letter-spacing:1.6px;max-width:70%;line-height:1.7}.round-counter{display:flex;align-items:baseline;gap:5px}.round-counter b{font-size:24px}.round-counter span{font-size:12px;color:var(--muted)}.welcome-view{text-align:center}.welcome-art{position:relative;display:grid;place-items:center;min-height:360px}.main-logo{position:relative;z-index:2;width:270px;height:270px;object-fit:contain}.decor-card{position:absolute;display:grid;place-items:center;font-size:45px;width:106px;height:149px;border-radius:18px;border:1px solid #f0dfbb;background:#fff6dc;color:#ecae1d;opacity:.7}.decor-one{left:4%;top:130px;transform:rotate(-17deg)}.decor-two{right:5%;top:76px;transform:rotate(17deg);color:#f0778b;background:#fff0f3;border-color:#f8dbe0}.welcome-view h2{font-size:24px;line-height:1.5;margin:0 0 9px}.welcome-view p{font-size:13px;color:var(--muted);margin-bottom:23px}.welcome-view .secondary-btn{width:210px;margin:auto}.play-bottom{display:flex;gap:24px;justify-content:center;font-size:10px;color:var(--muted);margin-top:38px;padding-top:18px;border-top:1px solid #f3e9e3;flex-wrap:wrap}.play-bottom span{display:flex;align-items:center;gap:6px}.play-bottom i{width:6px;height:6px;border-radius:50%;display:inline-block}.dot-gold{background:var(--gold)}.dot-blue{background:var(--blue)}.dot-red{background:var(--red)}.current-player{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;background:#fcf8f4;flex-wrap:wrap}.current-player label{font-size:11px;color:var(--muted)}.current-player select{font-size:14px;font-weight:700;color:var(--ink);border:0;background:transparent;min-height:29px;max-width:180px;padding:0 5px}.next-note{margin-left:auto;font-size:10px;color:var(--muted)}.draw-zone{position:relative;height:330px;display:grid;place-items:center}.idle-art{position:absolute;inset:0;display:grid;place-items:center}.idle-art img{position:absolute;width:250px;top:27px;z-index:1}.idle-card{position:absolute;top:140px;z-index:2;width:139px;height:176px;border:3px solid var(--ink);border-radius:18px;background:var(--gold);box-shadow:8px 8px 0 #2a090410;transform:rotate(-5deg);display:flex;flex-direction:column;align-items:center;padding:17px 10px}.idle-card>span{font-size:8px;letter-spacing:1px;font-weight:700}.idle-card b{font-size:65px;line-height:1.5}.idle-card small{font-size:10px;font-weight:700}.orbit-star{position:absolute;font-style:normal;font-size:27px;color:var(--gold)}.star-one{top:75px;left:11%}.star-two{bottom:40px;right:11%;color:var(--red)}.animation-stage{width:100%;height:330px;position:relative;z-index:3}.draw-copy{text-align:center;margin:5px 0 19px}.draw-copy h2{font-size:24px;line-height:1.5;margin:0 0 8px}.draw-copy p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.draw-btn{background:var(--gold);color:var(--ink);max-width:340px;margin:auto}.draw-btn:hover{background:#ffd064}.draw-note{text-align:center;font-size:10px;color:var(--muted);line-height:1.7;margin:12px 0 0}.result-view{padding-top:4px}.forced-callout{font-size:20px;font-weight:800;line-height:1.6;display:flex;align-items:center;justify-content:center;gap:12px;color:#c32540;text-align:center;margin:0 0 16px;flex-wrap:wrap}.forced-callout span{font-size:10px;padding:5px 9px;background:#ffe9ed;border-radius:20px;font-weight:700}.result-card{--result-accent:var(--gold);position:relative;min-height:330px;border:2px solid var(--result-accent);background:#fffaf0;border-radius:23px;padding:23px 24px;text-align:center}.result-card.small-penalty{--result-accent:var(--blue);background:#f2f9ff}.result-card.large-penalty{--result-accent:var(--red);background:#fff3f5}.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.type-label{font-size:11px;font-weight:700;background:var(--result-accent);color:var(--ink);padding:7px 12px;border-radius:16px}.small-penalty .type-label{color:#fff;background:#147fc4}.large-penalty .type-label{color:#fff;background:#c72b43}.card-code{font-size:11px;color:var(--muted);letter-spacing:2px}.result-emblem{font-size:38px;color:#bd8100;margin:15px 0 5px;line-height:1.1}.small-penalty .result-emblem{color:#0d86df}.large-penalty .result-emblem{color:#dc304d}.result-player{font-size:11px;color:var(--muted);margin:9px 0 8px}.result-card h2{font-size:30px;line-height:1.4;margin:0 0 16px;overflow-wrap:anywhere}.result-description{font-size:16px;line-height:1.85;max-width:410px;margin:0 auto 19px}.result-meta{display:flex;justify-content:center;gap:14px;color:var(--muted);font-size:11px;line-height:1.6;flex-wrap:wrap}.timer-btn{background:#fff;border:1px solid var(--border);border-radius:11px;padding:9px 17px;min-height:43px;color:var(--ink);font-size:12px;font-weight:700;margin-top:16px}.timer-btn.running{background:var(--ink);color:#fff;font-variant-numeric:tabular-nums}.alternative{padding:13px 15px;border:1px solid var(--border);border-radius:12px;font-size:12px;margin:14px 0}.alternative summary{cursor:pointer;font-weight:700;min-height:20px}.alternative p{margin:12px 0 3px;line-height:1.8;color:var(--muted)}.text-btn{color:var(--ink);background:transparent;padding:10px 0;min-height:44px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}.result-actions{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}.complete-view{text-align:center;padding:35px 10px 20px}.complete-view img{width:300px;max-width:90%;margin:0 auto 27px}.complete-view h2{font-size:26px;line-height:1.5;margin-bottom:12px}.complete-view>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.8}.complete-counts{display:flex;justify-content:center;gap:17px;margin:25px 0;font-size:12px;flex-wrap:wrap}.complete-counts strong{font-size:19px;margin-left:5px;color:var(--ink)}.complete-view .primary-btn{max-width:330px;margin:28px auto 0}.category-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:36px 0 40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.category-strip article{padding:24px 26px;position:relative}.category-strip article:first-child{padding-left:0}.category-strip article+article{border-left:1px solid var(--border)}.category-index{font-size:11px;letter-spacing:1px;color:var(--muted);display:block;margin-bottom:8px}.category-strip h3{font-size:18px;margin:0 0 9px;line-height:1.5}.category-strip h3 small{font-size:11px;font-weight:400;color:var(--muted);margin-left:8px}.category-strip p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.history-panel{margin-top:30px;background:#fffdf9;border:1px solid var(--border);border-radius:var(--radius);padding:25px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.section-heading h2{font-size:20px;margin-bottom:0}.section-heading .eyebrow{margin-bottom:8px}.round-history{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;margin:0}.history-item{border:1px solid var(--border);border-radius:13px;padding:13px;background:var(--white);display:grid;grid-template-columns:27px minmax(0,1fr);gap:9px;font-size:12px;align-items:start}.history-item .history-number{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fcf0df;color:#765741;font-size:10px}.history-item b{line-height:1.6;display:block;overflow-wrap:anywhere}.history-item small{color:var(--muted);font-size:10px;display:block;line-height:1.7}.history-tags{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}.history-tags span{font-size:9px;background:#f8f1e8;padding:3px 5px;border-radius:5px}.history-tags .forced-tag{background:#ffe8ee;color:#b92b43}.empty-history{font-size:12px;line-height:1.7;color:var(--muted);grid-column:1/-1;padding:10px 0}.catalog-controls{display:flex;gap:25px;align-items:center;justify-content:space-between}.filter-group{display:flex;gap:7px;flex-wrap:wrap}.filter-btn{font-size:13px;padding:12px 16px;min-height:44px;border:1px solid var(--border);border-radius:30px;background:var(--white);color:var(--muted);font-weight:700}.filter-btn.selected{background:var(--ink);color:#fff;border-color:var(--ink)}.filter-btn span{margin-left:5px;font-size:10px;opacity:.6}.catalog-mode-label{font-size:12px;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--muted)}.catalog-mode-label select{min-height:43px;background:#fff;border:1px solid var(--border);border-radius:10px;color:var(--ink);padding:8px;font-size:14px}.catalog-count{font-size:12px;color:var(--muted);margin:21px 0}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}.catalog-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:23px;display:flex;flex-direction:column;align-items:stretch}.catalog-card .catalog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:10px}.catalog-badge{font-size:10px;border-radius:15px;background:#fff1c9;color:#7a5000;padding:6px 10px;font-weight:700}.catalog-card.small-penalty .catalog-badge{background:#e6f3ff;color:#096eaf}.catalog-card.large-penalty .catalog-badge{background:#ffe8ef;color:#b72340}.catalog-card h3{font-size:20px;line-height:1.5;margin-bottom:12px}.catalog-card p{font-size:13px;line-height:1.9;margin-bottom:17px}.catalog-card .catalog-bottom{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;line-height:1.6;margin-top:auto}.catalog-card details{font-size:11px;line-height:1.8;margin-bottom:17px;color:var(--muted)}.catalog-card summary{min-height:24px;cursor:pointer}.app-footer{border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:22px 0 32px;color:var(--muted);font-size:11px}dialog{color:var(--ink);background:var(--cream);border:1px solid var(--border);border-radius:24px;width:min(540px,calc(100vw - 32px));padding:34px;max-height:86vh;overflow:auto}dialog::backdrop{background:#2a09045e;backdrop-filter:blur(4px)}dialog h2{font-size:25px;line-height:1.5;margin-bottom:20px}dialog>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.8}.dialog-close{position:absolute;top:12px;right:14px;border-radius:50%;width:36px;height:36px;background:transparent;font-size:25px;color:var(--muted)}.how-list{padding:0 0 0 23px;line-height:1.7;margin:20px 0 24px}.how-list li{padding-left:6px;margin-bottom:18px;font-size:14px}.how-list p{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.9}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:22px 0;border-top:1px solid var(--border)}.setting-row strong{display:block;font-size:14px}.setting-row small{display:block;font-size:12px;color:var(--muted);line-height:1.7;margin-top:7px}.setting-row input{width:20px;height:20px;accent-color:var(--ink);flex-shrink:0}#settings-dialog>.primary-btn{margin-top:12px}.dialog-actions{display:flex;gap:12px;margin-top:25px}.toast{position:fixed;z-index:10;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;max-width:min(440px,90vw);padding:15px 21px;border-radius:13px;font-size:13px;line-height:1.7;box-shadow:0 8px 30px #2a090428}.game-layout.in-session{grid-template-columns:1fr}.game-layout.in-session .play-panel{max-width:720px;width:100%;margin:auto;min-height:620px}.game-layout.in-session .setup-panel{display:none}.game-layout.in-session .draw-zone{max-width:570px;margin:auto}.game-layout.in-session .play-bottom{margin-top:27px}.busy .current-player select{pointer-events:none}.busy .draw-copy h2{color:#906000}.busy-forced .draw-copy h2{color:#b62a42}
@media(min-width:1050px){.game-layout.in-session .play-panel{max-width:820px}.game-layout.in-session .result-card{max-width:610px;margin:auto}.game-layout.in-session .alternative,.game-layout.in-session .result-actions{max-width:610px;margin-left:auto;margin-right:auto}}
@media(max-width:1000px){.app-shell{padding:0 24px}.game-layout{grid-template-columns:325px minmax(0,1fr);gap:18px}.setup-panel{padding:22px 18px}.play-panel{padding:22px 20px}.topbar{gap:16px}.nav-item{padding:10px 12px}.decor-one{left:-4%}.decor-two{right:-6%}.main-logo{width:250px;height:250px}.category-strip article{padding:22px 18px}.round-history{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app-shell{padding:0 18px}.topbar{min-height:94px;flex-wrap:wrap;gap:12px;padding:18px 0 13px}.brand{margin-right:auto;gap:8px}.brand img{width:64px;height:40px}.brand strong{font-size:22px}.brand small{font-size:10px}.settings-btn{order:1;width:42px;height:42px}.main-nav{order:2;width:100%;margin:0;justify-content:center;gap:7px}.nav-item{min-height:40px;font-size:12px;padding:10px 17px}.page-heading{display:block;margin:27px 0 22px}.eyebrow{font-size:9px;letter-spacing:1.4px}h1{font-size:28px;letter-spacing:0}.heading-sub{font-size:12px;line-height:1.8}.rule-pill{display:inline-flex;font-size:10px;padding:7px 12px;margin-top:14px}.game-layout{display:flex;flex-direction:column;gap:20px}.play-panel{order:0;width:100%;padding:20px 20px;min-height:565px}.setup-panel{order:1;width:100%;padding:24px}.welcome-art{min-height:308px}.main-logo{width:245px;height:245px}.decor-card{width:80px;height:122px;font-size:31px}.decor-one{left:0;top:123px}.decor-two{right:0;top:61px}.welcome-view h2{font-size:20px}.welcome-view p{font-size:12px}.play-bottom{gap:15px;font-size:9px;margin-top:28px}.panel-heading h2{font-size:23px}.mode-option small{font-size:12px}.mode-option strong{font-size:15px}.field-note,.rule-note{font-size:12px}.pool-copy strong{font-size:13px}.pool-copy small{font-size:11px}.pool-copy em{font-size:11px}.pool-option{padding:13px 12px}.lobby-summary{font-size:12px}textarea,select{font-size:16px!important}.category-strip{grid-template-columns:1fr;margin-top:25px}.category-strip article,.category-strip article:first-child{padding:20px 4px}.category-strip article+article{border-left:0;border-top:1px solid var(--border)}.category-strip h3{font-size:18px}.category-index{float:right;font-size:10px}.category-strip p{font-size:12px}.current-player{gap:8px}.next-note{display:none}.current-player select{max-width:200px}.draw-zone,.animation-stage{height:300px}.idle-art img{width:220px;top:26px}.idle-card{top:124px;width:131px;height:163px}.idle-card b{font-size:57px}.draw-copy h2{font-size:23px}.draw-copy p{font-size:12px}.draw-note{font-size:11px}.play-top{margin-bottom:9px}.play-label{font-size:9px;letter-spacing:1px}.result-card{padding:20px 17px;min-height:335px}.result-card h2{font-size:27px}.result-description{font-size:15px;line-height:1.85}.forced-callout{font-size:19px;gap:7px}.result-actions{grid-template-columns:1fr 95px;gap:8px}.result-actions button{font-size:12px;padding:13px 12px}.complete-view{padding:25px 0 15px}.complete-view h2{font-size:23px}.complete-counts{gap:13px;font-size:11px}.history-panel{padding:20px 17px;margin-top:20px}.section-heading h2{font-size:18px}.round-history{grid-template-columns:1fr}.catalog-controls{align-items:stretch;flex-direction:column;gap:15px}.filter-group{gap:7px}.filter-btn{font-size:12px;padding:11px 13px}.catalog-mode-label{align-self:flex-start}.catalog-grid{grid-template-columns:1fr;gap:13px}.catalog-card{padding:23px}.catalog-card p{font-size:14px}.catalog-card .catalog-bottom,.catalog-card details{font-size:12px}.catalog-count{font-size:12px}.type-label{font-size:10px}dialog{padding:29px 23px}dialog h2{font-size:22px}.game-layout.in-session .play-panel{min-height:570px}}
@media(max-width:350px){.app-shell{padding:0 12px}.play-panel{padding:18px 14px}.main-logo{width:240px;height:240px}.setup-panel{padding:22px 17px}.nav-item{padding:10px 12px}.result-card{padding:18px 12px}.result-card h2{font-size:24px}.result-description{font-size:14px}.result-actions{grid-template-columns:1fr 85px}.play-bottom{gap:12px}.idle-art img{width:205px}.current-player select{max-width:165px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}