:root{color-scheme:light;font-family:Arial,sans-serif;color:#251f21;background:#f4efec}*{box-sizing:border-box}body{margin:0}main{max-width:900px;margin:auto;padding:24px;background:white;min-height:100vh}header>span{color:#585254;font-size:13px}h1{font-size:32px;margin:10px 0}h2{font-size:20px}p{line-height:1.7}button,input{font:inherit}button{min-height:44px;border:1px solid #ddd;border-radius:5px;padding:10px 16px;background:white;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #73a89a;outline-offset:3px}#create,button.primary{background:#73a89a;color:#fff;border-color:#73a89a}input{width:100%;direction:ltr;padding:12px;border:1px solid #ddd;border-radius:5px}.toolbar,.opponent,.table-label,.hand-label{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.game{border:1px solid #eae9ea;border-radius:12px;padding:16px}.cards{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:104px;align-items:center}#table{min-height:160px}.card{position:relative;width:58px;height:86px;border:1px solid #8293a9;border-radius:8px;background:white;padding:5px;font-size:18px;box-shadow:0 2px 6px #0001;text-align:left;direction:ltr;flex:none}.card.red{color:#e32b43;border-color:#e6a7b1}.card.selected{outline:3px solid #73a89a;outline-offset:2px}.card .pip{position:absolute;top:34px;left:22px;font-size:25px}.card .corner{position:absolute;top:4px;left:5px}.card .bottom{position:absolute;bottom:4px;right:5px;transform:rotate(180deg)}#played{text-align:center;margin:12px auto;min-height:20px}#played .card{display:inline-block;vertical-align:middle;margin:4px}#instruction{font-size:14px;color:#585254}#connection{font-size:14px;color:#585254}#error{color:#b10f2d}#log{padding-right:22px;line-height:1.8;font-size:14px}footer{border-top:1px solid #eee;margin-top:28px;padding-top:20px;font-size:13px;color:#585254;line-height:1.8}[hidden]{display:none!important}.chosen{background:#73a89a;color:white}.notice{padding:12px;border:1px solid #73a89a;border-radius:8px;text-align:center;color:#42796a;font-weight:bold}@media(max-width:360px){main{padding:16px}.card{width:54px;height:82px}.game{padding:10px}.cards{gap:6px}h1{font-size:28px}}

#dealer-label,#opening-specials,#redeal-notice{font-size:13px;line-height:1.7}.countdown{width:100%;text-align:center;font-size:28px;font-weight:600;color:var(--teal);padding:16px}#result textarea{width:100%;box-sizing:border-box;min-height:260px;font:12px/1.6 monospace;white-space:pre-wrap}#result summary{padding:14px 0;cursor:pointer}
.install-help{border:1px solid #eae9ea;border-radius:8px;padding:12px;margin:16px 0;font-size:14px}.install-help summary{cursor:pointer;min-height:32px}.saved-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}#saved-rooms{border:1px solid #eae9ea;border-radius:8px;padding:14px;margin:16px 0}#saved-rooms p{font-size:13px}

select{font:inherit;min-height:44px;padding:8px;border:1px solid #ddd;border-radius:5px}.language-label{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#translation-note{font-size:13px;background:#f4efec;padding:12px;border-radius:8px}

#mode-choice{display:flex;align-items:center;gap:12px;margin:18px 0;flex-wrap:wrap}#four-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.seat-info{font-size:12px;line-height:1.6;padding:8px;border:1px solid #ddd;border-radius:6px}.active-seat{border:2px solid #73a89a;background:#f2f8f5}.partner-seat{background:#f4efec}.invite-row{padding:12px 0;border-bottom:1px solid #eee}.invite-row p{margin:6px 0}.invite-row button{margin-top:8px}#four-start{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:390px){#four-seats{grid-template-columns:1fr}.seat-info{padding:5px 8px}}

#special-sharing{border-top:1px solid #ddd;margin-top:16px;padding-top:8px;font-size:13px}#special-sharing h3{font-size:15px}#share-buttons{display:flex;flex-wrap:wrap;gap:8px}
.praise{width:100%;text-align:center;font-weight:bold;color:#2f6f5f;font-size:18px;padding:6px;border:2px solid #73a89a;border-radius:10px;background:#eafaf4}

/* Basra table identity (forest felt, cream cards, gold accents). Presentation only. */
.game{background:radial-gradient(ellipse at 50% 45%,#21634b,#103b30);color:#fffdf3;border:1px solid #b7a374;border-radius:18px;box-shadow:0 6px 18px #12382b19;overflow:hidden}
.game .opponent{border-color:#ffffff25;color:#d3e3d6}.game p,.game small,.game .hand-label span,.game .table-label span{color:#d3e3d6}.game .table-label strong{color:#ede1bf}.game h2,.game h3{color:#fffdf3}
.game .hand-label{border-top:1px solid #ffffff25;padding-top:15px}
.toolbar #score{font-weight:700;color:#173c32;background:#edf1e9;border-radius:12px;padding:10px 16px}
.card{background:#fffcf5;border-color:#c2b894;box-shadow:0 3px 8px #001a1538}.card.red{border-color:#d8aaa4}.card.selected{outline:3px solid #ead79d;outline-offset:2px}
.game button{min-height:44px}.game button:focus-visible,.character-settings button:focus-visible{outline:3px solid #ead79d;outline-offset:3px}
.character-settings{margin:14px 0;border:1px solid #d6dfd1;border-radius:10px;padding:0 14px;background:#fffdf5}.character-settings summary{font-weight:600;min-height:44px;display:flex;align-items:center;cursor:pointer}
.character-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;flex-wrap:wrap}.character-choice>div{display:flex;gap:8px}
.character-choice button{min-height:44px;min-width:76px;border:1px solid #9fb2a0;background:#fff;border-radius:8px}.character-choice button[aria-pressed=true]{background:#164a3b;color:#fffcf5;border-color:#164a3b}
.character-storage{font-size:12px;color:#627262;line-height:1.6;margin:8px 0 12px}
.table-stage{position:relative;isolation:isolate;margin:0 -16px 8px;display:flex;align-items:center;justify-content:center;background:#13442f}
.table-stage.has-scene{aspect-ratio:3/2}
.table-stage .character-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;display:block;pointer-events:none}
.table-stage .character-scene[hidden]{display:none}
.table-stage #table{width:100%;min-height:160px;padding:6px 0}
.table-stage.has-scene #table{width:64%;min-height:0;padding:0}
#characters-line{margin:8px 0;font-size:13px;color:#d3e3d6}
@media(max-width:480px){.game{padding:12px 10px}.table-stage{margin-left:-10px;margin-right:-10px}.character-choice>strong{min-width:80px}}
.game .card{color:#251f21}.game .card.red{color:#e32b43}
.game #instruction,.game #basras,.game #redeal-notice,.game #opening-specials,.game #dealer-label{color:#e6efe5}.game #instruction{color:#ead79d}
.game .seat-info{background:#0f3a2e;color:#e6efe5;border:1px solid #ffffff30}.game .seat-info *{color:inherit}.game .active-seat{background:#164a3b;border:2px solid #ead79d;color:#fffcf5}

/* v25: table-only play. The screen is the felt; no viewport-dependent growth beyond one bounded box. */
body:not(.in-game) header,body:not(.in-game) .language-label,body:not(.in-game) #translation-note,body:not(.in-game) .install-help,body:not(.in-game) #connection{display:none}
body:not(.in-game) main{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;background:radial-gradient(ellipse at 50% 45%,#21634b,#103b30);color:#fffdf3}
body:not(.in-game) #lobby{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:340px}
body:not(.in-game) #lobby button{min-height:56px;font-size:20px;width:100%;border-radius:12px;background:#ead79d;color:#173c32;border-color:#ead79d;font-weight:700}
body:not(.in-game) #lobby #copy{background:transparent;color:#ead79d;border:1px solid #ead79d99;font-size:15px;min-height:44px;font-weight:400}
body:not(.in-game) #lobby p,body:not(.in-game) #error{color:#e6efe5;font-size:14px}
body:not(.in-game) #mode-choice{color:#e6efe5}
#wait-note{color:#e6efe5;font-size:18px;text-align:center;margin:0}
#saved-rooms{width:100%;max-width:340px;margin:0;border:1px solid #ead79d88;border-radius:12px;background:#0d3328;color:#fffdf3}
#saved-rooms>summary{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;color:#ead79d;list-style:none}
#saved-rooms>summary::-webkit-details-marker{display:none}
#saved-list{padding:0 10px 10px;display:flex;flex-direction:column;gap:8px}
body:not(.in-game) #saved-rooms .saved-row{display:flex;flex-direction:column;gap:6px}
body:not(.in-game) #saved-rooms button{background:#fffdf5;color:#173c32;border:1px solid #ead79d;min-height:48px;font-size:17px;width:100%}
body:not(.in-game) #saved-rooms .saved-row button+button{background:transparent;color:#ead79d;min-height:40px;font-size:14px}
.dealer-opts{width:100%;border:1px solid #ead79d66;border-radius:12px;color:#e6efe5}
.dealer-opts>summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ead79d;list-style:none;font-size:15px}
.dealer-opts>summary::-webkit-details-marker{display:none}
.dealer-opts label{display:flex;gap:8px;align-items:center;justify-content:center;padding:0 10px 12px;font-size:15px}
.dealer-opts select{font:inherit;padding:8px;border-radius:8px;min-height:40px}
/* play */
html:has(body.in-game),html:has(body.in-game) body{background:#0b2f23}
body.in-game main{max-width:none;padding:0;min-height:0;background:#0b2f23}
body.in-game header,body.in-game .language-label,body.in-game #translation-note,body.in-game .install-help,body.in-game #saved-rooms,body.in-game #connection[data-ok],body.in-game #connection:empty,body.in-game #dealer-label,body.in-game #opening-specials,body.in-game #redeal-notice,body.in-game #stock,body.in-game #opponent-count,body.in-game #sound-status:empty,body.in-game #instruction:empty,body.in-game #result:empty,body.in-game #played:empty,body.in-game #characters-line,body.in-game .hand-label,body.in-game #wait-note{display:none}
body.in-game #connection,body.in-game #error{position:fixed;left:8px;right:8px;bottom:8px;z-index:60;background:#fffdf5;color:#251f21;border-radius:8px;padding:6px 10px;font-size:13px;margin:0}
body.in-game #error:empty{display:none}
body.in-game #match{position:relative;padding:8px}
.settings{position:absolute;top:18px;left:18px;z-index:50}
.settings>summary{list-style:none;width:44px;height:44px;border-radius:50%;background:#fffdf5e6;color:#173c32;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 2px 8px #0004}
.settings>summary::-webkit-details-marker{display:none}
.settings-body{position:absolute;top:52px;left:0;width:min(88vw,360px);max-height:70dvh;overflow:auto;background:#fffdf5;color:#251f21;border-radius:12px;padding:12px;box-shadow:0 8px 28px #0006;text-align:right}
.settings-body h2{font-size:15px;margin:12px 0 6px}.settings-body ol{font-size:12px;line-height:1.6;padding-inline-start:20px;margin:0}
.settings-body button{min-height:44px}.settings-body .new-game{display:block;margin-top:12px;color:#164a3b}
.settings-body .character-settings{background:#fff}
body.in-game .game{position:relative;display:flex;flex-direction:column;height:calc(100dvh - 16px);min-height:420px;margin:0;padding:0;border:7px solid #6b3f1e;border-radius:34px;box-shadow:inset 0 0 0 2px #d9bf7a99,0 6px 20px #0006;background:radial-gradient(ellipse at 50% 45%,#1e7048,#0f4a30 70%,#0c3a27);overflow:hidden}
body.in-game .game>.opponent{position:absolute;top:16px;right:20px;margin:0;font-size:14px;color:#e6efe5;z-index:3}
body.in-game .game>.table-label{position:absolute;top:56px;left:0;right:0;margin:0;justify-content:center;z-index:3;pointer-events:none;color:#fffdf3;font-size:16px}
body.in-game .table-stage{position:relative;flex:1;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;aspect-ratio:auto}
body.in-game .table-stage .character-scene{display:none}
body.in-game .score-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;background:#ede4c4;color:#173c32;border-radius:999px;padding:6px 18px;font-weight:700;font-size:16px;white-space:nowrap}.score-badge:empty{display:none}
body.in-game .table-stage #table{width:100%;max-width:100%;min-height:0;padding:70px 76px 0;box-sizing:border-box;justify-content:center;align-content:center;gap:8px;margin:0}
body.in-game .table-stage .card{width:60px;height:90px}
body.in-game .table-stage .card .pip{top:36px;left:23px}
body.in-game .table-stage.has-scene::before,body.in-game .table-stage.has-scene::after{content:"";position:absolute;top:50%;width:84px;height:191px;margin-top:-80px;background-image:var(--scene);background-repeat:no-repeat;background-size:391px 260px;z-index:1;pointer-events:none}
body.in-game .table-stage.has-scene::before{left:0;background-position:0 -63.6px;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
body.in-game .table-stage.has-scene::after{right:0;background-position:-307px -63.6px;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent);mask-image:linear-gradient(270deg,#000 55%,transparent)}
body.in-game #played{position:absolute;left:0;right:0;bottom:150px;z-index:6;margin:0;min-height:0;color:#fffdf3;text-align:center}
body.in-game #hand{margin:0 0 8px;min-height:0;padding:0 8px;z-index:5}
body.in-game #hand .card{width:72px;height:106px}
body.in-game #hand .card .pip{top:42px;left:28px}
body.in-game #instruction{text-align:center;color:#fffdf3;margin:0 8px 8px;font-size:14px;z-index:5}
body.in-game #result{margin:0 8px 8px;background:#fffdf5;color:#251f21;border-radius:12px;padding:8px;z-index:5}
body.in-game #result details,body.in-game #result p:not(#round-countdown){display:none}
body.in-game #bottom{position:fixed;left:8px;right:8px;bottom:8px;z-index:60;background:#fffdf5;color:#251f21;border-radius:12px;padding:10px;text-align:center;box-shadow:0 6px 24px #0006}
body.in-game #bottom[hidden]{display:none}
body.in-game #special-sharing{margin:0 8px 8px;z-index:5;color:#fffdf3;text-align:center}
body.in-game #special-sharing h3,body.in-game #special-sharing p:not(#share-sent):not(#partner-share){display:none}
body.in-game #special-sharing p{font-size:12px;margin:2px}
/* 4 players: same table, no figures */
body.four-mode #four-seats{position:absolute;top:60px;left:8px;right:8px;display:flex;gap:6px;z-index:3}
body.four-mode .seat-info{flex:1;border:1px solid #ead79d66;border-radius:10px;padding:5px 3px;font-size:11px;text-align:center;color:#e6efe5;margin:0;line-height:1.3}
body.four-mode .seat-info.active-seat{border:2px solid #ead79d;background:#ffffff18}
body.four-mode .game>.table-label{top:122px}
body.four-mode .game>.opponent{display:none}
body.four-mode .table-stage #table{padding:150px 10px 0}
body.in-game .table-stage.has-scene::before{-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 50%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
body.in-game .table-stage.has-scene::after{-webkit-mask-image:linear-gradient(270deg,#000 50%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(270deg,#000 50%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
body.in-game .game>.table-label{top:62px}
body.in-game #played{bottom:190px}
body.in-game #played button{background:#fffdf5;color:#173c32;border:1px solid #ead79d;min-height:40px}
body.four-mode .game>.table-label{top:118px}
body.in-game .game>.table-label{top:70px}
body.four-mode .game>.table-label{top:122px}
body.four-mode .game>.table-label{top:150px}body.in-game #special-sharing{border-top:0}body.in-game #partner-share{display:none}
body.in-game .table-stage.has-scene::before,body.in-game .table-stage.has-scene::after{height:200px;margin-top:-95px}
body.in-game .table-stage.has-scene::before{background-position:0 -38px}
body.in-game .table-stage.has-scene::after{background-position:-307px -38px}
#start{display:flex;flex-direction:column;gap:12px;width:100%}

.dealer-opts.need{border-color:#ffd978;box-shadow:0 0 0 2px #ffd97866}
.need-txt{display:none}.need-txt::before{content:' · '}.dealer-opts.need .need-txt{display:inline;color:#ffd978}

body.in-game #result:empty{display:none}
.need-txt::before{content:'\00a0·\00a0'}
body.in-game #result:not(:has(> :not(details):not(p))):not(:has(> #round-countdown)){display:none}
body.in-game #share-buttons button{background:#ead79d;color:#173c32;border:0;border-radius:10px;padding:8px 12px;font-weight:700;min-height:40px;font-size:14px}
body.in-game #special-sharing{width:100%;display:flex;flex-direction:column;align-items:center}

/* Keep full-size table cards in a row on phones, without changing desktop. */
@media(max-width:767px){
body.in-game .table-stage.has-scene #table{padding-left:88px;padding-right:88px}
body.in-game .table-stage #table{padding:70px 8px 0;flex-wrap:wrap;align-content:center;justify-content:center;overflow-x:hidden;max-width:100%;gap:5px;position:relative;z-index:2}
body.in-game .table-stage #table .card{width:46px;height:70px;font-size:14px;padding:3px}
body.in-game .table-stage #table .card .pip{top:27px;left:17px;font-size:20px}
body.in-game .table-stage #table .card .corner{top:3px;left:4px}
body.in-game .table-stage #table .card .bottom{bottom:3px;right:4px}
body.four-mode .table-stage #table{padding-top:150px}
body.in-game .table-stage.has-scene::before,body.in-game .table-stage.has-scene::after{top:50%;opacity:.8}
body.in-game #hand{flex-wrap:nowrap;gap:4px;margin-bottom:14px}
}
@media(max-width:360px){body.in-game #match{padding:2px}body.in-game .game{border-width:4px;height:calc(100dvh - 4px)}body.in-game #hand{padding:0 4px;gap:2px}}

#last-deal-notice{position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:8;border:1px solid #ead79d;border-radius:999px;background:#f2dfad;color:#173c32;font:bold 17px/1.2 Arial,sans-serif;padding:7px 18px;white-space:nowrap;pointer-events:none}
body.four-mode #last-deal-notice{top:190px}
@media(max-width:767px){body.in-game .table-stage #table>.notice,body.in-game .table-stage #table>.praise{position:fixed;top:155px;left:10%;width:80%;z-index:9;pointer-events:none}body.in-game .table-stage #table>.countdown{position:fixed;top:180px;left:10%;width:80%;z-index:9}}

/* round-end inline breakdown + counters visibility */
.game #round-breakdown{padding:6px 12px;background:#0e392c;border:1px solid #cbb37466;border-radius:8px;color:#e6efe5;font-size:14px;line-height:1.6}
body.in-game .game>#round-breakdown{position:absolute;top:96px;left:14px;right:14px;z-index:5;margin:0;max-height:45%;overflow:auto;text-align:center}
.game #round-breakdown strong{color:#ead79d}
.game #round-breakdown p{margin:0}
.game #basras{margin:2px 8px;font-size:13px;line-height:1.5;text-align:center;white-space:normal;overflow-wrap:anywhere}

.game #result p,.game #result small,.game #bottom,.game #bottom p,.game #bottom small{color:#251f21}
.game #result #next-round{background:#164a3b;color:#fffcf5;border-color:#164a3b;font-weight:700;margin-top:6px}
body.four-mode.in-game .game>#round-breakdown{top:150px}
/* asset refresh 2026-10-31 */