.p2b-game-ui {
    display: grid;
    gap: 1.25rem;
}

.joke-choice-2 .continue-button {
    min-height: 44px;
    padding: .7rem 1.25rem;
    border: 0;
    border-radius: .75rem;
    background: linear-gradient(135deg, #6b4cf1, #5636df);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

/* Social game framework */
.social-game-shell{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:1rem;max-width:75rem;margin:auto}.social-game-main,.social-game-aside,.social-prompt-card,.social-prediction-panel,.social-reveal-panel,.social-result-panel{border:1px solid #e6e5f0;border-radius:1rem;background:#fff;box-shadow:0 .5rem 1.8rem rgba(23,38,73,.07)}.social-game-main{padding:1.25rem}.social-game-aside{padding:1rem;background:linear-gradient(145deg,#fff,#f7f5ff)}.social-prompt-card{border:0;box-shadow:none;padding:0 0 1rem}.social-prompt-card h1{font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;margin:.65rem 0;color:#0b1a4b}.social-prompt-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem}.social-category{padding:.28rem .55rem;border-radius:999px;background:#f1edff;color:#6245e9;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.social-round-progress{display:flex;align-items:center;gap:.65rem;font-weight:700;color:#24345d}.social-round-progress i{display:block;width:6rem;height:.35rem;border-radius:999px;background:linear-gradient(90deg,#6848ef var(--social-progress),#e8e8f3 var(--social-progress))}.social-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.65rem}.social-choice{position:relative;min-height:7.25rem;padding:.8rem;border:1px solid #dcdbea;border-radius:.8rem;background:#fff;color:#10204e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.social-choice:hover:not(:disabled){transform:translateY(-2px);border-color:#6b4cf1}.social-choice:focus-visible{outline:3px solid rgba(99,72,238,.34);outline-offset:2px}.social-choice.selected{border:2px solid #6848ef;background:#faf9ff;box-shadow:0 .4rem 1rem rgba(104,72,239,.14)}.social-choice:disabled:not(.selected){opacity:.62}.social-choice-visual{display:grid;place-items:center;width:3.35rem;height:3.35rem;border-radius:50%;font-size:2rem}.social-choice small{color:#68738f}.social-choice-check{position:absolute;right:.45rem;top:.45rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#6848ef;color:#fff}.social-waiting-state{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border-radius:.8rem;background:linear-gradient(135deg,#edfbf7,#f7f4ff);margin-top:1rem}.social-waiting-state p{margin:.2rem 0 0;color:#58647e}.social-status-icon{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:#119b85;color:white}.social-prediction-panel,.social-reveal-panel{padding:1rem;margin-top:1rem}.social-prediction-panel h2,.social-reveal-panel h2{font-size:1.15rem;margin:0 0 .85rem}.social-reveal-panel{text-align:center;background:linear-gradient(145deg,#f2fff8,#f8f5ff)}.social-reveal-burst{font-size:2rem}.social-reveal-panel p{color:#58647e}.social-reveal-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.social-score-summary{display:grid;gap:.55rem;margin:0}.social-score-summary div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem;border-radius:.6rem;background:#f7f6fc}.social-score-summary dt{color:#596582}.social-score-summary dd{font-weight:800;color:#0d1d4c}.social-result-panel{padding:1.5rem;text-align:center;max-width:40rem;margin:auto}.social-result-icon{font-size:3rem}.social-result-panel h1{color:#0b1a4b}.social-result-panel .social-score-summary{margin:1.2rem 0}
@media(max-width:800px){.social-game-shell{grid-template-columns:1fr}.social-choice{min-height:5.5rem}.social-reveal-choices{grid-template-columns:1fr}}

.color-sync-2{max-width:75rem;margin:auto;color:#0b1a4b}.color-sync-2__brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;padding:.25rem .4rem}.color-sync-2__brand h2{margin:0;font-size:1.55rem}.color-sync-2__brand p{margin:.1rem 0 0;color:#65708b}.color-sync-2__mark{position:relative;width:2.3rem;height:2.3rem}.color-sync-2__mark i{position:absolute;width:1.35rem;height:2.15rem;border-radius:50%}.color-sync-2__mark i:nth-child(1){left:0;background:#8b4de8}.color-sync-2__mark i:nth-child(2){left:.48rem;background:#ef89b5;opacity:.88}.color-sync-2__mark i:nth-child(3){right:0;background:#f6c64e;opacity:.9}.color-sync-rules{margin-left:auto;position:relative}.color-sync-rules summary{list-style:none;padding:.55rem 1rem;border:1px solid #bfc8dd;border-radius:.65rem;font-weight:800;cursor:pointer}.color-sync-rules summary:focus-visible{outline:3px solid rgba(99,72,238,.35);outline-offset:2px}.color-sync-rules__panel{position:absolute;z-index:20;right:0;top:calc(100% + .5rem);width:min(31rem,82vw);padding:1.25rem;border:1px solid #dedbea;border-radius:1rem;background:#fff;box-shadow:0 1rem 3rem rgba(10,25,65,.22)}.color-sync-rules__panel h3{margin-top:0}.color-sync-rules__panel li{margin:.65rem 0}.color-sync-rules__panel p{padding:.8rem;border-radius:.7rem;background:#fff7ed;color:#7d4b19}.color-sync-orb{display:inline-block;width:3.7rem;height:3.7rem;border-radius:50%;box-shadow:inset 0 -.4rem .7rem rgba(0,0,0,.09),0 .25rem .7rem rgba(28,34,70,.13)}.color-sync-2 .social-choice form{display:contents}.color-sync-2 .social-choice{min-height:7.6rem}.color-sync-confirmed{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-radius:.7rem;background:#eafaf4;color:#087b65;font-weight:700}.color-sync-player{display:grid;grid-template-columns:3.25rem 1fr;align-items:center;column-gap:.7rem;margin-bottom:1rem}.color-sync-player small{color:#69748e}.color-sync-player strong{grid-column:2}.color-sync-avatar{grid-row:1/3;width:3.25rem;height:3.25rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#6750e8,#13a893);color:#fff;font-size:1.4rem;font-weight:900}.color-sync-saved{display:grid;grid-template-columns:1.5rem 1fr;gap:.35rem .6rem;margin-bottom:1rem;padding:.9rem;border-radius:.8rem;background:#eafaf4;color:#087b65}.color-sync-saved strong{grid-column:1/3;display:flex;align-items:center;gap:.6rem;padding:.55rem;border-radius:.6rem;background:#fff;color:#0b1a4b}.color-sync-saved .color-sync-orb{width:1.7rem;height:1.7rem}.color-sync-reveal-choice{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1rem;border-radius:.8rem;background:#fff}.color-sync-prediction-result{grid-column:1/-1;padding:.65rem;border-radius:.6rem;background:#fff7ed}.color-sync-prediction-result.is-correct{background:#e9faf2;color:#087b65;font-weight:800}.color-sync-2 .continue-button{display:block;margin:1rem 0 0 auto;padding:.7rem 1.2rem;border:0;border-radius:.65rem;background:linear-gradient(135deg,#6b4cf1,#5636df);color:#fff;font-weight:800;cursor:pointer}.color-sync-2 .social-result-panel{max-width:60rem;background:linear-gradient(145deg,#fff,#f8f6ff)}
@media(max-width:800px){.color-sync-2__brand{position:relative}.color-sync-2__brand p{font-size:.8rem}.color-sync-rules__panel{position:fixed;left:1rem;right:1rem;top:5rem;width:auto}.color-sync-2 .social-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-sync-2 .social-choice{min-height:6.5rem}.color-sync-orb{width:3rem;height:3rem}}
.color-sync-2 .social-choice-grid>form{display:contents}

/* Joke Choice 2.0 */
.joke-choice-2{--joke-purple:#6246ea;--joke-navy:#07194b;color:var(--joke-navy);width:100%}.joke-choice-2__brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.joke-choice-2__brand h2,.joke-choice-2__brand p{margin:0}.joke-choice-2__brand p{color:#66708f}.joke-choice-2__mark{display:flex}.joke-choice-2__mark i{width:1.25rem;height:2.25rem;border-radius:50%;background:#7255e8;margin-right:-.45rem}.joke-choice-2__mark i:nth-child(2){background:#f29bb6}.joke-choice-2__mark i:nth-child(3){background:#ffbe4b}.joke-choice-rules{margin-left:auto;position:relative}.joke-choice-rules summary{list-style:none;cursor:pointer;border:1px solid #b9c3df;border-radius:.75rem;padding:.7rem 1rem;font-weight:800}.joke-choice-rules__panel{position:absolute;z-index:20;right:0;top:calc(100% + .5rem);width:min(32rem,calc(100vw - 2rem));padding:1.25rem;background:#fff;border:1px solid #dfe3ef;border-radius:1rem;box-shadow:0 1.25rem 3rem #15224c2e}.joke-choice-rules__panel h3{margin-top:0}.joke-choice-rules__panel li{margin:.55rem 0}.joke-choice-rules__panel p{padding:.8rem;border-radius:.75rem;background:#fff5e9}.joke-choice-role{display:flex;align-items:flex-start;gap:.8rem;margin:1rem 0;padding:.9rem 1rem;border-radius:.9rem;background:linear-gradient(100deg,#f2efff,#fff8e8)}.joke-choice-role>span{font-size:1.4rem;color:var(--joke-purple)}.joke-choice-role strong,.joke-choice-role p{display:block;margin:0}.joke-choice-role p{margin-top:.2rem;color:#536080}.joke-choice-2 .social-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.joke-choice-2 .social-choice-grid>form{display:contents}.joke-choice-card{min-height:7rem;padding:1rem;display:flex;align-items:center;gap:.75rem;text-align:left;border:1px solid #d8deed;border-radius:.9rem;background:#fff;color:var(--joke-navy);cursor:pointer}.joke-choice-card>span{font-size:1.75rem}.joke-choice-card strong{line-height:1.4}.joke-choice-card:hover:not(:disabled),.joke-choice-card:focus-visible{border-color:var(--joke-purple);box-shadow:0 0 0 3px #6246ea22}.joke-choice-card.selected{border:2px solid var(--joke-purple);background:#f5f2ff}.joke-choice-card:disabled{cursor:default;opacity:1}.joke-choice-reveal-card{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;align-items:center;padding:1rem;background:#fff;border-radius:.85rem}.joke-choice-reveal-card small{grid-column:1/-1;color:#5a6480;font-weight:800}.joke-choice-reveal-card>span{font-size:1.8rem}.joke-choice-next-role{text-align:center;color:#5d6783}.joke-choice-score{display:grid;gap:.25rem;padding:1rem;border-radius:.9rem;background:#f5f2ff}.joke-choice-score strong{font-size:1.5rem;color:var(--joke-purple)}
@media(max-width:700px){.joke-choice-2__brand{align-items:flex-start}.joke-choice-2__brand p{font-size:.85rem}.joke-choice-2 .social-choice-grid{grid-template-columns:1fr}.joke-choice-card{min-height:4.75rem}.joke-choice-2 .social-game-aside{display:none}.joke-choice-reveal-card{grid-template-columns:auto 1fr}.joke-choice-rules__panel{position:fixed;top:5rem;right:1rem;left:1rem;width:auto;max-height:calc(100vh - 6rem);overflow:auto}}
@media(prefers-reduced-motion:reduce){.joke-choice-2 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:420px){.social-game-main{padding:.85rem}.social-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-prompt-meta{align-items:flex-start;flex-direction:column;gap:.5rem}.social-round-progress i{width:4.5rem}}
@media(prefers-reduced-motion:reduce){.social-choice{transition:none}}
.social-own-choice{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-radius:.75rem;background:#edfbf7;color:#0b675b;margin:.5rem 0}.social-own-choice strong{font-size:1.1rem}

.card-game-board { position: relative; display: grid; gap: 1rem; min-width: 0; }
.card-opponent-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.72); }
.player-card-status { display: grid; min-width: 7rem; }
.player-card-status span { color: #5b647a; font-size: .86rem; }
.card-back-stack { display: flex; min-width: 0; }
.card-back-stack .playing-card + .playing-card,
.card-back-stack .card-back-slot + .card-back-slot { margin-left: -2.6rem; }
.card-back-slot { display: inline-flex; }
.playing-card { width: 4.5rem; aspect-ratio: .7; border-radius: .55rem; background: #fffdfa; border: 1px solid #d7d9e4; box-shadow: 0 .35rem .8rem rgba(18,34,70,.14); display: inline-grid; place-content: center; position: relative; flex: 0 0 auto; color: #101b3f; transition: transform .16s ease, box-shadow .16s ease; }
.playing-card--hearts,.playing-card--diamonds { color: #e54343; }
.playing-card__rank { position: absolute; top: .3rem; left: .38rem; font-weight: 800; font-size: .9rem; }
.playing-card__suit { font-size: 2rem; line-height: 1; }
.card-back { background: #182f69; border: .2rem solid #fff; padding: .25rem; }
.card-back__pattern { width: 100%; height: 100%; border: 1px solid rgba(255,255,255,.65); border-radius: .25rem; background: repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 3px,transparent 3px 7px); }
.card-hand { display: flex; overflow-x: auto; padding: .6rem .25rem 1rem; min-width: 0; justify-content: center; scroll-snap-type: x proximity; }
.card-hand form,
.card-hand-slot { flex: 0 0 auto; margin-left: -.65rem; }
.card-hand form:first-child,
.card-hand-slot:first-child { margin-left: 0; }
.card-hand-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 6.43rem; }
.card-hand-slot--placeholder { opacity: .18; border: 1px dashed rgba(108,84,237,.38); border-radius: .55rem; }
.card-back-slot--placeholder { width: 4.5rem; aspect-ratio: .7; opacity: .18; border: 1px dashed rgba(24,47,105,.42); border-radius: .55rem; }
.card-hand button { background: none; border: 0; padding: .35rem; min-width: 44px; min-height: 44px; cursor: pointer; border-radius: .75rem; }
.card-hand button:hover .playing-card,.card-hand button:focus-visible .playing-card { transform: translateY(-.55rem); box-shadow: 0 .8rem 1.3rem rgba(83,61,213,.22); }
.card-hand button:focus-visible { outline: 3px solid #6c54ed; outline-offset: 2px; }
.card-pile { display: grid; justify-items: center; gap: .25rem; }
.card-pile__count { font-weight: 800; color: #263454; }
.turn-indicator { justify-self: end; padding: .55rem .9rem; border-radius: 99px; background: #f1effa; font-weight: 700; }
.turn-indicator--active { background: #dcf6e9; color: #087d56; }
.mau-mau-table,.schnapsen-table { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 1rem; min-height: 11rem; padding: 1rem; border-radius: 1.25rem; background: linear-gradient(135deg,#eaf8ef,#f8f5ff); }
.schnapsen-table { grid-template-columns: .7fr .8fr 1.2fr 1fr; background: linear-gradient(135deg,#11603e,#19754c); color: white; }
.schnapsen-talon { display: grid; justify-items: center; gap: .35rem; }
.schnapsen-talon__state { padding: .3rem .55rem; border-radius: 999px; background: #fff3cf; color: #704500; font-size: .75rem; text-align: center; }
.trick-area { min-height: 7rem; display: flex; justify-content: center; align-items: center; }
.trick-area .playing-card + .playing-card { margin-left: -1rem; transform: rotate(5deg); }
.trump-indicator { display: grid; justify-items: center; gap: .35rem; }
.desired-suit { display: grid; justify-items: center; padding: 1rem; border-radius: 1rem; background: white; }
.desired-suit strong { font-size: 1.2rem; }
.schnapsen-score { display: grid; gap: .35rem; padding: .8rem; border-radius: .8rem; background: rgba(255,255,255,.9); color: #101b3f; }
.schnapsen-score div { display: flex; justify-content: space-between; gap: 1rem; }
.card-game-actions { display: flex; justify-content: center; gap: .65rem; flex-wrap: wrap; }
.card-hint { margin: 0; text-align: center; color: #5442cd; font-weight: 700; }
.mau-mau-status-overlay { position: absolute; z-index: 28; left: 50%; top: .65rem; transform: translateX(-50%); width: min(34rem, calc(100% - 2rem)); padding: .55rem .85rem; border: 1px solid rgba(108,84,237,.2); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 .7rem 1.6rem rgba(20,35,70,.1); pointer-events: none; }
.mau-mau-status-overlay--empty { visibility: hidden; }
.mau-call { color: #f05d46; font-size: 1.2rem; }
.schnapsen-card-action { position: relative; flex: 0 0 auto; margin-left: -.65rem; }
.schnapsen-card-action:first-child { margin-left: 0; }
.schnapsen-card-action form { margin: 0; }
.card-declare { position: absolute; z-index: 2; left: 50%; bottom: -.35rem; transform: translateX(-50%); min-height: 32px !important; padding: .2rem .5rem !important; border: 1px solid #6c54ed !important; border-radius: 99px !important; background: #fff !important; color: #4f3bd0; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.card-suit-choice { position: relative; flex: 0 0 auto; margin-left: -.65rem; }
.card-suit-choice:first-child { margin-left: 0; }
.card-suit-choice > summary { list-style: none; cursor: pointer; border-radius: .75rem; }
.card-suit-choice > summary::-webkit-details-marker { display: none; }
.card-suit-choice > summary:focus-visible { outline: 3px solid #6c54ed; outline-offset: 2px; }
.card-suit-choice__menu { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + .4rem); transform: translateX(-50%); display: grid; gap: .25rem; min-width: 9rem; padding: .5rem; border: 1px solid #ddd9ef; border-radius: .75rem; background: white; box-shadow: 0 .8rem 1.8rem rgba(20,35,70,.18); }
.card-suit-choice__menu button { width: 100%; min-height: 44px; border: 0; border-radius: .55rem; background: #f4f1ff; color: #3527a4; }
.card-suit-choice--table { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .55rem; width: min(28rem, calc(100% - 2rem)); max-width: min(28rem, 100%); margin: 0; padding: .75rem; border: 1px solid #d9cef8; border-radius: 1rem; background: linear-gradient(135deg, #fff, #f5f1ff); box-shadow: 0 .8rem 1.8rem rgba(20,35,70,.14); }
.card-suit-choice--table > strong { color: #1a2452; }
.card-suit-choice--table .card-suit-choice__menu { position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; min-width: 0; box-shadow: none; background: transparent; border: 0; padding: 0; }
.card-suit-choice--table .card-suit-choice__menu form { margin: 0; }
.card-suit-choice--table .card-suit-choice__menu button { min-width: 5rem; padding-inline: .85rem; font-weight: 800; cursor: pointer; }
.card-rules { position: relative; }
.card-rules > summary { min-height: 44px; display: inline-flex; align-items: center; padding: .65rem 1rem; border: 1px solid #6c54ed; border-radius: 99px; color: #4f3bd0; font-weight: 800; cursor: pointer; list-style: none; }
.card-rules > summary::-webkit-details-marker { display: none; }
.card-rules > summary:focus-visible { outline: 3px solid #6c54ed; outline-offset: 2px; }
.card-rules__content { position: absolute; z-index: 9; right: 0; bottom: calc(100% + .5rem); width: min(25rem,80vw); padding: 1rem; border: 1px solid #ddd9ef; border-radius: 1rem; background: white; color: #101b3f; box-shadow: 0 1rem 2.4rem rgba(20,35,70,.18); }
.card-rules__content h3,.card-rules__content p { margin: 0; }
.card-rules__content p { margin-top: .5rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .playing-card { transition: none; } }

.card-animation-host {
  position: relative;
  isolation: isolate;
}

.card-animation-host--animating .playing-card {
  will-change: transform, opacity;
}

.mau-mau-board .card-hand-slot {
  transition: margin .16s ease, transform .16s ease;
}

.mau-mau-board--presenting .card-hand-slot {
  transition: none;
}

.card-zone-anchor {
  position: relative;
}

.card-deal-pending > * {
  visibility: var(--card-deal-visibility, hidden);
  pointer-events: none;
}

.card-animation-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}

/* Shared presentation effects; card rules and step order remain in C#. */
.card-presentation-flip { animation: presentation-flip var(--presentation-effect-duration, 120ms) ease-out; }
.card-presentation-emphasis { animation: presentation-lift var(--presentation-effect-duration, 480ms) ease-in-out; }
.card-presentation-close { animation: presentation-close var(--presentation-effect-duration, 300ms) ease-in-out; }
@keyframes presentation-flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes presentation-lift { 50% { transform: translateY(-.55rem); filter: drop-shadow(0 0 .5rem #c69d37); } }
@keyframes presentation-close { 50% { transform: rotate(12deg); } }
.schnapsen-board { gap: .65rem; padding: 1rem; }
.schnapsen-notice { min-height: 1.5rem; text-align: center; font-weight: 700; color: #514096; }
.schnapsen-hand-slot, .schnapsen-trick-slot, .schnapsen-trump-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 6.43rem; flex: 0 0 auto; }
.schnapsen-hand-slot:empty, .schnapsen-trick-slot, .schnapsen-trump-slot { border: 1px dashed #bab0d4; border-radius: .6rem; }
.schnapsen-board .card-back-stack { display: flex; gap: .15rem; }
.schnapsen-board .card-back-stack .playing-card { margin: 0; transform: none; }
.schnapsen-board .card-hand { gap: .25rem; justify-content: center; padding-bottom: 1.5rem; }
.schnapsen-board .schnapsen-card-action { margin: 0; }
.schnapsen-board .card-hand button:disabled .playing-card { transform: none; transition: none; }
.schnapsen-slot-label { position: absolute; bottom: -.95rem; font-size: .65rem; white-space: nowrap; }
.schnapsen-board .schnapsen-table { display: flex; gap: 1rem; justify-content: center; align-items: center; min-height: 8.5rem; }
.schnapsen-board .trick-area { gap: .4rem; }
.schnapsen-won { border-radius: .65rem; padding: .35rem .65rem; background: #e8e3f5; color: #46347e; font-size: .8rem; }
.schnapsen-board .schnapsen-score { display: flex; justify-content: center; gap: 1rem; margin: .25rem 0; padding: .35rem; }
.schnapsen-board .schnapsen-score div { gap: .3rem; }
.schnapsen-board .schnapsen-score dd { margin: 0; font-weight: 700; }
.schnapsen-board .card-game-actions > button { min-height: 40px; padding: .4rem .75rem; border: 1px solid #bcb2db; background: #fff; border-radius: .7rem; color: #46347e; }
.schnapsen-board .card-game-actions > button:disabled { opacity: .5; }
@media (max-width: 600px) {
  .schnapsen-board { padding: .6rem; gap: .5rem; }
  .schnapsen-board .playing-card, [data-card-presentation="sequence"] .card-animation-card { width: 3.15rem; }
  .schnapsen-hand-slot, .schnapsen-trick-slot, .schnapsen-trump-slot { width: 3.15rem; height: 4.5rem; }
  .schnapsen-board .schnapsen-table { gap: .45rem; min-height: 6.4rem; }
  .schnapsen-board .card-opponent-row { flex-wrap: wrap; gap: .4rem; }
  .schnapsen-board .card-back-stack { width: 100%; justify-content: center; }
  .schnapsen-board .schnapsen-score { font-size: .75rem; gap: .5rem; }
  .schnapsen-board .schnapsen-talon__state { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-presentation-flip, .card-presentation-emphasis, .card-presentation-close { animation: none; }
}

.card-animation-card {
  position: absolute;
  translate: -50% -50%;
  transform: translate3d(0, 0, 0) scale(.96);
  opacity: .9;
  filter: drop-shadow(0 .8rem 1.1rem rgba(18,34,70,.22));
  pointer-events: none;
  z-index: 1;
}

.card-animation-card--running {
  animation: card-flight var(--card-animation-duration, 420ms) var(--card-animation-easing, cubic-bezier(.2,.8,.2,1)) forwards;
}

@keyframes card-flight {
  45% {
    transform: translate3d(calc(var(--card-animation-x, 0px) * .55), calc(var(--card-animation-y, 0px) * .55 - 1.2rem), 0) scale(1.08) rotate(2deg);
    opacity: 1;
  }

  to {
    transform: translate3d(var(--card-animation-x, 0px), var(--card-animation-y, 0px), 0) scale(1);
    opacity: .15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-animation-card,
  .card-animation-card--running {
    animation: none;
    transition: none;
  }
}
@media (max-height: 1000px) and (min-width: 801px) {
  .card-game-board { gap: .45rem; height: 100%; align-content: center; }
  .card-opponent-row { padding: .45rem .7rem; }
  .playing-card { width: 3.55rem; }
  .card-hand-slot { min-width: 3.55rem; min-height: 5.08rem; }
  .card-back-slot--placeholder { width: 3.55rem; }
  .card-hand { padding: .25rem .2rem .45rem; }
  .mau-mau-table,.schnapsen-table { min-height: 7.5rem; padding: .55rem; gap: .55rem; }
  .trick-area { min-height: 5.5rem; }
  .desired-suit { padding: .55rem; }
  .card-game-actions { gap: .4rem; }
  .card-rules > summary { min-height: 38px; padding: .45rem .75rem; }
}
@media (max-width: 640px) {
  .playing-card { width: 3.8rem; }
  .card-hand { justify-content: flex-start; }
  .mau-mau-table { grid-template-columns: repeat(3,minmax(4rem,1fr)); gap: .35rem; padding: .65rem; }
  .schnapsen-table { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-opponent-row { gap: .5rem; }
}

.p2b-game-ui .round-heading {
    text-align: center;
}

.p2b-game-ui .round-heading h3,
.p2b-game-ui .prompt-block h3 {
    margin: 0;
    color: #15243a;
}

.p2b-game-ui .round-heading p,
.p2b-game-ui .round-label,
.p2b-game-ui .muted,
.p2b-game-ui .wait-copy {
    margin: .25rem 0 0;
    color: #6e7b8f;
}

.p2b-game-ui .color-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.p2b-game-ui .color-options form {
    display: contents;
}

.p2b-game-ui .option-list {
    display: grid;
    gap: 1rem;
}

.p2b-game-ui .option-list form {
    margin: 0;
}

.p2b-game-ui .color-button,
.p2b-game-ui .joke-option,
.p2b-game-ui .continue-button {
    border: 1px solid #dce7f0;
    border-radius: 1rem;
    background: #fff;
    color: #15243a;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.p2b-game-ui .color-button {
    width: 100%;
    min-height: 7rem;
    display: grid;
    place-items: center;
    gap: .5rem;
}

.p2b-game-ui .joke-option {
    width: 100%;
    padding: 1rem;
    text-align: left;
}

.p2b-game-ui .color-button.selected,
.p2b-game-ui .joke-option.selected {
    border-color: #2388e8;
    box-shadow: 0 0 0 2px rgba(35, 136, 232, .16);
}

.p2b-game-ui .color-button:disabled,
.p2b-game-ui .joke-option:disabled,
.p2b-game-ui .continue-button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.p2b-game-ui .color-swatch {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    box-shadow: inset 0 -12px 18px rgba(0, 0, 0, .12);
}

.p2b-game-ui .prompt-block {
    border-radius: 1.25rem;
    background: #f8fbfe;
    border: 1px solid #dce7f0;
    padding: 1.2rem;
}

.p2b-game-ui .prompt-block h3 {
    margin-top: .35rem;
    line-height: 1.2;
}

.p2b-game-ui .info-stack {
    display: grid;
    gap: 1rem;
}

.p2b-game-ui .state-card,
.p2b-game-ui .summary-card {
    border: 1px solid #dce7f0;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .78);
    padding: 1rem;
}

.p2b-game-ui .state-title {
    margin: 0 0 .55rem;
    color: #314056;
    font-size: .85rem;
    font-weight: 900;
}

.p2b-game-ui .selection-line,
.p2b-game-ui .result-line {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.p2b-game-ui .mini-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
}

.p2b-game-ui .time {
    margin-left: auto;
    color: #6e7b8f;
}

.p2b-game-ui .partner-state.ready {
    color: #16823a;
    font-weight: 800;
}

.p2b-game-ui .result-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.p2b-game-ui .result-topline span,
.p2b-game-ui .score {
    border-radius: 999px;
    background: #dff1ff;
    color: #1266c3;
    font-weight: 900;
    padding: .35rem .7rem;
}

.p2b-game-ui .divider {
    width: 1px;
    height: 1.5rem;
    background: #dce7f0;
}

.p2b-game-ui .selected-answer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.p2b-game-ui .selected-answer span {
    color: #6e7b8f;
}

.p2b-game-ui .answer-grid,
.p2b-game-ui .style-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.p2b-game-ui .answer-grid div,
.p2b-game-ui .style-summary div {
    display: grid;
    gap: .25rem;
}

.p2b-game-ui .answer-grid span,
.p2b-game-ui .answer-grid small {
    color: #6e7b8f;
}

.p2b-game-ui .continue-button {
    justify-self: center;
    min-width: min(100%, 18rem);
    padding: .9rem 1.3rem;
    background: linear-gradient(135deg, #ff8500, #ff9f2e);
    color: #fff;
    border: 0;
}

.p2b-game-ui form:has(.continue-button) {
    display: grid;
    justify-items: center;
}

.p2b-game-ui .wait-copy {
    text-align: center;
}

@media (max-width: 640px) {
    .p2b-game-ui .color-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p2b-game-ui .answer-grid,
    .p2b-game-ui .style-summary {
        grid-template-columns: 1fr;
    }
}