/* games.wearecube.pl – one file, no external resources.
   Design language of https://wearecube.pl: white page, system sans-serif (same stack as wearecube.pl), Tailwind gray scale
   (gray-800 #1e2939 text/bands, gray-900 #101828 buttons), extrabold tight headings, light lead text, rounded-xl buttons
   (filled + 2px outline), dark navy band, dark 3-column footer. Kraina Smoków pages add the game's dragon frame on top. */
:root{--g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5dc;--g400:#99a1af;--g500:#6a7282;--g600:#4a5565;--g700:#364153;--g800:#1e2939;--g900:#101828;
  --red:#a3281c}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#fff;color:var(--g800);font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.wrap.wide{max-width:1120px}
a{color:var(--g900);text-decoration:underline;text-decoration-color:var(--g400);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#000;text-decoration-color:var(--g900)}
h1,h2,h3{line-height:1.2;color:var(--g800);letter-spacing:-.025em}
h1{font-size:clamp(1.75rem,4.5vw,2.25rem);font-weight:800;margin:.15em 0 .4em}
h2{font-size:1.35rem;font-weight:700;margin:2.1em 0 .6em}
h3{font-size:1.15rem;font-weight:600}
/* header: white bar, logo left, menu right (like wearecube.pl) */
.top{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--g200)}
.bar{max-width:1240px;margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:16px}
.nav a{color:var(--g800);text-decoration:none;font-weight:500}
.nav a:hover{color:#000}
/* language switch – looks like the PL/EN select on wearecube.pl: bg gray-700, text gray-300, 4px radius, small chevron */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 9px;border-radius:4px;background:var(--g700);color:var(--g300);font-weight:400;line-height:1;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:6px;height:6px;border:solid var(--g300);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.lang[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lang summary:focus-visible{outline:2px solid var(--g900);outline-offset:2px}
.lang-menu{position:absolute;right:0;top:36px;min-width:100%;background:var(--g700);border-radius:4px;padding:4px 0;box-shadow:0 6px 16px rgba(16,24,40,.2);z-index:60}
.nav .lang-menu a{display:block;padding:5px 12px;color:var(--g300);font-weight:400}
.nav .lang-menu a:hover,.nav .lang-menu a[aria-current]{background:var(--g600);color:#fff}
@media (min-width:860px){.bar{height:88px}.logo img{height:56px}.nav{gap:28px}.nav a{font-weight:400}html{scroll-padding-top:100px}}
/* buttons (wearecube.pl: px-10 py-4 rounded-xl font-bold, gray-900 filled / 2px outline) */
.btn{display:inline-block;padding:.85em 2em;border-radius:12px;background:var(--g900);color:#fff !important;text-decoration:none;font-weight:700;border:2px solid var(--g900);transition:transform .15s,background .15s;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.btn:hover{background:var(--g800);transform:scale(1.04)}
.btn-o{background:#fff;color:var(--g900) !important;box-shadow:none}
.btn-o:hover{background:var(--g50)}
/* landing */
.hero{text-align:center;padding:64px 0 56px;background:linear-gradient(180deg,#fff,var(--g50))}
.hero h1{font-size:clamp(2rem,5.5vw,2.6rem);margin:.1em 0 .35em}
.hero .lead{font-size:1.2rem;font-weight:300;color:var(--g600);max-width:42em;margin:0 auto 1.6em;line-height:1.6}
.kicker{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.kicker a{color:var(--g500);text-decoration:none}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0}
.band{background:var(--g800);color:var(--g300);text-align:center;padding:44px 20px 40px}
.band h2{color:var(--g300);font-size:clamp(2rem,6vw,3.2rem);font-weight:700;margin:0;letter-spacing:-.02em}
.band p{margin:.3em 0 0;color:var(--g400);font-size:1.5rem;letter-spacing:.05em}
.games{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:28px 0 8px}
.game{display:flex;flex-direction:column;background:var(--g800);color:var(--g300);border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(16,24,40,.18)}
.game .shot{line-height:0}
.game .shot img{display:block;width:100%;height:auto}
.game .info{padding:18px 22px 22px}
.game h3{margin:.1em 0 0;font-size:1.5rem;font-weight:700}
.game h3 a{color:#fff;text-decoration:none}
.game .tag{margin:.15em 0 .7em;color:var(--g400);font-weight:500;font-size:.95rem}
.game p{margin:.4em 0}
.game .links a:not(.btn){color:var(--g300);text-decoration-color:var(--g500)}
.game .links a:not(.btn):hover{color:#fff}
.game .btn{background:#fff;color:var(--g900) !important;border-color:#fff}
.game .btn:hover{background:var(--g100)}
.game .badge{background:#fff;color:var(--g900)}
.links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:16px 0 0}
.badge{display:inline-block;margin:.2em 0 .6em;padding:.25em .9em;border-radius:999px;background:var(--g900);color:#fff;font-size:.82rem;font-weight:600}
@media (min-width:900px){.games.solo{grid-template-columns:1fr}.solo .game{flex-direction:row}.solo .game .shot{flex:1.15}.solo .game .shot img{height:100%;object-fit:cover}.solo .game .info{flex:1;padding:28px 30px;align-self:center}}
/* Kraina Smoków pages: dragon top frame from the game's frame painting – head in the top-left corner, body along the top
   tapering into a tail at ~half the width (one image, no repeats). It sits above the text, never over it. */
.frame{line-height:0;pointer-events:none}
.frame img{display:block;width:clamp(300px,52vw,680px);height:auto}
main.framed .doc-head{padding-top:4px}
/* wide screens: the text column starts right of the head, so it may move up beside the head (still below the body/whiskers) */
@media (min-width:1280px){main.framed{margin-top:calc(clamp(300px,52vw,680px)*-.0872)}}
/* documents */
.doc-head{padding-top:28px}
.toc{background:var(--g50);border:1px solid var(--g200);border-radius:12px;padding:14px 20px;margin:20px 0 8px}
.toc p{margin:0 0 6px;font-weight:700;color:var(--g800)}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:2em;font-size:.95rem}
.toc li{break-inside:avoid}
.doc p,.doc li{max-width:72ch}
.doc a{overflow-wrap:anywhere}  /* long URLs (e.g. Google partner-sites) must not widen the page on phones */
.doc p{color:var(--g700)}
.doc strong{color:var(--g900)}
.doc ul{padding-left:1.3em}
.doc li{margin:.25em 0;color:var(--g700)}
.doc em{color:var(--g500)}
.doc h2{padding-top:.9em;border-top:1px solid var(--g200)}
.table{overflow-x:auto;margin:1em 0;border:1px solid var(--g200);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--g200)}
th{background:var(--g100);color:var(--g800);font-weight:600}
tr:last-child td{border-bottom:0}
code{background:var(--g100);padding:.05em .35em;border-radius:5px;font-size:.9em}
.totop{margin-top:2.5em;font-size:.95rem}
.cols{columns:2;column-gap:2em}
.cols li{break-inside:avoid}
.shotwide img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,.18)}
@media (max-width:560px){.toc ol,.cols{columns:1}.hero{padding:44px 0 40px}.hero .lead{font-size:1.1rem}.cta .btn{width:100%;max-width:320px}}
/* footer (wearecube.pl: gray-800, gray-300 text, 3 columns: logo / navigation / contact, centered copyright) */
footer{margin-top:64px;background:var(--g800);color:var(--g300);padding:36px 20px 26px;font-size:.95rem}
.fwrap{max-width:1120px;margin:0 auto;display:grid;gap:28px;grid-template-columns:1fr;text-align:center}
.fcol h3{color:var(--g300);font-size:1.1rem;font-weight:600;margin:0 0 12px;letter-spacing:0}
.fcol a{display:block;color:var(--g300);text-decoration:none;margin:4px 0}
.fcol a:hover{color:#fff}
.fcol p{margin:0 0 8px}
.fcol p a{display:inline}
.fcol strong{color:#fff;font-weight:600}
.flogo{display:inline-block}
.flogo img{height:64px;width:auto}
.copy{max-width:1120px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--g700);text-align:center;color:var(--g300);font-size:.9rem}
@media (min-width:860px){.fwrap{grid-template-columns:1fr 1fr 1fr;align-items:start}.fcol:first-child{align-self:center}}