/* v30.23.0: owner's polish list - emotes (longer, never cut off, four new), trump selection indicator,
   "Pinde nået" celebration, a clearer deal, a sharper 3-2-1 intro, phone landscape fine-tuning. */

/* ---- emotes ------------------------------------------------------------- */
.poker-stage > .emoji-reaction.emote-sticker{
  z-index:5600!important;   /* above flying trick cards and table overlays: nothing interrupts it */
  animation:emoteLife 3.4s cubic-bezier(.2,.9,.3,1) var(--emote-delay,0s) both!important; /* v30.25.6: 3.4 s again */
  width:clamp(63px,15.3cqw,105px)!important; /* v30.25.6: 15 % smaller */
}
@keyframes emoteLife{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}
  7%{opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(4deg)}
  12%{transform:translate(-50%,-50%) scale(.94) rotate(-2deg)}
  17%{transform:translate(-50%,-50%) scale(1.04) rotate(0)}
  22%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.86)}
}
.emoji-menu.emote-menu:not(.hidden){display:grid!important;grid-template-columns:repeat(5,auto)}
.emoji-menu.emote-menu button{width:clamp(52px,12vw,64px)!important}

/* 🤦 Dohh: a slap - the sticker tips back, little stars spin */
.emote-doh img{animation:emoteDoh .5s ease-out .35s 2}
.emote-doh .emote-fx i::before{content:"✶";position:absolute;color:#ffe066;font-size:clamp(11px,3cqw,18px);text-shadow:0 0 6px rgba(255,210,63,.9)}
.emote-doh .emote-fx i{top:12%;animation:emoteOrbit 1.2s linear .3s 3}
.emote-doh .emote-fx i:nth-child(2){animation-delay:.7s}
.emote-doh .emote-fx i:nth-child(3){animation-delay:1.1s}
.emote-doh .emote-fx i:nth-child(n+4){display:none}
@keyframes emoteDoh{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg) translateY(4%)}60%{transform:rotate(4deg)}}
@keyframes emoteOrbit{0%{opacity:0;transform:translate(-30px,0) scale(.6)}20%{opacity:1}50%{transform:translate(0,-12px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(30px,0) scale(.6)}}

/* 😱 Hvad?!: a jolt, exclamation marks pop out */
.emote-what img{animation:emoteJolt .45s cubic-bezier(.2,1.8,.4,1) .3s 2}
.emote-what .emote-fx i::before{content:"!";position:absolute;color:#fff;font:1000 clamp(14px,3.8cqw,24px)/1 system-ui;text-shadow:0 0 6px #ffd23f,0 2px 2px rgba(0,0,0,.6)}
.emote-what .emote-fx i{animation:emoteBurst .9s ease-out .3s 2}
.emote-what .emote-fx i:nth-child(1){--dx:-50px;--dy:-34px}
.emote-what .emote-fx i:nth-child(2){--dx:50px;--dy:-34px}
.emote-what .emote-fx i:nth-child(3){--dx:0px;--dy:-58px}
.emote-what .emote-fx i:nth-child(n+4){display:none}
@keyframes emoteJolt{0%{transform:scale(1)}35%{transform:scale(1.18) translateY(-8%)}100%{transform:scale(1)}}

/* 🎉 Jubel: jumps, confetti */
.emote-joy img{animation:emoteBounce .5s ease-out .3s 4}
.emote-joy .emote-fx i::before{content:"";position:absolute;width:7px;height:11px;border-radius:2px;background:var(--c,#ffd766)}
.emote-joy .emote-fx i{animation:emoteConfetti 1.3s ease-out .3s 2}
.emote-joy .emote-fx i:nth-child(1){--dx:-56px;--dy:-50px;--c:#ff4d6d}
.emote-joy .emote-fx i:nth-child(2){--dx:54px;--dy:-52px;--c:#4dc3ff;animation-delay:.4s}
.emote-joy .emote-fx i:nth-child(3){--dx:-34px;--dy:-70px;--c:#ffd766;animation-delay:.5s}
.emote-joy .emote-fx i:nth-child(4){--dx:36px;--dy:-72px;--c:#7be495;animation-delay:.35s}
.emote-joy .emote-fx i:nth-child(5){--dx:-62px;--dy:-10px;--c:#c38bff;animation-delay:.6s}
.emote-joy .emote-fx i:nth-child(6){--dx:62px;--dy:-8px;--c:#ff9f43;animation-delay:.45s}
@keyframes emoteConfetti{0%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(540deg)}}

/* 😬 Nervøs: trembles, sweat drops fall */
.emote-nervous img{animation:emoteTremble .12s linear .3s 18}
.emote-nervous .emote-fx i::before{content:"💧";position:absolute;font-size:clamp(10px,2.8cqw,16px)}
.emote-nervous .emote-fx i{top:18%;animation:emoteDrop 1.1s ease-in .4s 3}
.emote-nervous .emote-fx i:nth-child(1){left:12%}
.emote-nervous .emote-fx i:nth-child(2){left:84%;animation-delay:.75s}
.emote-nervous .emote-fx i:nth-child(n+3){display:none}
@keyframes emoteTremble{0%,100%{transform:translateX(0)}50%{transform:translateX(2%)}}
@keyframes emoteDrop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(34px)}}

.player.emote-pulse[data-emote="doh"]{--emote-glow:rgba(255,210,63,.95)}
.player.emote-pulse[data-emote="what"]{--emote-glow:rgba(255,255,255,.95)}
.player.emote-pulse[data-emote="joy"]{--emote-glow:rgba(255,120,180,.95)}
.player.emote-pulse[data-emote="nervous"]{--emote-glow:rgba(120,190,255,.95)}

/* ---- trump / number selection: impossible to miss which one is chosen ------ */
html body .table[data-table-theme] #decisionDock .trump-choice.selected,
html body .table[data-table-theme] #decisionDock .number-choice.selected,
.decision-dock .trump-choice.selected,
.decision-dock .number-choice.selected{
  position:relative!important;
  border:2px solid #ffe591!important;
  background:linear-gradient(180deg,#f6d36a,#c99323)!important;
  color:#2b1a04!important;
  transform:translateY(-2px) scale(1.06)!important;
  box-shadow:0 0 0 3px rgba(255,214,102,.45),0 0 16px rgba(255,214,102,.7)!important;
  filter:none!important;
  z-index:2!important;
}
html body .table[data-table-theme] #decisionDock .trump-choice.selected .suit-symbol,html body .table[data-table-theme] #decisionDock .trump-choice.selected .suit-name{color:#2b1a04!important}
html body .table[data-table-theme] #decisionDock .trump-choice.selected.red-suit .suit-symbol{color:#b0101c!important}
html body .table[data-table-theme] #decisionDock .trump-choice.selected::after,
html body .table[data-table-theme] #decisionDock .number-choice.selected::after,
.decision-dock .trump-choice.selected::after,
.decision-dock .number-choice.selected::after{
  content:"✓";position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:#1b8a4f;border:2px solid #fff;color:#fff;font:1000 10px/1 system-ui;box-shadow:0 2px 5px rgba(0,0,0,.5)
}
.decision-dock .trump-choice:not(.selected),.decision-dock .number-choice:not(.selected):not(:disabled){transition:transform .12s ease}

/* ---- "Pinde nået": the trick that makes a player's Pinde exactly right ---- */
.target-hit-fx{position:absolute;z-index:5550;width:0;height:0;pointer-events:none}
.target-hit-fx .th-ring{position:absolute;left:calc(var(--w) * -.55);top:calc(var(--w) * -.55);width:calc(var(--w) * 1.1);height:calc(var(--w) * 1.1);border-radius:50%;
  border:3px solid #ffe591;box-shadow:0 0 18px rgba(255,214,102,.9),inset 0 0 14px rgba(255,214,102,.6);opacity:0;animation:thRing 1.1s ease-out forwards}
.target-hit-fx .th-ring2{animation-delay:.25s;border-color:#7be495;box-shadow:0 0 18px rgba(123,228,149,.8)}
.target-hit-fx i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ffd766 55%,transparent 72%);opacity:0;animation:thSpark 1s ease-out forwards}
.target-hit-fx i:nth-child(3){--a:0deg}.target-hit-fx i:nth-child(4){--a:36deg}.target-hit-fx i:nth-child(5){--a:72deg}.target-hit-fx i:nth-child(6){--a:108deg}.target-hit-fx i:nth-child(7){--a:144deg}
.target-hit-fx i:nth-child(8){--a:180deg}.target-hit-fx i:nth-child(9){--a:216deg}.target-hit-fx i:nth-child(10){--a:252deg}.target-hit-fx i:nth-child(11){--a:288deg}.target-hit-fx i:nth-child(12){--a:324deg}
.target-hit-fx .th-ribbon{position:absolute;left:50%;top:calc(var(--w) * -.05);transform:translate(-50%,-50%) scale(.4);white-space:nowrap;padding:3px 10px;border-radius:999px;
  border:1px solid #fff3c4;background:linear-gradient(180deg,#2fbf73,#13804a);color:#fff;font:1000 clamp(10px,1.6vw,13px)/1.2 system-ui;letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 14px rgba(123,228,149,.7);opacity:0;animation:thRibbon 2.3s cubic-bezier(.2,1.5,.4,1) forwards}
.player.target-hit .hud-full-frame{animation:thHud .9s ease-out 1}
@keyframes thRing{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes thSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--w) * .8))}}
@keyframes thRibbon{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}25%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.95)}}
@keyframes thHud{0%{filter:drop-shadow(0 0 0 transparent)}35%{filter:drop-shadow(0 0 16px rgba(123,228,149,.95)) brightness(1.15)}100%{filter:drop-shadow(0 0 0 transparent)}}

/* ---- a clearer deal ------------------------------------------------------- */
.poker-stage .deal-layer{z-index:60!important}
.poker-stage .deal-card{box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 10px rgba(255,214,102,.35)!important}
.poker-stage .deal-by{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);padding:3px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid #c9a24a;background:rgba(10,25,45,.88);color:#ffe591;font:900 11px/1.2 system-ui;letter-spacing:.4px;animation:dealBy .4s ease-out both}
.player.dealing-now .hud-full-frame{filter:drop-shadow(0 0 12px rgba(255,214,102,.85))!important}
.player.deal-land .hud-full-frame{animation:dealLand .26s ease-out 1}
@keyframes dealBy{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes dealLand{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.045)}100%{transform:translateX(-50%) scale(1)}}

/* ---- the 3-2-1 intro: crisp, sized by the screen, fades into the table ------ */
.game-intro{background:radial-gradient(70% 60% at 50% 45%,rgba(20,44,72,.95),rgba(3,9,16,.97))!important;backdrop-filter:none!important;animation:introIn .25s ease-out both!important}
.game-intro.leaving{animation:introOut .4s ease-in both!important}
.game-intro-dots{display:none!important}
.game-intro-card{display:flex!important;flex-direction:column;align-items:center;gap:min(1.6vh,10px)!important}
.game-intro-logo{width:auto!important;height:clamp(64px,19vh,150px)!important;animation:none!important;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))!important}
.game-intro-text{display:grid;gap:4px;justify-items:center}
.game-intro-title{margin:0!important;font:1000 clamp(17px,3.6vh,26px)/1.1 system-ui,sans-serif!important;color:#ffe591!important;text-shadow:0 2px 0 rgba(0,0,0,.45)!important;letter-spacing:.5px}
.game-intro-sub{font:800 clamp(10px,1.9vh,13px)/1 system-ui,sans-serif!important;letter-spacing:2px!important;color:#9db2c7!important}
.game-intro-count{width:clamp(96px,26vh,160px)!important;margin:0!important;font-size:0!important;
  box-shadow:0 0 0 4px rgba(255,241,184,.9),0 10px 30px rgba(0,0,0,.5)!important;animation:none!important}
.game-intro-count > span{display:block;font:1000 calc(clamp(96px,26vh,160px) * .58)/1 system-ui,sans-serif;color:#2b1a04;text-shadow:0 2px 0 rgba(255,255,255,.35);
  animation:introNum .9s cubic-bezier(.2,1.4,.4,1) both;-webkit-font-smoothing:antialiased}
.game-intro-count.go > span{font-size:calc(clamp(96px,26vh,160px) * .25);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);letter-spacing:1px;animation:introGoNum .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes introNum{0%{opacity:0;transform:scale(1.7)}22%{opacity:1;transform:scale(.94)}34%{transform:scale(1)}85%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(.82)}}
@keyframes introGoNum{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes introOut{to{opacity:0;transform:scale(1.04)}}
@media (orientation:landscape) and (max-height:540px){
  .game-intro-card{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:clamp(18px,4vw,40px);row-gap:6px;align-items:center}
  .game-intro-logo{grid-row:1;grid-column:1;height:clamp(56px,20vh,96px)!important}
  .game-intro-text{grid-row:2;grid-column:1}
  .game-intro-count{grid-row:1 / span 2;grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .game-intro-count > span,.game-intro.leaving,.target-hit-fx *,.player.deal-land .hud-full-frame{animation:none!important}
  .target-hit-fx .th-ribbon{opacity:1;transform:translate(-50%,-50%)}
}

/* ---- phone landscape: the trick clears your HUD's crown ------------------ */
@media (orientation:landscape){
  html body.game-scroll-locked #app.shell .poker-stage .trick-center-layer{top:33%!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick-center-layer{top:35%!important}
  html body.game-scroll-locked #app.shell .poker-stage .deal-card,
  html body.game-scroll-locked #app.shell .poker-stage .deal-deck span{width:clamp(calc(30 * var(--px)),9vh,calc(40 * var(--px)))!important;height:clamp(calc(43 * var(--px)),13vh,calc(57 * var(--px)))!important}
  html body.game-scroll-locked #app.shell .poker-stage .deal-deck{width:clamp(calc(34 * var(--px)),10vh,calc(44 * var(--px)))!important;height:clamp(calc(47 * var(--px)),14vh,calc(61 * var(--px)))!important;top:46%!important}
  html body.game-scroll-locked #app.shell .poker-stage .deal-by{top:calc(46% + clamp(calc(30 * var(--px)),9vh,calc(40 * var(--px))))}
}
/* low screens (Safari with its bars): a little higher and smaller so the trick still clears your HUD */
@media (orientation:landscape) and (max-height:360px){
  html body.game-scroll-locked #app.shell .poker-stage .trick-center-layer{top:30%!important;--rq-hand-card-w:clamp(36px,10vh,44px)!important;--rq-hand-card-h:clamp(50px,14vh,60px)!important}
  html body.game-scroll-locked #app.shell{--lt-hud:clamp(70px,21vh,104px)}
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .seat-r2{top:calc(18px + var(--lt-far) * .55)!important}
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick-center-layer{top:36%!important;--rq-hand-card-w:clamp(32px,9vh,40px)!important;--rq-hand-card-h:clamp(44px,13vh,54px)!important}
}

/* the deck waits under the intro, it appears when the intro has faded */
body.game-intro-on .poker-stage .deal-layer{opacity:0!important}
.poker-stage .deal-layer{transition:opacity .35s ease}
/* v30.24.0: tall screens - the 4-player trick sits between the far seat and your HUD */
@media (orientation:landscape) and (min-height:600px){
  html body.game-scroll-locked #app.shell .poker-stage.count-4 .trick-center-layer{top:38%!important;--rq-hand-card-w:8.5vh!important;--rq-hand-card-h:12vh!important}
}