:root{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:100%;
  line-height:1.5;
  font-synthesis:none;
  --page:#f9f9fb;
  --surface:#fff;
  --hover:#f0f0f3;
  --text:#1c2024;
  --muted:#60646c;
  --line:#d9d9e0;
  --control:#80838d;
  --focus:#3a5bc7;
  --accent:#815017;
  --accent-fill:#ffba6b;
  --error:#8e243b;
  --success:#245f43;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text);
  background:var(--page);
  color-scheme:light
}
:root[data-theme=dark]{
  --page:#111113;
  --surface:#18191b;
  --hover:#212225;
  --text:#edeef0;
  --muted:#b0b4ba;
  --line:#363a3f;
  --control:#777b84;
  --focus:#b7c5ff;
  --accent:#ffc078;
  --error:#ffd1d9;
  --success:#b1f1cb;
  color-scheme:dark
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
button,input{
  font:inherit
}
button,a,input{
  touch-action:manipulation
}
button{
  cursor:pointer
}
button{
  border:0
}
a{
  color:inherit;
  text-underline-offset:4px
}
button:disabled{
  cursor:not-allowed;
  opacity:.48
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.table-scroll:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:4px
}
input{
  min-width:0;
  background:var(--page);
  color:var(--text);
  border:1px solid var(--control);
  border-radius:7px;
  padding:13px 14px;
  width:100%;
  font-size:1rem
}
input::placeholder{
  color:var(--muted);
  opacity:1
}
label{
  display:block;
  font-size:.875rem;
  font-weight:550;
  margin-bottom:8px
}
p{
  margin:0 0 14px
}
h1,h2,h3{
  margin:0;
  font-weight:600;
  letter-spacing:-.025em
}
h1{
  font-size:clamp(1.55rem,3vw,2rem);
  line-height:1.25
}
h2{
  font-size:1.05rem
}
h3{
  font-size:1rem;
  margin:24px 0 8px
}
.muted{
  color:var(--muted)
}
.mono,.numeric{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums
}
.small{
  font-size:.8rem
}
.quiet{
  background:transparent;
  color:var(--muted);
  padding:10px 8px;
  border-radius:5px
}
.quiet:hover{
  background:var(--hover);
  color:var(--text)
}
.outline,.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:7px;
  padding:12px 16px;
  font-size:.875rem;
  font-weight:600;
  min-height:44px;
  transition:background .15s,transform .15s
}
.outline{
  border:1px solid var(--control);
  background:transparent;
  color:var(--text)
}
.outline:hover{
  background:var(--hover)
}
.primary{
  background:var(--accent-fill);
  color:#292014;
  border:1px solid var(--accent-fill)
}
.primary:hover{
  background:#ffcd90
}
.primary:active{
  transform:translateY(1px)
}
.primary>span{
  margin-left:auto
}
.outline svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round
}
.icon-button{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--muted);
  border-radius:6px;
  font-size:1.6rem;
  line-height:1
}
.icon-button:hover{
  background:var(--hover)
}
.icon-button svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.site-header{
  min-height:88px;
  max-width:1312px;
  padding:8px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:auto;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:1.35rem;
  font-weight:650;
  letter-spacing:-.04em
}
.brand svg{
  width:25px;
  height:29px;
  color:var(--accent)
}
nav{
  display:flex;
  align-items:center;
  gap:16px
}
.key-hint{
  font:11px var(--mono);
  border:1px solid var(--line);
  padding:2px 5px;
  margin-left:4px;
  border-radius:4px
}
main{
  max-width:1312px;
  padding:32px;
  margin:auto;
  outline:none
}
.heading-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:24px
}
.heading-row p{
  color:var(--muted);
  font-size:.875rem;
  margin:8px 0 0
}
#room-tools{
  display:flex;
  align-items:center;
  gap:20px
}
.room-label{
  font-size:.75rem;
  color:var(--muted)
}
#room-code{
  display:block;
  font:1rem var(--mono);
  letter-spacing:.13em;
  color:var(--text);
  margin-top:2px
}
.game-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 288px;
  gap:24px;
  align-items:start
}
@media(min-width:741px){
  .game-grid{row-gap:14px}
  .play-area{display:contents}
  .play-area>form,.countdown,.result{grid-column:1;order:0}
  .guess-meta,#guess-error,#last-guess{grid-column:1;order:1;margin:0}
  .world-section{grid-column:1;order:2}
  .side-panel{grid-column:2;grid-row:1 / span 4}
  .game-grid:has(#play-area[hidden]) .side-panel{grid-row:1}
  .history{grid-column:1 / -1;order:3}
}
.explored-light{
  opacity:.55;
  animation:reveal-light 1.1s ease-out
}
@keyframes reveal-light{
  from{opacity:0}
  to{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  .explored-light{animation:none}
}
.world-section{
  min-width:0
}
.world-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.75rem;
  color:var(--muted);
  padding:0 0 8px
}
.world-toolbar>span{
  display:flex;
  align-items:center;
  gap:8px
}
.live-dot{
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 8px #efaa5c66
}
.world{
  position:relative;
  overflow:hidden;
  border:1px solid #314044;
  border-radius:10px;
  background:#0a1019;
  aspect-ratio:1000/680;
  isolation:isolate
}
.world-svg{
  display:block;
  width:100%;
  height:100%
}
.fire-label{
  fill:#baaa88;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:4px
}


.world-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:.7rem;
  color:var(--muted);
  padding:13px 8px
}
.world-footer>span{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}
.legend-dot{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%
}
.legend-dot.water{
  background:#799ca9
}
.legend-dot.fire{
  background:#c58a4c
}
.warmth-scale{
  height:2px;
  width:90px;
  background:linear-gradient(90deg,#799ca9,#8b9978,#c58a4c);
  opacity:.6
}
.side-panel{
  padding:20px 0 0 0
}
.panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}
.small-fire{
  color:var(--accent);
  font-size:24px;
  font-weight:400
}
.panel-heading:has(.small-fire){
  justify-content:start
}
.side-panel p{
  font-size:.875rem;
  color:var(--muted);
  line-height:1.7
}
.side-panel form{
  margin-top:26px
}
.side-panel .primary{
  width:100%;
  margin-top:12px
}
.or{
  display:block;
  position:relative;
  font-size:.7rem;
  color:var(--muted);
  text-align:center;
  margin:23px 0 0
}
.input-row{
  display:flex;
  gap:8px
}
#join-code{
  font-family:var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  max-width:160px
}
#code-form{
  margin-top:14px
}
.panel-note{
  font-size:.75rem!important;
  margin-top:28px!important;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.players{
  list-style:none;
  padding:0;
  margin:0
}
.player{
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.player-top{
  display:flex;
  gap:9px;
  align-items:center
}
.player-avatar{
  display:grid;
  place-items:center;
  height:27px;
  width:27px;
  flex:none;
  border-radius:7px;
  color:#18201f;
  font-size:.75rem;
  font-weight:700;
  background:var(--player)
}
.player-name{
  font-size:.875rem;
  font-weight:550;
  min-width:0;
  overflow-wrap:anywhere
}
.player-score{
  font:1rem var(--mono);
  margin-left:auto;
  color:var(--accent);
  white-space:nowrap
}
.player small{
  font-size:.67rem;
  font-weight:400;
  color:var(--muted);
  margin-left:5px
}
.player-bottom{
  display:flex;
  align-items:center;
  gap:12px;
  margin:9px 0 0 36px;
  color:var(--muted);
  font:10px var(--mono)
}
.player-progress{
  height:3px;
  flex:1;
  overflow:hidden;
  background:var(--line);
  border-radius:3px
}
.player-progress>span{
  display:block;
  height:100%;
  background:var(--player);
  transition:width .6s ease
}
.player-bottom>span{
  white-space:nowrap
}
.player-status{
  font-size:.75rem;
  color:var(--muted);
  margin:6px 0 0 36px
}
.privacy-note{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:26px;
  padding-top:10px
}
.privacy-note svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.2;
  flex:none
}
.privacy-note p{
  font-size:.7rem;
  line-height:1.65;
  margin:0
}
#leave{
  display:block;
  margin-top:12px
}
.side-panel #claim-host{
  width:100%;
  margin-top:12px
}
#lobby-note{
  font-size:.75rem;
  margin-top:20px
}
#lobby-controls .primary{
  margin-top:0
}
.notice{
  padding:11px 14px;
  background:var(--hover);
  border-left:2px solid var(--accent);
  font-size:.8rem;
  border-radius:4px;
  margin-bottom:20px
}
.error{
  overflow-wrap:anywhere;
  font-size:.8rem!important;
  color:var(--error)!important;
  margin:8px 0
}
.error:empty{
  display:none
}
.play-area{
  grid-column:1/-1
}
.play-area>form{
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  display:flex;
  gap:20px;
  align-items:center
}
.play-area>form label{
  margin:0;
  flex:none;
  font-size:.95rem;
  font-weight:600
}
.guess-entry{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:1;
  min-width:0
}
.guess-entry input{
  flex:1 1 10ch
}
.guess-entry button{
  min-width:128px
}
kbd{
  font:11px var(--mono);
  border:1px solid var(--line);
  border-radius:4px;
  padding:2px 5px
}
.primary kbd{
  border-color:#75512155;
  margin-left:6px
}
.guess-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:var(--muted);
  font-size:.7rem;
  padding:0 2px
}
.guess-meta p{
  margin:0
}
#connection{
  white-space:nowrap
}
#player-count{
  white-space:nowrap
}
.last-guess{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  align-items:center;
  padding:14px 0 2px;
  font-size:.9rem
}
.last-guess strong{
  font-family:var(--mono);
  color:var(--accent);
  font-weight:500
}
.last-guess .last-word{
  font-weight:600
}
.last-guess .last-description{
  font-size:.75rem;
  color:var(--muted)
}
.history{
  margin-top:27px
}
.section-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line)
}
.section-heading h2{
  font-size:1rem
}
.section-heading h2 span{
  font-size:.75rem;
  margin-left:8px
}
.section-heading>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.empty{
  padding:30px 0;
  color:var(--muted);
  font-size:.875rem
}
.table-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain
}
table{
  width:100%;
  min-width:18rem;
  border-collapse:collapse;
  font-size:.875rem;
  margin-top:8px
}
th{
  text-align:left;
  font-size:.7rem;
  font-weight:400;
  color:var(--muted);
  padding:8px 10px
}
td{
  padding:12px 10px;
  border-bottom:1px solid var(--line)
}
th:first-child,td:first-child{
  padding-left:0;
  width:47%
}
th:last-child,td:last-child{
  padding-right:0
}
.numeric{
  text-align:right;
  white-space:nowrap
}
th button{
  color:inherit;
  background:none;
  font:inherit;
  padding:6px 0
}
td .temperature{
  color:var(--heat)
}
.guess-word{
  display:flex;
  align-items:center;
  gap:10px;
  overflow-wrap:anywhere
}
.guess-word .word-bar{
  width:3px;
  align-self:stretch;
  min-height:16px;
  background:var(--heat);
  border-radius:2px
}
.rank-note{
  font-size:.7rem;
  color:var(--muted);
  margin-top:13px
}
.countdown{
  padding:18px;
  text-align:center;
  color:var(--accent);
  font:1.2rem var(--mono);
  margin-bottom:14px;
  border:1px solid var(--line);
  border-radius:8px
}
.result{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border:1px solid var(--accent);
  padding:20px;
  border-radius:8px;
  margin-bottom:18px;
  background:var(--surface)
}
.result h2{
  font-size:1.2rem;
  color:var(--accent)
}
.result p{
  font-size:.875rem;
  margin:6px 0 0;
  color:var(--muted)
}
footer{
  max-width:1248px;
  margin:24px auto 0;
  border-top:1px solid var(--line);
  padding:21px 0 28px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:.7rem;
  color:var(--muted)
}
footer>span:last-child{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap
}
.footer-dot{
  margin:0 8px
}
#build-info{
  font-size:.65rem
}
dialog{
  max-width:540px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  border:1px solid var(--control);
  border-radius:12px;
  padding:24px;
  background:var(--surface);
  color:var(--text)
}
dialog::backdrop{
  background:#080b11b8;
  backdrop-filter:blur(5px)
}
dialog p{
  font-size:.875rem;
  line-height:1.7
}
.dialog-heading{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px
}
.dialog-heading h2{
  font-size:1.2rem
}
.dialog-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:end;
  gap:10px;
  margin-top:22px
}
.help-nav{
  flex-wrap:wrap;
  font-size:.8rem;
  gap:16px
}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  font-weight:400;
  margin:18px 0
}
.check input{
  width:17px;
  height:17px;
  accent-color:var(--accent)
}
.noscript{
  padding:24px;
  text-align:center
}
.skip{
  position:fixed;
  top:-80px;
  left:16px;
  z-index:100;
  background:var(--surface);
  padding:12px
}
.skip:focus{
  top:12px
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important
}
[hidden]{
  display:none!important
}
.map-players{
  position:absolute;
  inset:0;
  pointer-events:none
}
.map-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  transition:left 1.3s cubic-bezier(.2,.7,.2,1),top 1.3s cubic-bezier(.2,.7,.2,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:35px;
  left:50%;
  transform:translate(-50%,-50%);
  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
}
.marker-tether{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  stroke:var(--player);
  stroke-width:.7
}
.label-moved .marker-tether{opacity:.4}
.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{
  animation:fire-glow 6s ease-in-out infinite
}
.spark{
  animation:ember 4s ease-out infinite
}
.spark-two{
  animation-delay:-1.8s
}
.spark-three{
  animation-delay:-2.7s
}
.water-dash{
  animation:water 8s ease-in-out infinite
}
.coast-outer{
  animation:shore 7s ease-in-out infinite
}
.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 water{
  0%,100%{
    transform:translateX(-3px);
    opacity:.4
  }
  50%{
    transform:translateX(3px);
    opacity:1
  }
}
@keyframes shore{
  0%,100%{
    opacity:.25
  }
  50%{
    opacity:.65
  }
}
@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(max-width:1000px){
  .site-header{
    min-height:76px;
    padding:8px 24px
  }
  main{
    padding:26px 24px
  }
  .game-grid{
    grid-template-columns:minmax(0,1fr) 250px;
    gap:20px
  }
  .play-area>form{
    display:block
  }
  .play-area>form label{
    margin-bottom:10px
  }
  footer{
    margin:20px 24px 0
  }
  .heading-row{
    align-items:start
  }
  #room-tools{
    gap:12px
  }
  .room-label{
    display:none
  }

}
@media(max-width:740px){
  .site-header{
    min-height:68px;
    padding:8px 20px
  }
  .brand{
    font-size:1.2rem
  }
  nav{
    gap:8px
  }
  .key-hint{
    display:none
  }
  main{
    padding:23px 20px
  }
  .heading-row{
    margin-bottom:18px;
    flex-wrap:wrap
  }
  .heading-row p{
    max-width:40ch;
    font-size:.8rem
  }
  #room-tools{
    width:100%;
    justify-content:space-between
  }
  .room-label{
    display:block
  }
  .game-grid{
    display:flex;
    flex-direction:column;
    gap:12px
  }
  .world-section{
    width:100%;
    order:0
  }
  .world{
    aspect-ratio:1000/680
  }
  .world-svg{
    width:100%;
    height:100%
  }
  .side-panel{
    width:100%;
    padding:12px 0;
    order:2
  }
  #entry-panel{
    order:1;
    max-width:440px;
    align-self:center
  }
  .play-area{
    width:100%;
    order:1;
    display:contents
  }
  #play-area>form,#countdown,#result,.guess-meta,#guess-error,#last-guess{
    order:1;
    width:100%
  }
  .history{
    order:3;
    width:100%;
    margin-top:12px
  }
  .play-area>form{
    padding:16px
  }
  .guess-entry button{
    min-width:86px;
    padding:10px 13px
  }
  .primary kbd{
    display:none
  }
  .guess-meta{
    margin:0;
    font-size:.65rem;
    flex-wrap:wrap
  }
  #guess-error{
    margin:0
  }
  .last-guess{
    padding-top:0
  }
  .side-panel form{
    margin-top:20px
  }
  .or{
    margin-top:20px
  }
  .panel-note{
    margin-top:20px!important
  }
  .players{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 18px
  }
  .player{
    padding:12px 0
  }
  .player-name{
    font-size:.8rem
  }
  .player-avatar{
    width:24px;
    height:24px
  }
  .player-score{
    font-size:.875rem
  }
  .player small{
    display:none
  }
  .player-bottom{
    margin-left:0;
    gap:8px
  }
  .player-status{
    margin-left:0
  }
  .privacy-note{
    margin-top:12px;
    padding-top:0
  }
  .privacy-note p br{
    display:none
  }
  .privacy-note p{
    font-size:.68rem
  }
  .panel-heading{
    margin-bottom:0
  }
  .panel-heading h2{
    font-size:.95rem
  }
  #leave{
    margin:8px 0 0 auto;
    font-size:.75rem
  }
  .world-toolbar{
    font-size:.65rem
  }
  .world-toolbar .small{
    font-size:.65rem
  }
  .world-footer{
    padding-bottom:4px;
    font-size:.65rem
  }

  .fire-label{
    font-size:11px
  }
  .marker-label{
    font-size:9px;
    max-width:78px;
    top:21px
  }
  .marker-dot{
    width:6px;
    height:6px
  }
  footer{
    flex-direction:column;
    margin:10px 20px 0;
    font-size:.65rem;
    gap:12px
  }
  .result{
    padding:16px;
    flex-wrap:wrap
  }
  .result .primary{
    width:100%
  }
  .section-heading h2{
    font-size:.95rem
  }
  .section-heading .small{
    font-size:.7rem;
    padding:9px 5px
  }
  th{
    padding:8px 6px;
    font-size:.65rem
  }
  td{
    padding:11px 6px;
    font-size:.8rem
  }
  .rank-note{
    font-size:.65rem
  }
  .player-progress{
    background:var(--line)
  }
}
@media(max-width:370px){
  main{
    padding:20px 14px
  }
  .site-header{
    padding:8px 14px
  }
  .players{
    grid-template-columns:1fr
  }
  .player-bottom{
    margin-left:33px
  }
  .privacy-note{
    margin-bottom:28px
  }
  .guess-entry{
    gap:7px
  }
  .guess-entry input{
    font-size:.9rem;
    padding:12px 9px
  }
  #leave{
    float:none;
    margin-top:4px
  }
  .world-toolbar>span{
    max-width:195px
  }

  .last-guess{
    gap:9px;
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce){
  .flame,.flame-core,.flame-shadow,.fire-aura,.spark,.water-dash,.coast-outer{
    animation:none
  }
  .spark{
    opacity:.35
  }
  .splash-ring,.guess-spark{
    animation:none;
    opacity:.55
  }
  .map-marker,.marker-glow,.player-progress>span,button{
    transition:none
  }
}
@media(forced-colors:active){
  button,input{
    border:1px solid ButtonText
  }
  .world-footer,.world{
    border:1px solid CanvasText
  }
  .player-progress{
    border:1px solid CanvasText
  }
  .player-progress>span{
    background:Highlight
  }
  .marker-label{
    color:white;
    forced-color-adjust:none
  }
}
.skip:not(:focus){
  clip-path:inset(50%);
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden
}