/* Moduł StanCraft. Wszystkie klasy z prefiksem sc-, żeby nie kolidowały z resztą portalu. */
.sc-page{
  --sc-red:var(--accent,#e0112c);
  --sc-ink:#0b0b0c;
  --sc-bone:#f1ece4;
  --sc-smoke:#8f8784;
  --sc-line:rgba(224,17,44,.35);
  --sc-grass:#5fa83a;
  padding-top:28px;padding-bottom:56px;
}
.sc-page [hidden]{display:none !important}
.sc-head{margin-bottom:18px}
.sc-h1{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;font-size:2.1rem;margin:4px 0 0}
.sc-h1 small{font-size:.55em;color:var(--sc-smoke);letter-spacing:.08em}
.sc-lead{max-width:70ch;color:#cfc8c0;line-height:1.55;margin:8px 0 0}

.sc-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}
@media (max-width:980px){.sc-layout{grid-template-columns:minmax(0,1fr)}}

.sc-game{display:flex;flex-direction:column;gap:12px;min-width:0}
.sc-stage{
  position:relative;width:100%;aspect-ratio:16/10;min-height:420px;
  border:1px solid rgba(224,17,44,.6);background:var(--sc-ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 28px rgba(224,17,44,.25);
  overflow:hidden;
}
.sc-stage:fullscreen,.sc-stage:-webkit-full-screen{width:100vw;height:100vh;aspect-ratio:auto;border:0}
.sc-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

.sc-start{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:20px;color:var(--sc-bone);
  background:
    radial-gradient(ellipse at 50% 120%,rgba(95,168,58,.35),transparent 60%),
    linear-gradient(180deg,#14161c 0%,#0b0b0c 100%);
}
.sc-cube{
  width:64px;height:64px;display:block;
  background:linear-gradient(180deg,var(--sc-grass) 0 28%,#7a5232 28% 100%);
  box-shadow:inset -8px -8px 0 rgba(0,0,0,.25),0 0 0 3px #000;
  image-rendering:pixelated;animation:sc-bob 2.4s ease-in-out infinite;
}
@keyframes sc-bob{50%{transform:translateY(-6px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.sc-cube{animation:none}}
.sc-go{
  font-family:var(--font-display);font-size:28px;letter-spacing:.08em;
  background:var(--sc-red);color:#fff;border:0;padding:12px 38px 9px;cursor:pointer;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
}
.sc-go:hover{filter:brightness(1.15)}
.sc-note{max-width:46ch;color:#cfc8c0;line-height:1.5;margin:0;font-size:14px}
.sc-note code{font-size:12px;word-break:break-all}
.sc-touch{color:var(--sc-bone);font-weight:600}

.sc-bar{display:flex;gap:10px;flex-wrap:wrap}
.sc-btn{
  font:600 13px var(--font-body);color:var(--sc-bone);background:transparent;text-decoration:none;
  border:1px solid var(--sc-line);border-radius:999px;padding:8px 14px;cursor:pointer;
}
.sc-btn:hover:not([disabled]){border-color:var(--sc-red)}
.sc-btn[disabled]{opacity:.4;cursor:default}
.sc-ghost{border-style:dashed}
.sc-page button:focus-visible,.sc-page a:focus-visible{outline:2px solid var(--sc-bone);outline-offset:2px}

.sc-side{border:1px solid var(--sc-line);padding:18px 18px 14px;background:rgba(11,11,12,.55)}
.sc-side h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:0 0 10px;letter-spacing:.04em}
.sc-keys{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.sc-keys li{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--sc-smoke)}
.sc-keys span{margin-left:6px;color:#cfc8c0}
.sc-keys kbd{
  font:600 11px var(--font-body);color:var(--sc-bone);background:#1a1b20;
  border:1px solid #33343b;border-bottom-width:2px;border-radius:3px;padding:2px 6px;min-width:20px;text-align:center;
}
.sc-info{font-size:13px;line-height:1.5;color:#cfc8c0;margin:0 0 10px}
.sc-credits{font-size:11px;line-height:1.5;color:var(--sc-smoke);margin:12px 0 0;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}