:root{color-scheme:light;font-family:Nunito,system-ui,sans-serif;color:#fff7df;background:#34231b;--cream:#fff6df;--ink:#33261c;--red:#b72d42;--moss:#264b38}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,select{font:inherit;font-weight:800;border:1px solid #967b55;border-radius:10px;min-height:44px;padding:8px 13px;background:var(--cream);color:var(--ink);cursor:pointer}button:disabled{opacity:.55;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #f5c557;outline-offset:2px}button:hover:not(:disabled){background:#ffe4b1}button:active:not(:disabled){transform:translateY(1px)}button[hidden],[hidden]{display:none!important}#game{width:min(100%,1060px);height:100dvh;min-height:560px;margin:auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom);background:radial-gradient(ellipse,#3f6245,#193d2c);border-inline:8px solid #76523c;box-shadow:inset 0 0 0 2px #d6a475}header{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:58px;border-bottom:1px solid #a6b195}header strong{font-size:20px;line-height:1.1}header strong span{color:#efa6a4}nav{display:flex;gap:5px}nav button{padding:6px 10px;font-size:14px}#status{font-size:14px;text-align:center;min-height:42px;padding:9px 0;color:#f9e5b5}#table{position:relative;flex:1;min-height:190px;max-height:530px;margin:0 2px;border:2px solid #b69668;border-radius:43%;background:center/cover url('assets/table.webp'),#31563a;box-shadow:inset 0 0 0 5px #284730,0 5px 20px #14241980}.seat{position:absolute;width:110px;text-align:center;font-size:12px;line-height:1.2;border-radius:18px;background:#193d2cdb;padding:4px 5px;border:1px solid #ab987655;z-index:1}.seat.active{border:2px solid #ffd56e;background:#456b40}.seat img{width:66px;height:64px;object-fit:contain;display:block;margin:auto}.seat strong,.seat span{display:block}.north{top:0;left:50%;transform:translate(-50%,-10%)}.west{left:-3px;top:50%;transform:translateY(-50%)}.east{right:-3px;top:50%;transform:translateY(-50%)}.south{bottom:-3px;left:50%;transform:translate(-50%,25%);display:flex;align-items:center;width:auto;min-width:170px;gap:8px}.south img{height:36px;width:38px}.south span{white-space:nowrap}#trick{position:absolute;inset:80px 115px 45px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.played{position:relative;text-align:center}.played small{display:block;font-size:11px}.card{width:82px;height:116px;flex:0 0 82px;background:var(--cream);color:#222d30;border:2px solid #ccbda0;border-radius:8px;box-shadow:0 3px 5px #0004;position:relative;display:flex;align-items:center;justify-content:center;padding:0;font-size:36px;user-select:none;-webkit-user-select:none;touch-action:pan-x}.card.red{color:#b3213a}.card .corner{position:absolute;top:5px;left:5px;font-size:17px;line-height:1;font-weight:900;white-space:pre-line}.card .bottom{top:auto;left:auto;right:5px;bottom:5px;transform:rotate(180deg)}.card img{width:64%;height:66%;object-fit:contain}.card.selected{border:4px solid #f6bf43;box-shadow:0 0 0 3px #173722;transform:translateY(-6px)}.card.illegal{background:#d8d4c4;color:#64655d}.card.illegal.red{color:#986675}#hand{display:flex;flex:0 0 138px;align-items:flex-end;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 6px 7px;scrollbar-color:#ccb779 #244331;scrollbar-width:thin;touch-action:pan-x}#message{min-height:39px;margin:20px 0 0;text-align:center;font-size:14px;line-height:1.25;color:#f7e9c6}footer{display:flex;align-items:center;gap:8px;min-height:64px;padding:6px 0}#preview{flex:1;font-size:14px;color:#ffe4ae;font-weight:900;min-width:0}#confirm{background:#ffd577;min-width:106px}#notice{font-size:12px;text-align:center;margin:0;min-height:17px;color:#ffc2b9}dialog{color:var(--ink);background:var(--cream);padding:20px;border:2px solid #a9885c;border-radius:20px;width:min(94vw,590px);max-height:94dvh;overflow:auto;box-shadow:0 22px 60px #101e15aa}dialog::backdrop{background:#081e16c7}dialog p{line-height:1.55}dialog h2{margin:0 0 10px}dialog button{background:#274e37;color:#fff4df;border:1px solid #527d5d;margin:4px}dialog button:hover:not(:disabled){background:#426d45}dialog .row{display:flex;justify-content:center}.menu-art{height:210px;position:relative;margin:-20px -20px 16px;overflow:hidden;border-radius:18px 18px 0 0;background:#31543a}.menu-art>img{width:100%;height:100%;object-fit:cover}.menu-art>div{position:absolute;inset:12px auto auto 16px;color:#fff9dd;text-shadow:0 2px 6px #172a20,2px 0 0 #172a20}.menu-art h1{font-family:Georgia,serif;font-size:42px;line-height:.93;margin:8px 0}.menu-art small{letter-spacing:2px;font-size:10px}#menu>p{text-align:center}.menu-buttons{display:grid;grid-template-columns:1fr 1fr}.menu-buttons #play{background:#ad3042}.settings{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.settings label{display:flex;align-items:center;gap:7px;font-size:14px}.settings input{width:19px;height:19px;accent-color:#355e3c}.settings select{font-size:13px;padding:7px;min-height:38px}#reviewcards{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}#reviewcards .card{width:70px;height:100px;flex-basis:70px}#reviewhands{font-size:14px;line-height:1.9}#scoreboard{display:grid;gap:7px}#scoreboard>div{padding:9px;background:#e6deca;border-radius:7px}#lessonlist{display:grid;grid-template-columns:1fr 1fr;gap:5px}#lessonlist button{text-align:left;font-size:13px}#result{text-align:center}.queen-center{opacity:.75;width:75px;height:96px;object-fit:contain}.legal-label{position:absolute;bottom:3px;left:3px;font-size:10px}.selected-zoom{font-size:27px;display:block}.thinking{color:#edc674}
@media(max-width:600px){#game{border-inline-width:4px;padding-inline:7px}header{min-height:50px}header strong{font-size:16px}nav button{font-size:12px;min-height:40px;padding:6px 8px}.seat{width:70px;font-size:11px}.seat img{width:48px;height:48px}.south{min-width:156px}.south img{height:31px;width:31px}#trick{inset:63px 66px 35px;gap:4px}#trick .card{width:54px;height:77px;flex-basis:54px;font-size:28px}#trick .card .corner{font-size:12px;left:3px;top:3px}.played small{font-size:10px}#message{font-size:13px}#status{font-size:12px;min-height:37px}.menu-art{height:175px}.menu-art h1{font-size:37px}footer button{font-size:13px;padding:7px 10px}#preview{font-size:12px}#confirm{min-width:92px}}
@media(max-height:500px) and (min-width:600px){#game{min-height:320px}header{min-height:40px}header strong{font-size:17px}nav button{min-height:32px}#status{min-height:24px;padding:3px}#table{min-height:140px}.seat img{width:38px;height:36px}.seat{width:99px;font-size:10px}.south{min-width:155px}.south img{width:27px;height:27px}#trick{inset:47px 112px 23px}#trick .card{width:45px;height:63px;flex-basis:45px;font-size:25px}#trick .card .corner{font-size:10px;top:3px;left:3px}#message{min-height:20px;margin:8px 0 0;font-size:12px}#hand{flex-basis:86px;padding-top:7px;gap:7px}.card{height:73px;width:54px;flex-basis:54px;font-size:26px}.card .corner{font-size:12px}footer{min-height:46px;padding:1px 0}footer button{min-height:40px}#notice{min-height:12px;font-size:10px}.selected-zoom{font-size:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.seat .back-mini{width:13px;height:18px;display:inline;vertical-align:middle;margin:0;object-fit:contain}.seat small{font-size:10px}.played{animation:card-arrive .22s ease-out}.card{transition:transform .12s ease-out}@keyframes card-arrive{from{transform:translateY(-8px) rotate(-4deg);opacity:.6}to{transform:none;opacity:1}}body[data-motion="false"] .played,body[data-motion="false"] .card{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.played,.card{animation:none;transition:none}}@media(max-height:500px) and (min-width:600px){.seat small{position:absolute;right:4px;top:5px}.seat .back-mini{width:9px;height:13px}}

@media(max-width:600px){#trick{top:110px}}@media(max-height:500px) and (min-width:600px){.north{width:180px;height:36px;display:flex;align-items:center;justify-content:center}.north img{width:26px;height:26px;margin:0 6px 0 0}.north>div{padding-right:20px}.south img{width:22px;height:22px}#trick{inset:39px 112px 27px}#trick .card{height:58px}.played small{line-height:11px}}