[hidden] { display: none !important; }
.games-page { min-height: 70vh; }
.games-hero { position: relative; isolation: isolate; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); align-items: center; gap: 6vw; padding: 132px var(--pad) 78px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 77% 46%, rgba(163,168,168,.1), transparent 30%), linear-gradient(110deg,#090909,#0e0f0f 68%,#090909); }
.games-hero::before { position: absolute; z-index: -1; inset: 0; content: ''; opacity: .45; background: repeating-linear-gradient(0deg,transparent 0 98px,rgba(255,255,255,.025) 99px 100px); mask-image: linear-gradient(90deg,#000,transparent 80%); }
.games-hero-copy { position: relative; z-index: 1; max-width: 570px; }.games-hero h1 { margin: 28px 0 19px; color: #efefed; font-size: clamp(60px,8.8vw,108px); font-weight: 500; letter-spacing: -.075em; line-height: .91; }.games-hero h1 em { color: #bfc1c0; font-family: var(--display); font-weight: 500; letter-spacing: -.075em; }.games-hero-copy > p:not(.eyebrow) { max-width: 390px; margin: 0 0 27px; color: #a1a4a3; font-size: 13px; line-height: 1.9; }.games-hero-copy .button { margin-top: 7px; }
.games-hero-device { position: relative; width: min(34vw,405px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; border: 1px solid rgba(220,223,222,.23); border-radius: 50%; background: radial-gradient(circle at 42% 38%,#272a2a,#111313 67%,#090a0a); box-shadow: inset 0 0 0 9px rgba(255,255,255,.014),inset 0 0 48px rgba(219,222,221,.04),0 30px 80px rgba(0,0,0,.45); }.games-hero-device::before,.games-hero-device::after { position:absolute; inset:7%; border:1px solid rgba(220,223,222,.17); border-radius:50%; content:''; }.games-hero-device::after { inset:18%; border-style:dashed; border-color:rgba(220,223,222,.19); }.device-ring { position:absolute; border:1px solid rgba(220,223,222,.22); border-radius:50%; }.device-ring--a { inset:25%; }.device-ring--b { inset:32%; border-color:rgba(220,223,222,.31); }.device-center { position:relative; z-index:1; width:36%; aspect-ratio:1; display:grid; align-content:center; justify-items:center; gap:6px; border:1px solid rgba(220,223,222,.43); border-radius:50%; background:radial-gradient(circle at 40% 35%,#303333,#111313); box-shadow:0 0 0 8px rgba(255,255,255,.018),inset 0 2px 12px rgba(255,255,255,.1); }.device-center span { color:#e0e2e0; font-family:var(--display); font-size:clamp(27px,4vw,46px); letter-spacing:-.1em; }.device-center small { color:#9a9d9c; font-family:var(--mono); font-size:7px; letter-spacing:.1em; }.device-label { position:absolute; right:-10%; bottom:24%; color:#b4b7b6; font-family:var(--mono); font-size:8px; letter-spacing:.13em; line-height:1.7; }.device-label::before { position:absolute; top:7px; right:calc(100% + 12px); width:37px; height:1px; content:''; background:linear-gradient(90deg,transparent,#bdc0bf); }.games-hero-orbit { position:absolute; z-index:-1; top:-19%; right:18%; width:42vw; height:42vw; border:1px solid rgba(221,224,223,.05); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.005),0 0 0 90px rgba(255,255,255,.004); }.games-hero-foot { position:absolute; right:var(--pad); bottom:24px; left:var(--pad); display:flex; justify-content:space-between; color:#7d807f; font-family:var(--mono); font-size:7px; letter-spacing:.14em; }
.game-lobby { padding-top:110px; padding-bottom:107px; }.game-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; }.game-section-heading h2,.game-rules h2,.game-faq h2 { margin-top:22px; font-size:clamp(43px,5.4vw,65px); }.game-independent { margin:0 0 8px; color:#a9acab; font-family:var(--mono); font-size:8px; letter-spacing:.13em; line-height:1.9; text-align:right; }
.game-lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.lobby-card { position:relative; min-height:365px; display:flex; flex-direction:column; justify-content:space-between; padding:24px 25px 20px; overflow:hidden; border:1px solid rgba(216,220,219,.2); background:radial-gradient(ellipse at 83% 14%,rgba(192,196,195,.075),transparent 37%),linear-gradient(145deg,#1b1d1d,#101212 76%); transition:transform .4s var(--ease-out),border-color .35s ease; }.lobby-card:hover { transform:translateY(-4px); border-color:rgba(230,232,231,.44); }.lobby-card::after { position:absolute; right:-62px; bottom:-108px; width:260px; height:260px; border:1px solid rgba(216,220,219,.11); border-radius:50%; box-shadow:0 0 0 19px rgba(255,255,255,.01),0 0 0 42px rgba(255,255,255,.009); content:''; pointer-events:none; }.lobby-card--cipher::after { right:-70px; bottom:-110px; width:230px; height:230px; border-radius:26px; transform:rotate(28deg); }.lobby-card-top,.lobby-card-bottom { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }.lobby-card-top { color:#a8acab; font-family:var(--mono); font-size:8px; letter-spacing:.14em; }.lobby-icon { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(222,225,224,.22); color:#e2e3e1; font-family:var(--display); font-size:13px; }.lobby-icon--sequence { grid-template-columns:repeat(3,3px); grid-template-rows:repeat(2,3px); gap:4px; }.lobby-icon--sequence i { width:3px; height:3px; display:block; border-radius:50%; background:#dcdfde; box-shadow:0 0 5px rgba(255,255,255,.45); }.lobby-icon--sequence i:nth-child(2),.lobby-icon--sequence i:nth-child(4) { opacity:.44; }.lobby-icon--cipher { border-radius:50%; }.lobby-card-copy { position:relative; z-index:1; max-width:410px; padding:38px 0 32px; }.game-category { margin:0 0 10px; color:#aeb1b0; font-family:var(--mono); font-size:8px; letter-spacing:.15em; }.lobby-card h3 { margin:0; color:#e7e8e6; font-family:var(--display); font-size:clamp(27px,3vw,39px); font-weight:500; letter-spacing:-.055em; }.lobby-card-copy > p:last-child { max-width:355px; margin:13px 0 0; color:#989b9a; font-size:11px; line-height:1.9; }.record-label { margin:0; color:#8c908f; font-family:var(--mono); font-size:7px; letter-spacing:.1em; line-height:1.8; }.game-launch { position:relative; z-index:2; min-height:43px; flex:0 0 auto; gap:20px; padding:0 14px; border:1px solid rgba(220,223,222,.45); background:transparent; color:#e0e2e0; font-size:8px; cursor:pointer; }.game-launch:hover { background:#e0e2e0; color:#111; }.game-launch > span:last-child { font-size:13px; }.playroom-note { display:flex; gap:11px; margin:22px 0 0; color:#858988; font-size:9px; line-height:1.8; }.playroom-note > span { color:#d4d6d5; font-size:14px; }
.game-rules { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(50px,9vw,125px); padding-top:80px; padding-bottom:115px; border-top:1px solid var(--line); }.game-rules h2 { font-size:clamp(39px,5vw,59px); }.game-rules-heading > p:last-child { max-width:285px; margin:20px 0 0; color:#8f9291; font-size:10px; line-height:1.9; }.game-rules-list { border-top:1px solid var(--line-strong); }.game-rules-list article { display:grid; grid-template-columns:40px 1fr; gap:17px; padding:22px 0; border-bottom:1px solid var(--line); }.game-rules-list article > span { color:#c2c5c4; font-family:var(--mono); font-size:9px; }.game-rules-list h3 { margin:0; color:#dadddb; font-family:var(--display); font-size:19px; font-weight:500; }.game-rules-list p { max-width:455px; margin:7px 0 0; color:#8d908f; font-size:9px; line-height:1.85; }
.gameplay-wrap { position:relative; margin-bottom:100px; padding-top:31px; padding-bottom:51px; border:1px solid rgba(221,224,223,.28); background:radial-gradient(ellipse at 50% 42%,rgba(178,183,182,.08),transparent 40%),linear-gradient(145deg,#151717,#0e1010); scroll-margin-top:100px; }.gameplay-wrap::before,.gameplay-wrap::after { position:absolute; top:0; bottom:0; width:1px; content:''; background:linear-gradient(180deg,transparent,rgba(220,223,222,.08) 16%,rgba(220,223,222,.08) 84%,transparent); }.gameplay-wrap::before { left:14px; }.gameplay-wrap::after { right:14px; }.gameplay-topline { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 26px 22px; border-bottom:1px solid var(--line); }.gameplay-topline .eyebrow { font-size:7px; }.game-exit { border:0; background:transparent; color:#c3c6c5; font-family:var(--mono); font-size:8px; letter-spacing:.1em; cursor:pointer; }.game-exit:hover { color:#fff; }.game-exit span { margin-left:5px; font-size:12px; }
.active-game { max-width:825px; margin:0 auto; padding:30px 32px 0; }.active-game-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.active-game-heading h2 { margin:7px 0 0; font-family:var(--display); font-size:clamp(31px,4vw,45px); font-weight:500; letter-spacing:-.055em; }.session-instructions { max-width:440px; margin:8px 0 0; color:#969998; font-size:10px; line-height:1.8; }.session-record { display:grid; gap:7px; padding-left:15px; border-left:1px solid var(--line-strong); color:#919594; font-family:var(--mono); font-size:7px; letter-spacing:.1em; }.session-record strong { color:#e0e2e0; font-size:13px; font-weight:400; }
.game-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:25px; padding:15px 0; border-block:1px solid var(--line); }.hud-metric { display:grid; gap:5px; }.hud-metric > span,.progress-label { color:#939796; font-family:var(--mono); font-size:7px; letter-spacing:.12em; }.hud-metric strong { color:#e4e5e3; font-family:var(--sans); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }.hud-metric strong small { color:#818584; font-size:10px; font-weight:400; }.progress-wrap { grid-column:1/-1; display:grid; gap:8px; margin-top:5px; }.progress-label { display:flex; justify-content:space-between; }.progress-label b { color:#d6d8d6; font-weight:400; }.progress-track { height:3px; overflow:hidden; background:rgba(235,237,236,.13); }.progress-track span { width:0; height:100%; display:block; background:linear-gradient(90deg,#7d8281,#ebecea); transition:width .45s var(--ease-out); }
.game-controls { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }.game-control { min-height:34px; padding:0 11px; border:1px solid rgba(215,218,217,.22); background:transparent; color:#c3c6c4; font-family:var(--mono); font-size:7px; letter-spacing:.1em; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; }.game-control:hover:not(:disabled),.game-control[aria-pressed="true"] { border-color:rgba(235,237,236,.58); background:rgba(231,234,233,.08); color:#fff; }.game-control:disabled { opacity:.42; cursor:not-allowed; }
.game-arena { position:relative; min-height:365px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:16px; padding:25px 18px 20px; border:1px solid rgba(220,223,222,.12); background:radial-gradient(ellipse at 50% 45%,rgba(201,205,204,.065),transparent 60%),rgba(0,0,0,.12); }.game-status { min-height:24px; max-width:520px; margin:0 0 17px; color:#d6d8d6; font-size:10px; line-height:1.75; text-align:center; }.sequence-board { width:min(100%,670px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.sequence-tile { aspect-ratio:1; min-width:0; display:grid; align-content:center; justify-items:center; gap:8px; border:1px solid rgba(220,223,222,.24); border-radius:3px; background:linear-gradient(145deg,rgba(219,222,221,.07),rgba(219,222,221,.015)); color:#c5c8c7; cursor:pointer; transition:transform .22s var(--ease-out),background .22s ease,border-color .22s ease,box-shadow .22s ease; }.sequence-tile > span { font-family:var(--display); font-size:clamp(23px,4vw,36px); }.sequence-tile small { color:#858988; font-family:var(--mono); font-size:7px; letter-spacing:.1em; }.sequence-tile:disabled { cursor:default; opacity:.76; }.sequence-tile:not(:disabled):hover { transform:translateY(-3px); border-color:rgba(238,240,239,.64); }.sequence-tile.is-lit { transform:scale(1.035); border-color:#f0f2f0; background:radial-gradient(circle,rgba(230,234,232,.26),rgba(227,230,229,.09) 63%); color:#fff; box-shadow:0 0 28px rgba(220,225,223,.18),inset 0 0 20px rgba(240,242,241,.12); }.sequence-tile.is-correct { border-color:#d9ddda; }.sequence-tile.is-wrong { border-color:#aaa; background:rgba(126,129,128,.18); animation:tile-shake .24s ease-in-out 2; }
.begin-round { margin-top:20px; cursor:pointer; }.game-key-hint { margin:15px 0 0; color:#7f8382; font-family:var(--mono); font-size:7px; letter-spacing:.06em; text-align:center; }.cipher-board { width:min(100%,360px); }.cipher-display { min-height:76px; display:grid; justify-items:center; align-content:center; gap:7px; margin:0 0 12px; border:1px solid var(--line-strong); background:rgba(0,0,0,.16); }.cipher-caption { color:#919594; font-family:var(--mono); font-size:7px; letter-spacing:.14em; }.cipher-display output { color:#f0f1ef; font-family:var(--mono); font-size:22px; letter-spacing:.28em; }.cipher-feedback { min-height:33px; margin:0 0 10px; color:#a7aaa9; font-size:9px; line-height:1.7; text-align:center; }.cipher-keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.cipher-keypad button { min-height:47px; border:1px solid rgba(214,218,217,.23); background:rgba(255,255,255,.025); color:#e0e2e0; font-family:var(--mono); font-size:13px; cursor:pointer; transition:background .2s ease,border-color .2s ease; }.cipher-keypad button:hover:not(:disabled) { border-color:#e1e3e2; background:rgba(255,255,255,.1); }.cipher-keypad button:disabled { opacity:.45; cursor:not-allowed; }.cipher-keypad .keypad-action { color:#a4a7a6; font-size:8px; letter-spacing:.08em; }.cipher-keypad .keypad-enter { border-color:rgba(228,231,230,.5); color:#f0f2f0; }.cipher-hint { margin:11px 0 0; color:#777b7a; font-family:var(--mono); font-size:7px; line-height:1.7; text-align:center; }.storage-note { margin:18px 0 0; color:#7e8281; font-size:8px; line-height:1.8; text-align:center; }
.game-results { position:relative; max-width:790px; margin:0 auto; padding:62px 40px 35px; text-align:center; }.result-stamp { width:57px; height:57px; display:grid; place-items:center; margin:0 auto 21px; border:1px solid rgba(221,224,223,.45); border-radius:50%; color:#e2e4e2; font-family:var(--display); font-size:23px; letter-spacing:-.1em; }.game-results h2 { margin:15px 0 8px; color:#eceeec; font-family:var(--display); font-size:clamp(39px,6vw,64px); font-weight:500; letter-spacing:-.06em; }.result-summary { margin:0; color:#a5a8a7; font-size:11px; line-height:1.8; }.result-score-row { max-width:510px; display:grid; grid-template-columns:1fr auto; gap:12px 24px; align-items:center; margin:31px auto 0; padding:18px 0; border-block:1px solid var(--line-strong); text-align:left; }.result-score-row span { color:#969a98; font-family:var(--mono); font-size:8px; letter-spacing:.12em; }.result-score-row strong { color:#e9ebe9; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }.result-safe-note { max-width:500px; margin:18px auto 0; color:#8e9290; font-size:9px; line-height:1.85; }.result-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 24px; margin-top:25px; }.result-actions button { cursor:pointer; }.result-actions .text-link { border:0; background:transparent; }
.game-faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(40px,9vw,120px); padding-top:85px; padding-bottom:120px; border-top:1px solid var(--line); }.game-faq h2 { font-size:clamp(39px,5vw,59px); }.game-faq-list { border-top:1px solid var(--line-strong); }
@keyframes tile-shake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@media (max-width:900px) { .games-hero { min-height:570px; grid-template-columns:minmax(0,1fr) minmax(275px,.9fr); gap:3vw; }.games-hero h1 { font-size:clamp(57px,8vw,78px); }.games-hero-device { width:min(37vw,345px); }.game-rules { gap:50px; }.game-faq { gap:50px; } }
@media (max-width:680px) {
  .games-hero { min-height:740px; display:block; padding:126px 23px 68px; }.games-hero-copy { z-index:2; }.games-hero h1 { margin-top:25px; font-size:clamp(58px,13vw,82px); }.games-hero-copy > p:not(.eyebrow) { max-width:335px; font-size:11px; }.games-hero-device { position:absolute; right:-22px; bottom:48px; width:min(75vw,320px); opacity:.64; }.device-label { right:-7%; }.games-hero-foot { bottom:19px; left:23px; right:23px; font-size:6px; }.games-hero-orbit { top:35%; right:-2%; width:90vw; height:90vw; }
  .game-lobby { padding-top:78px; padding-bottom:77px; }.game-section-heading { align-items:flex-end; margin-bottom:25px; }.game-section-heading h2 { font-size:46px; }.game-independent { font-size:7px; }.game-lobby-grid { grid-template-columns:1fr; gap:10px; }.lobby-card { min-height:322px; padding:19px 18px 16px; }.lobby-card-copy { padding:32px 0 25px; }.lobby-card h3 { font-size:33px; }.lobby-card-copy > p:last-child { font-size:10px; }.game-launch { min-height:42px; }.playroom-note { align-items:flex-start; font-size:8px; }
  .game-rules { grid-template-columns:1fr; gap:31px; padding-top:72px; padding-bottom:83px; }.game-rules h2,.game-faq h2 { font-size:47px; }.game-rules-heading > p:last-child { font-size:9px; }.game-rules-list article { grid-template-columns:32px 1fr; gap:12px; padding:19px 0; }.game-rules-list h3 { font-size:17px; }.game-rules-list p { font-size:8px; }
  .gameplay-wrap { width:calc(100% - 32px); margin:0 16px 75px; padding:22px 5px 36px; }.gameplay-wrap::before { left:8px; }.gameplay-wrap::after { right:8px; }.gameplay-topline { align-items:flex-start; padding:0 15px 17px; }.gameplay-topline .eyebrow { max-width:210px; font-size:6px; }.game-exit { font-size:7px; }.active-game { padding:25px 16px 0; }.active-game-heading { align-items:flex-start; }.active-game-heading h2 { font-size:33px; }.session-instructions { font-size:9px; }.session-record { padding-left:9px; font-size:6px; }.session-record strong { font-size:11px; }.game-hud { grid-template-columns:repeat(3,1fr); gap:11px 8px; }.hud-metric > span,.progress-label { font-size:6px; }.hud-metric strong { font-size:15px; }.game-control { min-height:34px; padding:0 8px; font-size:6px; }.game-arena { min-height:395px; padding:22px 12px 18px; }.game-status { font-size:9px; }.sequence-board { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:390px; }.sequence-tile { min-height:75px; }.sequence-tile:nth-child(4) { grid-column:1/2; }.sequence-tile:nth-child(5) { grid-column:3/4; }.sequence-tile > span { font-size:30px; }.sequence-tile small { font-size:6px; }.game-key-hint { max-width:280px; font-size:6px; line-height:1.7; }.cipher-board { width:min(100%,340px); }.cipher-keypad button { min-height:49px; }.cipher-display { min-height:70px; }.storage-note { padding-inline:5px; font-size:7px; }
  .game-results { padding:43px 19px 22px; }.game-results h2 { font-size:45px; }.result-score-row { gap:11px; margin-top:25px; }.result-score-row span { font-size:7px; }.result-actions { gap:18px; }.game-faq { grid-template-columns:1fr; gap:29px; padding-top:72px; padding-bottom:90px; }.games-footer .footer-main { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { .sequence-tile.is-wrong { animation:none; } .lobby-card:hover,.sequence-tile:not(:disabled):hover { transform:none; } }


/* Touch-first control targets */
.game-control { min-height:44px; font-size:8px; }
.game-exit { min-height:44px; padding:8px 6px; }
.game-launch { min-height:44px; }
.result-actions .text-link { min-height:44px; padding-inline:5px; }
@media (max-width:680px) { .game-control { min-height:44px; font-size:7px; }.game-launch { min-height:44px; } }