:root{font-family:Georgia,'Times New Roman',serif;color:#23484a;background:#246e73;--cream:#fff5d9;--ink:#23484a;--gold:#edbc62;--coral:#cf765b;--green:#27695f}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:url('assets/pond.svg') center/cover fixed}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:44px;border:1px solid #c39a52;border-radius:12px;padding:10px 18px;background:#f5ca79;color:#25494a;font-weight:bold;box-shadow:0 3px 0 #ba8c48;transition:transform .15s,background .15s}button:hover:not(:disabled){background:#ffe0a0;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(2px);box-shadow:none}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ad452e;outline-offset:3px}input,select{min-height:46px;border:1px solid #b5bba3;border-radius:10px;padding:10px;background:#fffbee;color:var(--ink);max-width:100%;width:100%}label{display:block;font:600 14px/1.6 system-ui,sans-serif}h1,h2,h3,p{margin-top:0}h2{font-size:30px;line-height:1.1}p{line-height:1.5}small,.eyebrow,.sub,.tagline{font-family:system-ui,sans-serif}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.4px;color:#507866;margin-bottom:13px}.topbar{height:72px;display:flex;align-items:center;gap:24px;padding:10px 4vw;background:#fff5d9e8;border-bottom:1px solid #d2c399}.wordmark{font-size:34px;font-weight:bold;color:#285951;text-decoration:none;letter-spacing:-2px}.wordmark span{color:#cb7856}.tagline{letter-spacing:2px;font-size:10px;font-weight:700}.topbar nav{margin-left:auto;display:flex;gap:8px}.quiet{background:transparent;box-shadow:none;border-color:#799784;font:600 13px system-ui;padding:8px 12px}.topbar .quiet{border:none}#app{max-width:1180px;margin:auto;padding:24px}.welcome{display:grid;grid-template-columns:1.08fr 1fr;gap:36px;align-items:center;min-height:calc(100svh - 122px)}.intro{color:#fff4d4;text-align:center;padding:10px}.intro .eyebrow{color:#e0e5bd}.intro h1{font-size:clamp(64px,7vw,106px);line-height:.95;letter-spacing:-5px;margin-bottom:20px;text-shadow:0 5px 0 #265e60}.intro h1 em{color:#ffd68a;font-style:normal}.intro p{max-width:330px;margin:0 auto 20px;font-size:19px}.cast{display:flex;justify-content:center;align-items:flex-end}.cast img{width:30%;filter:drop-shadow(0 9px 5px #13484e55);animation:bob 5s ease-in-out infinite}.cast img:nth-child(2){width:35%;animation-delay:-2s;transform:translateY(-14px)}.caption{margin-top:15px!important;font:italic 14px Georgia!important;color:#e1efd3}.panel{background:#fff5d9;border:1px solid #f9eaca;border-radius:25px;padding:28px;box-shadow:0 14px 35px #113e483d, inset 0 0 0 5px #eee3c3}.tabs{display:flex;gap:5px;background:#e7e6c9;border-radius:13px;padding:5px;margin:18px 0}.tabs button{flex:1;box-shadow:none;border:0;background:transparent;font:700 13px system-ui;padding:10px 5px}.tabs button.active{background:#2c7066;color:#fff5d9}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}.full{width:100%;margin-top:14px}.hint{font:13px/1.5 system-ui;color:#59705f;margin:14px 0 0}.seat-config{max-height:170px;overflow:auto;display:grid;gap:8px;margin-top:12px}.seat-row{display:flex;align-items:center;gap:8px}.seat-row img{width:42px}.seat-row input{flex:1;width:40%}.seat-row select{width:46%;font-size:13px}.lobby{max-width:720px;margin:24px auto;text-align:center}.room-number{font:800 clamp(44px,10vw,70px)/1.2 system-ui;letter-spacing:9px;color:#236b66;margin:15px 0}.copyrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.connection{font:12px system-ui;display:inline-flex;align-items:center;gap:6px}.connection:before{content:'';height:8px;width:8px;border-radius:50%;background:#97c655}.connection.offline:before{background:#d17759}.lobby-seats{margin:22px 0;text-align:left}.lobby-seat{display:flex;align-items:center;gap:12px;padding:9px;border-bottom:1px solid #ddd9b8}.lobby-seat img{width:46px}.lobby-seat .details{flex:1}.lobby-seat select{width:155px}.sub{font-size:12px;display:block;color:#69745c;margin-top:4px}.game{height:calc(100svh - 106px);min-height:460px;display:flex;flex-direction:column;gap:12px}.gamebar{display:flex;align-items:center;gap:12px;color:#fff3d6;font:13px system-ui}.gamebar button{background:#f9efcf;color:#2c5e5b}.gamebar .connection{margin-left:auto}.opponents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.opponent{min-width:120px;flex:1;max-width:215px;border:2px solid #e8dab4;border-radius:18px;background:#fff6dc;padding:10px 8px;box-shadow:0 5px 0 #20595b66;position:relative;min-height:113px}.opponent img{width:57px;height:57px;float:left;margin-right:8px}.opponent strong{display:block;font-size:14px;text-align:left;line-height:1.2;padding-top:7px}.opponent .sub{text-align:left;font-size:11px}.opponent.turn{border-color:#ffe38f;box-shadow:0 0 0 3px #deac51}.opponent.askable{border:2px dashed #2d7668;animation:glow 2s infinite}.books{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;clear:both;padding-top:5px}.book{display:inline-block;background:#e7cf8c;color:#44563c;font:bold 11px system-ui;border:1px solid #c0a768;border-radius:4px;padding:2px 5px}.pond-table{flex:1;min-height:88px;position:relative;display:flex;align-items:center;justify-content:center;gap:25px;text-align:center}.pile{width:72px;height:101px;position:relative;flex-shrink:0;filter:drop-shadow(4px 5px 0 #163f4766);transform:rotate(-6deg)}.pile img{width:100%;height:100%}.pile span{position:absolute;right:-14px;bottom:2px;min-width:30px;height:30px;line-height:30px;background:#fff3d5;color:#375e55;border-radius:50%;font:700 13px/30px system-ui;transform:rotate(6deg)}.message{max-width:410px;color:#fff5d9}.message h2{font-size:27px;margin-bottom:8px}.message p{font:14px/1.45 system-ui;margin:0}.quip{font:italic 13px Georgia!important;color:#d5e9cd;margin-top:8px!important}.hand-dock{background:repeating-linear-gradient(0deg,#8b5b3d 0,#8b5b3d 47px,#6d442f 48px,#a3734e 50px);border:5px solid #b08559;border-radius:21px;padding:13px 16px 16px;box-shadow:0 8px 0 #523c2d, inset 0 2px 8px #38231b55;color:#fff4d1}.handbar{display:flex;gap:8px;align-items:center;justify-content:space-between}.handbar h3{font-size:19px;margin:0}.handbar .books{padding:0}.instruction{font:13px system-ui;margin:8px 0;color:#fff5dc;min-height:18px}.hand{display:flex;gap:9px;overflow:auto;padding:7px 4px 8px;scrollbar-color:#e7c389 #725238;overscroll-behavior:contain}.card{flex:0 0 88px;height:126px;position:relative;padding:8px;color:#23484a;border:2px solid #e8d9b3;border-radius:10px;background:linear-gradient(145deg,#fffbed,#f5e6bf);box-shadow:0 3px 0 #523e30;animation:deal .25s ease-out}.card.red{color:#b14c40}.card.selected{transform:translateY(-7px);border:3px solid #2a7e6d;box-shadow:0 0 0 3px #f9cc72}.card .rank{position:absolute;left:8px;top:5px;font-size:25px}.card .suits{position:absolute;bottom:7px;left:6px;right:6px;text-align:center;font-size:19px;letter-spacing:1px}.card .fish{position:absolute;top:36px;left:19px;width:48px;height:48px;background:url('assets/character-5.svg') center/contain no-repeat;opacity:.85}.card .count{position:absolute;right:6px;top:8px;font:700 12px system-ui;background:#e4d9b8;color:#345b53;border-radius:20px;padding:3px}.card:hover:not(:disabled){background:#fffbed}.bottomline{display:flex;justify-content:space-between;gap:8px;font:11px system-ui;color:#d1e5cc}.textbutton{border:0;background:transparent;box-shadow:none;color:inherit;padding:0 8px;min-height:24px;font:inherit}.privacy{position:fixed;inset:0;z-index:20;background:#215d60;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.privacy .panel{max-width:440px;width:100%}.privacy img{width:130px}.finished{max-width:560px;margin:auto;text-align:center}.score-row{display:flex;align-items:center;gap:12px;text-align:left;border-bottom:1px solid #d7d4b1;padding:9px}.score-row img{width:50px}.score-row strong{flex:1}.score-row span{font:700 15px system-ui}dialog{border:2px solid #dcc99b;border-radius:22px;background:var(--cream);color:var(--ink);max-width:540px;width:calc(100% - 30px);padding:26px;max-height:85svh;overflow:auto;box-shadow:0 20px 70px #102f38aa}dialog::backdrop{background:#123f46bd;backdrop-filter:blur(4px)}dialog p,dialog li{font:15px/1.65 system-ui}dialog li{margin-bottom:8px}dialog label{margin:15px 0}dialog input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle;margin-right:8px;accent-color:#286c64}dialog button{margin:5px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#fff7df;color:#813f31;border:2px solid #c58c6e;border-radius:13px;padding:12px 20px;box-shadow:0 8px 25px #16474966;max-width:90%;width:max-content;font:600 14px/1.5 system-ui;z-index:40;display:none}.activity{max-height:250px;overflow:auto;padding-left:22px}.activity li{margin-bottom:8px}.empty-hand{padding:20px;font:14px system-ui}.active-count{font:12px system-ui}.exit{margin-top:12px;color:#d5ead6}.error-inline{color:#a54732;font:14px/1.4 system-ui;margin:10px 0} @keyframes bob{50%{translate:0 -9px}}@keyframes glow{50%{box-shadow:0 0 0 4px #fff0a66b}}@keyframes deal{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.topbar{height:58px;padding:6px 16px;gap:10px}.wordmark{font-size:30px}.tagline{display:none}#app{padding:12px}.welcome{grid-template-columns:1fr;gap:12px;min-height:0}.intro{padding:10px 0 0}.intro h1{font-size:63px;margin-bottom:8px}.intro p{font-size:16px;margin-bottom:5px}.intro .eyebrow{margin-bottom:9px}.cast{max-width:240px;margin:auto}.cast img{width:27%;max-height:76px}.cast img:nth-child(2){width:31%;max-height:87px}.caption{display:none}.panel{padding:20px}.welcome .panel h2{font-size:25px;margin-bottom:5px}.tabs{margin:12px 0}.game{height:calc(100svh - 83px);min-height:440px;gap:9px}.opponents{gap:7px}.opponent{min-width:95px;max-width:none;min-height:90px;padding:6px;flex:1 1 28%;border-radius:13px}.opponent img{width:36px;height:36px;margin-right:5px}.opponent strong{font-size:11px;padding-top:3px}.opponent .sub{font-size:10px}.books{gap:2px}.book{font-size:10px;padding:1px 4px}.pond-table{gap:18px;min-height:65px}.pile{width:48px;height:67px}.message h2{font-size:21px}.message p{font-size:12px}.quip{font-size:11px!important}.hand-dock{padding:9px;border-width:4px;border-radius:15px}.handbar h3{font-size:16px}.instruction{font-size:12px;margin:6px 0}.hand{gap:7px;padding-top:7px}.card{flex-basis:66px;height:96px}.card .rank{font-size:22px;left:6px}.card .count{font-size:10px;right:4px}.card .fish{width:36px;height:36px;top:30px;left:14px}.card .suits{font-size:15px;bottom:5px;left:2px;right:2px}.gamebar{font-size:11px;gap:6px}.gamebar button{font-size:11px;min-height:36px;padding:6px 9px}.bottomline{font-size:10px}.lobby{margin:5px auto}.lobby-seat{padding:8px 0}.lobby-seat select{width:123px}.room-number{letter-spacing:6px}.seat-config{max-height:180px}.formrow{gap:9px}.privacy img{width:105px}.privacy h2{font-size:27px}}
@media(max-height:560px) and (orientation:landscape){.topbar{height:48px}.game{height:calc(100svh - 72px);min-height:300px;gap:5px}.opponent{min-height:60px;padding:4px}.opponent img{width:35px;height:35px}.opponent strong{font-size:11px}.opponent .books{position:absolute;bottom:3px;right:3px}.pond-table{min-height:40px}.pile{width:31px;height:44px}.message h2{font-size:18px;margin:0}.message p{font-size:11px}.quip{display:none}.hand-dock{padding:5px 10px}.handbar h3{font-size:14px}.instruction{margin:3px 0}.card{height:70px;flex-basis:62px}.card .fish{width:24px;height:24px;top:25px;left:30px}.card .suits{font-size:13px}.card .rank{font-size:20px}.hand{padding:5px 3px}.bottomline{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.opponent:disabled{opacity:1}.card:disabled{opacity:.88}.flying-card{position:fixed;width:40px;height:56px;pointer-events:none;z-index:15;filter:drop-shadow(0 5px 5px #173b4666)}
.opponent strong,.handbar h3,.message h2,.score-row strong{overflow-wrap:anywhere}
@media(min-width:701px){.game{height:calc(100svh - 120px)}}
@media(max-height:560px) and (orientation:landscape){#app{padding:8px 16px}.game{height:calc(100svh - 64px)}}