.fog-cut{animation:uncover .7s ease-out both}
@keyframes uncover{from{opacity:0}to{opacity:1}}
.meeting-slot{min-height:2rem;padding-top:4px}
.meeting-slot:has(>.map-meeting[hidden]){display:none}
.map-meeting{display:flex;align-items:flex-start;gap:6px;color:var(--accent);font-size:.75rem;line-height:1.7;overflow-wrap:anywhere}
.map-meeting svg{display:block;flex:none;width:26px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meeting-copy{min-width:0;flex:1}
.meeting-names{color:var(--muted)}
.meeting-people{display:inline;margin-left:6px}
.meeting-people summary{display:inline-block;min-width:24px;min-height:24px;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.meeting-people summary:focus-visible{outline-offset:3px}
.meeting-people p{margin:4px 0 0;color:var(--muted)}
.meeting-people[open]{display:block;margin-left:0}
.greeting .five-left{animation:five-left .65s ease-out both}
.greeting .five-right{animation:five-right .65s ease-out both}
.greeting .five-spark{animation:five-spark .65s ease-out both}
@keyframes five-left{0%{transform:translate(-12px,8px)}55%{transform:translate(2px,-1px)}100%{transform:translate(0,0)}}
@keyframes five-right{0%{transform:translate(12px,8px)}55%{transform:translate(-2px,-1px)}100%{transform:translate(0,0)}}
@keyframes five-spark{0%,50%{opacity:0}65%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.fog-cut,.greeting .five-left,.greeting .five-right,.greeting .five-spark{animation:none}}
.map-players{
  position:absolute;
  inset:0;
  pointer-events:none
}
.map-marker{
  position:absolute;
  transform:translate(-50%,-50%) scale(calc(1 / var(--map-zoom,1)));
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px
}
.marker-glow{
  position:absolute;
  width:var(--light-size);
  height:var(--light-size);
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--player) 23%,transparent),transparent 68%);
  transition:width .7s,height .7s
}
.marker-dot{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--player);
  box-shadow:0 0 7px var(--player),0 0 2px white;
  border:1px solid #ffffff88;
  position:relative
}
.is-self .marker-dot:after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid var(--player);
  border-radius:50%;
  opacity:.5
}
.marker-label{
  position:absolute;
  top:calc(50% + 18px);
  left:50%;
  transform:translate(-50%,0);
  font:10px/1.4 var(--mono);
  color:#e3e6e0;
  background:#0b1118bb;
  border-radius:3px;
  padding:2px 5px;
  border-left:2px solid var(--player);
  white-space:nowrap;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis
}
.is-selected-player{z-index:3}
.is-selected-player .marker-label{width:max-content;white-space:normal;overflow-wrap:anywhere;overflow:visible;border:1px solid #f4f0df;color:#fff;background:#111b22}
.map-canvas{width:100%;min-width:0;aspect-ratio:1;min-height:12rem;background:#070c13}
/* A small independent SVG keeps flame animation out of terrain/fog painting.
   Counter-scaling matches the word markers and bounds its paint at every zoom. */
.fire-symbol{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%) scale(calc(1 / var(--map-zoom,1)));transform-origin:center;pointer-events:none;contain:paint}
.world .fire-label{font-size:9px;letter-spacing:2px}
.map-words{position:absolute;inset:0;pointer-events:none}
.map-words .map-word{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%) scale(calc(1 / var(--map-zoom,1)));width:24px;height:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--player);pointer-events:auto;overflow:visible}
.map-words .map-word:hover{background:none}
.map-word-dot{width:4px;height:4px;background:var(--player);border-radius:50%;opacity:.65;pointer-events:none}
.map-word.is-initial .map-word-dot{width:9px;height:9px;border:2px solid var(--player);background:#101921;opacity:1}
.map-word.is-initial .map-word-label{border-style:dashed}
.map-word.is-best .map-word-dot{width:10px;height:10px;transform:rotate(45deg);border:2px solid var(--player);border-radius:0;background:#101921;opacity:1}
.map-word.is-selected .map-word-dot{outline:2px solid #f4f0df;outline-offset:4px;opacity:1}
.map-word:focus-visible{outline:2px solid #f4f0df;outline-offset:3px;z-index:4}
.map-word.has-label{z-index:1}
.map-word.has-label.is-best,.map-word.has-label.is-latest{z-index:2}
.map-word.is-selected{z-index:3}
.map-word-label{position:absolute;left:50%;top:50%;display:block;width:max-content;max-width:14rem;transform:translate(-50%,-50%);padding:3px 5px;border:1px solid #42515a;border-radius:4px;background:#111b22;color:#d5dfe3;font-size:var(--map-word-font-size,.8125rem);font-weight:400;line-height:1.3;text-align:left;overflow-wrap:anywhere;white-space:normal;box-shadow:0 1px 5px #0005}
.map-word-temp{display:inline-block;margin-left:.45em;white-space:nowrap;color:#f5c891;font-variant-numeric:tabular-nums}
.map-word-shared{display:inline-block;position:relative;width:15px;height:10px;margin-left:4px;color:#afc7d3}
.map-word-shared:before,.map-word-shared:after{content:"";position:absolute;top:1px;left:0;width:9px;height:9px;border:1px solid currentColor;border-radius:50%}
.map-word-shared:after{left:5px}
.map-word.is-best .map-word-label{border-color:var(--player);color:#fff4dc;font-weight:650}
.map-word.is-selected .map-word-label{border-color:#f4f0df;color:#fff}
.map-meta{display:flex;flex-wrap:wrap;align-items:start;gap:4px 16px;margin-top:6px;color:var(--muted);font-size:.75rem;line-height:1.4}
.map-meta-grid{display:contents}
.map-key{display:flex;flex-wrap:wrap;gap:4px 12px;min-height:24px;align-items:center}
.map-key b{font-size:.7rem;font-weight:400}
.map-word-index,.map-player-index{flex:1;min-width:8rem}
.map-word-index summary,.map-player-index summary{min-height:24px;cursor:pointer;text-align:right;text-decoration:underline;text-underline-offset:3px}
.map-word-index[open],.map-player-index[open]{flex-basis:100%}
/* Keep native summaries stationary while their complete lists span the footer.
   Older browsers retain the flex layout above and ordinary details behavior. */
@supports selector(details::details-content){
  .map-meta{display:block;container:map-footer / inline-size}
  .map-meta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:4px 16px}
  .map-meta-grid > .map-key{grid-row:1;grid-column:1}
  .map-meta-grid > details{display:contents}
  .map-meta-grid > .map-word-index > summary{grid-row:1;grid-column:2}
  .map-meta-grid > .map-player-index > summary{grid-row:1;grid-column:3}
  .map-meta-grid > details::details-content{grid-column:1/-1}
  .map-meta-grid > details:not([open])::details-content{display:none}
  @container map-footer (max-width:28rem){
    .map-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .map-meta-grid > .map-key{grid-row:1;grid-column:1/-1}
    .map-meta-grid > .map-word-index > summary{grid-row:2;grid-column:1}
    .map-meta-grid > .map-player-index > summary{grid-row:2;grid-column:2}
  }
  @container map-footer (max-width:calc(16rem + 16px)){
    .map-meta-grid{grid-template-columns:minmax(0,1fr)}
    .map-meta-grid > .map-player-index > summary{grid-row:3;grid-column:1}
  }
}
.map-word-options,.map-player-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:4px;max-height:16rem;overflow:auto;padding:4px 2px}
.map-word-options button,.map-player-options button{text-align:left;min-height:32px;padding:5px 7px;font-size:.75rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.map-word-index summary:focus-visible,.map-player-index summary:focus-visible{outline-offset:2px}
.is-offline{
  opacity:.45
}
.flame,.flame-core{
  transform-origin:0 6px;
  animation:flicker 3s ease-in-out infinite
}
.flame-core{
  animation-delay:-1.2s;
  animation-duration:2.3s
}
.flame-shadow{
  animation:fire-glow 4s ease-in-out infinite
}
.fire-aura{
  opacity:.85
}
.spark{
  animation:ember 4s ease-out infinite
}
.spark-two{
  animation-delay:-1.8s
}
.spark-three{
  animation-delay:-2.7s
}
.water-dash{
  opacity:.7
}
.coast-outer{
  opacity:.45
}
.splash-ring{
  animation:splash 1.4s ease-out both;
  transform-origin:0 0;
  stroke-width:1.1
}
.guess-spark{
  animation:guess-ember 1.3s ease-out both
}
.paused *{
  animation-play-state:paused!important
}
@keyframes flicker{
  0%,100%{
    transform:scale(.96,1.02) rotate(-3deg)
  }
  35%{
    transform:scale(1.03,.91) rotate(2deg)
  }
  68%{
    transform:scale(.91,1.1) rotate(1deg)
  }
}
@keyframes fire-glow{
  0%,100%{
    opacity:.7
  }
  50%{
    opacity:1
  }
}
@keyframes ember{
  0%{
    transform:translateY(6px);
    opacity:0
  }
  25%{
    opacity:.8
  }
  100%{
    transform:translate(5px,-24px);
    opacity:0
  }
}
@keyframes splash{
  0%{
    transform:scale(.5);
    opacity:.9
  }
  100%{
    transform:scale(4.4);
    opacity:0
  }
}
@keyframes guess-ember{
  0%{
    transform:translateY(0);
    opacity:.9
  }
  100%{
    transform:translateY(-35px);
    opacity:0
  }
}

@media(prefers-reduced-motion:reduce){.map-marker,.marker-glow{transition:none}.world *, .world *::before,.world *::after{animation:none!important}}