:root{--bg:#140d08;--panel:#1d140e;--panel2:#281b12;--wood:#6d4025;--gold:#e7b85e;--cream:#f6ebd6;--muted:#b8a48a;--green:#07502f;--line:#604126;--red:#c5322d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#3a2415 0,#170f0a 62%);color:var(--cream);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px clamp(14px,2vw,32px);border-bottom:1px solid #67462d;background:#1b120cfa;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px);min-height:76px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:12px;color:var(--gold);font-size:26px}.brand strong{display:block;font-family:Georgia,serif;font-size:23px}.brand small{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.topbar nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.nav,button{cursor:pointer;border:1px solid var(--line);border-radius:10px;background:linear-gradient(#38271a,#26180f);color:var(--cream);padding:10px 14px;font-weight:650;transition:filter .15s,transform .15s}.nav.active,.primary{background:linear-gradient(#f4cf79,#dca84c);color:#24170c;border-color:#f4cf79}.nav:hover,button:hover{filter:brightness(1.13)}button:disabled{opacity:.5;cursor:not-allowed}main{max-width:1680px;margin:0 auto;padding:26px clamp(12px,2vw,30px) 64px}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:800}.hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.hero h1{font-family:Georgia,serif;font-size:clamp(30px,5vw,46px);line-height:1.05;margin:8px 0}.hero p{color:var(--muted);max-width:720px;line-height:1.55}.card,.side-panel{background:linear-gradient(145deg,#261a11,#1b120c);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 18px 50px #0004}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.table-card h3{font-family:Georgia,serif;font-size:23px;margin:8px 0}.muted{color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #796040;border-radius:99px;padding:5px 9px;color:var(--gold);font-size:12px}.seat-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.seat{background:#1b130e;border:1px solid #523924;border-radius:10px;padding:10px;font-size:13px}.seat strong{display:block;margin-top:4px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.spread{justify-content:space-between}.form-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}.field label{font-size:13px;color:var(--muted)}input,select{width:100%;background:#170f0b;border:1px solid #68492f;border-radius:10px;padding:12px;color:var(--cream);font:inherit}.action-field{flex:0 0 auto;justify-content:end}h2{font-family:Georgia,serif;font-size:28px;margin:0 0 10px}h3{font-size:15px}.section{margin-top:28px}.rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.rule h3{margin:0 0 8px;color:var(--gold)}.rule p,.rule li{font-size:14px;line-height:1.55;color:#ddcdb6}.empty{padding:28px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#f4e4c4;color:#21160f;border-radius:10px;box-shadow:0 10px 30px #0005;display:none;z-index:10}.settings-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #4c3524}.settings-row input{max-width:140px}.loading{color:var(--muted);padding:50px;text-align:center}
/* Wirtshaustisch-Spielansicht */
.game-layout{display:grid;grid-template-columns:minmax(250px,330px) minmax(500px,1fr) minmax(240px,320px);gap:18px;align-items:stretch}.side-panel{padding:16px;min-width:0}.table-title{padding-bottom:16px;border-bottom:1px solid #4d3422;margin-bottom:16px}.table-title h2{display:flex;align-items:center;gap:8px}.icon-btn{padding:2px 7px;font-size:16px}.side-panel>h3{margin:18px 0 10px}.roster{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #49321f;border-radius:12px;background:#19110b;margin:8px 0}.roster.active{border-color:#f0c96d;box-shadow:0 0 0 2px #f0c96d}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#26362b;border:2px solid #8d6b37;font-size:24px;flex-shrink:0}.roster-text{min-width:0;flex:1}.roster-text strong,.roster-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-text small{font-size:11px;color:var(--muted);margin-top:4px}.online{font-size:10px;color:#7fe4a0}.seat-action{display:grid;grid-template-columns:1fr 85px;gap:6px;align-items:center;margin:8px 0;font-size:12px}.seat-action button{grid-column:1/-1}.seat-action select{padding:7px}.felt-area{min-width:0;display:flex;align-items:stretch}.felt-table{width:100%;min-height:690px;background:linear-gradient(135deg,#432817,#8a5733 24%,#3b2113 50%,#8a5733 80%,#321b10);padding:12px;border-radius:36% / 12%;box-shadow:0 20px 50px #0009,inset 0 0 0 2px #a97546}.wood-rim{height:100%;min-height:666px;padding:13px;border-radius:36% / 12%;background:linear-gradient(140deg,#9b6b40,#402514 30%,#7b4a29 55%,#321b10);box-shadow:inset 0 0 0 2px #b5834d}.felt{position:relative;min-height:640px;height:100%;border-radius:36% / 12%;background:radial-gradient(ellipse at 50% 45%,#08703d 0,#07512f 56%,#02351f 100%);border:2px solid #b48b4e;box-shadow:inset 0 0 35px #001b10;overflow:hidden}.opponent{position:absolute;display:flex;align-items:center;flex-direction:column;z-index:1}.opponent-top{top:10px;left:50%;transform:translateX(-50%)}.opponent-left{left:8px;top:38%;transform:translateY(-50%)}.opponent-right{right:8px;top:38%;transform:translateY(-50%)}.opponent-bottom{bottom:12px;left:50%;transform:translateX(-50%);width:92%}.player-badge{background:#1d1712e8;border:1px solid #987044;border-radius:14px;padding:7px 13px;text-align:center;white-space:nowrap;box-shadow:0 4px 12px #0005}.player-badge small{display:block;color:#ddc8a6;font-size:11px;margin-top:3px}.backs{display:flex;justify-content:center;margin-top:5px}.back-card{width:clamp(25px,3vw,40px);height:clamp(46px,5vw,68px);border:2px solid #f2e6cf;border-radius:6px;background:repeating-linear-gradient(45deg,#eaf2f2 0 3px,#2773a2 3px 6px,#f8f0df 6px 8px);box-shadow:0 4px 8px #0005;margin-left:-10px;transform:rotate(var(--rot,0deg))}.backs .back-card:nth-child(odd){transform:rotate(-7deg) translateY(2px)}.backs .back-card:nth-child(even){transform:rotate(6deg)}.vertical{flex-direction:column}.vertical .back-card{margin: -16px 0 0 0;width:clamp(30px,3vw,42px);height:clamp(45px,4vw,60px)}.table-center{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:min(62%,480px);z-index:2}.game-notice{background:#032e1de8;border:1px solid #44845b;border-radius:18px;padding:18px;text-align:center;box-shadow:0 12px 30px #001b0d88}.game-notice h2{font-family:Georgia,serif;font-size:clamp(18px,2vw,26px);margin:8px 0}.game-notice p{color:#e0d2b5;font-size:13px}.start-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.start-controls button{grid-column:1/-1}.trick-area{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}.played-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.played-slot small{font-size:10px;color:#e6d3b4}.hand{display:flex;justify-content:center;align-items:flex-end;margin-top:4px;padding-top:6px;max-width:100%;overflow:visible}.playing-card{position:relative;width:clamp(58px,5.3vw,88px);height:clamp(108px,11vw,154px);flex:0 1 88px;min-width:0;border-radius:9px;background:linear-gradient(130deg,#fff6df,#f0dfbd);border:2px solid #d9c69e;color:#19140e;box-shadow:0 6px 14px #0006;display:flex;flex-direction:column;justify-content:space-between;padding:5px 6px;margin-left:clamp(-15px,-.9vw,-4px);font-family:Georgia,'Times New Roman',serif;transition:transform .16s,box-shadow .16s;overflow:hidden}.playing-card:first-child{margin-left:0}.playing-card:hover:not(:disabled){transform:translateY(-13px) rotate(-1deg);box-shadow:0 12px 20px #0008;z-index:4}.playing-card.red{color:#ba2825}.playing-card .corner{display:flex;flex-direction:column;align-items:center;line-height:.9;z-index:1}.playing-card .corner b{font-size:clamp(15px,1.4vw,21px)}.playing-card .corner i{font-style:normal;font-size:clamp(15px,1.3vw,20px)}.playing-card .bottom{transform:rotate(180deg)}.card-art{position:absolute;inset:24% 4% 24%;border:1px solid currentColor;border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:repeating-linear-gradient(0deg,transparent 0 9px,#c6a97833 9px 10px)}.art-symbol{font-size:clamp(25px,2.3vw,38px);line-height:1}.art-glyph{font-size:clamp(24px,2vw,34px);line-height:1.1}.art-title{font-family:system-ui,sans-serif;font-size:7px;font-weight:900;letter-spacing:.08em;margin-top:3px}.playing-card.court .card-art{background:linear-gradient(145deg,#f6e7bf,#d7b77d);box-shadow:inset 0 0 0 3px #f7edcf,inset 0 0 0 4px currentColor}.playing-card:disabled{cursor:default}.last-trick{display:flex;flex-wrap:wrap;gap:2px;margin:8px 0}.last-trick .playing-card{width:48px;height:82px;flex:none;margin:0;padding:3px}.last-trick .art-title{display:none}.last-trick .art-symbol{font-size:18px}.last-trick .art-glyph{font-size:16px}.last-trick .corner b,.last-trick .corner i{font-size:11px}.last-trick p{width:100%;font-size:12px;color:var(--gold)}.right-panel{display:flex;flex-direction:column;gap:8px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.panel-heading h2{font-size:24px}.score-list{border:1px solid #49321f;border-radius:12px;overflow:hidden}.score-row{display:flex;justify-content:space-between;gap:8px;padding:12px 10px;border-bottom:1px solid #49321f;font-size:12px}.score-row:last-child{border:0}.score-row b{color:var(--gold);white-space:nowrap}.compact{font-size:12px;margin-top:auto}.full-button{width:100%;margin-top:10px}.result-line{font-size:12px;color:var(--gold);line-height:1.5;margin-top:8px}
@media(max-width:1200px){.game-layout{grid-template-columns:250px minmax(400px,1fr)}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start}.right-panel .panel-heading,.right-panel .score-list{grid-column:1}.right-panel h3,.right-panel .last-trick{grid-column:2}.right-panel .compact,.right-panel .full-button{grid-column:1/-1}.felt-table{min-height:620px}.wood-rim{min-height:596px}.felt{min-height:570px}}
@media(max-width:760px){.topbar{align-items:flex-start;flex-direction:column}.topbar nav{justify-content:flex-start}.hero{align-items:flex-start;flex-direction:column}.game-layout{grid-template-columns:1fr}.felt-table{min-height:550px;border-radius:28% / 10%}.wood-rim{min-height:526px;border-radius:28% / 10%;padding:8px}.felt{min-height:500px;border-radius:28% / 10%}.side-panel{padding:14px}.right-panel{display:flex}.opponent-left{left:2px}.opponent-right{right:2px}.player-badge{padding:6px 8px;font-size:11px}.player-badge small{font-size:9px}.table-center{width:72%;top:43%}.game-notice{padding:10px}.game-notice h2{font-size:18px}.game-notice p{font-size:11px}.opponent-bottom{width:98%}.playing-card{height:clamp(98px,25vw,128px);width:clamp(47px,13vw,66px);flex:0 1 66px;margin-left:-11px;padding:4px}.playing-card .corner b{font-size:14px}.playing-card .corner i{font-size:14px}.art-symbol{font-size:24px}.art-glyph{font-size:22px}.art-title{font-size:5px}.back-card{width:25px;height:42px;margin-left:-8px}.backs.vertical .back-card{width:26px;height:39px;margin-top:-13px}.seat-list{grid-template-columns:1fr 1fr}.card{padding:15px}}

/* Traditionelles bayerisches Kartenblatt als Vektorgrafik */
.playing-card.bavarian-card{padding:0;background:#f5e8c6;border:1px solid #b9904d;overflow:hidden}
.playing-card.bavarian-card img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.table-actions{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.table-actions button{white-space:normal}

/* v0.7: Jeder Stichplatz entspricht fest einem Sitzplatz. */
.trick-compass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:6px;justify-items:center;align-items:center;margin-top:12px;min-height:225px}
.trick-compass .played-seat-2{grid-column:2;grid-row:1}.trick-compass .played-seat-3{grid-column:1;grid-row:2}.trick-compass .played-seat-1{grid-column:3;grid-row:2}.trick-compass .played-seat-0{grid-column:2;grid-row:3}
.trick-compass .played-slot{min-width:0;gap:3px}.trick-compass .played-slot small{display:block;font-size:11px;font-weight:700;color:#ffe1a0;white-space:nowrap;text-shadow:0 1px 3px #000}
.trick-compass .playing-card{width:clamp(44px,4vw,58px);height:clamp(68px,6.5vw,88px);margin:0;flex:none;padding:0}.trick-compass .slot-placeholder{display:block;border:1px dashed #c5d3a75e;border-radius:7px;width:46px;height:60px;line-height:60px;color:#d1e2c170}
.last-trick .last-card{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;flex:1}.last-trick .last-card small{font-size:10px;color:#ffe1a0;white-space:nowrap}.last-trick .last-card .playing-card{width:clamp(37px,3vw,48px);height:78px}.last-trick p{margin-top:7px}
@media(max-width:760px){.trick-compass{min-height:180px;gap:2px}.trick-compass .playing-card{width:39px;height:62px}.trick-compass .slot-placeholder{width:35px;height:48px;line-height:48px}.trick-compass .played-slot small{font-size:9px}.last-trick .last-card small{font-size:9px}}

/* v0.8 – Ansage sichtbar oberhalb der Hand, Handkarten nicht ausgegraut */
.felt:has(#gameType) .table-center{top:36%;width:min(68%,540px)}
.felt:has(#gameType) .game-notice{padding:14px 18px;background:#042c1df2}
.felt:has(#gameType) .game-notice h2{font-size:21px;margin:6px 0}
.felt:has(#gameType) .game-notice p{margin:6px 0}
.felt:has(#gameType) .opponent-bottom{bottom:10px;z-index:3}
.felt:has(#gameType) .opponent-bottom .player-badge{margin-bottom:6px}
.felt:has(#gameType) .hand{gap:3px;flex-wrap:nowrap}
.felt:has(#gameType) .hand .playing-card{margin-left:0;width:clamp(48px,5vw,77px);height:clamp(85px,9vw,130px);flex:0 1 77px;opacity:1;filter:none;box-shadow:0 3px 8px #0007;cursor:default}
.felt:has(#gameType) .hand .playing-card:disabled{opacity:1;filter:none}
.felt:has(#gameType) .start-controls{grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.felt:has(#gameType) .start-controls label{align-self:center}
.felt:has(#gameType) .start-controls button{grid-column:auto}
.felt:has(#gameType) .start-controls .bidding-hint{grid-column:1/-1;color:#d4b98c;font-size:10px;line-height:1.35}
.felt:has(#gameType) .start-controls .pass-button{background:#271b11;border:1px solid #c69d55;color:#f5d99e}
@media(max-width:760px){.felt:has(#gameType) .table-center{top:35%;width:78%}.felt:has(#gameType) .game-notice{padding:8px}.felt:has(#gameType) .game-notice h2{font-size:16px}.felt:has(#gameType) .game-notice p{font-size:10px}.felt:has(#gameType) .hand{gap:1px}.felt:has(#gameType) .hand .playing-card{width:clamp(39px,11vw,54px);height:clamp(70px,19vw,100px)}}

/* Version 0.10: klassisches Kartenblatt und sichtbare Hand */
.playing-card.bavarian-card { background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; overflow:visible!important; }
.playing-card.bavarian-card img { display:block; width:100%; height:100%; object-fit:fill; border-radius:8px; box-shadow:0 3px 9px rgba(0,0,0,.38); }
.hand .playing-card.bavarian-card:disabled { opacity:1!important; filter:none!important; }
.game-notice:has(.start-controls) { max-height:55%; overflow:auto; }

.bid-history{margin:10px auto;max-height:140px;overflow-y:auto;text-align:left;width:min(100%,360px);font-size:12px;color:#f4e6c5}.bid-history div{padding:3px 8px;border-bottom:1px solid #ffffff25}.bid-history b{color:#f7c96c}

.declarer-tag{display:block;color:#ffd36e!important;font-weight:800;font-size:11px}
.declaration-main{font-size:clamp(12px,1.15vw,16px);font-weight:800;color:#ffe5a2;margin:6px 0 4px}
.declaration-sidebar{padding:12px 10px;border:1px solid #8a6337;border-radius:10px;margin:15px 0;color:#f7d18b}
.declaration-sidebar strong{display:block;font-size:12px;margin-bottom:6px}
.declaration-sidebar div{font-size:14px;font-weight:700;color:#fff0c6}

/* v0.14: Spielfeld – Stich oberhalb der Hand, keine Überlagerung */
.felt:not(:has(#gameType)) .table-center{top:36%;width:min(54%,450px)}
.felt:not(:has(#gameType)) .game-notice{padding:10px 12px}
.felt:not(:has(#gameType)) .game-notice h2{font-size:clamp(17px,1.5vw,23px);margin:4px 0}
.felt:not(:has(#gameType)) .game-notice p{margin:5px 0}
.felt:not(:has(#gameType)) .trick-compass{margin-top:8px}
.felt:not(:has(#gameType)) .trick-compass .playing-card{width:clamp(40px,3.5vw,64px);height:clamp(68px,6.5vw,103px);flex:none;margin:0}
.felt:not(:has(#gameType)) .opponent-bottom{z-index:4;bottom:12px}
.felt:not(:has(#gameType)) .opponent-bottom .hand{position:relative;z-index:5}
@media(max-width:760px){.felt:not(:has(#gameType)) .table-center{top:34%;width:66%}.felt:not(:has(#gameType)) .game-notice{padding:7px}.felt:not(:has(#gameType)) .trick-compass .playing-card{width:38px;height:65px}}

/* v0.15: Abrechnung und Kontostand */
.settlement-box{background:#21180ed9;border:1px solid #b38b4c;border-radius:12px;padding:12px;margin:12px 0;color:#f7e7cb;font-size:13px}
.settlement-box h3{margin:0 0 8px;color:#ffd77c;font-size:16px}
.settlement-box p{margin:5px 0 10px}.settlement-rows{display:grid;gap:5px}
.settlement-row{display:grid;grid-template-columns:minmax(90px,1fr) 75px 75px;gap:5px;align-items:center;border-bottom:1px solid #6b5435;padding:5px 0}
.settlement-row b,.settlement-row strong{text-align:right}.settlement-row .plus{color:#83e0a1}.settlement-row .minus{color:#ff9999}
.settlement-sidebar .settlement-box{font-size:11px;padding:9px}.settlement-sidebar .settlement-row{grid-template-columns:minmax(65px,1fr) 58px 60px;gap:3px}
.counter-actions{display:flex;justify-content:center;gap:8px;margin:12px 0}
.counter-button{background:#a63626!important;color:#fff!important;border:2px solid #f4be63!important;padding:10px 18px;border-radius:9px;font-weight:800;cursor:pointer}
.counter-status{color:#ffce80;font-size:12px;font-weight:800;text-align:center;margin:5px 0}

/* V0.20: Karten offen direkt auf dem Filz, ohne extra Feld */
.felt:not(:has(#gameType)) .table-center{
 top:44%!important;left:50%!important;width:min(66%,570px)!important;
 transform:translate(-50%,-50%)!important;z-index:2;
}
.felt:not(:has(#gameType)) .game-notice{
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;padding:0!important;overflow:visible!important;
}
.felt:not(:has(#gameType)) .game-notice>.eyebrow,
.felt:not(:has(#gameType)) .game-notice>.declaration-main,
.felt:not(:has(#gameType)) .game-notice>h2,
.felt:not(:has(#gameType)) .game-notice>p{
 position:relative;z-index:5;text-shadow:0 2px 5px #002b18,0 0 9px #002b18;
}
.felt:not(:has(#gameType)) .game-notice>.eyebrow{display:block;font-size:11px}
.felt:not(:has(#gameType)) .game-notice>.declaration-main{margin:3px 0}
.felt:not(:has(#gameType)) .game-notice>h2{margin:2px 0;font-size:clamp(18px,1.7vw,25px)}
.felt:not(:has(#gameType)) .game-notice>p{margin:4px 0;font-size:12px}
.felt:not(:has(#gameType)) .trick-compass{
 position:relative!important;display:block!important;
 width:min(100%,430px)!important;height:290px!important;
 min-height:0!important;margin:9px auto 0!important;
}
.felt:not(:has(#gameType)) .trick-compass .played-slot{
 position:absolute!important;display:flex!important;flex-direction:column!important;
 align-items:center!important;gap:2px!important;width:110px!important;
 min-width:0!important;z-index:2;
}
.felt:not(:has(#gameType)) .trick-compass .played-seat-2{top:0!important;left:50%!important;transform:translateX(-50%)!important;z-index:2}
.felt:not(:has(#gameType)) .trick-compass .played-seat-3{top:63px!important;left:calc(50% - 103px)!important;transform:translateX(-50%)!important;z-index:3}
.felt:not(:has(#gameType)) .trick-compass .played-seat-1{top:63px!important;left:calc(50% + 103px)!important;transform:translateX(-50%)!important;z-index:3}
.felt:not(:has(#gameType)) .trick-compass .played-seat-0{top:125px!important;left:50%!important;transform:translateX(-50%)!important;z-index:4}
.felt:not(:has(#gameType)) .trick-compass .playing-card{
 width:clamp(65px,6.2vw,90px)!important;height:clamp(105px,10vw,145px)!important;
 flex:none!important;margin:0!important;
 filter:drop-shadow(0 4px 5px #001a0cb3);
}
.felt:not(:has(#gameType)) .trick-compass .played-slot small{
 font-size:11px!important;color:#ffdb83!important;
 text-shadow:0 1px 5px #00150a,0 0 5px #00150a!important;
 background:#003b278c;border-radius:4px;padding:1px 4px;
}
.felt:not(:has(#gameType)) .trick-compass .played-empty{display:none!important}
.felt:not(:has(#gameType)) .trick-compass .slot-placeholder{display:none!important}
@media(max-width:760px){
 .felt:not(:has(#gameType)) .table-center{top:42%!important;width:74%!important}
 .felt:not(:has(#gameType)) .trick-compass{height:210px!important}
 .felt:not(:has(#gameType)) .trick-compass .played-seat-3{left:calc(50% - 64px)!important;top:45px!important}
 .felt:not(:has(#gameType)) .trick-compass .played-seat-1{left:calc(50% + 64px)!important;top:45px!important}
 .felt:not(:has(#gameType)) .trick-compass .played-seat-0{top:90px!important}
 .felt:not(:has(#gameType)) .trick-compass .playing-card{width:56px!important;height:92px!important}
 .felt:not(:has(#gameType)) .trick-compass .played-slot{width:80px!important}
}

/* v0.21: freie Tischfläche, Karten klar, linkes Panel als ausklappbarer Tab */
.table-tabs{display:flex;justify-content:flex-start;margin:0 0 10px}
.table-tab{border:1px solid #ad7840;border-radius:10px;background:#302015;color:#f5d38a;padding:10px 17px;font-weight:700;cursor:pointer}
.game-layout{grid-template-columns:minmax(0,1fr) minmax(250px,320px)!important;position:relative}
.game-layout>.players-panel{display:none!important}
.game-layout>.players-panel.players-open{
 display:block!important;position:absolute;z-index:50;left:0;top:0;
 width:min(330px,90vw);max-height:80vh;overflow:auto;
 background:#21160f;border:1px solid #956331;border-radius:15px;
 box-shadow:0 15px 45px #000c;
}
.game-layout>.felt-area{grid-column:1!important;grid-row:1!important}
.game-layout>.right-panel{grid-column:2!important;grid-row:1!important}
.felt .opponent-left .backs.side-fan,
.felt .opponent-right .backs.side-fan{
 display:flex!important;flex-direction:row!important;
 justify-content:center!important;align-items:center!important;
 width:max-content!important;max-width:180px!important;margin-top:8px!important;
}
.felt .opponent-left .backs.side-fan .back-card,
.felt .opponent-right .backs.side-fan .back-card{
 width:clamp(30px,3vw,41px)!important;height:clamp(49px,5vw,64px)!important;
 margin:0 0 0 -23px!important;transform:rotate(-90deg)!important;
 transform-origin:center!important;flex:none!important;
}
.felt .opponent-left .backs.side-fan .back-card:first-child,
.felt .opponent-right .backs.side-fan .back-card:first-child{margin-left:0!important}
.felt .opponent-left{left:15px!important;top:35%!important}
.felt .opponent-right{right:15px!important;top:35%!important}
/* Der deaktivierte Button wird vom globalen CSS abgeblendet. Stichkarten immer vollfarbig. */
.felt .trick-compass .playing-card,
.felt .trick-compass .playing-card:disabled,
.felt .trick-compass .playing-card img{
 opacity:1!important;filter:none!important;visibility:visible!important;
}
.felt .trick-compass .playing-card{
 background:#fff!important;box-shadow:0 5px 12px #001b0d9c!important;
 border-color:#f8f1e0!important;
}
.felt .trick-compass .playing-card img{
 width:100%!important;height:100%!important;object-fit:fill!important;
}
@media(max-width:950px){
 .game-layout{grid-template-columns:minmax(0,1fr)!important}
 .game-layout>.right-panel{grid-column:1!important;grid-row:2!important}
 .game-layout>.felt-area{grid-column:1!important;grid-row:1!important}
}
/* v0.22 – Seitenkarten: jede Karte quer, Kartenstapel senkrecht untereinander */
.felt .opponent-left .backs.side-fan,
.felt .opponent-right .backs.side-fan {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
  max-height: 260px !important;
  margin: 9px auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.felt .opponent-left .backs.side-fan .back-card,
.felt .opponent-right .backs.side-fan .back-card,
.felt .opponent-left .backs.side-fan .back-card:first-child,
.felt .opponent-right .backs.side-fan .back-card:first-child {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 54px !important;
  height: 78px !important;
  margin: -39px 0 0 !important;
  transform: rotate(-90deg) !important;
  transform-origin: center center !important;
}
.felt .opponent-left .backs.side-fan .back-card:first-child,
.felt .opponent-right .backs.side-fan .back-card:first-child {
  margin-top: 0 !important;
}
.felt .opponent-left, .felt .opponent-right {
  top: 29% !important;
}
/* Version 0.23: Informationen rechts, Mitte ausschließlich Karten im Spiel */
.felt .game-notice.playing-notice > .eyebrow,
.felt .game-notice.playing-notice > .declaration-main,
.felt .game-notice.playing-notice > h2,
.felt .game-notice.playing-notice > p {display:none!important}
.felt .game-notice.playing-notice > .trick-compass {margin-top:0!important}
.felt .game-notice.playing-notice > .counter-status {display:none!important}
.felt .table-center:has(.playing-notice){top:47%!important}
.turn-info-panel{margin:18px 0;padding:14px 12px;border:1px solid #73502d;border-radius:12px;background:#24170e}
.turn-info-panel h3{margin:0 0 10px;font-size:16px}
.turn-info-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #53351e}
.turn-info-row span{color:#d4bb92;font-size:13px}
.turn-info-row strong{color:#ffdb86;font-size:14px;text-align:right}

/* Version 0.24: nachvollziehbare Preisabrechnung */
.price-breakdown{background:rgba(0,0,0,.23);border:1px solid rgba(234,188,98,.45);border-radius:11px;margin:13px 0 16px;padding:13px 16px;text-align:left}
.price-breakdown-title{font-size:14px;font-weight:800;color:#ffd786;text-align:center;margin-bottom:11px}
.price-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;color:#f5e5c7}
.price-line strong{white-space:nowrap;color:#f7d58a;font-variant-numeric:tabular-nums}
.price-line.price-total{border-top:1px solid #a67c44;margin-top:8px;padding-top:12px;font-size:15px;font-weight:800;color:#fff}
.price-line.price-total strong{color:#9df3b0;font-size:17px}
.settlement-box{max-width:680px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:650px){.price-breakdown{padding:10px}.price-line{font-size:12px}.price-line.price-total{font-size:13px}}
/* Schafkopf v0.43 – maximaler rechteckiger Filztisch ohne Holzrahmen */
.game-layout > .felt-area {
  min-width: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}
.game-layout .felt-table {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: max(690px, calc(100vh - 175px)) !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.game-layout .wood-rim {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: max(690px, calc(100vh - 175px)) !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: none !important;
  box-shadow: none !important;
}
.game-layout .felt {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: max(690px, calc(100vh - 175px)) !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(155, 204, 148, .34) !important;
  background: radial-gradient(ellipse at 50% 42%, #08703d 0%, #07512f 65%, #02351f 100%) !important;
  box-shadow: inset 0 0 26px rgba(0, 24, 12, .36), 0 8px 25px rgba(0, 0, 0, .17) !important;
  overflow: hidden !important;
}
@media (max-width: 760px) {
  .game-layout .felt-table,
  .game-layout .wood-rim,
  .game-layout .felt {
    min-height: 570px !important;
    border-radius: 14px !important;
  }
}
/* Schafkopf 0.45 – Desktop-Bildschirmfüllendes Spielfeld, keine Daten-/Logikänderung */
@media (min-width: 900px) {
  body:has(.game-layout) { overflow-x: hidden; }
  body:has(.game-layout) main {
    max-width: none !important;
    width: 100% !important;
    padding: 10px clamp(10px, 1.2vw, 22px) 10px !important;
  }
  body:has(.game-layout) .topbar {
    min-height: 55px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  body:has(.game-layout) .table-tabs {
    margin: 0 0 6px !important;
    padding: 0 !important;
  }
  body:has(.game-layout) .table-tab { padding: 7px 12px !important; }
  body:has(.game-layout) .game-layout {
    grid-template-columns: minmax(0, 1fr) clamp(255px, 20vw, 315px) !important;
    gap: 12px !important;
    align-items: stretch !important;
    height: calc(100dvh - 130px) !important;
    min-height: 510px !important;
  }
  body:has(.game-layout) .game-layout > .felt-area {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  body:has(.game-layout) .game-layout > .right-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 9px !important;
    scrollbar-width: thin;
  }
  body:has(.game-layout) .game-layout > .players-panel { display: none !important; }
  body:has(.game-layout) .felt-table,
  body:has(.game-layout) .wood-rim,
  body:has(.game-layout) .felt {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 14px !important;
  }
  body:has(.game-layout) .right-panel .panel-heading h2 { font-size: 19px !important; margin: 0 !important; }
  body:has(.game-layout) .right-panel .pill { font-size: 10px !important; padding: 3px 7px !important; }
  body:has(.game-layout) .right-panel .score-row { padding: 6px 7px !important; font-size: 11px !important; }
  body:has(.game-layout) .right-panel .declaration-sidebar { padding: 7px 8px !important; margin: 5px 0 !important; }
  body:has(.game-layout) .right-panel .declaration-sidebar div { font-size: 12px !important; }
  body:has(.game-layout) .right-panel .settlement-sidebar { margin: 3px 0 !important; }
  body:has(.game-layout) .right-panel .settlement-sidebar .settlement-box { padding: 7px !important; font-size: 10px !important; }
  body:has(.game-layout) .right-panel .settlement-sidebar .settlement-row { padding-top: 5px !important; padding-bottom: 5px !important; }
  body:has(.game-layout) .right-panel .settlement-sidebar h3 { margin: 2px 0 5px !important; font-size: 13px !important; }
  body:has(.game-layout) .right-panel .turn-info-panel { margin: 4px 0 !important; padding: 8px !important; }
  body:has(.game-layout) .right-panel .turn-info-row { padding: 5px 0 !important; font-size: 11px !important; }
  body:has(.game-layout) .right-panel .compact { font-size: 10px !important; margin-top: 3px !important; }
  body:has(.game-layout) .right-panel .full-button { padding: 7px 9px !important; margin-top: 4px !important; font-size: 11px !important; }
  body:has(.game-layout) .right-panel button { padding-top: 7px !important; padding-bottom: 7px !important; }
  body:has(.game-layout) .opponent-top { top: 7px !important; }
  body:has(.game-layout) .opponent-bottom { bottom: 6px !important; }
  body:has(.game-layout) .opponent-left,
  body:has(.game-layout) .opponent-right { top: 47% !important; }
  body:has(.game-layout) .table-center { top: 47% !important; }
}
@media (min-width: 900px) and (max-height: 760px) {
  body:has(.game-layout) .game-layout { height: calc(100dvh - 115px) !important; }
  body:has(.game-layout) .right-panel .score-row { padding: 4px 6px !important; }
  body:has(.game-layout) .right-panel .settlement-sidebar .settlement-row { padding-top: 3px !important; padding-bottom: 3px !important; }
  body:has(.game-layout) .opponent-bottom .playing-card { max-height: 112px !important; }
}