#gs-game { --gs-mint:#79f5cc; --gs-ink:#071e24; position:relative; width:100%; max-width:100%; margin:18px 0 24px; overflow:hidden; border-radius:24px; border:1px solid #29434a; background:#0a2028; color:#eef9f6; box-shadow:0 16px 44px rgba(5,25,31,.22); font-family:inherit; isolation:isolate; }
#gs-game[data-pattern="swing"] { --gs-mint:#7dd3fc; }
#gs-game[data-pattern="rush"] { --gs-mint:#ffb58b; }
#gs-game[data-pattern="pulse"] { --gs-mint:#c4adff; }
#gs-game *, #gs-game *::before, #gs-game *::after { box-sizing:border-box; }
#gs-game [hidden] { display:none !important; }
#gs-game button { font-family:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#gs-game button:disabled { cursor:default; opacity:.5; }
#gs-game button:focus-visible, #gs-field:focus-visible { outline:3px solid #fff2aa; outline-offset:-4px; }
.gs-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:15px 18px 10px; }
.gs-brand { font-size:12px; font-weight:900; letter-spacing:2px; white-space:nowrap; }
.gs-brand small { color:#99b3b8; font-size:11px; letter-spacing:0; margin-left:6px; }
.gs-dot { display:inline-block; width:7px; height:7px; background:var(--gs-mint); border-radius:50%; margin-right:6px; }
.gs-tools { display:flex; gap:6px; }
.gs-tools button { min-height:40px; min-width:42px; padding:6px 10px; border:1px solid #365057; border-radius:10px; background:#152f37; color:#d7e9e8; font-size:11px; font-weight:800; }
.gs-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 18px 8px; text-align:center; }
.gs-hud>div { padding:9px 3px; border:1px solid #29444c; border-radius:12px; background:#102b33; }
.gs-hud small { display:block; color:#9dbabc; font-size:11px; }
.gs-hud strong { display:block; margin-top:3px; font-size:26px; line-height:1.1; font-weight:900; font-variant-numeric:tabular-nums; }
.gs-hud>div:first-child strong { color:var(--gs-mint); }
.gs-hud>div:last-child strong { color:#ffe3a0; }
#gs-field { position:relative; height:360px; height:clamp(245px,47svh,380px); margin:0 12px; border:1px solid #29434b; border-radius:16px; overflow:hidden; touch-action:manipulation; cursor:pointer; user-select:none; -webkit-user-select:none; background:radial-gradient(ellipse at 50% 45%,#143c44,#0a2028 75%); }
#gs-canvas { display:block; width:100%; height:100%; }
.gs-field-top { position:absolute; inset:12px 16px auto; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:1.3px; color:#a1c4c8; pointer-events:none; font-variant-numeric:tabular-nums; }
#gs-pattern { padding:3px 9px; border:1px solid currentColor; border-radius:20px; color:var(--gs-mint); font-size:10px; letter-spacing:0; background:#0a2028; }
.gs-time-track { position:absolute; top:46px; left:16px; right:16px; height:3px; border-radius:3px; background:#28454d; overflow:hidden; pointer-events:none; }
#gs-time-bar { display:block; height:100%; width:100%; transform-origin:left center; background:var(--gs-mint); }
#gs-clock.gs-urgent { color:#ffb087; }
#gs-feedback { position:absolute; top:19%; left:10px; right:10px; color:var(--gs-mint); font-size:19px; font-weight:900; text-align:center; pointer-events:none; }
.gs-launch-hint { position:absolute; bottom:18px; left:0; right:0; color:#a9c5c9; text-align:center; font-size:12px; pointer-events:none; }
.gs-floor { padding:12px 18px 6px; }
#gs-game .gs-primary { display:flex; align-items:center; justify-content:center; gap:14px; min-height:54px; width:100%; padding:13px 16px; border:0; border-radius:13px; background:var(--gs-mint); color:var(--gs-ink); font-size:17px; line-height:1.3; font-weight:900; box-shadow:0 4px 0 #379c81; }
#gs-game .gs-primary span { font-size:12px; opacity:.65; }
#gs-game .gs-primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #379c81; }
.gs-floor p { margin:10px 0 5px; text-align:center; color:#92afb5; font-size:11px; }
.gs-overlay { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(5,23,29,.86); backdrop-filter:blur(7px); }
.gs-panel { width:100%; max-width:390px; text-align:center; }
.gs-eyebrow { color:var(--gs-mint); letter-spacing:2px; font-size:11px; font-weight:900; }
#gs-game .gs-panel h2 { color:#f2fbf8; font-size:26px; line-height:1.35; letter-spacing:-1px; font-weight:900; margin:12px 0 16px; word-break:keep-all; }
.gs-panel p { font-size:14px; line-height:1.8; color:#b8d1d4; margin:14px 0; word-break:keep-all; }
.gs-panel p b { color:#f2fbf8; }
.gs-pills { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:16px 0 22px; }
.gs-pills span { border:1px solid #38565b; padding:5px 9px; border-radius:30px; color:#c6deda; font-size:11px; }
.gs-subcopy { display:block; color:#94b7ba; line-height:1.6; font-size:11px; margin-top:14px; min-height:18px; }
.gs-demo { position:relative; height:92px; width:220px; margin:22px auto; border-bottom:1px dashed #365157; }
.gs-demo i { position:absolute; top:24px; height:16px; width:70px; background:var(--gs-mint); border-radius:4px; }
.gs-demo i:first-child { left:0; animation:gs-door-left 2.4s ease-in-out infinite; }
.gs-demo i:nth-child(2) { right:0; animation:gs-door-right 2.4s ease-in-out infinite; }
.gs-demo b { position:absolute; left:99px; bottom:6px; color:#ffe3a0; font-size:28px; line-height:1; animation:gs-probe 2.4s ease-in-out infinite; }
@keyframes gs-door-left { 0%,100% { transform:translateX(37px); } 45%,65% { transform:translateX(0); } }
@keyframes gs-door-right { 0%,100% { transform:translateX(-37px); } 45%,65% { transform:translateX(0); } }
@keyframes gs-probe { 0%,30% { transform:translateY(0); opacity:1; } 65%,75% { transform:translateY(-78px); opacity:1; } 80%,100% { transform:translateY(-78px); opacity:0; } }
.gs-result-number b { display:block; color:var(--gs-mint); font-size:80px; font-weight:900; letter-spacing:-5px; line-height:1.1; font-variant-numeric:tabular-nums; }
.gs-result-number>span { color:#a3c0c3; font-size:12px; }
.gs-result-detail { border:1px solid #365157; border-radius:12px; padding:10px; color:#f7e5b7; margin:16px 0; font-size:12px; line-height:1.6; }
#gs-game .gs-secondary { margin-top:12px; padding:12px; width:100%; min-height:46px; background:#17363e; color:#d5e9e8; border:1px solid #3c6066; border-radius:12px; font-size:13px; font-weight:700; }
.gs-guide { text-align:left; line-height:1.7; }
.gs-guide h3 { font-size:15px; font-weight:800; margin:0 0 6px; }
.gs-guide p { font-size:14px; margin:0 0 6px; }
.gs-guide small { font-size:12px; color:#7c8795; }
@media (max-width:420px) { #gs-game { border-radius:18px; } .gs-toolbar { padding:12px 12px 8px; } .gs-brand { letter-spacing:1px; font-size:11px; } .gs-brand small { display:none; } .gs-hud { margin:0 12px 8px; } #gs-game .gs-panel h2 { font-size:23px; } .gs-panel p { font-size:13px; } .gs-floor { padding:10px 12px 6px; } .gs-hud strong { font-size:23px; } }
@media (orientation:landscape) and (max-height:520px) {
    #gs-game { display:grid; grid-template-columns:minmax(0,1fr) 160px; grid-template-rows:auto minmax(0,1fr) auto; height:calc(100vh - 20px); height:calc(100svh - 20px); min-height:300px; max-height:440px; }
    .gs-toolbar { grid-column:1 / -1; padding:8px 12px; }
    #gs-field { grid-column:1; grid-row:2 / 4; height:auto; min-height:0; margin:0 0 12px 12px; }
    .gs-hud { grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:5px; margin:0 12px 0 10px; }
    .gs-hud>div { padding:5px; flex:1; }
    .gs-hud strong { font-size:21px; margin-top:2px; }
    .gs-hud small { font-size:10px; }
    .gs-floor { grid-column:2; grid-row:3; padding:8px 12px 8px 10px; }
    #gs-fire { min-height:45px; padding:9px; font-size:14px; }
    #gs-fire span, .gs-floor p { display:none; }
    .gs-demo { height:50px; margin:8px auto; }
    .gs-demo i { top:8px; }
    #gs-game .gs-panel h2 { font-size:21px; margin:8px 0; }
    .gs-panel p { margin:8px 0; font-size:12px; }
    .gs-pills { margin:8px 0 12px; }
    .gs-subcopy { margin-top:9px; }
    .gs-result-number b { font-size:52px; }
    .gs-result-detail { margin:8px 0; padding:6px; }
    #gs-game .gs-secondary { min-height:38px; padding:9px; margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) { .gs-demo i, .gs-demo b { animation:none; } }