/* CARCOUNT Quartett — Designreferenz #6a–#6f. */
:root{--cc-tie:#ffd166}

/* Das zentrale App-Ziel ist jetzt Spielen; neue Karten bleiben als kleine,
   klar beschriftete Sekundäraktion in der Garage. */

/* Das zentrale App-Ziel ist jetzt Spielen; neue Karten bleiben als kleine,klar beschriftete Sekundäraktion in der Garage. */
.app-tab-play{align-self:center;justify-self:center;color:var(--cc-lime)}
.app-tab-play i[data-tab-icon="spielen"]{--tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2zm2 4v8l7-4-7-4z'/%3E%3C/svg%3E")}
.app-tab-play.is-active{color:var(--cc-lime-hi)}

.deck-primary-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:auto}
.deck-play,.deck-add{border-radius:15px;cursor:pointer}
.deck-play{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:11px;align-items:center;min-height:64px;padding:10px 15px;border:0;background:var(--cc-lime);color:#08090a;text-align:left;box-shadow:0 12px 34px rgba(201,242,58,.17)}
.deck-play>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(8,9,10,.14);font-size:13px}
.deck-play b{align-self:end;font:800 17px/1.15 Archivo,system-ui,sans-serif}
.deck-play small{align-self:start;margin-top:2px;font:600 10px/1.2 Poppins,system-ui,sans-serif;opacity:.7}
.deck-add{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 12px;border:1px solid var(--cc-line);background:rgba(255,255,255,.035);color:var(--cc-muted)}
.deck-add span{font:500 18px/1 Poppins,system-ui,sans-serif}
.deck-add small{font:600 10px/1 Poppins,system-ui,sans-serif}
.deck-empty{display:grid;align-content:center;justify-items:center;gap:10px;flex:1;min-height:440px;padding:28px;margin:0;border:0;background:none;text-align:center}
.deck-empty-art{position:relative;width:126px;height:148px;margin-bottom:8px}
.deck-empty-art i{position:absolute;inset:12px 22px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));transform:rotate(-7deg)}
.deck-empty-art i:nth-child(2){transform:translate(12px,7px) rotate(7deg);border-color:rgba(201,242,58,.22)}
.deck-empty-art b{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid rgba(201,242,58,.45);border-radius:16px;background:#17200e;color:var(--cc-lime);font:500 26px/1 Poppins,system-ui,sans-serif;box-shadow:0 0 30px rgba(201,242,58,.12)}
.deck-empty>span{color:var(--cc-lime);font:700 9px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.deck-empty strong{max-width:410px;font:800 clamp(21px,2.3vw,29px)/1.05 Archivo,system-ui,sans-serif;letter-spacing:-.035em}
.deck-empty p{max-width:390px;margin:0;color:var(--cc-muted);font-size:12px;line-height:1.5}

.quartett-screen[hidden]{display:none!important}
body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{display:block;width:100%;max-width:430px;margin:0 auto;font-family:Poppins,system-ui,sans-serif;color:var(--cc-cream)}
.quartett-screen button{font-family:Poppins,system-ui,sans-serif}
.quartett-eyebrow{display:block;color:var(--cc-lime);font:700 9.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.quartett-top{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;min-height:44px;margin-bottom:14px}
.quartett-top button{min-height:44px;padding:0;border:0;background:none;color:var(--cc-muted);font:600 12px/1 Poppins,system-ui,sans-serif;cursor:pointer;text-align:left}
.quartett-top [data-quartett-rules]{width:44px;border:1px solid var(--cc-line);border-radius:12px;text-align:center;font-size:15px}
.quartett-top>span{color:var(--cc-muted);font:700 9.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.18em;text-align:center}
.quartett-primary{width:100%;min-height:52px;padding:0 18px;border:0;border-radius:14px;background:var(--cc-lime);color:#08090a;font:700 14px/1 Poppins,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(201,242,58,.2)}
.quartett-primary:hover{background:var(--cc-lime-hi)}
.quartett-primary[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}

/* Setup #6a */

.quartett-setup-copy{padding:8px 2px 0}
.quartett-setup-copy h2{margin:9px 0 10px;font:800 clamp(32px,9vw,42px)/.92 Archivo,system-ui,sans-serif;letter-spacing:-.035em}
.quartett-setup-copy p{margin:0;color:var(--cc-muted);font-size:12px;line-height:1.5}
.quartett-player-options{display:grid;gap:9px;margin:20px 0}
.quartett-player-options button{display:flex;align-items:center;gap:13px;width:100%;min-height:72px;padding:12px 14px;border:1px solid var(--cc-line);border-radius:15px;background:var(--cc-surface);color:var(--cc-cream);text-align:left;cursor:pointer}
.quartett-player-options button>b{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);font:800 20px/1 Archivo,system-ui,sans-serif}
.quartett-player-options button>span{display:grid;gap:4px;flex:1}
.quartett-player-options strong{font-size:13px;line-height:1.2}
.quartett-player-options small{color:var(--cc-muted);font-size:10.5px;line-height:1.4}
.quartett-player-options button>i{display:none;width:23px;height:23px;border-radius:999px;background:var(--cc-lime);color:#08090a;font:700 12px/23px Poppins,system-ui,sans-serif;text-align:center;font-style:normal}
.quartett-player-options button.is-selected{border:2px solid var(--cc-lime);background:linear-gradient(120deg,#1a2410,var(--cc-surface));box-shadow:0 0 30px rgba(201,242,58,.12)}
.quartett-player-options button.is-selected>b{background:var(--cc-lime);color:#08090a}
.quartett-player-options button.is-selected small{color:var(--cc-lime)}
.quartett-player-options button.is-selected>i{display:block}
.quartett-origin{padding:15px;margin-bottom:11px;border:1px solid var(--cc-line);border-radius:16px;background:var(--cc-surface)}
.quartett-origin>div{display:flex;align-items:center;gap:10px;margin:14px 0 12px}
.quartett-origin>div p{display:grid;justify-items:center;gap:5px;width:92px;margin:0}
.quartett-origin>div strong{font:700 23px/1 'Chakra Petch','JetBrains Mono',monospace}
.quartett-origin>div p:first-child strong{color:var(--cc-lime)}
.quartett-origin>div small{color:var(--cc-dim);font:700 8px/1.25 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.1em;text-align:center}
.quartett-origin>div i{flex:1;height:1px;background:var(--cc-line)}
.quartett-origin>p{margin:0;padding-top:11px;border-top:1px solid var(--cc-line);color:var(--cc-muted);font-size:10.5px;line-height:1.5}
.quartett-difficulty{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:16px;border:1px solid var(--cc-line);border-radius:15px;background:var(--cc-surface-2)}
.quartett-difficulty>b{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.06);color:var(--cc-muted)}
.quartett-difficulty>span{display:grid;gap:3px}
.quartett-difficulty strong{font-size:12px}
.quartett-difficulty small{color:var(--cc-dim);font-size:10.5px}

/* Spieltisch: dieselbe Bühne für Ansage und Stich. */

.quartett-table-screen{position:relative;display:flex;min-height:calc(100dvh - var(--app-head-h) - 52px);flex-direction:column;overflow:hidden}
.quartett-table-screen>.quartett-top{position:relative;z-index:2}

.quartett-image-fallback{position:absolute!important;z-index:0!important;inset:0!important;display:grid!important;place-items:center!important;padding:20px!important;border:0!important;border-radius:0!important;background:linear-gradient(135deg,#242a22,#0c0e0c)!important;color:#7c8079!important;font:700 9px/1.5 'Chakra Petch','JetBrains Mono',monospace!important;letter-spacing:.14em!important;text-align:center!important}
.is-low-res>img{display:none!important}

.quartett-stats{display:flex;flex:1;flex-direction:column;gap:10px}

/* Stich: nur der angesagte Wert, Sieger und Konsequenz. */

/* Stich: nur der angesagte Wert{background:radial-gradient(ellipse,rgba(201,242,58,.13),transparent 66%)}

/* Spielende #6e */

.quartett-end{position:relative;overflow:hidden}
.quartett-end:before{content:'';position:absolute;z-index:-1;top:-80px;left:50%;width:480px;height:480px;transform:translateX(-50%);border-radius:999px;background:radial-gradient(circle,rgba(201,242,58,.14),transparent 65%)}
.quartett-end-head{text-align:center;padding:10px 10px 20px}
.quartett-end-head span{color:var(--cc-lime);font:700 9.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.2em}
.quartett-end-head h2{margin:12px 0 9px;font:800 52px/.92 Archivo,system-ui,sans-serif;letter-spacing:-.04em}
.quartett-end-head p{margin:0;color:var(--cc-muted);font-size:11px}
.quartett-ranking{display:grid;gap:7px}
.quartett-ranking>div{display:grid;grid-template-columns:18px 26px 1fr auto;gap:9px;align-items:center;min-height:45px;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.04)}
.quartett-ranking>div>span,.quartett-ranking>div>em{color:var(--cc-muted);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;font-style:normal}
.quartett-ranking>div>b{display:grid;place-items:center;width:25px;height:25px;border-radius:999px;background:#3a3f36;font-size:8px}
.quartett-ranking>div>strong{font-size:11.5px}
.quartett-ranking>div.is-human{border:1px solid rgba(201,242,58,.3);background:rgba(201,242,58,.1)}
.quartett-ranking>div.is-human>span,.quartett-ranking>div.is-human>em{color:var(--cc-lime)}
.quartett-end-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.quartett-end-metrics>div{display:grid;justify-items:center;gap:7px;padding:12px 6px;border:1px solid var(--cc-line);border-radius:13px;background:var(--cc-surface)}
.quartett-end-metrics span{color:var(--cc-dim);font:700 8px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.12em}
.quartett-end-metrics strong{font:700 19px/1 'Chakra Petch','JetBrains Mono',monospace}
.quartett-hunt{display:grid;grid-template-columns:42px 1fr;gap:11px;padding:14px;margin-bottom:12px;border:1px solid rgba(201,242,58,.25);border-radius:16px;background:linear-gradient(120deg,#1a2410,var(--cc-surface))}
.quartett-hunt>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(201,242,58,.15);color:var(--cc-lime);font-size:18px}
.quartett-hunt>div strong{font-size:12.5px}
.quartett-hunt p{margin:4px 0 0;color:var(--cc-muted);font-size:10.5px;line-height:1.4}
.quartett-hunt button{grid-column:1/-1;min-height:44px;border:0;border-radius:12px;background:var(--cc-lime);color:#08090a;font-size:12px;font-weight:700;cursor:pointer}
.quartett-end-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.quartett-end-actions button{min-height:46px;border:1px solid var(--cc-line);border-radius:13px;background:rgba(255,255,255,.06);color:var(--cc-cream);font-size:12px;font-weight:600;cursor:pointer}

/* Regeln und Ladezustände */

.quartett-rules{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,5,5,.82);backdrop-filter:blur(8px)}
.quartett-rules>div{position:relative;width:min(100%,430px);max-height:calc(100dvh - 36px);padding:22px;border:1px solid var(--cc-line);border-radius:20px;background:#0a0b0a;overflow:auto}
.quartett-rules [data-rules-close]{position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid var(--cc-line);border-radius:12px;background:var(--cc-surface);color:var(--cc-cream);font-size:20px;cursor:pointer}
.quartett-rules h2{margin:12px 0 20px;font:800 30px/.95 Archivo,system-ui,sans-serif;letter-spacing:-.03em}
.quartett-rules ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.quartett-rules li{display:flex;gap:12px;padding:12px;border:1px solid var(--cc-line);border-radius:13px;background:var(--cc-surface)}
.quartett-rules li>b{color:var(--cc-lime);font:700 17px/1 'Chakra Petch',monospace}
.quartett-rules li>span{display:grid;gap:4px;color:var(--cc-muted);font-size:11px;line-height:1.4}
.quartett-rules li strong{color:var(--cc-cream);font-size:12px}
.quartett-rules>div>p{margin:12px 0 0;color:var(--cc-muted);font-size:11px;line-height:1.5}
.quartett-loading,.quartett-error{display:grid;justify-items:center;gap:10px;padding:22vh 20px 0;text-align:center}
.quartett-loading>span{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--cc-lime);border-radius:999px;animation:quartett-spin .7s linear infinite}
.quartett-loading small,.quartett-error p{color:var(--cc-muted);font-size:12px}
.quartett-error button{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--cc-lime);color:#08090a;font-weight:700}

@keyframes quartett-spin{to{transform:rotate(360deg)}}
@keyframes quartett-thinking{50%{opacity:.3;transform:scale(.7)}}
@keyframes quartett-reveal{from{opacity:0;transform:rotateY(85deg) translateX(-12px)}to{opacity:.78;transform:none}}
@keyframes quartett-pulse{50%{transform:scale(1.12)}}
@keyframes quartett-face-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes quartett-stat-pick{50%{transform:scale(1.025);box-shadow:0 0 24px rgba(201,242,58,.22)}}
@keyframes quartett-result-card-in{from{opacity:0;transform:translateY(18px) rotateY(82deg)}to{opacity:1;transform:none}}
@keyframes quartett-result-winner-in{from{opacity:0;transform:translateY(18px) rotateY(82deg)}to{opacity:1;transform:translateY(-8px)}}
@keyframes quartett-result-loser-in{from{opacity:0;transform:translateY(18px) rotateY(82deg)}to{opacity:.74;transform:none}}
@keyframes quartett-result-copy{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Heute ist ein eigener Menüpunkt; in der Garage bleibt nur der kompakte
   Teaser. Die alten Zusatzmodule bleiben auch auf der Heute-Route verborgen. */
@media(max-width:899px){
  body.app-shell-page[data-app-route="/app"] .heute-screen{display:none!important}
  body.app-shell-page[data-app-route="/app"] .deck-today{display:flex}
  body.app-shell-page[data-app-route="/app/heute"] .heute-screen>#picksChallenge{display:none!important}

  .deck-primary-actions{grid-template-columns:minmax(0,1fr) 108px;margin-top:0}
  .deck-play{min-height:60px;padding-inline:12px}
  .deck-play b{font-size:15px}
  .deck-add{min-height:60px;flex-direction:column;gap:4px;padding:6px}
  .deck-empty{min-height:300px;padding:24px 12px}
  .deck-empty-art{width:104px;height:116px;margin-bottom:2px}
  .deck-empty-art i{inset:8px 20px}
  .deck-empty-art b{width:44px;height:44px}
  .deck-empty strong{font-size:25px}

  .quartett-table-screen{min-height:calc(100dvh - var(--app-head-h) - var(--app-tabbar-h) - 20px);overflow:visible}
  .quartett-top{grid-template-columns:82px 1fr 44px}

  

  

  

  
}

@media(min-width:900px){
  .app-tab-play{margin:6px auto 10px;order:-1}
  body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{max-width:1180px}
  .quartett-setup,.quartett-end{max-width:680px;margin:0 auto}

  

  

  
  body[data-app-route="/app/spielen"] .app-shell-route{width:100%;max-width:1280px}
}

/* Auf großen Desktop-Flächen wächst der Spieltisch als zusammenhängende Bühne.
   Die Obergrenze hält Karte und Werte lesbar, statt sie auf Ultrawide-Displays
   bis an die Fensterränder auseinanderzuziehen. */
@media(min-width:1500px){
  body.app-shell-page[data-app-route="/app/spielen"] .app-shell-route{max-width:none;padding-inline:clamp(32px,3vw,64px)}
  body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{max-width:1600px}

  

  

  
}

@media(prefers-reduced-motion:reduce){
  .quartett-loading>span{animation:none!important;transition:none!important}

}

/* v8: Spielen gehört sichtbar zum selben Clubhouse wie Garage, Heute und
   Entdecken. Die Spielmechanik bleibt unverändert; nur Bühne, Typografie und
   responsive Dichte werden vereinheitlicht. */

/* v8: Spielen gehört sichtbar zum selben Clubhouse wie Garage,Heute und
   Entdecken. Die Spielmechanik bleibt unverändert; nur Bühne,Typografie und
   responsive Dichte werden vereinheitlicht. */
body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{max-width:var(--app-content-max,1180px);font-family:Archivo,system-ui,sans-serif}
.quartett-screen button{font-family:Archivo,system-ui,sans-serif}
.quartett-top{margin-bottom:20px}
.quartett-top button{font-family:Archivo,system-ui,sans-serif;font-weight:700}
.quartett-primary{min-height:56px;border-radius:15px;font-family:Archivo,system-ui,sans-serif;font-weight:850;box-shadow:0 14px 38px rgba(201,242,58,.16)}
.quartett-setup{position:relative;max-width:960px;padding:clamp(26px,4vw,46px);border:1px solid var(--cc-line);border-radius:var(--app-radius,28px);background:radial-gradient(circle at 8% 0,rgba(201,242,58,.14),transparent 33%),radial-gradient(circle at 94% 10%,rgba(255,155,77,.08),transparent 30%),var(--app-surface,linear-gradient(145deg,rgba(24,29,22,.96),rgba(10,12,11,.99)));box-shadow:var(--app-shadow,0 28px 80px rgba(0,0,0,.28));overflow:hidden}
.quartett-setup-copy{max-width:720px;padding:8px 0 0}
.quartett-setup-copy h2{margin:13px 0 14px;font-size:clamp(48px,7vw,78px);line-height:.83;letter-spacing:-.065em;text-transform:uppercase}
.quartett-setup-copy p{max-width:640px;font-size:14px;line-height:1.55}
.quartett-player-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:26px 0 18px}
.quartett-player-options button{align-items:flex-start;min-height:128px;flex-direction:column;padding:17px;border-radius:18px;background:rgba(255,255,255,.035);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.quartett-player-options button:hover{transform:translateY(-2px);border-color:rgba(201,242,58,.28)}
.quartett-player-options button>b{width:46px;height:46px;border-radius:14px}
.quartett-player-options button>span{gap:6px}
.quartett-player-options strong{font-size:14px}
.quartett-player-options small{font-size:11px}
.quartett-player-options button>i{position:absolute;top:16px;right:16px}
.quartett-player-options button{position:relative}
.quartett-origin{padding:20px;border-radius:19px;background:rgba(255,255,255,.035)}
.quartett-origin>p{font-size:11.5px}
.quartett-difficulty{padding:14px 16px;border-radius:17px;background:rgba(0,0,0,.2)}
.quartett-difficulty strong{font-size:13px}
.quartett-table-screen{padding:clamp(18px,2.5vw,30px);border:1px solid var(--cc-line);border-radius:var(--app-radius,28px);background:radial-gradient(ellipse at 50% 28%,rgba(201,242,58,.075),transparent 44%),var(--app-surface,linear-gradient(145deg,rgba(24,29,22,.96),rgba(10,12,11,.99)));box-shadow:var(--app-shadow,0 28px 80px rgba(0,0,0,.28))}

.quartett-end-head h2{text-transform:uppercase}
.quartett-end{padding:clamp(24px,4vw,40px);border:1px solid var(--cc-line);border-radius:var(--app-radius,28px);background:var(--app-surface,linear-gradient(145deg,rgba(24,29,22,.96),rgba(10,12,11,.99)));box-shadow:var(--app-shadow,0 28px 80px rgba(0,0,0,.28))}

@media(min-width:900px){
  body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{max-width:var(--app-content-max,1180px)}
  .quartett-setup{max-width:960px}
  .quartett-end{max-width:820px}
  
}

@media(max-width:899px){
  .quartett-setup{padding:22px 18px;border-radius:22px}
  .quartett-setup-copy h2{font-size:clamp(42px,12vw,54px)}
  .quartett-setup-copy p{font-size:12.5px}
  .quartett-player-options{grid-template-columns:1fr;margin:22px 0 16px}
  .quartett-player-options button{min-height:74px;flex-direction:row;align-items:center;padding:12px 14px}
  .quartett-player-options button>i{position:static;margin-left:auto}
  .quartett-origin{padding:16px}
  .quartett-table-screen{min-height:calc(100dvh - var(--app-head-h) - var(--app-tabbar-h) - 28px);padding:16px 14px;border-radius:22px}
  .quartett-end{padding:22px 18px;border-radius:22px}
}

/* v9: Der Quartett-Einstieg folgt exakt der gemeinsamen App-Bühne. */

body.app-shell-page[data-app-route="/app/spielen"] .quartett-screen{max-width:var(--app-frame-max,1160px)!important}
body.app-shell-page[data-app-route="/app/spielen"] .quartett-setup{
  width:100%;
  max-width:none!important;
  margin:0!important;
  padding:var(--app-frame-padding,46px)!important;
  border-radius:var(--app-frame-radius,28px)!important;
}
body.app-shell-page[data-app-route="/app/spielen"] .quartett-setup-copy h2{
  font-family:Archivo,system-ui,sans-serif!important;
  font-size:var(--app-page-title-size,64px)!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:var(--app-page-title-line,.86)!important;
  letter-spacing:-.055em!important;
}
body.app-shell-page[data-app-route="/app/spielen"] .quartett-setup-copy p{font-size:var(--app-page-lead-size,15px)!important;font-style:normal!important;font-weight:600!important;line-height:1.5!important}

/* ==========================================================================
   v10: Duell-Tisch — Karten nebeneinander, Mitte als Schaltzentrale
   Ansage (#8a) und Aufgedeckt (#8b) sind derselbe Aufbau. Kopfzeile,
   Kartenpositionen und Mittelachse bleiben beim Übergang stehen; es wechseln
   nur die Inhalte. Spielregeln, Kartenmodell und Bot-Verhalten sind davon
   nicht berührt.
   Farbwerte liegen bewusst lokal auf .quartett-duel: --duel-dim ist mit
   #7c8079 heller als das globale --cc-dim und markiert die Untergrenze für
   Text auf dunklem Grund.
   ========================================================================== */

/* ==========================================================================
   v10: Duell-Tisch — Karten nebeneinander,Mitte als Schaltzentrale
   Ansage (#8a) und Aufgedeckt (#8b) sind derselbe Aufbau. Kopfzeile,Kartenpositionen und Mittelachse bleiben beim Übergang stehen; es wechseln
   nur die Inhalte. Spielregeln,Kartenmodell und Bot-Verhalten sind davon
   nicht berührt.
   Farbwerte liegen bewusst lokal auf .quartett-duel: --duel-dim ist mit
   #7c8079 heller als das globale --cc-dim und markiert die Untergrenze für
   Text auf dunklem Grund.
   ========================================================================== */
.quartett-duel{
  --duel-rail:#0a0b0a;
  --duel-surface:#111412;
  --duel-surface-2:#0f110f;
  --duel-line:rgba(255,255,255,.08);
  --duel-lime:#c9f23a;
  --duel-lime-a:#dbff5e;
  --duel-lime-b:#a8e01c;
  --duel-cream:#f3efe3;
  --duel-muted:#8d918a;
  --duel-dim:#7c8079;
  --duel-tie:#ffd166;
  --duel-epic:#c8a6ff;
  /* Einzige neue Farbe aus Rev. 2 §5a, ausschließlich für Zeitdruck. */
  --cc-alarm:#ff7a3d;
  /* Höhe der Uhr samt Rändern. Der aufgedeckte Zustand reserviert dieselbe
     Strecke als Linie, damit die Karten beim Übergang nicht springen. */
  --clock-slot:168px;
  position:relative;
  padding:0;
  /* Die Bühne trägt ihre Höhe selbst. Die geerbte Mindesthöhe der Spieltisch-
     Klasse ließ auf hohen Fenstern bis zu 300px leeren Rahmen unter den Karten
     stehen — die Definition of Done verbietet genau das. */
  min-height:0;
  overflow:hidden;
}
.quartett-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Kopfzeile */

.quartett-duel>.quartett-top{position:relative;z-index:3;grid-template-columns:auto 1fr auto;margin:0;padding:16px 26px;border-bottom:1px solid rgba(255,255,255,.06);background:var(--duel-rail)}
.quartett-duel>.quartett-top [data-quartett-close]{padding:8px 14px;border-radius:11px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--duel-muted);font:700 12px/1 Archivo,system-ui,sans-serif}
.quartett-duel>.quartett-top [data-quartett-close]:hover{background:rgba(255,255,255,.09);color:var(--duel-cream)}
.quartett-duel>.quartett-top [data-quartett-rules]{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--duel-muted);font:600 13px/34px Poppins,system-ui,sans-serif}
.quartett-top-title{display:flex;align-items:center;justify-content:center;gap:14px}
.quartett-top-title span{color:var(--duel-muted);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.18em}
.quartett-top-title i{width:1px;height:11px;background:rgba(255,255,255,.14)}

.quartett-duel-glow{position:absolute;z-index:0;left:50%;top:40px;width:min(74vw,760px);height:520px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(201,242,58,.08),transparent 68%);pointer-events:none;transition:background .4s ease}
.quartett-duel.is-reveal .quartett-duel-glow{background:radial-gradient(ellipse,rgba(201,242,58,.14),transparent 68%)}

/* Bühne: links Karte, Mitte Schaltzentrale, rechts Karte — gleich hoch. */

/* Bühne: links Karte,Mitte Schaltzentrale,rechts Karte — gleich hoch. */
.quartett-duel-stage{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:center;padding:26px 26px 30px}
.quartett-duel-side{display:flex;flex:1;gap:14px;min-width:0;max-width:430px}
.quartett-duel-side[data-foes="2"]{gap:10px}
.quartett-duel-side[data-foes="3"]{gap:8px}

.quartett-duel-card{display:flex;flex:1;min-width:0;flex-direction:column;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:var(--duel-surface-2);overflow:hidden;box-shadow:0 26px 58px rgba(0,0,0,.82)}
.quartett-duel-card.is-mine{background:var(--duel-surface);border-color:rgba(201,242,58,.4);box-shadow:0 26px 58px rgba(0,0,0,.82),0 0 40px rgba(201,242,58,.1)}
.quartett-duel-card.is-empty{align-items:center;justify-content:center;padding:28px;text-align:center}
.quartett-duel-card.is-empty strong{display:block;color:var(--duel-cream);font:700 14px/1.3 Poppins,system-ui,sans-serif}
.quartett-duel-card.is-empty span{display:block;margin-top:7px;color:var(--duel-muted);font:500 11.5px/1.5 Poppins,system-ui,sans-serif}

/* 1. Besitzerzeile */

.quartett-duel-owner{display:flex;align-items:center;gap:9px;flex:none;padding:11px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.quartett-duel-card.is-mine .quartett-duel-owner{background:rgba(201,242,58,.14);border-bottom-color:rgba(201,242,58,.28)}
.quartett-duel-owner>b{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);color:var(--duel-cream);font:700 9px/1 Poppins,system-ui,sans-serif}
.quartett-duel-card.is-mine .quartett-duel-owner>b{background:var(--duel-lime);color:#0a0b0a}
.quartett-duel-owner>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--duel-cream);font:700 12px/1 Poppins,system-ui,sans-serif}
.quartett-duel-owner>span{display:flex;align-items:baseline;gap:5px;flex:none;margin-left:auto}
.quartett-duel-owner i{color:var(--duel-cream);font:700 15px/1 'Chakra Petch','JetBrains Mono',monospace;font-style:normal}
.quartett-duel-card.is-mine .quartett-duel-owner i{color:var(--duel-lime)}
.quartett-duel-owner small{color:var(--duel-dim);font:700 9px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.1em}
.quartett-duel-owner em{margin-right:3px;color:var(--duel-muted);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;font-style:normal}

/* 2. Foto */

.quartett-duel-photo{position:relative;height:216px;flex:none;overflow:hidden;background:#0a0b0a}
.quartett-duel-photo img{position:relative;z-index:1;display:block;width:100%;height:216px;object-fit:cover}
.quartett-duel-photo:has(img):not(.is-low-res) .quartett-image-fallback{display:none!important}
.quartett-duel-photo:after{content:'';position:absolute;z-index:2;left:0;right:0;bottom:0;height:118px;background:linear-gradient(180deg,transparent,rgba(10,11,10,.92));pointer-events:none}
.quartett-duel-foil{position:absolute;z-index:2;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.2),transparent 40%);pointer-events:none}
.quartett-duel-origin,.quartett-duel-rarity{position:absolute;top:12px;z-index:3;padding:5px 9px;border-radius:7px;background:rgba(10,11,10,.72);font:700 8.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.12em}
.quartett-duel-origin{left:12px;color:var(--duel-lime);border:1px solid rgba(201,242,58,.4)}
.quartett-duel-origin.is-pool{color:#7fd4ff;border-color:rgba(127,212,255,.4)}
.quartett-duel-rarity{right:12px;color:var(--duel-cream);border:1px solid rgba(255,255,255,.16)}
.quartett-duel-name{position:absolute;left:14px;right:14px;bottom:12px;z-index:3}
.quartett-duel-name small{display:block;color:var(--duel-muted);font:700 8.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.14em}
.quartett-duel-name h3{margin:6px 0 0;color:var(--duel-cream);font:800 28px/1.02 Archivo,system-ui,sans-serif;letter-spacing:-.03em}

/* Verdeckte Gegnerkarte */

.quartett-duel-back{display:grid;place-content:center;justify-items:center;gap:13px;height:216px;flex:none;background:repeating-linear-gradient(45deg,#1a1d19 0 9px,#131713 9px 18px);border-bottom:1px solid rgba(255,255,255,.07)}
.quartett-duel-back>span{width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(10,11,10,.5);color:var(--duel-muted);font:600 30px/74px Poppins,system-ui,sans-serif;text-align:center}
.quartett-duel-back>small{max-width:230px;color:var(--duel-muted);font:700 8.5px/1.5 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.13em;text-align:center}

/* 3. Werteliste */

.quartett-duel-stats{display:flex;flex-direction:column;gap:5px;padding:12px 12px 14px}
.quartett-duel-stat{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--duel-cream);text-align:left}
button.quartett-duel-stat{cursor:pointer;transition:background .18s ease,border-color .18s ease}
button.quartett-duel-stat:hover{background:rgba(201,242,58,.14);border-color:var(--duel-lime)}
.quartett-duel-stat>i{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:5px;background:rgba(255,255,255,.07);color:var(--duel-muted);font:600 10px/1 Poppins,system-ui,sans-serif;font-style:normal}
.quartett-duel-stat>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1 Poppins,system-ui,sans-serif}
.quartett-duel-stat>strong{flex:none;font:700 19px/1 'Chakra Petch','JetBrains Mono',monospace}
.quartett-duel-stat>strong small{color:var(--duel-dim);font:700 9px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.08em}
.quartett-duel-stat>b{display:block;width:var(--blind-width,56px);height:9px;flex:none;border-radius:5px;background:rgba(255,255,255,.08)}
.quartett-duel-stat.is-called{background:rgba(201,242,58,.14);border-color:var(--duel-lime)}
.quartett-duel-stat.is-called>span,.quartett-duel-stat.is-called>strong{color:var(--duel-lime)}
.quartett-duel-stat.is-called>i{background:rgba(201,242,58,.2);color:var(--duel-lime)}
.quartett-duel-stat.is-locked.is-won{border:1px solid var(--duel-lime);background:rgba(201,242,58,.2)}
.quartett-duel-stat.is-locked.is-won>strong{font-size:22px;color:var(--duel-lime)}
.quartett-duel-stat.is-locked.is-lost{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.quartett-duel-stat.is-locked.is-lost>strong{color:var(--duel-muted)}
.quartett-duel-stat.is-locked.is-even{border-color:var(--duel-tie);background:rgba(255,209,102,.16)}
.quartett-duel-stat.is-locked.is-even>strong{font-size:22px;color:var(--duel-tie)}
.quartett-duel-stat.is-faded{opacity:.5}

/* Siegerkarte und Verliererkarte */

.quartett-duel-card.is-winner .quartett-duel-owner{background:var(--duel-lime);border-bottom-color:var(--duel-lime)}
.quartett-duel-card.is-winner .quartett-duel-owner>b{background:#0a0b0a;color:var(--duel-lime)}
.quartett-duel-card.is-winner .quartett-duel-owner>strong,.quartett-duel-card.is-winner .quartett-duel-owner i{color:#0a0b0a}
.quartett-duel-card.is-winner .quartett-duel-owner small,.quartett-duel-card.is-winner .quartett-duel-owner em{color:rgba(10,11,10,.85)}

/* 4. Mittelspalte — Schaltzentrale */

.quartett-duel-axis{position:relative;z-index:2;display:flex;flex:none;width:196px;flex-direction:column;align-items:center;padding:0 14px}
.quartett-duel-pot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:104px;flex:none;border-radius:50%;background:radial-gradient(circle at 38% 30%,var(--duel-lime-a),var(--duel-lime-b));box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 34px rgba(201,242,58,.28)}
.quartett-duel-pot b{color:#0a0b0a;font:800 34px/1 Archivo,system-ui,sans-serif;letter-spacing:-.03em}
.quartett-duel-pot small{margin-top:5px;color:rgba(10,11,10,.72);font:700 8px/1.3 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.12em;text-align:center}
.quartett-duel-thread{width:1px;flex:1;min-height:14px;margin:14px 0;background:linear-gradient(180deg,rgba(201,242,58,.4),rgba(255,255,255,.08))}
.quartett-duel-axis>.quartett-duel-thread:last-of-type{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(201,242,58,.4))}
.quartett-duel-compare{position:relative;width:100%;flex:none;padding:14px 12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:var(--duel-surface-2);text-align:center}
.quartett-duel-compare.is-locked{border-color:rgba(201,242,58,.45)}
.quartett-duel-compare>small{display:block;color:var(--duel-dim);font:700 8.5px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.16em}
.quartett-duel-called{display:block;margin-top:8px;color:var(--duel-lime);font:700 12px/1.3 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.12em}
.quartett-duel-called.is-empty{color:var(--duel-muted)}
.quartett-duel-versus{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:13px}
.quartett-duel-versus b{font:700 20px/1 'Chakra Petch','JetBrains Mono',monospace}
.quartett-duel-versus b.is-strong{color:var(--duel-lime)}
.quartett-duel-versus b.is-weak,.quartett-duel-versus b.is-open{color:var(--duel-muted)}
.quartett-duel-versus i{width:30px;height:30px;flex:none;border-radius:50%;border:2px solid rgba(243,239,227,.85);background:rgba(10,11,10,.9);color:var(--duel-cream);font:800 11px/26px Archivo,system-ui,sans-serif;font-style:normal;text-align:center}
.quartett-duel.is-tie .quartett-duel-versus b.is-strong{color:var(--duel-tie)}
.quartett-duel-gap.is-placeholder{visibility:hidden}
.quartett-duel-gap{display:block;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:var(--duel-lime);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;font-style:normal;letter-spacing:.12em}
.quartett-duel-action{width:100%;height:54px;flex:none;margin-top:0;border:0;border-radius:15px;background:var(--duel-lime);color:#0a0b0a;font:700 14px/1 Poppins,system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 28px rgba(201,242,58,.3)}
.quartett-duel-action:hover:not([disabled]){background:var(--duel-lime-a)}
.quartett-duel-action[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.quartett-duel-hint{min-height:32px;margin:11px 0 0;color:var(--duel-dim);font:500 10.5px/1.5 Poppins,system-ui,sans-serif;text-align:center}

/* Popup — immer an derselben Stelle über dem Vergleichsblock. Es verschwindet
   nicht von selbst, sondern erst mit „Weiter“. */

/* Popup — immer an derselben Stelle über dem Vergleichsblock. Es verschwindet
   nicht von selbst,sondern erst mit „Weiter“. */
.quartett-duel-popup{position:absolute;left:50%;bottom:calc(100% + 15px);z-index:6;padding:9px 16px;border-radius:11px;color:#0a0b0a;font:800 15px/1 Archivo,system-ui,sans-serif;letter-spacing:-.025em;white-space:nowrap;transform:translateX(-50%) rotate(var(--pop-tilt,-3deg));box-shadow:0 18px 40px rgba(0,0,0,.6)}
.quartett-duel-popup.is-win{--pop-tilt:-3deg;background:var(--duel-lime);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 34px rgba(201,242,58,.45)}
.quartett-duel-popup.is-sweep{--pop-tilt:-3deg;background:var(--duel-epic);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 34px rgba(200,166,255,.45)}
.quartett-duel-popup.is-tie{--pop-tilt:-2deg;background:var(--duel-tie);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 34px rgba(255,209,102,.45)}
.quartett-duel-popup.is-loss{--pop-tilt:3deg;background:var(--duel-cream)}

/* Ablauf nach dem Aufdecken (§8) */
@keyframes duel-flip{from{transform:perspective(900px) rotateY(-76deg);opacity:.15}to{transform:none;opacity:1}}
@keyframes duel-lock{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
@keyframes duel-fade{from{opacity:1}to{opacity:.5}}
@keyframes duel-pop{0%{transform:translateX(-50%) rotate(var(--pop-tilt)) scale(.6);opacity:0}60%{transform:translateX(-50%) rotate(var(--pop-tilt)) scale(1.08);opacity:1}100%{transform:translateX(-50%) rotate(var(--pop-tilt)) scale(1);opacity:1}}
@keyframes duel-crown{from{border-color:rgba(255,255,255,.09);box-shadow:0 26px 58px rgba(0,0,0,.82)}to{border-color:var(--duel-lime);box-shadow:0 26px 58px rgba(0,0,0,.82),0 0 46px rgba(201,242,58,.22)}}
@keyframes duel-crown-tie{from{border-color:rgba(255,255,255,.09)}to{border-color:var(--duel-tie);box-shadow:0 26px 58px rgba(0,0,0,.82),0 0 40px rgba(255,209,102,.18)}}
@keyframes duel-dim{from{opacity:1}to{opacity:.74}}
@keyframes duel-shake{0%,100%{transform:none}20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.quartett-duel.is-reveal .quartett-duel-card.is-theirs{animation:duel-flip .38s ease both}
.quartett-duel.is-reveal .quartett-duel-stat.is-locked{animation:duel-lock .26s ease both .38s}
.quartett-duel.is-reveal .quartett-duel-stat.is-faded{animation:duel-fade .26s ease both .38s}
.quartett-duel.is-reveal .quartett-duel-popup{animation:duel-pop .26s cubic-bezier(.34,1.56,.64,1) both 1.02s}
.quartett-duel.is-reveal .quartett-duel-card.is-winner{animation:duel-crown .32s ease both 1.28s}
.quartett-duel.is-reveal .quartett-duel-card.is-tie{animation:duel-crown-tie .32s ease both 1.28s}
.quartett-duel.is-reveal .quartett-duel-card.is-loser{animation:duel-dim .32s ease both 1.28s}
.quartett-duel.is-reveal.is-win .quartett-duel-stage,.quartett-duel.is-reveal.is-sweep .quartett-duel-stage{animation:duel-shake .3s ease both 1.02s}

/* Weiter: die Karten fliegen sichtbar unter den Stapel, der sie einzieht. */

/* Weiter: die Karten fliegen sichtbar unter den Stapel,der sie einzieht. */
.quartett-duel.is-collecting .quartett-duel-card{transition:transform .52s cubic-bezier(.55,0,.75,.2),opacity .52s ease;opacity:0}
.quartett-duel.is-collecting .quartett-duel-card.is-winner{transform:scale(.18)}
.quartett-duel.is-collecting .quartett-duel-side.is-mine .quartett-duel-card:not(.is-winner){transform:translateX(300px) scale(.18)}
.quartett-duel.is-collecting .quartett-duel-side.is-theirs .quartett-duel-card:not(.is-winner){transform:translateX(-300px) scale(.18)}

/* Mehr als ein Gegner: Der Handoff beschreibt das Duell zu zweit. Bei drei und
   vier Spielern behält die Bühne ihre Achse, aber die Gegnerseite bekommt die
   Breite, die sie für mehrere Karten braucht, und die Gegnerkarten werden
   dichter — sonst reißen Modellname, Badges und Wertzeilen auf. */
.quartett-duel-name h3{overflow-wrap:anywhere}
.quartett-duel-stage[data-foes="2"] .quartett-duel-side.is-mine{max-width:360px}
.quartett-duel-stage[data-foes="2"] .quartett-duel-side.is-theirs{max-width:576px}
.quartett-duel-stage[data-foes="3"] .quartett-duel-side.is-mine{max-width:310px}
.quartett-duel-stage[data-foes="3"] .quartett-duel-side.is-theirs{max-width:636px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-origin,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-origin{display:none}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-photo,
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-photo img,
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-back,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-photo,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-photo img,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-back{height:216px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-back>span,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-back>span{width:56px;height:56px;font:600 22px/54px Poppins,system-ui,sans-serif}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-back>small,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-back>small{font-size:7.5px;letter-spacing:.1em;padding:0 10px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-name h3{font-size:18px;letter-spacing:-.02em}
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-name h3{font-size:16px;letter-spacing:-.02em}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-owner,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-owner{gap:6px;padding:10px}
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-owner>strong{font-size:11px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stats,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stats{gap:4px;padding:9px 9px 11px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stat,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stat{gap:7px;padding:0 9px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stat>span,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stat>span{font-size:10.5px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stat>strong,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stat>strong{font-size:15px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stat.is-locked.is-won>strong,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stat.is-locked.is-won>strong{font-size:17px}
.quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-stat>b,
.quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-stat>b{width:calc(var(--blind-width,56px) * .62)}

@media(min-width:1500px){
  .quartett-duel-stage{padding:34px 34px 40px}
  .quartett-duel-side{max-width:520px}
  .quartett-duel-axis{width:236px}
  .quartett-duel-photo,.quartett-duel-photo img,.quartett-duel-back{height:270px}
  .quartett-duel-name h3{font-size:34px}
  .quartett-duel-stat{min-height:52px}
  .quartett-duel-stat>strong{font-size:22px}
}

@media(max-width:899px){
  .quartett-duel>.quartett-top{padding:13px 15px}
  .quartett-duel-stage{flex-direction:column;gap:14px;padding:16px 14px 20px}
  .quartett-duel-side{width:100%;max-width:none}
  /* Reihenfolge wie im Markup: eigene Karte, dann Uhr und Knopf, dann der
     Gegner. Lag die Achse am Ende, standen Uhr und „Ansagen“ rund 700 px
     unter den Wertzeilen — man musste für jeden Zug zweimal scrollen. */
  .quartett-duel-side.is-mine{order:1}
  .quartett-duel-axis{order:2;width:100%;padding:0}
  .quartett-duel-side.is-theirs{order:3}
  .quartett-duel-thread{display:none}
  .quartett-duel-pot{width:78px;height:78px;margin-bottom:13px}
  .quartett-duel-pot b{font-size:26px}
  .quartett-duel-pot small{font-size:7px}
  .quartett-duel-compare{margin-bottom:14px}
  /* Ohne die Trennlinien steht der Vergleichsblock direkt unter dem Kreis.
     Das Popup sitzt über dem Block und würde ihn sonst verdecken. */
  .quartett-duel.is-reveal .quartett-duel-compare{margin-top:52px}
  .quartett-duel-photo,.quartett-duel-photo img,.quartett-duel-back{height:154px}
  .quartett-duel-name h3{font-size:24px}
  .quartett-duel-side[data-foes="2"],.quartett-duel-side[data-foes="3"]{gap:7px}
  .quartett-duel-side[data-foes="2"] .quartett-duel-name h3,.quartett-duel-side[data-foes="3"] .quartett-duel-name h3{font-size:16px}
  .quartett-duel.is-collecting .quartett-duel-side.is-mine .quartett-duel-card:not(.is-winner){transform:translateY(-160px) scale(.18)}
  .quartett-duel.is-collecting .quartett-duel-side.is-theirs .quartett-duel-card:not(.is-winner){transform:translateY(160px) scale(.18)}
}

/* Ohne Bewegung bleiben beide Zustände vollständig verständlich: kein Plopp,
   kein Shake, kein Kartenflug, alle Werte sofort final. */
@media(prefers-reduced-motion:reduce){
  .quartett-duel *,.quartett-duel-glow{animation:none!important;transition:none!important}
  .quartett-duel.is-collecting .quartett-duel-card{opacity:1;transform:none}
}

/* ==========================================================================
   v11: Spielen-Teaser auf der Startseite und Gastspiel unter /spielen
   Der Teaser ist derselbe Duell-Tisch als stehendes Bild — er erbt die
   Bühnenregeln aus v10, statt sie nachzubauen. Anstelle des Weiter-Knopfs
   steht dort der Einstieg ins Gastspiel.
   ========================================================================== */
.play-teaser{position:relative;z-index:1;display:grid;gap:clamp(20px,3vw,34px);padding:clamp(34px,6vw,72px) clamp(16px,4vw,40px)}
.play-teaser-copy{max-width:640px;margin:0 auto;text-align:center}
.play-teaser-copy h2{margin:10px 0 12px;font:800 clamp(32px,5vw,52px)/.94 Archivo,system-ui,sans-serif;letter-spacing:-.045em;text-transform:uppercase;color:var(--cc-cream)}
.play-teaser-copy p{margin:0;color:var(--cc-muted);font-size:clamp(13px,1.6vw,15px);line-height:1.55}
.play-teaser-stage{width:100%;max-width:1180px;margin:0 auto}
.play-teaser .quartett-duel{width:100%}

/* Kopfzeile des Teasers: dieselbe Optik, aber ohne bedienbare Knöpfe. */
.quartett-top-back,.quartett-top-help{display:grid;place-items:center;color:var(--duel-muted,#8d918a);font:700 12px/1 Archivo,system-ui,sans-serif}
.quartett-top-back{justify-self:start;padding:8px 14px;border-radius:11px;background:rgba(255,255,255,.05)}
.quartett-top-help{justify-self:end;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);font:600 13px/1 Poppins,system-ui,sans-serif}

/* Der Spielen-Knopf ist ein Link, kein Button — er muss seine Beschriftung
   selbst zentrieren. */
a.quartett-duel-action{display:grid;place-items:center;text-decoration:none}
a.quartett-duel-action:hover{background:var(--duel-lime-a);color:#0a0b0a}

@media(max-width:899px){
  /* Auf dem Handy trägt der Teaser nur die entscheidende Zeile: zwei Fotos,
     der angesagte Wert auf beiden Karten, der Knopf. Die vollständige
     Werteliste bläht die Startseite sonst um über tausend Pixel auf. */
  .play-teaser{padding:30px 14px 34px}
  .play-teaser .quartett-duel-photo,
  .play-teaser .quartett-duel-photo img{height:132px}
  .play-teaser .quartett-duel-name h3{font-size:17px}
  .play-teaser .quartett-duel-name small{font-size:7.5px}
  .play-teaser .quartett-duel-stat.is-faded{display:none}
  .play-teaser .quartett-duel-stage{gap:10px;padding:14px 12px 18px}
  .play-teaser .quartett-duel-pot{width:66px;height:66px;margin-bottom:11px}
  .play-teaser .quartett-duel-pot b{font-size:22px}
  .play-teaser .quartett-duel.is-reveal .quartett-duel-compare{margin-top:48px}
}

/* main.css legt über `.primary,button{…}` einen orangeroten Schatten auf jeden
   Button. Auf der Duell-Bühne ist er in v10 abgeräumt; die übrigen Quartett-
   Bildschirme brauchen dieselbe Behandlung, sonst glüht die Kopfzeile. */
.quartett-top button,.quartett-error button{box-shadow:none}

/* --- Gastspiel-Rahmen unter /spielen ------------------------------------ */
/* Wie im Login-Bereich: Die Landingpage bleibt im Dokument, tritt aber nicht
   in Erscheinung. Ein Header pro Bereich. */
body.guest-play-page{padding-top:0!important;background:#08090a;color:var(--cc-cream)}
body.guest-play-page>.noise,
body.guest-play-page>.asphalt,
body.guest-play-page>.mobile-sticky-cta-sentinel{display:none!important}
body.guest-play-page>main#top,
body.guest-play-page>footer,
body.guest-play-page>.paper-tear,
body.guest-play-page>.picks-mobile-spotlight,
body.guest-play-page>.site-header,
body.guest-play-page>.profile-menu,
body.guest-play-page .story-rail{display:none!important}
.guest-play-shell{display:flex;min-height:100dvh;flex-direction:column}
.guest-play-head{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:56px;padding:0 clamp(14px,3vw,26px);border-bottom:1px solid var(--cc-line);background:rgba(10,11,10,.92);backdrop-filter:blur(12px)}
.guest-play-brand{display:grid;place-items:center;width:34px;height:34px}
.guest-play-brand img{display:block;width:28px;height:28px}
.guest-play-title{text-align:center;color:var(--cc-muted);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.guest-play-login{min-height:36px;padding:0 14px;border:1px solid var(--cc-line);border-radius:11px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--cc-cream);font:700 12px/1 Archivo,system-ui,sans-serif;cursor:pointer}
.guest-play-login:hover{background:rgba(255,255,255,.1)}
.guest-play-route{width:100%;max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,26px)}
.guest-play-route .quartett-screen{max-width:none}

/* --- Abschluss der Proberunde ------------------------------------------- */
.quartett-guest-end{display:grid;gap:18px;padding:clamp(20px,3vw,30px)!important;min-height:0}
.quartett-guest-end .quartett-end-head{text-align:center}
.quartett-guest-end .quartett-end-head h2{margin:10px 0 8px;font:800 clamp(44px,8vw,72px)/.9 Archivo,system-ui,sans-serif;letter-spacing:-.05em}
.quartett-guest-end .quartett-end-head p{margin:0;color:var(--cc-muted);font-size:12.5px}
/* Die Zeile trägt den versteckten Test-Ausstieg (fünf schnelle Tipps). Sie
   bekommt bewusst keinen Zeiger und keine Hover-Farbe — sonst wäre es kein
   verstecktes Ei mehr, sondern ein Knopf über dem Registrieren-Knopf. Nur die
   Textauswahl ist aus, damit Mehrfachtippen nicht markiert. */
.quartett-guest-register [data-quartett-secret]{user-select:none;-webkit-user-select:none}
.quartett-guest-register{display:grid;justify-items:center;gap:9px;padding:clamp(18px,3vw,26px);border:1px solid rgba(201,242,58,.3);border-radius:20px;background:radial-gradient(circle at 50% 0,rgba(201,242,58,.12),transparent 62%),rgba(255,255,255,.03);text-align:center}
.quartett-guest-register strong{max-width:460px;font:800 clamp(19px,2.6vw,25px)/1.12 Archivo,system-ui,sans-serif;letter-spacing:-.03em;color:var(--cc-cream)}
.quartett-guest-register p{max-width:460px;margin:0;color:var(--cc-muted);font-size:12.5px;line-height:1.55}
.quartett-guest-register .quartett-primary{width:auto;min-width:min(320px,100%);margin-top:5px}
.quartett-guest-login{min-height:40px;padding:0 14px;border:0;border-radius:11px;background:none;box-shadow:none;color:var(--cc-muted);font:600 12px/1 Poppins,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quartett-guest-login:hover{color:var(--cc-cream)}
.quartett-guest-actions{display:grid;justify-items:center;gap:9px}
.quartett-guest-actions button{min-height:46px;padding:0 22px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--cc-cream);font:700 13px/1 Archivo,system-ui,sans-serif;cursor:pointer}
.quartett-guest-actions button:hover{background:rgba(255,255,255,.1)}
.quartett-guest-actions small{color:var(--cc-dim);font:600 11px/1 Poppins,system-ui,sans-serif}
.quartett-guest-actions a{color:var(--cc-muted);font:600 12px/1 Poppins,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}
.quartett-guest-actions a:hover{color:var(--cc-cream)}

/* ==========================================================================
   v13: Ansage-Uhr in der Mittelachse (Handoff Rev. 2, §5a)
   Zehn Sekunden pro Zug, prominent zwischen Vergleichsblock und Primäraktion —
   dort pendelt der Blick zwischen Wert und Aktion. Die Farbe ist die Warnung,
   nicht ein Text; außer dem Mikro-Label SEKUNDEN steht keine Beschriftung da.
   §11 verbietet eine zusätzliche Fortschrittsleiste — der Ring trägt die Zeit
   allein.
   Zwei Abweichungen von der Vorlage, beide auf Ansage des Auftraggebers vom
   22.08.2026: Die Uhr läuft auch im Bot-Zug (§5a schließt das aus), und sie
   lässt sich abschalten — eine selbsttätig ablaufende Zeit ohne Ausweg wäre
   auch eine Barriere.
   ========================================================================== */
.quartett-top-tools{display:flex;align-items:center;gap:8px;justify-self:end}

.quartett-clock{position:relative;width:152px;height:152px;flex:none;margin:8px 0}
.quartett-clock-gap{flex:none;height:var(--clock-slot);margin:0}
.quartett-clock>button{position:relative;display:block;width:152px;height:152px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;cursor:pointer}
.quartett-clock svg{position:absolute;inset:0;width:152px;height:152px;transform:rotate(-90deg)}
.quartett-clock circle{fill:none;stroke-width:9}
.quartett-clock-track{stroke:rgba(255,255,255,.07)}
.quartett-clock-ring{stroke:var(--duel-lime,#c9f23a);stroke-linecap:round;stroke-dasharray:427;stroke-dashoffset:0}
.quartett-clock-halo{position:absolute;left:50%;top:50%;width:114px;height:114px;margin:-57px 0 0 -57px;border-radius:50%;pointer-events:none;box-shadow:0 0 34px 6px rgba(201,242,58,.42)}
.quartett-clock-disc{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:1px solid rgba(255,255,255,.07);background:#0b0d0b}
.quartett-clock b{position:absolute;left:0;right:0;top:26px;color:var(--duel-lime,#c9f23a);font:800 66px/79px Archivo,system-ui,sans-serif;letter-spacing:-.05em;text-align:center}
.quartett-clock small{position:absolute;left:0;right:0;bottom:30px;color:#7c8079;font:700 8px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.2em;text-align:center}

/* Farbphasen: 10–5 Lime, 4–3 Gelb, 2–0 Alarm. --cc-alarm ist ausschließlich
   für Zeitdruck reserviert und darf nirgends sonst auftauchen. */
.quartett-clock[data-phase="warn"]{--cc-clock:var(--duel-tie,#ffd166)}
.quartett-clock[data-phase="alarm"],.quartett-clock[data-phase="over"]{--cc-clock:var(--cc-alarm,#ff7a3d)}
.quartett-clock[data-phase="warn"] .quartett-clock-ring,
.quartett-clock[data-phase="alarm"] .quartett-clock-ring,
.quartett-clock[data-phase="over"] .quartett-clock-ring{stroke:var(--cc-clock)}
.quartett-clock[data-phase="warn"] b,
.quartett-clock[data-phase="alarm"] b,
.quartett-clock[data-phase="over"] b{color:var(--cc-clock)}
.quartett-clock[data-phase="warn"] .quartett-clock-halo{box-shadow:0 0 36px 7px rgba(255,209,102,.5)}
.quartett-clock[data-phase="alarm"] .quartett-clock-halo,
.quartett-clock[data-phase="over"] .quartett-clock-halo{box-shadow:0 0 42px 9px rgba(255,122,61,.58)}
/* Abgelaufen: gestrichelte Kontur, Ziffer bleibt in Alarmfarbe stehen. */
.quartett-clock[data-phase="over"] .quartett-clock-ring{stroke-dasharray:4 7;stroke-dashoffset:0;animation:none}

@keyframes quartett-clock-sweep{from{stroke-dashoffset:0}to{stroke-dashoffset:427}}
@keyframes quartett-clock-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.quartett-clock[data-running="true"] .quartett-clock-ring{animation:quartett-clock-sweep var(--turn-seconds,10s) linear both}
.quartett-clock[data-running="true"][data-phase="alarm"]{animation:quartett-clock-beat 1s ease-in-out infinite}

/* Abgeschaltete Uhr: ein ruhiger Platzhalter, über den sie zurückkommt. */
.quartett-clock-off{position:relative;margin:8px 0}
.quartett-clock-off>button{min-height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);box-shadow:none;color:var(--duel-dim,#7c8079);font:700 10px/1 'Chakra Petch','JetBrains Mono',monospace;letter-spacing:.16em;cursor:pointer}
.quartett-clock-off>button:hover{color:var(--duel-cream,#f3efe3)}

.quartett-clock-menu{position:absolute;z-index:9;left:50%;top:calc(100% + 9px);width:230px;transform:translateX(-50%);padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:#0f120f;box-shadow:0 22px 48px rgba(0,0,0,.66);text-align:left}
.quartett-clock-menu[hidden]{display:none}
.quartett-clock-menu p{margin:0 0 11px;color:var(--duel-muted,#8d918a);font:500 11px/1.5 Poppins,system-ui,sans-serif}
.quartett-clock-menu button{width:100%;min-height:40px;text-align:center;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.05);box-shadow:none;color:var(--duel-cream,#f3efe3);font:700 12px/1 Archivo,system-ui,sans-serif;cursor:pointer}
.quartett-clock-menu button:hover{background:rgba(255,255,255,.1)}

@media(prefers-reduced-motion:reduce){
  /* Ring und Puls stehen still, die Ziffer wechselt weiter im Sekundentakt,
     die Farbphasen greifen unverändert (§5a). */
  .quartett-clock[data-running="true"] .quartett-clock-ring,
  .quartett-clock[data-running="true"][data-phase="alarm"]{animation:none!important}
}

@media(max-width:899px){
  .quartett-duel{--clock-slot:142px}
  .quartett-clock,.quartett-clock>button,.quartett-clock svg{width:126px;height:126px}
  .quartett-clock b{top:20px;font-size:54px;line-height:66px}
  .quartett-clock small{bottom:24px}
  .quartett-clock-halo,.quartett-clock-disc{width:94px;height:94px;margin:-47px 0 0 -47px}
  .quartett-clock-menu{width:min(230px,calc(100vw - 32px))}
}

/* ==========================================================================
   v14: Querformat auf dem Telefon
   Gedrehtes Telefon heißt: dieselbe dreispaltige Bühne wie am Desktop, nur
   dichter. Das ist die eigentliche Antwort auf das Scrollen im Hochformat —
   Karten nebeneinander, Uhr und Knopf immer im Bild.
   Die Höhe ist hier der knappe Wert, nicht die Breite: ein Telefon im
   Querformat hat rund 390 px Höhe. Fotos, Kreis und Uhr schrumpfen deshalb,
   die Trefferfläche der Wertzeilen bleibt bei 44 px.
   ========================================================================== */
@media(max-width:1024px) and (orientation:landscape){
  .quartett-duel>.quartett-top{padding:9px 14px}
  .quartett-duel-stage{flex-direction:row;align-items:stretch;gap:0;padding:12px 12px 14px}
  .quartett-duel-side{flex:1;width:auto;max-width:none;gap:8px}
  .quartett-duel-side.is-mine,.quartett-duel-axis,.quartett-duel-side.is-theirs{order:0}
  .quartett-duel-axis{width:150px;flex:none;padding:0 8px}
  .quartett-duel-thread{display:block;min-height:6px;margin:6px 0}
  .quartett-duel-pot{width:56px;height:56px;margin-bottom:0}
  .quartett-duel-pot b{font-size:19px}
  .quartett-duel-pot small{margin-top:2px;font-size:6px;letter-spacing:.1em}
  .quartett-duel-compare{padding:9px 8px;margin-bottom:0}
  .quartett-duel.is-reveal .quartett-duel-compare{margin-top:0}
  .quartett-duel-compare>small{font-size:7.5px}
  .quartett-duel-called{margin-top:5px;font-size:10px}
  .quartett-duel-versus{gap:6px;margin-top:7px}
  .quartett-duel-versus b{font-size:16px}
  .quartett-duel-versus i{width:24px;height:24px;font-size:9px;line-height:20px}
  .quartett-duel-gap{margin-top:7px;padding-top:6px;font-size:9px}
  .quartett-duel-owner{padding:7px 10px}
  .quartett-duel-owner>b{width:20px;height:20px;font-size:8px}
  .quartett-duel-owner>strong{font-size:10.5px}
  .quartett-duel-owner i{font-size:12px}
  .quartett-duel-photo,.quartett-duel-photo img,.quartett-duel-back{height:96px}
  .quartett-duel-back>span{width:44px;height:44px;font:600 18px/42px Poppins,system-ui,sans-serif}
  .quartett-duel-back>small{font-size:6.5px;letter-spacing:.1em;padding:0 8px}
  .quartett-duel-name h3{font-size:15px}
  .quartett-duel-name small{font-size:7px}
  .quartett-duel-photo:after{height:60px}
  .quartett-duel-stats{gap:4px;padding:8px 8px 9px}
  .quartett-duel-stat{min-height:44px;gap:7px;padding:0 9px}
  .quartett-duel-stat>span{font-size:11px}
  .quartett-duel-stat>strong{font-size:15px}
  .quartett-duel-stat.is-locked.is-won>strong,.quartett-duel-stat.is-locked.is-even>strong{font-size:17px}
  .quartett-duel-action{height:44px;font-size:12.5px}
  .quartett-duel-hint{min-height:0;margin-top:6px;font-size:9px;line-height:1.35}
  .quartett-duel{--clock-slot:104px}
  .quartett-clock,.quartett-clock>button,.quartett-clock svg{width:96px;height:96px}
  .quartett-clock{margin:4px 0}
  .quartett-clock b{top:14px;font-size:40px;line-height:50px}
  .quartett-clock small{bottom:16px;font-size:6.5px}
  .quartett-clock-halo,.quartett-clock-disc{width:70px;height:70px;margin:-35px 0 0 -35px}
  /* Über dem Vergleichsblock ist im Querformat kein Platz: Die Achse steht
     dicht unter der Kopfzeile, das Popup lief oben aus der Bühne und wurde
     abgeschnitten. Es läuft hier deshalb im Fluss und krönt den Block, statt
     darüber zu schweben — gleiche Stelle in der Achse, gleiche Farben, nur
     ohne die absolute Lage. */
  .quartett-duel-popup{position:static;display:block;margin:0 auto 9px;transform:rotate(var(--pop-tilt,-3deg));width:max-content}
  .quartett-clock-menu{width:min(210px,60vw)}
  /* Der Gegner-Stapel bleibt im Querformat nebeneinander lesbar. */
  .quartett-duel-side.is-theirs[data-foes="2"],.quartett-duel-side.is-theirs[data-foes="3"]{gap:6px}
  .quartett-duel-side.is-theirs[data-foes="2"] .quartett-duel-name h3,
  .quartett-duel-side.is-theirs[data-foes="3"] .quartett-duel-name h3{font-size:12px}
  .guest-play-head{min-height:44px}
  .guest-play-route{padding:8px 10px}
}

/* ==========================================================================
   v15: Spielbarkeit auf dem Telefon
   Ziel beider Blöcke: Uhr und Aktionsknopf stehen ohne Scrollen im Bild.
   Der Restkarten-Kreis weicht dafür — seine Zahl steht ohnehin aufgeschlüsselt
   in den Besitzerzeilen beider Karten, während Uhr und Knopf gebraucht werden,
   um überhaupt zu spielen.
   ========================================================================== */
@media(max-width:899px) and (orientation:portrait){
  .quartett-duel-pot{display:none}
  .quartett-duel-photo,.quartett-duel-photo img,.quartett-duel-back{height:132px}
  .quartett-duel-back>span{width:56px;height:56px;font:600 22px/54px Poppins,system-ui,sans-serif}
  .quartett-duel-name h3{font-size:20px}
  .quartett-duel-stats{gap:4px;padding:9px 9px 11px}
  .quartett-duel-compare{padding:11px 10px;margin-bottom:10px}
  .quartett-duel.is-reveal .quartett-duel-compare{margin-top:44px}
  .quartett-duel-hint{min-height:0;margin-top:8px;font-size:10px}
  .quartett-duel{--clock-slot:112px}
  .quartett-clock,.quartett-clock>button,.quartett-clock svg{width:96px;height:96px}
  .quartett-clock{margin:6px 0}
  .quartett-clock b{top:14px;font-size:40px;line-height:50px}
  .quartett-clock small{bottom:16px;font-size:6.5px}
  .quartett-clock-halo,.quartett-clock-disc{width:70px;height:70px;margin:-35px 0 0 -35px}
}

@media(max-width:1024px) and (orientation:landscape){
  .quartett-duel{overflow:clip}
  .quartett-duel-pot{display:none}
  /* Die Mittelachse bleibt stehen, während die Karten scrollen: Auf 390 px
     Höhe passen fünf Wertzeilen mit 44 px Trefferfläche nicht zusätzlich ins
     Bild, und die Trefferfläche ist wichtiger als das letzte Stück Karte. */
  .quartett-duel-axis{position:sticky;top:6px;align-self:start}
}

/* v15b: Feinschliff, damit Uhr und Knopf ohne Scrollen stehen. */
@media(max-width:899px) and (orientation:portrait){
  .quartett-duel>.quartett-top{padding:10px 14px}
  .quartett-duel-stage{padding:12px 12px 16px}
  /* Die Platzhalter halten am Desktop die Kartenhöhe konstant. Im Hochformat
     stapeln die Karten, dort hält niemand etwas frei — sie kosten nur Platz. */
  .quartett-duel-gap.is-placeholder{display:none}
  .quartett-duel-hint{margin-top:6px;font-size:9.5px;line-height:1.4}
  .quartett-duel-photo,.quartett-duel-photo img,.quartett-duel-back{height:118px}
  .quartett-duel{--clock-slot:100px}
  .quartett-clock,.quartett-clock>button,.quartett-clock svg{width:88px;height:88px}
  .quartett-clock{margin:6px 0}
  .quartett-clock b{top:15px;font-size:34px;line-height:44px}
  .quartett-clock small{bottom:18px;font-size:6px}
  .quartett-clock-halo,.quartett-clock-disc{width:64px;height:64px;margin:-32px 0 0 -32px}
  /* Der Knopf folgt nach unten mit, solange die Achse im Bild ist. Damit ist
     er in jeder Scrollposition erreichbar, ohne feste Leiste über dem Inhalt.
     `overflow:hidden` auf der Bühne machte daraus einen eigenen Scroll-Container
     und hätte das Kleben stillschweigend ausgehebelt; `overflow:clip` schneidet
     genauso ab, ohne diese Bindung zu kappen. */
  .quartett-duel{overflow:clip}
  .quartett-duel-action{position:sticky;bottom:12px;z-index:6}
}

@media(max-width:1024px) and (orientation:landscape){
  .quartett-duel-thread{min-height:3px;margin:3px 0}
  .quartett-duel-compare{padding:8px 8px}
  .quartett-duel-hint{margin-top:4px;font-size:8.5px}
  .quartett-duel-gap.is-placeholder{display:none}
  /* Die Achse steht im Querformat oben fest und zieht die Karten nicht mehr
     auf ihre Höhe — dann muss der aufgedeckte Zustand die Uhr auch nicht als
     Linie reservieren. Mit den 96 px stand der Weiter-Knopf 9 px unter dem
     Bildrand. */
  .quartett-clock-gap{display:none}
  .quartett-duel{--clock-slot:96px}
  .quartett-clock,.quartett-clock>button,.quartett-clock svg{width:88px;height:88px}
  .quartett-clock{margin:4px 0}
  .quartett-clock b{top:15px;font-size:34px;line-height:44px}
  .quartett-clock small{bottom:18px;font-size:6px}
  .quartett-clock-halo,.quartett-clock-disc{width:64px;height:64px;margin:-32px 0 0 -32px}
}