/* ExtremePlay web - layout of the page sections: hero, join, features, first steps, extras, ranks, rules, footer. */

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid #000; }
.hero canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .wrap { position: relative; padding-block: clamp(36px, 7vw, 76px) 215px; display: grid; gap: 22px; justify-items: start; }
.logo { width: min(640px, 100%); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.tagline { margin: 0; font-family: var(--f-pixel); letter-spacing: 0.02em; font-size: clamp(23px, 3.2vw, 31px); line-height: 1.3; max-width: 34ch; text-shadow: 2px 2px 0 #000; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.facts { margin: 0; font-family: var(--f-pixel); font-size: 19px; letter-spacing: 0.02em; color: var(--mc-gray); text-shadow: 2px 2px 0 #000; }
/* ---------- sections ---------- */
/* subpages: a smaller hero with the page name */
.hero-small .wrap { padding-block: clamp(36px, 6vw, 64px) 200px; gap: 16px; }
.page-title { margin: 0; font-family: var(--f-pixel); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(46px, 8vw, 84px); line-height: 1;
  color: var(--mc-white); text-shadow: 4px 4px 0 #3F3F3F; text-wrap: balance; }

section { padding-block: clamp(56px, 8vw, 96px); }
section + section { border-top: 2px solid #000; }
/* join: Edit Server Info screen on dirt */
.join { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .join { grid-template-columns: minmax(0, 1fr); } }
.notes { display: grid; gap: 18px; margin: 18px 0 0; }
.notes dt { font-family: var(--f-pixel); font-size: 25px; letter-spacing: 0.02em; color: var(--mc-white); }
.notes dd { margin: 2px 0 0; color: var(--muted); max-width: 52ch; }
.notes dd .cmd { color: var(--ink); }
/* features: inventory + tooltip */
.inv-wrap { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; margin-top: 28px; }
@media (max-width: 860px) { .inv-wrap { grid-template-columns: minmax(0, 1fr); } }
.hint { font-family: var(--f-pixel); font-size: 19px; color: var(--muted); margin: 10px 0 0; }
/* first steps: chat */
.steps { display: grid; gap: 22px; margin-top: 30px; }
.step { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
@media (max-width: 760px) { .step { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.step h3 { margin: 0; font-family: var(--f-pixel); font-weight: 400; font-size: 27px; letter-spacing: 0.02em; }
.step p { margin: 4px 0 0; color: var(--muted); max-width: 46ch; }
.chatbg { background: linear-gradient(180deg, #24331C 0%, #1B2416 100%); }
/* extras: advancement toasts */
.toasts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin-top: 30px; }
@media (max-width: 760px) { .toasts { grid-template-columns: minmax(0, 1fr); } }
.toast:nth-child(even) { transform: translateY(18px); }
@media (max-width: 760px) { .toast:nth-child(even) { transform: none; } }
/* ranks: two item tooltips */
.base { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--f-pixel); font-size: 21px; letter-spacing: 0.02em; color: var(--muted); }
.base b { color: var(--ink); font-weight: 400; }
.ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: start; }
@media (max-width: 760px) { .ranks { grid-template-columns: minmax(0, 1fr); } }
.rank { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.rank .tooltip { max-width: none; }
.rank .tooltip .gap { height: 10px; }
.price { color: var(--mc-white); }
.fineprint { margin: 26px 0 0; color: var(--muted); max-width: 70ch; font-size: 16px; }
/* rules: written book */
.book { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.45)); }
@media (max-width: 760px) { .book { grid-template-columns: minmax(0, 1fr); } }
.book-foot { margin: 34px 0 0; color: var(--muted); max-width: 60ch; }
/* ---------- footer ---------- */
footer { background: var(--night-2); border-top: 2px solid #000; padding-block: 28px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer .left { display: grid; gap: 4px; }
footer .ver { font-family: var(--f-pixel); font-size: 19px; letter-spacing: 0.02em; color: var(--muted); }
footer .legal { margin: 0; font-size: 14px; color: #7E7476; max-width: 52ch; }