.sound-controls {display:inline-flex;align-items:center;gap:.42rem;color:#fff9ed;flex:none}
#sound button {margin:0;border:1px solid #74728c;border-radius:7px;background:#302f49;color:inherit;padding:.36rem .62rem;font-size:.8rem;font-weight:700;white-space:nowrap}
#sound input {width:clamp(58px,6vw,90px);height:32px;margin:0;cursor:pointer;accent-color:#dafa87;touch-action:pan-y}
#sound[data-muted="true"] input {accent-color:#aaa8ba}
nav #sound {margin-inline-start:auto}
body:has(#main[data-screen="room"]) {height:100vh;height:100dvh;overflow:hidden;background:#171729}
body:has(#main[data-screen="room"]) > header {display:none}
main[data-screen="login"],main[data-screen="lobby"] {width:min(1820px,100%)}
#main[data-screen="room"] {
  --shell-bar:54px;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;flex-flow:column;overflow:hidden;background:#f6f4ee;
}
#main[data-screen="room"] .roomtop {
  z-index:3;position:relative;flex:0 0 auto;display:flex;align-items:center;gap:clamp(.35rem,1.1vw,1rem);
  margin:0;min-height:var(--shell-bar);padding:.3rem clamp(.55rem,1.5vw,1.35rem);
  background:#18182d;color:#fbf7e9;border-bottom:1px solid #424257;
}
.roomtop nav {display:contents;padding:0;margin:0}
.roomtop nav .tabs {order:0;flex-wrap:nowrap;flex:none}
.roomtop nav .tabs button {font-size:.8rem;color:#ddd9ee;padding:.48rem .6rem}
.roomtop nav .tabs [aria-current="page"] {color:#e6ff91}
.roomtop nav #connection {display:none}
.roomtop .room-heading {display:block;order:1;min-width:0;margin:0;flex:1}
.room-heading summary {display:flex;align-items:center;gap:.4rem;cursor:pointer}
.room-heading summary::after {content:"▾";color:#b4b0cd;font-size:.82rem}
.room-heading summary::-webkit-details-marker {display:none}
.room-heading summary h1 {font-size:clamp(1rem,1.7vw,1.48rem);font-weight:820;line-height:1.18;margin:0;color:#fff7dc}
.room-heading .participants {position:absolute;top:100%;z-index:5;background:#2b2942;color:#fff7e9;border-radius:0 0 .6rem .6rem;border:1px solid #504d6b;padding:.65rem 1rem;max-width:min(31rem,90vw);box-shadow:0 5px 15px #18152c36}
.roomtop #sound {order:2}
.roomtop [data-fullscreen] {order:3}
.roomtop .controls {order:4}
.roomtop [data-fullscreen],.roomtop .controls button {white-space:nowrap;margin:0;padding:.42rem .66rem;min-height:34px;font-size:.78rem;background:#2d2c45;color:#fff9ef;border:1px solid #66617d}
.roomtop .controls .primary {background:#dff58b;color:#202235}
.roomtop .controls {border:0;margin:0;padding:0;gap:.3rem}
.roomtop button:focus-visible {outline-color:#e6ff8b}
#main[data-screen="room"] .room-panel {
  flex:1;min-height:0;min-width:0;width:100%;margin:0;display:flex;flex-direction:column;
  border:0;border-radius:0;padding:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
.room-panel > .play {width:100%;flex:1;min-width:0}
.room-panel > .practice-feed p:only-child,.room-panel > .practice-feed:not(:has(li)) {display:none}
.room-panel > .practice-feed:has(li) {flex:none;max-height:12vh;overflow:auto;padding:.25rem .8rem!important;border-top:1px solid #d9d4dd;margin:0;background:#fff7dc;font-size:.8rem}
.room-panel > .practice-feed:has(li) p {display:none}
.room-panel > .practice-feed ul {margin:0}
.room-panel>.outcome:not(:empty) {margin:.5rem;padding:clamp(.75rem,1.4vw,1.25rem);flex:none;border:1px solid #c5b67e}
#main:is([data-room-status="playing"],[data-room-status="finished"]) .play {min-height:0}
#main[data-room-status="lobby"] .room-panel,#main[data-room-status="closed"] .room-panel {
  justify-content:center;align-items:center;background:radial-gradient(ellipse at top right,#625897,#25213f 75%);color:white
}
#main[data-room-status="lobby"] .play,#main[data-room-status="closed"] .play {
  flex:none;width:min(90%,42rem);padding:clamp(2rem,6vw,4rem);font-size:clamp(1rem,2vw,1.5rem);
  font-weight:650;background:#37314e;border:1px solid #89809a;border-radius:1.25rem;text-align:center
}
#main[data-game="fallblock"] .play {background:#1d1933}
#main[data-game="fallblock"]:is([data-room-status="playing"],[data-room-status="finished"]) .fall-race {
  height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  border:0;border-radius:0;box-shadow:none;padding:clamp(.5rem,1.3vh,1rem) clamp(.65rem,1.4vw,1.6rem)
}
#main[data-game="fallblock"] .fall-top {margin-bottom:.5rem}
#main[data-game="fallblock"]:is([data-room-status="playing"],[data-room-status="finished"]) .fall-board {
  min-height:0;align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto auto;
  container-type:size;
}
#main[data-game="fallblock"]:is([data-room-status="playing"],[data-room-status="finished"]) canvas[data-board] {
  align-self:center;justify-self:center;width:min(100%,calc((100cqh - 5rem) / 2));
  max-width:100%;max-height:100%;aspect-ratio:1/2;height:auto
}
.fall-controls button {min-width:clamp(63px,8vw,160px)}
.fall-controls .pressed {transform:translateY(2px)}
#main[data-game="volley"]:is([data-room-status="playing"],[data-room-status="finished"]) .play {background:#27243c}
#main[data-game="volley"] .beach-game {
  height:100%;display:flex;flex-flow:column;align-items:stretch;justify-content:center;
  border-radius:0;box-shadow:none;border:0;background:#29253c
}
#main[data-game="volley"] .beach-game canvas {
  width:100%;max-width:100%;height:0;flex:1;min-height:0;object-fit:contain;background:#29253c
}
.beach-game .beach-stands,.beach-game .actions,.beach-game .volley-help {background:#fff1d3}
.beach-game .volley-help {margin:0;padding:.35rem .75rem .6rem}
#main[data-game="post"] .at-post,#main[data-game="hinweis"] .at-hinweis {border-radius:0;min-height:100%;border-width:0;box-shadow:none}
#main[data-game="post"] .at-post-studio {max-width:1400px;margin:auto}
#main[data-game="post"] .at-sheet-surface canvas {max-height:calc(100dvh - 340px);width:auto;max-width:100%;margin-inline:auto;display:block}
#main[data-game="post"] .at-photo canvas {max-height:34dvh;width:auto;max-width:100%}
#main[data-game="hinweis"] .at-felt {min-height:min(64dvh,700px);align-content:center}
@media (min-width:741px) and (orientation:portrait) {
  #main[data-game="fallblock"] .fall-grid {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px) {
  #main[data-screen="room"] .roomtop {gap:.4rem}
  .roomtop nav .tabs button {font-size:.74rem;padding:.48rem .36rem}
  .roomtop [data-fullscreen],.roomtop .controls button {padding:.42rem .4rem}
}
@media (pointer:coarse) {
  #main .roomtop button,#main .sound-controls button,.fall-controls button,.beach-game .actions button {min-height:42px}
}
@media (max-width:740px) {
  #main[data-screen="room"] .roomtop {flex-wrap:wrap;gap:.2rem .5rem}
  .roomtop #sound input {width:54px}
  .roomtop nav .tabs {order:1}
  .roomtop .room-heading {order:0;min-width:36%}
  #main[data-game="fallblock"] .fall-grid {grid-template-rows:repeat(2,minmax(0,1fr))}
  #main[data-game="fallblock"]:is([data-room-status="playing"],[data-room-status="finished"]) canvas[data-board] {width:min(100%,calc((100cqh - 4.2rem) / 2))}
}
/* The stage stretches between the real controls, including in tablet portrait. */
#main:is([data-room-status="playing"],[data-room-status="finished"]) .fp-party {
  height:100%;min-height:0;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none
}
#main:is([data-room-status="playing"],[data-room-status="finished"]) .fp-ring,#main:is([data-room-status="playing"],[data-room-status="finished"]) .fp-water {flex:1;height:auto;min-height:180px}
.fp-party .fp-ring {background:#563250 url('/konfettiarena.webp') center / cover}
.fp-party .fp-water {background:#369fa4 url('/lagune.webp') center / cover}
.fp-party .fp-orbit {border:2px dashed #fff2c890;box-shadow:0 0 0 1px #5d274a55}
.fp-party .fp-seat {padding:clamp(.4rem,1.3vh,.85rem) clamp(.68rem,1.7vw,1.4rem);box-shadow:2px 5px #291e3d;min-width:clamp(90px,10vw,190px)}
.fp-party .fp-avatar {scale:1.38;margin-block:.3rem .45rem}
.fp-party .fp-seat strong {font-size:clamp(.86rem,1.45vw,1.45rem)}
.fp-party .fp-seat small {font-size:clamp(.72rem,1vw,1rem)}
.fp-party .fp-token {width:clamp(42px,5.6vw,86px)}
.fp-party .fp-isle {width:min(78%,28vh);border-width:3px;box-shadow:0 7px #a17b50,0 11px #29687488}
.fp-party .fp-isle > span {font-size:clamp(1.7rem,5vh,3.25rem)}
.fp-party .fp-isle > small {font-size:clamp(.83rem,1.7vh,1.08rem)}
.fp-party .fp-isle-token {width:clamp(28px,4vh,49px);height:clamp(28px,4vh,49px)}
#main .roomtop [data-fullscreen]:hover:enabled,#main .roomtop .controls button:hover:enabled,
#sound button:hover:enabled {color:#fffbe8;background:#474560;border-color:#aba8c2}
#main .roomtop [data-fullscreen][aria-pressed="true"] {color:#efffb8;background:#373949;border-color:#aaae85}
.cartridge {position:relative}
.cartridge .ranking-link {
  position:absolute;inset-inline-end:.42rem;inset-block-end:.42rem;min-height:32px;padding:.25rem .62rem;
  color:#fff9e6;background:#211c3be8;border:1px solid #dddad09c;border-radius:1rem;font-size:.74rem;font-weight:700
}
.cartridge .ranking-link:hover:enabled {color:#24213b;background:#efffa9}
.practice-record {display:block;padding:.7rem 0;color:#44402c}
@media(pointer:coarse){.cartridge .ranking-link{min-height:42px}}