/* gkw.games/ascenseur — the game's own "Signal" look on the web.
   Paper, ink and one vermilion; zero radius, hard offset shadows, Archivo only.
   Source of truth: ascenseur-game/Scripts/DesignTokens.gd.
   The demo board has its own file (ascenseur-demo.css). */

[data-theme="paper"]{
  --paper:#F3F2F2;
  --ink:#201E1D;
  --signal:#EC3013;          /* DesignTokens.ACCENT: the car, slots, chips */
  --field:#DD2B0F;           /* one step darker for red fields behind white text: 4.7:1 */
  --signal-text:#AE1800;     /* accent as body-size text on paper: 6.4:1 */
  --muted:#605D5D;           /* readable muted; the game's #7D7979 is 3.8:1 on paper */
  --locked:#EAE9E9;
  --rule-soft:#D7D3D3;
  --stair:#1B46C2;
  --patience:#FF8C33;
  --shadow-soft:rgba(32,30,29,.30);
  --shadow-bar:rgba(32,30,29,.35);
  --tint:rgba(32,30,29,.04);
  --hatch:rgba(32,30,29,.10);

  /* shell roles */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-dim:var(--muted);
  --surface:#fff;
  --rule:rgba(32,30,29,.16);
  --line-strong:rgba(32,30,29,.4);
  --link:var(--signal-text);
  --focus:var(--stair);
  --wordmark-dot:var(--signal);
  --current:var(--signal);

  --game:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
[data-theme="paper"] body{font-family:var(--game)}
/* the shared shell keeps the studio face so the nav does not jump between pages */
[data-theme="paper"] .site-nav a,[data-theme="paper"] .site-footer h2{font-family:var(--body)}
[data-theme="paper"] ::selection{background:var(--signal);color:#fff}
[data-theme="paper"] .site-footer .manref{font-family:var(--game);font-size:.8rem;letter-spacing:0}

/* ————— shared game-UI atoms ————— */
.chip{display:inline-block;font:800 .72rem/1 var(--game);letter-spacing:.1em;text-transform:uppercase;padding:.42rem .6rem;color:#fff;box-shadow:2px 2px 0 var(--shadow-soft);white-space:nowrap}
.chip-ink{background:var(--ink);transform:rotate(-2deg)}
.chip-alarm{background:var(--field);transform:rotate(2deg)}
.chip-stair{background:var(--stair);transform:rotate(2deg)}
/* the game blinks the whole chip; on the web only the red pulses so the text keeps its contrast */
@media (prefers-reduced-motion:no-preference){.chip-alarm{animation:alarmpulse 2.4s ease-in-out infinite}}
@keyframes alarmpulse{0%,100%{background-color:var(--field)}50%{background-color:#A81E08}}

/* ————— lobby: the main menu as a hero ————— */
.lobby{background:var(--field);color:#fff;--focus:#fff;overflow:hidden}
.lobby-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.2rem,6vw,4.5rem) clamp(2.6rem,6vw,4.5rem)}
@media (max-width:900px){.lobby-in{grid-template-columns:minmax(0,1fr)}}
.status{display:flex;align-items:flex-start;gap:.6rem;font:800 .9rem/1.3 var(--game);letter-spacing:.14em;text-transform:uppercase}
.status .dot{width:10px;height:10px;background:#fff;flex:none;margin-top:.3em}
@media (prefers-reduced-motion:no-preference){.status .dot{animation:dotblink 1.2s ease-in-out infinite}}
@keyframes dotblink{0%,100%{opacity:1}50%{opacity:.25}}
.title{font:800 clamp(4.4rem,15vw,9.6rem)/.86 var(--game);letter-spacing:-.025em;text-transform:uppercase;margin:1.4rem 0 1.3rem;margin-left:-.04em}
/* two columns: size the title to its own column, not the viewport */
@media (min-width:901px){.lobby-copy{container-type:inline-size}.title{font-size:min(9.6rem,27cqw)}}
.title span{display:block}
.tagline{font:500 clamp(1.15rem,2.3vw,1.4rem)/1.45 var(--game);max-width:30ch}
.chips{display:flex;flex-wrap:wrap;gap:.7rem .8rem;list-style:none;margin-top:1.6rem}
.chips li{font:800 .85rem/1 var(--game);letter-spacing:.1em;text-transform:uppercase;border:2.5px solid #fff;padding:.5rem .7rem}
.chips li:nth-child(4n+1){transform:rotate(-2deg)}
.chips li:nth-child(4n+2){transform:rotate(1.5deg)}
.chips li:nth-child(4n+3){transform:rotate(-1.5deg)}
.chips li:nth-child(4n+4){transform:rotate(2deg)}

/* store bars: the PLAY bar recipe (white fill, ink label flush left, 7px ink@35% shadow) */
.stores{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;margin-top:2rem}
.store{display:flex;flex-direction:column;justify-content:center;min-width:13rem;min-height:4.1rem;padding:.55rem 1.1rem .6rem;background:#fff;color:var(--ink);text-decoration:none;box-shadow:7px 7px 0 var(--shadow-bar);transition:transform .06s ease-out,box-shadow .06s ease-out}
.store-when{font:600 .78rem/1.2 var(--game);letter-spacing:.04em}
.store-name{font:800 1.35rem/1.1 var(--game);letter-spacing:.02em}
.store:hover{color:var(--ink)}
.store[href]:active{transform:translate(5px,5px);box-shadow:2px 2px 0 var(--shadow-bar)}
.store.is-soon{cursor:default}
.store.is-soon .store-when{color:var(--muted)}
.store:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.lobby .store:focus-visible,.takeover .store:focus-visible{outline-color:#fff}

.lobby-demo{justify-self:center;width:100%;max-width:26rem;container-type:inline-size}
/* Reserve the board before the module mounts, or the whole hero jumps (board = clamp(300, 1.12w, 470) + chrome). */
.lobby-demo .demo{min-height:calc(clamp(300px, 112cqw, 470px) + 262px)}
/* a hard ink edge so the red intro card never melts into the red hero */
.lobby .dm{box-shadow:0 0 0 3px var(--ink),8px 8px 0 var(--shadow-bar)}
.demo-cap{font:600 .95rem/1.45 var(--game);margin-top:1.3rem;max-width:34ch}
@media (max-width:900px){.lobby-demo{justify-self:start}}
@media (min-width:640px) and (max-width:900px){
  .lobby-demo{max-width:none;container-type:normal;display:grid;grid-template-columns:26rem minmax(0,1fr);gap:2rem;align-items:end}
  .lobby-demo .demo{min-height:calc(clamp(300px, 26rem * 1.12, 470px) + 262px)}
  .demo-cap{margin:0}
}

/* ————— sections ————— */
.sect{padding-top:clamp(4rem,9vw,6.5rem)}
.sect-title{font:800 clamp(2.1rem,5.4vw,3.4rem)/.95 var(--game);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:1.6rem;max-width:18ch;text-wrap:balance}
.sect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:end;margin-bottom:2.2rem}
.sect-head .sect-title{margin-bottom:0}
.sect-lede{color:var(--muted);font-size:1.1rem;max-width:44ch}
@media (max-width:820px){.sect-head{grid-template-columns:minmax(0,1fr)}}

/* how it plays: three tiles numbered like plan slots */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;list-style:none}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr);max-width:32rem}}
.step{position:relative;background:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:1.5rem 1.4rem 1.4rem}
.step-n{display:grid;place-items:center;width:3rem;height:3rem;background:var(--signal);color:#fff;font:800 1.5rem/1 var(--game);box-shadow:3px 3px 0 var(--shadow-soft);margin-bottom:1.1rem}
.step:nth-child(1) .step-n{transform:rotate(-2deg)}
.step:nth-child(2) .step-n{transform:rotate(1.5deg)}
.step:nth-child(3) .step-n{transform:rotate(-1.5deg)}
.step h3{font:800 1.3rem/1.2 var(--game);letter-spacing:-.01em;margin-bottom:.45rem}
.step p{color:var(--muted)}

/* the ladder, drawn as a building: 4px ink rules, tinted odd floors, a shaft */
.building{list-style:none;border-top:4px solid var(--ink);position:relative}
.band{position:relative;display:grid;grid-template-columns:8.5rem 3.5rem minmax(0,1fr) minmax(0,15rem);gap:0 1.5rem;align-items:center;min-height:7.2rem;padding:1.1rem 0;border-bottom:4px solid var(--ink)}
.band:nth-child(even){background:var(--tint)}
.band::before{content:'';grid-column:2;grid-row:1;align-self:stretch;margin-block:-1.1rem;background:var(--locked);border-inline:3px solid var(--ink)}
.band-lv{grid-column:1;grid-row:1;font:800 2.6rem/.95 var(--game);letter-spacing:-.02em;padding-left:.2rem}
.band-lv span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.band-body{grid-column:3;grid-row:1}
.band-body h3{font:800 1.3rem/1.2 var(--game);margin-bottom:.3rem}
.band-body p{color:var(--muted);max-width:46ch}
.band-art{grid-column:4;grid-row:1;justify-self:end;display:flex;gap:.8rem;align-items:flex-end;padding-right:.4rem}
.band-art .fig-wrap{margin-bottom:-.35rem}
.band-closed{background:repeating-linear-gradient(135deg,var(--hatch) 0 8px,transparent 8px 12.73px)!important}
.band-alarm .band-lv{color:var(--signal)}
/* the car waits on the first floor of the ladder, where every player starts */
.band:first-child::after{content:'';position:absolute;left:calc(8.5rem + 1.5rem + 5px);bottom:0;width:calc(3.5rem - 10px);height:2.9rem;background:var(--signal);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow-soft),inset 0 -6px 0 var(--ink);background-image:linear-gradient(var(--ink),var(--ink));background-size:3px 100%;background-position:center;background-repeat:no-repeat}
@media (max-width:820px){
  .band{grid-template-columns:5.6rem minmax(0,1fr);gap:.4rem 1rem;align-items:start}
  .band::before,.band:first-child::after{display:none}
  .band-lv{font-size:1.75rem;white-space:nowrap}
  .band-body{grid-column:2}
  .band-art{grid-column:2;grid-row:2;justify-self:start;padding:0;margin-top:.5rem;flex-wrap:wrap;max-width:100%}
}

/* the small figures in the ladder art (symbol #rider in ascenseur.html) */
.rider-shirt{fill:var(--shirt,#7A8AA0)}
.rider-skin{fill:var(--skin,#F0C9A2)}
.rider-hair{fill:var(--hair,#2B2320)}
.rider-hair-cap{stroke:var(--hair,#2B2320)}
.fig{width:30px;height:51px;overflow:visible}
.fig-heavy{width:40px;height:68px}
.fig-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.flag{font:800 .78rem/1 var(--game);letter-spacing:.045em;color:#fff;background:var(--field);padding:.22rem .34rem;box-shadow:2px 2px 0 var(--shadow-soft)}
.count{position:absolute;left:-1.1rem;top:1.35rem;font:800 1rem/1 var(--game);color:var(--patience);-webkit-text-stroke:.5px var(--ink)}
.slots{display:inline-flex;gap:5px;padding:7px;background:var(--signal);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow-soft)}
.slots i{width:11px;height:11px;border:2px solid rgba(255,255,255,.75)}
.slots i.on{background:#fff;border-color:#fff}

/* screenshots: tilted tiles with hard ink shadows */
.shots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;list-style:none;max-width:var(--wrap);margin-inline:auto;padding:1rem var(--gutter) 1.5rem}
.shots li{min-width:0}
.shots img{width:100%;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper)}
.shots li:nth-child(4n+1) img{transform:rotate(-2deg)}
.shots li:nth-child(4n+2) img{transform:rotate(1.5deg)}
.shots li:nth-child(4n+3) img{transform:rotate(-1.5deg)}
.shots li:nth-child(4n+4) img{transform:rotate(2deg)}
.shots p{font:800 .95rem/1.25 var(--game);margin-top:1.1rem;max-width:18ch;text-wrap:balance}
@media (max-width:900px){
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:1.2rem;padding-bottom:1.8rem;scrollbar-width:thin}
  .shots li{flex:0 0 min(62vw,270px);scroll-snap-align:start}
}
.shots:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* the fine print */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 2rem}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}}
.facts > div{border-top:4px solid var(--ink);padding-top:.9rem}
.facts dt{font:800 1.15rem/1.25 var(--game);margin-bottom:.35rem}
.facts dd{color:var(--muted)}
.fair-links{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;margin-top:2.4rem}
.fair-links a{font:800 .9rem/1 var(--game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:#fff;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.9rem 1.1rem}
.fair-links a:hover{background:var(--ink);color:#fff}
.fair-links a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* closing takeover: the win screen's recipe */
.takeover{background:var(--field);color:#fff;--focus:#fff;margin-top:clamp(4.5rem,10vw,7rem);position:relative;overflow:hidden}
.takeover-in{padding-block:clamp(3rem,8vw,5.5rem);position:relative;z-index:1}
.takeover-title{font:800 clamp(2.6rem,8vw,5.4rem)/.92 var(--game);letter-spacing:-.02em;text-transform:uppercase;max-width:14ch}
.takeover-sub{font:600 1.2rem/1.45 var(--game);margin-top:1.1rem}
.takeover-links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.2rem;font:700 1rem/1.4 var(--game)}
.takeover-links a{color:#fff;text-decoration-thickness:2px}
.takeover::before,.takeover::after{content:'';position:absolute;width:16px;height:16px;background:#fff;top:18%;right:12%}
.takeover::after{background:var(--ink);width:24px;height:24px;top:62%;right:24%}
@media (max-width:700px){.takeover::before{top:1.2rem;right:1.2rem}.takeover::after{display:none}}

/* footer and header on paper */
[data-theme="paper"] .site-footer{margin-top:0}