/* Printed casino cards and restrained table feedback for the Emerald Room. */
#app .card {
  container-type: size; font-family: Georgia,"Times New Roman",serif;
  background: radial-gradient(circle at 24% 16%,#fff 0,#fffdf7 28%,transparent 67%),linear-gradient(140deg,#fffdf4,#f6eedb 74%,#e9dbc0);
  border: 1px solid #d7c69d; border-radius: 6px;
  box-shadow: 0 2px 0 #a89062,0 6px 12px #001c1690,inset 0 1px #fff,inset -2px -2px 4px #b69a6129;
}
#app .card.suit-s { color: var(--suit-spade); }
#app .card.suit-h { color: var(--suit-heart); }
#app .card.suit-c { color: var(--suit-club); }
#app .card.suit-d { color: var(--suit-diamond); }
#app .card:not(.back)::before { inset: 3px; border: 1px solid #ae925947; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff9e9a6; }
#app .card.face::before { border-color: #b9a167a0; }
#app .card::after { content: none; }
#app .card .card-corner { left: 6%; top: 4%; width: 27%; align-items: center; line-height: 1; }
#app .card .card-corner-bottom { top: auto; left: auto; right: 6%; bottom: 4%; transform: rotate(180deg); }
#app .card .corner-rank { font: 700 31cqw/.95 Georgia,"Times New Roman",serif; letter-spacing: -.07em; text-shadow: 0 1px #fff9; }
#app .card .corner-suit { font: 22cqw/.9 Georgia,serif; margin: 1px 0 0; width: auto; height: auto; color: inherit; background: none; filter: none; }
#app .card .card-main,#app .card.face .card-main { position: absolute; inset: 22% 27%; width: auto; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#app .card .card-main::before,#app .card .card-main::after { content: none; }
#app .card .main-suit { color: inherit; background: none; width: auto; height: auto; font: 43cqw/1 Georgia,serif; transform: none; filter: none; }
#app .card .royal-rank { font: 700 42cqw/.95 Georgia,serif; color: inherit; }
#app .card.face:not(.face-a) .main-suit { font-size: 22cqw; }
#app .card.face:not(.face-a) .card-main { inset: 25% 24%; border-top: 1px solid #bca269; border-bottom: 1px solid #bca269; background: radial-gradient(ellipse at center,#ddc27e44,transparent 75%); }
#app .card.face-a .main-suit { font-size: 49cqw; }
#app .card .pip-layout { inset: 24% 26%; display: block; }
#app .card .card-pip { position: absolute; font: 21cqw/1 Georgia,serif; transform: translate(-50%,-50%); color: inherit; }
#app .card .card-pip.inverted { transform: translate(-50%,-50%) rotate(180deg); }
#app .card[data-rank="2"] .card-pip,#app .card[data-rank="3"] .card-pip { font-size: 25cqw; }
#app .card.back,#app .card .card-back-cover {
  background: #074738 url("assets/emerald/card-back-v2.webp") center / 100% 100% no-repeat;
  border: 1px solid #d9c08a; box-shadow: 0 2px 0 #b6a57b,0 4px 9px #0007;
}
#app .card.back::before,#app .card .card-back-cover::before { content: none; }
#app .card .card-back-cover { inset: 0; border-radius: inherit; }
body[data-theme="midnight"] #app .card.back,body[data-theme="midnight"] #app .card .card-back-cover { filter: hue-rotate(55deg); }
body[data-theme="blackgold"] #app .card.back,body[data-theme="blackgold"] #app .card .card-back-cover { filter: saturate(.3); }
#app .community-cards { min-height: 0; }
#app .community-cards .card { width: 72px; height: 101px; }
#app .community-cards .card:not(.back) { box-shadow: 0 2px 0 #af9b77,0 7px 15px #001c16a0; }
#app .community-cards .card.back { background: #073f322c; border: 1px dashed #dfc58a70; box-shadow: inset 0 0 0 3px #e2d29208; filter: none; }
#app .community-cards .card.back::before { content: "♠"; position: absolute; inset: 0; display: grid; place-items: center; border: 0; color: #d9c78e40; font: 24px Georgia,serif; background: none; }
#app .seat.self .seat-cards { gap: 7px; }
#app .seat.self .seat-cards .card { width: 50px; height: 70px; }
#app .seat:not(.self) .seat-cards .card { width: 32px; height: 45px; }
#app .card.highlight { border-color: #cfad5c; box-shadow: 0 0 0 1px #e9ca7e,0 4px 10px #0005; }
#app .card.deal-in,#app .card.hole-deal:not(.back) {
  --card-duration: .68s;
  animation: table-card-arrive var(--card-duration) cubic-bezier(.2,.7,.18,1) both;
  transform-origin: 50% 60%;
}
#app .card.hole-deal.back {
  animation: table-card-back-arrive .56s cubic-bezier(.2,.72,.2,1) both;
}
#app .card.reveal-in {
  --card-duration: .58s;
  animation: table-card-reveal var(--card-duration) cubic-bezier(.25,.65,.2,1) both;
  transform-origin: center;
}
#app .card.deal-in::after,#app .card.hole-deal:not(.back)::after,#app .card.reveal-in::after {
  content: ""; position: absolute; inset: -1px; z-index: 5; border: 1px solid #e4cb93;
  border-radius: inherit; background: #074738 url("assets/emerald/card-back-v2.webp") center / 100% 100% no-repeat;
  box-shadow: 0 2px 0 #9f8753,0 7px 15px #0008;
  animation: card-sleeve var(--card-duration) steps(1,end) both;
  animation-delay: inherit;
  pointer-events: none;
}
@keyframes table-card-arrive {
  0% { opacity: 0; transform: translate(var(--deal-x,0px),var(--deal-y,-80px)) rotate(var(--deal-rot,0deg)) scale(.72); }
  13% { opacity: 1; }
  57% { transform: translateY(-9px) rotate(2deg) scale(1.03); }
  72% { transform: translateY(-5px) rotateY(84deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
@keyframes table-card-back-arrive {
  0% { opacity: 0; transform: translate(var(--deal-x,0px),var(--deal-y,-80px)) rotate(var(--deal-rot,0deg)) scale(.72); }
  18% { opacity: 1; }
  74% { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes table-card-reveal {
  0%,20% { transform: rotateY(0) translateY(0); }
  51% { transform: rotateY(88deg) translateY(-5px) scale(1.04); }
  100% { transform: rotateY(0) translateY(0) scale(1); }
}
@keyframes card-sleeve { 0%,69% { opacity: 1; } 70%,100% { opacity: 0; } }
body[data-theme="midnight"] #app .card.deal-in::after,body[data-theme="midnight"] #app .card.hole-deal:not(.back)::after,body[data-theme="midnight"] #app .card.reveal-in::after { filter: hue-rotate(55deg); }
body[data-theme="blackgold"] #app .card.deal-in::after,body[data-theme="blackgold"] #app .card.hole-deal:not(.back)::after,body[data-theme="blackgold"] #app .card.reveal-in::after { filter: saturate(.3); }

#app .seat-avatar { background: radial-gradient(circle at 40% 20%,#527960,#102f26) !important; }
#app .seat-avatar img { filter: saturate(.78) contrast(1.07); }
#app .seat.folded { opacity: .62; filter: saturate(.5); }
#app .seat.folded .seat-cards { opacity: .38; }
#app .seat.active { background: linear-gradient(#f5d68e16,#04261fd9); box-shadow: 0 0 0 1px #f2d08790,0 0 28px #d3ac5328; }
#app .seat.winner { box-shadow: 0 0 0 2px #f2d798,0 0 35px #e9bc6155; }
#app .seat.winner .seat-cards { animation: winning-hand 1.1s ease-out both; }
@keyframes winning-hand { 0%,100% { filter: drop-shadow(0 0 0 #f8d38400); } 42% { filter: drop-shadow(0 0 14px #f8d384da); } }
#app .seat-tag .badge-dealer { color: #304136; background: linear-gradient(#fff5d7,#cdbc8e); border-color: #ebdbb2; }
#app .seat-tag .badge-sb { color: #e4e9d2; background: linear-gradient(#457d66,#164738); border-color: #a6c3a3; }
#app .seat-tag .badge-bb { color: #ffe4ad; background: linear-gradient(#916339,#4d3926); border-color: #c9a36b; }
#app .seat-bet { display: inline-flex; align-items: center; gap: 4px; border-color: #d1ad6866; background: #05281fe8; }
#app .seat-bet::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; border: 2px dashed #e6ce96; border-radius: 50%; background: #518066; box-shadow: 0 1px 0 #172e20; }
#app .seat-capsule { background: #0b3027f0; color: #d9e7cc; border: 1px solid #89ad8770; border-radius: 4px; font-weight: 500; }
#app .seat-capsule.cap-raise { color: #ffe6ad; border-color: #d7b877; background: #493f26f0; }
#app .seat-capsule.cap-allin { color: #ffe1bb; border-color: #d39669; background: #693f33f0; }
#app .seat-capsule.cap-fold { color: #b9c0ac; border-color: #8c938155; }
#app .street-progress { gap: 14px; }
#app .street-progress span { border-radius: 3px; padding: 5px 7px 3px; }
#app .street-progress .current { color: #ffdfa0; border-color: #e5c88a; }
#app .action-float { font: 600 11px system-ui; padding: 5px 9px; border-radius: 5px; background: #5c4b2aeF; color: #ffe4a8; border: 1px solid #dbbb78; box-shadow: 0 3px 10px #0006; animation: restrained-action 1.05s ease-out forwards; }
#app .action-float.kind-allin { background: #6a3930; border-color: #e3a875; }
@keyframes restrained-action { 0% { opacity: 0; transform: translate(-50%,5px); } 15%,65% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; transform: translate(-50%,-9px); } }
#app .float-emo { font-size: 21px; padding: 3px; border-radius: 50%; border: 1px solid #c6b07a60; background: #17362cef; animation: seated-emote 1.6s ease-out forwards; filter: none; }
@keyframes seated-emote { 0% { opacity: 0; transform: translate(-50%,3px) scale(.7); } 15%,70% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-7px); } }
#app .flying-chip { width: 17px; height: 17px; border: 3px dashed #f4dfa8; border-radius: 50%; background: radial-gradient(circle,#bd9955 0 44%,#ead392 47% 52%,#795b2e 55%); box-shadow: 0 2px 0 #604e2b,0 4px 6px #0006; filter: none; }
#app .flying-chip.chip-green { background: radial-gradient(circle,#417d5a 0 44%,#dae3b3 47% 52%,#214b34 55%); }
#app .flying-chip.chip-red { background: radial-gradient(circle,#984e46 0 44%,#e2c99c 47% 52%,#64302b 55%); }
#app .flying-chip.chip-blue { background: radial-gradient(circle,#3e6470 0 44%,#d0d9b8 47% 52%,#24444d 55%); }
#app .confetti { width: 4px; height: 8px; border-radius: 1px; }
#app .result-row.winner { border-color: #e5c17a99; background: linear-gradient(100deg,#b49b4924,#123729); box-shadow: inset 3px 0 #dfbd71; }
#app .result-row.winner::after { content: none; }
#app .result-row.self .result-name { color: #ffe1a5; }
#app .result-board { background: #082f27; border: 1px solid #a6976266; box-shadow: none; }
@media (max-height: 780px) and (min-width: 761px) {
  #app .community-cards .card { width: 57px; height: 80px; }
  #app .seat.self .seat-cards .card { width: 40px; height: 56px; }
}
@media (max-width: 760px) {
  #app .community-cards .card { width: clamp(33px,10.25vw,49px); height: auto; aspect-ratio: 5 / 7; border-radius: 4px; }
  #app .community-cards .card.back::before { font-size: 16px; }
  #app .seat.self .seat-cards { gap: 5px; }
  #app .seat.self .seat-cards .card { width: clamp(40px,11vw,48px); height: auto; aspect-ratio: 5 / 7; }
  #app .seat:not(.self) .seat-cards .card { width: 23px; height: 32px; }
  #app .street-progress { gap: 4px; }
  #app .street-progress span { padding: 4px 4px 2px; }
  #app .seat-bet::before { width: 7px; height: 7px; flex-basis: 7px; border-width: 1px; }
  #app .action-float { font-size: 9px; }
  #app .float-emo { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .card.deal-in,#app .card.hole-deal,#app .card.reveal-in,#app .seat.winner .seat-cards { animation: none; opacity: 1 !important; }
  #app .card.deal-in::after,#app .card.hole-deal::after,#app .card.reveal-in::after { display: none; }
}

/* On portrait phones, keep the persistent menu clear of the player's cards. */
#table .mobile-menu-toggle { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  body #table .session-hud { top: max(10px, env(safe-area-inset-top)); }
  body #table .mobile-menu-toggle {
    position: absolute;
    top: calc(max(10px, env(safe-area-inset-top)) + 92px);
    right: 10px;
    z-index: 42;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 70px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d6b777a6;
    border-radius: 9px;
    color: #f3dfad;
    background: linear-gradient(155deg, #17453f, #082523);
    box-shadow: 0 4px 14px #00150db3, inset 0 1px #e8d0a936;
    font: 600 12px/1 system-ui, sans-serif;
    letter-spacing: .06em;
    cursor: pointer;
  }
  body #table .mobile-menu-toggle span { font-size: 18px; line-height: 1; }
  body #table .mobile-menu-toggle[aria-expanded="true"] { background: linear-gradient(155deg, #396955, #123a32); }
  body #table .mobile-menu-toggle:focus-visible { outline: 2px solid #ffdf9c; outline-offset: 2px; }
  body #table .top-bar { display: none; top: calc(max(10px, env(safe-area-inset-top)) + 140px); bottom: auto; right: 10px; width: max-content; padding: 8px; grid-template-columns: repeat(3, 44px); gap: 7px; border-radius: 12px; z-index: 41; }
  body #table .top-bar.is-open { display: grid; }
  body #table .top-bar .icon-btn,
  body #table .top-bar .settings-wrap .icon-btn,
  body #table .top-bar .settings-wrap { width: 44px; height: 44px; }
  body #table .top-bar .toolbar-icon { width: 19px; height: 19px; }
  body #table .settings-popup { top: calc(100% + 8px); bottom: auto; right: 0; }
}

/* Fit the table and betting controls together on common short phone screens. */
@media (max-width: 760px) and (min-height: 640px) and (max-height: 700px) and (orientation: portrait) {
  body:has(#table:not([style*="display: none"])) { overflow: hidden; }
  body:has(#table:not([style*="display: none"])) #app { height: 100dvh; min-height: 0; overflow: hidden; }
  body #table { height: 100dvh; min-height: 100dvh; }
  body #table .table-oval { top: 246px; height: 248px; }
  body #table .seat.self { transform: translate(-50%, -32%); }
}