.avatar-face{
  --avatar-col:0;
  --avatar-row:0;
  display:block;
  aspect-ratio:307.2/360;
  border-radius:46%;
  background-color:#ebe7dd;
  background-image:url("../images/Avatars.png");
  background-repeat:no-repeat;
  background-size:500% 300%;
  background-position:calc(var(--avatar-col) * 25%) calc(var(--avatar-row) * 50%);
  box-shadow:inset 0 0 0 1px rgba(18,20,18,.2);
}

#btnProfile{position:relative}
#btnProfile .header-avatar{display:none;width:32px}
#btnProfile.has-avatar svg{display:none}
#btnProfile.has-avatar .header-avatar{display:block}
#btnProfile .header-trump-lock{
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:24px;
  height:17px;
  margin:0;
  transform:scale(.92);
  transform-origin:center;
  z-index:2;
}
#btnProfile .header-trump-lock[hidden]{display:none}
#btnProfile.has-trump-lock{
  border-color:rgba(216,183,110,.78);
  box-shadow:0 0 0 1px rgba(216,183,110,.22),0 0 18px -8px rgba(216,183,110,.9);
}

.profile-avatar-picker{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.5rem;
}
.profile-avatar-choice{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:58px;
  padding:.25rem;
  border-radius:8px;
  border:1px solid rgba(216,183,110,.3);
  background:#0b1422;
  cursor:pointer;
}
.profile-avatar-choice .avatar-face{width:44px}
.profile-avatar-choice:hover{border-color:var(--gold)}
.profile-avatar-choice[aria-pressed="true"]{
  border-color:var(--gold-lt);
  box-shadow:0 0 0 2px rgba(216,183,110,.25);
  background:rgba(216,183,110,.12);
}

.event-flash{
  --duration:4600ms;
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right))
    max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  overflow:hidden;
  color:#f4efe4;
  background:rgba(2,5,9,.9);
  backdrop-filter:blur(7px);
  animation:eventFlashIn .36s var(--ease) both,eventFlashOut .6s var(--ease) forwards;
  animation-delay:0s,calc(var(--duration) - .6s);
}
.event-flash.hidden{display:none}
.event-flash-shell{
  width:min(94vw,920px);
  display:grid;
  justify-items:center;
  gap:.8rem;
  animation:eventArtIn .85s var(--ease) both;
}
.event-flash-visual{position:relative;display:grid;place-items:center;isolation:isolate}
.event-flash-art{
  width:min(70vw,420px);
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.55));
}
.event-crop{position:relative;overflow:hidden;background:#062417}
.event-crop img{position:absolute;max-width:none;display:block;user-select:none;pointer-events:none;width:400%;height:auto}
.event-crop.pack3,.event-crop.pack4,.event-crop.spade,.event-crop.club{aspect-ratio:362/418}
.event-crop.diamond,.event-crop.heart{aspect-ratio:362/383}
.event-crop.porvoo{aspect-ratio:724/383}
.event-crop.slam{aspect-ratio:1448/285}
.event-crop.pack3 img{left:0;top:0}
.event-crop.pack4 img{left:-100%;top:0}
.event-crop.spade img{left:-200%;top:0}
.event-crop.spade,.event-crop.club{clip-path:inset(0 6% 0 0);transform:translateX(3%)}
.event-crop.club img{left:-300%;top:0}
.event-crop.diamond img,.event-crop.heart img{width:401.11%;top:-109.14%}
.event-crop.diamond img{left:0}
.event-crop.heart img{left:-100%}
.event-crop.porvoo img{width:200%;left:-100%;top:-109.14%}
.event-crop.slam img{width:100%;left:0;top:-281.05%}
.event-full-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.event-bid-ban-image{position:relative;width:100%;aspect-ratio:4/1;overflow:hidden;border-radius:8px}
.event-bid-ban-image img{display:block;width:100%;height:100%;object-fit:cover}

.event-flash-details{
  width:min(90vw,720px);
  padding:.75rem 1rem;
  text-align:center;
  border:1px solid rgba(216,183,110,.35);
  border-radius:8px;
  background:rgba(5,10,17,.92);
  box-shadow:0 16px 44px rgba(0,0,0,.38);
  animation:eventDetailsIn .55s var(--ease) .55s both;
}
.event-flash-player{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:-.15rem 0 .45rem}
.event-flash-player .event-avatar{
  flex:0 0 auto;
  width:48px;
  border:2px solid var(--gold-lt);
  box-shadow:0 0 16px rgba(241,216,147,.28);
}
.event-player-name{
  color:var(--gold);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.event-title{font-weight:800;color:var(--gold-lt);font-size:clamp(1rem,3vw,1.35rem)}
.event-detail{margin-top:.25rem;color:#f4efe4;font-size:clamp(.78rem,2vw,.96rem)}
.event-sub{margin-top:.2rem;color:#aeb6c3;font-size:.76rem}
.event-flash[data-kind="failure"] .event-title{color:#ed977e}
.event-flash[data-kind="bidban"] .event-title{color:#efc96f}
.event-flash-close{
  position:fixed;
  top:max(.8rem,env(safe-area-inset-top));
  right:max(.8rem,env(safe-area-inset-right));
  z-index:102;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(216,183,110,.5);
  background:#0b1422;
  color:#f4efe4;
  font-size:1.35rem;
  cursor:pointer;
}

.event-flash[data-kind="porvoo"]{background:#020509;backdrop-filter:none}
.event-flash[data-kind="porvoo"] .event-flash-shell{animation:none}
.event-flash[data-kind="porvoo"] .event-flash-art{
  width:min(88vw,760px);
  z-index:1;
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform:translateZ(0);
  transform-origin:61% 72%;
  filter:none;
  animation:eventPorvooDrive 5.45s cubic-bezier(.14,.58,.18,1) both;
}
.event-flash[data-kind="porvoo"] .event-flash-details{
  position:relative;
  z-index:2;
  animation:eventPorvooCaption .7s var(--ease) 2.15s both;
}

.event-flash[data-kind="slam"]::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:repeating-conic-gradient(from 82deg at 50% 50%,rgba(241,216,147,.3) 0deg 2deg,transparent 2deg 13deg);
  opacity:0;
  animation:eventSlamBurst 1.25s var(--ease) .08s both;
}
.event-flash[data-kind="slam"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,244,199,.58),rgba(216,183,110,.14) 28%,transparent 62%);
  opacity:0;
  animation:eventSlamGlow 1.15s var(--ease) both;
}
.event-flash[data-kind="slam"] .event-flash-shell{position:relative;z-index:1;animation:none}
.event-flash[data-kind="slam"] .event-flash-art{
  width:min(94vw,1000px);
  animation:eventSlamRush 1.05s cubic-bezier(.16,.9,.22,1.22) both;
}
.event-flash[data-kind="slam"] .event-flash-details{animation:eventSlamCaption .62s var(--ease) .9s both}

.event-flash[data-kind="failure"] .event-flash-art,
.event-flash[data-kind="success"] .event-flash-art,
.event-flash[data-kind="gamewin"] .event-flash-art{aspect-ratio:1672/941}
.event-flash[data-kind="failure"] .event-flash-art{width:min(90vw,900px)}
.event-flash[data-kind="success"] .event-flash-art{width:min(92vw,980px)}
.event-flash[data-kind="gamewin"] .event-flash-art{width:min(94vw,1120px)}
.event-flash[data-kind="bidban"] .event-flash-art{width:min(94vw,1120px)}
.event-flash:is([data-kind="success"],[data-kind="gamewin"]){background:rgba(2,7,6,.95)}
.event-flash:is([data-kind="success"],[data-kind="gamewin"])::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:repeating-conic-gradient(from -7deg at 50% 50%,rgba(241,216,147,.28) 0deg 2deg,transparent 2deg 15deg);
  opacity:0;
  animation:eventVictoryRays 1.65s var(--ease) .05s both;
}
.event-flash:is([data-kind="success"],[data-kind="gamewin"])::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 48%,rgba(255,236,166,.42),rgba(216,183,110,.1) 34%,transparent 68%);
  opacity:0;
  animation:eventVictoryGlow 2.2s ease-out both;
}
.event-flash:is([data-kind="success"],[data-kind="gamewin"]) .event-flash-shell{position:relative;z-index:1;animation:none}
.event-flash[data-kind="success"] .event-flash-art{animation:eventSuccessArrival 1.1s cubic-bezier(.16,.9,.22,1.16) .08s both}
.event-flash[data-kind="gamewin"] .event-flash-art{animation:eventGameWinArrival 1.35s cubic-bezier(.14,.88,.18,1.12) .08s both}
.event-flash:is([data-kind="success"],[data-kind="gamewin"]) .event-flash-details{animation:eventVictoryCaption .68s var(--ease) 1.05s both}

.event-flash[data-kind="bidban"]{background:rgba(5,2,3,.94)}
.event-flash[data-kind="bidban"]::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(192,38,38,.08) 0 28%,rgba(192,38,38,.42) 72%,rgba(80,0,0,.7) 100%);
  opacity:0;
  animation:eventBidBanAlarm 1.45s ease-out .05s both;
}
.event-flash[data-kind="bidban"]::after{
  content:"⊘";
  position:absolute;
  left:50%;
  top:50%;
  color:rgba(201,47,53,.34);
  font-size:min(74vmin,620px);
  font-weight:700;
  line-height:1;
  text-shadow:0 0 30px rgba(201,47,53,.58);
  opacity:0;
  animation:eventBidBanSeal 1.1s cubic-bezier(.12,.82,.18,1.18) .08s both;
}
.event-flash[data-kind="bidban"] .event-flash-shell{position:relative;z-index:1;animation:none}
.event-flash[data-kind="bidban"] .event-flash-art{animation:eventBidBanStrike .95s cubic-bezier(.18,.9,.22,1.15) .12s both}

.event-flash[data-kind="spade"]{--suit-symbol:"♠";--suit-color:#f3eee2;--particle-color:#11100e}
.event-flash[data-kind="club"]{--suit-symbol:"♣";--suit-color:#f3eee2;--particle-color:#11100e}
.event-flash[data-kind="diamond"]{--suit-symbol:"♦";--suit-color:#df4c43;--particle-color:#c92f35}
.event-flash[data-kind="heart"]{--suit-symbol:"♥";--suit-color:#df4c43;--particle-color:#c92f35}
.event-flash:is([data-kind="spade"],[data-kind="club"],[data-kind="diamond"],[data-kind="heart"])::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-conic-gradient(from -8deg,rgba(241,216,147,.34) 0deg 3deg,transparent 3deg 17deg);
  opacity:0;
  animation:eventTrumpRays 1.5s var(--ease) .08s both;
}
.event-flash:is([data-kind="spade"],[data-kind="club"],[data-kind="diamond"],[data-kind="heart"])::after{
  content:var(--suit-symbol);
  position:absolute;
  left:50%;
  top:50%;
  color:var(--suit-color);
  font-family:Georgia,serif;
  font-size:min(48vw,390px);
  line-height:1;
  text-shadow:0 0 26px currentColor;
  opacity:0;
  animation:eventTrumpSymbol 1.35s cubic-bezier(.18,.8,.2,1) both;
}
.event-flash:is([data-kind="spade"],[data-kind="club"],[data-kind="diamond"],[data-kind="heart"]) .event-flash-shell{
  position:relative;
  z-index:1;
  animation:none;
}
.event-suit-burst{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.event-suit-burst span{
  position:absolute;
  left:50%;
  top:50%;
  color:var(--particle-color);
  font-family:Georgia,serif;
  font-size:clamp(18px,4vmin,38px);
  font-weight:700;
  line-height:1;
  opacity:0;
  text-shadow:0 0 2px #f7e9bd,0 0 11px rgba(241,216,147,.8);
  animation:eventSuitParticle 1.55s cubic-bezier(.12,.72,.2,1) var(--delay) both;
}
.event-flash:is([data-kind="diamond"],[data-kind="heart"]) .event-suit-burst span{
  text-shadow:0 0 3px rgba(255,238,225,.9),0 0 13px rgba(223,76,67,.76);
}
.event-flash:is([data-kind="spade"],[data-kind="club"],[data-kind="diamond"],[data-kind="heart"]) .event-flash-art{
  position:relative;
  z-index:1;
  animation:eventTrumpStrike 1.05s cubic-bezier(.16,.9,.24,1.28) .18s both;
  filter:drop-shadow(0 0 18px rgba(241,216,147,.58)) drop-shadow(0 24px 34px rgba(0,0,0,.52));
}
.event-flash:is([data-kind="diamond"],[data-kind="heart"]) .event-flash-art{
  filter:drop-shadow(0 0 18px rgba(223,76,67,.62)) drop-shadow(0 24px 34px rgba(0,0,0,.52));
}

@keyframes eventFlashIn{from{opacity:0}}
@keyframes eventFlashOut{to{opacity:0}}
@keyframes eventArtIn{from{opacity:0;transform:scale(.88) translateY(10px)}70%{transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes eventDetailsIn{from{opacity:0;transform:translateY(12px)}}
@keyframes eventPorvooDrive{0%{opacity:0;transform:translate3d(4vw,5vh,0) scale(1.82)}8%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes eventPorvooCaption{from{opacity:0;transform:translateY(16px)}}
@keyframes eventSlamRush{0%{opacity:0;transform:translateX(-48vw) rotate(-7deg) scale(.64);filter:blur(8px)}58%{opacity:1;transform:translateX(3.5vw) rotate(1.5deg) scale(1.08);filter:blur(0)}78%{transform:translateX(-1.2vw) rotate(-.5deg) scale(.98)}100%{opacity:1;transform:none}}
@keyframes eventSlamBurst{0%{opacity:0;transform:scale(.35) rotate(-18deg)}30%{opacity:.8}100%{opacity:0;transform:scale(1.28) rotate(8deg)}}
@keyframes eventSlamGlow{0%{opacity:0;transform:scale(.55)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes eventSlamCaption{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes eventVictoryRays{0%{opacity:0;transform:scale(.28) rotate(-20deg)}30%{opacity:.78}100%{opacity:0;transform:scale(1.18) rotate(9deg)}}
@keyframes eventVictoryGlow{0%{opacity:0;transform:scale(.5)}26%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes eventSuccessArrival{0%{opacity:0;transform:translateY(12vh) scale(.62);filter:blur(7px)}58%{opacity:1;transform:translateY(-1vh) scale(1.055);filter:blur(0)}78%{transform:translateY(.25vh) scale(.985)}100%{opacity:1;transform:none}}
@keyframes eventGameWinArrival{0%{opacity:0;transform:scale(.42) rotate(-2deg);filter:blur(9px)}52%{opacity:1;transform:scale(1.07) rotate(.5deg);filter:blur(0)}72%{transform:scale(.985) rotate(-.15deg)}100%{opacity:1;transform:none}}
@keyframes eventVictoryCaption{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes eventBidBanAlarm{0%{opacity:0}20%{opacity:1}38%{opacity:.22}58%{opacity:.78}100%{opacity:0}}
@keyframes eventBidBanSeal{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-18deg)}46%{opacity:.72;transform:translate(-50%,-50%) scale(.88) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes eventBidBanStrike{0%{opacity:0;transform:translate3d(0,-8vh,0) scale(.68)}50%{opacity:1;transform:translate3d(0,1vh,0) scale(1.035)}70%{transform:translate3d(6px,0,0)}78%{transform:translate3d(-3px,0,0)}100%{opacity:1;transform:none}}
@keyframes eventTrumpRays{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-22deg)}34%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22) rotate(8deg)}}
@keyframes eventTrumpSymbol{0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-12deg)}38%{opacity:.22}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(4deg)}}
@keyframes eventTrumpStrike{0%{opacity:0;transform:translate3d(0,-14vh,0) scale(.5) rotate(-5deg)}62%{opacity:1;transform:translate3d(0,1.5vh,0) scale(1.09) rotate(1deg)}82%{transform:translate3d(0,-.4vh,0) scale(.98)}100%{opacity:1;transform:none}}
@keyframes eventSuitParticle{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.2)}18%{opacity:1}68%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(var(--scale)) rotate(var(--spin))}}

@media(max-width:720px){
  .event-flash-shell{gap:.55rem}
  .event-flash-art{width:min(68vw,330px)}
  .event-flash[data-kind="porvoo"] .event-flash-art{width:min(94vw,680px)}
  .event-flash-details{padding:.6rem .75rem}
}
@media(orientation:landscape) and (max-height:520px){
  .event-flash-shell{
    width:fit-content;
    max-width:94vw;
    grid-template-columns:auto minmax(220px,32vw);
    justify-content:center;
    align-items:center;
    gap:1rem;
  }
  .event-flash-art{width:min(42vw,360px);max-height:72svh}
  .event-flash:is([data-kind="spade"],[data-kind="club"]) .event-flash-art{
    width:min(42vw,360px,calc(72svh * 362 / 418));
  }
  .event-flash:is([data-kind="diamond"],[data-kind="heart"]) .event-flash-art{
    width:min(42vw,360px,calc(72svh * 362 / 383));
  }
  .event-flash[data-kind="porvoo"] .event-flash-art{width:min(58vw,680px);transform-origin:60% 70%}
  .event-flash[data-kind="slam"] .event-flash-art{width:min(58vw,900px)}
  .event-flash[data-kind="failure"] .event-flash-art{width:min(58vw,760px)}
  .event-flash[data-kind="bidban"] .event-flash-art{width:min(58vw,980px)}
  .event-flash[data-kind="success"] .event-flash-art{width:min(58vw,760px)}
  .event-flash[data-kind="gamewin"] .event-flash-art{width:min(58vw,820px)}
  .event-flash-details{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .event-flash,.event-flash::before,.event-flash::after,.event-flash-shell,
  .event-flash-art,.event-flash-details,.event-suit-burst span{animation-duration:.01ms!important;animation-delay:0s!important}
}