/* Focus Shift: local assets, named colors, large phone tap targets. */
.fs-game{width:100%;max-width:430px;margin:0 auto;color:var(--ink);font-family:inherit;padding:0 4px 12px;box-sizing:border-box}
.fs-game *{box-sizing:border-box}
.fs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.fs-top h2{font-size:19px;margin:0}
.fs-game button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fs-back{padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:13px!important}
.fs-intro,.fs-result{text-align:center;padding:14px 6px 4px}
.fs-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);font-weight:700}
.fs-intro-art{font-size:46px;color:#247aa0;letter-spacing:10px;margin:18px 0 8px;line-height:1.4}
.fs-game h3{font-size:28px;line-height:1.18;margin:12px 0 18px;letter-spacing:-.02em}
.fs-game p{font-size:14px;line-height:1.6;margin:14px 0}
.fs-example{text-align:left;padding:14px 16px;border-radius:14px;background:rgba(42,143,190,.08);font-size:13px;line-height:1.8;border:1px solid rgba(42,143,190,.16)}
.fs-example b{color:#176788}
.fs-game .fs-note{font-size:12px;line-height:1.5;color:var(--ink-2);text-align:center;margin:10px 0}
.fs-primary{width:100%;min-height:50px;padding:12px 14px;background:#176788;border:0;border-radius:14px;color:#fff;font-weight:700!important;margin-top:8px}
.fs-game button:focus-visible{outline:3px solid #a765d7;outline-offset:3px}
.fs-stats{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-2)}
.fs-stats b{color:var(--ink);font-size:16px}
.fs-clock{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.fs-time-track{height:5px;background:rgba(42,143,190,.12);border-radius:6px;overflow:hidden;margin:10px 0 12px}
.fs-time-track span{display:block;height:100%;background:#247aa0}
.fs-rule{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:8px;border:1px solid rgba(42,143,190,.22);padding:9px;border-radius:12px;background:rgba(42,143,190,.08);font-size:12px;line-height:1.4}
.fs-rule b{font-size:19px;color:#176788;letter-spacing:.06em}
.fs-rule small{flex-basis:100%;text-align:center;font-size:10px;color:var(--ink-2)}
.fs-rule.is-switch{border:2px solid #a765d7;padding:8px;background:rgba(167,101,215,.10)}
.fs-cue{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:10px;padding:18px 0 15px;min-height:148px}
.fs-cue b{font-size:16px}
.fs-cue>span:last-child{font-size:11px;color:var(--ink-2);line-height:1}
.fs-symbol{display:block;width:40px;height:40px;background:currentColor;flex-shrink:0}
.fs-cue .fs-symbol{width:48px;height:48px}
.fs-shape-0{border-radius:50%}
.fs-shape-1{clip-path:polygon(50% 0,100% 100%,0 100%)}
.fs-shape-2{border-radius:3px}
.fs-shape-3{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.fs-color-0{color:#267bb5}.fs-color-1{color:#d7634f}.fs-color-2{color:#b88712}.fs-color-3{color:#8a51b7}
.fs-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fs-target{min-height:112px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:12px 8px;box-shadow:0 2px 0 rgba(17,53,72,.06)}
.fs-target b{font-size:13px;line-height:1.15;margin-top:3px}
.fs-target>span:last-child{font-size:11px;color:var(--ink-2);line-height:1.15}
.fs-target:active{transform:scale(.97);background:rgba(42,143,190,.10)}
.fs-feedback{min-height:22px;text-align:center;font-size:12px;font-weight:700;color:#176788;margin:12px 0 0;line-height:1.5}
.fs-error{font-size:12px;color:#b34b35;text-align:center;line-height:1.5;margin-top:8px}
.fs-error:empty{display:none}
.fs-score{font-size:58px;font-weight:800;color:#176788;line-height:1.15;margin:25px 0}
.fs-score small{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-top:5px}
html.dark .fs-example b,html.dark .fs-rule b,html.dark .fs-feedback,html.dark .fs-score{color:#9dd3ee}
html.dark .fs-intro-art{color:#9dd3ee}
html.dark .fs-color-0{color:#53a8de}html.dark .fs-color-1{color:#f18c75}html.dark .fs-color-2{color:#e4bb4c}html.dark .fs-color-3{color:#bc8add}
html.dark .fs-error{color:#f4a48e}
@media(max-width:370px){.fs-target{min-height:105px}.fs-cue{min-height:138px;padding:14px 0}.fs-intro-art{font-size:40px;letter-spacing:7px}.fs-game h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.fs-target:active{transform:none}}
.fs-lesson{padding:12px;border:1px solid var(--line);border-radius:14px;margin:12px 0;background:var(--card)}
.fs-lesson-label{font-size:11px!important;color:var(--ink-2);margin:0 0 8px!important}
.fs-lesson-cue{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0;font-size:13px}
.fs-lesson-targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fs-lesson .fs-target{min-height:90px;padding:8px}.fs-lesson .fs-symbol{width:30px;height:30px}
.fs-rule-dots{display:flex;justify-content:center;gap:5px;flex-basis:100%;padding-top:5px}
.fs-rule-dots i{width:6px;height:6px;border:1px solid #538ed3;border-radius:50%}.fs-rule-dots i.is-done{background:#538ed3}
.fs-rule-color{border-color:#a765d780;background:#a765d714}.fs-rule-color b{color:#8150b5}
.fs-target .fs-active-feature{font-weight:800;font-size:14px;color:var(--ink)}
.fs-clock.is-urgent{color:#b34b35;background:#b34b3512;border-radius:7px;padding:2px 5px}
html.dark .fs-rule-color b{color:#cda5ef}html.dark .fs-clock.is-urgent{color:#f4a48e}

/* The host lives in GameStage; preserve the named colors and familiar targets. */
.fs-immersive {position:relative;min-height:100%;max-width:600px;display:flex;flex-direction:column;padding:8px 16px 16px;background:var(--bg);}
.fs-immersive .fs-top {min-height:44px;margin-bottom:12px;flex:none;}
.fs-orb {flex:0 0 44px;width:44px;height:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font-size:20px!important;}
.fs-orb svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.fs-brand {flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;}
.fs-brand img {width:42px;height:32px;flex:none;object-fit:contain;}
.fs-brand b {min-width:0;font-size:14px;line-height:1.2;overflow-wrap:anywhere;}
.fs-immersive .fs-rule,.fs-immersive .fs-targets,.fs-immersive .fs-stats {flex:none;}
.fs-immersive .fs-cue {flex:1;min-height:148px;}
.fs-immersive .fs-target {min-height:118px;}
.fs-ready,.fs-resume {position:absolute;inset:68px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:rgba(10,26,42,.88);color:#f3f7ff;text-align:center;z-index:2;}
.fs-ready span {font-size:18px;}.fs-ready b {font-size:96px;font-variant-numeric:tabular-nums;}
.fs-resume .fs-note {color:#cbd6e8;max-width:280px;}.fs-resume .fs-primary {max-width:310px;}
.fs-help {position:absolute;inset:66px 12px 12px;z-index:3;background:var(--card);border:1px solid var(--line);padding:64px 22px 24px;overflow:auto;border-radius:14px;}
.fs-help-close {position:absolute;right:12px;top:12px;}.fs-help:focus {outline:none;}
@media(max-width:370px){.fs-immersive{padding-inline:12px}.fs-immersive .fs-target{min-height:108px}.fs-brand{gap:6px}.fs-brand b{font-size:13px}}
@media(orientation:landscape) and (max-height:500px){.fs-immersive .fs-cue{min-height:90px;padding:10px 0}.fs-immersive .fs-targets{grid-template-columns:repeat(4,minmax(0,1fr))}.fs-immersive .fs-target{min-height:92px}.fs-immersive .fs-top{margin-bottom:6px}}

