:root{--paper:#f8f7f2;--ink:#28262b;--muted:#77747c;--line:#e2e0da;--purple:#7759bd;--purple-dark:#594091;--lavender:#eae5f3;--orange:#e9784d;--green:#688c67;--font:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI","PingFang SC","Noto Sans SC",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button{transition:background .18s,transform .18s,color .18s}button:not(:disabled):active{transform:translateY(1px)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button svg{width:19px;height:19px;display:block}button{color:var(--ink)}.app-shell{max-width:1360px;padding:0 48px;margin:auto}.site-header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px}.wordmark{font-family:"Arial Rounded MT Bold","Avenir Next",var(--font);font-size:48px;letter-spacing:-4px;font-weight:900;color:var(--ink);text-decoration:none;line-height:1;position:relative}.logo-dot{color:var(--orange)}.logo-star{font-size:23px;color:var(--orange);letter-spacing:0;position:absolute;top:-8px;right:-20px;transform:rotate(-10deg)}.header-tag{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted)}.header-tools{margin-left:auto;display:flex;align-items:center;gap:16px}.text-button{border:0;background:transparent;padding:6px 3px;font-size:12px;font-weight:600}.text-button:hover{color:var(--purple)}.tool-divider{height:18px;width:1px;background:var(--line)}.icon-button,.small-icon{border:0;background:transparent;display:grid;place-items:center;border-radius:50%;padding:10px}.icon-button:hover,.small-icon:hover{background:#eae7df}.help-button{display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #d9d6cf;border-radius:8px;background:transparent;font-size:12px;font-weight:600}.help-button:hover{background:#eeece5}.help-symbol{width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;font-size:11px;display:grid;place-items:center}.intro{display:flex;justify-content:space-between;align-items:center;padding:33px 0 29px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--muted)}.orange-dot,.status-dot{height:6px;width:6px;border-radius:100%;background:var(--orange);display:inline-block}.intro-separator{margin:0 4px;color:#b4adb4}.intro h1{font-family:"Avenir Next",var(--font);font-size:38px;letter-spacing:-1.8px;line-height:1.2;margin:12px 0 8px;font-weight:750}.intro p{color:var(--muted);font-size:13px}.intro-note{display:flex;align-items:center;gap:18px;transform:rotate(-5deg);padding-right:32px;font-family:Georgia,serif;font-style:italic;font-size:22px;line-height:1.18}.note-star{font-family:var(--font);color:var(--orange);font-size:54px;font-style:normal}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:28px;align-items:start}.game-panel{border:1px solid #d8d3e0;border-radius:18px;background:#fff;overflow:hidden}.table-toolbar{height:43px;background:#f4f0f8;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #dfd9e7;font-size:9px;letter-spacing:1.3px;font-weight:700;color:#767080}.table-label{display:flex;align-items:center;gap:8px}.status-dot{background:#7e9477}.table-controls{display:flex;gap:12px;align-items:center}.small-icon{padding:5px;border-radius:4px}.small-icon svg{width:13px;height:13px}.small-icon:disabled{opacity:.35}.table{height:393px;background:var(--lavender);position:relative;isolation:isolate;overflow:hidden}.table-inner-line{position:absolute;inset:56px 76px 51px;border:1px solid #d5cce5;border-radius:160px;z-index:-1}.table-caption{position:absolute;top:105px;left:0;right:0;text-align:center;font-weight:800;letter-spacing:4px;font-size:9px;color:#c8bedb;transform:rotate(-1deg)}.seat{position:absolute;display:flex;align-items:center;gap:10px;z-index:2}.seat-left{left:23px;top:169px;flex-direction:column;gap:7px}.seat-right{right:23px;top:169px;flex-direction:column;gap:7px}.seat-top{left:50%;transform:translateX(-50%);top:20px}.seat-bottom{left:50%;transform:translateX(-50%);bottom:31px}.avatar{width:48px;height:48px;border:3px solid var(--lavender);border-radius:16px;display:grid;place-items:center;font-family:Georgia,serif;font-weight:bold;font-style:italic;font-size:28px;box-shadow:0 0 0 1px #cbbfe0;background:#cec0ed;color:#624496;position:relative}.seat-left .avatar{background:#f0cdb6;color:#966044;border-radius:50% 50% 18% 18%}.seat-top .avatar{background:#d2daab;color:#686e3e;border-radius:45% 45% 45% 8%}.seat-right .avatar{background:#ebc2ce;color:#94566a;border-radius:50%}.seat.active .avatar{box-shadow:0 0 0 2px var(--purple)}.seat.active .avatar:after{content:"";position:absolute;right:-5px;bottom:0;width:10px;height:10px;border:2px solid var(--lavender);background:var(--purple);border-radius:50%}.seat-name{font-weight:700;font-size:12px;display:flex;align-items:center;gap:5px}.bot-tag{font-size:8px;letter-spacing:.5px;color:#83798b;background:#ffffff75;padding:2px 4px;border-radius:3px;font-weight:500}.seat-count{font-size:10px;color:#82798d;margin-top:4px}.seat-left .seat-info,.seat-right .seat-info{text-align:center}.seat-status{color:var(--purple);font-weight:600}.mini-hand{display:flex;justify-content:center;padding-left:4px;margin-top:7px}.mini-back{height:20px;width:14px;background:#a28bbd;border:1.5px solid var(--lavender);border-radius:3px;margin-left:-4px;transform:rotate(-8deg)}.mini-back:nth-child(even){transform:rotate(5deg)}.table-center{position:absolute;top:123px;left:50%;transform:translateX(-50%);width:min(64%,430px);text-align:center}.call-and-pile{display:flex;justify-content:center;align-items:center;gap:40px;height:103px}.call-label{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#82748e;margin-bottom:0}.call-number{font-family:"Avenir Next",var(--font);font-size:70px;font-weight:750;letter-spacing:-4px;line-height:1.05;color:#655085}.pile-visual{height:99px;width:74px;position:relative}.back-card{position:absolute;inset:0;background:#8d73bd;border:3px solid #fcfafb;border-radius:8px;box-shadow:0 3px 4px #50466520;display:grid;place-items:center;transform:rotate(12deg)}.back-card:nth-child(1){transform:rotate(-13deg) translate(-8px,3px);background:#a38bc6}.back-card:nth-child(2){transform:rotate(-3deg) translate(-2px,0);background:#a38bc6}.back-card:last-child:before{content:"";position:absolute;inset:5px;border:1px solid #d9cce9;border-radius:3px;background:repeating-linear-gradient(45deg,transparent 0 4px,#ffffff12 4px 5px)}.card-eye{position:relative;width:39px;height:22px;border:1.5px solid #f6efff;border-radius:65% 35% 65% 35%;transform:rotate(-42deg)}.card-eye:before{content:"";position:absolute;inset:4px 12px;background:#f6efff;border-radius:50%}.table-claim{font-size:15px;font-weight:700;line-height:1.4;margin-top:13px;min-height:21px}.table-claim em{color:var(--purple-dark);font-style:normal}.pile-caption{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#7f748c;margin-top:6px}.pile-caption strong{color:#5d4b76}.stake-icon{font-size:15px}.table-footer{position:absolute;bottom:14px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#a095ae}.phase-pill{font-weight:700;letter-spacing:.6px}.play-zone{padding:20px 25px 0;background:#fffeff}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.hand-title{display:flex;gap:8px;align-items:center}.hand-title h2{font-size:13px;font-weight:700}.you-dot{width:7px;height:7px;background:var(--purple);border-radius:50%}.count-chip{padding:3px 7px;background:#f2f0f5;border-radius:5px;color:#85808c;font-size:9px}.hand-heading-tools{display:flex;align-items:center;gap:8px;font-size:10px;color:#8c8592}.hand{display:flex;justify-content:center;gap:11px;min-height:154px;align-items:center;padding:20px 0 8px}.card-group{width:73px;flex:0 1 73px;position:relative;padding-bottom:26px}.number-card{position:relative;width:100%;height:100px;border:1.5px solid #dfd9e8;border-bottom:3px solid #d7cfdf;border-radius:8px;background:#fcfbfd;display:flex;align-items:center;justify-content:center;color:#998aa9;font-size:39px;font-weight:750;box-shadow:0 3px 0 #ece8f1;transition:transform .18s,background .18s,border-color .18s}.number-card:disabled{opacity:1}.number-card:not(:disabled):hover{transform:translateY(-5px);border-color:#b19acf}.number-card.selected{background:#eee7fb;border-color:var(--purple);color:var(--purple-dark);transform:translateY(-9px);box-shadow:0 4px 0 #d2c2ec}.card-group.matching .number-card{color:var(--purple-dark)}.card-corner{position:absolute;font-size:11px;left:7px;top:6px}.card-bottom{position:absolute;bottom:5px;right:7px;transform:rotate(180deg);font-size:11px}.card-motif{position:absolute;font-size:10px;top:70px;left:calc(50% - 4px);font-weight:400}.card-quantity{position:absolute;top:-8px;right:-6px;min-width:21px;height:21px;border-radius:50%;background:#e8e2ef;color:#6f5e80;border:2px solid white;font-size:9px;display:grid;place-items:center;z-index:1}.card-group.chosen .card-quantity{background:var(--purple);color:white;top:-17px}.group-stepper{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;height:23px;font-size:10px;color:#948a9e}.step-control{height:23px;width:25px;border:0;border-radius:4px;background:transparent;color:#78638e;font-size:17px;padding:0;display:grid;place-items:center}.step-control:hover:not(:disabled){background:var(--lavender)}.step-control:disabled{color:#d8d0e0}.empty-hand{color:var(--purple);text-align:center;font-size:13px;line-height:1.7}.action-panel{min-height:89px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #eeebf2;margin-top:5px;padding:14px 0 19px}.action-copy{min-width:0}.action-copy h3{font-size:13px;line-height:1.5;font-weight:650}.action-copy p{font-size:10px;line-height:1.6;color:#918799;margin-top:3px}.action-copy .private-preview{color:var(--purple-dark)}.actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.button{border:0;border-radius:7px;padding:12px 19px;font-size:12px;font-weight:650;display:flex;justify-content:center;align-items:center;gap:14px;min-height:42px}.button.primary{color:white;background:var(--purple)}.button.primary:hover{background:var(--purple-dark)}.button.primary:disabled{background:#e6deee;color:#a895ba}.button.outline{border:1px solid #dcd5e5;background:white;color:#766589}.button.outline:hover{background:#f4effa}.button.challenge{background:#f3e2d8;color:#ad603b}.button.challenge:hover{background:#ebcdbd}.button .arrow{font-size:18px;font-weight:400}.guide-card{padding:22px 23px;background:#f0eee7;border:1px solid #e3dfd5;border-radius:13px}.section-kicker{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.4px;font-weight:700;color:#8e887c}.section-kicker>span:last-child:not(:first-child){font-size:14px}.guide-card h2{font-family:Georgia,"Songti SC",serif;font-size:31px;line-height:1.03;font-weight:400;letter-spacing:-1px;margin-top:20px;margin-bottom:25px}.rule-step{display:flex;gap:13px;margin-top:19px}.step-number{font-family:Georgia,serif;color:#a19b8e;font-size:11px;padding-top:2px}.rule-step p{font-size:11px;line-height:1.7;color:#878174}.rule-step strong{font-weight:600;color:#5d574d}.guide-foot{display:flex;gap:11px;align-items:center;border-top:1px solid #ddd8cd;padding-top:19px;margin-top:24px}.tiny-card{display:grid;place-items:center;width:25px;height:34px;border:1px solid #afaa9b;border-radius:4px;transform:rotate(-9deg);font-family:Georgia,serif;color:#8b816d;font-size:21px;flex-shrink:0}.guide-foot p{font-size:9px;line-height:1.8;color:#8e8577}.guide-foot strong{color:#796f5e;font-weight:650}.history-section{margin-top:26px;padding:0 3px}.section-kicker .live-label{font-size:8px!important;letter-spacing:.6px;color:#7e9477;display:flex;align-items:center;gap:5px}.live-label:before{content:"";height:5px;width:5px;background:#8caa85;border-radius:50%}.history-section ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0;max-height:178px;overflow:auto;scrollbar-width:thin}.history-section li{display:flex;align-items:flex-start;gap:9px;padding:9px 0;font-size:10px;line-height:1.65;border-bottom:1px solid #eeebe4;color:#89818e}.history-section li:first-child{padding-top:0}.history-section li:last-child{border:0}.history-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#beb1cc;margin-top:6px}.history-section li.caught .history-dot{background:var(--orange)}.history-section li.truth .history-dot{background:var(--green)}.history-section li strong{font-weight:600;color:#61536e}.side-note{display:flex;align-items:center;gap:13px;padding:21px 7px 0;color:#a29a8b}.side-note>span{font-size:28px}.side-note p{font-size:10px;line-height:1.7}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 1px 28px;color:#aba39c;font-size:9px;letter-spacing:.2px}.prototype-label{font-size:8px;letter-spacing:1px}.paused-overlay{position:absolute;inset:0;z-index:8;background:#ece6f4ef;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}.paused-overlay h2{font-family:Georgia,"Songti SC",serif;font-size:29px;font-weight:400}.reveal-row{display:flex;justify-content:center;gap:7px;height:98px;align-items:center}.reveal-card{width:52px;height:76px;border:2px solid #a99bba;border-radius:6px;background:#fffdfd;display:grid;place-items:center;font-size:31px;font-weight:700;color:var(--purple-dark);animation:flip-in .4s ease both;position:relative}.reveal-card.false{border-color:var(--orange);background:#fff1e9;color:#c36842}.reveal-card.false:after{content:"×";position:absolute;right:-6px;top:-8px;background:var(--orange);color:white;border:2px solid white;border-radius:50%;width:19px;height:19px;font-size:13px;display:grid;place-items:center}.reveal-caption{font-size:9px;letter-spacing:1px;color:#8e7b9f;margin-bottom:8px}.table-result.caught{color:#b76640}.table-result.truth{color:#5d805c}.decision-locked{display:flex;align-items:center;gap:7px;color:var(--purple);font-size:11px;padding:12px 0}.decision-locked svg{width:15px;height:15px}.no-peek{font-size:11px;color:#8a7b97;font-style:italic;margin-top:4px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;background:var(--ink);color:white;padding:12px 20px;border-radius:8px;font-size:12px;box-shadow:0 5px 25px #0002;text-align:center;max-width:90vw}dialog{padding:35px;border:1px solid #e0d8e9;border-radius:18px;background:var(--paper);color:var(--ink);max-width:490px;width:calc(100% - 32px);box-shadow:0 30px 100px #26103628;max-height:85vh;overflow:auto}dialog::backdrop{background:#322b4655;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:14px;top:12px;font-size:24px;width:34px;height:34px;padding:0}dialog .eyebrow{color:var(--purple);font-size:9px}dialog h2{font-family:Georgia,"Songti SC",serif;font-size:33px;font-weight:400;letter-spacing:-1px;margin:14px 0 18px}dialog p{font-size:12px;line-height:1.9;color:var(--muted);margin:10px 0}dialog ol{padding-left:20px;color:#71697b;font-size:12px;line-height:1.9;display:flex;flex-direction:column;gap:12px}dialog .button{width:100%;margin-top:25px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}.settings-row strong{font-size:13px;font-weight:600}.settings-row p{font-size:10px;margin:5px 0 0}.toggle{min-width:62px;border:1px solid #ccc2d7;border-radius:20px;padding:8px;background:white;font-size:11px}.toggle.enabled{background:var(--purple);color:white;border-color:var(--purple)}.winner-star{font-size:70px;line-height:1.1;color:var(--orange);text-align:center}.result-heading{text-align:center}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0;background:#eee8f5;padding:18px 10px;border-radius:10px}.result-stats>div{text-align:center}.result-stats strong{display:block;font-size:25px;color:var(--purple)}.result-stats span{display:block;font-size:9px;color:#887697;margin-top:5px}.modal-secondary{width:100%;border:0;background:transparent;padding:15px 0 0;font-size:11px;color:var(--muted)}.deal-in{animation:deal-in .42s ease both}@keyframes deal-in{from{opacity:0;transform:translateY(14px) rotate(-4deg)}to{opacity:1;transform:none}}@keyframes flip-in{from{opacity:0;transform:rotateY(90deg) translateY(-5px)}to{opacity:1;transform:none}}.reduce-motion *, .reduce-motion *:before, .reduce-motion *:after{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:1400px){.table{height:416px}.seat-top{top:24px}.table-center{top:140px}.seat-left,.seat-right{top:180px}.table-caption{top:117px}}
@media(max-width:1120px){.app-shell{padding:0 28px}.game-layout{grid-template-columns:minmax(0,1fr) 220px;gap:20px}.guide-card{padding:20px 17px}.hand{gap:9px}.seat-left{left:14px}.seat-right{right:14px}.table-center{width:63%}.action-panel{gap:10px}.button{padding:12px 14px}.play-zone{padding-left:18px;padding-right:18px}.intro-note{padding-right:15px}.card-group{max-width:68px}.table-claim{font-size:13px}}
@media(max-width:900px){.header-tag{display:none}.game-layout{grid-template-columns:1fr 200px;gap:16px}.guide-card h2{font-size:28px}.intro h1{font-size:33px}.intro-note{font-size:20px}.table{height:389px}.seat-left,.seat-right{top:165px}.seat-name{font-size:10px}.avatar{width:40px;height:40px;font-size:24px}.seat-left .mini-hand,.seat-right .mini-hand{display:none}.table-center{top:123px}.call-and-pile{gap:25px}.action-panel{flex-wrap:wrap}.action-copy{flex:1 1 190px}.actions{margin-left:auto}.hand{gap:7px}.number-card{height:90px;font-size:34px}.card-motif{top:65px}.hand{min-height:146px}.card-group{padding-bottom:27px}.table-inner-line{inset:52px 51px}.side-note{padding-left:0}.guide-foot p{font-size:9px}.intro{padding:28px 0}.site-header{height:85px}}
@media(max-width:740px){.app-shell{padding:0 20px}.game-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px}.guide-card{padding:19px}.guide-card h2{font-size:27px;margin:15px 0 20px}.guide-card h2 br{display:none}.history-section{margin:0;padding-top:19px}.side-note{display:none}.intro-note{font-size:18px}.table{height:383px}.table-center{top:118px}.table-claim{font-size:15px}.seat-left,.seat-right{top:159px}.seat-left{left:25px}.seat-right{right:25px}.seat-left .mini-hand,.seat-right .mini-hand{display:flex}.table-inner-line{inset:51px 58px}.hand{gap:13px;min-height:158px}.number-card{height:101px;font-size:40px}.card-motif{top:73px}.action-panel{flex-wrap:nowrap;min-height:92px}.action-copy{flex:1}.header-tools{gap:8px}.site-header{gap:15px}.wordmark{font-size:43px}.intro h1{font-size:32px}.page-footer{padding-bottom:22px}.hand-heading-tools{font-size:9px}}
@media(max-width:480px){.app-shell{padding:0 13px}.site-header{height:73px}.wordmark{font-size:40px}.logo-star{font-size:18px;right:-15px;top:-6px}.header-tools{gap:3px}.icon-button{padding:8px}.help-button{padding:8px;border:0}.help-button>span:last-child{display:none}.help-symbol{width:21px;height:21px;font-size:12px}.tool-divider{margin:0 4px}.intro{padding:24px 2px 21px}.intro h1{font-size:29px;letter-spacing:-1.3px;margin-top:11px}.intro p{font-size:11px}.intro-note{display:none}.eyebrow{font-size:8px;letter-spacing:1.3px}.table-toolbar{height:39px;padding:0 13px;font-size:7px;letter-spacing:1px}.table-controls{gap:7px}.table{height:346px}.table-inner-line{inset:47px 30px 47px;border-radius:95px}.table-caption{font-size:7px;top:92px;letter-spacing:3px}.seat-top{top:15px}.seat-left,.seat-right{top:133px}.seat-left{left:10px}.seat-right{right:10px}.seat-bottom{bottom:30px}.seat{gap:7px}.seat-name{font-size:10px}.seat-count{font-size:8px}.seat-left .mini-hand,.seat-right .mini-hand{display:none}.avatar{width:37px;height:37px;font-size:22px;border-radius:13px}.seat-top .avatar,.seat-bottom .avatar{width:39px;height:39px}.bot-tag{font-size:7px}.table-center{top:103px;width:64%}.call-and-pile{gap:22px;height:91px}.call-number{font-size:60px}.call-label{font-size:7px}.pile-visual{width:59px;height:82px}.card-eye{width:30px;height:18px}.card-eye:before{inset:3px 10px}.table-claim{font-size:12px;margin-top:12px;line-height:1.4}.pile-caption{font-size:9px;margin-top:5px}.table-footer{bottom:12px;left:14px;right:14px;font-size:6px}.play-zone{padding:16px 13px 0}.hand-title{gap:6px}.hand-title h2{font-size:11px}.count-chip{font-size:8px;padding:3px 5px}.hand-heading-tools{font-size:8px;gap:4px}.hand{gap:7px;min-height:145px;padding-top:23px;padding-bottom:7px}.card-group{max-width:53px;min-width:0;padding-bottom:29px}.number-card{height:82px;font-size:31px;border-radius:6px}.card-corner{font-size:9px;top:5px;left:5px}.card-bottom{font-size:9px;right:5px;bottom:4px}.card-motif{top:58px;font-size:8px}.card-quantity{width:19px;height:19px;min-width:19px;font-size:8px;right:-4px}.group-stepper{gap:1px;font-size:9px;bottom:-1px}.step-control{height:27px;flex:1;min-width:16px;font-size:17px}.action-panel{min-height:106px;align-items:stretch;flex-direction:column;gap:10px;padding:14px 0}.action-copy{flex:initial}.action-copy h3{font-size:12px}.action-copy p{font-size:9px}.actions{width:100%;margin-left:0}.actions .button{flex:1;min-height:44px}.button{font-size:12px;padding:11px 15px}.side-panel{grid-template-columns:1fr;gap:18px}.guide-card{display:none}.history-section{padding:1px 3px 0}.history-section ol{max-height:120px;margin-top:12px}.history-section li{font-size:10px}.page-footer{font-size:8px;align-items:flex-start}.prototype-label{font-size:7px;text-align:right}.reveal-row{height:86px;gap:5px}.reveal-card{width:40px;height:63px;font-size:27px}.reveal-caption{font-size:7px}.paused-overlay h2{font-size:25px}.paused-overlay .button{width:auto}.hand-heading .text-button{font-size:9px}.decision-locked{padding:6px 0}dialog{padding:30px 24px}.settings-row p{max-width:230px}}
/* Keep the whole play surface within shorter laptop windows. */
@media(min-width:741px) and (max-height:800px){.site-header{height:62px}.wordmark{font-size:37px}.logo-star{font-size:17px;top:-5px;right:-14px}.intro{padding:15px 0 16px}.intro h1{font-size:29px;margin:8px 0 5px;line-height:1.15}.intro p{font-size:11px}.intro .eyebrow{font-size:8px}.intro-note{font-size:18px}.note-star{font-size:39px}.table-toolbar{height:32px}.table{height:259px}.table-inner-line{inset:35px 65px 34px}.table-caption{top:66px;font-size:7px;letter-spacing:2px}.seat-top{top:11px}.seat-bottom{bottom:18px}.seat-left,.seat-right{top:92px}.avatar{width:36px;height:36px;font-size:22px;border-width:2px;border-radius:12px}.seat-name{font-size:10px}.seat-count{font-size:8px;margin-top:3px}.mini-hand{margin-top:3px}.mini-back{height:15px;width:11px}.seat-top .mini-hand{display:none}.table-center{top:81px}.call-and-pile{height:75px;gap:34px}.call-number{font-size:55px}.call-label{font-size:7px}.pile-visual{height:76px;width:55px}.card-eye{width:29px;height:17px}.card-eye:before{inset:3px 9px}.table-claim{font-size:12px;margin-top:9px}.pile-caption{font-size:9px;margin-top:4px}.table-footer{font-size:6px;bottom:9px}.play-zone{padding-top:12px}.hand{min-height:111px;padding-top:13px;padding-bottom:0;gap:12px}.card-group{width:56px;flex-basis:56px;padding-bottom:24px}.number-card{height:72px;font-size:30px}.card-corner,.card-bottom{font-size:9px}.card-motif{top:50px;font-size:8px}.card-quantity{width:18px;height:18px;min-width:18px;font-size:8px}.hand-title h2{font-size:11px}.hand-heading{min-height:19px}.action-panel{min-height:73px;padding:11px 0 13px;flex-wrap:nowrap}.action-copy{flex:1}.action-copy h3{font-size:11px}.action-copy p{font-size:9px}.button{font-size:11px;min-height:38px;padding:10px 16px}.guide-card{padding:18px}.guide-card h2{font-size:28px;margin:16px 0 19px}.rule-step{margin-top:13px}.rule-step p{font-size:10px}.guide-foot{margin-top:18px;padding-top:15px}.history-section{margin-top:19px}.history-section ol{max-height:108px;margin-top:12px}.history-section li{font-size:9px;padding:6px 0}.side-note{padding-top:13px}.side-note p{font-size:9px}.page-footer{padding:13px 1px;font-size:8px}.reveal-caption{font-size:7px;margin-bottom:3px}.reveal-row{height:73px}.reveal-card{height:63px;width:44px;font-size:27px}}
@media(max-width:480px){.site-header{height:63px}.intro{padding:16px 2px 17px}.intro h1{font-size:27px;margin-top:9px}.intro p{line-height:1.5}.table{height:298px}.table-center{top:82px}.table-caption{top:71px}.seat-left,.seat-right{top:111px}.seat-bottom{bottom:22px}.table-inner-line{inset:39px 29px 36px}.table-claim{margin-top:8px}.table-footer{bottom:9px}.hand{min-height:135px;padding-top:18px}.play-zone{padding-top:13px}}

/* Keep remaining time and the available decisions in one stable control group. */
.action-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.action-controls {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 290px;
}
.clock-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}
.action-controls .actions {
  width: 100%;
  min-width: 0;
  margin-left: 0;
  justify-content: flex-end;
}
.action-controls .button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}
.phase-clock {
  --clock-color: var(--purple-dark);
  --time-left: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--clock-color);
}
.clock-ring {
  width: 56px;
  height: 56px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(var(--clock-color) var(--time-left), #e6dfed 0);
  box-shadow: 0 0 0 3px #f4f0f8;
}
.clock-face {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  padding-top: 9px;
  background: #faf8ff;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.clock-face strong { font-size: 25px; line-height: 1.1; letter-spacing: -1px; font-weight: 800; }
.clock-face span { font-size: 10px; font-weight: 650; }
.clock-label { font-size: 9px; line-height: 1.4; font-weight: 700; white-space: nowrap; }
.phase-clock.is-idle { --clock-color: #9584af; }
.phase-clock.is-challenge { --clock-color: #b67431; }
.phase-clock.is-challenge .clock-face { background: #fff9ef; }
.phase-clock.is-urgent { --clock-color: #c15131; }
.phase-clock.is-urgent .clock-face { background: #fff0e7; }
.phase-clock.is-urgent .clock-ring { animation: clock-alert 1s ease-in-out infinite; }
.game-panel:has(#paused-overlay:not([hidden])) .clock-ring,
body:has(dialog[open]) .clock-ring { animation-play-state: paused; }
@keyframes clock-alert {
  0%, 100% { box-shadow: 0 0 0 3px #e9784d18; }
  50% { box-shadow: 0 0 0 6px #e9784d35; }
}
@media (min-width:741px) and (max-height:800px) {
  .action-panel { min-height: 94px; padding-top: 12px; padding-bottom: 12px; }
  .clock-slot { min-height: 70px; }
  .phase-clock { gap: 4px; }
  .clock-ring { width: 52px; height: 52px; }
  .clock-face { padding-top: 7px; }
  .clock-face strong { font-size: 24px; }
}
@media (max-width:900px) and (min-width:481px) {
  .action-controls { width: 270px; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .action-copy h3 { font-size: 11px; }
}
@media (max-width:600px) {
  .action-panel { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 145px; padding: 12px 0; }
  .action-copy { min-height: 50px; }
  .action-copy p { line-height: 1.5; }
  .action-controls { width: 100%; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .clock-slot { min-height: 76px; }
  .action-controls .actions { gap: 8px; }
  .action-controls .button { min-height: 46px; padding-left: 10px; padding-right: 10px; }
}
@media (max-width:360px) {
  .action-controls { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
  .clock-label { font-size: 8.5px; }
  .action-controls .button { font-size: 11px; padding-left: 8px; padding-right: 8px; }
}

/* Immersive table: the play surface, decisions and hand share one continuous space. */
body.immersive {
  --paper: #eae4f2;
  --lavender: #eae4f2;
  --ink: #382d47;
  --muted: #80718e;
  background: var(--lavender);
}
.immersive .app-shell {
  max-width: none;
  height: 100svh;
  min-height: 650px;
  padding: 0 32px 12px;
  display: flex;
  flex-direction: column;
}
.immersive .site-header {
  flex: 0 0 64px;
  height: 64px;
  gap: 28px;
  border-color: #b9a8cd38;
}
.immersive .wordmark { font-size: 39px; }
.immersive .logo-star { font-size: 18px; top: -5px; right: -15px; }
.immersive .header-tag { display: flex; gap: 15px; color: #7d698f; font-size: 10px; letter-spacing: 1px; }
.immersive .header-mode { border-left: 1px solid #bcacd03d; padding-left: 15px; color: #9682a7; }
.immersive .header-tools { gap: 12px; }
.immersive .help-button { border-color: #cabbda70; background: #f9f5ff28; }
.immersive .help-button:hover,
.immersive .icon-button:hover { background: #fff7; }
.immersive .app-shell > main { flex: 1; min-height: 0; }
.immersive .game-layout { display: block; height: 100%; }
.immersive .game-panel {
  display: grid;
  grid-template-rows: 34px minmax(280px, 1fr) auto;
  height: 100%;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.immersive .table-toolbar {
  max-width: 1480px;
  width: 100%;
  height: 34px;
  margin: auto;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #8d7b9d;
}
.immersive .table-controls { gap: 14px; }
.immersive .small-icon { padding: 8px; }
.immersive .table {
  width: 100%;
  max-width: 1480px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  background: transparent;
  overflow: hidden;
}
.immersive .table-inner-line { inset: 52px 7% 28px; border: 1px solid #c3b0d554; border-radius: 50% / 45%; }
.immersive .table-caption { top: 24%; font-size: 9px; color: #bfa9d2; letter-spacing: 5px; }
.immersive .seat-top { top: 18px; }
.immersive .seat-left { left: clamp(18px, 11vw, 170px); top: 43%; }
.immersive .seat-right { right: clamp(18px, 11vw, 170px); top: 43%; }
.immersive .seat-bottom { bottom: 18px; }
.immersive .avatar { width: 52px; height: 52px; font-size: 30px; border-width: 3px; }
.immersive .seat-name { font-size: 13px; }
.immersive .seat-count { font-size: 11px; margin-top: 5px; }
.immersive .bot-tag { font-size: 8px; padding: 3px 5px; background: #faf7ff5c; }
.immersive .mini-hand { margin-top: 6px; }
.immersive .mini-back { width: 14px; height: 20px; }
.immersive .table-center { top: 50%; transform: translate(-50%, -40%); width: min(58%, 560px); }
.immersive .call-and-pile { height: 108px; gap: 46px; }
.immersive .call-label { font-size: 10px; letter-spacing: 2px; }
.immersive .call-number { font-size: 80px; }
.immersive .pile-visual { width: 80px; height: 106px; }
.immersive .table-claim { font-size: 17px; line-height: 1.5; margin-top: 16px; }
.immersive .pile-caption { font-size: 12px; margin-top: 7px; }
.immersive .table-footer { bottom: 10px; left: 24px; right: 24px; font-size: 8px; color: #a18aae; }
.immersive .play-zone {
  width: min(100%, 940px);
  margin: 0 auto;
  padding: 0 18px 6px;
  background: transparent;
}
.immersive .action-panel {
  min-height: 104px;
  margin: 0 0 12px;
  padding: 10px 8px 14px;
  border-top: 0;
  border-bottom: 1px solid #c4b1d749;
  background: transparent;
  gap: 24px;
}
.immersive .action-copy h3 { font-size: 15px; line-height: 1.5; }
.immersive .action-copy p { font-size: 11px; color: #887496; line-height: 1.6; }
.immersive .action-copy .private-preview { color: #6d4b91; }
.immersive .action-controls { width: 330px; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.immersive .action-controls .button { min-height: 48px; font-size: 13px; border-radius: 9px; }
.immersive .button.primary:disabled { background: #ded2ec; color: #a58ab9; }
.immersive .button.outline { background: #faf7ffad; border-color: #c8b6d9; }
.immersive .button.challenge { background: #eecbb9; color: #9d492b; }
.immersive .clock-ring { box-shadow: 0 0 0 4px #f7f1fe85; }
.immersive .clock-label { font-size: 10px; }
.immersive .hand-heading { min-height: 24px; padding: 0 8px; }
.immersive .hand-title h2 { font-size: 12px; }
.immersive .hand-heading-tools { font-size: 10px; }
.immersive .count-chip { background: #fbf7ff65; color: #8d769c; font-size: 10px; }
.immersive .hand { min-height: 148px; gap: 16px; padding: 20px 0 8px; }
.immersive .card-group { width: 72px; flex: 0 1 72px; max-width: 72px; padding-bottom: 27px; }
.immersive .number-card { height: 98px; font-size: 40px; color: #8a719e; border-color: #d3c4e1; box-shadow: 0 4px 0 #d8cce4, 0 8px 14px #56307109; }
.immersive .card-group.matching .number-card { color: var(--purple-dark); }
.immersive .number-card.selected { color: var(--purple-dark); border-color: var(--purple); background: #f2eafa; box-shadow: 0 4px 0 #b7a0d0, 0 9px 15px #56307113; }
.immersive .card-motif { top: 70px; font-size: 10px; }
.immersive .card-quantity { background: #e1d7ec; border-color: var(--lavender); color: #85659c; }
.immersive .card-group.chosen .card-quantity { background: var(--purple); color: white; }
.immersive .step-control { color: #846996; }
.immersive .step-control:disabled { color: #b4a0c3; }
.immersive .group-stepper { color: #9176a3; }
.immersive .history-dialog { margin: 0; padding: 0; }
.immersive .history-dialog ol { max-height: min(48svh, 420px); margin-top: 0; gap: 0; }
.immersive .history-dialog li { padding: 12px 0; font-size: 12px; border-color: #dcd2e5; color: #7b688a; }
.immersive .history-dialog li:first-child { padding-top: 0; }
.immersive .paused-overlay { background: #eae4f2ec; }
@media (min-width:741px) and (max-height:800px) {
  .immersive .site-header { flex-basis: 58px; height: 58px; }
  .immersive .game-panel { grid-template-rows: 30px minmax(260px, 1fr) auto; }
  .immersive .table-toolbar { height: 30px; }
  .immersive .table-caption { top: 21%; font-size: 8px; }
  .immersive .table-inner-line { inset: 42px 8% 25px; }
  .immersive .avatar { width: 43px; height: 43px; font-size: 26px; }
  .immersive .seat-top { top: 10px; }
  .immersive .seat-bottom { bottom: 14px; }
  .immersive .seat-name { font-size: 12px; }
  .immersive .seat-count { font-size: 10px; }
  .immersive .mini-back { height: 16px; width: 12px; }
  .immersive .call-and-pile { height: 84px; gap: 37px; }
  .immersive .call-label { font-size: 8px; }
  .immersive .call-number { font-size: 64px; }
  .immersive .pile-visual { height: 86px; width: 63px; }
  .immersive .table-claim { font-size: 15px; margin-top: 10px; }
  .immersive .pile-caption { font-size: 11px; margin-top: 5px; }
  .immersive .action-panel { min-height: 94px; margin-bottom: 9px; padding: 8px 8px 12px; }
  .immersive .action-copy h3 { font-size: 13px; }
  .immersive .action-copy p { font-size: 10px; }
  .immersive .action-controls .button { min-height: 44px; font-size: 12px; }
  .immersive .clock-label { font-size: 9px; }
  .immersive .hand { min-height: 132px; padding-top: 16px; }
  .immersive .card-group { flex-basis: 63px; max-width: 63px; padding-bottom: 26px; }
  .immersive .number-card { height: 82px; font-size: 34px; }
  .immersive .card-motif { top: 58px; font-size: 9px; }
}
@media (max-width:740px) {
  .immersive .app-shell { padding: 0 14px 8px; min-height: 700px; }
  .immersive .site-header { flex-basis: 58px; height: 58px; gap: 18px; }
  .immersive .header-tag { display: none; }
  .immersive .header-tools { gap: 7px; }
  .immersive .game-panel { grid-template-rows: 30px minmax(230px, 1fr) auto; }
  .immersive .table-toolbar { height: 30px; padding: 0 4px; font-size: 8px; }
  .immersive .table-inner-line { inset: 42px 20px 35px; }
  .immersive .seat-left { left: 8px; top: 41%; }
  .immersive .seat-right { right: 8px; top: 41%; }
  .immersive .seat-top { top: 12px; }
  .immersive .seat-bottom { bottom: 17px; }
  .immersive .avatar { width: 43px; height: 43px; font-size: 26px; }
  .immersive .seat-name { font-size: 11px; }
  .immersive .seat-count { font-size: 9px; }
  .immersive .seat-info { max-width: 112px; }
  .immersive .seat-left .seat-info, .immersive .seat-right .seat-info { max-width: 73px; }
  .immersive .table-caption { top: 24%; font-size: 7px; letter-spacing: 3px; }
  .immersive .table-center { width: 66%; }
  .immersive .call-and-pile { height: 90px; gap: 28px; }
  .immersive .call-label { font-size: 8px; letter-spacing: 1px; }
  .immersive .call-number { font-size: 64px; }
  .immersive .pile-visual { width: 62px; height: 85px; }
  .immersive .table-claim { font-size: 14px; margin-top: 12px; }
  .immersive .pile-caption { font-size: 10px; }
  .immersive .table-footer { left: 6px; right: 6px; bottom: 8px; font-size: 7px; }
  .immersive .play-zone { width: min(100%, 560px); padding: 0 6px 0; }
  .immersive .action-panel { gap: 8px; padding: 8px 4px 10px; margin: 0 0 10px; }
  .immersive .action-copy h3 { font-size: 13px; }
  .immersive .action-copy p { font-size: 10px; }
  .immersive .hand { min-height: 133px; padding: 17px 0 6px; gap: 10px; }
  .immersive .card-group { flex: 0 1 59px; max-width: 59px; padding-bottom: 27px; }
  .immersive .number-card { height: 83px; font-size: 34px; }
  .immersive .card-motif { top: 59px; font-size: 9px; }
}
@media (max-width:600px) {
  .immersive .action-panel { min-height: 150px; }
  .immersive .action-copy { min-height: 46px; }
  .immersive .action-controls { width: 100%; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .immersive .action-controls .button { min-height: 46px; font-size: 12px; }
  .immersive .clock-label { font-size: 9px; }
}
@media (max-width:480px) {
  .immersive .app-shell { padding-left: 10px; padding-right: 10px; }
  .immersive .wordmark { font-size: 34px; }
  .immersive .header-tools { gap: 3px; }
  .immersive .help-button { padding: 8px; border: 0; background: transparent; }
  .immersive .help-button svg { width: 21px; height: 21px; }
  .immersive .avatar { width: 37px; height: 37px; font-size: 23px; }
  .immersive .seat-top .avatar, .immersive .seat-bottom .avatar { width: 40px; height: 40px; }
  .immersive .seat-left { left: 2px; }
  .immersive .seat-right { right: 2px; }
  .immersive .seat-name { font-size: 10px; }
  .immersive .bot-tag { font-size: 7px; padding: 2px 3px; }
  .immersive .table-claim { font-size: 13px; }
  .immersive .hand-heading { padding: 0 4px; }
  .immersive .hand-title h2 { font-size: 11px; }
  .immersive .hand-heading-tools { font-size: 9px; }
  .immersive .hand { gap: 9px; }
}
@media (max-width:360px) {
  .immersive .header-tools { gap: 0; }
  .immersive .site-header { gap: 6px; }
  .immersive .tool-divider { margin: 0 2px; }
  .immersive .icon-button { padding: 7px; }
  .immersive .action-controls { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
  .immersive .action-controls .button { font-size: 11px; }
  .immersive .clock-label { font-size: 8.5px; }
  .immersive .call-and-pile { gap: 20px; }
  .immersive .call-label { font-size: 7px; }
  .immersive .table-claim { font-size: 12px; }
  .immersive .hand { gap: 7px; }
}
/* Prevent grouped cards from widening the table's implicit grid column. */
.immersive .game-panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.immersive .play-zone { min-width: 0; }
.immersive .game-panel { position: relative; }
/* Public activity stays on the tabletop, without a separate sidebar. */
.table-feed {
  position: absolute;
  z-index: 2;
  top: 46px;
  right: 12px;
  width: 210px;
  height: clamp(96px, calc(30svh - 100px), 190px);
  display: flex;
  flex-direction: column;
  color: #8a769c;
}
.feed-heading { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.feed-heading h2 { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.feed-live { display: flex; align-items: center; gap: 5px; margin-left: auto; color: #849779; font-size: 8px; }
.feed-live .status-dot { width: 4px; height: 4px; }
.feed-heading button { display: grid; place-items: center; padding: 0; width: 24px; height: 24px; border: 0; background: transparent; color: #9c88ac; font-size: 17px; border-radius: 4px; cursor: pointer; }
.feed-heading button:hover { background: #f8f4fd70; color: #6b4a8b; }
#table-feed-list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0 5px 5px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: #bcabcb60 transparent;
  mask-image: linear-gradient(#000 0%, #000 calc(100% - 12px), transparent 100%);
}
#table-feed-list:focus-visible { outline: 2px solid #ad94c6; outline-offset: 3px; border-radius: 3px; }
#table-feed-list li { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid #bba6cd2b; font-size: 10px; line-height: 1.65; }
#table-feed-list li:first-child { color: #6e537f; border-top-color: #baa4cc57; }
.feed-turn { flex: 0 0 18px; padding-top: 1px; color: #ad98bd; font-size: 8px; font-variant-numeric: tabular-nums; }
#table-feed-list .caught .feed-message { color: #a36950; }
#table-feed-list .truth .feed-message { color: #718763; }
.feed-enter { animation: feed-arrive .3s ease-out both; }
@keyframes feed-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.feed-latest { position: absolute; right: 12px; bottom: -5px; z-index: 1; padding: 5px 10px; border: 1px solid #c9b8d9; border-radius: 20px; background: #f5effa; color: #77578f; box-shadow: 0 2px 8px #6640870d; font-size: 9px; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width:1100px) and (min-width:741px) {
  .table-feed { width: 180px; right: 6px; }
  #table-feed-list li { font-size: 9px; padding: 6px 0; }
}
@media (max-width:740px) {
  .immersive .app-shell { min-height: 800px; }
  .immersive .game-panel { grid-template-rows: 30px 58px minmax(230px, 1fr) auto; }
  .table-feed { position: relative; top: auto; right: auto; width: 100%; height: 52px; padding: 0 6px; }
  .feed-heading { min-height: 20px; }
  .feed-heading h2 { font-size: 8px; }
  .feed-heading button { width: 24px; height: 20px; font-size: 15px; }
  .feed-live { font-size: 7px; }
  #table-feed-list { margin-top: 0; padding-bottom: 0; mask-image: none; }
  #table-feed-list li { padding: 6px 0; font-size: 10px; line-height: 18px; }
  .feed-latest { right: 10px; bottom: -2px; padding: 3px 8px; font-size: 8px; }
}
@media (max-width:600px) {
  .immersive .action-copy { min-height: 58px; }
  .immersive .hand {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #bda7ce transparent;
  }
  .immersive .card-group { flex: 0 0 52px; max-width: 52px; }
  .immersive .card-group:first-child { margin-left: auto; }
  .immersive .card-group:last-child { margin-right: auto; }
}

/* Pick on the card itself; undo stays attached to the selected card. */
.immersive .hand { padding: 26px 12px 10px; gap: 20px; }
.immersive .card-group { width: 80px; flex: 0 0 80px; max-width: 80px; padding-bottom: 0; transition: transform .18s ease; }
.immersive .card-group.chosen { transform: translateY(-6px); }
/* Keep the rank, suits and count in separate rows as card height changes. */
.immersive .number-card { height: 108px; display: grid; grid-template-rows: minmax(0, 1fr) 14px 22px; gap: 3px; padding: 17px 5px 3px; justify-content: stretch; touch-action: manipulation; }
.immersive .number-card.selected,
.immersive .number-card:not(:disabled):hover { transform: none; }
.immersive .number-card:not(:disabled):hover { background: #f4edfb; border-color: #ac91c5; }
.immersive .number-card:disabled:not(.selected) { color: #a590b4; }
.card-value { display: block; line-height: 1; pointer-events: none; }
.card-pick-count { border-radius: 4px; padding: 4px 1px; color: #9a84ac; font-size: 9px; line-height: 1; font-weight: 500; white-space: nowrap; }
.chosen .card-pick-count { background: #dfd0f0; color: #6c4590; font-weight: 650; }
.card-add-hint { position: absolute; top: 5px; right: 9px; font-size: 16px; line-height: 1; font-weight: 400; color: #b29ac6; }
.card-remove { position: absolute; z-index: 2; top: -14px; right: -12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: white; touch-action: manipulation; }
.card-remove span { display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid var(--lavender); border-radius: 50%; background: #7a57ac; font-size: 23px; line-height: 1; box-shadow: 0 2px 4px #65477c18; }
.card-remove:hover:not(:disabled) span { background: #5e3e8e; }
.card-remove:disabled { opacity: .55; }
.action-submit { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.selection-summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #84699b; font-size: 10px; white-space: nowrap; }
.selection-dots { display: flex; gap: 4px; }
.selection-dots i { display: block; width: 6px; height: 9px; border: 1px solid #baa5ce; border-radius: 2px; }
.selection-dots .filled { background: #805eb5; border-color: #805eb5; }
.clear-selection { align-self: stretch; min-width: 44px; min-height: 44px; padding: 0 5px; margin-left: auto; border: 0; border-radius: 6px; color: #73538f; background: transparent; font-size: 10px; }
.clear-selection:not(:disabled):hover { background: #f9f4fd80; }
.clear-selection:disabled { color: #b5a1c4; }
.immersive .action-panel { min-height: 120px; }
@media (min-width:741px) and (max-height:800px) {
  .immersive .card-group { width: 76px; flex-basis: 76px; max-width: 76px; }
  .immersive .number-card { height: 96px; font-size: 28px; }
  .immersive .action-panel { min-height: 114px; }
}
@media (max-width:740px) {
  .immersive .hand { min-height: 140px; padding-top: 26px; gap: 16px; }
  .immersive .card-group { width: 72px; flex-basis: 72px; max-width: 72px; }
  .immersive .number-card { height: 104px; font-size: 30px; }
  .card-pick-count { font-size: 8px; }
}
@media (max-width:600px) {
  .immersive .action-panel { min-height: 176px; }
}
@media (max-width:360px) {
  .selection-summary { gap: 6px; font-size: 9px; }
  .selection-dots { gap: 3px; }
  .clear-selection { font-size: 9px; }
}

/* Thirteen poker ranks keep full-size targets and scroll within the hand. */
.immersive .hand { overflow-x: auto; justify-content: flex-start; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #bda7ce transparent; }
.immersive .card-group:first-child { margin-left: auto; }
.immersive .card-group:last-child { margin-right: auto; }
.card-suits { display: flex; justify-content: center; gap: 2px; }
.suit-chip { display: inline-grid; place-items: center; min-width: 12px; height: 14px; border-radius: 3px; color: #7b638d; font-size: 11px; font-weight: 500; line-height: 1; }
.suit-red { color: #b66874; }
.suit-chip.is-picked { color: #faf6ff; background: #8a66b5; }
.reveal-card .suit-chip { position: absolute; bottom: 6px; right: 6px; font-size: 12px; }
.round-progress { margin-top: 7px; color: #987dab; font-size: 9px; letter-spacing: .04em; }
@media (max-width:740px) {
  .round-progress { margin-top: 6px; font-size: 8px; }
  .immersive .table-caption { display: none; }
  .immersive .table-center { transform: translate(-50%, -50%); }
  .immersive .seat-bottom { bottom: 11px; }
}

/* The remaining time belongs to the player who can act. */
.immersive .action-controls { display: block; width: 300px; }
.seat .phase-clock { position: absolute; width: 66px; gap: 4px; pointer-events: none; }
.seat-top .phase-clock { top: 0; left: calc(100% + 14px); }
.seat-bottom .phase-clock { bottom: 0; left: calc(100% + 14px); }
.seat-left .phase-clock { top: 0; left: calc(100% + 18px); }
.seat-right .phase-clock { top: 0; right: calc(100% + 18px); }
.seat .clock-ring { width: 50px; height: 50px; padding: 3px; }
.seat .clock-face { padding-top: 8px; }
.seat .clock-face strong { font-size: 23px; }
.seat .clock-label { font-size: 9px; }
@media (min-width:741px) {
  .immersive .table-center { transform: translate(-50%, -48%); }
}

/* Persistent counts and a local response make repeated taps legible. */
.selection-feedback { min-height: 22px; margin-top: 7px; color: #725090; font-size: 11px; line-height: 18px; text-align: center; }
.selection-feedback.is-limit { color: #a75a36; }
.immersive .hand { padding-top: 28px; }
.card-pick-count { display: grid; place-items: center; min-height: 22px; font-size: 10px; }
.chosen .card-pick-count { color: #fff; background: #7753a4; font-weight: 750; }
.card-add-hint { right: 6px; }
.chosen .card-add-hint { display: none; }
.card-feedback { position: absolute; z-index: 4; top: -24px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 12px; background: #654189; color: white; font-size: 12px; font-weight: 750; line-height: 16px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px #5d3d7a20; animation: pick-feedback 1.1s ease-out both; }
@keyframes pick-feedback { 0% { opacity: 0; transform: translate(-50%, 7px) scale(.85); } 18%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.immersive .number-card[aria-disabled="true"]:hover { background: #fcfbfd; border-color: #dfd9e8; }
.immersive .number-card.selected[aria-disabled="true"]:hover { background: #eee7fb; border-color: var(--purple); }
#selected-total { font-size: 12px; font-weight: 700; color: #6c4590; }
@media (max-width:740px) {
  .seat .phase-clock { width: 58px; gap: 3px; }
  .immersive .game-panel { grid-template-rows: 30px 58px minmax(310px, 1fr) auto; }
  .immersive .direction-label { display: none; }
  .seat .clock-ring { width: 42px; height: 42px; }
  .seat .clock-face { padding-top: 6px; }
  .seat .clock-face strong { font-size: 20px; }
  .seat .clock-face span { font-size: 8px; }
  .seat .clock-label { font-size: 8px; }
  .seat-top .phase-clock, .seat-bottom .phase-clock { left: calc(100% + 7px); }
  .seat-left:has(.phase-clock) .mini-hand, .seat-right:has(.phase-clock) .mini-hand { display: none; }
  .seat-left .phase-clock, .seat-right .phase-clock { top: calc(100% + 7px); left: 50%; right: auto; transform: translateX(-50%); }
  .selection-feedback { font-size: 10px; min-height: 30px; line-height: 15px; }
  .immersive .hand { padding-top: 28px; }
  .card-pick-count { font-size: 10px; }
}
@media (max-width:600px) {
  .immersive .action-controls { width: 100%; }
  .immersive .action-panel { min-height: 152px; }
  .immersive .action-copy { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .card-feedback { animation: none; } }
.reduce-motion .card-feedback { animation: none; }