/* Games page: the "Dealt hand" (owner's decision, 12 Nov 2026). Uses the site's own colours and fonts, so it follows
   the Night camp colours too. While the hand is up (.has-dealt-hand, set by dealt-hand.js) it takes the place of the
   floating suit circle beside the Games title; without the script, or if it fails, none of these rules apply. */
#eb-app .games-home.has-dealt-hand .games-orbit{display:none}
@media(min-width:1000px){#eb-app .games-home.has-dealt-hand .games-intro{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px}}
@media(max-width:999px){#eb-app .games-home.has-dealt-hand .games-intro{grid-template-columns:minmax(0,1fr);gap:20px}}
#dealt-hand{position:relative;width:100%;max-width:440px;min-width:0;justify-self:center;color:var(--text-primary);font-family:var(--font-body)}
#dealt-hand[hidden]{display:none}
#dealt-hand .dh-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.14em}
#dealt-hand .dh-count{white-space:nowrap}
#dealt-hand .dh-stage{position:relative;height:calc(var(--card-h,300px) + 30px);margin-top:10px}
#dealt-hand .dh-under,#dealt-hand .dh-card{position:absolute;left:0;right:0;top:12px;margin:0 auto;width:min(310px,calc(100% - 22px));height:var(--card-h,300px);box-sizing:border-box;border-radius:22px}
#dealt-hand .dh-under{background:var(--bg-sunk);border:1px solid var(--line)}
#dealt-hand .dh-under--a{transform:rotate(-5deg)}
#dealt-hand .dh-under--b{transform:rotate(4deg);background:var(--bg-primary)}
/* A card that is not in play is invisible, cannot be tapped and is out of the keyboard's way (visibility), even in a
   browser that does not know "inert". It becomes hidden only after it has slid back into the hand. */
#dealt-hand .dh-card{z-index:3;padding:20px;display:flex;flex-direction:column;background:var(--bg-raised);border:1px solid var(--line);box-shadow:0 18px 36px #1a20302e;opacity:0;visibility:hidden;pointer-events:none;transition:transform .56s cubic-bezier(.2,.8,.2,1),opacity .38s ease,visibility 0s linear .56s}
#dealt-hand .dh-card.is-front{z-index:4;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
#dealt-hand .dh-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#dealt-hand .dh-corner{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:28px}
#dealt-hand .dh-rank{font:800 26px/1 system-ui,sans-serif;color:var(--text-primary)}
#dealt-hand .is-red .dh-rank,#dealt-hand .dh-mini.is-red .dh-mini__corner{color:var(--accent-crimson)}
#dealt-hand .dh-suit{display:block;width:20px;height:20px;fill:var(--text-primary)}
#dealt-hand .is-red .dh-suit{fill:var(--accent-crimson)}
#dealt-hand .dh-seats{padding:3px 10px;border:1px solid var(--line);border-radius:999px;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap}
#dealt-hand .dh-kicker{margin-top:12px;font:600 13px/1.3 system-ui,sans-serif;color:var(--text-muted)}
#dealt-hand .dh-title{display:block;margin-top:4px;font-size:clamp(26px,8vw,32px);line-height:1.1;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
#dealt-hand .dh-copy{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--text-muted);text-wrap:pretty}
#dealt-hand .dh-actions{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
#eb-app #dealt-hand .dh-play{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;padding:0 18px;font-size:15px}
#dealt-hand .dh-friends{display:inline-flex;align-items:center;min-height:48px;font-size:15px;font-weight:700;color:var(--accent-crimson);text-decoration:none}
#dealt-hand .dh-hint{margin:8px 0 0;text-align:center;text-wrap:balance;font-size:14px;line-height:1.4;color:var(--text-muted)}
#dealt-hand .dh-fan{position:relative;margin-top:2px}
#eb-app #dealt-hand .dh-mini{position:absolute;left:0;top:0;width:var(--w,64px);height:var(--h,91px);min-height:0;margin:0;padding:0;box-sizing:border-box;background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 8px #1a203024;transform-origin:50% 100%;font:inherit;cursor:pointer;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
#dealt-hand .dh-mini:hover{--hover:-8px}
#eb-app #dealt-hand .dh-mini.is-on{box-shadow:0 0 0 2px var(--accent-crimson),0 12px 24px #1a20303d}
#dealt-hand .dh-mini__corner{position:absolute;left:7px;top:7px;display:flex;flex-direction:column;align-items:center;gap:3px;font:800 16px/1 system-ui,sans-serif;color:var(--text-primary)}
#dealt-hand .dh-mini__corner .dh-suit{width:13px;height:13px}
#dealt-hand .dh-mini__name{position:absolute;left:4px;right:3px;bottom:6px;font:700 var(--name,10.5px)/1.15 system-ui,sans-serif;text-align:left;overflow-wrap:anywhere;max-height:3.45em;overflow:hidden;opacity:0;transition:opacity .3s ease}
#dealt-hand .dh-mini.is-on .dh-mini__name{opacity:1}
#dealt-hand .dh-bar{display:flex;gap:12px;margin-top:6px}
#eb-app #dealt-hand .dh-bar button{height:48px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0 12px;box-sizing:border-box;background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px #1a203014;font:700 15px/1 var(--font-body);cursor:pointer}
#eb-app #dealt-hand .dh-step{flex:none;width:48px;padding:0}
#dealt-hand .dh-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#dealt-hand .dh-pause{flex:1 1 auto}
#eb-app #dealt-hand .dh-mini:focus-visible,#eb-app #dealt-hand .dh-bar button:focus-visible{outline:3px solid var(--accent-gold);outline-offset:3px}
#eb-app #dealt-hand .dh-play:focus-visible,#eb-app #dealt-hand .dh-friends:focus-visible{outline:3px solid var(--accent-gold);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){#dealt-hand .dh-card,#dealt-hand .dh-mini,#dealt-hand .dh-mini__name{transition:none}}
#eb-app.quiet #dealt-hand .dh-card,#eb-app.quiet #dealt-hand .dh-mini{transition-duration:.01s;transition-delay:0s}