/* The game is a viewport-sized app shell; only help dialogs scroll. */
:root{--app-height:100vh;--app-width:100vw;--shell-gap:8px;--header-height:54px}
@supports(height:100dvh){:root{--app-height:100dvh}}
html{height:100%;overflow:hidden}body{height:var(--app-height);width:100%;overflow:hidden;display:grid;grid-template-rows:var(--header-height) minmax(0,1fr);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:none}header{height:100%;min-height:0;max-width:none;width:100%;padding:4px 16px;gap:10px;flex-wrap:nowrap;overflow:hidden}.brand{font-size:20px;gap:4px;flex-shrink:0}.brand .logo{height:29px;width:27px;font-size:22px;margin-right:2px}.tag{margin-right:auto;font-size:11px}.language-switch{margin-left:auto;padding:2px}.language-switch button{min-height:34px;padding:4px 9px;font-size:11px}.icon{height:36px;width:36px;flex-shrink:0;margin:0}.quiet,.history-btn{height:36px;width:36px;padding:0!important;margin:0;flex-shrink:0;display:grid;place-items:center;border:1px solid #cbd4bf;border-radius:7px;color:var(--ink);background:none}.quiet::before{content:'↻';font-size:24px}.history-btn::before{content:'↶';font-size:25px}.quiet>span,.history-btn>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.heading,footer,.tip{display:none}main{width:100%;max-width:1400px;min-height:0;height:100%;margin:0 auto;padding:var(--shell-gap);overflow:hidden}.game-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto minmax(0,1fr);gap:var(--shell-gap)}aside{display:contents}.arena{grid-column:1;grid-row:1/3;min-height:0;min-width:0;display:grid;grid-template-rows:28px minmax(0,1fr) auto;border-radius:13px}.arena-top{padding:5px 15px;font-size:9px;line-height:18px;letter-spacing:.8px;gap:8px;white-space:nowrap}.table{height:auto;min-height:0;container-type:size}.table-ring{inset:8% 7% 9%;border-radius:45%}.seat{gap:2px;max-width:23%;line-height:1.4}.north{top:3%;left:50%}.west{top:44%;left:3%;transform:translateY(-50%)}.east{top:44%;right:3%;transform:translateY(-50%)}.seat strong{font-size:11px}.seat small,html[lang=si] .seat small{font-size:8px;letter-spacing:0;line-height:1.5}.seat .avatar{width:clamp(24px,9cqh,36px);height:clamp(24px,9cqh,36px);font-size:11px}.backs{margin-top:2px}.back{width:14px;height:21px}.you-marker{bottom:2%;gap:6px;font-size:11px}.you-marker .avatar{height:24px;width:24px}.your-turn,html[lang=si] .your-turn{font-size:9px;padding:3px 6px;line-height:1.5;letter-spacing:0}.center-mark{top:53%;font-size:clamp(30px,20cqh,70px)}#played{--pw:clamp(30px,18cqh,66px);--ph:calc(var(--pw)*1.4)}#played .card{width:var(--pw);height:var(--ph);max-width:none;margin:0;padding:4px;border-radius:5px}#played .card .rank{font-size:clamp(13px,5cqh,21px)}#played .card .small-suit{font-size:clamp(11px,4cqh,16px)}#played .card .big-suit{font-size:clamp(17px,7cqh,30px);right:5px;bottom:4px}.played0{left:calc(50% - var(--pw)/2);top:calc(54% + var(--ph)*.12);transform:rotate(-4deg)}.played2{left:calc(50% - var(--pw)/2);top:calc(54% - var(--ph)*1.12);transform:rotate(4deg)}.played1{left:calc(50% + var(--pw)*.58);top:calc(54% - var(--ph)/2);transform:rotate(8deg)}.played3{left:calc(50% - var(--pw)*1.58);top:calc(54% - var(--ph)/2);transform:rotate(-8deg)}.hand-zone{min-height:0;padding:9px 12px 12px;container-type:inline-size}.hand-label,html[lang=si] .hand-label{font-size:9px;line-height:1.6;margin:0 0 8px;padding:0;letter-spacing:0;gap:8px;align-items:center}.hand-label>span:last-child,html[lang=si] .hand-label>span:last-child{font-size:10px;max-width:60%;text-align:right;line-height:1.6}.hand-label b{margin-left:5px}#hand{height:clamp(64px,15vh,110px);height:clamp(64px,15dvh,110px);min-height:0;gap:clamp(1px,.7cqw,6px);align-items:stretch;padding:0 2px}#hand .card{width:min(10.9cqw,72px);height:100%;max-width:none;min-width:0;margin:0;padding:5px;border-radius:6px}#hand .card .rank{font-size:clamp(15px,4.2cqw,23px)}#hand .card .small-suit{font-size:clamp(12px,3.5cqw,18px)}#hand .card .big-suit{font-size:clamp(21px,6cqw,34px);bottom:7px;right:5px}.score-panel{grid-column:2;grid-row:1;min-width:0;padding:13px}.score-row{margin:12px 0}.score-row>b{font-size:27px}.panel-top{margin-bottom:8px}.action-panel{grid-column:2;grid-row:2;align-self:stretch;min-height:0;margin:0;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:9px;overflow:auto;overscroll-behavior:contain}.action-panel p{min-height:0}.action-panel h2,html[lang=si] .action-panel h2{font-size:21px;line-height:1.45;margin:7px 0}.action-panel .eyebrow{line-height:1.6;letter-spacing:.5px}.suit-choice{min-height:42px;height:42px}.primary{min-height:42px;line-height:1.6}.trick-score{margin:0;padding-top:9px}.trick-score>span,html[lang=si] .trick-score>span{font-size:9px;line-height:1.7;letter-spacing:0}.trick-score>div:not(.track){margin:4px 0}.trick-score b{font-size:23px}#carry{font-size:10px;margin:0;line-height:1.6}#carry:empty{display:none}dialog{max-height:calc(var(--app-height) - 24px);overflow:auto;overscroll-behavior:contain;padding:24px}dialog .close{min-width:40px;min-height:40px;position:sticky;top:0;background:#f5f3e9}button{touch-action:manipulation}button.card:not(:disabled):hover{transform:none}@media(hover:hover){button.card:not(:disabled):hover{transform:translateY(-5px)}}
/* Portrait: scores above the table, action controls below the hand. */
@media(max-width:700px) and (orientation:portrait){:root{--header-height:52px;--shell-gap:6px}header{padding:4px 8px;gap:5px}.brand{font-size:16px;gap:2px}.brand .logo{width:23px;height:27px;font-size:21px}.tag{display:none}.language-switch{gap:1px}.language-switch button{padding:4px 6px;font-size:10px}.icon,.quiet,.history-btn{width:34px;height:36px}.game-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) auto}.score-panel{grid-column:1;grid-row:1;display:flex;align-items:center;padding:4px 12px;gap:14px;justify-content:space-between}.panel-top,.score-row small,.goal{display:none}.score-row{margin:0;flex:1;gap:8px;min-width:0}.score-row+.score-row{border-left:1px solid var(--line);padding-left:14px}.score-row>div{padding-left:13px}.score-row strong,html[lang=si] .score-row strong{font-size:11px;white-space:nowrap}.score-row>b{font-size:24px}.arena{grid-column:1;grid-row:2;grid-template-rows:25px minmax(0,1fr) auto}.arena-top,html[lang=si] .arena-top{font-size:8px;padding:3px 10px;line-height:19px}.action-panel{grid-column:1;grid-row:3;padding:9px 12px;display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:6px 12px;overflow:visible}.action-content{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}.action-content>.eyebrow{grid-column:1;font-size:8px}.action-panel h2,html[lang=si] .action-panel h2{grid-column:1;font-size:17px;line-height:1.55;margin:0}.action-panel p,html[lang=si] .action-panel p{grid-column:1/-1;grid-row:3;font-size:10px;line-height:1.65;margin:3px 0 0}.action-content>#actions{grid-column:2;grid-row:1/3;gap:4px;align-items:center}#actions:empty{display:none}.suit-choice{width:34px;height:40px;min-height:40px;font-size:24px}.primary{font-size:10px;padding:7px 10px;max-width:140px}.trick-score{padding:0 0 0 10px;border-top:0;border-left:1px solid #cfd7c3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:3px}.trick-score>span,html[lang=si] .trick-score>span{font-size:8px;line-height:1.5}.trick-score b{font-size:21px}.trick-score em{margin:0 3px}.trick-score div>span{font-size:7px;letter-spacing:0}.track{gap:2px}#carry{grid-column:1/-1;font-size:9px}.hand-zone{padding:6px 9px 9px}.hand-label,html[lang=si] .hand-label{margin-bottom:6px;font-size:8px}.hand-label>span:last-child,html[lang=si] .hand-label>span:last-child{font-size:9px}.back{height:19px}.seat strong{font-size:10px}}
/* Very narrow phones: put trump choices on their own row. */
@media(max-width:390px) and (orientation:portrait){.brand-light{display:none}.action-panel{grid-template-columns:minmax(0,1fr) 75px;padding:7px 9px;gap:5px 9px}.action-content{grid-template-columns:minmax(0,1fr)}.action-content>#actions{grid-column:1;grid-row:4;margin-top:4px}.action-panel h2,html[lang=si] .action-panel h2{font-size:15px}.suit-choice{width:36px;min-height:36px;height:36px}.primary{max-width:none;width:auto;min-height:36px}.hand-label b{font-size:7px}.score-row strong,html[lang=si] .score-row strong{font-size:10px}.seat small,html[lang=si] .seat small{font-size:7px}}
/* Landscape uses a slim side rail, including small phone displays. */
@media(orientation:landscape) and (max-height:600px){:root{--header-height:44px;--shell-gap:5px}header{padding:2px 10px;gap:7px}.tag{display:none}.brand{font-size:17px}.brand .logo{height:25px;width:24px}.language-switch button{min-height:31px;padding:3px 8px}.icon,.quiet,.history-btn{height:32px;width:34px}.game-layout{grid-template-columns:minmax(0,1fr) clamp(185px,29vw,255px);grid-template-rows:53px minmax(0,1fr)}.score-panel{display:flex;padding:5px 9px;gap:9px;align-items:center}.panel-top,.goal,.score-row small{display:none}.score-row{flex:1;gap:5px;margin:0}.score-row>div{padding-left:10px}.score-row strong,html[lang=si] .score-row strong{font-size:9px}.score-row>b{font-size:22px}.score-row+.score-row{border-left:1px solid var(--line);padding-left:8px}.dot{width:5px;height:5px}.action-panel{padding:9px;gap:5px}.action-panel h2,html[lang=si] .action-panel h2{font-size:16px;margin:3px 0}.action-panel p,html[lang=si] .action-panel p{font-size:10px;line-height:1.6;margin:4px 0 8px}.action-panel .eyebrow{font-size:8px}.suit-choice{min-height:34px;height:34px;font-size:23px}.primary{min-height:34px;padding:7px;font-size:10px}.trick-score{padding-top:5px}.trick-score b{font-size:20px}.trick-score>span,html[lang=si] .trick-score>span{font-size:8px}.arena{grid-template-rows:21px minmax(0,1fr) auto}.arena-top,html[lang=si] .arena-top{padding:1px 10px;line-height:19px;font-size:8px}.hand-zone{padding:4px 10px 6px}.hand-label,html[lang=si] .hand-label{margin-bottom:4px;font-size:8px;line-height:1.4}.hand-label>span:last-child,html[lang=si] .hand-label>span:last-child{font-size:9px}#hand{height:clamp(48px,17dvh,76px)}#hand .card{width:min(10.5cqw,51px);padding:3px}#hand .card .rank{font-size:17px}#hand .card .small-suit{font-size:12px}#hand .card .big-suit{font-size:22px;bottom:4px}.seat small,.backs{display:none}.seat strong{font-size:9px}.seat .avatar{width:23px;height:23px;font-size:9px}.north{top:2%;flex-direction:row;max-width:45%}.you-marker .avatar{display:none}.you-marker{font-size:10px;bottom:1%}.your-turn,html[lang=si] .your-turn{font-size:8px;padding:1px 4px}.west,.east{top:45%}}
@media(orientation:portrait) and (max-height:650px){:root{--header-height:46px;--shell-gap:4px}.game-layout{grid-template-rows:36px minmax(0,1fr) auto}.score-panel{padding:2px 10px}.score-row>b{font-size:21px}.action-panel{padding:6px 9px}.action-panel p,html[lang=si] .action-panel p{font-size:9px}.hand-zone{padding:4px 8px 6px}#hand{height:60px}.hand-label,html[lang=si] .hand-label{margin-bottom:4px}.backs{display:none}.seat small,html[lang=si] .seat small{font-size:6px}.seat .avatar{height:23px;width:23px;font-size:9px}.north{flex-direction:row;max-width:60%;gap:4px}.north small{display:none}.you-marker .avatar{display:none}.action-panel h2,html[lang=si] .action-panel h2{font-size:14px}.suit-choice{min-height:34px;height:34px}}
@media(orientation:landscape) and (max-height:360px){.action-panel .action-content>.eyebrow{display:none}.action-panel{padding:6px 8px;gap:3px}.action-panel h2,html[lang=si] .action-panel h2{font-size:14px;margin:0}.action-panel p,html[lang=si] .action-panel p{font-size:9px;line-height:1.5;margin:3px 0 5px}.trick-score>div:not(.track){margin:1px 0}.trick-score b{font-size:18px}#carry{font-size:8px}}
/* Pause the first play while the announced trump takes centre stage. */
.trump-announcement{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at center,#214d3bf2,#09291ff5);backdrop-filter:blur(7px);color:#fff9e5;text-align:center;touch-action:none;animation:trump-overlay 2.2s ease-in-out both}.trump-announcement[hidden]{display:none}.trump-reveal{display:flex;align-items:center;flex-direction:column;gap:clamp(7px,2vh,16px);animation:trump-arrive 2.2s ease-in-out both}.trump-reveal-label{font-size:clamp(11px,2.5vw,16px);letter-spacing:3px;color:#cad9b3;line-height:1.6}.trump-reveal-symbol{display:block;font-family:Georgia,'Times New Roman',serif;font-size:clamp(100px,min(38vw,37dvh),240px);line-height:1.05;color:#fff5db;text-shadow:0 8px 35px #0004}.red-trump .trump-reveal-symbol{color:#f19a85;text-shadow:0 6px 40px #db7a5a40}.trump-reveal-name{font-size:clamp(24px,7vw,42px);font-weight:600;line-height:1.7}.trump-reveal-caller{font-size:clamp(12px,3vw,15px);color:#c5d3bb;line-height:1.7}html[lang=si] .trump-reveal-label{letter-spacing:0}@keyframes trump-overlay{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}@keyframes trump-arrive{0%{opacity:0;transform:scale(.8) translateY(12px)}15%,78%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.05) translateY(-8px)}}@media(orientation:landscape) and (max-height:450px){.trump-reveal{gap:3px}.trump-reveal-symbol{font-size:clamp(70px,32dvh,120px)}.trump-reveal-name{font-size:25px;line-height:1.4}.trump-reveal-label,.trump-reveal-caller{font-size:12px}}@media(prefers-reduced-motion:reduce){.trump-announcement,.trump-reveal{animation:none!important}}
#hand .trump-pick{outline:2px solid #dfcc8b;outline-offset:2px;cursor:pointer;box-shadow:0 0 13px #d7c57a28,0 4px 8px #0004}#hand .trump-pick:active{transform:translateY(-6px)}#dealAnimation{position:absolute;inset:0;z-index:4;pointer-events:none;--dw:clamp(26px,13cqh,45px);--dh:calc(var(--dw)*1.4)}#dealAnimation[hidden]{display:none}.deal-pile,.dealing-card{position:absolute;left:calc(50% - var(--dw)/2);top:calc(52% - var(--dh)/2);width:var(--dw);height:var(--dh);border:2px solid #eee7cf;border-radius:5px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#456c55,#456c55 2px,#62846a 2px,#62846a 4px);color:#e7e1c5;box-shadow:0 3px 8px #0005;font-family:Georgia,serif;font-size:22px}.deal-pile{box-shadow:2px 2px 0 #b3c0a6,4px 4px 0 #e1ddc8,6px 6px 0 #58755d,0 6px 12px #0005}.dealing-card{animation:deal-card .13s ease-in both;--dx:0px;--dy:0px;--angle:0deg}.deal-to-0{--dy:50cqh;--angle:7deg}.deal-to-1{--dx:36cqw;--dy:-4cqh;--angle:80deg}.deal-to-2{--dy:-41cqh;--angle:175deg}.deal-to-3{--dx:-36cqw;--dy:-4cqh;--angle:-80deg}@keyframes deal-card{0%{transform:translate(0,0) rotate(-8deg);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(.65);opacity:0}}@media(prefers-reduced-motion:reduce){.dealing-card{animation:none!important;opacity:0}}
/* A card-table picker inspired by the supplied reference. */
dialog.trump-picker{width:min(92vw,520px);max-width:none;max-height:calc(var(--app-height) - 28px);padding:24px 24px 22px;margin:auto;overflow:auto;border:5px solid #263b36;border-radius:28px;background:linear-gradient(#fff,#eeeee9);box-shadow:0 9px 0 #152f2c,0 20px 60px #0006;color:#123f40;text-align:center}dialog.trump-picker::backdrop{background:#091d30b5;backdrop-filter:blur(5px)}.picker-banner{position:relative;width:86%;margin:0 auto 15px;padding:9px 13px;background:linear-gradient(#49deed,#0dbbd4);border:3px solid #12627b;border-radius:12px 12px 18px 18px;box-shadow:inset 0 4px 0 #adfaff80,0 4px 0 #07556c;transform:rotate(-1deg)}.picker-banner::before,.picker-banner::after{content:'';position:absolute;top:10px;bottom:-12px;width:25px;background:#09a7c5;border:3px solid #12627b;z-index:-1}.picker-banner::before{left:-18px;border-radius:12px 0 0 7px;transform:rotate(12deg)}.picker-banner::after{right:-18px;border-radius:0 12px 7px 0;transform:rotate(-12deg)}.trump-picker .picker-banner h2,html[lang=si] .trump-picker .picker-banner h2{font-family:system-ui,sans-serif;font-weight:800;font-size:clamp(20px,5vw,29px);line-height:1.6;margin:0;color:#073c51;letter-spacing:0}.picker-close{position:absolute;right:8px;top:8px;width:38px;height:38px;border:3px solid #8d1b1e;border-radius:50%;background:linear-gradient(#ff6967,#d9101d);box-shadow:inset 0 2px 1px #ffb8b8;color:white;font-size:31px;line-height:27px;display:grid;place-items:center}.picker-hint{font-size:12px;line-height:1.8;margin:18px 0 14px;color:#57716b}.picker-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:15px;background:linear-gradient(#343c38,#555d56);border-radius:12px;box-shadow:inset 0 3px 9px #0006}.picker-cards .card{width:100%;height:auto;aspect-ratio:2/3;min-height:0;max-width:none;margin:0;padding:7px;box-shadow:0 3px 6px #0004;outline-offset:2px}.picker-cards .card .rank{font-size:clamp(18px,5vw,27px)}.picker-cards .card .small-suit{font-size:clamp(16px,4vw,21px)}.picker-cards .card .big-suit{font-size:clamp(28px,8vw,43px);right:9px;bottom:13px}.picker-cards .picked-card{outline:3px solid #72e796;box-shadow:0 0 15px #58ff813f}.picker-suits{display:flex;justify-content:center;gap:14px;margin:23px 0 12px}.picker-suit{position:relative;display:grid;place-items:center;width:60px;height:60px;border:3px solid #204a39;border-radius:15px;background:linear-gradient(#a2ffa4,#53db71);box-shadow:inset 0 3px 0 #e0ffe0,0 4px 0 #31503c;color:#071d13;font:43px/1 Georgia,serif;transition:transform .13s,box-shadow .13s}.picker-suit.red{color:#d81525}.picker-suit[aria-pressed=true]{outline:3px solid #0abed8;outline-offset:4px;transform:translateY(-3px);box-shadow:inset 0 3px 0 #fff,0 6px 0 #31503c,0 0 18px #0abed84d}.picker-selection{min-height:24px;margin:10px 0 16px;font-size:14px;font-weight:600;color:#2f6255}.picker-confirm{width:64%;min-height:48px;padding:8px 16px;font-size:17px;font-weight:800;border-radius:25px;border:3px solid #12546a;background:linear-gradient(#61eafa,#04b6ce);color:#073f4e;box-shadow:inset 0 3px 0 #b4fbff,0 4px 0 #153d46;line-height:1.7}.picker-confirm:disabled{background:linear-gradient(#d9dcd8,#afb6b1);color:#6d7a73;border-color:#66766e;box-shadow:inset 0 3px 0 #f4f5f2,0 4px 0 #526058;cursor:default}.picker-confirm:not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 3px 0 #b4fbff,0 1px 0 #153d46}@media(max-width:390px){dialog.trump-picker{padding:19px 15px 17px;border-radius:22px}.picker-cards{padding:10px;gap:8px}.picker-cards .card{padding:5px}.picker-suits{gap:12px;margin-top:18px}.picker-suit{width:49px;height:49px;font-size:36px;border-radius:12px}.picker-hint{font-size:11px}.picker-close{width:32px;height:32px;font-size:26px;top:5px;right:5px}.picker-banner{width:83%}.trump-picker .picker-banner h2,html[lang=si] .trump-picker .picker-banner h2{font-size:20px}.picker-selection{font-size:12px}}
@media(orientation:landscape) and (max-height:550px){dialog.trump-picker{width:min(90vw,640px);padding:13px 20px;display:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6px 20px;align-items:center;border-radius:21px}dialog.trump-picker[open]{display:grid}.picker-banner{grid-column:1/-1;width:65%;padding:2px 10px;margin:0 auto 3px}.trump-picker .picker-banner h2,html[lang=si] .trump-picker .picker-banner h2{font-size:19px;line-height:1.5}.picker-hint{grid-column:1/-1;font-size:10px;line-height:1.5;margin:2px 20px 5px}.picker-cards{grid-column:1;grid-row:3/6;padding:9px;gap:7px}.picker-cards .card{max-height:130px;padding:5px}.picker-cards .card .big-suit{font-size:28px;bottom:8px;right:5px}.picker-suits{grid-column:2;grid-row:3;gap:7px;margin:7px 0}.picker-suit{width:42px;height:42px;font-size:29px;border-radius:10px}.picker-selection{grid-column:2;grid-row:4;font-size:11px;min-height:18px;margin:3px 0}.picker-confirm{grid-column:2;grid-row:5;width:100%;min-height:36px;padding:2px;font-size:14px;margin-bottom:5px}}