/* ==========================================================================
   v30.8.24 — CONNECTION STATUS

   Purely additive. It only styles NEW elements and classes:
     #linkNotice / .link-notice     the pill that replaces the logo while MY connection is not fine
     .hud-speech-bubble.link-bubble the bubble at a player's seat when THEIR connection changes
     .wait-status-dot.link-*        colour of the dot on a player's HUD
     .trick-empty-state.wait-note   "Anna melder…" + why she may be slow
     .ready-flow-names .link-*      who we wait for between rounds, and why
     #linkPanel / .link-row         the "Forbindelse" list inside the log window
   No seat, trick, dock or button geometry is changed.
   ========================================================================== */

:root{
  --link-ok:#35ee91;
  --link-slow:#ffc247;
  --link-weak:#ff9a3d;
  --link-lost:#ff4d4d;
  --link-away:#9fb4cc;
}

/* ------------------------------------------------------------------
   My own connection: a pill in the top bar, on top of the logo.
   ------------------------------------------------------------------ */
body.game-scroll-locked #app.shell > .top .ingame-brand{
  position:relative!important;
}

#app.link-notice-on .ingame-brand .mini-logo{
  opacity:0!important;
  transition:opacity .18s ease;
}

.link-notice{
  --link-accent:var(--link-slow);
  --link-glow:rgba(255,194,71,.40);
  position:absolute;
  z-index:96;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
  width:max-content;
  max-width:min(50cqw,340px);
  display:grid;
  gap:1px;
  justify-items:center;
  padding:clamp(3px,.9cqw,6px) clamp(8px,2.4cqw,14px);
  border:1.5px solid var(--link-accent);
  border-radius:clamp(11px,3cqw,16px);
  background:rgba(7,17,29,.90);
  box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 12px var(--link-glow);
  color:#fff;
  text-align:center;
  line-height:1.15;
  pointer-events:auto;
}
.link-notice.hidden{display:none!important}

.link-notice.tone-bad {--link-accent:var(--link-lost);--link-glow:rgba(255,77,77,.42)}
.link-notice.tone-warn{--link-accent:var(--link-slow);--link-glow:rgba(255,194,71,.40)}
.link-notice.tone-info{--link-accent:var(--link-away);--link-glow:rgba(159,180,204,.38)}
.link-notice.tone-good{--link-accent:var(--link-ok);--link-glow:rgba(53,238,145,.40)}

.link-notice strong{
  display:block;
  font-size:clamp(9.5px,2.5cqw,13px);
  font-weight:900;
  letter-spacing:.01em;
}
.link-notice strong::before{
  content:"";
  display:inline-block;
  width:.6em;
  height:.6em;
  margin-right:.5em;
  border-radius:50%;
  background:var(--link-accent);
  vertical-align:.04em;
  animation:linkNoticePulse .9s ease-in-out infinite alternate;
}
.link-notice small{
  display:block;
  font-size:clamp(8px,2cqw,10.5px);
  font-weight:700;
  color:rgba(255,255,255,.86);
}

.link-notice-action{
  all:unset;
  box-sizing:border-box;
  display:grid;
  gap:1px;
  justify-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.link-notice-action:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:10px}

@keyframes linkNoticePulse{
  from{opacity:.45;transform:scale(.8)}
  to{opacity:1;transform:scale(1.1)}
}

/* On a phone held sideways the top seat's name plate sits right under the logo: the pill is ONE line,
   pinned to the very top, so it never reaches the plate. */
@media (orientation:landscape) and (max-height:600px){
  .link-notice{
    top:-1px;
    transform:translate(-50%,0);
    max-width:min(60cqw,520px);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:2px 10px;
    border-radius:999px;
  }
  .link-notice-action{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px}
  .link-notice strong{font-size:clamp(8px,2.3dvh,11px);white-space:nowrap}
  .link-notice small{font-size:clamp(7px,2dvh,9px);white-space:nowrap}
}

/* ------------------------------------------------------------------
   Other players: a bubble at THEIR seat (re-uses the speech-bubble placement).
   ------------------------------------------------------------------ */
.hud-speech-bubble.link-bubble{
  --bubble-bg:#dbe6f3;
  --bubble-ink:#0e2438;
  background:var(--bubble-bg)!important;
  color:var(--bubble-ink)!important;
  border-color:rgba(255,255,255,.9)!important;
  animation-duration:var(--bubble-ms,3.6s)!important;
}
.hud-speech-bubble.link-bubble::after{background:var(--bubble-bg)!important}
.hud-speech-bubble.link-bubble.tone-bad {--bubble-bg:#ffb7b0;--bubble-ink:#5c0b05}
.hud-speech-bubble.link-bubble.tone-warn{--bubble-bg:#ffe0a1;--bubble-ink:#553200}
.hud-speech-bubble.link-bubble.tone-info{--bubble-bg:#dbe6f3;--bubble-ink:#0e2438}
.hud-speech-bubble.link-bubble.tone-good{--bubble-bg:#b8f3d0;--bubble-ink:#06391f}

/* Read out by screen readers only. */
.link-sr{
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------------------------
   Other players: the dot in the corner of the HUD.
   Green pulse = "we are waiting for this player" (unchanged). Amber / orange / red /
   grey say WHY they may be slow. Same corner, a little larger than the green dot, and
   it never fades out (the green pulse dips to 48 % opacity; a warning must not).
   ------------------------------------------------------------------ */
.poker-stage .player .wait-status-dot.link-slow,
.poker-stage .player .wait-status-dot.link-weak,
.poker-stage .player .wait-status-dot.link-lost,
.poker-stage .player .wait-status-dot.link-away{
  width:clamp(11px,1.65cqw,15px)!important;
  height:clamp(11px,1.65cqw,15px)!important;
  border-width:1.5px!important;
  animation:linkDotPulse .9s ease-in-out infinite alternate!important;
}
.poker-stage .player .wait-status-dot.link-slow{
  background:#ffc247!important;
  border-color:#fff0c2!important;
  box-shadow:0 0 0 1px rgba(92,58,0,.95),0 0 9px rgba(255,194,71,.95)!important;
}
.poker-stage .player .wait-status-dot.link-weak{
  background:#ff8a1f!important;
  border-color:#ffd9b0!important;
  box-shadow:0 0 0 1px rgba(110,44,0,.95),0 0 9px rgba(255,138,31,.95)!important;
}
.poker-stage .player .wait-status-dot.link-lost{
  background:#ff3b30!important;
  border-color:#ffc2bd!important;
  box-shadow:0 0 0 1px rgba(100,6,0,.97),0 0 10px rgba(255,59,48,.98)!important;
}
.poker-stage .player .wait-status-dot.link-away{
  background:#8fa6c2!important;
  border-color:#e8eff8!important;
  box-shadow:0 0 0 1px rgba(26,40,58,.95),0 0 7px rgba(143,166,194,.75)!important;
}
/* A player we are NOT waiting for: a steady marker, no pulse. */
.poker-stage .player .wait-status-dot.link-only{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}
@keyframes linkDotPulse{
  from{transform:scale(.9)}
  to{transform:scale(1.12)}
}

/* ------------------------------------------------------------------
   The line in the middle of the table while nobody has played yet.
   (No "display" here: the plaque is hidden and shown by existing rules.)
   ------------------------------------------------------------------ */
body .poker-stage .trick-empty-state.wait-note{
  white-space:normal!important;
  text-align:center!important;
  line-height:1.2!important;
  /* never wider than the gap between the two side seats (about 42 % of a 320 px phone) */
  max-width:min(80%,300px,38cqw)!important;
  border-radius:clamp(10px,1.6cqw,14px)!important;
}
.trick-empty-state .wait-note-text{font-weight:800;overflow-wrap:anywhere}
.trick-empty-state .wait-note-sub{
  display:block;
  margin-top:1px;
  font-size:.86em;
  font-weight:800;
  letter-spacing:.02em;
}
body .poker-stage .trick-empty-state.wait-note.tone-warn{
  box-shadow:0 3px 9px rgba(0,0,0,.15),0 0 0 1px rgba(255,194,71,.55)!important;
}
body .poker-stage .trick-empty-state.wait-note.tone-bad{
  box-shadow:0 3px 9px rgba(0,0,0,.15),0 0 0 1px rgba(255,77,77,.65)!important;
}
.trick-empty-state.wait-note.tone-warn .wait-note-sub{color:#ffd37a}
.trick-empty-state.wait-note.tone-bad  .wait-note-sub{color:#ff9d93}

/* Smallest phones (320 px): the side seats' name plates are only about 100 px apart. */
@media (max-width:340px){
  body .poker-stage .trick-empty-state.wait-note{max-width:min(80%,300px,30cqw)!important}
}

/* Phone held sideways: the middle of the table is crowded (your own plate, or the top seat). While the plaque
   carries a connection reason it is lifted into the free band above your plate so both lines can be read.
   (Only when there IS a reason; the normal plaque stays exactly where it was.) */
@media (orientation:landscape) and (max-height:600px){
  body .poker-stage.count-3 .trick-empty-state.wait-note.tone-warn,
  body .poker-stage.count-3 .trick-empty-state.wait-note.tone-bad,
  body .poker-stage.count-5 .trick-empty-state.wait-note.tone-warn,
  body .poker-stage.count-5 .trick-empty-state.wait-note.tone-bad{
    translate:0 -12dvh;
  }
}

/* ------------------------------------------------------------------
   READY list between rounds: colour the chips of players who may be the reason we wait.
   ------------------------------------------------------------------ */
.decision-dock .ready-flow-names .waiting.link-lost{
  background:#3a1714!important;border-color:#b6483f!important;color:#ffb3aa!important;
}
.decision-dock .ready-flow-names .waiting.link-weak{
  background:#38230f!important;border-color:#b9702c!important;color:#ffc999!important;
}
.decision-dock .ready-flow-names .waiting.link-away{
  background:#1d2a38!important;border-color:#5d7490!important;color:#c3d3e6!important;
}

/* ------------------------------------------------------------------
   "Forbindelse" list inside the log window.
   ------------------------------------------------------------------ */
.link-panel{
  display:grid;
  gap:3px;
  margin:0 0 8px;
  padding:7px 9px;
  border:1px solid rgba(100,142,174,.25);
  border-radius:9px;
  background:#07182a;
}
.link-panel:empty{display:none}
.link-panel-title{
  color:#9fb6c9;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.link-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 8px;
  color:#e4eef6;
  font-size:clamp(9px,1vw,11px);
  line-height:1.3;
}
.link-row strong{font-weight:900}
.link-row-label{color:#b8cbdb}
.link-row small{margin-left:auto;color:#8fa9bc;font-size:.92em}
.link-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--link-ok);
  box-shadow:0 0 5px rgba(53,238,145,.7);
}
.link-dot.link-slow{background:var(--link-slow);box-shadow:0 0 5px rgba(255,194,71,.8)}
.link-dot.link-weak{background:var(--link-weak);box-shadow:0 0 5px rgba(255,154,61,.8)}
.link-dot.link-lost{background:var(--link-lost);box-shadow:0 0 6px rgba(255,77,77,.9)}
.link-dot.link-away{background:var(--link-away);box-shadow:0 0 4px rgba(159,180,204,.7)}

@media(prefers-reduced-motion:reduce){
  .poker-stage .player .wait-status-dot.link-slow,
  .poker-stage .player .wait-status-dot.link-weak,
  .poker-stage .player .wait-status-dot.link-lost,
  .poker-stage .player .wait-status-dot.link-away{animation:none!important;transform:none!important}
  .link-notice strong::before{animation:none}
  #app.link-notice-on .ingame-brand .mini-logo{transition:none}
}