:root{
  --bg-dark:#0b0b12;
  --bg-glow:#2b1457;
  --panel:rgba(255,255,255,.08);
  --panel-border:rgba(255,255,255,.14);
  --text:#f4f4f8;
  --muted:#bdbdd0;
  --accent:#ff4dd2;
  --accent-soft:#ff8ee7;
  --yellow:#ffe84d;
  --radius:4vh;
  --fs-s:clamp(1rem,2.4vh,1.15rem);
  --fs-m:clamp(1.2rem,3.2vh,1.6rem);
  --fs-l:clamp(1.7rem,5vh,2.6rem);
}

*{
  box-sizing:border-box;
  font-family:"Fredoka",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

html,
body{
  margin:0;
  padding:0;
  height:100%;
  background:
    radial-gradient(120vw 80vh at 15% -10%, var(--bg-glow), rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#14142a,var(--bg-dark));
  color:var(--text);
  overflow:hidden;
}

#header{
  position:fixed;
  top:1.2vh;
  left:.35vh;
  z-index:10;
  display:flex;
  gap:0;
  align-items:center;
  pointer-events:none;
}

#pineapple{
  font-size:6vh;
  transition:transform .6s ease;
}

#pineapple.upside{
  transform:rotate(180deg);
}

#tiny{
  display:none;
}

#game{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

#stage{
  width:100%;
  height:100%;
  padding:8vh 4vw 4vh 4vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2vw;
  overflow:hidden;
  text-align:center;
}

#stage:has(.game-screen){
  align-items:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
}

.card{
  width:100%;
  max-width:70vw;
  overflow:visible;
  background:var(--panel);
  border:.25vh solid var(--panel-border);
  border-radius:var(--radius);
  padding:5vh 5vw;
  box-shadow:0 3vh 7vh rgba(0,0,0,.45);
  backdrop-filter:blur(1vh);
}

h1{
  font-size:var(--fs-l);
  margin:0 0 2vh 0;
}

h2{
  font-size:var(--fs-m);
  margin:0 0 2vh 0;
}

p,
li,
span{
  font-size:var(--fs-s);
  opacity:.95;
}

.small{
  color:var(--muted);
  opacity:.9;
}

p.small:empty{
  display:none;
}

input,
select{
  width:100%;
  padding:1.1em;
  font-size:var(--fs-s);
  border-radius:2vh;
  border:.2vh solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:var(--text);
  caret-color:var(--accent);
  outline:none;
}

input::placeholder{
  color:rgba(244,244,248,.56);
  opacity:1;
}

label{
  display:block;
  margin:0 0 .6vh 0;
  color:var(--muted);
}

button{
  border:none;
  border-radius:999vh;
  padding:1.1em 2.4em;
  font-size:var(--fs-s);
  cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#0b0b12;
  margin:.6em .3em;
  font-weight:700;
}

button.secondary{
  background:rgba(255,255,255,.12);
  color:var(--text);
  border:.2vh solid rgba(255,255,255,.18);
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.row{
  display:flex;
  gap:2vh;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
}

.col{
  flex:1 1 18vw;
  max-width:32vw;
  text-align:left;
}

.pills{
  display:flex;
  gap:1vh;
  flex-wrap:wrap;
  justify-content:center;
  margin:1.5vh 0 0 0;
}

.pill{
  display:inline-flex;
  gap:.7vh;
  align-items:center;
  padding:.75em 1.1em;
  border-radius:999vh;
  border:.2vh solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:var(--muted);
}

.deck-pill{
  padding:.45em .55em .45em 1.1em;
}

.deck-select{
  width:auto;
  min-width:8em;
  max-width:14em;
  padding:.35em 2em .35em .75em;
  margin:0;
  border-radius:999vh;
  font-size:inherit;
  font-weight:800;
}

.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2em;
  padding:.2em .6em;
  border-radius:.9em;
  background:rgba(255,255,255,.10);
  border:.2vh solid rgba(255,255,255,.14);
  color:var(--text);
  font-weight:800;
}

.list{
  list-style:none;
  padding:0;
  margin:2vh 0 0 0;
  display:flex;
  flex-direction:column;
  gap:1.2vh;
}

.list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2vh;
  padding:1.2vh 1.6vh;
  border-radius:2vh;
  background:rgba(255,255,255,.05);
  border:.2vh solid rgba(255,255,255,.10);
  text-align:left;
}

.compact-btn{
  flex:0 0 auto;
  padding:.75em 1.25em;
  margin:0;
}

.badgeNo{
  border-color:rgba(255,90,90,.35);
  color:#ffd1d1;
}

.answer-yes{
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#0b0b12;
  border-color:rgba(255,77,210,.55);
}

.answer-no{
  opacity:.82;
}

.overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:4vh 4vw;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(1.4vh);
  z-index:40;
}

.overlay.show{
  display:flex;
}

.overlay-card{
  width:min(92vw, 52rem);
  border-radius:4vh;
  border:.25vh solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(30,30,50,.92), rgba(10,10,15,.92));
  box-shadow:0 3vh 7vh rgba(0,0,0,.45);
  padding:4vh 4vw;
  text-align:center;
}

.overlay-name{
  font-size:var(--fs-l);
  margin:0 0 1vh 0;
}

#surprise{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--yellow);
  z-index:60;
  overflow:hidden;
}

#surpriseCard{
  width:min(92vw, 56rem);
  background:rgba(0,0,0,.12);
  border:.4vh solid rgba(0,0,0,.2);
  border-radius:4vh;
  padding:4vh 4vw;
  text-align:center;
}

#surpriseTitle{
  font-size:var(--fs-l);
  color:#0b0b12;
  margin:0 0 2vh 0;
}

#surpriseText{
  font-size:var(--fs-m);
  color:#0b0b12;
  margin:0 0 3vh 0;
}

.star{
  position:absolute;
  font-size:3vh;
  animation:fly 4s linear infinite;
}

@keyframes fly{
  from{ transform:translateY(110vh) rotate(0deg); }
  to{ transform:translateY(-10vh) rotate(360deg); }
}

#dice{
  width:min(28vh, 22vw);
  height:min(28vh, 22vw);
  border-radius:4vh;
  margin:2.4vh auto 1.6vh auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(2.3rem, 10vh, 4.6rem);
  font-weight:900;
  color:#0a0a0e;
  background:radial-gradient(circle at 30% 25%, #ffffff, #d6d6d6 55%, #bfbfbf);
  box-shadow:0 2.2vh 5.2vh rgba(0,0,0,.45);
  opacity:.82;
  user-select:none;
  transition:transform .65s ease, opacity .45s ease, filter .45s ease;
}

#dice.rolling{
  opacity:1;
  transform:rotate(720deg) scale(1.05);
  filter:saturate(1.05);
}

#dice.faded{
  opacity:0;
  transform:scale(.7);
}

.game-reset{
  position:fixed;
  right:2vw;
  top:1.8vh;
  z-index:35;
  margin:0;
  padding:.85em 1.45em;
}

.main-meta{
  margin:1.2vh 0 0 0;
}

.signup-layout{
  width:100%;
  height:88vh;
  max-height:88vh;
  min-height:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:2vw;
  overflow:hidden;
}

.signup-main-card{
  flex:1 1 58%;
  max-width:58%;
  min-height:0;
  height:88vh;
  max-height:88vh;
  align-self:stretch;
  overflow:hidden;
  padding:4vh 4vw;
}

.signup-main-card h1 + .signup-form-row,
.signup-main-card h1 + .row{
  margin-top:2.5vh;
}

.signup-form-row .col{
  flex:1 1 16vw;
  max-width:none;
}

.signup-mode-col{
  flex-basis:32vw;
  max-width:44vw;
}

.signup-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.8vw;
}

.toggle-btn.is-on{
  border-color:rgba(255,77,210,.55);
}

.toggle-btn.is-off{
  opacity:.78;
}

.signup-list-card{
  flex:0 1 32%;
  max-width:32%;
  height:88vh;
  max-height:88vh;
  min-height:0;
  align-self:stretch;
  padding:3vh 2vw;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.signup-list-card h2{
  margin:0 0 1vh 0;
}

.signup-list-card h2 + .player-list-v13,
.signup-list-card h2 + .list{
  margin-top:2vh;
}

.player-list-v13{
  width:100%;
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:1.15vh;
  margin:1.4vh 0 0 0;
  padding:0 3% 2vh 0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

.player-list-v13 > .player-card-v13{
  width:100%;
  min-width:0;
  max-width:100%;
  flex:0 0 auto;
  height:auto;
  min-height:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "num name remove"
    "clothes clothes clothes";
  align-items:start;
  align-content:start;
  gap:.68vh 3%;
  padding:1.05vh 1.55vw;
  border-radius:2.4vh;
  background:rgba(255,255,255,.05);
  border:.18vh solid rgba(255,255,255,.11);
  overflow:visible;
}

.player-num-v13{
  grid-area:num;
  align-self:start;
}

.player-name-v13{
  grid-area:name;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.15;
  text-align:left;
}

.remove-player-v13{
  grid-area:remove;
  align-self:start;
  justify-self:end;
  width:2.75em;
  height:2.75em;
  min-width:2.75em;
  min-height:2.75em;
  max-width:2.75em;
  padding:0;
  margin:0;
  border-radius:999vh;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ffd3d3;
  border-color:rgba(255,120,140,.58);
}

.remove-player-v13 .del-text{
  display:none;
}

.remove-player-v13 .del-icon{
  display:inline;
  font-size:1.05em;
  font-weight:900;
  line-height:1;
}

.clothes-grid-v13{
  grid-area:clothes;
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.58vh 2%;
  margin-top:.25vh;
  align-items:stretch;
  overflow:visible;
}

.winner-screen{
  position:relative;
  width:min(100%, 82vw);
  min-height:min(82vh, 58vw);
  padding:5vh 5vw 4.5vh 5vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.2vh;
  overflow:hidden;
  border:.18vh solid rgba(255,68,148,.9);
  border-radius:3.2vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,183,58,.35), transparent 21%),
    radial-gradient(circle at 50% 55%, rgba(255,42,130,.34), transparent 34%),
    linear-gradient(180deg, rgba(36,0,12,.9), rgba(5,0,6,.98));
  box-shadow:
    0 0 3.2vh rgba(255,55,130,.52),
    inset 0 0 6vh rgba(255,55,130,.22),
    0 4vh 10vh rgba(0,0,0,.64);
  isolation:isolate;
}

.winner-screen::before{
  content:"";
  position:absolute;
  inset:-7%;
  z-index:-2;
  background:url("../776fc4fc-8fc3-4fd2-b6ef-80b7f6a4faa5.png") center / cover no-repeat;
  filter:blur(1.2vh) brightness(.38) saturate(1.35);
  opacity:.58;
}

.winner-screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 62%, rgba(255,16,109,.28), transparent 33%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
}

.winner-close{
  position:absolute;
  top:2.4vh;
  right:2.4vh;
  width:2.85em;
  height:2.85em;
  min-width:2.85em;
  padding:0;
  border-radius:999vh;
  background:rgba(22,0,8,.62);
  border:.16vh solid rgba(255,221,229,.86);
  color:#fff;
  font-size:var(--fs-s);
  box-shadow:0 0 1.8vh rgba(255,55,130,.75);
}

.winner-crown{
  color:#ffb135;
  font-size:clamp(3rem, 8vh, 6.8rem);
  line-height:.8;
  text-shadow:
    0 0 1vh rgba(255,239,183,.95),
    0 0 3vh rgba(255,72,0,.9);
}

.winner-screen h1{
  margin:0;
  color:#ff4c24;
  font-size:clamp(3rem, 10vh, 8.2rem);
  line-height:.9;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:
    0 0 .4vh #fff0cf,
    0 0 1.3vh #ff174f,
    .28vh .28vh 0 #fff6d4,
    .55vh .55vh 0 #8f1300;
}

.winner-subtitle{
  margin:-.6vh 0 .3vh 0;
  color:#ffd2ee;
  font-size:clamp(2rem, 7vh, 5.8rem);
  line-height:1;
  font-weight:400;
  font-family:"Brush Script MT","Segoe Script","Fredoka",cursive;
  text-shadow:0 0 1.6vh rgba(255,31,136,.95), 0 0 .35vh #fff;
}

.winner-nameplate{
  width:min(48vw, 52vh);
  min-height:12vh;
  padding:1.1vh 2.2vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2vw;
  color:#fff;
  border:.18vh solid #ff4a9f;
  border-radius:.7vh;
  background:rgba(42,0,16,.42);
  box-shadow:0 0 2vh rgba(255,31,136,.82), inset 0 0 2.2vh rgba(255,31,136,.18);
}

.winner-name{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ffe6f4;
  font-family:"Brush Script MT","Segoe Script","Fredoka",cursive;
  font-size:clamp(2.6rem, 9vh, 7rem);
  line-height:.95;
  text-shadow:0 0 1.5vh rgba(255,32,135,.98), 0 0 .4vh #fff;
}

.winner-kiss,
.winner-heart{
  color:#ff3d9a;
  text-shadow:0 0 1vh rgba(255,245,248,.8), 0 0 2vh rgba(255,31,136,.9);
}

.winner-kiss{
  flex:0 0 auto;
  font-size:clamp(1.6rem, 4.6vh, 3.5rem);
}

.winner-heart{
  font-size:clamp(4.2rem, 10vh, 8rem);
  line-height:.8;
}

.winner-continue{
  min-width:min(42vw, 48vh);
  padding:.85em 1.8em;
  border-radius:999vh;
  background:rgba(178,0,61,.58);
  border:.2vh solid rgba(255,238,244,.92);
  color:#fff;
  text-transform:uppercase;
  box-shadow:
    0 0 1.8vh rgba(255,31,136,.95),
    inset 0 0 2vh rgba(255,255,255,.18);
}

.clothes-chip-v13{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:1.95em;
  height:auto;
  margin:0;
  padding:.34em .24em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.18em;
  border-radius:999vh;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  font-size:clamp(.72rem,.95vh,.86rem);
  line-height:1;
}

.clothes-chip-v13.is-off{
  opacity:.62;
  text-decoration:line-through;
}

.game-screen{
  width:100%;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(2.5rem, 5vh, 4.5rem);
  padding-top:clamp(2.5rem, 5vh, 5rem);
  padding-bottom:8vh;
}

.stage-game{
  width:100%;
  height:auto;
  min-height:0;
  flex:0 0 auto;
  order:1;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
  gap:2vw;
}

.main-card{
  flex:1 1 58%;
  max-width:62vw;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3.2vh 4vw;
}

.side-card{
  flex:0 1 26vw;
  max-width:28vw;
  min-width:20vw;
  height:auto;
  padding:3vh 2vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.side-card h2{
  margin-bottom:1vh;
}

.clothes-grid{
  display:flex;
  flex-direction:column;
  gap:1vh;
  margin-top:1.2vh;
}

.clothes-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1vw;
  padding:1vh 1.2vw;
  border-radius:2vh;
  border:.2vh solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  text-decoration:none;
}

.clothes-row.off{
  opacity:.62;
}

.clothes-row.off span:first-child{
  opacity:.6;
  text-decoration:line-through;
}

.mini-toggle{
  margin:0;
  padding:.45em .85em;
  font-size:clamp(.82rem,1.8vh,.95rem);
  color:var(--text);
  background:rgba(255,255,255,.12);
  border:.2vh solid rgba(255,255,255,.18);
}

.mini-status{
  flex:0 0 auto;
  padding:.45em .85em;
  border-radius:999vh;
  background:rgba(255,255,255,.12);
  border:.2vh solid rgba(255,255,255,.18);
  font-size:clamp(.82rem,1.8vh,.95rem);
  font-weight:700;
}

.presence-card{
  width:min(1100px,92vw);
  max-width:92vw;
  flex:0 0 auto;
  order:2;
  margin:0 auto 10vh auto;
  padding:2.2vh 2vw;
  text-align:center;
  display:block;
  clear:both;
  position:relative;
}

.presence-card h2{
  font-size:clamp(1.05rem, 2vh, 1.4rem);
  margin:0 0 .8vh 0;
}

.presence-list{
  display:flex;
  flex-direction:column;
  gap:.7vh;
  align-items:stretch;
  margin-top:1.8vh;
}

.presence-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:.8vw;
  padding:.7vh .9vw;
  min-height:auto;
  border-radius:1.1vh;
  border:.18vh solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
}

.presence-row.is-paused{
  opacity:.65;
}

.presence-row .presence-name{
  text-align:left;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(.82rem, 1.6vh, 1rem);
}

.presence-row .presence-state{
  flex:0 0 auto;
  font-size:clamp(.7rem, 1.2vh, .82rem);
  opacity:.85;
  padding:.15em .55em;
  border-radius:999vh;
  background:rgba(0,0,0,.25);
}

.presence-action{
  margin:0;
  min-width:auto;
  padding:.42em .8em;
  border-radius:999vh;
  font-size:clamp(.72rem, 1.3vh, .88rem);
}

.pause-action{
  border:.18vh solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}

.remove-action{
  border:.18vh solid rgba(255,120,145,.5);
  background:rgba(255,120,145,.08);
  color:#ffd2dc;
}

.kwrap{
  margin-top:1.4vh;
}

.kwrap .small{
  margin:.6vh 0 0 0;
  opacity:.85;
}

.danger{
  border-color:rgba(255,90,90,.35);
  color:#ffd1d1;
}

@media (min-width:130vh){
  .clothes-grid-v13{
    gap:.62vh 2.1%;
  }

  .clothes-chip-v13{
    font-size:clamp(.78rem,1.02vh,.92rem);
    min-height:2.05em;
    padding:.38em .28em;
    gap:.2em;
  }
}

@media (min-width:150vh){
  .signup-main-card{
    flex-basis:60%;
    max-width:60%;
  }

  .signup-list-card{
    flex-basis:30%;
    max-width:30%;
  }

  .clothes-grid-v13{
    gap:.66vh 2.2%;
  }

  .clothes-chip-v13{
    font-size:clamp(.82rem,1.06vh,.98rem);
    min-height:2.12em;
    padding:.4em .32em;
  }

  .remove-player-v13{
    width:auto;
    max-width:none;
    min-width:7vw;
    height:auto;
    min-height:2.7em;
    padding:.58em .9em;
    color:var(--text);
    border-color:rgba(255,255,255,.18);
  }

  .remove-player-v13 .del-text{
    display:inline;
  }

  .remove-player-v13 .del-icon{
    display:none;
  }
}

@media (max-width:120vh){
  #stage{
    overflow-y:auto;
    align-items:flex-start;
  }

  .signup-layout{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }

  .signup-main-card,
  .signup-list-card{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
  }

  .signup-list-card{
    max-height:44vh;
  }
}

@media (min-width:70vh) and (max-width:104.99vh){
  .player-list-v13 > .player-card-v13{
    padding:1.15vh 4%;
  }

  .clothes-grid-v13{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.64vh 2.2%;
  }

  .clothes-chip-v13{
    font-size:clamp(.74rem,1.6vh,.9rem);
    min-height:2.05em;
    padding:.38em .26em;
    gap:.22em;
  }
}

@media (max-width:90vh){
  html,
  body{
    overflow:hidden;
  }

  #header{
    max-width:72vw;
  }

  #stage{
    padding:8vh 4vw 16vh 4vw;
    overflow-y:auto;
    overflow-x:hidden;
    align-items:flex-start;
    scroll-padding-top:8vh;
    scroll-padding-bottom:18vh;
  }

  .card{
    max-width:100%;
  }

  .signup-layout{
    height:auto;
    min-height:100%;
    max-height:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    overflow:visible;
    padding-bottom:10vh;
  }

  .signup-main-card{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-height:calc(100vh - 13vh);
    height:auto;
    max-height:none;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:3vh 5vw;
  }

  .signup-list-card{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    max-height:52vh;
    height:auto;
    align-self:stretch;
    padding:2.5vh 5vw;
    margin-bottom:10vh;
  }

  .player-list-v13{
    padding-right:0;
  }

  .player-list-v13 > .player-card-v13{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:.85vh 2.6vw;
    padding:1.3vh 3.2vw;
    border-radius:2.2vh;
  }

  .player-name-v13{
    min-width:0;
    font-size:clamp(1.1rem,2.8vh,1.35rem);
  }

  .remove-player-v13{
    width:2.35em;
    height:2.35em;
    min-width:2.35em;
    min-height:2.35em;
    max-width:2.35em;
  }

  .signup-form-row .col,
  .signup-mode-col{
    flex:1 1 100%;
    max-width:100%;
  }

  .game-screen{
    gap:7vh;
    padding-top:0;
    padding-bottom:14vh;
  }

  .stage-game{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding-bottom:10vh;
  }

  .main-card{
    max-width:100%;
    min-height:calc(80vh - 13vh);
    height:auto;
    padding:3vh 5vw;
  }

  .side-card{
    max-width:100%;
    min-width:0;
    height:auto;
    padding:2.5vh 5vw;
  }

  #dice{
    width:min(28vh, 54vw);
    height:min(28vh, 54vw);
  }

  .game-reset{
    right:3vw;
    top:1.5vh;
    padding:.75em 1.1em;
  }

  .presence-card{
    width:min(94vw,94vw);
    max-width:94vw;
    margin:0 auto 22vh auto;
    padding:2vh 4vw;
  }

  .presence-row{
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:1vh 2vw;
  }

  .presence-row .presence-state{
    display:none;
  }

  .presence-action{
    width:auto;
    padding:.5em .7em;
  }

  .winner-screen{
    width:100%;
    min-height:calc(100vh - 24vh);
    padding:4vh 5vw 3vh 5vw;
    gap:1.65vh;
    border-radius:2.6vh;
  }

  .winner-screen h1{
    font-size:clamp(2.6rem, 8vh, 4.6rem);
  }

  .winner-subtitle{
    font-size:clamp(2rem, 5.8vh, 3.8rem);
  }

  .winner-nameplate{
    width:min(78vw, 44vh);
    min-height:8.6vh;
    padding:1vh 4vw;
  }

  .winner-name{
    font-size:clamp(2.6rem, 7.4vh, 4.5rem);
  }

  .winner-continue{
    min-width:min(78vw, 42vh);
    max-width:100%;
    padding:.8em 1.25em;
  }
}

@media (max-width:60vh){
  #stage{
    padding-bottom:22vh;
    scroll-padding-bottom:24vh;
  }

  .signup-layout,
  .stage-game{
    padding-bottom:14vh;
  }
}

@media (max-height:72vh){
  .main-card{
    padding:2vh 3vw;
  }

  h1{
    margin-bottom:1vh;
  }

  #dice{
    width:24vh;
    height:24vh;
    margin:1.6vh auto 1vh auto;
  }

  button{
    padding:.9em 1.8em;
  }

  .pills{
    margin:1vh 0 0 0;
  }
}