:root {
  --ch-viewport-width: 100vw;
  --ch-viewport-height: 100dvh;
}

html.colorhunt-mobile,
html.colorhunt-mobile body {
  margin: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  height: var(--ch-viewport-height) !important;
  min-height: var(--ch-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: #000;
  touch-action: none;
}

html.colorhunt-mobile #root {
  width: 100% !important;
  height: var(--ch-viewport-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.colorhunt-mobile canvas {
  display: block !important;
  max-width: 100vw !important;
  max-height: var(--ch-viewport-height) !important;
  margin: 0 auto !important;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
}

#colorhunt-orientation-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 42%, rgba(43, 60, 72, .96), rgba(8, 13, 18, .985));
  color: #fff;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    "Noto Sans JP",
    sans-serif;
}

#colorhunt-orientation-overlay.ch-visible {
  display: flex;
}

.ch-rotate-card {
  width: min(88vw, 430px);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 22px;
  padding: 24px 20px 20px;
  background: rgba(14, 21, 27, .88);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  text-align: center;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.ch-rotate-phone {
  font-size: clamp(48px, 14vw, 72px);
  line-height: 1;
  margin-bottom: 14px;
  animation: ch-rotate-nudge 1.8s ease-in-out infinite;
}

@keyframes ch-rotate-nudge {
  0%, 100% { transform: rotate(0deg); }
  45%, 60% { transform: rotate(18deg); }
}

.ch-rotate-card h2 {
  margin: 0 0 10px;
  font-size: clamp(21px, 6vw, 29px);
  line-height: 1.25;
}

.ch-rotate-card p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.55;
}

.ch-rotate-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.ch-rotate-actions button,
#colorhunt-fullscreen-chip {
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 13px;
  min-height: 46px;
  padding: 10px 16px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ch-rotate-actions button:first-child {
  background: rgba(68, 157, 223, .82);
}

.ch-install-help {
  margin-top: 13px !important;
  font-size: 12px !important;
  opacity: .72;
}

.ch-install-help--active {
  color: #fff4ae !important;
  opacity: 1;
}

#colorhunt-fullscreen-chip {
  position: fixed;
  z-index: 2147483645;
  right: max(10px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  display: none;
  width: auto;
  min-height: 36px;
  padding: 6px 11px;
  border-radius: 11px;
  background: rgba(10, 16, 21, .62);
  font-size: 12px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#colorhunt-fullscreen-chip.ch-visible {
  display: block;
}

@media (display-mode: standalone) {
  #colorhunt-fullscreen-chip {
    display: none !important;
  }
}


/* v0.10.10.98: unfolded foldables/tablets can play in portrait */
html.colorhunt-mobile body.colorhunt-large-mobile #colorhunt-orientation-overlay {
  display: none !important;
}

html.colorhunt-mobile body.colorhunt-large-mobile canvas {
  max-width: 100vw !important;
  max-height: var(--ch-viewport-height) !important;
}


/* v0.10.10.100 multiplayer chat */
.colorhunt-chat {
  --chat-keyboard-offset: 0px;
  --chat-canvas-left: 8px;
  --chat-canvas-top: 8px;
  --chat-panel-width: 300px;
  --chat-panel-max-height: 176px;

  position: fixed;
  z-index: 2147483000;
  left: var(--chat-canvas-left);
  top: var(--chat-canvas-top);
  width: var(--chat-panel-width);
  max-width: calc(100vw - 16px);
  max-height: var(--chat-panel-max-height);

  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  box-sizing: border-box;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;

  /* no blur: keep the game visible behind chat */
  background: rgba(5, 8, 12, .20);
  color: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    "Noto Sans JP",
    sans-serif;

  font-size: 12px;
  line-height: 1.30;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    background .14s ease,
    bottom .12s ease,
    top .12s ease;
}

.colorhunt-chat--focused {
  background: rgba(5, 8, 12, .52);
  border-color: rgba(255,255,255,.18);
}

.colorhunt-chat__log {
  min-height: 44px;
  max-height: 112px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: auto;
  text-shadow:
    0 1px 2px rgba(0,0,0,.98),
    1px 0 1px rgba(0,0,0,.78);
}

.colorhunt-chat__message {
  margin: 1px 0;
  overflow-wrap: anywhere;
}

.colorhunt-chat__message strong {
  color: #fff0a0;
}

.colorhunt-chat__notice {
  margin: 2px 0;
  color: #ffd19f;
  font-weight: 700;
}

.colorhunt-chat__composer {
  display: flex;
  gap: 5px;
  align-items: stretch;
}

.colorhunt-chat__input {
  min-width: 0;
  flex: 1;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px;
  outline: none;
  padding: 0 8px;
  background: rgba(0,0,0,.40);
  color: #fff;
  font-size: 13px;
}

.colorhunt-chat__input:focus {
  border-color: rgba(129, 208, 255, .85);
  background: rgba(0,0,0,.66);
}

.colorhunt-chat__send {
  min-width: 52px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  padding: 0 8px;
  background: rgba(57, 146, 213, .68);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Mobile normally stays at canvas top-left.
 * ONLY while the keyboard is actually open/focused, move the composer
 * above the keyboard so typed text is always visible.
 */
@media (pointer: coarse) {
  .colorhunt-chat {
    max-height: var(--chat-panel-max-height);
  }

  .colorhunt-chat__log {
    min-height: 28px;
    max-height: 64px;
  }

  .colorhunt-chat__input {
    height: 40px;
    font-size: 16px;
  }

  .colorhunt-chat__send {
    min-width: 62px;
    font-size: 13px;
  }

  .colorhunt-chat.colorhunt-chat--focused {
    top: auto;
    left: max(
      8px,
      env(safe-area-inset-left)
    );
    bottom:
      calc(
        max(8px, env(safe-area-inset-bottom))
        + var(--chat-keyboard-offset)
      );
    width: min(
      390px,
      calc(100vw - 16px)
    );
    max-height: 122px;
  }
}


/*
 * v0.10.10.101:
 * Soft keyboard must never shrink/move the game canvas.
 * Only .colorhunt-chat changes position via --chat-keyboard-offset.
 */
html.colorhunt-mobile,
html.colorhunt-mobile body,
html.colorhunt-mobile #root {
  height: var(--ch-viewport-height) !important;
  min-height: var(--ch-viewport-height) !important;
  max-height: var(--ch-viewport-height) !important;
}

html.colorhunt-mobile canvas {
  max-height: var(--ch-viewport-height) !important;
}


/* v0.10.10.103 — phase-aware chat */
@media (pointer: coarse) {
  .colorhunt-chat.colorhunt-chat--mobile-lobby:not(.colorhunt-chat--focused) {
    top: auto !important;
    left: var(--chat-canvas-left) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    max-height: 128px;
  }
}

/* Hold-to-view controls helper */
.colorhunt-controls-help {
  --controls-right: 8px;
  --controls-top: 78px;
  position: fixed;
  z-index: 2147483100;
  right: var(--controls-right);
  top: var(--controls-top);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    "Noto Sans JP",
    sans-serif;
}

.colorhunt-controls-help__button {
  min-width: 94px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 11px;
  background: rgba(15, 22, 28, .58);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

.colorhunt-controls-help__panel {
  position: absolute;
  right: 0;
  top: 44px;
  width: min(360px, calc(100vw - 24px));
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 13px;
  background: rgba(9, 14, 19, .91);
  color: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,.34);
  line-height: 1.45;
  pointer-events: none;
}

.colorhunt-controls-help__panel[hidden] {
  display: none !important;
}

.colorhunt-controls-help__panel strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  color: #fff4ad;
}

.colorhunt-controls-help__panel small {
  display: block;
  margin-bottom: 9px;
  color: rgba(255,255,255,.62);
  font-size: 10px;
}

.colorhunt-controls-help__panel div {
  margin: 6px 0;
  font-size: 12px;
}

@media (pointer: coarse) {
  .colorhunt-controls-help__button {
    min-width: 104px;
    min-height: 42px;
    font-size: 13px;
    background: rgba(12, 19, 24, .66);
  }

  .colorhunt-controls-help__panel {
    width: min(390px, calc(100vw - 20px));
    padding: 14px 15px;
  }

  .colorhunt-controls-help__panel div {
    font-size: 13px;
  }
}


/* v0.10.10.104 — precision paint touch UX */
html.colorhunt-mobile canvas {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/*
 * Keep DOM overlays responsive while Phaser canvas remains gesture-locked.
 */
.colorhunt-chat,
.colorhunt-controls-help {
  touch-action: manipulation;
}


/* v0.10.10.105 — responsive mobile Paint dock */
.colorhunt-paint-dock[hidden] {
  display: none !important;
}

.colorhunt-paint-dock {
  --paint-dock-left: 50vw;
  --paint-dock-bottom: 8px;
  --paint-dock-width: min(760px, calc(100vw - 20px));

  position: fixed;
  z-index: 2147483050;
  left: var(--paint-dock-left);
  bottom: var(--paint-dock-bottom);
  transform: translateX(-50%);
  width: var(--paint-dock-width);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(280px, 2fr) minmax(150px, .9fr);
  align-items: center;
  gap: 10px;

  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(26, 34, 39, .88),
    rgba(11, 17, 21, .88)
  );
  box-shadow:
    0 8px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);

  color: #fff;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    "Noto Sans JP",
    sans-serif;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
}

.colorhunt-paint-dock__colors {
  display: grid;
  grid-template-columns: repeat(8, minmax(22px, 1fr));
  gap: 5px;
}

.colorhunt-paint-color {
  aspect-ratio: 1;
  min-width: 22px;
  max-width: 34px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 8px;
  background: var(--paint-color);
  box-shadow: 0 2px 5px rgba(0,0,0,.26);
  padding: 0;
  transition:
    transform .10s ease,
    border-color .10s ease,
    box-shadow .10s ease;
}

.colorhunt-paint-color.is-active {
  transform: scale(1.12);
  border-color: #fff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.38),
    0 3px 8px rgba(0,0,0,.34);
}

.colorhunt-paint-dock__tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(52px, 1fr));
  gap: 6px;
}

.colorhunt-paint-tool {
  min-width: 0;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-weight: 800;
  font-size: 10px;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.colorhunt-paint-tool__icon {
  width: 25px;
  height: 25px;
  display: block;
}

.colorhunt-paint-tool svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.colorhunt-paint-tool.is-active {
  color: #17231b;
  border-color: rgba(214,255,203,.95);
  background: linear-gradient(
    180deg,
    #dff5d4,
    #a9d79c
  );
  box-shadow: 0 2px 10px rgba(109,185,101,.30);
}

.colorhunt-paint-size {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.82);
}

.colorhunt-paint-size input[type="range"] {
  width: 100%;
  min-width: 70px;
  accent-color: #9fd492;
}

.colorhunt-paint-size__value {
  min-width: 34px;
  text-align: right;
  color: #fff;
}

@media (max-width: 760px), (max-height: 430px) {
  .colorhunt-paint-dock {
    grid-template-columns: minmax(160px, 1.1fr) minmax(260px, 1.7fr);
    grid-template-areas:
      "colors tools"
      "size size";
    gap: 6px 9px;
    padding: 7px 9px;
    border-radius: 15px;
  }

  .colorhunt-paint-dock__colors {
    grid-area: colors;
  }

  .colorhunt-paint-dock__tools {
    grid-area: tools;
  }

  .colorhunt-paint-size {
    grid-area: size;
  }

  .colorhunt-paint-tool {
    height: 48px;
  }

  .colorhunt-paint-tool__icon {
    width: 21px;
    height: 21px;
  }
}

/* Controls help: one clean sentence per row, never awkward word wraps */
.colorhunt-controls-help__panel {
  width: max-content !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  min-width: 320px;
}

.colorhunt-controls-help__panel div {
  white-space: nowrap;
  overflow: visible;
  line-height: 1.65;
}

@media (pointer: coarse) {
  .colorhunt-controls-help__panel {
    max-width: min(620px, calc(100vw - 18px)) !important;
    min-width: min(420px, calc(100vw - 18px));
  }

  .colorhunt-controls-help__panel div {
    font-size: 12px;
    white-space: nowrap;
  }
}


/* v0.10.10.107 — desktop adopts the redesigned Paint dock */
.colorhunt-paint-dock--desktop {
  grid-template-columns:
    minmax(240px, 1.35fr)
    minmax(360px, 2fr)
    minmax(180px, .9fr);
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(24, 31, 36, .91),
      rgba(10, 15, 19, .91)
    );
}

.colorhunt-paint-dock--desktop .colorhunt-paint-dock__colors {
  grid-template-columns: repeat(8, 28px);
  justify-content: center;
  gap: 6px;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-color {
  width: 28px;
  height: 28px;
  max-width: none;
  border-radius: 7px;
  cursor: pointer;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-dock__tools {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
  gap: 7px;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-tool {
  height: 50px;
  font-size: 11px;
  cursor: pointer;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-tool__icon {
  width: 22px;
  height: 22px;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-size {
  font-size: 12px;
  gap: 8px;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-size input[type="range"] {
  cursor: pointer;
}

.colorhunt-paint-dock--desktop .colorhunt-paint-tool:hover,
.colorhunt-paint-dock--desktop .colorhunt-paint-color:hover {
  transform: translateY(-1px);
}

.colorhunt-paint-dock--desktop .colorhunt-paint-tool.is-active {
  transform: none;
}




/* v0.10.10.109 — bright, friendly pixel-game shell */
html,
body {
  background:
    linear-gradient(
      180deg,
      #e9f7dc 0%,
      #fff6d8 52%,
      #e8f5ff 100%
    );
}

canvas {
  box-shadow:
    0 9px 0 rgba(83, 120, 90, .10),
    0 18px 42px rgba(87, 117, 91, .20),
    0 0 0 2px rgba(112, 163, 121, .20);
}


/* v0.10.10.110 — lobby/menu UI reset polish */
.colorhunt-controls-help__button {
  background: rgba(255, 250, 226, .92);
  color: #3d5748;
  border-color: rgba(91, 134, 101, .42);
  box-shadow: 0 3px 0 rgba(74, 108, 81, .12);
  text-shadow: none;
}

.colorhunt-controls-help__panel {
  background: rgba(255, 253, 243, .97) !important;
  color: #344a3d !important;
  border-color: rgba(99, 143, 109, .40) !important;
  box-shadow: 0 10px 28px rgba(75, 99, 80, .22) !important;
}

.colorhunt-controls-help__panel strong {
  color: #315c46 !important;
}

.colorhunt-controls-help__panel small {
  color: #77887e !important;
}

.colorhunt-controls-help__panel div {
  color: #455b4d;
}

.colorhunt-chat {
  border-color: rgba(68, 101, 78, .18);
}

.colorhunt-chat__input::placeholder {
  color: rgba(255,255,255,.72);
}


/* v0.10.10.111 — main lobby visual polish */
.colorhunt-controls-help__button {
  min-width: 88px;
  border-radius: 10px;
  font-size: 11px;
}

.colorhunt-controls-help__panel {
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

.colorhunt-controls-help__panel div {
  margin: 7px 0;
  line-height: 1.55;
}


/* ============================================================
   v0.10.10.112 — approved bright pixel main lobby
   ============================================================ */

.colorhunt-main-lobby {
  --lobby-left: 0px;
  --lobby-top: 0px;
  --lobby-width: 900px;
  --lobby-height: 460px;

  position: fixed;
  z-index: 2000;
  left: var(--lobby-left);
  top: var(--lobby-top);
  width: var(--lobby-width);
  height: var(--lobby-height);
  box-sizing: border-box;
  pointer-events: auto;

  font-family:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    "Noto Sans KR",
    "Noto Sans JP",
    monospace;

  color: #274334;
}

.ch-lobby-shell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(270px, 1fr);
  grid-template-rows: minmax(0, 1fr) 54px;
  overflow: hidden;

  border: 2px solid rgba(97, 143, 101, .72);
  border-radius: 18px;
  background: rgba(255, 253, 244, .975);

  box-shadow:
    0 14px 0 rgba(70, 103, 73, .09),
    0 22px 52px rgba(52, 80, 59, .24);
}

.ch-lobby-rooms {
  min-width: 0;
  padding: 18px 18px 10px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dfe9d8;
}

.ch-lobby-section-head {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #2f7650, #286547);
  color: #fff;
}

.ch-lobby-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, 1.7vw, 21px);
  font-weight: 950;
}

.ch-lobby-door {
  font-size: 20px;
  opacity: .9;
}

.ch-lobby-refresh {
  min-width: 86px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #c9ddbd;
  border-radius: 9px;
  background: #fbfff7;
  color: #355d43;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;

  box-shadow: 0 2px 0 rgba(30, 75, 46, .14);
}

.ch-lobby-refresh:hover {
  transform: translateY(-1px);
  background: #eff9e9;
}

.ch-lobby-room-head {
  flex: 0 0 36px;
  display: grid;
  grid-template-columns:
    minmax(170px, 2.3fr)
    minmax(86px, 1fr)
    64px
    90px
    42px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #dbe7d5;
  color: #52695b;
  font-size: 10px;
  font-weight: 900;
}

.ch-lobby-room-list {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ch-lobby-room-row {
  flex: 1 1 0;
  min-height: 54px;
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(170px, 2.3fr)
    minmax(86px, 1fr)
    64px
    90px
    42px;
  align-items: center;
  gap: 0;

  border: 0;
  border-bottom: 1px solid #e0e9dc;
  background: transparent;
  color: #2d4938;
  padding: 5px 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ch-lobby-room-row:hover {
  background: #f2f9ed;
}

.ch-lobby-thumb {
  width: 46px;
  height: 46px;
  margin-right: 10px;
  float: left;
  overflow: hidden;
  border: 2px solid #8ab287;
  border-radius: 8px;
  background: #dff1d4;
  box-shadow: 0 2px 0 rgba(55, 91, 60, .14);
}

.ch-lobby-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.ch-lobby-room-name {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}

.ch-lobby-room-name .ch-lobby-thumb {
  grid-row: 1 / span 2;
}

.ch-lobby-room-name strong,
.ch-lobby-room-name small {
  grid-column: 2;
}

.ch-lobby-room-name strong {
  overflow: hidden;
  color: #253e30;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-lobby-room-name small {
  margin-top: 3px;
  color: #6a7e70;
  font-size: 9px;
}

.ch-lobby-room-map,
.ch-lobby-room-count {
  color: #425b4c;
  font-size: 10px;
  font-weight: 800;
}

.ch-lobby-room-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 62px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid #d6e3cf;
  border-radius: 999px;
  background: #fbfdf8;
  font-size: 9px;
  font-weight: 950;
  white-space: nowrap;
}

.ch-lobby-room-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ch-lobby-room-status.is-open {
  color: #449445;
}

.ch-lobby-room-status.is-open i {
  background: #53b74d;
}

.ch-lobby-room-status.is-playing {
  color: #d83b3b;
  border-color: #efc3c3;
  background: #fff6f6;
}

.ch-lobby-room-status.is-playing i {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .12);
}

.ch-lobby-room-row.is-disabled,
.ch-lobby-room-row:disabled {
  cursor: default;
  opacity: .78;
}

.ch-lobby-room-row.is-disabled:hover,
.ch-lobby-room-row:disabled:hover {
  background: transparent;
}

.ch-lobby-room-row.is-disabled .ch-lobby-room-play,
.ch-lobby-room-row:disabled .ch-lobby-room-play {
  color: #8f9b92;
  background: #f4f6f3;
  border-color: #d9e0d6;
}

.ch-lobby-room-play {
  justify-self: end;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe1c6;
  border-radius: 8px;
  background: #f4faef;
  color: #26764d;
  font-size: 14px;
}

.ch-lobby-room-tip {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  padding-left: 7px;
  color: #607667;
  font-size: 9px;
  font-weight: 800;
}

.ch-lobby-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: #75877c;
  font-size: 11px;
}

.ch-lobby-actions {
  min-width: 0;
  padding: 16px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-lobby-actions h2 {
  flex: 0 0 38px;
  margin: 0;
  display: grid;
  place-items: center;
  color: #2a543c;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 950;
}

.ch-lobby-profile-card {
  flex: 0 0 94px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  box-sizing: border-box;

  border: 1px solid #c9dfbf;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfff8, #f2f9ed);
}

.ch-lobby-avatar-frame {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;

  border: 3px solid #63a575;
  border-radius: 10px;
  background:
    linear-gradient(#cfeeff 52%, #9ed36d 52%);
  box-shadow:
    inset 0 0 0 3px #fff,
    0 3px 0 rgba(64, 103, 69, .12);
}

.ch-lobby-avatar-frame img {
  width: 50px;
  height: 75px;
  object-fit: contain;
  image-rendering: pixelated;
}

.ch-lobby-profile-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ch-lobby-profile-copy strong {
  color: #2e4938;
  font-size: 12px;
  font-weight: 950;
}

.ch-lobby-avatar-edit {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #a9cfa0;
  border-radius: 9px;
  background: #eef8e9;
  color: #385a43;
  font: inherit;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}

.ch-lobby-action {
  flex: 0 0 57px;
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;

  border: 0;
  border-radius: 12px;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;

  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 2px 0 rgba(54, 77, 58, .11);
}

.ch-lobby-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.025);
}

.ch-lobby-action--public {
  background: linear-gradient(180deg, #59cb74, #43b964);
}

.ch-lobby-action--private {
  background: linear-gradient(180deg, #63a9ee, #4d93de);
}

.ch-lobby-action--join {
  background: linear-gradient(180deg, #a476e3, #8e63d2);
}

.ch-lobby-action-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.94);
  color: #378c52;
  font-size: 22px;
  font-weight: 950;
}

.ch-lobby-action--private .ch-lobby-action-icon {
  color: #4a91da;
}

.ch-lobby-action--join .ch-lobby-action-icon {
  color: #8e63d2;
}

.ch-lobby-action span:last-child {
  min-width: 0;
}

.ch-lobby-action strong,
.ch-lobby-action small {
  display: block;
}

.ch-lobby-action strong {
  font-size: 13px;
  font-weight: 950;
}

.ch-lobby-action small {
  margin-top: 3px;
  color: rgba(255,255,255,.88);
  font-size: 8.5px;
  font-weight: 750;
}

.ch-lobby-guide {
  min-height: 54px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  box-sizing: border-box;

  border: 1px solid #cfe1c6;
  border-radius: 12px;
  background: #fbfdf7;
}

.ch-lobby-guide-mascot {
  font-size: 34px;
  text-align: center;
}

.ch-lobby-guide strong,
.ch-lobby-guide span {
  display: block;
}

.ch-lobby-guide strong {
  color: #2e4937;
  font-size: 10px;
}

.ch-lobby-guide span {
  margin-top: 4px;
  color: #5d7164;
  font-size: 8px;
  line-height: 1.35;
}

.ch-lobby-language {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border-top: 1px solid #e2e9dc;
  background: #fffdf7;
}

.ch-lobby-language button {
  min-width: 118px;
  height: 34px;
  border: 1px solid #d5e1ce;
  border-radius: 8px;
  background: #f9fbf5;
  color: #344c3d;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.ch-lobby-language button.is-active {
  border-color: #56ad68;
  background: #57bc68;
  color: #fff;
}

.ch-lobby-language button span {
  margin-right: 5px;
}

@media (max-width: 760px) {
  .ch-lobby-shell {
    grid-template-columns: 1.42fr .95fr;
    grid-template-rows: minmax(0, 1fr) 42px;
  }

  .ch-lobby-rooms {
    padding: 10px 10px 6px;
  }

  .ch-lobby-actions {
    padding: 9px 10px 6px;
    gap: 5px;
  }

  .ch-lobby-section-head {
    height: 38px;
    flex-basis: 38px;
    padding: 0 9px;
  }

  .ch-lobby-section-title {
    font-size: 12px;
  }

  .ch-lobby-refresh {
    min-width: 60px;
    height: 26px;
    padding: 0 6px;
    font-size: 8px;
  }

  .ch-lobby-room-head {
    display: none;
  }

  .ch-lobby-room-row {
    min-height: 42px;
    grid-template-columns: minmax(115px, 1.5fr) 50px 62px 30px;
    padding: 3px 6px;
  }

  .ch-lobby-room-map {
    display: none;
  }

  .ch-lobby-room-name {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ch-lobby-thumb {
    width: 34px;
    height: 34px;
    margin-right: 6px;
  }

  .ch-lobby-room-name strong {
    font-size: 8.5px;
  }

  .ch-lobby-room-name small,
  .ch-lobby-room-count,
  .ch-lobby-room-status {
    font-size: 7px;
  }

  .ch-lobby-room-status {
    min-width: 50px;
    height: 22px;
    padding: 0 5px;
  }

  .ch-lobby-room-play {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .ch-lobby-room-tip {
    display: none;
  }

  .ch-lobby-actions h2 {
    flex-basis: 25px;
    font-size: 11px;
  }

  .ch-lobby-profile-card {
    flex-basis: 68px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px;
    padding: 5px 7px;
  }

  .ch-lobby-avatar-frame {
    width: 54px;
    height: 54px;
  }

  .ch-lobby-avatar-frame img {
    width: 34px;
    height: 51px;
  }

  .ch-lobby-profile-copy {
    gap: 5px;
  }

  .ch-lobby-profile-copy strong {
    font-size: 8px;
  }

  .ch-lobby-avatar-edit {
    min-height: 26px;
    padding: 0 5px;
    font-size: 7px;
  }

  .ch-lobby-action {
    flex-basis: 40px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 7px;
    border-radius: 8px;
  }

  .ch-lobby-action-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 15px;
  }

  .ch-lobby-action strong {
    font-size: 8px;
  }

  .ch-lobby-action small {
    display: none;
  }

  .ch-lobby-guide {
    min-height: 38px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 6px;
  }

  .ch-lobby-guide-mascot {
    font-size: 22px;
  }

  .ch-lobby-guide strong {
    font-size: 7.5px;
  }

  .ch-lobby-guide span {
    display: none;
  }

  .ch-lobby-language {
    gap: 6px;
  }

  .ch-lobby-language button {
    min-width: 76px;
    height: 28px;
    font-size: 7.5px;
  }
}


/* v0.10.10.113 — main lobby sizing refinement */
.colorhunt-main-lobby .ch-lobby-shell {
  grid-template-rows: minmax(0, 1fr) 46px;
}
.colorhunt-main-lobby .ch-lobby-actions {
  padding-top: 10px;
  padding-bottom: 7px;
  gap: 5px;
}
.colorhunt-main-lobby .ch-lobby-actions h2 {
  flex-basis: 28px;
}
.colorhunt-main-lobby .ch-lobby-profile-card {
  flex-basis: 78px;
}
.colorhunt-main-lobby .ch-lobby-action {
  flex-basis: 49px;
}
.colorhunt-main-lobby .ch-lobby-guide {
  min-height: 40px;
}
.colorhunt-main-lobby .ch-lobby-language button {
  height: 30px;
}

/* Matching waiting-room UI */
.colorhunt-waiting-room {
  --waiting-left: 0px;
  --waiting-top: 0px;
  --waiting-width: 300px;
  --waiting-height: 460px;
  position: fixed;
  z-index: 2050;
  left: var(--waiting-left);
  top: var(--waiting-top);
  width: var(--waiting-width);
  height: var(--waiting-height);
  box-sizing: border-box;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Noto Sans KR", "Noto Sans JP", monospace;
  color: #2d4938;
}
.ch-waiting-shell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 2px solid rgba(93,143,101,.78);
  border-radius: 16px;
  background: rgba(255,253,244,.975);
  box-shadow: 0 10px 0 rgba(65,96,69,.10), 0 20px 42px rgba(46,71,51,.24);
}
.ch-waiting-header {
  flex: 0 0 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 9px;
  border-radius: 10px;
  background: linear-gradient(180deg,#327955,#286748);
  color: #fff;
}
.ch-waiting-kicker {
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.72);
  font-size: 7px;
  font-weight: 800;
}
.ch-waiting-header strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}
.ch-waiting-help {
  height: 29px;
  padding: 0 8px;
  border: 1px solid #c9ddbd;
  border-radius: 8px;
  background: #fbfff7;
  color: #355d43;
  font: inherit;
  font-size: 8px;
  font-weight: 900;
}
.ch-waiting-info {
  flex: 0 0 76px;
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 6px;
  padding: 9px;
  box-sizing: border-box;
  border: 1px solid #cbdcbe;
  border-radius: 10px;
  background: #fbfff8;
}
.ch-waiting-info small {
  display: block;
  color: #829086;
  font-size: 7px;
  font-weight: 800;
}
.ch-waiting-info strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #304c3a;
  font-size: 9px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-waiting-room-id { grid-column: 1 / -1; }
.ch-waiting-host {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: #db902f;
  font-size: 8px;
  font-weight: 950;
}
.ch-waiting-map {
  flex: 0 0 46px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  box-sizing: border-box;
  border: 1px solid #e2cd87;
  border-radius: 10px;
  background: #fff7d6;
}
.ch-waiting-map > button {
  height: 32px;
  border: 1px solid #b9d9aa;
  border-radius: 7px;
  background: #dff0d4;
  color: #47714f;
  font: inherit;
  font-weight: 950;
}
.ch-waiting-map > div { text-align: center; }
.ch-waiting-map small {
  display: block;
  color: #927b43;
  font-size: 7px;
  font-weight: 850;
}
.ch-waiting-map span {
  display: block;
  margin-top: 1px;
  color: #5a4c2d;
  font-size: 10px;
  font-weight: 950;
}
.ch-waiting-role {
  flex: 0 0 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.ch-waiting-role button {
  border: 1px solid #d6dfcf;
  border-radius: 7px;
  font: inherit;
  font-size: 8px;
  font-weight: 950;
}
.ch-waiting-role-hunter { background:#f5d5a5;color:#714f28; }
.ch-waiting-role-cancel { background:#e8f1ed;color:#52695b; }
.ch-waiting-timing {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}
.ch-waiting-timing section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 7px;
  box-sizing: border-box;
  border: 1px solid #dce8d7;
  border-radius: 9px;
  background: #f9fcf6;
}
.ch-waiting-timing-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#53695a;
  font-size:8px;
  font-weight:900;
}
.ch-waiting-timing-title b { color:#2f7650;font-size:9px; }
.ch-waiting-time-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  margin-top:5px;
}
.ch-waiting-time-options button {
  height:26px;
  border:1px solid #d8e4d2;
  border-radius:7px;
  background:#edf5e9;
  color:#64776b;
  font:inherit;
  font-size:8px;
  font-weight:850;
}
.ch-waiting-time-options button.is-active {
  border-color:#62ae72;
  background:#73c987;
  color:#fff;
}
.ch-waiting-time-options button:disabled { opacity:.55; }
.ch-waiting-start {
  flex:0 0 40px;
  border:0;
  border-radius:9px;
  background:linear-gradient(180deg,#62cf7d,#49b968);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:950;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 2px 0 rgba(52,89,60,.12);
}
.ch-waiting-start.is-disabled,
.ch-waiting-start:disabled { background:#bcc9c0;color:#f5f7f5; }
.ch-waiting-footer {
  flex:0 0 31px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.ch-waiting-footer button {
  border:0;
  border-radius:7px;
  font:inherit;
  font-size:7.5px;
  font-weight:900;
}
.ch-waiting-invite { background:#a9daf3;color:#36596d; }
.ch-waiting-leave { background:#f1b8b8;color:#6b4242; }

@media (pointer: coarse) {
  .ch-waiting-shell { gap:4px;padding:7px; }
  .ch-waiting-header { flex-basis:35px; }
  .ch-waiting-header strong { font-size:10px; }
  .ch-waiting-info { flex-basis:58px;padding:6px; }
  .ch-waiting-map { flex-basis:38px; }
  .ch-waiting-role { flex-basis:29px; }
  .ch-waiting-time-options button { height:22px; }
  .ch-waiting-start { flex-basis:33px;font-size:10px; }
  .ch-waiting-footer { flex-basis:27px; }
}


/* v0.10.10.114 — controls button final positioning/style */
.colorhunt-controls-help {
  pointer-events: none;
}

.colorhunt-controls-help__button {
  pointer-events: auto;
  min-width: 86px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid rgba(91, 134, 101, .42);
  background: rgba(255, 253, 240, .98);
  color: #355d43;
  box-shadow:
    0 2px 0 rgba(61, 94, 67, .12),
    0 5px 14px rgba(48, 72, 52, .12);
  text-shadow: none;
}

.colorhunt-controls-help--open {
  pointer-events: auto;
}

.colorhunt-controls-help__panel {
  right: 0;
  top: 39px;
}

/* Embedded help button was removed; prevent stale CSS from displaying one. */
.ch-waiting-help {
  display: none !important;
}


/* ============================================================
   v0.10.10.115 — final readability / alignment / modal polish
   ============================================================ */

/* Main lobby: readable, consistent column geometry */
.colorhunt-main-lobby {
  font-size: 12px;
}

.ch-lobby-shell {
  grid-template-columns:
    minmax(0, 1.66fr)
    minmax(285px, .94fr);
}

.ch-lobby-rooms {
  padding: 14px 14px 8px;
}

.ch-lobby-section-head {
  height: 54px;
  flex-basis: 54px;
}

.ch-lobby-section-title {
  font-size: clamp(17px, 1.8vw, 23px);
}

.ch-lobby-refresh {
  min-width: 94px;
  height: 34px;
  font-size: 11px;
}

.ch-lobby-room-head,
.ch-lobby-room-row {
  grid-template-columns:
    minmax(235px, 2.45fr)
    minmax(110px, 1.05fr)
    72px
    92px
    42px;
}

.ch-lobby-room-head {
  flex: 0 0 40px;
  padding: 0 12px;
  font-size: 10.5px;
}

.ch-lobby-room-list {
  flex: 1 1 auto;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #bfd6b8 transparent;
}

.ch-lobby-room-row {
  min-height: 0;
  height: 62px;
  display: grid;
  padding: 6px 12px;
  box-sizing: border-box;
}

.ch-lobby-room-name {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.ch-lobby-room-copy {
  min-width: 0;
}

.ch-lobby-thumb {
  width: 44px;
  height: 44px;
  margin: 0;
  float: none;
}

.ch-lobby-room-name strong,
.ch-lobby-room-name small {
  display: block;
}

.ch-lobby-room-name strong {
  font-size: 11.5px;
  line-height: 1.15;
}

.ch-lobby-room-name small {
  margin-top: 4px;
  font-size: 9px;
}

.ch-lobby-room-map,
.ch-lobby-room-count {
  font-size: 10.5px;
}

.ch-lobby-room-count {
  text-align: center;
}

.ch-lobby-room-status {
  min-width: 66px;
  height: 27px;
  padding: 0 8px;
  font-size: 9px;
}

.ch-lobby-room-play {
  width: 31px;
  height: 31px;
}

.ch-lobby-room-tip {
  flex-basis: 31px;
  font-size: 9px;
}

/* Right card text slightly larger without making controls overflow */
.ch-lobby-actions h2 {
  font-size: clamp(17px, 1.65vw, 21px);
}

.ch-lobby-profile-copy strong {
  font-size: 11px;
}

.ch-lobby-avatar-edit {
  font-size: 9px;
}

.ch-lobby-action strong {
  font-size: 12px;
}

.ch-lobby-action small {
  font-size: 8px;
  line-height: 1.25;
}

.ch-lobby-guide strong {
  font-size: 9.5px;
}

.ch-lobby-guide span {
  font-size: 7.5px;
}

/* Waiting room: information must be readable */
.ch-waiting-shell {
  gap: 7px;
  padding: 11px;
}

.ch-waiting-info {
  flex-basis: 88px;
  padding: 10px;
  gap: 8px;
}

.ch-waiting-info small {
  font-size: 8.5px;
}

.ch-waiting-info strong {
  margin-top: 4px;
  font-size: 11px;
}

.ch-waiting-host {
  font-size: 9px;
}

.ch-waiting-map small {
  font-size: 8px;
}

.ch-waiting-map span {
  font-size: 11px;
}

.ch-waiting-role button {
  font-size: 8.5px;
}

.ch-waiting-timing-title {
  font-size: 8.5px;
}

.ch-waiting-time-options button {
  font-size: 8.5px;
}

/* Controls button stays compact so it fits in the reserved strip/header */
.colorhunt-controls-help__button {
  min-width: 82px;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
}

/* Modal status injected by setModalBusy */
.colorhunt-menu-status {
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff7d7;
  color: #715e35;
  font-size: 11px;
  font-weight: 800;
}

/* Desktop/fold/tablet: let the lobby occupy almost the entire usable canvas */
@media (min-width: 761px) {
  .colorhunt-main-lobby .ch-lobby-actions {
    min-width: 285px;
  }
}

/* Touch layouts keep exact columns readable instead of crushing them */
@media (pointer: coarse) and (max-width: 900px) {
  .ch-lobby-room-head,
  .ch-lobby-room-row {
    grid-template-columns:
      minmax(145px, 1.7fr)
      minmax(70px, .8fr)
      48px
      58px
      28px;
  }

  .ch-lobby-room-row {
    height: 50px;
    padding: 4px 7px;
  }

  .ch-lobby-room-name {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
  }

  .ch-lobby-thumb {
    width: 34px;
    height: 34px;
  }

  .ch-lobby-room-name strong {
    font-size: 8.5px;
  }

  .ch-lobby-room-name small,
  .ch-lobby-room-map,
  .ch-lobby-room-count {
    font-size: 7px;
  }

  .ch-lobby-room-status {
    min-width: 50px;
    height: 22px;
    padding: 0 4px;
    font-size: 6.5px;
  }

  .ch-lobby-room-play {
    width: 25px;
    height: 25px;
  }
}


/* ============================================================
   v0.10.10.116 — emergency mobile/fold layout
   ============================================================ */
html.colorhunt-mobile .game-header,
html.colorhunt-mobile .eyebrow,
html.colorhunt-mobile .game-header h1 {
  display: none !important;
}

html.colorhunt-mobile body,
html.colorhunt-mobile #root,
html.colorhunt-mobile .app,
html.colorhunt-mobile .game-container {
  width: 100vw !important;
  height: var(--ch-viewport-height) !important;
  max-width: none !important;
  max-height: var(--ch-viewport-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.colorhunt-mobile .game-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0c1610 !important;
}

html.colorhunt-mobile canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: var(--ch-viewport-height) !important;
  object-fit: contain;
}

html.colorhunt-mobile .ch-waiting-shell {
  gap: 4px;
  padding: 6px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow:
    0 5px 0 rgba(65,96,69,.08),
    0 10px 22px rgba(46,71,51,.20);
}

html.colorhunt-mobile .ch-waiting-header {
  flex: 0 0 34px;
  min-height: 34px;
  padding: 0 7px;
  border-radius: 8px;
}

html.colorhunt-mobile .ch-waiting-kicker {
  margin-bottom: 0;
  font-size: 5.5px;
}

html.colorhunt-mobile .ch-waiting-header strong {
  font-size: 10px;
}

html.colorhunt-mobile .ch-waiting-info {
  flex: 0 0 64px;
  min-height: 0;
  padding: 6px 7px;
  gap: 4px 6px;
  border-radius: 8px;
}

html.colorhunt-mobile .ch-waiting-info small {
  font-size: 6.5px;
}

html.colorhunt-mobile .ch-waiting-info strong {
  margin-top: 2px;
  font-size: 8px;
}

html.colorhunt-mobile .ch-waiting-host {
  right: 6px;
  bottom: 5px;
  font-size: 6.5px;
}

html.colorhunt-mobile .ch-waiting-map {
  flex: 0 0 38px;
  min-height: 0;
  grid-template-columns: 30px 1fr 30px;
  padding: 3px 4px;
  gap: 4px;
  border-radius: 8px;
}

html.colorhunt-mobile .ch-waiting-map > button {
  height: 29px;
  padding: 0;
  border-radius: 6px;
  font-size: 11px;
}

html.colorhunt-mobile .ch-waiting-map small {
  font-size: 5.5px;
}

html.colorhunt-mobile .ch-waiting-map span {
  margin-top: 0;
  font-size: 8px;
}

html.colorhunt-mobile .ch-waiting-role {
  flex: 0 0 29px;
  min-height: 0;
  gap: 4px;
}

html.colorhunt-mobile .ch-waiting-role button {
  min-width: 0;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 6px;
  white-space: normal;
  line-height: 1.05;
}

html.colorhunt-mobile .ch-waiting-timing {
  gap: 4px;
}

html.colorhunt-mobile .ch-waiting-timing section {
  padding: 4px 5px;
  border-radius: 7px;
}

html.colorhunt-mobile .ch-waiting-timing-title {
  font-size: 6px;
}

html.colorhunt-mobile .ch-waiting-timing-title b {
  font-size: 6.5px;
}

html.colorhunt-mobile .ch-waiting-time-options {
  gap: 3px;
  margin-top: 3px;
}

html.colorhunt-mobile .ch-waiting-time-options button {
  height: 21px;
  min-width: 0;
  padding: 0;
  border-radius: 5px;
  font-size: 6px;
}

html.colorhunt-mobile .ch-waiting-start {
  flex: 0 0 32px;
  min-height: 32px;
  border-radius: 7px;
  font-size: 9px;
}

html.colorhunt-mobile .ch-waiting-footer {
  flex: 0 0 26px;
  min-height: 26px;
  gap: 4px;
}

html.colorhunt-mobile .ch-waiting-footer button {
  min-width: 0;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 5.7px;
}

html.colorhunt-mobile .colorhunt-controls-help__button {
  min-width: 62px;
  min-height: 24px;
  max-width: 82px;
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 7px;
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-controls-help__panel {
  right: 0 !important;
  top: 29px !important;
  width: max-content !important;
  max-width: min(76vw, 540px) !important;
  min-width: 0 !important;
  max-height: calc(var(--ch-viewport-height) - 50px);
  overflow-y: auto;
}

html.colorhunt-mobile .colorhunt-controls-help__panel div {
  font-size: 8px;
  white-space: nowrap;
}

html.colorhunt-mobile body.colorhunt-unfolded #colorhunt-orientation-overlay {
  display: none !important;
}

html.colorhunt-mobile body.colorhunt-unfolded .ch-waiting-shell {
  padding: 8px;
  gap: 6px;
}

html.colorhunt-mobile body.colorhunt-unfolded .ch-waiting-info strong {
  font-size: 9px;
}

html.colorhunt-mobile #colorhunt-fullscreen-chip {
  top: auto !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 9px;
  opacity: .82;
}


/* v0.10.10.117 — Fold-safe waiting room */
.colorhunt-waiting-room {
  max-width: calc(100vw - 12px);
  max-height: calc(var(--ch-viewport-height) - 12px);
}

.ch-waiting-header {
  position: relative;
  overflow: hidden;
}

.ch-waiting-header-copy {
  min-width: 0;
  padding-right: 82px;
}

.ch-waiting-help-inline {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 66px;
  max-width: 80px;
  height: 27px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid rgba(202,224,193,.95);
  border-radius: 8px;
  background: #fbfff7;
  color: #355d43;
  font: inherit;
  font-size: 7.5px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(38,78,48,.10);
}

.ch-waiting-help-inline:active {
  transform: translateY(-50%) translateY(1px);
}

html.colorhunt-mobile body.colorhunt-unfolded .colorhunt-waiting-room {
  max-width: min(42vw, 360px);
}

.ch-waiting-shell,
.ch-waiting-shell * {
  box-sizing: border-box;
}

.ch-waiting-info,
.ch-waiting-map,
.ch-waiting-role,
.ch-waiting-timing,
.ch-waiting-footer {
  min-width: 0;
  max-width: 100%;
}

.ch-waiting-info strong,
.ch-waiting-map span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   v0.10.10.118 — waiting-room BGM lives inside the header
   ============================================================ */

.ch-waiting-header-copy {
  min-width: 0;
  padding-right: 0 !important;
}

.ch-waiting-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.ch-waiting-bgm-inline,
.ch-waiting-help-inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;

  height: 27px;
  min-width: 0;
  max-width: none;
  padding: 0 7px;

  border: 1px solid rgba(202,224,193,.95);
  border-radius: 8px;
  background: #fbfff7;
  color: #355d43;

  font: inherit;
  font-size: 7.3px;
  font-weight: 950;
  line-height: 1;

  white-space: nowrap;
  box-shadow:
    0 2px 0 rgba(38,78,48,.10);
}

.ch-waiting-bgm-inline {
  color: #315c46;
}

.ch-waiting-help-inline:active,
.ch-waiting-bgm-inline:active {
  transform: translateY(1px) !important;
}

/* Compact enough for narrow folded phones. */
html.colorhunt-mobile .ch-waiting-header {
  gap: 4px;
}

html.colorhunt-mobile .ch-waiting-header-actions {
  gap: 3px;
}

html.colorhunt-mobile .ch-waiting-bgm-inline,
html.colorhunt-mobile .ch-waiting-help-inline {
  height: 23px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 5.8px;
}

html.colorhunt-mobile body.colorhunt-unfolded .ch-waiting-bgm-inline,
html.colorhunt-mobile body.colorhunt-unfolded .ch-waiting-help-inline {
  height: 25px;
  padding: 0 6px;
  font-size: 6.5px;
}


/* v0.10.10.121 — hunter volunteer status hotfix */
.ch-waiting-role-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.ch-waiting-role-hunter.is-active {
  border-color: #d99436;
  background: linear-gradient(180deg, #ffd98e, #f1b75b);
  color: #573b18;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 2px 0 rgba(101,70,30,.12);
}

.ch-waiting-role-hunter.is-pending {
  opacity: .78;
}

.ch-waiting-role-cancel.is-active {
  border-color: #c6d6c9;
  background: #f4f7f4;
  color: #52675a;
}

.ch-waiting-role button:disabled {
  cursor: default;
}

.ch-waiting-role-status {
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 2px 5px;
  box-sizing: border-box;
  border-radius: 6px;
  background: rgba(239,245,235,.9);
  color: #728078;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.ch-waiting-role-status.is-active {
  background: #fff3cf;
  color: #8a5a1f;
}

html.colorhunt-mobile .ch-waiting-role-wrap {
  flex: 0 0 42px;
}

html.colorhunt-mobile .ch-waiting-role {
  height: 27px;
  min-height: 27px;
}

html.colorhunt-mobile .ch-waiting-role-status {
  min-height: 12px;
  margin-top: 2px;
  padding: 1px 3px;
  font-size: 5.5px;
}


/* v0.10.10.122 — hunt chat bottom-left */
.colorhunt-chat {
  --chat-canvas-bottom: 8px;
}

.colorhunt-chat.colorhunt-chat--hunt:not(.colorhunt-chat--focused) {
  top: auto !important;
  bottom: var(--chat-canvas-bottom) !important;
  left: var(--chat-canvas-left) !important;
}

@media (pointer: coarse) {
  .colorhunt-chat.colorhunt-chat--hunt:not(.colorhunt-chat--focused) {
    width: min(var(--chat-panel-width), 34vw);
    max-height: 106px;
  }

  .colorhunt-chat.colorhunt-chat--hunt:not(.colorhunt-chat--focused)
  .colorhunt-chat__log {
    min-height: 24px;
    max-height: 54px;
  }
}


/* ============================================================
   v0.10.10.123 — mobile first-lobby viewport hotfix
   ============================================================ */

html.colorhunt-mobile .colorhunt-main-lobby {
  max-width: calc(100vw - 10px);
  max-height: calc(var(--ch-viewport-height) - 42px);
  overflow: hidden;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-shell {
  width: 100%;
  height: 100%;
  grid-template-columns:
    minmax(0, 1.58fr)
    minmax(230px, .92fr);
  grid-template-rows:
    minmax(0, 1fr)
    38px;

  border-width: 1px;
  border-radius: 12px;
  box-shadow:
    0 5px 0 rgba(70,103,73,.08),
    0 10px 24px rgba(52,80,59,.18);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-rooms {
  padding: 8px 8px 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-section-head {
  height: 40px;
  flex-basis: 40px;
  padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-section-title {
  gap: 5px;
  font-size: clamp(11px, 2.2vw, 16px);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-door {
  font-size: 14px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-refresh {
  min-width: 68px;
  height: 27px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 7px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-head,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-row {
  grid-template-columns:
    minmax(128px, 1.8fr)
    minmax(58px, .8fr)
    42px
    52px
    26px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-head {
  flex-basis: 29px;
  padding: 0 6px;
  font-size: 6.5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-row {
  height: 43px;
  padding: 3px 6px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-name {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-thumb {
  width: 30px;
  height: 30px;
  border-width: 1px;
  border-radius: 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-name strong {
  font-size: 7.5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-name small,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-map,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-count {
  font-size: 5.8px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-status {
  min-width: 42px;
  height: 19px;
  padding: 0 3px;
  gap: 3px;
  font-size: 5.3px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-status i {
  width: 5px;
  height: 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-play {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  font-size: 9px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-tip {
  flex-basis: 21px;
  padding-left: 4px;
  font-size: 5.8px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-actions {
  min-width: 0 !important;
  padding: 6px 7px 5px;
  gap: 4px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-actions h2 {
  flex-basis: 25px;
  font-size: clamp(10px, 2vw, 14px);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-card {
  flex-basis: 61px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 7px;
  border-radius: 9px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-avatar-frame {
  width: 48px;
  height: 48px;
  border-width: 2px;
  border-radius: 7px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-avatar-frame img {
  width: 34px;
  height: 46px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-copy {
  gap: 4px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-copy strong {
  font-size: 7.5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-avatar-edit {
  min-height: 27px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 6.2px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action {
  flex-basis: 39px;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 15px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action strong {
  font-size: 7.5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action small {
  margin-top: 1px;
  font-size: 5.3px;
  line-height: 1.1;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide {
  min-height: 31px;
  padding: 4px 6px;
  border-radius: 7px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide strong {
  font-size: 6.5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
  font-size: 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-language {
  gap: 3px;
  padding: 3px 5px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-language button {
  min-width: 0;
  height: 26px;
  padding: 0 3px;
  font-size: 5.8px;
}

/*
 * Very narrow portrait Fold/tablet/phone:
 * keep the same two-panel concept but give actions enough room.
 */
@media (pointer: coarse) and (max-width: 700px) {
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-shell {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(205px, 1fr);
  }

  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action small,
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
    display: none;
  }
}


/* ============================================================
   v0.10.10.125 — mobile readability pass
   Bigger text WITHOUT breaking frames / translations.
   ============================================================ */

html.colorhunt-mobile {
  --ch-mobile-font-xs: clamp(7px, 1.35vw, 9px);
  --ch-mobile-font-sm: clamp(8px, 1.55vw, 10px);
  --ch-mobile-font-md: clamp(9px, 1.8vw, 12px);
  --ch-mobile-font-lg: clamp(11px, 2.15vw, 15px);
  --ch-mobile-font-xl: clamp(13px, 2.65vw, 18px);
}

/* ---------- Main lobby ---------- */

html.colorhunt-mobile .colorhunt-main-lobby {
  font-size: var(--ch-mobile-font-sm);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-section-title {
  font-size: var(--ch-mobile-font-xl);
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-refresh {
  min-width: 76px;
  height: 30px;
  padding: 0 8px;
  font-size: var(--ch-mobile-font-sm);
  white-space: nowrap;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-head {
  min-height: 31px;
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.1;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-row {
  min-height: 48px;
  height: 48px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-name strong {
  font-size: var(--ch-mobile-font-md);
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-name small,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-map,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-count {
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.08;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-status {
  min-width: 48px;
  height: 22px;
  padding: 0 5px;
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-room-tip {
  min-height: 24px;
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-actions h2 {
  min-height: 28px;
  font-size: var(--ch-mobile-font-lg);
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-copy strong {
  font-size: var(--ch-mobile-font-md);
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-avatar-edit {
  min-height: 30px;
  padding: 0 7px;
  font-size: var(--ch-mobile-font-sm);
  line-height: 1.05;
  white-space: normal;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action {
  min-height: 44px;
  padding: 5px 7px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action strong {
  font-size: var(--ch-mobile-font-md);
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action small {
  margin-top: 2px;
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide {
  min-height: 36px;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide strong {
  font-size: var(--ch-mobile-font-sm);
  line-height: 1.05;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-language button {
  min-height: 28px;
  padding: 0 5px;
  font-size: var(--ch-mobile-font-xs);
  white-space: nowrap;
}

/* Very narrow phone: hide only secondary descriptions, never primary labels. */
@media (pointer: coarse) and (max-width: 560px) {
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action small,
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
    display: none;
  }

  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action strong,
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-copy strong {
    font-size: var(--ch-mobile-font-lg);
  }
}

/* ---------- Waiting room ---------- */

html.colorhunt-mobile .ch-waiting-kicker {
  font-size: var(--ch-mobile-font-xs);
  line-height: 1;
}

html.colorhunt-mobile .ch-waiting-header strong {
  font-size: var(--ch-mobile-font-lg);
  line-height: 1.05;
}

html.colorhunt-mobile .ch-waiting-bgm-inline,
html.colorhunt-mobile .ch-waiting-help-inline {
  min-height: 25px;
  padding: 0 6px;
  font-size: var(--ch-mobile-font-xs);
  white-space: nowrap;
}

html.colorhunt-mobile .ch-waiting-info small {
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .ch-waiting-info strong {
  font-size: var(--ch-mobile-font-md);
  line-height: 1.05;
}

html.colorhunt-mobile .ch-waiting-host {
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .ch-waiting-map small {
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .ch-waiting-map span {
  font-size: var(--ch-mobile-font-md);
}

html.colorhunt-mobile .ch-waiting-role button {
  min-height: 29px;
  padding: 0 5px;
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.05;
  white-space: normal;
}

html.colorhunt-mobile .ch-waiting-role-status {
  min-height: 14px;
  padding: 2px 4px;
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.05;
}

html.colorhunt-mobile .ch-waiting-timing-title,
html.colorhunt-mobile .ch-waiting-timing-title b {
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .ch-waiting-time-options button {
  min-height: 23px;
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .ch-waiting-start {
  min-height: 35px;
  font-size: var(--ch-mobile-font-md);
}

html.colorhunt-mobile .ch-waiting-footer {
  min-height: 29px;
}

html.colorhunt-mobile .ch-waiting-footer button {
  min-height: 28px;
  padding: 0 5px;
  font-size: var(--ch-mobile-font-xs);
  line-height: 1.05;
  white-space: normal;
}

/* ---------- Chat ---------- */

html.colorhunt-mobile .colorhunt-chat {
  font-size: var(--ch-mobile-font-sm);
}

html.colorhunt-mobile .colorhunt-chat__message,
html.colorhunt-mobile .colorhunt-chat__notice {
  font-size: var(--ch-mobile-font-sm);
  line-height: 1.25;
}

html.colorhunt-mobile .colorhunt-chat__input {
  min-height: 30px;
  padding: 5px 7px;
  font-size: max(16px, var(--ch-mobile-font-md));
  line-height: 1.1;
}

html.colorhunt-mobile .colorhunt-chat__send {
  min-width: 40px;
  min-height: 30px;
  padding: 0 7px;
  font-size: var(--ch-mobile-font-sm);
}

/* ---------- Controls help ---------- */

html.colorhunt-mobile .colorhunt-controls-help__button {
  min-width: 68px;
  min-height: 26px;
  padding: 4px 7px;
  font-size: var(--ch-mobile-font-xs);
}

html.colorhunt-mobile .colorhunt-controls-help__panel {
  max-width: min(82vw, 560px) !important;
  padding: 10px !important;
}

html.colorhunt-mobile .colorhunt-controls-help__panel div {
  font-size: var(--ch-mobile-font-sm);
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* ---------- Menu / create-room / join-room modals ---------- */

html.colorhunt-mobile .colorhunt-menu-status {
  font-size: var(--ch-mobile-font-sm);
  line-height: 1.25;
}

/* Inline-styled modal card children: target semantic elements safely. */
html.colorhunt-mobile [role="dialog"] label,
html.colorhunt-mobile [role="dialog"] input,
html.colorhunt-mobile [role="dialog"] button {
  font-size: max(12px, var(--ch-mobile-font-md)) !important;
}

html.colorhunt-mobile [role="dialog"] input,
html.colorhunt-mobile [role="dialog"] button {
  min-height: 38px;
}

/* ---------- Avatar editor ---------- */

html.colorhunt-mobile .colorhunt-avatar-editor,
html.colorhunt-mobile .colorhunt-avatar-editor * {
  text-rendering: optimizeLegibility;
}

/* ---------- Fold/tablet: allow a little more type ---------- */

html.colorhunt-mobile body.colorhunt-unfolded {
  --ch-mobile-font-xs: clamp(8px, 1.2vw, 10px);
  --ch-mobile-font-sm: clamp(9px, 1.4vw, 11px);
  --ch-mobile-font-md: clamp(10px, 1.65vw, 13px);
  --ch-mobile-font-lg: clamp(12px, 1.95vw, 16px);
  --ch-mobile-font-xl: clamp(14px, 2.3vw, 19px);
}


/* ============================================================
   v0.10.10.126 — desktop chat phase placement
   ============================================================ */

/*
 * PC waiting room:
 * Keep chat in the canvas bottom-left. Unlike the old position, this does
 * not compete with room/map UI near the top.
 */
@media (pointer: fine) {
  .colorhunt-chat.colorhunt-chat--desktop-lobby:not(.colorhunt-chat--focused) {
    top: auto !important;
    left: var(--chat-canvas-left) !important;
    bottom: var(--chat-canvas-bottom) !important;
    transform: none !important;
    width: min(var(--chat-panel-width), 320px);
    max-height: min(var(--chat-panel-max-height), 176px);
  }

  /*
   * PC Paint:
   * COLOR PALETTE occupies the lower-left area (roughly the bottom 110
   * logical pixels), so chat moves to the upper-left while painting.
   */
  .colorhunt-chat.colorhunt-chat--desktop-paint:not(.colorhunt-chat--focused) {
    top: var(--chat-canvas-top) !important;
    left: var(--chat-canvas-left) !important;
    bottom: auto !important;
    transform: none !important;
    width: min(var(--chat-panel-width), 300px);
    max-height: min(var(--chat-panel-max-height), 148px);
  }

  /*
   * Hunt already has no paint palette; both Hunter and Hider return to the
   * requested bottom-left position.
   */
  .colorhunt-chat.colorhunt-chat--hunt:not(.colorhunt-chat--focused) {
    top: auto !important;
    left: var(--chat-canvas-left) !important;
    bottom: var(--chat-canvas-bottom) !important;
  }
}


/* ============================================================
   v0.10.10.127 — emergency disconnect / BGM / touch-paint hardening
   ============================================================ */

/* Main-lobby top-right controls get a little breathing room. */
.colorhunt-main-lobby ~ .colorhunt-controls-help {
  max-width: 150px;
}

/* Waiting-room BGM/help must stay as one compact action group. */
.ch-waiting-header-actions {
  flex-wrap: nowrap !important;
  overflow: hidden;
}

.ch-waiting-bgm-inline,
.ch-waiting-help-inline {
  flex: 0 1 auto;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   v0.10.10.128 — desktop lobby / waiting-room readability
   PC ONLY: enlarge type together with controls so translations fit.
   ============================================================ */

@media (pointer: fine) and (min-width: 800px) {
  /* ---------- Public main lobby ---------- */

  .colorhunt-main-lobby .ch-lobby-section-title {
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.1;
  }

  .colorhunt-main-lobby .ch-lobby-refresh {
    min-width: 96px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .colorhunt-main-lobby .ch-lobby-room-head {
    min-height: 36px;
    font-size: 11px;
    line-height: 1.15;
  }

  .colorhunt-main-lobby .ch-lobby-room-row {
    min-height: 58px;
  }

  .colorhunt-main-lobby .ch-lobby-room-name strong {
    font-size: 14px;
    line-height: 1.15;
  }

  .colorhunt-main-lobby .ch-lobby-room-name small,
  .colorhunt-main-lobby .ch-lobby-room-map,
  .colorhunt-main-lobby .ch-lobby-room-count {
    font-size: 11px;
    line-height: 1.15;
  }

  .colorhunt-main-lobby .ch-lobby-room-status {
    min-width: 62px;
    min-height: 26px;
    padding: 0 7px;
    font-size: 10px;
    white-space: nowrap;
  }

  .colorhunt-main-lobby .ch-lobby-room-tip {
    min-height: 28px;
    font-size: 10px;
    line-height: 1.2;
  }

  .colorhunt-main-lobby .ch-lobby-actions h2 {
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.1;
  }

  .colorhunt-main-lobby .ch-lobby-profile-copy strong {
    font-size: 13px;
  }

  .colorhunt-main-lobby .ch-lobby-avatar-edit {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .colorhunt-main-lobby .ch-lobby-action {
    min-height: 54px;
    padding: 7px 10px;
  }

  .colorhunt-main-lobby .ch-lobby-action strong {
    font-size: 13px;
    line-height: 1.1;
  }

  .colorhunt-main-lobby .ch-lobby-action small {
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .colorhunt-main-lobby .ch-lobby-guide strong {
    font-size: 12px;
  }

  .colorhunt-main-lobby .ch-lobby-guide span {
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .colorhunt-main-lobby .ch-lobby-language button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* ---------- Waiting room ---------- */

  .ch-waiting-kicker {
    font-size: 11px;
    line-height: 1.1;
  }

  .ch-waiting-header strong {
    font-size: clamp(18px, 1.3vw, 23px);
    line-height: 1.1;
  }

  .ch-waiting-bgm-inline,
  .ch-waiting-help-inline {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .ch-waiting-info small,
  .ch-waiting-map small {
    font-size: 11px;
    line-height: 1.15;
  }

  .ch-waiting-info strong,
  .ch-waiting-map span {
    font-size: 14px;
    line-height: 1.15;
  }

  .ch-waiting-host {
    font-size: 11px;
    line-height: 1.15;
  }

  .ch-waiting-role button {
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  .ch-waiting-role-status {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 10px;
    line-height: 1.1;
  }

  .ch-waiting-timing-title,
  .ch-waiting-timing-title b {
    font-size: 11px;
    line-height: 1.15;
  }

  .ch-waiting-time-options button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .ch-waiting-start {
    min-height: 43px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.1;
  }

  .ch-waiting-footer {
    min-height: 38px;
  }

  .ch-waiting-footer button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }
}


/* ============================================================
   v0.10.10.129 — desktop waiting-room typography rebalance
   Keep text readable, but GUARANTEE every section fits the card.
   ============================================================ */

@media (pointer: fine) and (min-width: 800px) {
  .ch-waiting-shell {
    gap: 6px !important;
    padding: 9px !important;
  }

  .ch-waiting-header {
    flex: 0 0 46px !important;
    min-height: 46px !important;
    padding: 0 9px !important;
  }

  .ch-waiting-kicker {
    font-size: 8px !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }

  .ch-waiting-header strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  .ch-waiting-header-actions {
    gap: 4px !important;
  }

  .ch-waiting-bgm-inline,
  .ch-waiting-help-inline {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    border-radius: 7px !important;
  }

  .ch-waiting-info {
    flex: 0 0 86px !important;
    min-height: 86px !important;
    padding: 8px 9px !important;
    gap: 5px 8px !important;
  }

  .ch-waiting-info small {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .ch-waiting-info strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .ch-waiting-host {
    font-size: 9px !important;
  }

  .ch-waiting-map {
    flex: 0 0 52px !important;
    min-height: 52px !important;
    grid-template-columns: 38px 1fr 38px !important;
    padding: 5px 7px !important;
    gap: 5px !important;
  }

  .ch-waiting-map > button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 15px !important;
  }

  .ch-waiting-map small {
    font-size: 8px !important;
  }

  .ch-waiting-map span {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .ch-waiting-role-wrap {
    flex: 0 0 66px !important;
    min-height: 66px !important;
  }

  .ch-waiting-role {
    height: 38px !important;
    min-height: 38px !important;
    gap: 5px !important;
  }

  .ch-waiting-role button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .ch-waiting-role-status {
    min-height: 20px !important;
    height: 20px !important;
    margin-top: 4px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .ch-waiting-timing {
    gap: 6px !important;
  }

  .ch-waiting-timing section {
    padding: 6px 7px !important;
    min-height: 60px !important;
    border-radius: 8px !important;
  }

  .ch-waiting-timing-title,
  .ch-waiting-timing-title b {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .ch-waiting-time-options {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  .ch-waiting-time-options button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .ch-waiting-start {
    flex: 0 0 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .ch-waiting-footer {
    flex: 0 0 38px !important;
    min-height: 38px !important;
    height: 38px !important;
    gap: 6px !important;
  }

  .ch-waiting-footer button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  /*
   * Safety: no child may grow the card beyond the calculated height.
   */
  .ch-waiting-shell,
  .ch-waiting-header,
  .ch-waiting-info,
  .ch-waiting-map,
  .ch-waiting-role-wrap,
  .ch-waiting-timing,
  .ch-waiting-start,
  .ch-waiting-footer {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ch-waiting-info,
  .ch-waiting-map,
  .ch-waiting-role-wrap,
  .ch-waiting-timing,
  .ch-waiting-footer {
    overflow: hidden !important;
  }

  .ch-waiting-role button,
  .ch-waiting-footer button,
  .ch-waiting-bgm-inline,
  .ch-waiting-help-inline {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }
}


/* ============================================================
   v0.10.10.131 — Practice Ground
   ============================================================ */
.colorhunt-practice-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(47, 72, 53, .36);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans KR", "Noto Sans JP", sans-serif;
}

.colorhunt-practice-card {
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid #75a66e;
  border-radius: 16px;
  background: #fff9e8;
  color: #35523d;
  box-shadow: 0 18px 60px rgba(25, 49, 31, .32);
}

.colorhunt-practice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 3px 10px;
}

.colorhunt-practice-head small {
  display: block;
  color: #7d907a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.colorhunt-practice-head strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.05;
}

.colorhunt-practice-head button {
  width: 34px;
  height: 34px;
  border: 1px solid #cbdac5;
  border-radius: 9px;
  background: #f4f7e9;
  color: #55705b;
  font-weight: 900;
}

.colorhunt-practice-map {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #d5dfc6;
  border-radius: 10px;
  background: #f8f4dc;
}

.colorhunt-practice-map label {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
}

.colorhunt-practice-map select {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #9db79a;
  border-radius: 8px;
  background: #fff;
  color: #35523d;
  font-weight: 800;
}

.colorhunt-practice-mode {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #cddcc5;
  border-radius: 12px;
  background: #fffdf4;
}

.colorhunt-practice-mode--hunter {
  border-color: #e1c17a;
  background: #fff8df;
}

.colorhunt-practice-mode--hider {
  border-color: #aad0ae;
  background: #eff8ea;
}

.colorhunt-practice-mode-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  font-size: 24px;
}

.colorhunt-practice-mode-copy > strong {
  font-size: 15px;
}

.colorhunt-practice-mode-copy > p {
  margin: 3px 0 8px;
  color: #637164;
  font-size: 11px;
  line-height: 1.35;
}

.colorhunt-practice-control {
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.colorhunt-practice-control label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
}

.colorhunt-practice-control input {
  width: 100%;
  margin: 5px 0 0;
  accent-color: #67966c;
}

.colorhunt-practice-control small {
  display: block;
  margin-top: 2px;
  color: #7a8176;
  font-size: 9px;
}

.colorhunt-practice-start {
  width: 100%;
  min-height: 38px;
  margin-top: 6px;
  border: 0;
  border-radius: 9px;
  background: #d8963f;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.colorhunt-practice-start--hider {
  background: #5f9a69;
}

.ch-lobby-action--practice {
  border-color: #d6b66b !important;
  background: linear-gradient(180deg, #fff9df, #f8edc2) !important;
}

@media (pointer: coarse) {
  .colorhunt-practice-card {
    width: min(680px, calc(100vw - 14px));
    padding: 8px;
  }

  .colorhunt-practice-head {
    padding-bottom: 6px;
  }

  .colorhunt-practice-head strong {
    font-size: 15px;
  }

  .colorhunt-practice-map {
    padding: 6px 8px;
  }

  .colorhunt-practice-map label {
    grid-template-columns: 100px 1fr;
    font-size: 9px;
  }

  .colorhunt-practice-map select {
    min-height: 31px;
    font-size: 9px;
  }

  .colorhunt-practice-mode {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .colorhunt-practice-mode-icon {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  .colorhunt-practice-mode-copy > strong {
    font-size: 11px;
  }

  .colorhunt-practice-mode-copy > p {
    margin-bottom: 5px;
    font-size: 8px;
  }

  .colorhunt-practice-control {
    margin: 4px 0;
    padding: 4px 6px;
  }

  .colorhunt-practice-control label {
    font-size: 8px;
  }

  .colorhunt-practice-control small {
    font-size: 7px;
  }

  .colorhunt-practice-start {
    min-height: 32px;
    font-size: 9px;
  }
}


/* ============================================================
   v0.10.10.132 — Practice Ground CTA emphasis
   ============================================================ */

.ch-lobby-action--practice {
  position: relative;
  overflow: hidden;
  border: 2px solid #5f9a69 !important;
  background:
    linear-gradient(180deg, #dff5d8 0%, #c8e9c5 100%) !important;
  color: #244b31 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 3px 0 rgba(70,118,75,.18),
    0 8px 18px rgba(67,113,72,.16) !important;
}

.ch-lobby-action--practice::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  pointer-events: none;
}

.ch-lobby-action--practice .ch-lobby-action-icon {
  background: #fff7c9 !important;
  color: #3f6f49 !important;
  box-shadow:
    inset 0 0 0 1px rgba(118,151,86,.20);
}

.ch-lobby-practice-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge title"
    "desc desc";
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;
}

.ch-lobby-practice-badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #3f7f4d;
  color: #ffffff;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.ch-lobby-action--practice strong {
  grid-area: title;
  color: #23472e !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.ch-lobby-action--practice small {
  grid-area: desc;
  color: #49614d !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.ch-lobby-action--practice:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

@media (pointer: coarse) {
  .ch-lobby-action--practice {
    border-width: 2px !important;
  }

  .ch-lobby-practice-copy {
    column-gap: 4px;
    row-gap: 1px;
  }

  .ch-lobby-practice-badge {
    min-height: 15px;
    padding: 0 5px;
    font-size: 6.5px;
  }

  .ch-lobby-action--practice strong {
    font-size: 10px !important;
  }

  .ch-lobby-action--practice small {
    font-size: 7px !important;
  }
}


/* ============================================================
   v0.10.10.133 — real camouflage + reliable practice sliders
   ============================================================ */

.colorhunt-practice-control input[type="range"] {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  margin: 3px 0 1px;
  padding: 0;
  cursor: pointer;
  touch-action: pan-x;
}

@media (pointer: coarse) {
  .colorhunt-practice-control input[type="range"] {
    height: 38px;
    margin: 1px 0;
    touch-action: none;
  }
}


/* ============================================================
   v0.10.10.134 — Practice Ground production-UI unification
   ============================================================ */

.colorhunt-practice-card,
.colorhunt-practice-card button,
.colorhunt-practice-card select,
.colorhunt-practice-card input {
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
}

.colorhunt-practice-card {
  border-color: #6f9b73;
  background:
    linear-gradient(180deg, #fffdf0 0%, #f4f2dc 100%);
}

.colorhunt-practice-mode {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62);
}

.colorhunt-practice-start,
.colorhunt-practice-head button,
.colorhunt-practice-map select {
  border: 1px solid rgba(70,104,73,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 0 rgba(65,91,65,.12);
}

.colorhunt-practice-start {
  letter-spacing: .01em;
}

.colorhunt-practice-start:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(34,60,40,.12);
}


/* ============================================================
   v0.10.10.136 — Practice Ground production-rules polish
   ============================================================ */

.colorhunt-practice-time {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #cfdcc8;
  border-radius: 10px;
  background: #f7f6e7;
}

.colorhunt-practice-time-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #45624b;
  font-size: 11px;
  font-weight: 900;
}

.colorhunt-practice-time-title b {
  min-width: 46px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #dfeede;
  color: #31553a;
  text-align: center;
}

.colorhunt-practice-time-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 6px;
}

.colorhunt-practice-time-buttons button {
  min-height: 32px;
  border: 1px solid #aebfa7;
  border-radius: 7px;
  background: #fffdf3;
  color: #536a58;
  font-size: 10px;
  font-weight: 900;
}

.colorhunt-practice-time-buttons button.is-active {
  border-color: #579267;
  background: #68a875;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 2px 0 rgba(49,88,56,.15);
}

.colorhunt-practice-ranking {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed #c8d5c2;
}

.colorhunt-practice-ranking > strong {
  color: #49604d;
  font-size: 9px;
}

.colorhunt-practice-ranking > span {
  color: #879087;
  font-size: 8px;
}

.colorhunt-practice-ranking > div {
  display: grid;
  grid-template-columns: 20px 72px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,.65);
  font-size: 8px;
}

.colorhunt-practice-ranking > div b {
  color: #4c7d56;
}

.colorhunt-practice-ranking > div span {
  font-weight: 900;
  color: #344f3a;
}

.colorhunt-practice-ranking > div small {
  color: #7b887c;
  text-align: right;
}

.colorhunt-practice-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(33,55,39,.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.colorhunt-practice-result-card {
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px;
  border: 2px solid #73a47a;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fffdf0 0%, #eff4df 100%);
  color: #35523d;
  text-align: center;
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
  box-shadow:
    0 8px 0 rgba(50,82,55,.12),
    0 24px 70px rgba(25,49,31,.34);
}

.colorhunt-practice-result-card.is-timeup {
  border-color: #c9a86b;
  background:
    linear-gradient(180deg, #fff9e8 0%, #f1ead6 100%);
}

.colorhunt-practice-result-kicker {
  color: #718073;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}

.colorhunt-practice-result-icon {
  margin: 7px 0 2px;
  font-size: 34px;
}

.colorhunt-practice-result-card h2 {
  margin: 3px 0;
  color: #31553a;
  font-size: 21px;
  line-height: 1.1;
}

.colorhunt-practice-result-card p {
  margin: 5px 0 10px;
  color: #617064;
  font-size: 10px;
  line-height: 1.4;
}

.colorhunt-practice-result-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}

.colorhunt-practice-result-meta span {
  padding: 6px 4px;
  border: 1px solid #cad8c5;
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #47634d;
  font-size: 9px;
  font-weight: 900;
}

.colorhunt-practice-result-ranking {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #cad8c5;
  border-radius: 10px;
  background: rgba(255,255,255,.62);
  text-align: left;
}

.colorhunt-practice-result-ranking > strong {
  margin-bottom: 2px;
  color: #46614c;
  font-size: 10px;
}

.colorhunt-practice-result-rank {
  display: grid;
  grid-template-columns: 22px 76px 1fr;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 5px;
  border-radius: 6px;
  background: #f5f6e8;
  font-size: 9px;
}

.colorhunt-practice-result-rank b {
  color: #4d855a;
}

.colorhunt-practice-result-rank span {
  font-weight: 950;
}

.colorhunt-practice-result-rank small {
  color: #79847a;
  text-align: right;
}

.colorhunt-practice-result-empty {
  padding: 8px;
  color: #8b938b;
  font-size: 9px;
  text-align: center;
}

.colorhunt-practice-result-card > button {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid #4f855b;
  border-radius: 9px;
  background: #63a16e;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 3px 0 rgba(50,89,58,.15);
}

@media (pointer: coarse) {
  .colorhunt-practice-time {
    padding: 5px 7px;
  }

  .colorhunt-practice-time-title {
    font-size: 8px;
  }

  .colorhunt-practice-time-buttons button {
    min-height: 29px;
    font-size: 8px;
  }

  .colorhunt-practice-ranking > div {
    grid-template-columns: 16px 58px minmax(0,1fr);
    font-size: 7px;
  }

  .colorhunt-practice-result-card {
    padding: 11px;
  }

  .colorhunt-practice-result-card h2 {
    font-size: 16px;
  }

  .colorhunt-practice-result-icon {
    font-size: 28px;
  }

  .colorhunt-practice-result-card p,
  .colorhunt-practice-result-meta span,
  .colorhunt-practice-result-rank {
    font-size: 8px;
  }
}


/* ============================================================
   v0.10.10.138 — Practice difficulty / reliable exit / paint fixes
   ============================================================ */

.colorhunt-practice-difficulty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 17px;
}

.colorhunt-practice-difficulty-row > small {
  min-width: 0;
}

.colorhunt-practice-difficulty-row > b {
  display: none;
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #d94343;
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(116,30,30,.16);
}

.colorhunt-practice-difficulty-row > b.is-visible {
  display: inline-flex;
}

.colorhunt-practice-control input[type="range"].is-extreme {
  accent-color: #d83d3d !important;
}

.colorhunt-practice-control b.is-extreme {
  color: #c52e2e !important;
}

.colorhunt-practice-card.practice-is-extreme
  .colorhunt-practice-mode--hunter {
  border-color: #d96b64;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62),
    0 0 0 2px rgba(217,74,66,.06);
}

.colorhunt-practice-exit-button {
  position: fixed;
  top: var(--practice-exit-top, 12px);
  right: var(--practice-exit-right, 12px);
  z-index: 2147483500;
  min-width: 108px;
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid #6f9b73;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #fffdf0 0%, #edf3dc 100%);
  color: #35523d;
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 3px 0 rgba(58,91,62,.14),
    0 7px 18px rgba(34,58,39,.16);
  cursor: pointer;
  touch-action: manipulation;
}

.colorhunt-practice-exit-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.colorhunt-practice-exit-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(41,68,46,.12);
}

@media (pointer: coarse) {
  .colorhunt-practice-exit-button {
    min-width: 92px;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 9px;
  }

  .colorhunt-practice-difficulty-row > b {
    padding: 3px 5px;
    font-size: 6.5px;
  }
}


/* ============================================================
   v0.10.10.140 — Hunter numeric timer + Hider record/share
   ============================================================ */

.colorhunt-hider-record-bar {
  position: fixed;
  top: var(--hider-record-top, 12px);
  left: var(--hider-record-left, 50%);
  z-index: 2147483490;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(var(--hider-record-width, 330px), calc(100vw - 230px));
  min-width: 280px;
  min-height: 50px;
  padding: 6px 7px 6px 14px;
  box-sizing: border-box;
  transform: translateX(-50%);
  border: 2px solid #6f9b73;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,253,240,.98), rgba(232,242,218,.98));
  color: #35523d;
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 4px 16px rgba(38,64,43,.20);
  pointer-events: auto;
}

.colorhunt-hider-record-time {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.colorhunt-hider-record-time small {
  display: inline;
  color: #496a50;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.colorhunt-hider-record-time span {
  display: inline;
  margin: 0;
  color: #21492d;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.colorhunt-hider-record-finish {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid #44784f;
  border-radius: 10px;
  background: #5f9f69;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 3px 0 rgba(50,89,58,.18);
}

.colorhunt-hider-record-finish:active {
  transform: translateY(1px);
}

.colorhunt-hider-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483642;
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(33,55,39,.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.colorhunt-hider-share-card {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 2px solid #6f9b73;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fffdf0 0%, #e9f2dc 100%);
  color: #35523d;
  text-align: center;
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
  box-shadow:
    0 8px 0 rgba(50,82,55,.12),
    0 24px 70px rgba(25,49,31,.34);
}

.colorhunt-hider-share-kicker {
  color: #748176;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

.colorhunt-hider-share-card h2 {
  margin: 4px 0;
  color: #31553a;
  font-size: 20px;
}

.colorhunt-hider-share-card p {
  margin: 4px auto 10px;
  max-width: 380px;
  color: #69766b;
  font-size: 9px;
  line-height: 1.35;
}

.colorhunt-hider-share-card img {
  display: block;
  width: min(100%, 310px);
  margin: 0 auto;
  border: 2px solid #b9ccb5;
  border-radius: 10px;
  background: #f5f1dc;
}

.colorhunt-hider-share-meta {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.colorhunt-hider-share-meta span {
  padding: 5px 8px;
  border: 1px solid #c5d5c0;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #4e6653;
  font-size: 8px;
  font-weight: 900;
}

.colorhunt-hider-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.colorhunt-hider-share-actions button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid #7ea181;
  border-radius: 8px;
  background: #f9f8e8;
  color: #3f6046;
  font: inherit;
  font-size: 8px;
  font-weight: 950;
}

.colorhunt-hider-share-actions button[data-hider-share] {
  background: #63a16e;
  color: #fff;
}

.colorhunt-hider-share-actions button[data-hider-back] {
  grid-column: 1 / -1;
}

@media (pointer: coarse) {
  .colorhunt-hider-record-bar {
    width: min(var(--hider-record-width, 310px), calc(100vw - 190px));
    min-width: 250px;
    min-height: 46px;
    gap: 9px;
    padding: 5px 6px 5px 10px;
  }

  .colorhunt-hider-record-time {
    gap: 5px;
  }

  .colorhunt-hider-record-time small {
    font-size: 11px;
  }

  .colorhunt-hider-record-time span {
    font-size: 14px;
  }

  .colorhunt-hider-record-finish {
    min-width: 84px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  .colorhunt-hider-share-card {
    padding: 9px;
  }

  .colorhunt-hider-share-card h2 {
    font-size: 15px;
  }

  .colorhunt-hider-share-card p,
  .colorhunt-hider-share-actions button,
  .colorhunt-hider-share-meta span {
    font-size: 7px;
  }
}


/* ============================================================
   v0.10.10.146 — share link reliability
   ============================================================ */

.colorhunt-hider-share-actions button[data-hider-copy-link] {
  border-color: #76a987;
  background: #e7f3df;
  color: #315b3d;
}

.colorhunt-hider-share-note {
  display: block;
  margin: 7px auto 0;
  max-width: 360px;
  color: #7b867d;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.35;
}

@media (pointer: coarse) {
  .colorhunt-hider-share-note {
    max-width: 300px;
    font-size: 6px;
  }
}


/* ============================================================
   v0.10.10.147 — Fold-safe lobby controls-help anchor
   ============================================================ */

body:has(.colorhunt-main-lobby) .colorhunt-controls-help {
  left: auto !important;
  bottom: auto !important;
  right: var(--controls-right, 12px) !important;
  top: var(--controls-top, 12px) !important;
  transform: none !important;
  box-sizing: border-box;
  max-width: min(280px, calc(100vw - 24px));
}


/* ============================================================
   v0.10.10.148 — Hunter record sharing
   ============================================================ */

.colorhunt-practice-result-card .colorhunt-practice-result-share {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid #497e57;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #6eb879 0%, #579b64 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 3px 0 rgba(50,89,58,.15);
}

.colorhunt-practice-result-card .colorhunt-practice-result-share:active {
  transform: translateY(1px);
}

@media (pointer: coarse) {
  .colorhunt-practice-result-card .colorhunt-practice-result-share {
    min-height: 36px;
    font-size: 8px;
  }
}


/* ============================================================
   v0.10.10.154 — clearer Hunter difficulty + share record emphasis
   ============================================================ */

.colorhunt-hider-share-record {
  display: grid;
  place-items: center;
  gap: 2px;
  margin: 9px auto 3px;
  padding: 8px 12px;
  width: min(88%, 300px);
  border: 1px solid #b9ccb5;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
}

.colorhunt-hider-share-record small {
  color: #738176;
  font-size: 8px;
  font-weight: 900;
}

.colorhunt-hider-share-record strong {
  color: #31553a;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

@media (pointer: coarse) {
  .colorhunt-hider-share-record {
    padding: 6px 9px;
  }

  .colorhunt-hider-share-record small {
    font-size: 6px;
  }

  .colorhunt-hider-share-record strong {
    font-size: 16px;
  }
}


/* ============================================================
   v0.10.10.155 — Mobile/Fold Practice modal scroll safety
   ============================================================ */

/*
 * Practice card must never grow beyond the current visual viewport.
 * dvh reacts correctly to mobile browser chrome and Fold unfold/orientation.
 */
.colorhunt-practice-card {
  max-height: min(92dvh, 920px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/*
 * Keep the title/close button available while the long practice controls
 * scroll underneath it.
 */
.colorhunt-practice-head {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background:
    linear-gradient(
      180deg,
      rgba(255,253,240,.995) 0%,
      rgba(255,253,240,.975) 78%,
      rgba(255,253,240,.92) 100%
    );
  box-shadow: 0 1px 0 rgba(83,112,78,.14);
}

/*
 * Give the final control enough breathing room so it isn't hidden behind
 * browser bottom bars after scrolling to the end.
 */
.colorhunt-practice-card::after {
  content: "";
  display: block;
  height: max(12px, env(safe-area-inset-bottom));
}

@media (pointer: coarse), (max-width: 900px), (max-height: 760px) {
  .colorhunt-practice-overlay {
    align-items: center !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .colorhunt-practice-card {
    width: min(96vw, 940px) !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height:
      calc(
        100dvh -
        max(16px, env(safe-area-inset-top)) -
        max(16px, env(safe-area-inset-bottom))
      ) !important;
    margin: 0 auto !important;
    padding-bottom:
      max(10px, env(safe-area-inset-bottom)) !important;
    touch-action: pan-y !important;
  }

  .colorhunt-practice-card input[type="range"] {
    touch-action: pan-x !important;
  }

  .colorhunt-practice-card select,
  .colorhunt-practice-card button {
    touch-action: manipulation;
  }

  /*
   * Prevent wheel/touch scroll from leaking to the page/game canvas while
   * the modal is open.
   */
  body:has(.colorhunt-practice-overlay) {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

/* Fold/tablet landscape: shorter vertical viewport needs more aggressive fit. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-card {
    max-height:
      calc(
        100dvh -
        max(10px, env(safe-area-inset-top)) -
        max(10px, env(safe-area-inset-bottom))
      ) !important;
  }

  .colorhunt-practice-head {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}


/* ============================================================
   v0.10.10.156 — Visible mobile Practice scrollbar
   ============================================================ */

/*
 * Desktop/WebKit fallback too, but intentionally strongest on touch devices.
 */
.colorhunt-practice-card {
  scrollbar-width: auto;
  scrollbar-color: #5f9169 rgba(232, 239, 216, .92);
}

/* Chromium / Samsung Internet / Android WebView */
.colorhunt-practice-card::-webkit-scrollbar {
  width: 14px;
}

.colorhunt-practice-card::-webkit-scrollbar-track {
  background: rgba(232, 239, 216, .96);
  border-left: 1px solid rgba(91, 122, 86, .22);
  border-radius: 999px;
}

.colorhunt-practice-card::-webkit-scrollbar-thumb {
  min-height: 72px;
  background:
    linear-gradient(
      180deg,
      #75ad7d 0%,
      #4f865a 100%
    );
  border: 3px solid rgba(244, 247, 231, .98);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(38, 66, 43, .20);
}

.colorhunt-practice-card::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #69a572 0%,
      #457a50 100%
    );
}

@media (pointer: coarse), (max-width: 900px) {
  .colorhunt-practice-card {
    /*
     * Leave visible breathing room for the scrollbar instead of letting
     * content sit directly underneath it.
     */
    padding-right: 18px !important;
    scrollbar-width: auto;
    scrollbar-color: #4f865a #e8efd8;
  }

  .colorhunt-practice-card::-webkit-scrollbar {
    width: 18px;
  }

  .colorhunt-practice-card::-webkit-scrollbar-track {
    margin-block: 64px 12px;
    background: rgba(222, 234, 207, .98);
    border: 1px solid rgba(76, 114, 80, .26);
    border-radius: 999px;
  }

  .colorhunt-practice-card::-webkit-scrollbar-thumb {
    min-height: 92px;
    border: 4px solid rgba(241, 246, 228, .98);
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        #72b47d 0%,
        #4c8657 100%
      );
  }

  /*
   * A visual cue at the bottom edge of the sticky header makes it obvious
   * that more settings continue below even when the browser hides native
   * scrollbars during idle.
   */
  .colorhunt-practice-head::after {
    content: "↓  SCROLL";
    position: absolute;
    right: 58px;
    bottom: 6px;
    padding: 3px 7px;
    border: 1px solid rgba(82, 126, 86, .22);
    border-radius: 999px;
    background: rgba(230, 241, 218, .96);
    color: #4d7755;
    font-size: 7px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .05em;
    pointer-events: none;
    opacity: .92;
  }
}

/* Extra chunky thumb for short Fold landscape viewports. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-card::-webkit-scrollbar {
    width: 20px;
  }

  .colorhunt-practice-card::-webkit-scrollbar-thumb {
    min-height: 110px;
    border-width: 4px;
  }
}


/* ============================================================
   v0.10.10.157 — Lobby inline Controls + readable Practice type
   ============================================================ */

.ch-lobby-actions-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-bottom: 4px;
}

.ch-lobby-actions-title-row h2 {
  min-width: 0;
  margin: 0 !important;
}

.ch-lobby-inline-controls {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #88a47f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fffdf0 0%, #e7efd9 100%);
  color: #45604a;
  font-family:
    ui-monospace, "SFMono-Regular", "Cascadia Code",
    "Noto Sans KR", "Noto Sans JP", monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 0 rgba(60,88,62,.12);
  touch-action: manipulation;
}

.ch-lobby-inline-controls:active {
  transform: translateY(1px);
}

/*
 * Practice typography:
 * Increase readability without assuming Korean-length labels.
 * min-width:0 + wrapping prevents Japanese/English/Chinese from breaking
 * the card/grid when the copy is longer.
 */
.colorhunt-practice-card {
  font-size: clamp(11px, 1.35vw, 14px);
}

.colorhunt-practice-head > div,
.colorhunt-practice-map label,
.colorhunt-practice-mode-copy,
.colorhunt-practice-control,
.colorhunt-practice-difficulty-row {
  min-width: 0;
}

.colorhunt-practice-head small {
  font-size: clamp(9px, 1vw, 11px) !important;
  line-height: 1.2;
}

.colorhunt-practice-head strong {
  font-size: clamp(18px, 2vw, 23px) !important;
  line-height: 1.15;
}

.colorhunt-practice-head button {
  min-width: 34px;
  min-height: 34px;
  font-size: clamp(14px, 1.5vw, 18px) !important;
}

.colorhunt-practice-map span,
.colorhunt-practice-time-title,
.colorhunt-practice-control label {
  font-size: clamp(11px, 1.3vw, 14px) !important;
  line-height: 1.25;
}

.colorhunt-practice-map select {
  min-height: 38px;
  font-size: clamp(11px, 1.25vw, 14px) !important;
  white-space: normal;
  text-overflow: ellipsis;
}

.colorhunt-practice-time-title b,
.colorhunt-practice-control label b {
  flex: 0 0 auto;
  font-size: clamp(11px, 1.25vw, 14px) !important;
}

.colorhunt-practice-time-buttons button {
  min-height: 36px !important;
  font-size: clamp(10px, 1.2vw, 13px) !important;
}

.colorhunt-practice-ranking > strong {
  font-size: clamp(10px, 1.15vw, 13px) !important;
}

.colorhunt-practice-ranking > span {
  font-size: clamp(9px, 1.05vw, 12px) !important;
}

.colorhunt-practice-ranking > div {
  grid-template-columns:
    minmax(20px, auto)
    minmax(68px, auto)
    minmax(0, 1fr) !important;
  gap: 5px;
  min-height: 24px;
  font-size: clamp(9px, 1.05vw, 12px) !important;
}

.colorhunt-practice-ranking > div small {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.colorhunt-practice-mode-copy > strong {
  display: block;
  font-size: clamp(14px, 1.55vw, 18px) !important;
  line-height: 1.2;
}

.colorhunt-practice-mode-copy > p {
  margin-top: 4px;
  font-size: clamp(10px, 1.15vw, 13px) !important;
  line-height: 1.45 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.colorhunt-practice-control label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.colorhunt-practice-control label > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.colorhunt-practice-difficulty-row > small {
  font-size: clamp(9px, 1vw, 12px) !important;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.colorhunt-practice-difficulty-row > b {
  font-size: clamp(8px, .95vw, 11px) !important;
}

.colorhunt-practice-start {
  min-height: 40px !important;
  padding-inline: 10px;
  font-size: clamp(11px, 1.3vw, 14px) !important;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Mobile/Fold: readable, but not so large that translated text destroys layout. */
@media (pointer: coarse), (max-width: 900px) {
  .ch-lobby-actions-title-row {
    gap: 5px;
  }

  .ch-lobby-inline-controls {
    max-width: 46%;
    min-height: 28px;
    padding: 4px 6px;
    font-size: clamp(8px, 2.25vw, 11px);
  }

  .colorhunt-practice-card {
    font-size: clamp(10px, 2.45vw, 13px) !important;
  }

  .colorhunt-practice-head small {
    font-size: clamp(8px, 2vw, 10px) !important;
  }

  .colorhunt-practice-head strong {
    font-size: clamp(16px, 4vw, 21px) !important;
  }

  .colorhunt-practice-map span,
  .colorhunt-practice-time-title,
  .colorhunt-practice-control label {
    font-size: clamp(10px, 2.55vw, 13px) !important;
  }

  .colorhunt-practice-map select,
  .colorhunt-practice-time-title b,
  .colorhunt-practice-control label b {
    font-size: clamp(10px, 2.45vw, 13px) !important;
  }

  .colorhunt-practice-time-buttons button {
    min-height: 34px !important;
    font-size: clamp(9px, 2.35vw, 12px) !important;
  }

  .colorhunt-practice-mode-copy > strong {
    font-size: clamp(13px, 3.2vw, 17px) !important;
  }

  .colorhunt-practice-mode-copy > p {
    font-size: clamp(9px, 2.3vw, 12px) !important;
  }

  .colorhunt-practice-difficulty-row > small {
    font-size: clamp(8px, 2.1vw, 11px) !important;
  }

  .colorhunt-practice-start {
    min-height: 38px !important;
    font-size: clamp(10px, 2.55vw, 13px) !important;
  }

  .colorhunt-practice-ranking > strong,
  .colorhunt-practice-ranking > span,
  .colorhunt-practice-ranking > div {
    font-size: clamp(8px, 2vw, 11px) !important;
  }
}


/* ============================================================
   v0.10.10.158 HOTFIX — Never allow GAME START title vertical
   ============================================================ */

/*
 * v157 introduced a flex title row, but an older mobile/fold rule can shrink
 * the h2 down to roughly one glyph wide. Korean then wraps one character per
 * line ("게/임/시/작/하/기"). Give the title real horizontal ownership and
 * force it to remain a normal horizontal heading.
 */
.ch-lobby-actions-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.ch-lobby-actions-title-row h2 {
  display: block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.15 !important;
}

.ch-lobby-inline-controls {
  justify-self: end !important;
  width: auto !important;
  max-width: min(44vw, 150px) !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

/*
 * Fold / narrow action column:
 * if both labels cannot coexist, put Controls on the next line instead of
 * crushing the GAME START heading into a vertical stack.
 */
@media (pointer: coarse) and (max-width: 760px) {
  .ch-lobby-actions-title-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .ch-lobby-actions-title-row h2 {
    font-size: clamp(15px, 4vw, 21px) !important;
  }
}

@media (max-width: 420px) {
  .ch-lobby-actions-title-row {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .ch-lobby-inline-controls {
    justify-self: start !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   v0.10.10.164 — Hider practice fixes + EXTRA-visible scrollbar
   ============================================================ */

@media (pointer: coarse), (max-width: 900px) {
  .colorhunt-practice-card {
    /* reserve a clearly visible gutter for the oversized thumb */
    padding-right: 24px !important;
    scrollbar-color: #2f7040 #dce8ca !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar {
    width: 26px !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar-track {
    margin-block: 58px 10px !important;
    background: #dce8ca !important;
    border: 2px solid #8eaa82 !important;
    border-radius: 999px !important;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.55) !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar-thumb {
    min-height: 120px !important;
    border: 5px solid #f5f7e8 !important;
    border-radius: 999px !important;
    background:
      linear-gradient(
        180deg,
        #67b676 0%,
        #2f7040 100%
      ) !important;
    box-shadow:
      0 0 0 1px rgba(42,93,52,.35),
      0 2px 5px rgba(34,71,41,.30) !important;
  }

  .colorhunt-practice-head::after {
    content: "↓  SCROLL" !important;
    right: 68px !important;
    padding: 4px 9px !important;
    border: 2px solid #7ea278 !important;
    background: #edf5df !important;
    color: #376443 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-card::-webkit-scrollbar {
    width: 30px !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar-thumb {
    min-height: 138px !important;
    border-width: 5px !important;
  }
}


/* ============================================================
   v0.10.10.165 — ALWAYS-VISIBLE Practice scroll affordance
   ============================================================ */

/*
 * Native Android/Samsung/Chrome scrollbars may auto-hide before the first
 * gesture. This is a separate visual rail, so it is visible immediately.
 */
.colorhunt-practice-scroll-affordance {
  display: none;
}

@media (pointer: coarse), (max-width: 900px) {
  .colorhunt-practice-overlay {
    position: fixed !important;
  }

  .colorhunt-practice-scroll-affordance {
    position: fixed;
    z-index: 10040;
    top: 50%;
    right: max(7px, env(safe-area-inset-right));
    transform: translateY(-50%);
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 34px;
    padding: 8px 4px 9px;
    box-sizing: border-box;
    border: 2px solid #5d8d63;
    border-radius: 999px;
    background: rgba(246, 250, 231, .98);
    box-shadow:
      0 4px 12px rgba(38, 74, 45, .24),
      inset 0 1px 0 rgba(255,255,255,.85);
    pointer-events: none;
    opacity: .96;
  }

  .colorhunt-practice-scroll-affordance__arrow {
    color: #2f7040;
    font-size: 20px;
    font-weight: 950;
    line-height: .9;
    animation: colorhunt-practice-scroll-arrow 1.05s ease-in-out infinite;
  }

  .colorhunt-practice-scroll-affordance__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #3b6744;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .08em;
  }

  .colorhunt-practice-scroll-affordance__track {
    position: relative;
    display: block;
    width: 12px;
    height: 116px;
    overflow: hidden;
    border: 1px solid #8dab83;
    border-radius: 999px;
    background: #dce8ca;
    box-shadow:
      inset 0 1px 3px rgba(53, 88, 57, .18);
  }

  .colorhunt-practice-scroll-affordance__track i {
    position: absolute;
    top: 5px;
    left: 2px;
    display: block;
    width: 6px;
    height: 34px;
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        #70bd7e 0%,
        #2f7040 100%
      );
    box-shadow:
      0 1px 2px rgba(28, 72, 36, .28);
    transition: transform 80ms linear;
  }

  /*
   * If there happens to be no overflow on an unusually tall device, don't
   * falsely advertise scrolling.
   */
  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    opacity: 0;
  }

  @keyframes colorhunt-practice-scroll-arrow {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(4px);
    }
  }
}

/* Fold landscape: make the indicator even harder to miss. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-scroll-affordance {
    width: 38px;
    right: max(6px, env(safe-area-inset-right));
    padding-block: 7px;
  }

  .colorhunt-practice-scroll-affordance__track {
    width: 14px;
    height: 132px;
  }

  .colorhunt-practice-scroll-affordance__track i {
    width: 8px;
    height: 40px;
  }

  .colorhunt-practice-scroll-affordance__arrow {
    font-size: 23px;
  }

  .colorhunt-practice-scroll-affordance__label {
    font-size: 10px;
  }
}


/* ============================================================
   v0.10.10.169 — ONE custom Practice scrollbar only
   ============================================================ */

@media (pointer: coarse), (max-width: 900px) {
  /*
   * Native mobile scrollbars auto-hide and previously overlapped our guide.
   * Keep the card scrollable, but render no native bar at all.
   */
  .colorhunt-practice-card {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 12px !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /*
   * v165 was visual-only. v169 is the actual scrollbar control.
   */
  .colorhunt-practice-scroll-affordance {
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    width: 42px !important;
    padding: 8px 5px 10px !important;
    border-width: 3px !important;
    opacity: 1 !important;
  }

  .colorhunt-practice-scroll-affordance:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(.98);
  }

  .colorhunt-practice-scroll-affordance__track {
    width: 16px !important;
    height: 128px !important;
    border-width: 2px !important;
  }

  .colorhunt-practice-scroll-affordance__track i {
    left: 2px !important;
    width: 8px !important;
    height: 40px !important;
    transition: none !important;
  }

  .colorhunt-practice-scroll-affordance__arrow {
    font-size: 22px !important;
  }

  .colorhunt-practice-scroll-affordance__label {
    font-size: 10px !important;
  }

  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ============================================================
   v0.10.10.170 — Lobby guide containment
   ============================================================ */

/*
 * The guide copy grew after the readability pass, while an older 40px
 * minimum remained. Give the card a real fixed slot and prevent its second
 * line from leaking into the language footer.
 */
.colorhunt-main-lobby .ch-lobby-actions {
  min-height: 0 !important;
  overflow: hidden !important;
}

.colorhunt-main-lobby .ch-lobby-guide {
  flex: 0 0 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 5px 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.colorhunt-main-lobby .ch-lobby-guide > div:last-child {
  min-width: 0;
  overflow: hidden;
}

.colorhunt-main-lobby .ch-lobby-guide strong {
  margin: 0 !important;
  font-size: clamp(9px, 1vw, 12px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.colorhunt-main-lobby .ch-lobby-guide span {
  margin-top: 3px !important;
  font-size: clamp(7px, .82vw, 10px) !important;
  line-height: 1.16 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.colorhunt-main-lobby .ch-lobby-guide-mascot {
  font-size: 27px !important;
  line-height: 1 !important;
}

/*
 * Short desktop/Fold landscape screens need a few extra pixels. Take them
 * from the decorative guide, not from the primary room/action buttons.
 */
@media (max-height: 650px) {
  .colorhunt-main-lobby .ch-lobby-actions {
    gap: 4px !important;
    padding-top: 7px !important;
    padding-bottom: 5px !important;
  }

  .colorhunt-main-lobby .ch-lobby-guide {
    flex-basis: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
  }

  .colorhunt-main-lobby .ch-lobby-guide span {
    font-size: clamp(6px, .72vw, 8px) !important;
    line-height: 1.08 !important;
  }
}

@media (pointer: coarse), (max-width: 900px) {
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide {
    flex: 0 0 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding: 4px 6px !important;
  }

  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide-mascot {
    font-size: 21px !important;
  }
}


/* ============================================================
   v0.10.10.171 — Practice scrollbar ALWAYS visible on mobile
   ============================================================ */

@media (pointer: coarse), (max-width: 900px) {
  /*
   * Do not wait for the first scroll gesture.
   * The custom scrollbar is a permanent visual affordance while the
   * Practice modal is open.
   */
  .colorhunt-practice-scroll-affordance,
  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .colorhunt-practice-scroll-affordance {
    width: 44px !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    border: 3px solid #4f8258 !important;
    background: rgba(248, 252, 234, .99) !important;
    box-shadow:
      0 5px 14px rgba(31, 72, 40, .34),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .colorhunt-practice-scroll-affordance__arrow {
    display: block !important;
    opacity: 1 !important;
    font-size: 24px !important;
    color: #28683a !important;
  }

  .colorhunt-practice-scroll-affordance__label {
    display: block !important;
    opacity: 1 !important;
    color: #315f3d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  .colorhunt-practice-scroll-affordance__track {
    display: block !important;
    width: 17px !important;
    height: 136px !important;
    background: #d8e8c5 !important;
    border: 2px solid #779b70 !important;
  }

  .colorhunt-practice-scroll-affordance__track i {
    display: block !important;
    opacity: 1 !important;
    width: 9px !important;
    height: 44px !important;
    background:
      linear-gradient(
        180deg,
        #74c982 0%,
        #2e743f 100%
      ) !important;
  }

  /*
   * Even on a tall phone where only a tiny amount of overflow exists,
   * keep the affordance visible. We prefer an obvious scrollbar over a
   * hidden "maybe scrollable" interface.
   */
  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    filter: saturate(.82);
  }
}

/* Fold landscape: even more obvious without covering the modal content. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-scroll-affordance,
  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    width: 46px !important;
    opacity: 1 !important;
  }

  .colorhunt-practice-scroll-affordance__track {
    height: 145px !important;
  }

  .colorhunt-practice-scroll-affordance__track i {
    height: 48px !important;
  }
}


/* ============================================================
   v0.10.10.172 — Practice content safe-area for custom scrollbar
   ============================================================ */

@media (pointer: coarse), (max-width: 900px) {
  /*
   * The always-visible custom scrollbar occupies the far-right edge.
   * Reserve a dedicated gutter INSIDE the modal so right-aligned values
   * (ranking metadata, precision %, slider values, etc.) never sit under it.
   */
  .colorhunt-practice-card {
    padding-right: 64px !important;
    box-sizing: border-box !important;
  }

  /*
   * Extra protection for the rows that intentionally push values to the
   * right. Keep their final value column clearly inside the safe area.
   */
  .colorhunt-practice-ranking > div,
  .colorhunt-practice-time-title,
  .colorhunt-practice-control label,
  .colorhunt-practice-difficulty-row {
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .colorhunt-practice-ranking > div small,
  .colorhunt-practice-time-title b,
  .colorhunt-practice-control label b,
  .colorhunt-practice-difficulty-row > b {
    margin-right: 6px !important;
  }

  /*
   * Range controls also need breathing room because the numeric value is
   * rendered at the far right of the same row.
   */
  .colorhunt-practice-control input[type="range"] {
    max-width: calc(100% - 6px) !important;
  }
}

/* Fold landscape: the custom rail is a little wider, so reserve more room. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .colorhunt-practice-card {
    padding-right: 72px !important;
  }
}


/* ============================================================
   v0.10.10.173 EMERGENCY — NEVER CLIP Hunt-time buttons
   ============================================================ */

/*
 * v129 gave each of the two timing sections a 60px minimum while the waiting
 * card itself has a dynamically limited height. On some desktop viewport
 * sizes the flex stack became taller than the card and overflow:hidden
 * clipped the SECOND timing row completely.
 *
 * Reserve an explicit two-row timing block and slightly rebalance the other
 * fixed sections. Both Paint time and Hunt time must always exist on screen.
 */
@media (pointer: fine) and (min-width: 800px) {
  .ch-waiting-shell {
    gap: 5px !important;
    padding: 8px !important;
  }

  .ch-waiting-header {
    flex: 0 0 42px !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  .ch-waiting-info {
    flex: 0 0 72px !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 6px 8px !important;
  }

  .ch-waiting-map {
    flex: 0 0 48px !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  .ch-waiting-role-wrap {
    flex: 0 0 56px !important;
    min-height: 56px !important;
    height: 56px !important;
  }

  .ch-waiting-role {
    height: 34px !important;
    min-height: 34px !important;
  }

  .ch-waiting-role button {
    height: 34px !important;
    min-height: 34px !important;
  }

  .ch-waiting-role-status {
    height: 17px !important;
    min-height: 17px !important;
    margin-top: 2px !important;
  }

  .ch-waiting-timing {
    flex: 0 0 104px !important;
    min-height: 104px !important;
    height: 104px !important;
    display: grid !important;
    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .ch-waiting-timing section {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 6px !important;
    overflow: visible !important;
  }

  .ch-waiting-timing-title,
  .ch-waiting-timing-title b {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .ch-waiting-time-options {
    gap: 5px !important;
    margin-top: 3px !important;
  }

  .ch-waiting-time-options button {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
  }

  .ch-waiting-start {
    flex: 0 0 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  .ch-waiting-footer {
    flex: 0 0 34px !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  .ch-waiting-footer button {
    min-height: 34px !important;
    height: 34px !important;
  }
}

/*
 * Short-height desktop / landscape laptop emergency fit.
 * Never solve this by hiding the Hunt row.
 */
@media (pointer: fine) and (min-width: 800px) and (max-height: 720px) {
  .ch-waiting-header {
    flex-basis: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  .ch-waiting-info {
    flex-basis: 66px !important;
    min-height: 66px !important;
    height: 66px !important;
  }

  .ch-waiting-map {
    flex-basis: 43px !important;
    min-height: 43px !important;
    height: 43px !important;
  }

  .ch-waiting-role-wrap {
    flex-basis: 50px !important;
    min-height: 50px !important;
    height: 50px !important;
  }

  .ch-waiting-timing {
    flex-basis: 96px !important;
    min-height: 96px !important;
    height: 96px !important;
  }

  .ch-waiting-time-options button {
    height: 22px !important;
    min-height: 22px !important;
  }

  .ch-waiting-start {
    flex-basis: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  .ch-waiting-footer {
    flex-basis: 31px !important;
    min-height: 31px !important;
    height: 31px !important;
  }

  .ch-waiting-footer button {
    min-height: 31px !important;
    height: 31px !important;
  }
}


/* ============================================================
   v0.10.10.179 — TRUE DOM-fixed Paint READY + centered typography
   ============================================================ */

.colorhunt-paint-ready-fixed {
  position: fixed;
  z-index: 2147482500;
  transform: translate(-50%, -50%);
  width: 138px;
  height: 52px;
  margin: 0;
  padding: 5px 9px;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: 1fr;
  place-items: center;

  border: 1px solid rgba(47, 93, 64, .42);
  border-radius: 10px;
  background: #4f9d69;
  color: #fff;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans KR", "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  white-space: normal;

  box-shadow:
    0 3px 0 rgba(39, 78, 52, .18),
    0 5px 12px rgba(30, 61, 40, .18);

  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.colorhunt-paint-ready-fixed[hidden] {
  display: none !important;
}

.colorhunt-paint-ready-fixed > span,
.colorhunt-paint-ready-fixed > strong {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.colorhunt-paint-ready-fixed.is-ready {
  background: #6f8b79;
}

.colorhunt-paint-ready-fixed.is-hunter-waiting {
  grid-template-rows: 1fr 1fr;
  row-gap: 1px;
  background: #68737d;
}

.colorhunt-paint-ready-fixed.is-hunter-ready {
  background: #e45b4f;
}

.colorhunt-paint-ready-fixed__label {
  align-self: end;
  font-size: 11px;
  line-height: 1;
}

.colorhunt-paint-ready-fixed__count {
  align-self: start;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .02em;
}

@media (pointer: coarse), (max-width: 900px) {
  .colorhunt-paint-ready-fixed {
    width: 122px;
    height: 50px;
    padding: 5px 7px;
    border-radius: 9px;
    font-size: 12px;
  }

  .colorhunt-paint-ready-fixed__label {
    font-size: 10px;
  }

  .colorhunt-paint-ready-fixed__count {
    font-size: 14px;
  }
}


/* ============================================================
   v0.10.10.183 — desktop waiting-room chat stays bottom-left
   ============================================================ */

@media (pointer: fine) {
  /*
   * v126 only locked the UNFOCUSED lobby chat. As soon as the input gained
   * focus, :not(.colorhunt-chat--focused) stopped matching and the base
   * top:8px rule won, making the entire chat jump upward.
   *
   * Waiting/lobby chat now keeps the exact same bottom-left anchor whether
   * focused or not.
   */
  .colorhunt-chat.colorhunt-chat--desktop-lobby,
  .colorhunt-chat.colorhunt-chat--desktop-lobby.colorhunt-chat--focused {
    top: auto !important;
    left: var(--chat-canvas-left) !important;
    bottom: var(--chat-canvas-bottom) !important;
    transform: none !important;
    width: min(var(--chat-panel-width), 320px) !important;
    max-height: min(var(--chat-panel-max-height), 176px) !important;
  }
}


/* v0.10.10.189 — Hunter Practice ammo-depletion result */
.colorhunt-practice-result-card.is-ammo {
  border-color: rgba(198, 40, 40, 0.72);
}

.colorhunt-practice-result-card.is-ammo h2 {
  color: #c62828;
}

.colorhunt-practice-result-card.is-ammo .colorhunt-practice-result-icon {
  filter: drop-shadow(0 3px 8px rgba(198, 40, 40, 0.28));
}

/* ============================================================
   v0.10.10.191 — MOBILE GEOMETRY / ORIENTATION / INSTALL HOTFIX
   One visible viewport, one canvas ratio, one waiting-room scale.
   ============================================================ */

:root {
  --ch-viewport-left: 0px;
  --ch-viewport-top: 0px;
}

html.colorhunt-mobile,
html.colorhunt-mobile body {
  position: fixed !important;
  left: var(--ch-viewport-left) !important;
  top: var(--ch-viewport-top) !important;
  width: var(--ch-viewport-width) !important;
  min-width: var(--ch-viewport-width) !important;
  max-width: var(--ch-viewport-width) !important;
  height: var(--ch-viewport-height) !important;
  min-height: var(--ch-viewport-height) !important;
  max-height: var(--ch-viewport-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.colorhunt-mobile #root,
html.colorhunt-mobile .app,
html.colorhunt-mobile .game-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.colorhunt-mobile .game-container {
  display: grid !important;
  place-items: center !important;
}

html.colorhunt-mobile .game-container canvas,
html.colorhunt-mobile canvas {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  flex: none !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* The waiting room is authored at one design size and scaled as ONE unit.
   This prevents each button/card/font from shrinking at a different rate. */
html.colorhunt-mobile .colorhunt-waiting-room.ch-uniform-mobile-scale {
  width: 300px !important;
  height: 460px !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(var(--waiting-uniform-scale, 1)) !important;
  transform-origin: 0 0 !important;
  contain: layout style paint !important;
}

html.colorhunt-mobile .colorhunt-waiting-room.ch-uniform-mobile-scale .ch-waiting-shell {
  width: 300px !important;
  height: 460px !important;
  min-width: 300px !important;
  min-height: 460px !important;
  max-width: 300px !important;
  max-height: 460px !important;
  overflow: hidden !important;
}

html.colorhunt-mobile .colorhunt-waiting-room.ch-uniform-mobile-scale,
html.colorhunt-mobile .colorhunt-waiting-room.ch-uniform-mobile-scale * {
  box-sizing: border-box !important;
}

/* Installation must never look like a dead button. */
.ch-rotate-actions button[data-ch-install].is-installed {
  background: rgba(74, 132, 88, .78) !important;
  border-color: rgba(172, 230, 184, .65) !important;
}

.ch-install-help--active {
  min-height: 2.8em;
}

/* ============================================================
   v0.10.10.197 — clean practice top rail + input-safe tool UI
   ============================================================ */
.colorhunt-controls-help.colorhunt-controls-help--practice {
  top: var(--controls-top, 10px) !important;
  right: var(--controls-right, 202px) !important;
}

.colorhunt-controls-help.colorhunt-controls-help--practice .colorhunt-controls-help__button,
.colorhunt-practice-exit-button {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 2px solid #6f9b73;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf0 0%, #edf3dc 100%);
  color: #35523d;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 3px 0 rgba(58,91,62,.14),
    0 7px 18px rgba(34,58,39,.13);
  touch-action: manipulation;
}

.colorhunt-controls-help.colorhunt-controls-help--practice .colorhunt-controls-help__panel {
  top: 40px !important;
}

/* ============================================================
   v0.10.10.199 — practice training hub + vertical top controls
   ============================================================ */
.colorhunt-practice-intro {
  margin: 10px 0 12px;
  padding: 14px 16px;
  border: 2px solid rgba(101, 151, 104, .38);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(243,250,230,.98), rgba(233,246,239,.98));
  color: #31513a;
}
.colorhunt-practice-intro > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 950;
}
.colorhunt-practice-intro > p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  font-weight: 700;
}
.colorhunt-practice-rule-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.colorhunt-practice-rule-flow span {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(255,255,255,.76);
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}
.colorhunt-practice-rule-flow b { color: #d78345; font-size: 10px; }
.colorhunt-practice-map--compact { margin-bottom: 12px !important; }
.colorhunt-practice-mode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.colorhunt-practice-mode-grid .colorhunt-practice-mode {
  margin: 0 !important;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}
.colorhunt-practice-purpose {
  min-height: 3.9em;
  margin-bottom: 10px !important;
  font-weight: 750 !important;
}
.colorhunt-practice-hider-tips {
  display: grid;
  gap: 7px;
  margin: 12px 0 16px;
}
.colorhunt-practice-hider-tips span {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 850;
  color: #425b49;
}
.colorhunt-practice-mode-grid .colorhunt-practice-ranking {
  margin-top: 10px;
  max-height: 118px;
  overflow: auto;
}
.colorhunt-controls-help.colorhunt-controls-help--practice .colorhunt-controls-help__panel {
  top: 0 !important;
  right: 100px !important;
}
@media (max-width: 760px), (max-height: 520px) {
  .colorhunt-practice-intro { padding: 9px 11px; margin: 6px 0 8px; }
  .colorhunt-practice-intro > strong { font-size: 12px; }
  .colorhunt-practice-intro > p { font-size: 9px; line-height: 1.35; }
  .colorhunt-practice-rule-flow { margin-top: 6px; gap: 5px; }
  .colorhunt-practice-rule-flow span { padding: 5px; font-size: 8px; }
  .colorhunt-practice-mode-grid { gap: 7px; }
  .colorhunt-practice-purpose { min-height: 0; font-size: 8px !important; line-height: 1.35 !important; }
  .colorhunt-practice-hider-tips { gap: 4px; margin: 7px 0 9px; }
  .colorhunt-practice-hider-tips span { padding: 5px 6px; font-size: 8px; }
}


/* v0.10.10.201 practice readability + map preview */
.colorhunt-practice-game-desc {
  display: grid;
  gap: 4px;
  margin: 8px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
}
.colorhunt-practice-game-desc span,
.colorhunt-practice-game-desc strong { display: block; }
.colorhunt-practice-game-desc strong { font-size: 16px; color: #244a30; }
.colorhunt-practice-map--compact {
  display: grid !important;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: 12px;
  align-items: center;
}
.colorhunt-practice-map-preview {
  width: 100%;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(74,111,78,.34);
  box-shadow: 0 3px 10px rgba(28,48,32,.15);
}
.colorhunt-practice-purpose strong { font-size: 1.08em; font-weight: 950; }
@media (max-width: 760px), (max-height: 520px) {
  .colorhunt-practice-intro > strong { font-size: 14px !important; }
  .colorhunt-practice-game-desc { font-size: 12px !important; line-height: 1.42 !important; gap: 2px; }
  .colorhunt-practice-game-desc strong { font-size: 13px; }
  .colorhunt-practice-map-preview { height: 58px; }
  .colorhunt-practice-purpose { font-size: 9.5px !important; line-height: 1.42 !important; }
}

/* ============================================================
   v0.10.10.204 — lobby/practice cleanup + durable mobile frames
   ============================================================ */

/* Practice modal: no floating SCROLL badge. The card itself owns scrolling. */
.colorhunt-practice-scroll-affordance {
  display: none !important;
}

/* Requested semantic order: title -> map thumbnail -> selector. */
.colorhunt-practice-map--compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "title"
    "preview"
    "select";
  gap: 7px !important;
  align-items: stretch !important;
  padding: 9px 10px !important;
}
.colorhunt-practice-map-title {
  grid-area: title;
  display: block;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  color: #35523d;
}
.colorhunt-practice-map-preview {
  grid-area: preview;
  width: 100% !important;
  height: clamp(64px, 16dvh, 104px) !important;
  object-fit: cover;
  box-sizing: border-box;
}
.colorhunt-practice-map--compact > select {
  grid-area: select;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #9db79a;
  border-radius: 8px;
  background: #fff;
  color: #35523d;
  font-weight: 900;
  font-size: 11px;
}

/* Practice readability. Keep the 'why' headline separated from its copy. */
.colorhunt-practice-purpose {
  font-size: 11px !important;
  line-height: 1.48 !important;
}
.colorhunt-practice-purpose strong {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 12px !important;
  line-height: 1.2;
}
.colorhunt-practice-time-title {
  justify-content: flex-start !important;
  font-size: 11px !important;
}

/* Hider practice HUD: force the compact, thick one-line form on every device. */
.colorhunt-hider-record-bar {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 210px) !important;
  min-height: 46px !important;
  padding: 5px 6px 5px 11px !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
.colorhunt-hider-record-time {
  flex: 0 1 auto !important;
  gap: 5px !important;
}
.colorhunt-hider-record-time small {
  font-size: clamp(11px, 1.65vw, 14px) !important;
  font-weight: 1000 !important;
}
.colorhunt-hider-record-time span {
  font-size: clamp(14px, 2vw, 18px) !important;
  font-weight: 1000 !important;
}
.colorhunt-hider-record-finish {
  min-width: 88px !important;
  min-height: 36px !important;
  padding: 0 11px !important;
  font-size: clamp(13px, 1.75vw, 15px) !important;
  font-weight: 1000 !important;
}

/* Completion/share modal: obvious persistent vertical scrollbar + larger copy. */
.colorhunt-hider-share-card {
  overflow-y: scroll !important;
  scrollbar-width: auto;
  scrollbar-color: #67966c #e4eadb;
  padding-right: 13px !important;
}
.colorhunt-hider-share-card::-webkit-scrollbar {
  width: 10px;
}
.colorhunt-hider-share-card::-webkit-scrollbar-track {
  background: #e4eadb;
  border-radius: 999px;
}
.colorhunt-hider-share-card::-webkit-scrollbar-thumb {
  background: #67966c;
  border: 2px solid #e4eadb;
  border-radius: 999px;
}
.colorhunt-hider-share-kicker {
  font-size: 10px !important;
}
.colorhunt-hider-share-card h2 {
  font-size: clamp(19px, 4vw, 24px) !important;
  line-height: 1.18 !important;
}
.colorhunt-hider-share-card p {
  font-size: clamp(10px, 2.1vw, 13px) !important;
  line-height: 1.45 !important;
}
.colorhunt-hider-share-meta span,
.colorhunt-hider-share-note {
  font-size: clamp(9px, 1.75vw, 11px) !important;
  line-height: 1.35 !important;
}
.colorhunt-hider-share-actions button {
  min-height: 40px !important;
  padding: 5px 8px !important;
  font-size: clamp(9px, 1.75vw, 12px) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Lobby guide must never be clipped merely because a phone is narrow. */
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-actions {
  overflow: hidden !important;
}
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 5px 6px !important;
  box-sizing: border-box;
  align-items: center;
}
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide > div:last-child {
  min-width: 0;
}
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide strong,
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
  display: block !important;
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide strong {
  font-size: clamp(6.3px, 1.3vw, 9px) !important;
  line-height: 1.12 !important;
}
html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
  margin-top: 2px;
  font-size: clamp(5.2px, 1.05vw, 7.5px) !important;
  line-height: 1.2 !important;
}

/* Give the guide guaranteed room by letting action rows compress slightly on short phones. */
@media (pointer: coarse) and (max-height: 540px) {
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-profile-card {
    flex-basis: 55px !important;
  }
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-action {
    flex-basis: 35px !important;
    min-height: 34px !important;
  }
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide {
    min-height: 34px !important;
  }
}

@media (pointer: coarse) and (max-width: 700px) {
  html.colorhunt-mobile .colorhunt-main-lobby .ch-lobby-guide span {
    display: block !important;
  }
  .colorhunt-practice-map-preview {
    height: clamp(58px, 15dvh, 82px) !important;
  }
  .colorhunt-practice-purpose {
    font-size: 9.5px !important;
  }
  .colorhunt-hider-share-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   v0.10.10.205 — practice modal scroll/header + arrow map picker
   ============================================================ */

/* Keep a real, always-visible scrollbar; remove only the old SCROLL text badge. */
.colorhunt-practice-card {
  overflow-y: scroll !important;
  scrollbar-width: auto;
  scrollbar-color: #67966c #e4eadb;
  overscroll-behavior: contain;
  position: relative;
}
.colorhunt-practice-card::-webkit-scrollbar { width: 10px; }
.colorhunt-practice-card::-webkit-scrollbar-track {
  background: #e4eadb;
  border-radius: 999px;
}
.colorhunt-practice-card::-webkit-scrollbar-thumb {
  background: #67966c;
  border: 2px solid #e4eadb;
  border-radius: 999px;
}
.colorhunt-practice-scroll-affordance { display: none !important; }

/* Header stays visually above scrolling content, so content never peeks over it. */
.colorhunt-practice-head {
  position: sticky !important;
  top: -12px;
  z-index: 30;
  margin: -12px -12px 8px;
  padding: 12px 12px 10px !important;
  background: linear-gradient(180deg, #fff9e8 0%, #fff9e8 86%, rgba(255,249,232,.96) 100%);
  border-bottom: 1px solid rgba(117,166,110,.24);
  box-shadow: 0 5px 10px rgba(53,82,61,.08);
}
@media (pointer: coarse) {
  .colorhunt-practice-head {
    top: -8px;
    margin: -8px -8px 7px;
    padding: 8px 8px 8px !important;
  }
}

/* Compact map picker: < thumbnail >  MAP NAME */
.colorhunt-practice-map--compact {
  display: block !important;
  padding: 9px 10px !important;
}
.colorhunt-practice-map-title {
  display: block;
  margin-bottom: 7px;
}
.colorhunt-practice-map-picker {
  display: grid;
  grid-template-columns: 34px minmax(84px, 132px) 34px minmax(90px, 1fr);
  gap: 7px;
  align-items: center;
}
.colorhunt-practice-map-preview {
  width: 100% !important;
  height: 72px !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  border-radius: 9px;
}
.colorhunt-practice-map-arrow {
  width: 34px;
  height: 48px;
  padding: 0;
  border: 1px solid #9db79a;
  border-radius: 9px;
  background: #fffdf4;
  color: #35523d;
  font: inherit;
  font-size: 27px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.colorhunt-practice-map-arrow:active {
  transform: translateY(1px);
  background: #eaf4df;
}
.colorhunt-practice-map-name {
  min-width: 0;
  color: #31553a;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.colorhunt-practice-map--compact > select[hidden] { display: none !important; }

@media (max-width: 700px), (max-height: 520px) {
  .colorhunt-practice-map-picker {
    grid-template-columns: 30px minmax(72px, 108px) 30px minmax(76px, 1fr);
    gap: 5px;
  }
  .colorhunt-practice-map-preview { height: 58px !important; }
  .colorhunt-practice-map-arrow {
    width: 30px;
    height: 42px;
    font-size: 23px;
  }
  .colorhunt-practice-map-name { font-size: 11px; }
}

/* Keep the share-help sentence on one line; scale it down rather than orphaning '요.'. */
.colorhunt-hider-share-note {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  font-size: clamp(7px, 1.55vw, 10px) !important;
  letter-spacing: -0.025em;
}


/* ============================================================
   v0.10.10.206 — practice header/map alignment + paint hold tune
   ============================================================ */

/* Remove only the SCROLL word/badge. Keep the real right scrollbar. */
.colorhunt-practice-head::after {
  content: none !important;
  display: none !important;
}
.colorhunt-practice-scroll-affordance,
.colorhunt-practice-scroll-affordance__label {
  display: none !important;
}

/* Hard reset the map picker so older mobile rules cannot scatter its children. */
.colorhunt-practice-map--compact {
  display: block !important;
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}
.colorhunt-practice-map-title {
  display: block !important;
  position: static !important;
  width: auto !important;
  margin: 0 0 8px !important;
  transform: none !important;
}
.colorhunt-practice-map-picker {
  display: flex !important;
  position: static !important;
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: none !important;
}
.colorhunt-practice-map-picker > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}
.colorhunt-practice-map-arrow {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 58px !important;
  padding: 0 !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
.colorhunt-practice-map-preview {
  flex: 0 0 128px !important;
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  height: 72px !important;
  object-fit: cover !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px !important;
}
.colorhunt-practice-map-name {
  flex: 0 1 auto !important;
  min-width: 70px !important;
  max-width: 170px !important;
  font-size: clamp(13px, 1.5vw, 17px) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

/* Practice cards: decorative emoji no longer consumes a left column. */
.colorhunt-practice-mode-grid .colorhunt-practice-mode {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.colorhunt-practice-mode-icon {
  display: none !important;
}
.colorhunt-practice-mode-copy {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.colorhunt-practice-mode--hunter .colorhunt-practice-mode-copy > strong::before {
  content: "🔦  ";
}
.colorhunt-practice-mode--hider .colorhunt-practice-mode-copy > strong::before {
  content: "🎨  ";
}

@media (max-width: 700px), (max-height: 520px) {
  .colorhunt-practice-map-picker {
    max-width: 390px !important;
    gap: 6px !important;
  }
  .colorhunt-practice-map-arrow {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  .colorhunt-practice-map-preview {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 58px !important;
  }
  .colorhunt-practice-map-name {
    min-width: 58px !important;
    max-width: 120px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   v0.10.10.207 — persistent practice scrollbar + avatar mobile fit
   ============================================================ */

/* The old SCROLL word and arrow are gone; only a clean persistent rail remains. */
.colorhunt-practice-scroll-affordance {
  display: block !important;
  position: absolute !important;
  z-index: 80 !important;
  top: 76px !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  bottom: 22px !important;
  width: 10px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  opacity: .95 !important;
}
.colorhunt-practice-scroll-affordance__arrow,
.colorhunt-practice-scroll-affordance__label {
  display: none !important;
}
.colorhunt-practice-scroll-affordance__track {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 10px !important;
  height: 100% !important;
  min-height: 60px !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: rgba(228, 234, 219, .98) !important;
  box-shadow: inset 0 0 0 1px rgba(86, 119, 88, .28) !important;
}
.colorhunt-practice-scroll-affordance__track i {
  display: block !important;
  width: 6px !important;
  height: clamp(38px, 18%, 74px) !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: #67966c !important;
  box-shadow: 0 1px 3px rgba(35, 67, 43, .25) !important;
  transform: translateY(0);
  transition: transform 80ms linear;
}
.colorhunt-practice-scroll-affordance:not(.is-scrollable) {
  opacity: .38 !important;
}

/* Mobile avatar editor: keep the preview comfortably visible in one glance. */
html.colorhunt-mobile .colorhunt-avatar-editor {
  max-height: calc(100dvh - 8px) !important;
  overflow-y: auto !important;
}
html.colorhunt-mobile .colorhunt-avatar-editor canvas {
  touch-action: none !important;
}

/* ============================================================
   v0.10.10.209 — practice rail inside frame + avatar first-open centering
   ============================================================ */

/* The custom rail is positioned by JS from the Practice card's live rect. */
.colorhunt-practice-scroll-affordance {
  position: fixed !important;
  width: 10px !important;
  min-width: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  z-index: 95 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.colorhunt-practice-scroll-affordance__track {
  position: absolute !important;
  inset: 0 !important;
  width: 10px !important;
  height: 100% !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: rgba(228, 234, 219, .98) !important;
  box-shadow: inset 0 0 0 1px rgba(86,119,88,.28) !important;
}
.colorhunt-practice-scroll-affordance__track i {
  width: 6px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: #67966c !important;
}

/* Keep enough inner breathing room so content never sits under the rail. */
.colorhunt-practice-card {
  padding-right: max(20px, calc(12px + env(safe-area-inset-right))) !important;
}

/* Avatar preview itself must not inherit any transform/positioning from generic mobile canvas rules. */
html.colorhunt-mobile .colorhunt-avatar-editor canvas {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  max-width: none !important;
  max-height: none !important;
}


/* ============================================================
   v0.10.10.210 — exact Practice rail height + true avatar canvas fit
   ============================================================ */

/*
 * Older mobile rules centered the helper with translateY(-50%).
 * JS now supplies the exact live modal top/height, so any transform would
 * pull the rail above the rounded frame. Keep X exactly as calculated by JS
 * and only cancel that stale vertical transform.
 */
.colorhunt-practice-scroll-affordance {
  transform: none !important;
}

/*
 * Generic mobile canvas rules force width/height:auto !important. That made
 * the 240x360 avatar canvas overflow the smaller responsive preview frame,
 * so phones only saw a lower/right crop even though the logical character
 * coordinates themselves were centered. Force this editor canvas alone to
 * fill its frame; the logical canvas center then maps to the visible frame
 * center on every device size.
 */
html.colorhunt-mobile .colorhunt-avatar-editor canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: fill !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

/* ============================================================
   v0.10.10.211 — desktop uses native Practice scrollbar only
   ============================================================ */
/*
 * The always-visible custom rail exists for touch devices because mobile
 * browsers tend to auto-hide their native scrollbar. Desktop already has a
 * stable native scrollbar, so showing both creates the doubled rail seen on
 * PC. Keep the custom rail strictly touch/mobile-only and restore the native
 * scrollbar for a fine pointer even if the browser window is narrow.
 */
@media (hover: hover) and (pointer: fine) {
  .colorhunt-practice-scroll-affordance,
  .colorhunt-practice-scroll-affordance:not(.is-scrollable) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .colorhunt-practice-card {
    scrollbar-width: thin !important;
    scrollbar-color: #67966c #e4eadb !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar-track {
    background: #e4eadb !important;
    border-radius: 999px !important;
  }

  .colorhunt-practice-card::-webkit-scrollbar-thumb {
    background: #67966c !important;
    border-radius: 999px !important;
    border: 2px solid #e4eadb !important;
  }
}


/* ============================================================
   v0.10.10.212 — Hunter practice failure reveal confirmation
   ============================================================ */
.colorhunt-practice-reveal-confirm {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 12050;
  min-width: 210px;
  min-height: 54px;
  padding: 12px 24px;
  border: 3px solid #f3efd9;
  border-radius: 16px;
  background: linear-gradient(180deg, #73a979 0%, #4d895d 100%);
  color: #fff;
  box-shadow: 0 5px 0 #355f42, 0 10px 24px rgba(0,0,0,.28);
  font: 800 18px/1.15 Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  touch-action: manipulation;
}
.colorhunt-practice-reveal-confirm:active {
  transform: translate(-50%, 3px);
  box-shadow: 0 2px 0 #355f42, 0 6px 16px rgba(0,0,0,.24);
}
html.colorhunt-mobile .colorhunt-practice-reveal-confirm {
  bottom: max(14px, env(safe-area-inset-bottom));
  min-width: 190px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 14px;
  font-size: 16px;
}

/* ============================================================
   v0.10.10.213 — Hunter practice desktop controls + reveal safety
   ============================================================ */
.colorhunt-practice-desktop-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 12040;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 18px;
  border: 2px solid rgba(244, 239, 217, .95);
  border-radius: 14px;
  background: rgba(18, 28, 24, .92);
  color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.34), 0 8px 20px rgba(0,0,0,.28);
  font: 800 15px/1 Arial, sans-serif;
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
}
.colorhunt-practice-desktop-hint b {
  color: #f6e59a;
  font-size: 17px;
}
.colorhunt-practice-desktop-hint span {
  opacity: .55;
}
html.colorhunt-mobile .colorhunt-practice-desktop-hint {
  display: none !important;
}

.colorhunt-practice-reveal-confirm {
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   v0.10.10.214 — practice in-canvas help, durable reveal action,
   zoom-proof role labels and larger practice top controls
   ============================================================ */
.colorhunt-practice-desktop-hint {
  bottom: auto !important;
  transform: translate(-50%, -100%) !important;
  z-index: 2147483000 !important;
  font-size: 16px !important;
  min-height: 44px !important;
  padding: 9px 20px !important;
}

.colorhunt-practice-reveal-confirm {
  bottom: auto !important;
  transform: translate(-50%, -100%) !important;
  z-index: 2147483600 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.colorhunt-practice-reveal-confirm:active {
  transform: translate(-50%, calc(-100% + 3px)) !important;
}

/* Same footprint, but readable labels. Allow translated text to shrink/wrap
   inside the button instead of overflowing its frame. */
.colorhunt-controls-help.colorhunt-controls-help--practice .colorhunt-controls-help__button,
.colorhunt-practice-exit-button {
  font-size: clamp(10px, 1.15vw, 13px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  padding-inline: 7px !important;
}

@media (pointer: coarse) {
  .colorhunt-controls-help.colorhunt-controls-help--practice .colorhunt-controls-help__button,
  .colorhunt-practice-exit-button {
    font-size: clamp(9px, 2.5vw, 12px) !important;
  }
}


/* ============================================================
   v0.10.10.225 — Main lobby inline BGM + Controls action group
   ============================================================ */
.ch-lobby-inline-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.ch-lobby-inline-bgm,
.ch-lobby-inline-controls {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border: 1px solid #88a47f !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffdf0 0%, #e7efd9 100%) !important;
  color: #45604a !important;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Noto Sans KR", "Noto Sans JP", monospace !important;
  font-size: clamp(9px, 1.05vw, 12px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 0 rgba(60,88,62,.12) !important;
  touch-action: manipulation !important;
}

.ch-lobby-inline-bgm:active,
.ch-lobby-inline-controls:active {
  transform: translateY(1px);
}

@media (pointer: coarse), (max-width: 900px) {
  .ch-lobby-actions-title-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .ch-lobby-inline-actions {
    gap: 4px !important;
    max-width: min(56vw, 220px) !important;
  }

  .ch-lobby-inline-bgm,
  .ch-lobby-inline-controls {
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: clamp(8px, 2.05vw, 10.5px) !important;
  }
}

@media (max-width: 420px) {
  .ch-lobby-actions-title-row {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .ch-lobby-inline-actions {
    justify-content: flex-start !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ============================================================
   v0.10.10.229 — fixed phase chat + paint cleanup
   ============================================================ */

/*
 * Paint -> Hunt must not make the chat jump from top-left to bottom-left.
 * Keep the panel at the exact same canvas anchor in both phases so it stays
 * clear of the bottom paint palette and does not visually "teleport".
 */
.colorhunt-chat.colorhunt-chat--hunt:not(.colorhunt-chat--focused) {
  top: var(--chat-canvas-top) !important;
  left: var(--chat-canvas-left) !important;
  bottom: auto !important;
  transform: none !important;
}

@media (pointer: fine) {
  .colorhunt-chat.colorhunt-chat--hunt,
  .colorhunt-chat.colorhunt-chat--hunt.colorhunt-chat--focused {
    top: var(--chat-canvas-top) !important;
    left: var(--chat-canvas-left) !important;
    bottom: auto !important;
    transform: none !important;
    width: min(var(--chat-panel-width), 300px) !important;
    max-height: min(var(--chat-panel-max-height), 148px) !important;
  }
}


/* V10102386_FOLD_LOBBY_ROOM_HEADER */
/*
 * Fold / narrow-tablet lobby:
 * Some older mobile rules hide .ch-lobby-room-head entirely.
 * Keep the column header visible so "방 이름 / 맵 / 인원 / 상태" remains
 * understandable on Fold inner screens as well as desktop.
 */
@media (min-width: 540px) and (max-width: 1100px) {
  .ch-lobby-room-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.9fr)
      minmax(64px, .75fr)
      minmax(62px, .6fr)
      minmax(72px, .72fr)
      42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;

    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 12px !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;

    color: #5f7164 !important;
    font-size: clamp(10px, 1.8vw, 12px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  .ch-lobby-room-head > span {
    display: block !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  /*
   * Keep room rows on the exact same five-column grid as the header.
   * This avoids the Fold-only "header says one thing, cells sit elsewhere"
   * look when portrait/inner-screen media rules are active.
   */
  .ch-lobby-room-row {
    grid-template-columns:
      minmax(0, 1.9fr)
      minmax(64px, .75fr)
      minmax(62px, .6fr)
      minmax(72px, .72fr)
      42px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .ch-lobby-room-map,
  .ch-lobby-room-count,
  .ch-lobby-room-status {
    display: block !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }
}

/*
 * Very narrow folded/phone portrait layout:
 * The dedicated table header is intentionally kept as a compact 4-column row.
 * Room name itself already carries the thumbnail; the action button keeps a
 * fixed final slot.
 */
@media (max-width: 539px) {
  .ch-lobby-room-head {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.7fr)
      minmax(44px, .7fr)
      minmax(44px, .62fr)
      minmax(52px, .72fr)
      34px !important;
    gap: 4px !important;
    padding: 6px 7px !important;
    min-height: 30px !important;

    visibility: visible !important;
    opacity: 1 !important;

    font-size: 9px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }

  .ch-lobby-room-head > span {
    display: block !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .ch-lobby-room-row {
    grid-template-columns:
      minmax(0, 1.7fr)
      minmax(44px, .7fr)
      minmax(44px, .62fr)
      minmax(52px, .72fr)
      34px !important;
    gap: 4px !important;
  }
}


/* V101023813_LANGUAGE_FLAG_SVG */
/*
 * Real inline flag SVGs instead of OS-dependent emoji.
 * Fixes Windows Chrome showing KR / JP / US / CN letters or blank glyphs.
 */
.ch-lobby-language .ch-language-flag-wrap {
  display: inline-flex !important;
  width: 20px;
  height: 14px;
  margin-right: 6px !important;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ch-lobby-language .ch-language-flag {
  display: block;
  width: 20px;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(47, 73, 55, .22);
  border-radius: 2px;
  box-sizing: border-box;
  background: #fff;
}

.ch-lobby-language button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ch-lobby-language button.is-active .ch-language-flag {
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(42,87,52,.14);
}

@media (max-width: 760px) {
  .ch-lobby-language .ch-language-flag-wrap {
    width: 16px;
    height: 11px;
    margin-right: 4px !important;
  }

  .ch-lobby-language .ch-language-flag {
    width: 16px;
    height: 11px;
  }
}


/* V101023816_LOBBY_ACTION_TITLE_NO_CLIP */
/*
 * Lobby right-column heading:
 * Japanese/English translations are wider than Korean and were being clipped
 * by the BGM / Controls buttons. Keep everything on one row, but let the title
 * own a flexible min-width and scale down slightly when space is tight.
 */
.ch-lobby-actions-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ch-lobby-actions-title-row h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none !important;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(15px, 1.55vw, 20px) !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ch-lobby-inline-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  min-width: max-content;
}

/* On narrower desktop/fold widths, preserve the buttons and gently reduce
   only the heading. No wrapping, so the lobby frame height never changes. */
@media (max-width: 1120px) {
  .ch-lobby-actions-title-row h2 {
    font-size: clamp(14px, 1.65vw, 18px) !important;
    letter-spacing: -0.035em;
  }

  .ch-lobby-actions-title-row {
    gap: 6px;
  }

  .ch-lobby-inline-actions {
    gap: 4px;
  }
}


/* V1010238162_ENGLISH_LOBBY_START_FIT */
/*
 * English-only final fit.
 *
 * START GAME is wider than the KO/JA/ZH labels. The BGM + Controls group is
 * intentionally kept unchanged; only the English heading is compacted enough
 * to leave a real visual gap instead of letting the BGM chip cover the final E.
 *
 * No frame height / button position / other language layout changes.
 */
.ch-lobby-actions-title-row h2.ch-lobby-start-title--en {
  font-size: 14px !important;
  letter-spacing: -0.045em !important;
  padding-right: 5px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Give the English title a few more pixels on normal desktop without
   changing the overall right panel width. */
.ch-lobby-actions-title-row:has(
  h2.ch-lobby-start-title--en
) {
  gap: 4px !important;
}

.ch-lobby-actions-title-row:has(
  h2.ch-lobby-start-title--en
) .ch-lobby-inline-actions {
  gap: 4px !important;
}


/* V101023822_PRACTICE_RULE_FLOW_TEXT_SIZE */
/*
 * Practice intro HIDER / HUNTER cards
 * ------------------------------------
 * The labels were visually too small compared with the rest of the intro.
 * Increase them for every language without changing the card/frame geometry.
 */
.colorhunt-practice-rule-flow > span {
  font-size: clamp(15px, 1.55vw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Keep VS balanced with the larger labels. */
.colorhunt-practice-rule-flow > b {
  font-size: clamp(14px, 1.35vw, 17px) !important;
  font-weight: 900 !important;
}

/*
 * On narrower Fold/mobile landscape layouts, still make the labels larger
 * than before but scale them just enough to prevent Japanese/English text
 * from breaking the two-card frame.
 */
@media (max-width: 900px) {
  .colorhunt-practice-rule-flow > span {
    font-size: clamp(13px, 2.15vw, 16px) !important;
    letter-spacing: -0.025em;
  }

  .colorhunt-practice-rule-flow > b {
    font-size: 13px !important;
  }
}