/* Typer page: the configurator up top, then the game, numbers, reviews, screens, badges. Tokens from base.css. */
.tp section[id]{scroll-margin-top:72px}

/* ---------- configurator ---------- */
.build{position:relative;min-height:calc(100dvh - 64px);overflow:hidden;isolation:isolate}
.build__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.build__layer{position:absolute;inset:0;background:var(--c,#FFFAED)}
.build__layer--next{clip-path:circle(0 at 50% 55%);opacity:0}
.build__layer--next.is-in{clip-path:circle(120vmax at 50% 55%);opacity:1;transition:clip-path 2.3s var(--ease)}
.build__in{max-width:1520px;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,24px);padding-top:clamp(18px,3vh,32px);padding-bottom:clamp(24px,4vh,40px)}
.build__head{display:flex;flex-direction:column;align-items:center;gap:12px}
.build__logo{margin:0;line-height:0}
.build__logo img{height:clamp(40px,4.6vw,60px);width:auto;display:block}
.build__grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,440px) minmax(260px,1fr);gap:clamp(20px,3vw,44px);align-items:center;width:100%}
.build__col:last-child{position:relative;z-index:3}
.build__col{display:flex;flex-direction:column;gap:clamp(56px,8vh,104px);min-width:0}
.build__col:first-child{align-items:flex-end}
.group{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.build__col:first-child .group{align-items:flex-end}
.group__t{display:none}
/* the parts float: no tile, no border, no shadow until you pick one */
.chips{display:flex;flex-wrap:nowrap;gap:clamp(13px,1.8vw,26px);align-items:center;padding:4px}
.build__col:first-child .group{align-items:flex-end}
.chip{--dy:0px;--rot:0deg;--sc:.9;position:relative;flex:0 1 83px;min-width:0;aspect-ratio:1;height:auto;background:none;border:0;padding:0;display:grid;place-items:center;overflow:visible;transform:translateY(var(--dy)) rotate(var(--rot))}
.chip img{width:100%;height:100%;object-fit:contain;pointer-events:none;transform:scale(var(--sc));transition:filter .18s var(--ease),transform .18s var(--ease)}
.chip:hover img{transform:scale(var(--sc)) translateY(-4px)}
.chip[aria-pressed="true"]{z-index:2}
.chip[aria-pressed="true"] img{transform:scale(calc(var(--sc) * 1.24));filter:drop-shadow(0 7px 8px rgba(27,24,21,.3))}
/* nothing sits on a ruled line: each slot leans a different way */
.chip:nth-child(1){--dy:6px;--rot:-9deg}
.chip:nth-child(2){--dy:-14px;--rot:5deg}
.chip:nth-child(3){--dy:11px;--rot:-3deg}
.chip:nth-child(4){--dy:-9px;--rot:8deg}
.chip:nth-child(5){--dy:14px;--rot:-6deg}
.chip--frame{--sc:1.26}
.chip--frame img{filter:drop-shadow(0 1px 1.5px rgba(27,24,21,.28))}   /* the white and grey cases would vanish on cream otherwise */
.chip--monitor,.chip--switch{--sc:.99}
/* the game's own Lo-Fi, sitting with the tags */
.lofi{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 13px 0 10px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--text-2);background:none;font:600 12.5px/1 var(--font-ui);white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.lofi svg{width:14px;height:14px;fill:currentColor;flex:none}
.lofi .lofi__stop{display:none}
.lofi[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.lofi[aria-pressed="true"] .lofi__play{display:none}
.lofi[aria-pressed="true"] .lofi__stop{display:block}
.lofi:hover{color:var(--text-1);border-color:var(--text-2)}
.lofi__t{max-width:15ch;overflow:hidden;text-overflow:ellipsis}

/* the sound toggle leads the switch row */
.chips .soundbtn{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;margin-right:8px;border-radius:50%;border:1.5px solid var(--line-strong);color:var(--text-2);background:none}
.soundbtn svg{width:19px;height:19px}
.soundbtn[aria-pressed="false"] .w{opacity:0}
.soundbtn:hover{background:var(--surface-hover);color:var(--text-1)}
.soundbtn.is-cue{animation:cue 1.1s var(--ease) 2}
@keyframes cue{35%{transform:scale(1.35);color:var(--accent)}}
.build__act{margin-top:6px}

/* the desk */
.desk{position:relative;width:100%;max-width:440px;margin:0 auto;clip-path:inset(-6% -15% -8% -14%)}
.monitor{position:relative;width:76%;margin:0 auto;aspect-ratio:1354/1222;z-index:1;container-type:inline-size}
.monitor__img{object-fit:contain;object-position:50% 100%}
.monitor__img{width:100%;height:100%;display:block}
.monitor__screen{position:absolute;inset:var(--inset,11% 9% 22% 9%);padding:5% 6%;overflow:hidden;color:var(--fg,#65CDA7);pointer-events:none}
.screen__text{margin:0;font:400 2.9cqw/1.35 var(--font-pixel);white-space:pre;letter-spacing:.02em}
.screen__text .caret{display:inline-block;width:.55em;height:1em;background:currentColor;vertical-align:-.1em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.desk__sculpture{position:absolute;left:-9%;bottom:-11%;width:25%;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(27,24,21,.12))}
.desk__kbwrap{position:relative;width:100%;margin-top:9%}
.desk__cable{position:absolute;left:85%;top:3%;width:82%;max-width:none;transform:translate(-4%,calc(-1 * var(--plug-y,86%)));z-index:2;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#000 50%,transparent 96%);mask:linear-gradient(90deg,#000 50%,transparent 96%)}
.desk__cable[hidden]{display:none}
.desk__kb{position:relative;z-index:3}
.desk__kb .tp-kb__cap{cursor:pointer}

/* ---------- screens, badges (numbers and reviews live in product.css, both pages use them) ---------- */
.tp .num b{font-family:var(--font-pixel);font-weight:400;letter-spacing:.02em}
.screens{width:100%;max-width:none;padding-left:0;padding-right:0}
.get{padding-bottom:20px}

@media (max-width:980px){
  .build__grid{grid-template-columns:1fr;gap:44px}
  .desk{order:-1;max-width:520px}
  .build__col,.build__col:first-child,.build__col:first-child .group{align-items:stretch}
  .build__col{gap:44px}
  .group__t{justify-content:flex-start}
  .build__col .group,.build__col:first-child .group{align-items:center}
  .chips{gap:16px}
  .chip{flex:0 1 70px}
  /* the mute button would shove the switch row off-centre: balance it with a spacer */
  .group[data-group="switch"] .chips::after{content:"";flex:0 0 42px}
  .chip--frame{--sc:1.44}
  .group[data-group="frame"]{padding:10px 0}
}
@media (prefers-reduced-motion:reduce){.chip,.build__layer--next.is-in{transition:none}.soundbtn.is-cue{animation:none}.screen__text .caret{animation:none}}