/* ROLE_TALK_TOP_HERO_CONSOLIDATION_20261015
   Original Top design, limited layout improvement.
*/

/* Retain the existing background, borders and theme. */
#top .hero {
  display: grid !important;
  grid-template-columns:
    minmax(0,1fr) minmax(275px,.9fr) !important;
  align-items: center !important;
  gap: clamp(15px,3vw,34px) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(15px,2.2vw,25px) !important;
}

/* Compact left copy without removing its content. */
#top .hero-copy {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#top .hero-copy .eyebrow {
  margin-bottom: 8px !important;
}

#top .hero-copy h1 {
  font-size: clamp(25px,3vw,37px) !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
}

#top .hero-copy .intro {
  font-size: clamp(12px,1.1vw,14px) !important;
  line-height: 1.65 !important;
  margin-bottom: 7px !important;
}

/* The existing invitation panel now contains both actions. */
#top .hero .invitation {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 17px !important;
  margin: 0 !important;
}

#top .hero .invitation .section-kicker {
  display: block;
  margin-bottom: 4px !important;
  font-size: 10px !important;
}

#top .hero .invitation h2 {
  font-size: clamp(16px,1.7vw,20px) !important;
  line-height: 1.35 !important;
  margin: 0 0 5px !important;
}

#top .hero .invitation > p {
  font-size: 11px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}

/* Input and entrance action share a compact row. */
#top #code-form {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 132px;
  grid-template-areas:
    "label label"
    "input enter"
    "error error";
  align-items: stretch;
  gap: 5px 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#top #code-form label {
  grid-area: label;
  font-size: 11px !important;
  margin: 0 !important;
}

#top #code-form #code {
  grid-area: input;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  font-size: 13px !important;
}

#top #code-form #enter {
  grid-area: enter;
  display: block;
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 6px 7px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

#top #code-form #code-error {
  grid-area: error;
  margin: 0 !important;
  font-size: 11px !important;
}

#top #code-form #code-error:empty {
  display: none !important;
}

/* The room-creation action sits below the join form. */
#top .top-room-action {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(119,86,58,.25);
}

#top .top-room-action button {
  display: block;
  width: 100% !important;
  min-height: 35px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

/* The host card is removed; News uses available width. */
#top .bottom-grid {
  grid-template-columns: minmax(0,1fr) !important;
}

#top .bottom-grid .news {
  width: 100%;
  min-width: 0;
}

/* Preserve the existing dialog design. */
#top-host-required-dialog .dialog-body {
  max-width: 440px;
}

#top-host-required-dialog .dialog-body p {
  line-height: 1.75;
}

#top-host-required-dialog
#top-host-create-account {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
}

/* At narrow widths, never squeeze the controls. */
@media(max-width:750px) {
  #top .hero {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
    padding: 17px !important;
  }

  #top .hero-copy h1 {
    font-size: clamp(26px,6vw,36px) !important;
  }
}

@media(max-width:390px) {
  #top #code-form {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "label"
      "input"
      "error"
      "enter";
  }

  #top #code-form #enter {
    margin-top: 3px !important;
  }
}


/* ROLE_TALK_TOP_HERO_WIDTH_80 */

/* PC: 枠全体を80%に縮小して中央寄せ */
@media (min-width: 751px) {
  #top .hero {
    width: 80% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* スマートフォン: 操作性を優先 */
@media (max-width: 750px) {
  #top .hero {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* ROLE_TALK_TOP_WIDTH80_FIX_20261015 */

/* Normal and tablet screens */
@media (min-width: 601px) {
  html body #app main#top > section.hero {
    width: 80% !important;
    max-width: 80% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }
}

/* Small smartphones */
@media (max-width: 600px) {
  html body #app main#top > section.hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* ROLE_TALK_TOP_WIDTH_CAP_20261015 */

/* Desktop and tablet */
@media (min-width: 601px) {
  html body #app main#top > section.hero {
    width: 80% !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Small mobile screens */
@media (max-width: 600px) {
  html body #app main#top > section.hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* ROLE_TALK_HOW_SECTION_COMPACT_20261015 */
/* Reduce unnecessary vertical whitespace around the HOW TO PLAY block. */
html body #app main#top > section.hero + section.how{
  margin-top: 24px !important;
}

html body #app main#top > section.how{
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

html body #app main#top > section.how > .section-kicker,
html body #app main#top > section.how > .eyebrow,
html body #app main#top > section.how > p:first-child{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

html body #app main#top > section.how h2{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.22 !important;
}

html body #app main#top > section.how h2 + p{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

html body #app main#top > section.how .how-grid{
  margin-top: 0 !important;
  gap: 16px !important;
}

@media (max-width: 900px){
  html body #app main#top > section.hero + section.how{
    margin-top: 20px !important;
  }

  html body #app main#top > section.how h2{
    margin-bottom: 8px !important;
  }

  html body #app main#top > section.how h2 + p{
    margin-bottom: 14px !important;
  }

  html body #app main#top > section.how .how-grid{
    gap: 14px !important;
  }
}