/* One authored widescreen stage. Mobile has its own composition below. */
:root{--gold:#d6ae63;--ink:#f0dbb3;--muted:#c8b58b;--card-w:145px;--card-h:217.5px}
body{color:var(--ink);background:#100d09}.grain,body::before{display:none!important}
.ui-icon{display:inline-block;width:30px;height:38px;background:url('/ui-icons.png') 0 0/400% 300%;vertical-align:middle;flex-shrink:0;pointer-events:none}.icon-spade{background-position:0 0}.icon-heart{background-position:33.333% 0}.icon-club{background-position:66.667% 0}.icon-diamond{background-position:100% 0}.icon-sound{background-position:0 50%}.icon-mute{background-position:33.333% 50%}.icon-book{background-position:66.667% 50%}.icon-menu{background-position:100% 50%}.icon-close{background-position:66.667% 100%}.icon-cards{background-position:100% 100%}
body.in-game{height:100dvh;min-height:0;overflow:hidden;background:#101b15}
body.in-game main{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);padding:0!important;z-index:2;pointer-events:none;container-type:size}
body.in-game header{display:flex!important;position:fixed;top:calc((100dvh - min(100dvh,56.25vw))/2 + 14px);right:calc((100vw - min(100vw,177.7778dvh))/2 + 18px);width:auto;height:48px;padding:0;z-index:40}
.in-game .brand,.in-game #rules,.in-game .connection,.in-game header .subtle,.in-game footer{display:none!important}.in-game .header-right{gap:8px}.in-game #sound{margin-right:61px;width:48px;height:48px;border:2px ridge #b58e48;background:radial-gradient(#493720,#17130c);box-shadow:0 3px 12px #000}
body.in-game .game{position:relative!important;display:block!important;isolation:auto;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:radial-gradient(ellipse,#2b3e28,#111b12)!important;box-shadow:none!important;overflow:hidden}
html.webgl-table body.in-game .game{background:transparent!important}.table-world{position:fixed;z-index:1;pointer-events:none;display:block;background:#101b15}.game::before,.table-outline{display:none!important}
.game button,.game .card{pointer-events:auto}.game button{touch-action:manipulation}.game .game-top{position:absolute;top:14px;right:18px;width:48px!important;height:48px!important;padding:0;z-index:40}.game .table-label,.game #invite,.game #history,.game #leave-game{display:none!important}.game .game-menu{display:flex!important;align-items:center;justify-content:center;width:48px;height:48px;padding:0;font-size:0;border-radius:50%;border:2px ridge #b58e48;background:radial-gradient(#493720,#17130c);box-shadow:0 3px 12px #000}.game-menu .ui-icon{width:30px;height:38px}
.game .opponents,.game:has(.opponent:only-child) .opponents{position:absolute!important;left:26%!important;right:23%!important;top:1.5%!important;height:28%;min-height:0!important;display:flex!important;align-items:flex-start;justify-content:space-evenly;padding:0!important;gap:2%!important;z-index:5}
.game .opponent,.game .opponent:only-child,.game:has(.opponent:nth-child(3)) .opponent{display:flex!important;flex-direction:column;align-items:center;min-width:0!important;max-width:16cqw!important;width:31%;position:relative;gap:0;grid-template:none!important}
.game .opponent-cards{position:relative;width:16cqw;height:8.7cqw;margin:0 auto;flex-shrink:0}.game .mini-back{position:absolute;left:calc(50% - 2.7cqw + (var(--i) - (var(--count) - 1)/2)*1.25cqw);top:.2cqw;width:5.4cqw;height:8.1cqw;border-radius:5%;background:url('/assets/imperial-back.jpg') center/cover;transform:rotate(calc((var(--i) - (var(--count) - 1)/2)*7deg));transform-origin:50% 125%}
.game .opponent-count{position:absolute;right:1.7cqw;bottom:-2.1cqw;z-index:3;border-radius:50%;width:2.2cqw;height:2.2cqw;display:grid;place-items:center;background:linear-gradient(#efd99a,#987238);color:#21150a;border:2px ridge #c6a05c;font:bold 1.25cqw "Literata", Georgia,serif;box-shadow:0 2px 4px #0009}
.game .opponent .portrait{display:block!important;width:7.5cqw;height:8.3cqw;margin-top:-4.7cqw;z-index:2;border:5px ridge #a47c3a;border-radius:49%;box-shadow:0 0 0 2px #241a0c,0 0 0 4px #77623b,0 7px 13px #000a,inset 0 0 15px #000;background-size:300% 100%;flex-shrink:0;background-position:0 0}

.game .opponent .name{font:1.55cqw/1.1 "Literata", Georgia,serif;width:100%;min-height:3.05cqw;text-align:center;padding:.72cqw .6cqw .58cqw;color:#f4dfb5;background:url('/assets/ornate-plaque.png') center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin-top:.2cqw}
.game .opponent .status{font:1.1cqw/1.2 "Literata", Georgia,serif;color:#c6b995;margin:.18cqw 0 0;text-shadow:0 2px 3px #000}
.game .opponent.active .portrait{border-color:#efc66c;box-shadow:0 0 0 3px #9c7134,0 0 19px #dba73d9c,0 4px 10px #000}.game .opponent.active .status{background:none;color:#ffe099;padding:0;letter-spacing:.04em}.game .opponent.active .name{filter:brightness(1.15)}
.game .table-stats{position:absolute!important;inset:25% 5.2% auto!important;width:auto!important;height:13%!important;padding:0!important;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;font:1.3cqw "Literata", Georgia,serif;color:#eedbb3;z-index:4}
.game .supply,.game .discard-count,.game .hand-meta{background:url('/assets/ornate-plaque.png') center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.game .supply{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:15.5cqw;min-width:0;margin-top:0;padding:1.05cqw 1.3cqw 1cqw}.game .supply>span:not(.supply-cards){display:flex;flex-direction:column;align-items:center;gap:.25cqw}.game .table-stats b{font:2.25cqw "Literata", Georgia,serif;color:#e9ba62}
.game .supply-cards{position:absolute;bottom:94%;left:1.8cqw;width:12cqw;height:8.5cqw}.game .supply-cards .card{position:absolute;width:6.1cqw;height:9.15cqw;left:0;top:0}.game .supply-cards .back{transform:rotate(-8deg)}.game .supply-cards .trump{left:5cqw;top:1.5cqw;transform:rotate(12deg)}
.game .discard-count{display:flex;flex-direction:column;align-items:center;gap:.3cqw;width:11.5cqw;min-width:0;padding:1.3cqw 1.25cqw}.game .trump-badge .ui-icon{width:2cqw;height:2.5cqw}
.game .play-area{position:absolute!important;left:23%;right:22%;top:31%;bottom:40%;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important;display:flex;align-items:center!important;justify-content:center;z-index:3}
.game .battles{display:grid!important;grid-template-columns:repeat(var(--columns,1),200px)!important;grid-auto-rows:270px;gap:16px!important;width:var(--table-width,200px)!important;height:var(--table-height,270px)!important;max-width:none!important;flex-shrink:0;transform:scale(var(--table-scale,1));transform-origin:center;place-items:center}.game .battles[data-pairs="0"]{display:flex!important;transform:none;width:100%!important;height:100%!important}.game .battle{position:relative;width:200px!important;height:270px!important}.game .battle .card{position:absolute;width:160px!important;height:240px!important;left:0;top:0;transform:rotate(-4deg)}.game .battle .defense{left:30px!important;top:22px!important;transform:rotate(5deg)}.game .table-empty{font:1.6cqw/1.6 "Literata", Georgia,serif;text-align:center;color:#c5b98f;text-shadow:0 2px 5px #000}.game .table-empty .ornament{display:none}
.game .action-bar{position:absolute!important;left:27%;right:27%;top:58%;height:9.6%;width:auto!important;max-width:none!important;min-height:0!important;margin:0!important;padding:1cqw 2.3cqw!important;display:flex;gap:1cqw;border:0!important;border-radius:0!important;background:url('/assets/ornate-plaque.png') center/100% 100% no-repeat!important;box-shadow:none!important;z-index:6}
.game .action-bar:before,.game .action-bar:after{display:none!important}.game .turn-text{font:1.65cqw/1.1 "Literata", Georgia,serif;text-align:center;color:#f5dfb0;min-width:0;flex:1}.game .turn-text small{font:1.15cqw/1.25 "Literata", Georgia,serif;color:#d6bc8e;margin-top:.3cqw;display:block}.game .actions{flex-shrink:0;display:flex}.game .actions:empty{display:none}
.game .actions button,.game .hand-tools button{min-height:3.25cqw;font:1.3cqw "Literata", Georgia,serif;padding:.8cqw 1.5cqw;color:#f8e4bd;background:linear-gradient(#34402b,#10180e);border:3px ridge #a88544;border-radius:9px;box-shadow:0 3px 7px #000a,inset 0 0 0 2px #1c1a0f;transition:filter .15s,translate .12s;white-space:nowrap}.game .actions button:hover,.game .hand-tools button:hover{filter:brightness(1.2)}.game .actions button:active,.game .hand-tools button:active{translate:0 2px}
.game .hand-area{position:absolute!important;inset:67% 3% 0!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;min-height:0;z-index:7}.game .hand-viewport{position:absolute;inset:0 16% 0;width:auto!important;height:auto!important;overflow:visible!important;padding:0;mask-image:none}.game .hand{position:relative;height:100%!important;max-width:none!important;margin:0!important}
.game .hand .card{--card-w:11.1cqw;--card-h:calc(var(--card-w)*1.5);position:absolute;left:calc(50% - var(--card-w)/2);bottom:7.5%;transform:translate(var(--x),var(--y)) rotate(var(--r));transform-origin:50% 110%;transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:var(--z)}
.game .hand .card:hover{z-index:99}.game .hand .card.playable{box-shadow:0 0 0 2px #e6d284}.webgl-table .game .card{transition:none!important}
.game .hand-toolbar{position:absolute;inset:auto 0 5%;height:6cqw;min-height:0!important;padding:0;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;z-index:15}.game .hand-meta{display:flex;flex-direction:column;gap:.3cqw;min-width:0;width:15.5cqw;padding:1.15cqw 1.5cqw;align-items:center}.game .hand-meta strong{font:1.2cqw "Literata", Georgia,serif}.game .hand-meta>span{display:block!important;font:1.4cqw "Literata", Georgia,serif}.game .hand-tools button{pointer-events:auto;padding:1.2cqw 2.5cqw;background:url('/assets/ornate-plaque.png') center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0}.game .your-turn-label,.game .hand-bottom,.game .hand-scroll{display:none!important}
.card{border:0;border-radius:4.8%;overflow:hidden;background:#efdfba}.card-art{width:100%;height:100%;display:block;image-rendering:auto;background:none!important;object-fit:fill}.webgl-table .game .card,.webgl-table .game .mini-back,.webgl-table .drag-ghost{opacity:0!important}.webgl-table .game .card:focus-visible{outline:3px solid #fff3af;opacity:.12!important}.game .result{position:absolute!important;inset:0;z-index:50;pointer-events:auto}
/* Narrow portrait phones use the full viewport and legible controls. */
@media(max-width:900px) and (orientation:portrait){
 body.in-game main{width:100vw;height:100dvh}body.in-game header{top:8px;right:8px;height:42px}.in-game #sound{margin-right:49px;width:42px;height:42px}.game .game-top{top:8px;right:8px;width:42px!important;height:42px!important}.game .game-menu{width:42px;height:42px}.game .game-menu .ui-icon,.in-game #sound .ui-icon{width:25px;height:32px}
 .game .opponents,.game:has(.opponent:only-child) .opponents{left:3%!important;right:3%!important;top:9%!important;height:21%;gap:1%!important}.game .opponent,.game .opponent:only-child,.game:has(.opponent:nth-child(3)) .opponent{width:32%;max-width:130px!important}
 .game .opponent-cards{width:26cqw;height:15cqw}.game .mini-back{width:11cqw;height:16.5cqw;left:calc(50% - 5.5cqw + (var(--i) - (var(--count) - 1)/2)*1.6cqw)}.game .opponent .portrait{width:16cqw;height:18cqw;margin-top:-4cqw;border-width:3px;box-shadow:0 0 0 2px #675535,0 4px 8px #000}.game .opponent-count{width:23px;height:23px;font-size:14px;bottom:-10cqw;right:0}.game .opponent .name{font-size:15px;min-height:34px;padding:9px 3px}.game .opponent .status{font-size:12px;margin-top:1px}
 .game .table-stats{inset:32% 3% auto!important;height:6%!important;font-size:13px}.game .supply{width:53cqw;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:12px}.game .supply>span:not(.supply-cards){flex-direction:row;gap:5px}.game .table-stats b{font-size:19px}.game .supply-cards{display:none}.game .discard-count{width:31cqw;padding:10px 13px;flex-direction:row;justify-content:center;gap:5px}.game .trump-badge .ui-icon{width:19px;height:25px}
 .game .play-area{left:5%;right:5%;top:39%;bottom:38%}.game .table-empty{font-size:17px}.game .action-bar{left:2%;right:2%;top:63%;height:11%;padding:12px 20px!important;gap:8px}.game .turn-text{font-size:20px}.game .turn-text small{font-size:13px;line-height:1.25;margin-top:4px}.game .actions button{font-size:15px;min-height:44px;padding:8px 11px}
 .game .hand-area{inset:75% 2% 0!important}.game .hand-viewport{inset:0 3% 47px!important}.game .hand .card{--card-w:min(25cqw,14.5cqh);bottom:5px}.game .hand-toolbar{height:44px;bottom:4px;align-items:center}.game .hand-meta{width:auto;flex-direction:row;gap:5px;padding:12px 16px}.game .hand-meta strong,.game .hand-meta>span{font-size:12px}.game .hand-tools button{min-height:44px;font-size:14px;padding:12px 19px}
}
@media(max-height:650px) and (orientation:portrait){.game .opponents,.game:has(.opponent:only-child) .opponents{top:8%!important}.game .opponent .portrait{width:13cqw;height:14cqw}.game .opponent-cards{height:13cqw}.game .opponent .name{font-size:14px}.game .opponent .status{font-size:11px}}
@media(prefers-reduced-motion:reduce){.game *{animation:none!important;transition:none!important}}

.game .action-bar{top:57.5%;height:10.5%;background:none!important;border:18px solid transparent!important;border-image:url(/assets/ornate-plaque.png) 170 235 165 235 fill / 18px 27px / 0 stretch!important;padding:0 12px!important}
.game .turn-title{font-size:inherit!important}.game .game-menu{font-size:0!important;padding:0!important}
@media(max-width:900px) and (orientation:portrait){.game .action-bar{top:63%;height:11%;padding:0 4px!important;border-width:13px!important;border-image-width:13px 22px!important}.game .opponent .name{max-width:100%}.game .hand .card{bottom:5px}}

@media(max-height:650px) and (orientation:portrait){.game .table-stats{inset:30% 3% auto!important}.game .play-area{top:37%;bottom:43%}.game .action-bar{top:58%;height:12%}.game .hand-area{inset:72% 2% 0!important}.game .hand .card{--card-w:min(25cqw,13.5cqh)}}
@media(max-height:500px) and (orientation:landscape){
 .game .opponent .name{font-size:14px}.game .opponent .status{font-size:11px}.game .opponent-count{width:20px;height:20px;font-size:13px}.game .table-stats{font-size:12px}.game .table-stats b{font-size:18px}
 .game .action-bar{top:57%;height:15%;border-width:12px!important;border-image-width:12px 20px!important;padding:0 4px!important;left:22%;right:22%}.game .turn-text{font-size:16px}.game .turn-text small{font-size:11px}.game .actions button{font-size:13px;min-height:32px;padding:5px 9px;border-width:2px}
 .game .hand-area{inset:73% 3% 0!important}.game .hand .card{--card-w:min(10.8cqw,17cqh);bottom:14%}.game .hand-meta strong,.game .hand-meta>span{font-size:11px}.game .hand-tools button{font-size:12px;min-height:35px;padding:8px 17px}
 .game .game-top{top:7px;right:8px}.game .game-menu,.in-game #sound{width:36px;height:36px;min-height:36px}.in-game #sound{margin-right:45px}.game-menu .ui-icon,.in-game #sound .ui-icon{width:23px;height:30px}body.in-game header{top:calc((100dvh - min(100dvh,56.25vw))/2 + 7px);right:calc((100vw - min(100vw,177.7778dvh))/2 + 8px)}
}
/* The lobby and menus belong to the same material palette as the board. */
body:not(.in-game){background:#101b15}
.home .panel,.waiting .panel,dialog{background:linear-gradient(#211c13ed,#100f0aed),url('/assets/table-v72/walnut.webp') center/cover;border-color:#937644;box-shadow:0 14px 60px #0008,inset 0 0 0 4px #1b170f;border-radius:12px}
.home h1{color:#f2ddba;text-shadow:0 3px 18px #0006}.home .eyebrow,.welcome .deck-caption{color:#c5a468}.home .segmented{background:#100f0b}.home .segmented .active{background:#4b442d}.table-menu button{background:#252b1c;border-color:#8c774c;color:#efdab5}.waiting .code{color:#edcd83}.waiting .avatar{background:#302717;border-color:#9a7d45}.result .panel{background:linear-gradient(#322619,#13160e);border-color:#b29253}.in-game #toast{bottom:14px}