/*
 * minecraft.ku-saga.com: page layout on top of the Ku-saga Design System
 * (ds/tokens.css + ds/components.css, copied unchanged from tournament-clipper).
 * Semantic tokens only.
 */
:root{--color-qr-bg:var(--ks-white)} /* page-specific semantic token: QR codes need a white quiet zone */
main{display:grid;gap:var(--space-5);max-width:820px}
.hero{padding:var(--space-14) 0 var(--space-6)}
.hero h1{margin-bottom:var(--space-5)}

/* Copyable value rows (server address, port) */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-2);margin:var(--space-4) 0}
.values .list-row{flex-direction:row;align-items:center}
.values .list-row small{margin:0 0 var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.values .list-row strong{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--color-text)}
.values .list-row .button{width:auto}

/* Detected-device download */
.get{margin-top:var(--space-5)}
.get .hint{margin:0 0 var(--space-3)}
.get .button{white-space:normal}

/* QR for console players: keep it black on white so phones can scan it */
.qr{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-6);padding:var(--space-4);background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.qr img{width:132px;height:132px;flex:0 0 132px;padding:var(--space-2);background:var(--color-qr-bg);border-radius:var(--radius-md)}
.qr p{margin:0}

/* Numbered steps */
.steps{list-style:none;counter-reset:step;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-5)}
.steps>li{counter-increment:step;position:relative;padding-left:var(--space-14)}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-lg);background:var(--color-surface-raised);border:1px solid var(--color-accent-border);color:var(--color-accent);font-weight:var(--weight-black);font-size:var(--text-lg)}
.steps>li:nth-child(3n+1)::before{border-color:var(--color-brand-red);color:var(--color-brand-red)}
.steps>li:nth-child(3n)::before{border-color:var(--color-info-border);color:var(--color-text-info)}
.steps .values{margin-bottom:0}
.steps strong{color:var(--color-text)}
kbd{font-family:var(--font-mono);font-size:.95em;padding:2px var(--space-2);background:var(--color-surface-sunken);border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);color:var(--color-accent)}
.notice.key{margin-top:var(--space-6);font-size:var(--text-md)}
.tips{margin:var(--space-3) 0 0;padding-left:var(--space-5);color:var(--color-text-soft)}
.tips li{margin-bottom:var(--space-2)}
.tips-title{margin-top:var(--space-6)}

/* Install help: one disclosure per platform (larger than the DS default details) */
.install{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.install details{margin:0;padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-soft);font-size:var(--text-base)}
.install details[open]{border-color:var(--color-accent-border)}
.install summary{cursor:pointer;color:var(--color-text);font-weight:var(--weight-bold)}
.install details p{margin:var(--space-3) 0 0}
.install details ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.install details li{margin-bottom:var(--space-1)}
.install details code{display:inline}
a{color:var(--color-text-info)}
a.button{color:inherit}
a.button.primary{color:var(--color-text-on-accent)}

/* All downloads */
.downloads{margin-top:var(--space-4)}

@media(max-width:650px){
  .hero{padding:var(--space-10) 0 var(--space-4)}
  .values .list-row{flex-direction:row;align-items:center}
  .values .list-row .button{width:auto}
  .downloads .list-row{flex-direction:row;align-items:center}
  .downloads .list-row .button{width:auto}
  .qr{flex-direction:column;align-items:start}
  .values .list-row strong{font-size:var(--text-base);white-space:nowrap}
  .steps .values{margin-left:calc(var(--space-14) * -1)} /* use the full width under the step number */
}