/* Home feel only. Play canvas (.app) stays full-bleed — do not phone-frame it. */

#title{
  background:
    linear-gradient(180deg,rgba(15,27,45,.7) 0%,rgba(15,27,45,.36) 38%,rgba(15,27,45,.84) 100%),
    #0F1B2D url("/img/play/yard-field.jpg") center bottom / cover no-repeat;
}

#title .scr-in{
  width:min(520px,94%);
  margin-top:18px;
}

#title .eyebrow{
  margin-top:6px;
  color:var(--gold);
  letter-spacing:.2em;
  font-size:.64rem;
  font-weight:800;
  opacity:.88;
}

#title h1{
  text-shadow:0 3px 0 #0a1320,0 0 26px rgba(232,169,60,.28);
}

#title .sub{
  max-width:22em;
  margin-left:auto;
  margin-right:auto;
  color:var(--cream);
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  text-shadow:0 1px 8px rgba(15,27,45,.7);
}

/* Plot of ground, not a HUD card. Inline border/bg on #yardCard. */
#title #yardCard.howto,
#title #yardCard{
  width:100%;
  margin-top:22px !important;
  padding:16px 2px 8px;
  border:0 !important;
  border-top:1px solid rgba(232,169,60,.34) !important;
  border-bottom:1px solid rgba(232,169,60,.18) !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  text-align:left;
}

#title #yardCard > h2{
  margin:0 0 6px;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:800;
}

#title #yardState{
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(1.4rem,5.4vw,1.9rem) !important;
  font-weight:400;
  letter-spacing:.015em;
  line-height:1.12;
  color:var(--cream);
  text-shadow:0 1px 0 #0a1320;
  margin:2px 0 0;
}

#title #yardMeta{
  margin:0 !important;
  color:rgba(244,239,228,.62) !important;
  font-size:.76rem !important;
  font-weight:650 !important;
  letter-spacing:.04em;
}
#title #yardMeta:empty{display:none}

/* Trench of Chandler dirt. Width is set in JS. */
#title #yardCard .goal{
  width:100% !important;
  height:22px;
  margin:14px 0 10px !important;
  border-radius:2px;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(15,27,45,.18) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#16110b 0%,#2a2218 52%,#14100b 100%);
  border:1px solid rgba(15,27,45,.8);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(244,239,228,.08);
}

#title #dirtBar,
#title #yardCard .goal i#dirtBar{
  display:block;
  height:100%;
  border-radius:0;
  background:
    repeating-linear-gradient(-22deg,rgba(244,239,228,.18) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(15,27,45,.14) 0 3px,transparent 3px 8px),
    linear-gradient(180deg,#d4b06a 0%,#c7861a 26%,#8a5a22 64%,#4a3014 100%);
  box-shadow:inset 0 1px 0 rgba(244,239,228,.22);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 16%,calc(100% - 4px) 36%,100% 56%,calc(100% - 7px) 78%,100% 100%,0 100%);
}

@media (prefers-reduced-motion:no-preference){
  #title #dirtBar{
    animation:dirt-grain 22s linear infinite;
    background-size:auto,auto,auto;
  }
}
@keyframes dirt-grain{
  to{background-position:14px 6px,-10px 0,0 0}
}

#title #btnDirty{
  display:inline-flex;
  align-items:center;
  margin-top:8px !important;
  padding:8px 0;
  min-height:44px;
  background:none;
  border:0;
  color:var(--gold);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  text-align:left;
  opacity:.9;
}
#title #btnDirty:hover,
#title #btnDirty:focus-visible{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Neighbor note — hidden until JS writes a name. */
#title #helpPing{
  width:100%;
  box-sizing:border-box;
  margin:12px 0 0 !important;
  padding:9px 12px 9px 14px;
  border-left:3px solid var(--gold);
  background:rgba(244,239,228,.08);
  color:var(--cream);
  font-size:.88rem;
  font-weight:650;
  text-align:left;
  line-height:1.4;
  border-radius:0 6px 6px 0;
}
#title #helpPing:empty{
  display:none;
  margin:0 !important;
  padding:0;
}

#title #btnPlay{
  margin-top:16px;
  width:100%;
  min-width:0;
}

#title .row{
  width:100%;
  margin-top:12px;
  gap:8px;
}
#title .row .btn{
  flex:1 1 148px;
  min-height:48px;
  font-size:.92rem;
}

#title #btnInvite{
  background:rgba(15,27,45,.38);
  border-color:rgba(232,169,60,.42);
  color:var(--cream);
}
#title #btnInvite:hover,
#title #btnInvite:focus-visible{
  border-color:var(--gold);
  color:#fff;
}

#title #inviteLine{
  width:100%;
  box-sizing:border-box;
  margin:12px 0 0;
  padding:11px 12px;
  background:rgba(244,239,228,.1);
  border:1px dashed rgba(232,169,60,.42);
  color:var(--cream);
  font-size:.84rem;
  font-weight:650;
  text-align:left;
  line-height:1.45;
  word-break:break-word;
  border-radius:6px;
}
#title #inviteLine:empty{display:none}

/* Recede the instructions. yardCard keeps its own type. */
.howto:not(#yardCard){
  background:transparent;
  border:0;
  padding:8px 0 0;
  margin:18px 0 4px;
  box-shadow:none;
}
.howto:not(#yardCard) h2{
  margin:0 0 6px;
  color:rgba(232,169,60,.62);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
}
.howto:not(#yardCard) ol{
  color:rgba(244,239,228,.64);
  font-size:.8rem;
  font-weight:600;
  line-height:1.5;
}
.howto:not(#yardCard) li{margin:0 0 6px}
.howto:not(#yardCard) .why{
  color:rgba(244,239,228,.88);
  font-size:.95rem;
  font-weight:700;
}

#title .how{
  color:rgba(244,239,228,.64);
  font-size:.8rem;
  font-weight:600;
}

#title .connect{
  background:rgba(15,27,45,.42);
  border-color:rgba(232,169,60,.22);
}
#title .connect input{
  font-size:16px;
}

@media (max-width:380px){
  #title .scr-in{width:min(520px,96%);margin-top:10px}
  #title #yardState{font-size:clamp(1.25rem,6vw,1.55rem) !important}
  #title #yardCard .goal{height:20px}
}

/* Title stays a centered column. Never shrink .app / the play field. */
@media (min-width:860px){
  #title{
    background:
      linear-gradient(90deg,rgba(15,27,45,.58) 0%,rgba(15,27,45,.2) 18%,rgba(15,27,45,.2) 82%,rgba(15,27,45,.58) 100%),
      linear-gradient(180deg,rgba(15,27,45,.56) 0%,rgba(15,27,45,.16) 36%,rgba(15,27,45,.72) 100%),
      #0F1B2D url("/img/play/yard-field.jpg") center bottom / cover no-repeat;
  }
  #title .scr-in{
    width:min(560px,86%);
    margin-top:28px;
  }
}