:root{--cream:#f5e6c6;--gold:#efc277;--ink:#211b12;--green:#174c3d;--muted:#bdc8b6;--line:#9d81574d;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#122b25;color:var(--cream);font:16px/1.5 Georgia,serif;background-image:linear-gradient(100deg,#0c251ff5,#102a23e8),url('../il-bello/assets/saloon.jpg');background-size:cover;background-attachment:fixed}button,input{font:600 14px/1.4 system-ui,sans-serif}button{cursor:pointer;touch-action:manipulation;border:1px solid #b99b6670;border-radius:7px;background:#ffffff08;color:var(--cream);padding:11px 17px;transition:background .15s,transform .15s}button:hover{background:#ffffff17}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f7cd84;outline-offset:4px}button:disabled{cursor:default;opacity:.4}button:active{transform:translateY(1px)}.gold,.primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}.gold:hover,.primary:hover{background:#f9dba2}.primary{font-size:17px;background:#e9d5ab;border-color:#e9d5ab}.wide{width:100%;margin-top:14px}header{height:75px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4vw;border-bottom:1px solid var(--line);background:#10241fe8}header>a{font:bold 12px system-ui;letter-spacing:.13em;color:var(--gold);text-decoration:none}.brand{font:700 16px Georgia;letter-spacing:.12em}.brand em{font-style:normal;color:#b7c3a8;font-size:11px}header>div{display:flex;gap:9px}header button{padding:8px 13px}.eyebrow{color:var(--gold);font:bold 10px/1.6 system-ui;letter-spacing:.18em;text-transform:uppercase}main{max-width:1400px;margin:auto;padding:32px 4vw}#lobby{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;max-width:1120px;margin:10px auto 30px}.intro h1{font-size:clamp(65px,8vw,112px);line-height:.94;letter-spacing:-.045em;margin:24px 0}.intro h1 em{color:var(--gold);font-weight:normal}.intro>p:not(.eyebrow){max-width:450px}.intro #intro-copy{font-size:20px;line-height:1.6;color:#d5dfcc}#fan{height:210px;position:relative;margin:24px 0 15px;padding-left:45px}#fan .card{position:absolute;width:115px;height:180px;pointer-events:none;left:calc(45px + var(--i)*65px);top:calc(var(--i)*-2px);transform:rotate(calc(-15deg + var(--i)*10deg));box-shadow:0 15px 25px #0006}.lobby-panel{background:linear-gradient(145deg,#283c31,#1a2d25);border:1px solid #a58954aa;border-radius:13px;padding:30px;box-shadow:0 20px 50px #0004}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.badge{font:10px/1.4 system-ui;color:#b3c6ad;max-width:140px;text-align:right}.badge.live{color:#d0e3a6}.lobby-panel label{display:block;margin-bottom:7px;font:12px system-ui;color:#d5d6bf}input{background:#0b221b;color:#fff3d5;border:1px solid #65816a;border-radius:6px;padding:13px 14px;width:100%;min-width:0}#room-code{text-transform:uppercase;letter-spacing:.17em}.join>div{display:flex;gap:8px}.join{margin-top:19px}.divider{display:flex;align-items:center;gap:15px;font:11px system-ui;color:#97a68d;text-align:center;margin:23px 0 8px}.divider:before,.divider:after{content:'';height:1px;background:#9d81574d;flex:1}.quiet{font:12px/1.7 system-ui;color:var(--muted)}#computer-note{margin:9px 0}.linklike{border:0;padding:12px 0 0;font-size:12px;color:var(--gold);text-align:left}#privacy{margin:23px 0 0}#lobby-error{font:13px/1.6 system-ui;color:#ffd3b3;margin-bottom:0}[hidden]{display:none!important}.game-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.game-top h1{font-size:26px;margin:4px 0;line-height:1.2}.game-tools{display:flex;gap:8px}.game-tools button{font-size:12px}.score-strip{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 auto 18px;max-width:1050px}.score-strip>div{font:14px system-ui;display:flex;gap:13px;align-items:center}.score-strip strong{font:28px Georgia;color:var(--gold)}.score-target{font:10px system-ui;letter-spacing:.12em;color:#b5c7b3}.table-wrap{border:12px solid #3e2c1c;border-radius:45px;background:#123e30;box-shadow:0 20px 65px #0006,inset 0 0 0 2px #ac8651;max-width:1080px;margin:auto;padding:20px 25px 25px;position:relative;background-image:radial-gradient(ellipse at center,#28614966,transparent 75%),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 3px)}.opponent{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:65px;padding:0 12px 15px;border-bottom:1px solid #a3bd9f33;font:12px system-ui}#opponent-hand{display:flex;gap:6px;min-height:60px}.back{width:40px;height:60px;background:repeating-linear-gradient(45deg,#244668 0 3px,#314f6b 3px 5px);border:3px solid #e2cba0;border-radius:5px;box-shadow:0 4px 8px #0003}.back:after{content:'FA';display:block;text-align:center;font:bold 12px Georgia;line-height:50px;color:#e8d5aa}.felt{position:relative;min-height:245px;padding:15px 10px 25px;isolation:isolate}.table-heading{display:flex;justify-content:space-between;gap:10px;font:10px system-ui;letter-spacing:.12em;color:#bfd2b6;margin-bottom:18px}.felt-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font:11px Georgia;letter-spacing:.15em;color:#8ba99028;z-index:-1;pointer-events:none}.felt-brand span{font-size:65px}#table-cards{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;position:relative;min-height:130px}.card{--suit:#a66e19;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;width:85px;height:132px;flex:0 0 auto;padding:6px 7px;background:linear-gradient(130deg,#fff5d9,#e9d5ac);border:2px solid #b7a382;border-radius:7px;box-shadow:0 5px 8px #0005;color:var(--suit);font:600 13px Georgia;overflow:hidden}.card:before{content:'';position:absolute;inset:4px;border:1px solid #ac8d5d66;border-radius:3px;pointer-events:none}.card:hover{background:linear-gradient(130deg,#fff9e9,#f5deb3)}.card[aria-pressed=true]{border:3px solid #ffdb86;box-shadow:0 0 0 3px #f3ce7366,0 7px 14px #0007;transform:translateY(-8px)}.card.selected-table{border-color:#96e0b0;box-shadow:0 0 0 3px #96e0b080}.card:disabled{opacity:.8}.card .corner{display:flex;justify-content:space-between;width:100%;font-size:13px;z-index:1}.card .corner:last-child{transform:rotate(180deg)}.card .pip{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;padding:4px;align-content:center}.pip svg{width:20px;height:28px;overflow:visible}.pip.face svg{width:47px;height:62px}.card .tiny-name{font:7px system-ui;letter-spacing:.08em;text-transform:uppercase;position:absolute;bottom:19px;color:#5b513a}.card.preview{opacity:1!important}.card.hinted{box-shadow:0 0 0 3px #bcecd1}.player{border-top:1px solid #a3bd9f33;padding-top:16px}.turn-row{display:flex;justify-content:space-between;gap:10px;font:12px system-ui;margin-bottom:16px;color:#c1d1b9}#turn.your-turn{color:#ffe1a4;font-weight:700}#my-hand{display:flex;justify-content:center;gap:18px;padding:6px 0 7px}#my-hand .card{width:100px;height:151px}#move-preview{min-height:26px;text-align:center;font:12px/1.6 system-ui;color:#e4dfbf;margin-top:10px}.play-actions{display:flex;justify-content:center;gap:12px;margin-top:12px}.play-actions button{min-width:150px}#last-move{font:12px/1.7 system-ui;color:#d4e1cc;text-align:center;min-height:25px;margin-top:17px}#empty-table{text-align:center;color:#c0d0b7;font-style:italic;min-height:90px}.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1050px;margin:17px auto 0}.bottom-bar button{font-size:11px;padding:8px 12px}#connection{font:10px/1.6 system-ui;color:#b5c7ae;text-align:center}.scopa-flash{animation:scopaglow .8s ease-in-out}#waiting{max-width:600px;margin:30px auto;text-align:center;background:#1b3a2d;border:1px solid #957b4b;padding:45px;border-radius:15px}.waiting-icon{font-size:50px;color:var(--gold)}#waiting h2{font-size:32px}#waiting button{display:block;margin:15px auto}#copy-room{font:25px monospace;letter-spacing:.15em}dialog{color-scheme:light;background:#f6e9cb;color:#29251b;border:2px solid #ac8651;border-radius:13px;width:min(620px,95vw);max-height:88dvh;overflow:auto;padding:25px 30px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#071b16d9;backdrop-filter:blur(5px)}.modal-top{display:flex;justify-content:space-between;align-items:center}.modal-top .eyebrow{color:#77603a}.modal-top button{border:0;color:#403821;background:transparent;font:26px Georgia;padding:0 5px}dialog h2{font-size:30px;line-height:1.15;margin:20px 0}dialog p,dialog li{font:14px/1.8 system-ui}dialog ul{padding-left:20px}#modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}dialog button{background:#214e3b;color:#f7e6c6;border-color:#51755e}.score-table{width:100%;border-collapse:collapse;font:13px/1.6 system-ui}.score-table th,.score-table td{padding:10px 5px;border-bottom:1px solid #b2a17f;text-align:center}.score-table th:first-child,.score-table td:first-child{text-align:left}.score-table tr.total{font-weight:bold;background:#e5d4aa}.score-table caption{text-align:left;margin-bottom:15px}.rules-example{padding:15px;background:#e5d8b7;border-left:3px solid #8a6334}.capture-pile{display:flex;gap:5px;flex-wrap:wrap}.capture-pile .card{width:56px;height:83px;opacity:1}.capture-pile .card .pip svg{width:10px;height:15px}.capture-pile .card .pip.face svg{width:25px;height:35px}.capture-pile .tiny-name{display:none}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#f3dbab;color:#2d281e;padding:12px 20px;border-radius:7px;opacity:0;pointer-events:none;z-index:20;font:13px system-ui;box-shadow:0 7px 30px #0006;transition:.2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}footer{text-align:center;font:10px/1.8 system-ui;color:#9eaf98;padding:20px 25px 30px;max-width:1000px;margin:auto}@keyframes scopaglow{50%{box-shadow:0 0 0 5px #e9c377,0 0 60px #e9c37777}}@media(max-width:750px){header{height:62px;padding:0 15px}.brand{font-size:12px}.brand em{display:none}main{padding:22px 12px}#lobby{grid-template-columns:1fr;gap:20px;max-width:450px}.intro{text-align:center}.intro h1{font-size:73px;margin:17px 0}.intro #intro-copy{font-size:17px}.intro #fan{height:175px;width:300px;margin:24px auto 0}#fan .card{width:95px;height:145px;left:calc(15px + var(--i)*56px)}.lobby-panel{padding:24px}.game-top h1{font-size:21px}.game-tools{gap:6px}.game-tools button{font-size:10px;padding:9px}.score-strip{gap:8px}.score-strip>div{font-size:12px;gap:6px}.score-strip strong{font-size:24px}.score-target{font-size:9px}.table-wrap{border-width:6px;border-radius:25px;padding:15px 10px}.opponent{gap:10px;padding:0 4px 12px;font-size:10px}#opponent-hand{gap:4px;min-height:45px}.back{width:29px;height:43px;border-width:2px}.back:after{font-size:9px;line-height:37px}.felt{padding:12px 0 15px;min-height:215px}.card{width:61px;height:96px;padding:5px}.pip svg{width:14px;height:20px}.pip.face svg{width:33px;height:47px}.card .tiny-name{font-size:5px;bottom:15px}.card .corner{font-size:10px}#table-cards{gap:8px;min-height:104px}#my-hand{gap:14px}#my-hand .card{width:79px;height:122px}#my-hand .card .pip svg{width:19px;height:25px}#my-hand .card .pip.face svg{width:40px;height:54px}.bottom-bar{gap:7px}.bottom-bar button{font-size:9px;padding:8px}.bottom-bar #connection{font-size:9px}.turn-row{font-size:10px}#move-preview{font-size:11px}.play-actions button{min-width:120px;font-size:12px;padding:11px}dialog{padding:21px}#waiting{padding:30px 20px}.game-top{align-items:flex-start}#last-move{font-size:10px}.felt-brand span{font-size:45px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.pip{overflow:hidden}.pip .painted-pip{width:23px;height:29px;object-fit:contain;mix-blend-mode:multiply}.pip.face{padding:0;flex:1;min-height:0}.pip .painted-figure{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.card .pip{height:auto;flex:1;min-height:0;max-height:calc(100% - 26px)}.card:not(.preview):disabled{opacity:.9}.capture-pile .pip .painted-pip{width:11px;height:15px}.capture-pile .card .pip{max-height:calc(100% - 20px)}#my-hand .pip .painted-pip{width:27px;height:35px}.card .tiny-name{font-size:6px;bottom:17px;background:#f3e2bfdd;padding:0 2px}.card .pip.face{padding-bottom:6px}@media(max-width:750px){.pip .painted-pip{width:16px;height:20px}#my-hand .pip .painted-pip{width:21px;height:27px}.card .tiny-name{font-size:5px;bottom:13px}.card .pip{max-height:calc(100% - 22px)}}

.card .pip:not(.face){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1px;align-items:center;justify-items:center;width:100%;min-height:0}.card .pip .painted-pip,#my-hand .pip .painted-pip,.capture-pile .pip .painted-pip{width:100%;height:100%;min-height:0;object-fit:contain}.card .pip .painted-figure{min-height:0;display:block}