/* Browser City Tycoon — content pages (guides, FAQ, about, updates) */
:root{
  --ink:#16324f;--ink2:#3d5873;--sky:#9fdcf2;--sky2:#d8f1fb;--paper:#f6fbfe;--line:#d6e5f0;
  --coral:#ff7a59;--coral2:#c4482b;--teal:#2ec4b6;--grass:#5fae4a;--gold:#ffd978;
  --display:'Montserrat','Trebuchet MS',system-ui,sans-serif;--body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body)}
a{color:#0f6f8f;text-underline-offset:2px}
a:hover{color:var(--coral2)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{left:8px}

/* header: the isometric tile ground of the game */
.top{background:
  repeating-linear-gradient(26.565deg,transparent 0 31px,rgba(255,255,255,.35) 31px 32px),
  repeating-linear-gradient(-26.565deg,transparent 0 31px,rgba(255,255,255,.35) 31px 32px),
  linear-gradient(#8fd6ef,var(--sky));border-bottom:4px solid #fff}
.bar{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font:900 18px/1 var(--display);letter-spacing:.01em;color:#fffaf0;text-decoration:none;
  text-shadow:1px 1px 0 #153a63,2px 2px 0 #153a63,3px 3px 0 #0d2a4a}
.brand:hover{color:#fff}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;padding:5px;background:rgba(255,255,255,.88);border-radius:14px;box-shadow:0 4px 18px rgba(20,50,90,.18)}
.nav a{color:var(--ink);font:800 13px/1 var(--body);text-decoration:none;padding:8px 11px;border-radius:10px}
.nav a:hover{background:rgba(46,196,182,.18)}
.nav a[aria-current=page]{background:var(--ink);color:#fff}
.play{display:inline-block;font:800 15px/1 var(--body);color:#fff;text-decoration:none;padding:12px 20px;border-radius:13px;
  background:linear-gradient(#ffb36b,var(--coral));box-shadow:0 4px 0 var(--coral2),0 8px 18px rgba(0,0,0,.18)}
.play:hover{color:#fff;filter:brightness(1.05)}
.play:active{transform:translateY(2px);box-shadow:0 2px 0 var(--coral2)}
.bar .play{padding:10px 16px;font-size:14px}

.hero{max-width:1120px;margin:0 auto;padding:30px 20px 38px}
.crumbs{font:700 13px/1.4 var(--body);color:var(--ink2);margin:0 0 10px}
.crumbs a{color:var(--ink2)}
/* the one loud element: the game's logo treatment */
h1{font:900 clamp(30px,5.4vw,56px)/1.02 var(--display);margin:0;max-width:20ch;letter-spacing:.005em;
  color:#fff7e6;text-shadow:1px 1px 0 #153a63,2px 2px 0 #153a63,3px 3px 0 #153a63,4px 4px 0 #153a63,5px 6px 0 #0d2a4a,0 10px 18px rgba(0,0,0,.25)}
.lede{max-width:60ch;margin:18px 0 0;font-size:19px;line-height:1.55;color:#0f2a44;background:rgba(255,255,255,.82);padding:12px 16px;border-radius:14px}
.meta{margin:12px 0 0;font:700 13px/1.4 var(--body);color:#0f2a44}

/* article */
main{max-width:1120px;margin:0 auto;padding:34px 20px 60px}
.prose{max-width:70ch}
.prose h2{font:800 27px/1.2 var(--display);margin:46px 0 10px;color:var(--ink)}
.prose h3{font:800 19px/1.3 var(--display);margin:30px 0 6px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin:0 0 7px}
.prose strong{color:#0d2a4a}
kbd{font:800 13px/1 var(--body);background:#fff;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:2px 7px;white-space:nowrap}

figure{margin:28px 0 30px;max-width:960px}
figure img{width:100%;border-radius:14px;border:3px solid #fff;box-shadow:0 6px 24px rgba(20,50,90,.2);background:var(--sky2);aspect-ratio:16/10}
figcaption{font-size:14px;line-height:1.5;color:var(--ink2);margin:9px 4px 0;max-width:70ch}

.note{border-left:5px solid var(--teal);background:#fff;padding:12px 16px;border-radius:0 12px 12px 0;margin:0 0 18px;max-width:70ch}
.note p:last-child{margin:0}

table{width:100%;max-width:960px;border-collapse:collapse;margin:8px 0 26px;font-size:15px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(20,50,90,.08)}
th{background:var(--ink);color:#fff;text-align:left;font:800 13px/1.3 var(--body);padding:10px 12px}
td{padding:9px 12px;border-top:1px solid #e8f0f6;vertical-align:top}
tr:nth-child(even) td{background:#f8fbfd}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto;max-width:960px}

/* real sequences only */
ol.steps{list-style:none;counter-reset:s;padding:0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 4px 50px;margin:0 0 20px}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--coral);color:#fff;font:900 16px/34px var(--display);text-align:center;box-shadow:0 3px 0 var(--coral2)}
ol.steps h3{margin:0 0 4px}

/* guide index */
.guides{list-style:none;padding:0;margin:10px 0 0;max-width:960px}
.guides li{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center;padding:18px 0;border-bottom:2px dashed var(--line)}
.guides li:first-child{padding-top:4px}
.guides img{border-radius:12px;border:3px solid #fff;box-shadow:0 4px 14px rgba(20,50,90,.16);aspect-ratio:16/10}
.guides h2{font:800 21px/1.25 var(--display);margin:0 0 6px}
.guides h2 a{color:var(--ink);text-decoration:none}
.guides h2 a:hover{color:var(--coral2);text-decoration:underline}
.guides p{margin:0;color:var(--ink2);max-width:62ch}

.cta{margin:44px 0 0;padding:22px 24px;background:#fff;border-radius:16px;border:2px solid var(--line);max-width:70ch;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cta p{margin:0;flex:1 1 280px}
.next{margin:30px 0 0;max-width:70ch;font-weight:700}

details{background:#fff;border:2px solid var(--line);border-radius:12px;margin:0 0 10px;max-width:72ch}
summary{cursor:pointer;font:800 17px/1.4 var(--display);padding:13px 16px;list-style-position:outside}
details[open] summary{border-bottom:1px solid var(--line)}
details>div{padding:12px 16px 4px}

footer{background:var(--ink);color:#cfe0ee;font-size:14px}
footer .in{max-width:1120px;margin:0 auto;padding:26px 20px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
footer a{color:#fff}
footer .sp{flex:1}

@media (max-width:760px){
  body{font-size:16px}
  .nav{margin-left:0;width:100%}
  .guides li{grid-template-columns:1fr;gap:12px}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}