/* Scoped to the new games, leaving existing game screens intact. */
.x-wrap{max-width:1120px;margin:0 auto;padding:28px clamp(14px,3vw,36px) 60px;color:#f5f6ff;}
.x-top{position:relative;flex-wrap:wrap;gap:12px;}
.x-top .brand{position:static;transform:none;white-space:normal;text-align:center;}
.x-panel{background:linear-gradient(145deg,#192245,#111830);border:1px solid #394568;border-radius:28px;padding:clamp(18px,4vw,38px);text-align:center;box-shadow:0 18px 70px #04071645;min-width:0;}
.x-panel h1{font-size:clamp(24px,3.5vw,38px);line-height:1.6;margin:10px 0 20px;text-wrap:balance;}
.x-panel h2{font-size:clamp(19px,2.2vw,27px);line-height:1.6;}
.x-eyebrow{display:inline-block;color:#c5b5ff;font-size:14px;font-weight:800;letter-spacing:.5px;}
.x-note{font-size:clamp(14px,1.35vw,17px);line-height:1.95;color:#c5cce6;margin:12px auto;max-width:66ch;}
.x-scores{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.x-score{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border:1px solid;border-radius:18px;font-weight:800;min-width:0;}
.x-score.a{background:#15332d;border-color:#387b63;color:#a8f2cb;}
.x-score.b{background:#36271e;border-color:#956b39;color:#ffdaa2;}
.x-score span{overflow-wrap:anywhere;}
.x-score b{font-size:clamp(26px,4vw,40px);}
.x-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;gap:7px;border:1px solid transparent;border-radius:13px;background:#b7abff;color:#141730;padding:12px 20px;font-family:inherit;font-size:16px;line-height:1.5;font-weight:800;cursor:pointer;white-space:normal;}
.x-btn:hover{filter:brightness(1.08);}
.x-btn:focus-visible,.x-wrap input:focus-visible,.x-wrap select:focus-visible,.x-link:focus-visible{outline:3px solid #e4cd7f;outline-offset:4px;}
.x-btn.muted{background:#232e50;color:#e2e7ff;border-color:#566286;}
.x-btn.small{font-size:12px;min-height:40px;padding:8px 12px;}
.x-btn:disabled{opacity:.45;cursor:default;}
.x-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}
.x-bid-number{font-size:clamp(68px,12vw,130px);font-weight:900;line-height:1.3;color:#f7dca0;}
.x-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:22px auto;max-width:620px;text-align:start;}
.x-form label{flex:1 1 220px;min-width:0;}
.x-wrap label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px;color:#d6dcf2;}
.x-wrap input,.x-wrap select{min-width:0;width:100%;padding:13px;border:1px solid #566384;border-radius:12px;background:#0d142a;color:#fff;font:inherit;font-size:17px;}
.x-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px auto;text-align:start;max-width:700px;}
.x-settings .x-btn{grid-column:1/-1;justify-self:center;}
.x-timer{display:flex;align-items:center;justify-content:center;gap:12px;margin:15px 0;font-variant-numeric:tabular-nums;}
.x-timer b{font-size:clamp(34px,5vw,54px);color:#f8d994;}
.x-timer span{font-size:14px;color:#bfc9e2;}
.x-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px 0;}
.x-chips span,.x-chips button{background:#263758;border:1px solid #596888;border-radius:11px;padding:9px 15px;font:inherit;color:#fff;}
.x-chips button{cursor:pointer;}
.x-join-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0;}
.x-join{border:1px solid #465473;border-radius:20px;padding:15px;min-width:0;background:#101930;}
.x-join.a{border-top:3px solid #67c69c}.x-join.b{border-top:3px solid #eab371}.x-join.host{border-top:3px solid #baa9fa}
.x-join h2{font-size:18px;margin:0 0 14px;}
.x-join .hn-qr{width:min(100%,195px);margin:0 auto 12px;padding:10px;box-sizing:border-box;background:#fff;border-radius:12px;}
.x-join .hn-qr svg{width:100%;height:auto;display:block;}
.x-link{display:inline-block;color:#d4c9ff;font-size:14px;margin:5px 0 10px;text-decoration:underline;text-underline-offset:4px;}
.x-holders{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:13px;}
.x-holders span{padding:7px 12px;background:#243049;border-radius:20px;}
.x-holders .extra{color:#ffd4a0;border:1px solid #a96f2d;}
.x-progress{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:25px 0;}
.x-progress>div{border:1px solid #485575;background:#111a31;border-radius:18px;padding:20px 12px;}
.x-locks,.x-fragments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.x-locks span{padding:15px 0;border:1px solid #657195;border-radius:12px;font-size:24px;font-weight:800;}
.x-locks .open{background:#1e5444;color:#adffdb;border-color:#70d9ab;}
.x-fragments{margin:20px 0;}
.x-fragments>div{background:#101b35;border:1px solid #5d6b91;border-radius:12px;padding:10px 4px;}
.x-fragments small{font-size:12px;display:block;color:#b9c3e2;direction:rtl;}
.x-fragments b{display:block;font-size:36px;font-weight:900;color:#e3d6ff;}
.x-code{font-size:44px;font-weight:900;letter-spacing:14px;color:#dacbff;padding:16px;overflow-wrap:anywhere;}
.x-solutions{text-align:start;padding-inline-start:24px;line-height:1.9;}
.x-solutions li{padding:10px 0;}
.x-solutions b{display:block;color:#a9e5cb;}
.x-feedback{padding:12px 16px;border:1px solid #7b73a7;background:#2e2b4c;border-radius:12px;color:#efe9ff;line-height:1.8;}
.x-secret{background:#131b31;border:1px dashed #9682c4;border-radius:14px;padding:14px;margin:20px 0;}
.x-secret summary{cursor:pointer;color:#dccbff;font-weight:800;}
.x-phone{min-height:100vh;background:#0b1025;}
.x-phone .x-wrap{max-width:650px;padding:16px 12px 40px;}
.x-phone-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#ddd6ff;padding:10px 5px 20px;}
.x-phone-head span{font-size:12px;color:#9faecf;}
.x-phone .x-score{padding:12px;}
.x-phone .x-panel{border-radius:20px;padding:20px 16px;}
.x-phone .x-panel h1{font-size:23px;}
.x-phone .x-clue{font-size:23px;line-height:1.85;}
.x-phone .x-form .x-btn{width:100%;}
.x-phone .x-actions .x-btn{flex:1 1 160px;}
.x-phone #x-join-form .x-btn{width:100%;margin-top:20px;}
@media(max-width:700px){
.x-join-grid{grid-template-columns:1fr;}
.x-join .hn-qr{width:190px;}
.x-progress{grid-template-columns:1fr;}
.x-settings{grid-template-columns:1fr;}
.x-scores{gap:9px;}
.x-score{padding:12px;font-size:14px;}
.x-top .brand{order:-1;flex-basis:100%;max-width:none;}
.x-locks span{padding:10px 0;}
}
@media(prefers-reduced-motion:reduce){.x-wrap *{scroll-behavior:auto;transition:none!important;animation:none!important;}}