.theme-picker{border:0;padding:0;margin:14px 0;color:inherit}.theme-picker legend{font-weight:bold;font-size:15px;margin-bottom:8px}.theme-picker>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-picker button{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #91aaa0;border-radius:10px;background:transparent;color:inherit;font-size:13px;padding:10px 5px}.theme-picker button[aria-pressed=true]{outline:2px solid #c6a365;outline-offset:1px;font-weight:bold}.theme-swatch{width:20px;height:20px;flex:none;border-radius:6px;border:1px solid #888}.theme-swatch-1{background:linear-gradient(135deg,#123d32 60%,#c6a365 60%)}.theme-swatch-3{background:linear-gradient(135deg,#167d8d 60%,#f17860 60%)}
/* Consistent icon boxes; preserve the existing symbols and button positions. */
.side-menu>button .icon,.side-menu>button .question,#exit>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;min-width:26px;padding:0;margin:0;line-height:1;font-size:26px;vertical-align:middle}
.side-menu>button .question{font-size:21px}
.side-menu>button .action-icon,#exit .action-icon{width:24px;height:24px;flex:none}
@media(max-width:900px){.side-menu>button .icon,.side-menu>button .question,#exit>span{flex-basis:22px;width:22px;height:22px;min-width:22px;font-size:22px}.side-menu>button .question{font-size:18px}.side-menu>button .action-icon,#exit .action-icon{width:21px;height:21px}}
@media(max-width:700px){.side-menu>button{justify-content:center;align-items:center;gap:0}.side-menu>button .icon,.side-menu>button .question,#exit>span{flex-basis:20px;width:20px;height:20px;min-width:20px;font-size:21px}.side-menu>button .question{font-size:17px}.side-menu>button .action-icon,#exit .action-icon{width:20px;height:20px}}

/* Shared brand geometry and controls for both atmospheres. */
/* Legible controls and a quiet surface behind the brand over detailed scenery. */
#play{font-family:ShaddetnaBrand,Tahoma,Arial,sans-serif;font-weight:700;font-size:18px;line-height:1.35;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;gap:0}
#play #play-label{font-family:inherit;font-size:inherit;line-height:inherit;white-space:normal;text-wrap:balance}
html[lang=en] #play{font-size:16px;letter-spacing:.1px}
.sidebar .brand{background:#102b24ed;border:1px solid #c6a36555;border-radius:16px;padding:8px 6px;box-shadow:0 3px 12px #0002}
html[data-theme="3"] .sidebar .brand{background:#fff8eaf5;border-color:#d8c6a3;box-shadow:0 3px 12px #15354220}
.table-label.with-brand>span{display:block;width:104px;height:104px;margin:0 auto 8px;background:url('assets/brand/shaddetna-icon-v1.png') center/contain no-repeat;border-radius:20%;font-size:0;opacity:.2;filter:grayscale(.5);pointer-events:none}
@media(max-width:700px){#play{padding:8px 10px;font-size:17px}html[lang=en] #play{font-size:15px}.sidebar .brand{padding:0 3px;border-radius:9px}.table-label.with-brand>span{width:76px;height:76px}}
@font-face{font-family:ShaddetnaBrand;src:url('assets/brand/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.sidebar .brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.sidebar .brand .brand-mark{display:block;width:48px;height:48px;flex:0 0 auto;margin:0}
.sidebar .brand h1{width:100%;height:58px;margin:0;line-height:1;font-size:initial;letter-spacing:normal}
.brand-wordmark{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.brand-wordmark text{font-family:ShaddetnaBrand,Tahoma,sans-serif;font-weight:700;font-size:45px;letter-spacing:0}
html[lang=en] .brand-wordmark text{font-size:32px}
.sidebar .brand p{margin:0;font-size:13px}
.side-menu #profile{order:0}.side-menu #invite{order:1}.side-menu #bots{order:2}.side-menu #sound{order:3}.side-menu #help{order:4}
@media(max-width:700px){
 .sidebar{top:1px;height:42px;align-items:center}
 .sidebar .brand,html[lang=en] .sidebar .brand{width:105px;height:42px;flex-shrink:0;gap:0;justify-content:flex-start}
 .sidebar .brand .brand-mark,html[lang=en] .sidebar .brand .brand-mark{width:23px;height:23px;flex:0 0 23px;margin:0}
 .sidebar .brand h1,html[lang=en] .sidebar .brand h1{width:94px;height:23px;margin-top:-3px;font-size:initial;letter-spacing:normal;line-height:1}
 .brand-wordmark text{font-size:45px}html[lang=en] .brand-wordmark text{font-size:33px}
 .sidebar .brand p{display:none}
}
@media(min-width:901px){.play-controls #play{min-height:56px;font-size:20px}html[lang=en] .play-controls #play{font-size:18px}}
.invite-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.invite-modes button{padding:11px 8px;border-radius:10px;border:1px solid #91aaa0;background:transparent;color:inherit;font-family:ShaddetnaBrand,Tahoma,sans-serif;font-weight:700}.invite-modes button[aria-pressed=true]{background:#167d8d;color:#fff;border-color:#167d8d}#invite-qr-panel{text-align:center}#invite-qr-panel[hidden],#invite-send-panel[hidden]{display:none}.invite-qr-code{width:min(248px,100%);margin:14px auto;background:#fff;border-radius:12px;padding:4px}.invite-qr-code svg{display:block;width:100%;height:auto}#invite-qr-panel p{font-size:14px;line-height:1.6}
.table-label.trix-brand{top:34%;pointer-events:none}.table-label.trix-brand p,.table-label.trix-brand small{display:none}@media(max-width:700px){.table-label.trix-brand{top:36%}}
.invite-share-actions #invite-qr-mode{flex:0 0 52px;padding:10px}.invite-share-actions #invite-qr-mode[aria-expanded=true]{background:#167d8d;border-color:#167d8d}#invite-send-panel.showing-qr>label,#invite-send-panel.showing-qr>input,#invite-send-panel.showing-qr>#copy-invite,#invite-send-panel.showing-qr>p{display:none}
.brand-mobile-name{display:none}@media(max-width:700px){.sidebar .brand h1 .brand-wordmark{display:none}.sidebar .brand h1 .brand-mobile-name{display:block;font-family:ShaddetnaBrand,Tahoma,Arial,sans-serif;font-size:19px;font-weight:700;line-height:23px;letter-spacing:0;white-space:nowrap;text-align:center;direction:rtl}.sidebar .brand h1{overflow:visible}html[lang=en] .sidebar .brand h1 .brand-mobile-name{font-size:16px;direction:ltr}}
/* Keep the mobile icon and wordmark in separate rows, including larger system text. */
@media(max-width:700px){
 .sidebar .brand,html[lang=en] .sidebar .brand{height:42px;padding:2px 4px;gap:2px;justify-content:center;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .sidebar .brand .brand-mark,html[lang=en] .sidebar .brand .brand-mark{width:17px;height:17px;flex:0 0 17px}
 .sidebar .brand h1,html[lang=en] .sidebar .brand h1{height:17px;min-height:17px;flex:0 0 17px;margin:0;width:100%;line-height:17px}
 .sidebar .brand h1 .brand-mobile-name{font-size:16px;line-height:17px}
 html[lang=en] .sidebar .brand h1 .brand-mobile-name{font-size:14px;line-height:17px}
}
/* Layout audit: consistent readable surfaces, compact dialogs, and contained artwork. */
html[data-theme="3"] .contract-owner b,html[data-theme="3"] .contract-trump b,html[data-theme="3"] .contract-progress,html[data-theme="3"] .contract-progress span{color:#153542}
html[data-theme="3"] .contract-trump b.warm{color:#a12f27}
html[data-theme="3"] #modal .note,html[data-theme="3"] .auction .bid-history,html[data-theme="3"] .round-points small{color:#49646a}
html[data-theme="3"] .trump-options button{background:#e4f2ee;color:#153542;border-color:#167d8d}
html[data-theme="3"] .trump-options button .red{color:#a12f27}
html[data-theme="3"] .round-points strong{color:#153542}
html[data-theme="3"] .match-finish{background:linear-gradient(145deg,#fffdf7,#fff5e8);color:#153542;border-color:#167d8d}
html[data-theme="3"] .match-finish p,html[data-theme="3"] .match-finish h3{color:#365f64}
html[data-theme="3"] .finish-scores li{border-color:#167d8d40;background:#e4f2ee}
html[data-theme="3"] .finish-scores .winner{border-color:#167d8d;background:#d6eee7}
html[data-theme="3"] .match-finish .secondary{color:#153542;background:#e4f2ee;border-color:#167d8d70}
html[lang="en"] .match-finish{direction:ltr}
#modal-body>h2{padding-inline:30px;overflow-wrap:anywhere}
#modal .close{width:32px;height:32px;display:grid;place-items:center;line-height:1;z-index:2}
.avatar-choices{justify-content:center;gap:8px;flex-wrap:wrap}.avatar-choices .avatar{flex:0 0 46px;width:46px;height:46px}
@media(max-width:700px){
 #modal{width:calc(100vw - 20px);padding:18px;max-height:calc(100dvh - 20px)}
 #modal .close{top:12px;left:12px}#modal-body>h2{font-size:22px;line-height:1.35;margin:5px 0 16px}
 #game-lobby .lobby-fan{height:76px;flex:none}
 #game-lobby .lobby-fan img{width:36px;top:4px}
 #game-lobby .lobby-games strong{position:relative;display:block;line-height:1.2;margin-top:3px}
}
@media(max-width:700px) and (max-height:650px){#game-lobby .lobby-fan{height:66px}#game-lobby .lobby-fan img{width:31px}#game-lobby .lobby-games strong{font-size:17px}}
@media(min-width:701px) and (max-width:1100px){.west{left:26%}.east{left:74%}}
#contract-summary .contract-owner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Short landscape screens need separate lanes for seats, cards and controls. */
@media(min-width:560px) and (max-width:1100px) and (max-height:500px){
 .game-shell{height:var(--visible-height,100dvh);min-height:0;max-height:none}
 .seat{min-width:76px}.seat .avatar{display:block;width:38px;height:38px}.seat strong{min-width:76px;max-width:100px;font-size:11px;padding:3px 5px}.seat .count{font-size:10px;padding:2px 5px}
 .seat.north{top:8px;left:50%}.seat.south{display:flex;left:50%;bottom:90px}.seat.south strong{display:block}.west{left:26%;top:40%}.east{left:74%;top:40%}
 .seat .back-stack{--back-width:24px;--back-step:3px!important;height:35px}.seat.north .back-stack{top:10px;left:calc(100% + 8px)}
 .seat.west .back-stack,.seat.east .back-stack{top:auto;bottom:calc(100% + 10px)}
 .hand{left:50%;bottom:4px;width:45%;height:74px;--card-width:42px;padding:6px 0}.hand .card{height:63px}
 #trick .card{top:43%;width:45px;height:64px}#trick .p2{transform:translate(-50%,-100%)}#trick .p0{transform:translate(-50%,0)}#trick .p1{transform:translate(-150%,-50%)}#trick .p3{transform:translate(50%,-50%)}
 .score{left:8px;top:45px;width:145px;max-width:20%;padding:7px}.score-teams b{font-size:20px}.score-teams>div{font-size:12px}.score-caption,.mode-note{font-size:10px;margin:3px 0;padding:3px 0}
 .exit{left:8px;top:5px;padding:4px 9px;font-size:12px;min-height:30px}
 .sidebar{right:8px;top:5px;left:auto;width:145px;height:auto;display:block}.sidebar .brand{width:100%;height:49px;padding:3px;margin:0 0 5px;gap:2px}.sidebar .brand .brand-mark{width:22px;height:22px;flex-basis:22px}.sidebar .brand h1{height:18px;margin:0}.sidebar .brand h1 .brand-wordmark{display:none}.sidebar .brand h1 .brand-mobile-name{display:block;font:700 16px/18px ShaddetnaBrand,Tahoma,sans-serif}.sidebar .brand p{display:none}
 .side-menu{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px}.side-menu>button{width:32px;height:32px;min-height:32px;padding:4px;justify-content:center}.side-menu>button .label,.side-menu .switch{display:none}
 .play-controls{left:auto;right:8px;bottom:8px;width:145px;gap:4px}.play-controls>button{min-height:30px;padding:4px;font-size:11px}.play-controls #play,html[lang=en] .play-controls #play{min-height:36px;font-size:14px;padding:4px}.play-controls #undo{display:none}
 .reaction-panel{left:8px;bottom:8px;width:145px;padding:6px}.reactions button{height:28px;min-height:28px;font-size:10px}.reactions button span{font-size:16px}#reaction-toggle{font-size:11px;padding-bottom:4px}
 #trix-board{top:43%;width:190px}.table-label.trix-brand{top:28%}.table-label.with-brand>span{width:52px;height:52px}.table-label p{font-size:12px}
 .auction{top:44%;width:250px;max-height:60vh;overflow:auto;padding:10px}.auction h2{font-size:18px}
}
@media(min-width:560px) and (max-width:1100px) and (max-height:500px){.reactions{grid-template-columns:repeat(2,minmax(0,1fr))}.reactions button{font-size:10px;gap:3px}.seat .player-crown{font-size:22px;top:-14px}.seat.south .player-crown{top:-12px}}
@media(min-width:560px) and (max-width:1100px) and (max-height:500px){#trick .card{top:38%}.seat.south{bottom:82px}}
@media(min-width:560px) and (max-width:1100px) and (max-height:359px){.game-shell{zoom:.82;width:121.95122%;height:calc(var(--visible-height,100dvh) / .82)}}
@media(min-width:560px) and (max-width:1100px) and (max-height:500px){.score{right:auto}.play-controls{display:flex;flex-direction:column}.sidebar .side-menu>button>span:not(.icon):not(.question){font-size:0}}
@media(min-width:560px) and (max-width:1100px) and (max-height:359px){.game-shell{width:100%}}
/* Phone controls: a single recognizable sorting icon, with an accessible name. */
@media(max-width:700px),(pointer:coarse) and (max-height:500px){
 .play-controls #sort .sort-label{display:none}
 .play-controls #sort{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:0;width:47px;min-width:44px;min-height:44px;padding:8px}
 .play-controls #sort .sort-cards-icon{width:28px;height:27px;flex:none}
}
#modal-body>h2{padding-inline:40px}
@media(max-width:700px){html[lang=en] #modal-body>h2{font-size:20px}}
/* The game summary is information only; leaving the table uses Exit. */
#choose-game{cursor:default}
@media(max-width:700px){#choose-game:after{content:'اللعبة'}html[lang=en] #choose-game:after{content:'Game'}}
/* Real-device regression: reserve the actual gap between the two central seats. */
@media(min-width:701px),(min-width:560px) and (max-height:500px){
 #trick .card{top:var(--safe-centre-y,46%);height:var(--safe-trick-height,110px);width:calc(var(--safe-trick-height,110px) / 1.42)}
 #trix-board{top:var(--safe-centre-y,49%);transform:translate(-50%,-50%) scale(var(--safe-board-scale,1));transform-origin:center}
 .table-label.trix-brand{top:var(--safe-brand-y,30%)}
 .game-shell.tight-trix .table-label.trix-brand{visibility:hidden}
 .sidebar .brand p{font-size:clamp(12px,1.1vw,15px);line-height:1.45;letter-spacing:0}
}
@media(min-width:701px) and (max-height:800px) and (min-height:501px){
 .seat.north{top:4%}.seat.north .avatar{width:58px;height:58px}.seat.south .avatar{width:50px;height:50px}
 .seat.north strong,.seat.south strong{font-size:14px;padding:4px 8px;min-width:96px;max-width:130px}
 .seat.north .count{font-size:12px;padding:3px 8px}
 .seat.south .player-crown{font-size:26px;top:-18px}
}
@media(max-width:700px){
 #choose-game{display:none}
 #individual-scores{gap:0;width:100%;flex:1 1 100%;overflow:hidden}
 #individual-scores>div{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:1px 4px;overflow:hidden}
 #individual-scores>div+div{border-inline-start:1px solid #9ba8ae55}
 #individual-scores span{flex:none;width:100%;font-size:11px;line-height:1.35;text-align:center}
 #individual-scores b{font-size:15px;line-height:1.2;white-space:nowrap}
}
@media(min-width:701px) and (min-height:501px) and (max-height:680px){
 .sidebar .brand{margin-bottom:8px;padding:5px}.sidebar .brand .brand-mark{width:32px;height:32px}.sidebar .brand h1{height:40px}.sidebar .brand p{font-size:12px}
 .side-menu{gap:6px}.side-menu>button{min-height:34px;padding:6px;font-size:12px}.side-menu .sound{font-size:12px}.side-menu .icon,.side-menu .question{transform:scale(.85)}
}

@media(min-width:701px) and (max-width:900px) and (min-height:801px){.seat.west{left:18%}.seat.east{left:82%}}
@media(min-width:701px),(min-width:560px) and (max-height:500px){#trix-board{width:min(250px,var(--safe-board-width,250px))}}
/* Remove the redundant caption below the player's cards in both themes. */
.table-footer{display:none!important}
/* Compact desktop reactions, leaving room below the neighbouring player's count. */
@media(min-width:701px) and (min-height:501px){
 .reaction-panel,.reaction-panel.collapsed{padding:8px}
 #reaction-toggle{font-size:14px;line-height:20px;padding:0 0 5px;min-height:0}
 #reaction-toggle .chevron{font-size:18px;line-height:20px}
 .reactions{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .reactions button{height:32px;min-height:32px;padding:4px 5px;font-size:14px;line-height:18px;gap:4px;flex-direction:row;white-space:nowrap}
 .reactions button span{font-size:19px;line-height:20px}
}
/* Keep the score below Exit even when tablet browser chrome reduces the height. */
@media(min-width:701px) and (min-height:501px){.score{top:max(10%,var(--score-safe-top,80px))}}

/* Phone reactions sit beside the central players, outside the Trix columns. */
@media(max-width:700px) and (min-height:501px),(max-width:559px){
 .south .speech,.south .seat-message,.north .seat-message{
  top:auto;bottom:8px;transform:none;white-space:normal;text-align:center;
  width:max-content;max-width:calc(50vw - 66px);padding:6px 9px;
  font-size:13px;line-height:1.35;border-radius:12px;
 }
 .south .speech,.south .seat-message{left:calc(100% + 8px);right:auto}
 .north .seat-message{left:auto;right:calc(100% + 8px)}
 .south .speech:after,.south .seat-message:after,.north .seat-message:after{display:none}
 .west .seat-message,.east .seat-message{
  top:calc(100% + 8px);bottom:auto;max-width:20vw;white-space:normal;
  padding:5px;font-size:12px;line-height:1.35;text-align:center;
 }
 .west .seat-message:after,.east .seat-message:after{
  top:auto;bottom:100%;border:5px solid transparent;border-bottom-color:#fff4d7;
 }
}

/* Extra-short phone viewports still reserve space for the completed board. */
@media(max-width:559px) and (max-height:570px){
 #trix-board{top:var(--phone-trix-y,48%);transform:translate(-50%,-50%) scale(var(--phone-trix-scale,1));transform-origin:center}
 .south .speech,.south .seat-message{max-width:calc(30vw - 52px);font-size:12px;line-height:1.2;padding:5px;bottom:0}
 .west .seat-message,.east .seat-message{width:20vw;font-size:11px;line-height:1.1;padding:4px}
 .table-label.trix-brand{visibility:hidden}
}

/* Compact, readable reaction text on narrow phones. */
@media(max-width:360px){
 .seat .speech,.seat .seat-message{font-size:11px;line-height:1.25;padding:4px 5px}
}

/* Never let the table watermark touch Trix suit headers or the upper player. */
.game-shell .table-label.trix-brand{top:var(--trix-logo-top,34%);visibility:hidden}
.game-shell.trix-logo-fits .table-label.trix-brand{visibility:visible}

/* Short portrait phones: keep played cards clear of the local portrait. */
@media(max-width:559px) and (max-height:570px){
 #trick .card{top:var(--phone-trix-y,46%);height:var(--phone-trick-height,48px);width:calc(var(--phone-trick-height,48px)/1.42)}
}

@media(min-width:560px) and (max-height:500px){
 .south .speech,.south .seat-message{left:calc(100% + 8px);bottom:8px;transform:none;font-size:12px;padding:5px 8px;max-width:100px;white-space:normal}
 .south .speech:after,.south .seat-message:after{display:none}
 .west .seat-message,.east .seat-message{font-size:11px;max-width:80px;white-space:normal;padding:4px 6px}
}

@media(min-width:701px) and (min-height:501px){
 .south .speech,.south .seat-message{left:calc(100% + 10px);bottom:8px;transform:none;max-width:140px;white-space:normal;font-size:15px;padding:7px 10px}
 .south .speech:after,.south .seat-message:after{display:none}
}

/* Center the quiet table watermark in the available short-phone gap. */
@media(max-width:559px) and (max-height:570px){.table-label.with-brand:not(.trix-brand){top:calc(var(--phone-trix-y,46%) + 26px)}.table-label.with-brand:not(.trix-brand)>span{width:64px;height:64px}}