html:has(body.games-page) { height:100%; overflow:hidden; }
body.games-page {
  --os-purple:var(--tk-program); --os-paper:#f2f0ec; --text:var(--tk-ink); --muted:#686767;
  --glass-border:var(--tk-line); --glass:rgba(250,249,246,.7);
  --module-width:min(52vw,1040px); --module-top:clamp(102px,12svh,140px);
  --dock-height:clamp(112px,16svh,164px); --module-bottom:calc(var(--dock-height) * .644 + 12px);
  --module-height:calc(100svh - var(--module-top) - var(--module-bottom));
  --anchor:50vw; --next-offset:max(calc(var(--module-width) + 32px),calc(50vw + var(--module-width) * .07));
  margin:0; height:100svh; overflow:hidden; background:var(--os-paper); color:var(--tk-ink);
  font-family:var(--tk-sans); -webkit-font-smoothing:antialiased;
}
.games-page .site-header { z-index:40; }
.games-page a { color:inherit; text-decoration:none; }
.games-page :is(button,a):focus-visible { outline:2px solid var(--os-purple); outline-offset:5px; }
.os-stage { position:fixed; inset:0; overflow:hidden; }
.os-heading { position:absolute; top:calc(var(--module-top) + 8px); left:5.7vw; right:5.7vw; display:flex; justify-content:space-between; align-items:flex-start; }
.os-heading p { margin:0; font:11px var(--tk-mono); letter-spacing:.14em; }
.os-heading h1 { margin:12px 0 0; font-size:clamp(34px,3.7vw,68px); line-height:1; letter-spacing:-.06em; font-weight:850; }
.os-readout { display:grid; gap:8px; transform:translateY(-28px); text-align:right; font:11px var(--tk-mono); letter-spacing:.06em; color:#6f6d70; }
.os-readout .term-clock { color:inherit; }
.os-selector { position:absolute; inset:0; }
.os-selector::before { content:''; position:absolute; inset:80px 0 var(--dock-height); opacity:.38; background-image:linear-gradient(var(--tk-hair) 1px,transparent 1px),linear-gradient(90deg,var(--tk-hair) 1px,transparent 1px); background-size:96px 96px; mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 72%); pointer-events:none; }
.os-axis { position:absolute; left:var(--anchor); top:82px; bottom:var(--dock-height); border-left:1px dashed rgba(20,22,26,.09); }
.os-axis::before { content:'+'; position:absolute; top:-5px; left:-4px; color:#aaa7a3; font:12px var(--tk-mono); }
.os-selector-note { position:absolute; left:5.7vw; top:45%; display:grid; gap:12px; color:#777473; font:10px var(--tk-mono); letter-spacing:.08em; }
.os-selector-note span:first-child { color:var(--os-purple); }
.os-module {
  position:absolute; left:calc(var(--anchor) - var(--module-width) / 2); top:var(--module-top);
  width:var(--module-width); height:var(--module-height); border:1px solid rgba(20,22,26,.23); border-radius:16px;
  background:rgba(255,255,255,.4); box-shadow:inset 0 0 0 6px rgba(255,255,255,.32),0 24px 35px -34px rgba(20,22,26,.55);
  transition:transform 650ms var(--tk-ease),opacity 450ms,border-color 200ms,box-shadow 250ms;
}
.os-module::before,.os-module::after { content:''; position:absolute; width:5px; height:5px; border:1px solid #c6c2bd; border-radius:50%; top:15px; left:15px; transition:opacity 250ms; }
.os-module::after { left:auto; right:15px; }
.os-module[data-position="current"] { z-index:3; transform:translate(0,0); }
.os-module[data-position="next"] { z-index:2; transform:translate(var(--next-offset),34px); opacity:.72; }
.os-module[data-position="next"]:hover { opacity:1; border-color:rgba(112,96,168,.5); }
.os-module[data-position="hidden"] { visibility:hidden; pointer-events:none; transform:translate(calc(var(--next-offset) * 2),34px); opacity:0; }
.os-module.is-departing { --depart-x:calc(var(--next-offset) * 2); --depart-opacity:0; visibility:visible; pointer-events:none; animation:module-depart 650ms var(--tk-ease); }
.os-module.is-departing[data-position="next"] { --depart-x:var(--next-offset); --depart-opacity:.72; }
@keyframes module-depart { 0% { transform:translate(0,0); opacity:1; } 38% { transform:translate(-120px,12px); opacity:0; } 39% { transform:translate(calc(var(--depart-x) + 120px),34px); opacity:0; } 100% { transform:translate(var(--depart-x),34px); opacity:var(--depart-opacity); } }
.module-label { position:absolute; top:27px; left:32px; right:32px; display:flex; justify-content:space-between; font:11px var(--tk-mono); letter-spacing:.1em; color:#737073; transition:opacity 250ms; }
.module-type { display:flex; align-items:center; gap:10px; }
.module-light { width:5px; height:5px; border-radius:50%; background:#b9b4c1; }
.module-title { position:absolute; top:53px; left:32px; right:32px; margin:0; line-height:1.2; font-size:clamp(24px,2vw,32px); font-weight:650; letter-spacing:-.03em; transition:opacity 250ms; }
.module-title span { display:block; margin-top:6px; font:9px var(--tk-mono); letter-spacing:.1em; color:#757172; }
.module-window { position:absolute; left:32px; right:32px; top:116px; bottom:64px; overflow:hidden; background:rgba(232,228,222,.35); border:1px solid rgba(51,54,57,.3); border-radius:6px; box-shadow:0 1px 0 rgba(255,255,255,.9),0 0 0 3px rgba(71,68,63,.055); transition:box-shadow 350ms; }
.module-frame { display:block; position:absolute; top:0; left:0; border:0; transform-origin:0 0; pointer-events:none; opacity:0; transition:opacity 250ms; }
.os-module.is-ready .module-frame { opacity:1; }
/* A clear observation pane: recessed seat, bevelled edge and reflected light.
   All material layers sit above the preview; none change its geometry. */
.module-film { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; border-radius:inherit; border:1px solid; border-color:rgba(255,255,255,.95) rgba(59,66,72,.2) rgba(59,66,72,.28) rgba(255,255,255,.8); background:linear-gradient(150deg,rgba(45,57,65,.085),rgba(45,57,65,.025) 65%,rgba(255,255,255,.06)); box-shadow:inset 0 3px 4px rgba(35,39,43,.1),inset 3px 0 4px rgba(255,255,255,.35),inset 0 -3px 2px rgba(255,255,255,.65),inset -3px 0 2px rgba(255,255,255,.4); transition:opacity 350ms; }
.module-film::before { content:''; position:absolute; inset:-12% -16%; background:linear-gradient(118deg,transparent 28%,rgba(53,65,74,.065) 31%,rgba(255,255,255,.12) 32%,rgba(255,255,255,.52) 35%,rgba(255,255,255,.3) 45%,rgba(255,255,255,.04) 49%,transparent 51%,transparent 65%,rgba(255,255,255,.16) 66%,rgba(255,255,255,.72) 66.5%,rgba(255,255,255,.25) 67.2%,rgba(56,67,76,.06) 68%,transparent 69%); opacity:.9; transform:translateX(-7px); transition:transform 550ms var(--tk-ease-soft),opacity 350ms; }
.module-film::after { content:''; position:absolute; inset:3px; border:1px solid; border-color:rgba(255,255,255,.8) rgba(255,255,255,.18) rgba(58,65,71,.16) rgba(255,255,255,.5); border-radius:3px; }
body[data-os-state="selecting"] .os-module[data-position="current"]:has(.module-trigger:hover,.module-trigger:focus-visible) .module-film::before { transform:translateX(9px); opacity:1; }
.module-loading { position:absolute; inset:0; display:grid; place-items:center; font:10px var(--tk-mono); letter-spacing:.1em; color:#777; }
.os-module.is-ready .module-loading { display:none; }
.module-footer { position:absolute; bottom:27px; left:32px; right:32px; display:flex; justify-content:space-between; align-items:center; font:10px var(--tk-mono); letter-spacing:.07em; color:#757172; transition:opacity 250ms; }
.module-contact { width:95px; height:10px; background:repeating-linear-gradient(90deg,#c3bcb0 0 5px,transparent 5px 12px); opacity:.65; }
.module-trigger { position:absolute; inset:0; z-index:5; border:0; border-radius:16px; background:transparent; cursor:pointer; color:transparent; }
body[data-os-state="selecting"] .os-module[data-position="current"]:has(.module-trigger:hover,.module-trigger:focus-visible) { transform:translateY(-8px); border-color:rgba(112,96,168,.5); box-shadow:inset 0 0 0 6px rgba(255,255,255,.4),0 28px 38px -32px rgba(20,22,26,.55); }
.os-module[data-position="current"]:has(.module-trigger:hover,.module-trigger:focus-visible) .module-light { background:var(--os-purple); }
.os-dock { position:fixed; left:var(--anchor); bottom:0; transform:translateX(-50%); width:92vw; max-width:1840px; height:var(--dock-height); z-index:4; transition:opacity 400ms; }
.dock-machine { position:absolute; inset:0; }
.dock-shell { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dock-shell path { fill:#e7e4df; stroke:#c4c0bb; stroke-width:1; vector-effect:non-scaling-stroke; }
.dock-mouth { position:absolute; left:calc(50% - var(--module-width) / 2 - 12px); width:calc(var(--module-width) + 24px); top:calc(var(--dock-height) * .356 + 8px); height:7px; background:#a8a39d; border-radius:4px; box-shadow:0 1px 0 #faf9f6,inset 0 2px 2px rgba(20,22,26,.13); transition:background 180ms; }
.dock-progress { position:absolute; left:calc(50% - var(--module-width) / 2 + 20px); width:calc(var(--module-width) - 40px); top:calc(var(--dock-height) * .356 + 23px); height:3px; background:#d4cfc9; overflow:hidden; border-radius:2px; }
.dock-progress span { display:block; width:100%; height:100%; background:var(--os-purple); transform:scaleX(0); transform-origin:left; }
.dock-label { position:absolute; top:calc(var(--dock-height) * .356 + 38px); left:calc(50% - var(--module-width) / 2 + 20px); width:calc(var(--module-width) - 40px); display:flex; justify-content:space-between; color:#77726f; font:9px var(--tk-mono); letter-spacing:.08em; }
.dock-identity { position:absolute; top:34%; left:3%; display:flex; align-items:center; gap:12px; font:9px/1.7 var(--tk-mono); letter-spacing:.06em; color:#7e7771; }
.dock-identity i { width:30px; height:30px; border:1px solid #b4ada5; border-radius:50%; box-shadow:inset 0 0 0 6px #e7e4df,inset 0 0 0 7px #c4beb7; }
.dock-vents { position:absolute; right:3%; top:34%; width:96px; height:30px; border-top:1px solid #bdb6ae; border-bottom:1px solid #f8f6f2; background:repeating-linear-gradient(90deg,transparent 0 5px,#c8c1b9 5px 7px); opacity:.6; }
.os-selector:has([data-position="current"] .module-trigger:hover,[data-position="current"] .module-trigger:focus-visible) .dock-mouth { background:var(--os-purple); }
.os-details { position:absolute; left:5.7vw; top:59%; width:15vw; max-width:220px; display:grid; gap:12px; }
.os-index { font:10px var(--tk-mono); color:var(--os-purple); }
.os-description { margin:0; font-size:11px; line-height:1.9; color:#716e6c; }
.os-instructions { margin:16px 0 0; font-size:10px; line-height:1.8; color:#7d7874; }
.os-footer { position:absolute; bottom:15px; left:5.7vw; right:5.7vw; z-index:5; display:flex; justify-content:space-between; gap:15px; font:8px var(--tk-mono); letter-spacing:.07em; color:#827d78; pointer-events:none; }
.os-system-status { color:#716b7b; }
.os-exit { display:none; position:absolute; right:20px; top:13px; z-index:8; padding:7px 11px; border:1px solid var(--tk-line); border-radius:3px; background:rgba(255,255,255,.65); color:var(--tk-ink); font:11px var(--tk-mono); cursor:pointer; }
.os-heading,.os-details,.os-footer,.os-selector-note { transition:opacity 350ms; }
body[data-os-state="inserting"] .dock-progress span { animation:os-load 1670ms linear forwards; }
body[data-os-state="inserting"] .os-dock { z-index:35; }
body[data-os-state="inserting"] [data-position="current"] .module-light { animation:os-blink 500ms ease-in-out infinite; }
@keyframes os-load { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes os-blink { 0%,100% { background:var(--os-purple); opacity:1; } 50% { opacity:.25; } }
body:is([data-os-state="inserting"],[data-os-state="running"],[data-os-state="ejecting"]) :is(.os-heading,.os-details,.os-footer,.os-selector-note) { opacity:0; pointer-events:none; }
.os-module.is-expanded { position:fixed; z-index:30; transform:none; transition:background 350ms,border-color 350ms; background:var(--os-paper); border-color:transparent; box-shadow:none; border-radius:0; }
.os-module.is-expanded::before,.os-module.is-expanded::after { opacity:0; }
.os-module.is-expanded .module-label { top:18px; right:160px; opacity:1; color:#605969; }
.os-module.is-expanded :is(.module-title,.module-footer,.module-film) { opacity:0; }
.os-module.is-expanded .module-window { border-color:transparent; background:transparent; border-radius:0; box-shadow:none; }
body[data-os-state="running"] .is-expanded .os-exit { display:block; }
body[data-os-state="running"] .os-module.is-expanded .module-frame { pointer-events:auto; }
body:is([data-os-state="inserting"],[data-os-state="running"],[data-os-state="ejecting"]) .os-module[data-position="next"] { opacity:0; pointer-events:none; }
body[data-os-state="running"] .os-dock { opacity:0; pointer-events:none; }
body[data-os-state="running"] .os-module.is-expanded .module-light { background:var(--os-purple); }
body[data-os-state="ejecting"] .os-dock { z-index:35; }
.os-no-script { position:absolute; top:80%; left:25%; z-index:10; font-size:12px; }
@media (max-width:1200px) {
  body.games-page { --module-width:64vw; }
  .os-heading { left:3vw; right:3vw; }
  .os-heading h1 { font-size:32px; }
  .os-heading p { font-size:9px; }
  .os-selector-note,.os-details { left:3vw; width:13vw; }
  .os-description { font-size:10px; }
  .dock-identity span { display:none; }
  .dock-vents { width:55px; }
}
@media (max-width:760px) {
  body.games-page { --module-width:70vw; --anchor:41vw; --module-top:153px; --dock-height:102px; --next-offset:73vw; }
  .os-heading { top:90px; left:7vw; right:7vw; }
  .os-heading h1 { font-size:34px; margin-top:6px; }
  .os-readout { font-size:8px; padding-top:4px; transform:none; }
  .os-selector-note,.os-details { display:none; }
  .module-label { top:23px; font-size:9px; }
  .module-title { top:46px; font-size:23px; }
  .os-module[data-position="next"] .module-title { font-size:clamp(12px,3.6vw,16px); }
  .os-module[data-position="next"] .module-title span { display:none; }
  .module-window { top:102px; bottom:54px; left:18px; right:18px; }
  .module-label,.module-title,.module-footer { left:18px; right:18px; }
  .module-footer { bottom:20px; font-size:8px; }
  .module-contact { width:50px; height:8px; }
  .os-dock { width:100vw; }
  .dock-identity,.dock-vents { display:none; }
  .dock-label { font-size:8px; }
  .os-footer { left:4vw; right:4vw; font-size:7px; bottom:9px; }
  .os-system-status { display:none; }
}
@media (max-height:620px) and (min-width:761px) {
  body.games-page { --module-top:88px; --dock-height:100px; }
  .module-window { top:96px; bottom:48px; }
  .module-label { top:19px; }
  .module-title { top:41px; font-size:23px; }
  .module-footer { bottom:18px; }
  .os-details { top:57%; }
  .os-instructions { margin-top:8px; }
}
@media (max-width:480px) {
  body.games-page { --module-top:174px; }
  .os-heading { top:112px; }
  .os-heading p { display:none; }
  .os-heading h1 { margin-top:0; font-size:30px; }
  .os-readout { gap:5px; padding-top:0; }
}