.kts-app{max-width:820px;margin:1rem auto;font-family:inherit;line-height:1.35}.kts-app [hidden]{display:none!important}.kts-app section,.kts-lobby-panel{background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.12);border-radius:1.2rem;padding:1rem;margin:1rem 0}.kts-app h2,.kts-app h3,.kts-app h4{margin-top:0}.kts-app label{display:block;margin:.7rem 0}.kts-app input,.kts-app select,.kts-app button{font:inherit}.kts-app input,.kts-app select{box-sizing:border-box;width:100%;padding:.7rem;border-radius:.8rem;border:1px solid #bbb;background:#fff;color:#111}.kts-app button,.kts-online-button{display:inline-block;padding:.75rem 1rem;border:0;border-radius:999px;cursor:pointer;text-decoration:none;background:#222;color:#fff}.kts-app button:disabled{cursor:not-allowed;opacity:.42}.kts-app.is-busy{cursor:progress}.kts-message{padding:.6rem 0;min-height:1.2em}.kts-message.is-error{color:#a00}.kts-hint{font-size:.9em;opacity:.75}.kts-game-header{display:flex;gap:.7rem 1rem;justify-content:space-between;flex-wrap:wrap;align-items:center}.kts-set-title{font-size:1.05em}.kts-link-box{box-sizing:border-box;min-width:0;background:rgba(255,255,255,.96);border-radius:.8rem;padding:.5rem}.kts-link-box label{font-weight:700;margin:0 0 .3rem;font-size:.86em}.kts-link-box label small{font-weight:400;opacity:.7}.kts-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;align-items:center}.kts-link-row input{min-width:0;padding:.48rem .58rem;font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kts-link-row button{padding:.55rem .75rem;white-space:nowrap}.kts-party-links{box-sizing:border-box;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.25rem 0 0;padding:.7rem;border:1px solid rgba(0,0,0,.15);border-radius:1rem;background:rgba(255,255,255,.94)}.kts-lobby-status{font-weight:700}.kts-player-row,.kts-opponent{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid #ddd;padding:.7rem 0}.kts-player-row:last-child,.kts-opponent:last-child{border-bottom:0}.kts-player-row.is-me{font-weight:700}.kts-avatar,.kts-avatar-fallback{width:42px;height:42px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#eee;flex:0 0 42px}.kts-host-badge{display:inline-block;margin-left:.35rem;padding:.12rem .42rem;border-radius:999px;background:#eee;font-size:.72em;font-weight:600}.kts-join-preview{display:grid;gap:.25rem;margin:.5rem 0 1rem;padding:.75rem;border-radius:.8rem;background:rgba(0,0,0,.055)}.kts-inline-action{display:inline-block;margin-top:.35rem;font-weight:700}.kts-card{border:1px solid #bbb;border-radius:1.2rem;padding:.8rem;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1)}.kts-card-image{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:.8rem}.kts-card h4{margin:.7rem 0 .35rem}.kts-card-text{font-size:.92em}.kts-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}.kts-values>.kts-value-row{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem;min-width:0;width:100%;padding:.55rem .3rem;border:0;border-top:1px solid #eee;border-radius:0;background:transparent;color:inherit;text-align:left}.kts-values>.kts-value-row>span{min-width:0;overflow-wrap:anywhere}.kts-values>.kts-value-row>strong{white-space:nowrap;text-align:right}.kts-app button.kts-value-row{background:transparent;color:inherit}.kts-values>.kts-value-row.is-chosen{margin:0;width:100%;padding-inline:.6rem;border-radius:.55rem;background:transparent;font-weight:700}.kts-app button.kts-value-row.is-selectable{cursor:pointer}.kts-app.is-busy button.kts-value-row{cursor:progress}.kts-choose-hint{margin:.2rem 0;font-weight:700}.kts-opponent{position:relative;cursor:pointer;border-radius:.8rem;padding-inline:.3rem}.kts-opponent.is-winner{background:rgba(0,0,0,.055)}.kts-opponent-summary{display:flex;flex:1;min-width:0;flex-direction:column}.kts-opponent-summary strong,.kts-opponent-summary span{overflow-wrap:anywhere}.kts-winner-inline, .kts-winner-inline{font-size:.85em} .kts-opponent-modal{display:none;position:fixed;inset:0;z-index:99999;padding:1rem;background:rgba(0,0,0,.62);overflow:auto;align-items:flex-start;justify-content:center}.kts-opponent.is-open .kts-opponent-modal{display:flex}.kts-opponent-dialog{position:relative;box-sizing:border-box;width:min(520px,100%);margin:auto;max-height:calc(100dvh - 2rem);overflow:auto;border-radius:1.2rem;background:#fff;box-shadow:0 12px 45px rgba(0,0,0,.32)}.kts-opponent-dialog>.kts-card{border:0;box-shadow:none;border-radius:1.2rem}.kts-opponent-close{position:sticky;top:.55rem;float:right;z-index:3;width:2.6rem;height:2.6rem;margin:.55rem .55rem -3.15rem 0!important;padding:0!important;border-radius:50%!important;background:#222!important;color:#fff!important;font-size:1.7rem!important;line-height:1!important;text-align:center!important}.kts-opponent-close:hover,.kts-opponent-close:focus-visible{transform:scale(1.05)}.kts-actions button{display:flex;width:100%;margin:.5rem 0;text-align:left;justify-content:space-between;gap:1rem}.kts-actions button small{opacity:.75}.kts-own,.kts-opponents,.kts-actions{margin-top:1rem}.kts-result{padding:.85rem 1rem;border-radius:1rem;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.12)}.kts-result h3{margin-bottom:.5rem}.kts-result p:last-child{margin-bottom:0}.kts-round-card-wrap{position:relative}.kts-round-card-wrap.is-winner .kts-card{outline:3px solid currentColor;outline-offset:2px}.kts-round-winner{animation:ktsWinnerPulse .75s ease-in-out}.kts-card-transferred{animation:ktsCardTransfer .9s ease-in-out}.kts-final-result{text-align:center;padding:1.4rem}.kts-final-result h3{margin:0}.kts-game main{align-items:start}@keyframes ktsWinnerPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.035)}}@keyframes ktsCardTransfer{0%,100%{transform:translateY(0) scale(1);opacity:1}45%{transform:translateY(14px) scale(.94);opacity:.42}}@media(min-width:700px){.kts-game main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}.kts-side-column{min-width:0}.kts-side-column .kts-opponents{margin-bottom:.65rem}.kts-side-column .kts-actions{margin-top:0}}@media(max-width:620px){.kts-values{grid-template-columns:1fr}.kts-opponent-modal{padding:.5rem}.kts-opponent-dialog{width:min(460px,100%);max-height:calc(100dvh - 1rem)}.kts-party-links{grid-template-columns:1fr;gap:.45rem;padding:.5rem}.kts-link-box{padding:.38rem .45rem}.kts-link-box label{font-size:.78em;margin-bottom:.2rem}.kts-link-row{grid-template-columns:minmax(0,1fr) auto}.kts-link-row input{padding:.42rem .5rem;font-size:.72em}.kts-link-row button{width:auto;padding:.48rem .62rem;font-size:.78em}.kts-card-image{max-height:240px}.kts-app{margin:.5rem auto}}@media(prefers-reduced-motion:reduce){.kts-round-winner,.kts-card-transferred{animation:none!important}} /* 0.3.3: mehrsprachige Kartenanzeige */ .kts-language-switch{display:flex;flex-wrap:wrap;gap:.28rem;align-items:center;margin-left:auto}.kts-app .kts-language-switch button{min-width:2.45rem;padding:.38rem .55rem;border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.92);color:#222;font-size:.78rem;font-weight:700;line-height:1}.kts-app .kts-language-switch button[aria-pressed="true"],.kts-app .kts-language-switch button.is-active{background:#222;color:#fff;border-color:#222}.kts-card-translations{display:grid;gap:.55rem;margin:.65rem 0}.kts-card-language{position:relative}.kts-card-language+.kts-card-language{padding-top:.55rem;border-top:1px dashed rgba(0,0,0,.18)}.kts-card-language h4{margin:0 0 .28rem}.kts-language-tag{display:inline-block;margin:0 0 .18rem;padding:.08rem .32rem;border-radius:999px;background:rgba(0,0,0,.08);font-size:.68rem;font-weight:700;letter-spacing:.04em}.kts-opponent-titles{display:grid;gap:.2rem}.kts-opponent-titles .kts-card-language{padding:0;border:0}.kts-opponent-titles .kts-card-language h4{margin:0;font-size:1em}.kts-opponent-titles .kts-language-tag{margin-right:.25rem}.kts-opponent-summary .kts-card-language{display:flex;align-items:baseline;gap:.25rem;flex-wrap:wrap} @media(max-width:620px){.kts-game-header{align-items:flex-start}.kts-language-switch{width:100%;margin-left:0}.kts-app .kts-language-switch button{flex:1 1 0}} /* 0.3.4: Partie-Links stehen normal am Ende des Inhalts und scrollen mit der Seite. */ /* 0.3.5: Spielkopf, Hintergrund-Schrift und flexible Sprachwahl */ .kts-game-header .kts-set-title{ flex:0 0 100%; width:100%; display:block; margin:0 0 .15rem; font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.08; font-weight:800; } /* Schrift, die direkt auf dem Seitenhintergrund steht, erhält eine helle Kontur. */ .kts-game-header, .kts-message, .kts-lobby > h2{ text-shadow: -2px -2px 2px rgba(255,255,255,.95), 0 -2px 2px rgba(255,255,255,.95), 2px -2px 2px rgba(255,255,255,.95), -2px 0 2px rgba(255,255,255,.95), 2px 0 2px rgba(255,255,255,.95), -2px 2px 2px rgba(255,255,255,.95), 0 2px 2px rgba(255,255,255,.95), 2px 2px 2px rgba(255,255,255,.95), 0 0 8px #fff, 0 0 16px rgba(255,255,255,.9); } /* Buttons besitzen ihren eigenen Hintergrund und brauchen keinen Textschatten. */ .kts-game-header button, .kts-message button, .kts-lobby > h2 button{ text-shadow:none; } .kts-language-switch:empty{display:none} /* 0.3.10: Meldungsbereich direkt unter der Mitspieler:innen-Spalte. */ .kts-side-column{min-width:0} .kts-side-column .kts-actions:empty{display:none} @media(max-width:699px){ .kts-side-column .kts-opponents{margin-bottom:.65rem} .kts-side-column .kts-actions{margin-top:0} } /* 0.3.15: Druckkarten-Look + Zeilenumbrüche aus dem PDF erhalten. */ .kts-card{ overflow:hidden; padding:0; border:2px solid rgba(20,20,20,.72); border-radius:1.15rem; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.16); } .kts-card-image{ width:100%; max-height:none; aspect-ratio:2.65 / 1; object-fit:cover; border-radius:0; border-bottom:1px solid rgba(0,0,0,.1); } .kts-card-translations{ margin:0; padding:.9rem 1rem .55rem; gap:.72rem; text-align:center; } .kts-card-language h4{ margin:0 0 .24rem; white-space:pre-line; text-wrap:balance; font-size:clamp(1.08rem,2.15vw,1.42rem); font-weight:850; line-height:1.05; letter-spacing:-.015em; } .kts-card-text{ max-width:46ch; margin:.12rem auto 0; white-space:pre-line; text-wrap:balance; font-size:.9em; line-height:1.18; text-align:center; } .kts-card-language+.kts-card-language{ padding-top:.68rem; border-top:1px dashed rgba(0,0,0,.16); } .kts-card .kts-language-tag{ margin:0 0 .24rem; background:rgba(0,0,0,.065); } .kts-values{ margin:0; padding:.2rem .7rem .7rem; gap:0 .8rem; font-size:.9em; } .kts-values>.kts-value-row{ min-height:2.05rem; padding:.38rem .22rem; border-top:1px solid rgba(0,0,0,.11); } .kts-values>.kts-value-row.is-chosen{ padding-inline:.48rem; } @media(max-width:620px){ .kts-card-translations{padding:.72rem .72rem .48rem} .kts-card-language h4{font-size:1.08rem} .kts-card-text{font-size:.86em;line-height:1.16} .kts-values{padding:.15rem .55rem .6rem} .kts-card-image{aspect-ratio:2.45 / 1} } /* 0.3.16: Bilder vollständig zeigen + Solo gegen Computer. */ .kts-card-image{ display:block; width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; object-position:center center; } .kts-start-options{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center} .kts-start-options button{margin:0} @media(max-width:620px){.kts-start-options{align-items:stretch}.kts-start-options button{width:100%}} /* 0.3.17: physische Kartenbewegung nach dem Stich. */ .kts-flying-card{ position:fixed; z-index:100001; margin:0; pointer-events:none; transform-origin:center center; will-change:transform,opacity; filter:drop-shadow(0 14px 18px rgba(0,0,0,.28)); } .kts-flying-card>.kts-card{ width:100%; margin:0; box-sizing:border-box; pointer-events:none; } .kts-round-card-wrap.kts-stack-receiving{ position:relative; z-index:100002; transform-origin:18% 92%; animation:ktsStackReceive 1.15s cubic-bezier(.2,.7,.25,1) both; } .kts-round-card-wrap.kts-stack-receiving .kts-card{ position:relative; z-index:100002; box-shadow: 5px 5px 0 rgba(255,255,255,.82), 9px 9px 0 rgba(40,40,40,.16), 0 8px 24px rgba(0,0,0,.2); } .kts-round-card-wrap.kts-origin-card-leaving .kts-card{ animation:ktsOriginLeaves .78s ease both; } .kts-winner-target{ animation:ktsWinnerTarget .9s ease both; } .kts-game.is-round-animating [data-next]{ opacity:.48; cursor:progress; } @keyframes ktsStackReceive{ 0%{transform:rotate(0deg) translateX(0)} 18%{transform:rotate(-6deg) translateX(-4px)} 72%{transform:rotate(-6deg) translateX(-4px)} 100%{transform:rotate(0deg) translateX(0)} } @keyframes ktsOriginLeaves{ 0%,12%{opacity:1;transform:scale(1)} 45%{opacity:.42;transform:scale(.985)} 100%{opacity:.08;transform:scale(.97)} } @keyframes ktsWinnerTarget{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} } @media(prefers-reduced-motion:reduce){ .kts-round-card-wrap.kts-stack-receiving, .kts-round-card-wrap.kts-origin-card-leaving .kts-card, .kts-winner-target{animation:none!important} .kts-flying-card{display:none!important} } /* 0.3.19: keine Sprachkürzel innerhalb der Karten; Sprachschalter bleibt nur im Spielkopf. */ .kts-card .kts-language-tag, .kts-opponent .kts-language-tag{display:none!important} /* 0.3.20: Nach der Rundenauswertung kann die eigene Karte außerhalb des Wertebereichs wie der Button „Nächste Runde“ verwendet werden. */ .kts-card.kts-next-card{cursor:pointer} .kts-card.kts-next-card .kts-value-row{cursor:default} .kts-card.kts-next-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.14)} .kts-game.is-round-animating .kts-card.kts-next-card{cursor:wait} /* 0.3.22: dünner Rand, stärkerer Kartenschatten und leichte stabile Schrägstellung. */ .kts-card{ border:1px solid rgba(20,20,20,.42); box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.16); } .kts-own-card-full{ transform:rotate(var(--kts-card-tilt,0deg)); transform-origin:50% 72%; transition:box-shadow .18s ease,transform .18s ease; } .kts-card.kts-next-card, .kts-card.kts-next-card .kts-value-row{cursor:pointer} .kts-card.kts-next-card:hover{ box-shadow: 0 15px 36px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18); } .kts-game.is-round-animating .kts-card.kts-next-card, .kts-game.is-round-animating .kts-card.kts-next-card .kts-value-row{cursor:wait} @media(prefers-reduced-motion:reduce){.kts-own-card-full{transition:none}} /* 0.3.30: Wertezeilen stabil, sichtbar und direkt klickbar. */ .kts-own-count{font-size:.75em;font-weight:500;opacity:.72;white-space:nowrap} .kts-own-card-full.kts-choosing-card{transform:none!important} .kts-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative;z-index:2;visibility:visible!important;opacity:1!important} .kts-values>.kts-value-row{visibility:visible!important;opacity:1!important} .kts-app .kts-values>button.kts-value-row[data-category]{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:.6rem!important; box-sizing:border-box!important; min-width:0!important; width:100%!important; min-height:2.05rem!important; margin:0!important; padding:.38rem .22rem!important; border:0!important; border-top:1px solid rgba(0,0,0,.11)!important; border-radius:0!important; background:transparent!important; color:inherit!important; font:inherit!important; line-height:inherit!important; text-align:left!important; appearance:none!important; -webkit-appearance:none!important; pointer-events:auto!important; cursor:pointer!important; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .kts-app .kts-values>button.kts-value-row[data-category]>span{min-width:0;overflow-wrap:anywhere} .kts-app .kts-values>button.kts-value-row[data-category]>strong{white-space:nowrap;text-align:right} @media(max-width:620px){.kts-values{grid-template-columns:1fr}} /* 0.3.33: sehr dezente +3/+2/+1-Kartenweitergabe. */ .kts-opponent-meta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap} .kts-app .kts-gift-cards{ display:inline-block!important;width:auto!important;min-width:0!important;margin:0!important;padding:.08rem .32rem!important; border:1px solid rgba(0,0,0,.22)!important;border-radius:.4rem!important;background:transparent!important;color:inherit!important; font:inherit!important;font-size:.78em!important;line-height:1.15!important;font-weight:600!important;opacity:.52;white-space:nowrap;vertical-align:baseline } .kts-app .kts-gift-cards:hover,.kts-app .kts-gift-cards:focus-visible{opacity:1;background:rgba(255,255,255,.72)!important} .kts-opponent.is-eliminated{opacity:.58} .kts-eliminated-note{margin:.6rem 0;font-style:italic;opacity:.75} /* 0.3.35: dezente Host-Steuerung für Computer-Sitze. */ .kts-app .kts-player-control{ display:inline-block!important;width:auto!important;min-width:0!important;margin:0!important;padding:.08rem .34rem!important; border:1px solid rgba(0,0,0,.18)!important;border-radius:.4rem!important;background:transparent!important;color:inherit!important; font:inherit!important;font-size:.72em!important;line-height:1.15!important;font-weight:600!important;opacity:.45;white-space:nowrap;vertical-align:baseline } .kts-app .kts-player-control:hover,.kts-app .kts-player-control:focus-visible{opacity:1;background:rgba(255,255,255,.72)!important} /* 0.3.36: eigene CPU-Steuerung unauffällig bei den Partie-Links. */ .kts-party-links .kts-self-cpu-box{ display:flex;align-items:center;justify-content:flex-end;gap:.45rem;min-width:0 } .kts-party-links .kts-self-cpu-box[hidden]{display:none!important} .kts-self-cpu-label{font-size:.78em;opacity:.62;white-space:nowrap} .kts-app .kts-self-cpu{ display:inline-block!important;width:auto!important;min-width:0!important;margin:0!important;padding:.12rem .38rem!important; border:1px solid rgba(0,0,0,.18)!important;border-radius:.4rem!important;background:transparent!important;color:inherit!important; font:inherit!important;font-size:.72em!important;line-height:1.15!important;font-weight:600!important;opacity:.48;white-space:nowrap } .kts-app .kts-self-cpu:hover,.kts-app .kts-self-cpu:focus-visible{opacity:1;background:rgba(255,255,255,.72)!important} /* 0.3.37: pulsierender weißer Schein, solange die eigene Karte eine Kategorienwahl erwartet. */ .kts-own-card-full.kts-needs-choice{ animation:ktsChoiceGlow 1.55s ease-in-out infinite; } @keyframes ktsChoiceGlow{ 0%,100%{ box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.16), 0 0 8px rgba(255,255,255,.80), 0 0 16px rgba(255,255,255,.58); } 50%{ box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.16), 0 0 12px rgba(255,255,255,1), 0 0 28px rgba(255,255,255,.96), 0 0 46px rgba(255,255,255,.72); } } @media(prefers-reduced-motion:reduce){ .kts-own-card-full.kts-needs-choice{ animation:none; box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.16), 0 0 14px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,.82); } } /* 0.3.38: Auswahl-Fragezeichen, Ergebnisfarben und Kartenflug erst beim Rundenwechsel. */ /* Den weißen Karten-Schein aus 0.3.37 vollständig ablösen. */ .kts-own-card-full.kts-needs-choice{ animation:none!important; } .kts-own-card-full.kts-needs-choice .kts-values{ position:relative; isolation:isolate; overflow:hidden; } .kts-own-card-full.kts-needs-choice .kts-values::before{ content:"?"; position:absolute; left:50%; top:50%; z-index:0; pointer-events:none; user-select:none; font-weight:800; font-family:Arial,Helvetica,sans-serif; font-size:clamp(7rem,24vw,13rem); line-height:.72; color:rgba(120,120,120,.18); transform:translate(-50%,-50%) scale(.92); transform-origin:center; animation:ktsQuestionPulse 1.55s ease-in-out infinite; } .kts-own-card-full.kts-needs-choice .kts-value-row{ position:relative; z-index:1; } @keyframes ktsQuestionPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.90); color:rgba(120,120,120,.14); } 50%{ transform:translate(-50%,-50%) scale(1.08); color:rgba(120,120,120,.23); } } /* Nach der Auswahl bleibt nur der eigene gewählte Wert farbig, bis die neue Runde beginnt. */ .kts-values>.kts-value-row.is-chosen.is-round-win{ background:rgba(72,170,88,.28)!important; box-shadow:inset 0 0 0 1px rgba(50,130,65,.24); } .kts-values>.kts-value-row.is-chosen.is-round-loss{ background:rgba(205,70,70,.24)!important; box-shadow:inset 0 0 0 1px rgba(160,45,45,.22); } /* Die bisherige Gewinner-Umrandung der ganzen Karte wird durch die Wertfarbe ersetzt. */ .kts-round-card-wrap.is-winner .kts-card{ outline:none!important; } @media(prefers-reduced-motion:reduce){ .kts-own-card-full.kts-needs-choice .kts-values::before{ animation:none!important; transform:translate(-50%,-50%) scale(1); color:rgba(120,120,120,.19); } } /* 0.3.39: echter Stapelwechsel – nächste Karte liegt schon unter der alten. */ .kts-round-card-wrap{ position:relative; isolation:isolate; transform-origin:18% 88%; transition:transform .24s cubic-bezier(.2,.75,.25,1); } .kts-round-card-wrap>.kts-card{ position:relative; z-index:2; } .kts-next-card-preview{ position:absolute; inset:0; z-index:1; pointer-events:none; transform:translate(5px,5px) rotate(.25deg) scale(.995); transform-origin:50% 72%; transition:transform .18s ease; } .kts-next-card-preview>.kts-card{ width:100%; margin:0; box-sizing:border-box; transform:none!important; } .kts-round-card-wrap.kts-next-exposed .kts-next-card-preview{ transform:translate(0,0) rotate(0deg) scale(1); } .kts-current-card-hidden{ visibility:hidden!important; } .kts-round-card-wrap.kts-stack-tilting{ transform:rotate(-5.2deg) translateX(-4px); } /* Erst in der letzten Phase wird der echte Stapel über das Kartenpaket gehoben. Dadurch verschwinden die gewonnenen Karten sichtbar HINTER der neuen Oberkarte. */ .kts-round-card-wrap.kts-stack-front{ z-index:100003; } .kts-round-card-wrap.kts-stack-front .kts-next-card-preview{ z-index:4; } .kts-flying-card.kts-package-card{ z-index:100001; } .kts-flying-card.kts-stack-cover{ z-index:100005; filter:none!important; } @media(prefers-reduced-motion:reduce){ .kts-round-card-wrap, .kts-next-card-preview{transition:none!important} .kts-round-card-wrap.kts-stack-tilting{transform:none!important} } /* 0.3.40–0.3.42: ruhige Auswahlhilfe und Animationen in echter Kartengröße. */ .kts-own-card-full.kts-needs-choice .kts-values::before{ color:rgba(115,115,115,.09); transform:translate(-50%,-50%) scale(.97); animation:ktsQuestionPulseCalm 5.2s ease-in-out infinite!important; } @keyframes ktsQuestionPulseCalm{ 0%,100%{ transform:translate(-50%,-50%) scale(.97); color:rgba(115,115,115,.08); } 50%{ transform:translate(-50%,-50%) scale(1.025); color:rgba(115,115,115,.14); } } /* Maus/Trackpad: eindeutig klickbar, aber nur sanft hellblau. */ .kts-app .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable{ cursor:pointer!important; transition:background-color .22s ease,box-shadow .22s ease,transform .22s ease; } @media(hover:hover) and (pointer:fine){ .kts-app .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:hover, .kts-app .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:focus-visible{ background:rgba(105,178,235,.15)!important; box-shadow:inset 0 0 0 1px rgba(70,145,205,.20); outline:none; } } /* Touch/Mobil: ruhige blaue Welle durch die auswählbaren Wertezeilen. Es wird keine einzelne Kategorie dauerhaft markiert, um keine Empfehlung vorzutäuschen. Nach einem Durchlauf bleibt bewusst kurz Ruhe. */ @keyframes ktsMobileChoiceWave{ 0%,8%,100%{background-color:transparent} 3.2%,5.4%{background-color:rgba(105,178,235,.14)} } @media(hover:none) and (pointer:coarse){ .kts-app .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable{ animation:ktsMobileChoiceWave 8.5s ease-in-out infinite; box-shadow:none!important; outline:none!important; } .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(1){animation-delay:0s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(2){animation-delay:.46s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(3){animation-delay:.92s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(4){animation-delay:1.38s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(5){animation-delay:1.84s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(6){animation-delay:2.30s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(7){animation-delay:2.76s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(8){animation-delay:3.22s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(9){animation-delay:3.68s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(10){animation-delay:4.14s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(11){animation-delay:4.60s} .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable:nth-child(12){animation-delay:5.06s} } /* Akku-/Hintergrundschutz: rein dekorative Daueranimationen pausieren, sobald die Partie nicht sichtbar ist. Browser drosseln zwar ohnehin, aber so ist das Verhalten explizit. */ .kts-app.kts-document-hidden .kts-own-card-full.kts-needs-choice .kts-values::before, .kts-app.kts-document-hidden .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable{ animation-play-state:paused!important; } /* Die fliegende Hülle und ihr Kartenklon behalten die vom JS gemessene Originalbreite UND -höhe. Keine CSS-Maximalgröße, keine Skalierung. */ .kts-flying-card{ max-width:none!important; max-height:none!important; overflow:visible; } .kts-flying-card>.kts-card{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; overflow:hidden; } @media(prefers-reduced-motion:reduce){ .kts-own-card-full.kts-needs-choice{ box-shadow:0 4px 16px rgba(0,0,0,.1)!important; } .kts-own-card-full.kts-needs-choice .kts-values::before{ animation:none!important; transform:translate(-50%,-50%) scale(1)!important; color:rgba(115,115,115,.10)!important; } .kts-app .kts-own-card-full.kts-needs-choice button.kts-value-row.is-selectable{ animation:none!important; transition:none!important; } }