@charset "UTF-8";
:root{color-scheme:dark;--ink:#efeedd;--muted:#abb4a6;--mint:#b6dfbe;--paper:#e9e2ce;--dark:#222a28;--line:#53604f;font-family:"Microsoft JhengHei","Noto Sans TC","PingFang TC",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#3c4740,#222a28 75%);color:var(--ink);height:100dvh;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{cursor:default;opacity:.4}button{transition:transform .15s,filter .15s,background .15s}button:not(:disabled):active{transform:translateY(2px)}[hidden]{display:none!important}
.table{height:100dvh;max-width:1040px;margin:auto;padding:22px 28px;display:grid;grid-template-rows:42px 40px minmax(190px,1fr) 58px minmax(150px,.55fr) 40px;gap:18px}header{display:flex;align-items:center;justify-content:space-between}h1{font-size:28px;font-weight:650;letter-spacing:5px;margin:0}.text-button{background:transparent;color:#c9d0bc;font-size:18px;padding:8px 0 8px 15px}.scoreboard{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #62705b77;padding-top:8px;font-size:19px;letter-spacing:1px}.scoreboard strong{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums}.scoreboard small{font-size:20px;color:#a5b09a}.won #streak-label{color:var(--mint)}
.machine{padding:20px 24px 14px;border-radius:13px;background:linear-gradient(145deg,#465044,#333d34);box-shadow:inset 0 1px #88917c77,0 6px 0 #18231b,0 14px 25px #10201544;min-height:0;display:flex;flex-direction:column;gap:12px}.screen{flex:1;min-height:0;background:radial-gradient(ellipse at center,#1a3025,#111f18);box-shadow:inset 0 0 25px #00190f55,0 0 0 5px #1c281f;border-radius:8px;color:var(--mint);padding:22px 28px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}.idle{align-items:center;text-align:center}.idle .card-name{font-size:clamp(32px,4vw,58px);font-weight:500;letter-spacing:3px;word-break:break-word;line-height:1.4}.idle .prompt{font-size:20px;color:#a4bca5}.readout-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.readout-title strong{font-size:clamp(28px,3vw,38px);font-weight:550;letter-spacing:2px;overflow-wrap:anywhere}.result-note{font-size:17px;white-space:nowrap;color:#a8b69b}.result-note.wrong{color:#e7ad9b}.decision{font-size:32px;line-height:1.1;letter-spacing:2px}.decision.no-result{color:#e5b39b}.probabilities{display:flex;justify-content:space-between;gap:12px;font-size:19px;font-variant-numeric:tabular-nums}.probabilities span:last-child{color:#e5b39b}.probabilities b{font-weight:500;font-size:23px}.gauge{height:9px;border-radius:3px;background:#b88e79;overflow:hidden;flex-shrink:0}.gauge span{display:block;height:100%;background:var(--mint)}.confidence{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #65815e66;padding-top:12px;font-size:19px;color:#a9bd9f;font-variant-numeric:tabular-nums}.confidence b{font-size:22px;color:var(--mint);font-weight:500}.uncertainty-tag{font-size:16px;color:#e0d7aa}.screen.result{gap:12px}#feedback{min-height:23px;line-height:1.35;font-size:17px;color:#d5ddc9;text-align:center;overflow-wrap:anywhere}.busy .screen:before{content:"";position:absolute;left:0;right:0;height:45px;background:linear-gradient(transparent,#b4dfbf22,transparent);animation:scan 1.2s linear infinite;pointer-events:none}.busy .card-name{animation:pulse 1.2s infinite}
.controls{display:flex;gap:14px;min-height:0}.controls button{height:100%;border-radius:6px;font-size:22px;font-weight:550;letter-spacing:1px;box-shadow:0 4px 0 #18271c}.probe{flex:0 0 20%;background:#53684f;color:#edf0db;border:1px solid #8c9d7e}.answer-group{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:0}.answer.no{background:#d2a18d;color:#3a3027;border:1px solid #e2baa7}.answer.unsure{background:#c2bea4;color:#343c30;border:1px solid #d7d3b8}.answer.yes{background:#b9d6b2;color:#253a29;border:1px solid #d7e6cd}.controls button:not(:disabled):hover{filter:brightness(1.1)}
.hand-area{min-height:0;position:relative;padding:5px 3px 0}#hand{height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.card{position:relative;min-width:0;min-height:0;background:var(--paper);border:1px solid #f5efdc;border-radius:8px;color:#293a2c;padding:12px 8px;box-shadow:0 5px 0 #17251b77,0 7px 15px #14201944;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(var(--tilt));isolation:isolate}.card:before{content:"";position:absolute;inset:6px;border:1px solid #9fa98a55;border-radius:5px;pointer-events:none}.card strong{font-weight:600;font-size:clamp(23px,2.4vw,30px);line-height:1.5;overflow-wrap:anywhere;letter-spacing:1px}.card.selected{transform:translateY(-3px);outline:3px solid var(--mint);outline-offset:3px;background:#f2ebd7;box-shadow:0 9px 20px #101b1599}.card:not(:disabled):hover{filter:brightness(1.06)}.refill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:13px 20px;border-radius:6px;background:var(--mint);color:#233d28;font-size:20px;box-shadow:0 4px 15px #0006}footer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:center}footer button{background:none;color:#b3bfa7;font-size:18px;padding:7px 0;border-radius:4px}footer button:hover{background:#9fbd9222}
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);max-width:92vw;width:max-content;padding:16px 20px;background:#f0e2ca;color:#713b2e;box-shadow:0 8px 30px #0007;border-radius:6px;font-size:18px;z-index:10;text-align:center}dialog{max-width:580px;width:calc(100% - 28px);max-height:calc(100dvh - 32px);border:1px solid #708065;border-radius:10px;background:#2d382f;color:var(--ink);padding:52px 28px 28px;box-shadow:0 30px 100px #0008;overflow-y:auto}dialog::backdrop{background:#101a14cc;backdrop-filter:blur(4px)}#modal-close{position:absolute;right:18px;top:14px;background:transparent;font-size:17px;color:#c2cfb6;padding:5px}dialog h2{font-size:28px;font-weight:550;letter-spacing:1px;margin:4px 0 22px;line-height:1.5;overflow-wrap:anywhere}dialog p{font-size:18px;line-height:1.8;color:#bdcbb2}dialog p strong{color:var(--ink);font-weight:600}.modal-buttons{display:flex;gap:10px;margin-top:25px}.modal-buttons button,.submit-guess{background:var(--mint);color:#203b28;padding:14px 16px;border-radius:5px;font-size:19px;flex:1}.modal-buttons .secondary{background:#4b5948;color:#d8dfcc}.help-list{padding:0;list-style:none}.help-list li{font-size:18px;line-height:1.8;color:#bdcbb2;border-top:1px solid #59674f;padding:15px 0}.help-list b{color:var(--ink);font-weight:550}#guess-input{width:100%;background:#1e2a22;border:1px solid #81956f;border-radius:5px;color:#edf0df;padding:14px;font-size:19px;margin:0 0 14px}.submit-guess{width:100%}#guess-feedback{min-height:30px}.muted{color:#a0b090!important}.detail-data{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:10px 0;font-size:17px;color:#b1c2a5}.detail-data b{display:block;font-size:28px;font-weight:500;color:var(--ink);margin-top:8px}.history-list{display:flex;flex-direction:column}.history-row{background:transparent;color:var(--ink);text-align:left;border-top:1px solid #56654c;padding:16px 0;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.history-row strong{font-size:21px;font-weight:550}.history-row .history-result{font-size:17px;color:#bdcbb2}.history-row small{font-size:15px;color:#a7ba99}.history-row .wrong{color:#e7ad9b}.history-row .correct{color:var(--mint)}.back-button{margin-top:22px;background:#4b5948;color:#d8dfcc;padding:12px 18px;font-size:18px;border-radius:5px}.empty{padding:20px 0;font-size:19px;color:#a9b99e}
@keyframes scan{from{top:-45px}to{top:100%}}@keyframes pulse{50%{opacity:.45}}
@media(max-width:760px){.table{padding:16px;grid-template-rows:38px 36px minmax(180px,1fr) 52px minmax(174px,.8fr) 36px;gap:14px}h1{font-size:26px}.text-button{font-size:18px}.scoreboard{font-size:18px}.scoreboard strong{font-size:28px}.machine{padding:14px 15px 11px;gap:10px}.screen{padding:15px 16px;gap:10px}.screen.result{gap:9px}.idle .card-name{font-size:34px}.idle .prompt{font-size:18px}.readout-title strong{font-size:28px}.result-note{font-size:16px}.decision{font-size:27px}.probabilities{font-size:17px}.probabilities b{font-size:21px}.confidence{font-size:17px;padding-top:9px}.confidence b{font-size:20px}.uncertainty-tag{font-size:15px}#feedback{font-size:16px;min-height:22px}.controls{gap:9px}.controls button{font-size:19px;letter-spacing:0}.probe{flex-basis:20%}.answer-group{gap:7px}#hand{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}.card{padding:8px 7px}.card strong{font-size:25px;line-height:1.4;letter-spacing:0}footer button{font-size:17px}dialog{padding:50px 22px 24px}.history-row strong{font-size:20px}}
@media(max-width:760px) and (max-height:720px){.table{padding:12px 14px;grid-template-rows:34px 32px minmax(175px,1fr) 48px minmax(156px,.8fr) 32px;gap:10px}.machine{padding:11px 12px 8px;gap:7px}.screen{padding:12px 14px}.screen.result{gap:7px}.readout-title strong{font-size:25px}.result-note{font-size:15px}.decision{font-size:24px}.probabilities{font-size:16px}.probabilities b{font-size:20px}.confidence{padding-top:7px;font-size:16px}.confidence b{font-size:19px}.uncertainty-tag{font-size:14px}#feedback{font-size:15px;min-height:20px}.card strong{font-size:23px}.controls button{font-size:18px}h1{font-size:24px}.text-button{font-size:17px}#hand{gap:10px}footer button{font-size:16px}}
@media(max-width:360px){.table{padding-left:11px;padding-right:11px}.controls button{font-size:17px}.card strong{font-size:21px}.probabilities{font-size:15px}.probabilities b{font-size:19px}.screen{padding-left:12px;padding-right:12px}.readout-title strong{font-size:24px}}
@media(min-width:640px) and (max-height:500px){.table{padding:10px 18px;grid-template-columns:1fr 1fr;grid-template-rows:30px 28px minmax(150px,1fr) 44px 30px;grid-template-areas:"header header" "score score" "machine hand" "controls hand" "footer footer";gap:9px 18px}header{grid-area:header}.scoreboard{grid-area:score}.machine{grid-area:machine;padding:10px;gap:5px}.controls{grid-area:controls}.hand-area{grid-area:hand}footer{grid-area:footer}#hand{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.card strong{font-size:22px}.screen{padding:10px 14px;gap:6px}.screen.result{gap:5px}.readout-title strong{font-size:23px}.decision{font-size:22px}.probabilities{font-size:15px}.probabilities b{font-size:18px}.confidence{font-size:15px;padding-top:6px}.confidence b{font-size:17px}#feedback{font-size:14px;min-height:19px}.uncertainty-tag{font-size:13px}.controls button{font-size:17px}.idle .card-name{font-size:31px}.idle .prompt{font-size:17px}.text-button,footer button{font-size:16px}h1{font-size:23px}.scoreboard{padding-top:4px;font-size:17px}.scoreboard strong{font-size:24px}.scoreboard small{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.readout-title{line-height:1.3}.probabilities,.confidence{line-height:1.35}.uncertainty-tag{line-height:1.3}
@media(max-width:760px) and (max-height:720px){.screen.result{gap:5px}}
@media(max-width:760px) and (max-height:620px){.table{padding:10px 12px;grid-template-rows:30px 28px minmax(210px,1fr) 44px minmax(128px,.7fr) 28px;gap:8px}.card{padding:4px 6px}.card strong{font-size:21px;line-height:1.25}.screen{padding:10px 12px}.readout-title strong{font-size:24px}.decision{font-size:22px}.probabilities{font-size:15px}.probabilities b{font-size:19px}.confidence{font-size:16px;padding-top:6px}.confidence b{font-size:18px}.uncertainty-tag{font-size:13px}.screen.result{gap:5px}#feedback{font-size:14px;min-height:19px}.machine{gap:6px;padding:10px 11px 8px}.controls button{font-size:17px}#hand{gap:8px}footer button{font-size:15px}}
@media(min-width:640px) and (max-height:500px){.table{grid-template-rows:30px 28px minmax(150px,1fr) 44px 30px;gap:9px 18px}.screen.result{gap:4px}}
.card strong{text-wrap:balance}
@media(max-width:760px) and (max-height:620px){.screen.result{gap:4px}}
@media(min-width:640px) and (max-height:500px){.screen.result{gap:2px}}
@media(min-width:640px) and (max-height:500px){.screen{padding-top:6px;padding-bottom:6px}}
.scoreboard{justify-content:center;gap:clamp(30px,10vw,110px);padding-top:4px}.lamp-group{display:flex;align-items:center;gap:14px;font-size:19px}.lamps{display:flex;gap:10px}.lamps i{height:15px;width:15px;border-radius:50%;background:#18251e;border:1px solid #66745d;box-shadow:inset 0 2px 3px #0007}.yes-lamps .lit{background:#b6dfbe;border-color:#d4efcd;box-shadow:0 0 12px #b6dfbe99,inset 0 2px 2px #ffffff55}.no-lamps .lit{background:#e5ac91;border-color:#f4c6ab;box-shadow:0 0 12px #e5ac9199,inset 0 2px 2px #ffffff55}
.machine{position:relative;border-radius:24px;background:linear-gradient(135deg,#59604e,#404a3d 52%,#333e33);border:1px solid #263227;box-shadow:inset 0 2px #929b7b66,inset 0 -3px #263024,0 7px 0 #1b281e,0 17px 28px #101e1588;padding-top:22px}.machine:before,.machine:after{content:"";position:absolute;bottom:-9px;width:50px;height:7px;background:#152219;border-radius:0 0 6px 6px}.machine:before{left:35px}.machine:after{right:35px}.screen{border-radius:23px;box-shadow:0 0 0 6px #17261c,0 0 0 8px #616d5266,inset 0 0 28px #00180e66;background:radial-gradient(ellipse at 50% 35%,#20382a,#0f2118 95%)}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px)}.tv-top{position:absolute;top:8px;left:31px;right:31px;height:7px;display:flex;justify-content:space-between;align-items:center}.power-led{height:5px;width:5px;border-radius:50%;background:#b6dfbe;box-shadow:0 0 8px #b6dfbe77}.vents{width:95px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,#253626 0 12px,transparent 12px 17px);box-shadow:0 1px #88966d33}.screw{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#8b967a,#35432f);box-shadow:0 1px 2px #102015}.screw:after{content:"";position:absolute;left:1px;right:1px;top:3px;height:1px;background:#1a2a1c;transform:rotate(-35deg)}.tl{top:11px;left:10px}.tr{top:11px;right:10px}.bl{bottom:10px;left:10px}.br{bottom:10px;right:10px}.tv-bottom{display:flex;gap:12px;align-items:center;min-height:24px}.tv-bottom #feedback{flex:1;text-align:left;padding-left:3px}.tv-knobs{display:flex;align-items:center;gap:8px}.tv-knobs i{position:relative;width:23px;height:23px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7d866c,#414e3a 80%);border:2px solid #243222;box-shadow:0 2px 2px #142319aa;flex-shrink:0}.tv-knobs i:after{content:"";position:absolute;height:7px;width:2px;background:#c2c9ad;top:2px;left:9px;transform:rotate(25deg);transform-origin:bottom}.tv-knobs i:last-of-type{width:18px;height:18px}.tv-knobs i:last-of-type:after{left:6px;height:5px}.tv-knobs span{height:17px;width:25px;background:repeating-linear-gradient(0deg,#233623 0 2px,transparent 2px 5px);border-radius:3px}.busy .power-led{animation:pulse .65s infinite}
@media(max-width:760px){.lamp-group{gap:12px;font-size:18px}.lamps{gap:9px}.lamps i{width:14px;height:14px}.machine{padding-top:20px}.tv-bottom{gap:8px}.tv-knobs{gap:6px}.tv-knobs span{display:none}.tv-bottom #feedback{font-size:15px}.screen{border-radius:20px}}
@media(max-width:760px) and (max-height:720px){.machine{padding-top:18px;gap:6px}.tv-top{top:6px}.tv-knobs i{width:20px;height:20px}.tv-knobs i:after{left:7px}.tv-knobs i:last-of-type{width:16px;height:16px}.tv-knobs i:last-of-type:after{left:5px}.tv-bottom{min-height:22px}.tv-bottom #feedback{font-size:14px}.screen.result{gap:4px}.table{grid-template-rows:34px 32px minmax(180px,1fr) 48px minmax(146px,.7fr) 32px}}
@media(max-width:760px) and (max-height:620px){.table{grid-template-rows:30px 28px minmax(220px,1fr) 44px minmax(118px,.65fr) 28px;gap:8px}.screen.result{gap:3px}.machine{padding-top:17px}.tv-bottom #feedback{font-size:13px}.tv-knobs{gap:5px}.tv-knobs i{width:18px;height:18px}.tv-knobs i:after{left:6px}.tv-knobs i:last-of-type{width:15px;height:15px}.tv-knobs i:last-of-type:after{left:4px}}
@media(min-width:640px) and (max-height:500px){.table{grid-template-rows:30px 28px minmax(150px,1fr) 44px 30px;gap:9px 18px}.machine{padding-top:17px;gap:3px}.tv-bottom{min-height:19px}.tv-knobs{gap:5px}.tv-knobs i{width:17px;height:17px}.tv-knobs i:after{left:6px;height:5px}.tv-knobs i:last-of-type{width:14px;height:14px}.tv-knobs i:last-of-type:after{left:4px;height:4px}.tv-knobs span{display:none}.tv-bottom #feedback{font-size:13px}.screen{padding-top:4px;padding-bottom:4px}.screen.result{gap:1px}.lamp-group{font-size:17px}.lamps i{width:13px;height:13px}.scoreboard{padding-top:0}}