/* =====================================================================
   DEADWEIGHT - menu / lobby / how-to / settings / connecting / error screens (owner: UI-MENUS).
   Layout philosophy: the 3D island is the hero, so panels hug the edges and the centre stays clear.
   Breakpoints: menu = (max-width: 760px) portrait phones, (max-height: 520px) landscape phones; lobby top-bar layout =
   (max-width: 760px), (max-height: 680px) (keep in sync with COMPACT_MQ in ui.js). Big screens (>=1600x900) get zoom 1.2 / 1.5.
   ===================================================================== */

.dw-screen { position: absolute; inset: 0; pointer-events: none; }

/* ------------------------------------------------------------ LOGO */
.dw-logo { --fs: clamp(2.1rem, 5.6vw, 4.3rem); position: relative; display: inline-block; max-width: 100%; }
.dw-logo__line { position: relative; display: inline-block; padding-right: calc(var(--fs) * 1.0); padding-top: calc(var(--fs) * 0.45); }
.dw-logo__word { margin: 0; display: flex; font-size: var(--fs); line-height: 1; font-weight: 900; white-space: nowrap; letter-spacing: 0.005em; }
.dw-logo__letter {
  display: inline-block; color: var(--c); rotate: var(--r);
  text-shadow:
    -0.055em -0.055em 0 var(--dw-ink), 0.055em -0.055em 0 var(--dw-ink), -0.055em 0.055em 0 var(--dw-ink), 0.055em 0.055em 0 var(--dw-ink),
    0 -0.07em 0 var(--dw-ink), 0 0.07em 0 var(--dw-ink), -0.07em 0 0 var(--dw-ink), 0.07em 0 0 var(--dw-ink),
    0 0.11em 0 var(--dw-ink), 0 0.13em 0.02em rgba(27, 19, 64, 0.5);
  animation: dw-letter-in 0.7s var(--dw-ease-bounce) calc(var(--i) * 60ms) backwards, dw-bob 2.8s ease-in-out calc(var(--i) * -0.24s) infinite;
}
@keyframes dw-letter-in { from { translate: 0 -0.9em; scale: 0.4; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
.dw-logo__tag {
  margin: calc(var(--fs) * 0.28) 0 0; max-width: calc(var(--fs) * 8.6);
  font-size: clamp(0.8rem, calc(var(--fs) * 0.3), 1.15rem); font-weight: 900; letter-spacing: 0.02em; line-height: 1.2;
  color: var(--dw-cream); text-shadow: 0 2px 0 var(--dw-ink), 0 0 10px rgba(27, 19, 64, 0.75);
}
.dw-logo__rope { position: absolute; right: calc(var(--fs) * -0.12); top: 0; width: calc(var(--fs) * 1.2); height: auto; overflow: visible; }
.dw-logo__swing { transform-origin: 50% 0; animation: dw-swing 3.4s ease-in-out infinite; }
.dw-logo__fall { transform-origin: 35px 38px; animation: dw-logo-fall 7s infinite; }
.dw-logo__scissors-in { animation: dw-logo-scis 7s infinite; opacity: 1; }
.dw-logo__blade { transform-box: fill-box; }
.dw-logo__blade--a { transform-origin: 54% 35%; transform: rotate(-12deg); animation: dw-blade-a 7s infinite; }
.dw-logo__blade--b { transform-origin: 54% 65%; transform: rotate(12deg); animation: dw-blade-b 7s infinite; }
@keyframes dw-logo-fall {
  0%, 59% { transform: none; opacity: 1; }
  61% { transform: translateY(3px); opacity: 1; }
  80% { transform: translateY(150px) rotate(38deg); opacity: 0; }
  80.1%, 94% { transform: translateY(-4px) scale(0.6); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes dw-logo-scis {
  0%, 48% { transform: translate(44px, -4px) rotate(14deg); opacity: 0; }
  57%, 66% { transform: translate(-15px, -18px) rotate(0); opacity: 1; }
  76%, 100% { transform: translate(44px, -4px) rotate(14deg); opacity: 0; }
}
@keyframes dw-blade-a { 0%, 55% { transform: rotate(-18deg); } 59% { transform: rotate(3deg); } 63% { transform: rotate(-18deg); } 100% { transform: rotate(-18deg); } }
@keyframes dw-blade-b { 0%, 55% { transform: rotate(18deg); } 59% { transform: rotate(-3deg); } 63% { transform: rotate(18deg); } 100% { transform: rotate(18deg); } }

/* ------------------------------------------------------------ MENU */
.dw-menu {
  display: grid; align-content: center; justify-content: start; row-gap: 14px;
  grid-template-columns: minmax(340px, 440px) 1fr;
  grid-template-areas: "brand ." "profile ." "actions .";
  padding: var(--dw-pad-t) var(--dw-pad-r) calc(var(--dw-pad-b) + 18px) max(var(--dw-pad-l), 3.5vw);
  animation: dw-fade 0.35s ease both;
}
.dw-menu__brand { grid-area: brand; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; }
.dw-menu__profile { grid-area: profile; padding: 14px; border-radius: var(--dw-r-lg); animation: dw-rise 0.5s 0.05s var(--dw-ease-out) both; }
.dw-menu__actionswrap { grid-area: actions; display: flex; flex-direction: column; gap: 10px; animation: dw-rise 0.5s 0.12s var(--dw-ease-out) both; }
.dw-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw-menu__actions .dw-btn { min-width: 0; }
.dw-menu__actions .dw-btn:not(.dw-btn--lg) { font-size: 0.9rem; padding: 0 0.8em; letter-spacing: 0.04em; }
.dw-menu__play, .dw-menu__invitebtn, .dw-menu__friends { grid-column: 1 / -1; }
.dw-menu.is-solo-only .dw-menu__solo { grid-column: 1 / -1; min-height: 64px; font-size: var(--dw-fs-lg); }
.dw-menu.is-solo-only [data-online] { display: none !important; }

.dw-btn__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.dw-btn--lg .dw-btn__text { align-items: center; text-align: center; }
.dw-btn__sub { font-size: 0.62em; font-weight: 800; letter-spacing: 0.14em; opacity: 0.72; }
.dw-menu__play, .dw-menu__invitebtn { justify-content: center; }
.dw-menu__play .dw-icon, .dw-menu__invitebtn .dw-icon { width: 1.4em; height: 1.4em; }
.dw-menu__play { --ring: rgba(255, 210, 63, 0.85); animation: dw-ring 2s ease-out infinite; }
.dw-menu.is-invited .dw-menu__play { animation: none; min-height: 52px; font-size: 1.05rem; }
.dw-menu.is-invited .dw-menu__play .dw-btn__sub { display: none; }
.dw-menu__actions .dw-btn__label { white-space: normal; line-height: 1.05; }
.dw-menu__how { position: relative; }
.dw-menu__newbadge { position: absolute; top: -12px; right: -6px; transform: rotate(8deg); animation: dw-pulse 1.1s ease-in-out infinite; pointer-events: none; }

.dw-menu__banner {
  align-self: flex-start; display: flex; align-items: baseline; gap: 10px; padding: 4px 14px 6px; border-radius: 14px;
  background: var(--dw-ink); color: var(--dw-cream); border: 3px solid var(--dw-cream);
  box-shadow: 0 0 0 3px var(--dw-ink), 0 6px 0 3px rgba(27, 19, 64, 0.5); transform: rotate(-1.5deg); pointer-events: auto;
}
.dw-menu__banner-label { color: var(--dw-banana); }
.dw-menu__banner-code { font-weight: 900; font-size: 1.7rem; letter-spacing: 0.22em; color: #fff; padding-left: 0.22em; }

.dw-menu__hint {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: min(340px, 100%); padding: 8px 8px 8px 14px;
  background: var(--dw-cream); color: var(--dw-ink); border: 3px solid var(--dw-ink); border-radius: 16px;
  box-shadow: 0 4px 0 var(--dw-ink); transform: rotate(-1.2deg); font-weight: 900; font-size: 0.82rem; line-height: 1.25; pointer-events: auto;
}
.dw-menu__hint::before { content: ""; position: absolute; left: 22px; top: -9px; width: 14px; height: 14px; background: var(--dw-cream); border-left: 3px solid var(--dw-ink); border-top: 3px solid var(--dw-ink); transform: rotate(45deg); }
.dw-menu__hint-x { appearance: none; flex: none; width: 44px; height: 44px; margin: -8px -4px -8px 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--dw-ink); display: grid; place-items: center; pointer-events: auto; }
@media (hover: hover) { .dw-menu__hint-x:hover { background: rgba(27, 19, 64, 0.12); } }

.dw-menu__foot {
  position: absolute; left: max(var(--dw-pad-l), 3.5vw); right: var(--dw-pad-r); bottom: max(8px, var(--dw-safe-b));
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; pointer-events: none;
}
.dw-menu__status { color: var(--dw-cream); font-weight: 900; text-shadow: 0 2px 0 var(--dw-ink); }
.dw-menu__made { margin-left: auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-cream); opacity: 0.8; text-shadow: 0 1px 0 var(--dw-ink), 0 0 8px rgba(27, 19, 64, 0.7); }

/* ------------------------------------------------------------ PROFILE EDITOR (menu card + lobby YOU) */
.dw-pe { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.dw-pe__preview { width: 92px; align-self: end; transform-origin: 50% 100%; filter: drop-shadow(0 4px 0 rgba(27, 19, 64, 0.18)); }
.dw-pe__preview svg { width: 100%; height: auto; animation: dw-pe-idle 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dw-pe-idle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }
.dw-pe__fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dw-pe__namerow { display: flex; align-items: center; gap: 6px; }
.dw-pe__namebox { flex: 1 1 auto; min-width: 0; cursor: text; }
.dw-pe__row { display: grid; grid-template-columns: 52px 44px 1fr 44px; align-items: center; gap: 6px; }
.dw-pe__lbl { align-self: center; }
.dw-pe__arrow { width: 44px; }
.dw-pe__val { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 8px; border-radius: 12px; background: rgba(27, 19, 64, 0.07); font-weight: 900; font-size: 0.92rem; }
.dw-pe__valtext { min-width: 0; }
.dw-pe__swatch { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sw, #fff); border: 3px solid var(--dw-ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45); }
.dw-pe__hattile { flex: none; width: 34px; height: 28px; display: grid; place-items: center; }
.dw-pe__hattile svg { width: 34px; height: 28px; overflow: visible; }
.dw-pe__dice { flex: none; width: 44px; min-height: 48px; height: 48px; border-radius: 12px; }
.dw-lobby__me .dw-pe { grid-template-columns: 70px 1fr; gap: 10px; }
.dw-lobby__me .dw-pe__preview { width: 70px; }
.dw-lobby__me .dw-pe__row, .dw-modal__body .dw-pe__row { grid-template-columns: 44px 1fr 44px; }
.dw-lobby__me .dw-pe__lbl, .dw-modal__body .dw-pe__lbl { display: none; }
.dw-lobby__me .dw-pe__fields { gap: 6px; }

/* ------------------------------------------------------------ MODALS */
.dw-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--dw-pad-t) var(--dw-pad-r) var(--dw-pad-b) var(--dw-pad-l); }
.dw-modal__dim { position: absolute; inset: 0; background: rgba(27, 19, 64, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: auto; animation: dw-fade 0.2s ease both; }
.dw-modal__card { --dw-accent: var(--dw-sky); --dw-accent-ink: var(--dw-ink); position: relative; width: min(100%, 500px); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; animation: dw-pop 0.38s var(--dw-ease-bounce) both; }
.dw-modal__card--sm { width: min(100%, 420px); }
.dw-modal__card--lg { width: min(100%, 640px); }
.dw-modal__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; background: var(--dw-accent); border-bottom: var(--dw-bw-lg) solid var(--dw-ink); }
.dw-modal__title { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: 0.06em; color: var(--dw-accent-ink); text-transform: uppercase; }
.dw-modal__card--sky { --dw-accent: var(--dw-sky); }
.dw-modal__card--grape { --dw-accent: var(--dw-grape); --dw-accent-ink: #fff; }
.dw-modal__card--mint { --dw-accent: var(--dw-mint); }
.dw-modal__card--tomato { --dw-accent: var(--dw-tomato); --dw-accent-ink: #fff; }
.dw-modal__card--banana { --dw-accent: var(--dw-banana); }
.dw-modal__card--tangerine { --dw-accent: var(--dw-tangerine); }
.dw-modal__x { flex: none; }
.dw-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px; -webkit-overflow-scrolling: touch; }
.dw-modal__foot { flex: none; padding: 12px 16px 16px; border-top: 3px solid rgba(27, 19, 64, 0.12); background: rgba(27, 19, 64, 0.05); }
.dw-modal__actions { gap: 10px; }
.dw-modal__actions > :last-child { margin-left: auto; }

/* join sheet */
.dw-join { gap: 14px; }
.dw-join__art { display: flex; gap: 8px; justify-content: center; }
.dw-join__tile { width: 12px; height: 12px; border-radius: 50%; background: var(--dw-ink); opacity: 0.18; animation: dw-bob 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.2s); }
.dw-codebox { min-height: 76px; padding: 0 8px; justify-content: center; }
.dw-codeinput { text-align: center; font-weight: 900; font-size: 2.6rem; letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase; color: var(--dw-ink); background: transparent; border: 0; outline: 0; width: 100%; min-width: 0; caret-color: var(--dw-tomato); }
.dw-codeinput::placeholder { color: rgba(27, 19, 64, 0.18); }
.dw-codehint { margin: 0; color: var(--dw-muted-ink); min-height: 1.3em; }

/* solo sheet */
.dw-solo { gap: 12px; }
.dw-solo__stepper { gap: 8px; }
.dw-solo__count { font-size: 2rem; font-weight: 900; letter-spacing: 0.04em; }
.dw-solo__crowd { display: flex; justify-content: center; gap: 6px; min-height: 76px; }
.dw-solo__bot { width: 56px; height: 72px; display: block; opacity: 0.22; filter: grayscale(1); transform: scale(0.82); transform-origin: 50% 100%; transition: opacity 0.2s, transform 0.3s var(--dw-ease-bounce), filter 0.2s; }
.dw-solo__bot.is-on { opacity: 1; filter: none; transform: scale(1); }
.dw-solo__bot svg { width: 100%; height: 100%; }
.dw-solo__blurb { margin: 0; color: var(--dw-muted-ink); min-height: 1.3em; }

/* settings sheet */
.dw-settings { display: flex; flex-direction: column; gap: 18px; }
.dw-settings__group { display: flex; flex-direction: column; gap: 10px; }
.dw-settings__h { margin: 0; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.16em; color: var(--dw-muted-ink); }
.dw-settings__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.dw-settings__row--slider { display: grid; grid-template-columns: 76px 1fr 46px; }
.dw-settings__row--seg { display: grid; grid-template-columns: 96px 1fr; }
.dw-settings__row--switch { justify-content: space-between; }
.dw-settings__lbl { font-weight: 900; font-size: 0.95rem; }
.dw-settings__lblbox { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dw-settings__sub { color: var(--dw-muted-ink); font-weight: 700; font-size: 0.78rem; }
.dw-settings__val { text-align: right; font-weight: 900; font-size: 0.9rem; }
.dw-settings__mute { min-height: 44px; }

/* ------------------------------------------------------------ CONNECTING / ERROR */
.dw-status { display: flex; align-items: center; justify-content: center; padding: var(--dw-pad-t) var(--dw-pad-r) var(--dw-pad-b) var(--dw-pad-l); pointer-events: auto; background: rgba(27, 19, 64, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: dw-fade 0.25s ease both; }
.dw-status__card { width: min(100%, 460px); padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: dw-pop 0.45s var(--dw-ease-bounce) both; }
.dw-status__art { height: 130px; display: grid; place-items: center; margin-top: -6px; }
.dw-status__title { color: var(--dw-tomato); font-size: 1.9rem; margin: 2px 0 0; }
.dw-status[data-mode="connecting"] .dw-status__title { color: var(--dw-sky); }
.dw-status__text { margin: 0; min-height: 1.35em; }
.dw-status__quip { margin: 0; color: var(--dw-muted-ink); min-height: 1.3em; }
.dw-status__quip:empty { display: none; }
.dw-status__quip.dw-dots::after { content: ""; }
.dw-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.dw-spinner { width: 92px; height: auto; overflow: visible; }
.dw-spinner__swing { transform-origin: 60px 0; animation: dw-swing 1.7s ease-in-out infinite; }
.dw-snapgfx { width: 150px; height: auto; overflow: visible; }
.dw-snapgfx__tumble { transform-box: fill-box; transform-origin: 50% 50%; animation: dw-tumble 2.6s ease-in-out infinite; }
.dw-snapgfx__spark { transform-box: fill-box; transform-origin: center; animation: dw-pulse 1.2s ease-in-out infinite; }
@keyframes dw-tumble { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(12deg) translateY(10px); } }

/* ------------------------------------------------------------ CORNER BUTTONS + DEBUG */
.dw-corner { display: flex; justify-content: flex-end; align-items: flex-start; padding: var(--dw-pad-t) var(--dw-pad-r) 0 0; }
.dw-corner__bar { display: flex; align-items: center; gap: 8px; }
.dw-corner__btn { min-height: 44px; width: 44px; --fg: var(--dw-cream); }
.dw-corner__conn { pointer-events: none; }
.dw-debug {
  position: absolute; z-index: var(--dw-z-debug); left: max(8px, var(--dw-safe-l)); bottom: max(6px, var(--dw-safe-b));
  padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(27, 19, 64, 0.72); white-space: pre; pointer-events: none;
}

/* ------------------------------------------------------------ LOBBY */
.dw-lobby {
  --corner-h: 56px;
  display: grid; column-gap: 16px; row-gap: 12px; align-content: start;
  grid-template-columns: minmax(270px, 330px) 1fr minmax(280px, 340px);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "left auto right" "left . foot" "left . reason" "left . ." "hints hints hints";
  padding: var(--dw-pad-t) var(--dw-pad-r) var(--dw-pad-b) var(--dw-pad-l);
  animation: dw-fade 0.3s ease both;
}
.dw-lobby__left { grid-area: left; display: flex; flex-direction: column; gap: 12px; align-self: start; min-width: 0; }
.dw-lobby__right { grid-area: right; align-self: start; display: flex; flex-direction: column; gap: 12px; margin-top: var(--corner-h); min-width: 0; }
.dw-lobby__foot { grid-area: foot; display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: start; }
.dw-lobby__reason { grid-area: reason; align-self: start; margin: -2px 4px 0; text-align: center; color: var(--dw-cream); font-weight: 900; text-shadow: 0 2px 0 var(--dw-ink), 0 0 10px rgba(27, 19, 64, 0.8); min-height: 1.3em; }
.dw-lobby__reason.is-ok { color: #b9ffd9; }
/* quick-play auto-start banner: a slim pill in the free centre-top, never over the middle of the island */
.dw-lobby__auto {
  grid-area: auto; justify-self: center; align-self: start; margin-top: var(--corner-h); width: min(100%, 460px); min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px 12px; text-align: center;
  background: var(--dw-ink-glass); border: 3px solid var(--dw-ink); border-radius: var(--dw-r-lg); box-shadow: var(--dw-shadow-hard); color: var(--dw-cream);
  animation: dw-rise 0.4s var(--dw-ease-out) both;
}
.dw-lobby__auto[hidden] { display: none; }
.dw-lobby__autotext { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.03em; line-height: 1.25; text-wrap: balance; }
.dw-lobby__auto.is-counting .dw-lobby__autotext { color: #b9ffd9; }
.dw-lobby__auto.is-paused .dw-lobby__autotext { color: var(--dw-banana); }
.dw-lobby__autobar { width: 100%; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); border: 2px solid var(--dw-ink); overflow: hidden; }
.dw-lobby__autobar[hidden] { display: none; }
.dw-lobby__autofill { display: block; width: 100%; height: 100%; background: var(--dw-mint); transform-origin: left center; transition: transform 1s linear; }
.dw-lobby__autobtn { max-width: 100%; }
.dw-lobby__autobtn[hidden] { display: none; }
.dw-lobby__sheetbtns { display: none; }
.dw-lobby__minor { display: flex; gap: 8px; justify-content: space-between; }
.dw-lobby__sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dw-lobby__sec-head .dw-lobby__sec-h { margin: 0; }
.dw-lobby__gear { display: none; }
.dw-lobby__start { width: 100%; --ring: rgba(61, 220, 151, 0.9); }
.dw-lobby__start--wait .dw-icon { animation: dw-spin 3s linear infinite; }
.dw-lobby__start--wait .dw-lobby__starttext::after { content: "..."; }

.dw-lobby__room { padding: 12px 14px 14px; border-radius: var(--dw-r-lg); display: flex; flex-direction: column; gap: 10px; animation: dw-rise 0.45s var(--dw-ease-out) both; }
.dw-lobby__roomtop { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dw-lobby__code { display: flex; gap: 8px; }
.dw-lobby__tile {
  width: 52px; height: 62px; display: grid; place-items: center; font-weight: 900; font-size: 2.3rem; line-height: 1; color: var(--dw-ink);
  background: var(--dw-cream); border: 3px solid var(--dw-ink); border-radius: 14px; box-shadow: 0 5px 0 #0e0a26, inset 0 3px 0 #fff;
}
.dw-lobby__tile:nth-child(odd) { transform: rotate(-2.5deg); } .dw-lobby__tile:nth-child(even) { transform: rotate(2.5deg) translateY(-2px); }
.dw-lobby__solotag { font-weight: 900; font-size: 1.15rem; letter-spacing: 0.12em; color: var(--dw-banana); display: none; }
.dw-lobby__room.is-solo .dw-lobby__code, .dw-lobby__room.is-solo .dw-lobby__roomlabel { display: none; }
.dw-lobby__room.is-solo .dw-lobby__solotag { display: block; }
.dw-lobby__room.is-solo .dw-lobby__invite { display: none; }
.dw-lobby__invite .dw-btn { flex: 1 1 0; padding: 0 0.7em; }
.dw-lobby__copy.is-done { --bg: var(--dw-mint); }

.dw-lobby__seats { padding: 8px; border-radius: var(--dw-r-lg); display: flex; flex-direction: column; gap: 6px; animation: dw-rise 0.5s 0.06s var(--dw-ease-out) both; }
.dw-seat {
  --seat: #fff; position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; min-height: 62px; padding: 5px 8px 5px 6px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 3px solid transparent; border-left: 7px solid var(--seat);
}
.dw-seat.is-you { background: rgba(255, 244, 224, 0.17); border-color: var(--seat); border-left-width: 7px; box-shadow: 0 0 0 2px var(--dw-ink), 0 0 18px -2px var(--seat); }
.dw-seat.is-empty { background: rgba(255, 255, 255, 0.03); border: 3px dashed rgba(255, 244, 224, 0.22); border-left: 3px dashed rgba(255, 244, 224, 0.22); grid-template-columns: 1fr; justify-items: center; }
.dw-seat.is-empty .dw-seat__avatar, .dw-seat.is-empty .dw-seat__info, .dw-seat.is-empty .dw-seat__x { display: none; }
.dw-seat__avatar { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; background: var(--dw-ink-3); background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.28), transparent 70%), color-mix(in srgb, var(--seat) 38%, var(--dw-ink-2)); border: 3px solid var(--dw-ink); }
.dw-seat__avatar svg { width: 100%; height: 100%; transform: scale(1.32) translateY(8%); transform-origin: 50% 24%; }
.dw-seat__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dw-seat__name { font-weight: 900; font-size: 1.02rem; color: var(--dw-cream); }
.dw-seat__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dw-seat__tags:empty { display: none; }
.dw-seat__x { appearance: none; width: 38px; height: 38px; border-radius: 12px; border: 3px solid var(--dw-ink); background: rgba(255, 84, 112, 0.22); color: var(--dw-cream); cursor: pointer; display: grid; place-items: center; pointer-events: auto; touch-action: manipulation; }
@media (hover: hover) { .dw-seat__x:hover { background: var(--dw-tomato); color: #fff; } }
.dw-seat__add { width: 100%; justify-content: center; }
.dw-seat__wait { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; color: rgba(255, 244, 224, 0.5); padding: 12px 0; }
.dw-seat__wait .dw-dots::after { content: "..."; }
.dw-lobby__practice { margin: 2px 6px 0; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; color: var(--dw-cream); text-shadow: 0 2px 0 var(--dw-ink), 0 0 10px rgba(27, 19, 64, 0.8); }

.dw-lobby__sec-h { margin: 0 0 8px; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.16em; color: var(--dw-muted-ink); }
.dw-lobby__sec-h--ink { color: var(--dw-muted); }
.dw-lobby__me { padding: 12px 14px 14px; border-radius: var(--dw-r-lg); animation: dw-rise 0.5s 0.1s var(--dw-ease-out) both; }
.dw-lobby__rules { padding: 12px 14px 14px; border-radius: var(--dw-r-lg); animation: dw-rise 0.5s 0.14s var(--dw-ease-out) both; }
.dw-lobby__rules-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.dw-lobby__rules-body > .dw-lobby__rule:nth-child(-n+2) { grid-column: 1 / -1; }
.dw-lobby__rule { display: flex; flex-direction: column; gap: 6px; }
.dw-lobby__rule--toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 14px; background: rgba(0,0,0,.2); }
.dw-lobby__rule--toggle .dw-lobby__sub { display: none; }
.dw-lobby__rule--toggle .dw-switch { --sw-w: 52px; --sw-t: 30px; }
.dw-lobby__rule--toggle .dw-label { letter-spacing: 0.08em; }
.dw-lobby__toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dw-lobby__sub { color: var(--dw-muted); font-weight: 700; font-size: 0.76rem; }
.dw-lobby__blurb { margin: 0; color: var(--dw-muted); font-size: 0.78rem; }
.dw-lobby__lock { display: inline-flex; align-items: center; gap: 4px; color: var(--dw-banana); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
.dw-modal__body .dw-lobby__sec-head { display: none; }
.dw-lobby__rules.is-locked .dw-seg, .dw-lobby__rules.is-locked .dw-switch { opacity: 0.7; }

.dw-lobby__hints {
  grid-area: hints; justify-self: center; align-self: end; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 7px 16px 9px;
  background: var(--dw-ink-glass); border: 3px solid var(--dw-ink); border-radius: var(--dw-r-pill); color: var(--dw-cream); box-shadow: var(--dw-shadow-hard); pointer-events: none;
}
.dw-lobby__hint { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dw-lobby__keys { display: inline-flex; gap: 4px; align-items: center; }
.dw-lobby__sep { opacity: 0.6; font-weight: 900; }
#ui[data-touch="1"] .dw-lobby__hints { display: none; }

/* ------------------------------------------------------------ LOBBY: compact (phones, any orientation) */
@media (max-width: 760px), (max-height: 680px) {
  .dw-lobby {
    grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: 8px; row-gap: 6px;
    grid-template-areas: "room foot" "seats seats" "auto auto" "reason reason";
    padding: max(8px, var(--dw-safe-t)) max(8px, var(--dw-safe-r)) 8px max(8px, var(--dw-safe-l));
  }
  .dw-lobby__left { display: contents; }
  .dw-lobby__right { display: none; }
  .dw-lobby__hints, .dw-lobby__practice { display: none; }
  .dw-lobby__room { grid-area: room; flex-direction: row; align-items: center; padding: 6px 8px; gap: 8px; border-radius: 16px; }
  .dw-lobby__roomtop { flex-direction: row; align-items: center; gap: 8px; }
  .dw-lobby__roomlabel { display: none; }
  .dw-lobby__code { gap: 4px; }
  .dw-lobby__tile { width: 34px; height: 42px; font-size: 1.5rem; border-radius: 10px; box-shadow: 0 3px 0 #0e0a26, inset 0 2px 0 #fff; }
  .dw-lobby__invite .dw-btn { min-width: 44px; padding: 0; width: 44px; flex: none; }
  .dw-lobby__copytext, .dw-lobby__xtext { display: none; }
  .dw-lobby__foot { grid-area: foot; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
  .dw-lobby__sheetbtns { display: flex; gap: 6px; }
  .dw-lobby__start { width: auto; min-height: 50px; font-size: 1rem; padding: 0 1em; border-radius: 16px; }
  .dw-lobby__minor { gap: 6px; }
  .dw-lobby__minor { display: none; }
  .dw-lobby__gear { display: inline-flex; }
  .dw-lobby__seats { max-width: 700px; }
  .dw-lobby__reason { grid-area: reason; margin: 0; font-size: 0.78rem; }
  .dw-lobby__auto { margin-top: 0; width: min(100%, 700px); justify-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 10px 8px; border-radius: 16px; }
  .dw-lobby__autotext { font-size: 0.9rem; flex: 1 1 auto; text-align: left; }
  .dw-lobby__autobtn { flex: none; margin-left: auto; min-height: 38px; font-size: 0.78rem; }
  .dw-lobby__autobar { flex: 1 0 100%; height: 8px; order: 3; }
  /* the virtual-stick zone (left half, below 30% of the screen) would swallow taps on the banner: shrink it while in the lobby */
  #ui[data-base="lobby"] .dw-t-zone { top: 52%; }
  #ui[data-base="lobby"][data-auto="1"][data-compact="1"] .dw-toasts { padding-top: 262px; }
  .dw-lobby__seats { grid-area: seats; flex-direction: row; gap: 5px; padding: 5px; border-radius: 16px; }
  .dw-seat { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; justify-items: center; gap: 2px; min-height: 0; padding: 4px 2px 4px; border-left-width: 3px; border-left-style: solid; border-top: 5px solid var(--seat); border-radius: 12px; }
  .dw-seat.is-empty { border: 3px dashed rgba(255, 244, 224, 0.22); }
  .dw-seat__avatar { width: 44px; height: 44px; border-radius: 12px; }
  .dw-seat__info { align-items: center; max-width: 100%; }
  .dw-seat__name { font-size: 0.74rem; max-width: 100%; text-align: center; }
  .dw-seat__tags { display: none; }
  .dw-seat.is-you .dw-seat__name::before { content: "\2022 "; color: var(--dw-sky); }
  .dw-seat__x { position: absolute; top: -9px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border-width: 2px; background: var(--dw-tomato); color: #fff; z-index: 1; }
  .dw-seat__x::after { content: ""; position: absolute; inset: -10px; }
  .dw-seat__x .dw-icon { width: 14px; height: 14px; }
  .dw-seat__add { min-width: 0; width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .dw-seat__addtext { display: none; }
  .dw-seat__wait { font-size: 0; padding: 0; height: 44px; display: grid; place-items: center; }
  .dw-seat__wait::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px dashed rgba(255, 244, 224, 0.4); }
  .dw-seat__wait .dw-dots { display: none; }
  #ui[data-base="lobby"] .dw-corner { display: none; }
}
@media (max-width: 520px) {
  .dw-lobby { grid-template-columns: 1fr; grid-template-areas: "room" "foot" "seats" "auto" "reason"; }
  .dw-lobby__foot { justify-content: space-between; }
  .dw-lobby__sheetbtn { padding: 0 0.8em; }
  .dw-lobby__start { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .dw-lobby__sheetbtn { width: 44px; padding: 0; justify-content: center; }
  .dw-lobby__sheetlbl { display: none; }
  .dw-lobby__start { min-width: 0; padding: 0 0.6em; }
}
/* sheets opened from the compact bar: move the sections into modal cards */
.dw-modal__body > .dw-lobby__sec-body { display: block; }
.dw-modal__body .dw-pe { grid-template-columns: 90px 1fr; }
.dw-modal__body .dw-lobby__rules-body .dw-label { color: var(--dw-muted-ink); }
.dw-modal__body .dw-lobby__sub, .dw-modal__body .dw-lobby__blurb, .dw-modal__body .dw-lobby__lock { color: var(--dw-muted-ink); }
.dw-modal__body .dw-lobby__rules-body .dw-seg { background: rgba(27, 19, 64, 0.12); }

/* ------------------------------------------------------------ HOW TO PLAY */
.dw-howto { display: flex; flex-direction: column; background: rgba(27, 19, 64, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: auto; animation: dw-fade 0.25s ease both; }
.dw-howto__head { flex: none; display: flex; align-items: center; gap: 16px; padding: var(--dw-pad-t) var(--dw-pad-r) 10px var(--dw-pad-l); }
.dw-howto__title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.dw-howto__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 4px var(--dw-pad-r) calc(var(--dw-pad-b) + 12px) var(--dw-pad-l); }
.dw-howto__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dw-howto__lede { margin: 0; text-align: center; font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.35rem); line-height: 1.35; color: var(--dw-cream); text-shadow: 0 2px 0 var(--dw-ink); max-width: 760px; align-self: center; }
.dw-howto__lede b { color: var(--dw-banana); }
.dw-howto__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.dw-hw {
  --accent: var(--dw-sky); flex: 1 1 300px; max-width: 372px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--dw-cream); color: var(--dw-ink); border: var(--dw-bw-lg) solid var(--dw-ink); border-radius: 22px; box-shadow: var(--dw-shadow-hard-lg), var(--dw-shadow-soft);
  transition: transform 0.25s var(--dw-ease-bounce);
}
@media (hover: hover) { .dw-hw:hover { transform: translateY(-4px) rotate(-0.6deg); } .dw-hw:nth-child(even):hover { transform: translateY(-4px) rotate(0.6deg); } }
.dw-hw__art { border-bottom: var(--dw-bw-lg) solid var(--dw-ink); background: #a8e2ff; line-height: 0; }
.dw-hw__svg { width: 100%; height: auto; display: block; }
.dw-hw__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; flex-wrap: wrap; }
.dw-hw__num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); border: 3px solid var(--dw-ink); font-weight: 900; font-size: 1.05rem; box-shadow: 0 3px 0 var(--dw-ink); }
.dw-hw__title { margin: 0; font-size: 1.45rem; font-weight: 900; letter-spacing: 0.06em; }
.dw-hw__keys { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.dw-hw__or { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; opacity: 0.55; text-transform: uppercase; }
.dw-hw__body { margin: 0; padding: 4px 14px 6px; font-weight: 800; font-size: 1rem; line-height: 1.35; }
.dw-hw__tip { margin: 0; padding: 0 14px 14px; font-weight: 700; font-size: 0.86rem; line-height: 1.35; color: var(--dw-muted-ink); }
.dw-hw__tip .dw-label { color: var(--accent); filter: brightness(0.7) saturate(1.4); }

.dw-howto__score { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 20px; max-width: 860px; align-self: center; width: 100%; }
.dw-howto__score p { margin: 0; }
.dw-howto__score b { color: var(--dw-banana); }
.dw-howto__score-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--dw-banana); color: var(--dw-ink); border: 3px solid var(--dw-ink); }
.dw-howto__controls { padding: 14px 18px 18px; max-width: 860px; align-self: center; width: 100%; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; }
.dw-howto__h { margin: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.1em; }
.dw-howto__tabs { min-width: 360px; }
.dw-howto__ctl { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dw-hw__rows { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.dw-hw__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: 12px; background: rgba(27, 19, 64, 0.06); }
.dw-hw__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 3px solid var(--dw-ink); }
.dw-hw__rowlabel { font-weight: 900; font-size: 0.95rem; }
.dw-hw__rowkeys { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dw-hw__keygroup { display: inline-flex; gap: 4px; }
.dw-hw__txt { font-weight: 800; font-size: 0.9rem; color: var(--dw-muted-ink); }
.dw-hw__touch { flex: 0 1 240px; width: 240px; max-width: 100%; height: auto; }
.dw-howto__done { align-self: center; margin-top: 4px; }

/* how-to scene animations (class names come from howto-art.js) */
.dw-hw__svg .hw-text { font: 900 12px var(--dw-font); fill: #1b1340; }
.dw-hw__svg .hw-text--sm { font-size: 9px; }
.hw-lunge { animation: hw-lunge 2.8s ease-in-out infinite; }
.hw-fly { animation: hw-fly 2.8s ease-in infinite; }
.hw-burst { transform-box: fill-box; transform-origin: center; animation: hw-burst 2.8s ease-out infinite; }
.hw-motion { animation: hw-motion 2.8s ease-in-out infinite; }
.hw-sparkles { animation: hw-motion 2.8s ease-in-out infinite; animation-delay: 0.3s; }
.hw-lean { animation: hw-lean 1.8s ease-in-out infinite; }
.hw-dangle { animation: dw-swing 2.2s ease-in-out infinite; }
.hw-pull { animation: hw-pull 1.8s ease-in-out infinite; }
.hw-arrows { animation: hw-arrows 1.8s ease-in infinite; }
.hw-lower { animation: hw-lower 3.4s ease-in infinite; }
.hw-scissors .hw-blade--a { transform-box: fill-box; transform-origin: 54% 35%; animation: hw-snip-a 3.4s infinite; }
.hw-scissors .hw-blade--b { transform-box: fill-box; transform-origin: 54% 65%; animation: hw-snip-b 3.4s infinite; }
.hw-ting { transform-box: fill-box; transform-origin: center; animation: hw-ting 3.4s ease-out infinite; }
.hw-scream { transform-box: fill-box; transform-origin: center; animation: hw-scream 3.4s ease-out infinite; }
.hw-climber { animation: hw-climb 2.4s ease-in-out infinite; }
.hw-key { animation: hw-key 0.36s ease-in-out infinite; }
.hw-bar { transform-box: fill-box; transform-origin: left center; animation: hw-bar 2.4s ease-in-out infinite; }
.hw-mash { animation: hw-arrows 1.2s ease-in infinite; }
.hw-ghost { animation: dw-bob 2.2s ease-in-out infinite; }
.hw-reticle { transform-box: fill-box; transform-origin: center; animation: dw-pulse 1.2s ease-in-out infinite; }
.hw-tomato { animation: hw-tomato 2.6s ease-in infinite; }
.hw-splat { transform-box: fill-box; transform-origin: center; animation: hw-splat 2.6s ease-out infinite; }
@keyframes hw-lunge { 0%, 28% { transform: none; } 36% { transform: translateX(34px); } 48% { transform: translateX(20px); } 100% { transform: none; } }
@keyframes hw-fly { 0%, 34% { transform: none; opacity: 1; } 38% { transform: translate(-6px, 2px) rotate(-8deg); } 62% { transform: translate(120px, -70px) rotate(40deg); opacity: 1; } 82% { transform: translate(210px, 50px) rotate(130deg); opacity: 0; } 82.1%, 96% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hw-burst { 0%, 34% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 56% { transform: scale(1); opacity: 1; } 66%, 100% { transform: scale(0.6); opacity: 0; } }
@keyframes hw-motion { 0%, 24% { opacity: 0; } 34%, 50% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes hw-lean { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-11deg); } }
@keyframes hw-pull { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes hw-arrows { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes hw-lower { 0%, 40% { transform: none; opacity: 1; } 48% { transform: translateY(3px); } 78% { transform: translateY(70px) rotate(25deg); opacity: 0; } 78.1%, 94% { transform: translateY(-4px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hw-snip-a { 0%, 36% { transform: rotate(-16deg); } 42% { transform: rotate(3deg); } 48% { transform: rotate(-16deg); } 52% { transform: rotate(3deg); } 58%, 100% { transform: rotate(-16deg); } }
@keyframes hw-snip-b { 0%, 36% { transform: rotate(16deg); } 42% { transform: rotate(-3deg); } 48% { transform: rotate(16deg); } 52% { transform: rotate(-3deg); } 58%, 100% { transform: rotate(16deg); } }
@keyframes hw-ting { 0%, 40% { transform: scale(0); opacity: 0; } 46% { transform: scale(1.3); opacity: 1; } 60%, 100% { transform: scale(0.5); opacity: 0; } }
@keyframes hw-scream { 0%, 46% { transform: scale(0); opacity: 0; } 54% { transform: scale(1.1); opacity: 1; } 74% { transform: scale(1); opacity: 1; } 86%, 100% { transform: scale(0.7); opacity: 0; } }
@keyframes hw-climb { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-14px); } }
@keyframes hw-key { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes hw-bar { 0% { transform: scaleX(0.08); } 90%, 100% { transform: scaleX(1); } }
@keyframes hw-tomato { 0% { transform: translate(170px, 34px) scale(0.6); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(150px, 6px) scale(1); } 80% { transform: translate(136px, 96px) scale(0.9); opacity: 1; } 82%, 100% { transform: translate(136px, 96px) scale(0); opacity: 0; } }
@keyframes hw-splat { 0%, 78% { transform: scale(0); opacity: 0; } 84% { transform: scale(1.3); opacity: 1; } 96% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------ MENU: responsive */
/* tablets / small laptops */
@media (max-width: 1100px) { .dw-logo { --fs: clamp(2.1rem, 6vw, 3.6rem); } }

/* phone portrait / narrow windows: logo on top, island in the middle, controls at the bottom */
@media (max-width: 760px) {
  .dw-menu {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; align-content: stretch; justify-content: stretch; row-gap: 10px;
    grid-template-areas: "brand" "." "profile" "actions";
    padding: max(10px, var(--dw-safe-t)) max(14px, var(--dw-safe-r)) max(12px, var(--dw-safe-b)) max(14px, var(--dw-safe-l));
  }
  .dw-menu__brand { align-items: center; text-align: center; gap: 10px; }
  .dw-logo { --fs: clamp(1.9rem, 9.6vw, 3.1rem); }
  .dw-logo__tag { max-width: 17em; margin-left: auto; margin-right: auto; font-size: 0.8rem; }
  .dw-menu__hint { max-width: 100%; }
  .dw-menu__foot { display: none; }
  .dw-menu__profile { padding: 10px; }
  .dw-pe { grid-template-columns: 74px 1fr; gap: 10px; }
  .dw-pe__preview { width: 74px; }
  .dw-pe__row { grid-template-columns: 44px 1fr 44px; }
  .dw-pe__lbl { display: none; }
  .dw-menu__actions { gap: 8px; }
  .dw-menu__actions .dw-btn:not(.dw-btn--lg) { font-size: 0.8rem; padding: 0 0.5em; letter-spacing: 0.03em; min-height: 46px; gap: 0.4em; }
  .dw-menu__actions .dw-btn:not(.dw-btn--lg) .dw-icon { width: 1.15em; height: 1.15em; }
  .dw-menu__banner { align-self: center; }
}
@media (max-width: 400px) { .dw-menu__actions .dw-btn:not(.dw-btn--lg) .dw-icon { display: none; } }
/* safety net: on a very short portrait phone (320x568 and the like) the menu may be taller than the screen - let it scroll
   instead of silently clipping HOW TO PLAY / SETTINGS off the bottom (the page itself never scrolls) */
@media (max-width: 760px) {
  .dw-menu { overflow-x: hidden; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .dw-menu { row-gap: 8px; }
  .dw-menu__hint { display: none; }                        /* the gold NEW? badge on HOW TO PLAY carries the same message */
  .dw-menu__brand { gap: 4px; }
  .dw-logo__tag { margin-top: 2px; }
  .dw-menu__profile { padding: 8px; }
  .dw-pe { grid-template-columns: 62px 1fr; gap: 8px; }
  .dw-pe__preview { width: 62px; }
  .dw-pe__fields { gap: 5px; }
  .dw-menu__play { min-height: 52px; }
  .dw-menu__play .dw-btn__sub { display: none; }
}

/* phone landscape / short windows (laptops with a tall browser chrome have ~620px of viewport): two columns, island between them.
   The single-column desktop menu needs ~740px; below 720 it used to push the logo off the top and HOW TO PLAY / SETTINGS off the bottom. */
@media (max-height: 520px) and (min-width: 561px), (max-height: 720px) and (min-width: 761px) {
  .dw-menu {
    grid-template-columns: minmax(280px, 340px) 1fr minmax(220px, 290px); grid-template-rows: 1fr auto; align-content: stretch; row-gap: 10px; column-gap: 12px;
    grid-template-areas: "brand . actions" "profile . actions";
    padding: max(8px, var(--dw-safe-t)) max(12px, var(--dw-safe-r)) max(8px, var(--dw-safe-b)) max(12px, var(--dw-safe-l));
  }
  .dw-menu__brand { align-self: start; gap: 8px; }
  .dw-menu__actionswrap { align-self: center; }
  .dw-logo { --fs: clamp(1.7rem, 4.6vw, 2.5rem); }
  .dw-logo__line { padding-top: calc(var(--fs) * 0.2); }
  .dw-menu__hint { font-size: 0.74rem; padding: 5px 4px 5px 10px; max-width: 280px; }
  .dw-menu__profile { padding: 8px; }
  .dw-pe { grid-template-columns: 62px 1fr; gap: 8px; }
  .dw-pe__preview { width: 62px; }
  .dw-pe__row { grid-template-columns: 44px 1fr 44px; gap: 4px; }
  .dw-pe__lbl { display: none; }
  .dw-pe__fields { gap: 4px; }
  .dw-pe__namebox, .dw-input { min-height: 44px; }
  .dw-menu__actions { grid-template-columns: 1fr; gap: 7px; }
  .dw-menu__actions .dw-btn { min-height: 44px; }
  .dw-menu__actions .dw-btn--lg { min-height: 54px; font-size: 1.05rem; }
  .dw-menu__play .dw-btn__sub { display: none; }
  .dw-menu__foot { display: none; }
}
/* very short landscape (e.g. 844x390 with browser chrome) */
@media (max-height: 420px) and (min-width: 561px) {
  .dw-lobby__tile { width: 30px; height: 38px; font-size: 1.3rem; }
  .dw-logo__tag { display: none; }
  .dw-menu__actions { gap: 6px; }
  .dw-menu__actions .dw-btn { min-height: 44px; }
  .dw-menu__actions .dw-btn--lg { min-height: 48px; }
}

/* modals on small screens */
@media (max-width: 520px), (max-height: 520px) {
  .dw-modal__card { max-height: 100%; }
  .dw-modal__body { padding: 12px 14px; }
  .dw-settings { gap: 12px; }
  .dw-settings__row--slider { grid-template-columns: 64px 1fr 42px; gap: 8px; }
  .dw-settings__row--seg { grid-template-columns: 1fr; gap: 4px; }
  .dw-howto__tabs { min-width: 0; width: 100%; }
}
@media (max-width: 760px) {
  .dw-howto__cards { gap: 14px; }
  .dw-hw { flex-basis: 100%; max-width: 440px; }
}

/* ------------------------------------------------------------ short screens (phones in landscape) */
@media (max-height: 520px) {
  .dw-menu__banner { display: none; }
  .dw-modal { padding-top: max(8px, var(--dw-safe-t)); padding-bottom: max(8px, var(--dw-safe-b)); }
  .dw-modal__head { padding: 6px 8px 6px 16px; }
  .dw-modal__title { font-size: 1.1rem; }
  .dw-modal__body { padding: 10px 14px; }
  .dw-modal__foot { padding: 8px 12px 10px; }
  .dw-modal__card--md { width: min(100%, 700px); }
  .dw-settings { flex-direction: row; gap: 18px; }
  .dw-settings__group { flex: 1 1 0; min-width: 0; gap: 6px; }
  .dw-settings__row--slider { grid-template-columns: 56px 1fr 40px; }
  .dw-settings__row--seg { grid-template-columns: 1fr; gap: 2px; }
  .dw-settings__row { min-height: 40px; }
  .dw-settings__sub { display: none; }
  .dw-solo { gap: 6px; }
  .dw-solo__count { font-size: 1.5rem; }
  .dw-solo__crowd { min-height: 54px; }
  .dw-solo__bot { width: 42px; height: 54px; }
  .dw-join__art { display: none; }
  .dw-codebox { min-height: 62px; }
  .dw-codeinput { font-size: 2rem; }
  .dw-status__card { padding: 12px 16px 14px; gap: 6px; }
  .dw-status__art { height: 84px; }
  .dw-status__art svg { height: 100%; width: auto; }
  .dw-status__title { font-size: 1.4rem; }
  .dw-howto__lede { font-size: 0.95rem; }
}
@media (max-width: 760px), (max-height: 680px) {
  .dw-lobby__reason.is-ok { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-height: 520px) { #ui[data-base="menu"] .dw-corner { display: none; } }

/* ------------------------------------------------------------ big screens: scale the DOM screens up (not #hud/#touch, whose
   pointer maths belongs to other modules). `zoom` is supported by Chromium, WebKit and Firefox >= 126; elsewhere it is a no-op. */
@media (min-width: 1600px) and (min-height: 900px) { .dw-screens, .dw-corner, .dw-modals, .dw-toasts { zoom: 1.2; } }
@media (min-width: 2200px) and (min-height: 1250px) { .dw-screens, .dw-corner, .dw-modals, .dw-toasts { zoom: 1.5; } }

/* toast position: below whatever bar sits at the top of the current screen */
.dw-toasts { padding-top: calc(var(--dw-pad-t) + 62px); }
#ui[data-base="lobby"][data-compact="1"] .dw-toasts { padding-top: 238px; }
@media (max-height: 520px) { #ui[data-base="lobby"][data-compact="1"] .dw-toasts, #ui[data-base="lobby"][data-auto="1"][data-compact="1"] .dw-toasts { padding-top: 150px; } #ui[data-base="game"] .dw-toasts { padding-top: calc(var(--dw-pad-t) + 52px); } }

/* touch-only devices (no mouse, no hover): the how-to cards must not teach SPACE / SHIFT keys the player cannot press */
@media (pointer: coarse) and (hover: none) { .dw-hw__keys { display: none; } }

/* narrow phones: RESET + LEAVE + DONE cannot share one 320px row - wrap them, DONE gets the full width */
@media (max-width: 460px) {
  .dw-modal__actions--wrap { flex-wrap: wrap; gap: 8px; }
  .dw-modal__actions--wrap > .dw-btn--lg { flex: 1 1 100%; order: -1; margin-left: 0; }
}
@media (pointer: coarse) and (hover: none) { .dw-lobby__hints { display: none; } }   /* tablets: the on-screen buttons are the legend */