/* Scoped learning surface: real object art, touch-sized controls and scrollable copy. */
.runner-guide{padding:0;border:1px solid #68829566;border-radius:22px;background:#101f32;color:#f0f5ff;width:min(610px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);box-shadow:0 24px 90px #0009;overflow:hidden;font-family:Arial,sans-serif}
.runner-guide::backdrop{background:#040b18df;backdrop-filter:blur(6px)}
.guide-shell{display:flex;flex-direction:column;max-height:calc(100dvh - 26px);min-height:0}
.guide-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;gap:12px;background:linear-gradient(115deg,#213850,#122338);flex-shrink:0}
.guide-brand{display:block;font-size:13px;font-weight:900;letter-spacing:1.2px;color:#ffda86}.guide-context{display:block;font-size:11px;letter-spacing:.8px;color:#b5cbd8;margin-top:5px}
.runner-guide button{font:700 13px Arial;min-height:44px;min-width:44px;border:1px solid #7894aa50;border-radius:10px;background:#1a3047;color:#e7f4ff;padding:10px 14px;cursor:pointer;touch-action:manipulation}
.runner-guide button:disabled{opacity:.35;cursor:default}.runner-guide button:focus-visible,.runner-guide input:focus-visible{outline:3px solid #8bf0e8;outline-offset:2px}
.runner-guide .guide-close{font-size:25px;line-height:1;padding:6px;background:#0b1b2e}
.guide-progress{display:flex;gap:5px;padding:0 20px;height:4px;flex-shrink:0;background:#14273a}.guide-progress i{height:4px;flex:1;background:#304358}.guide-progress i.is-read{background:#ffd371}
.guide-content{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:20px;min-height:0}
.guide-kicker{font-size:11px;font-weight:800;letter-spacing:1.3px;color:#89ddd9}.runner-guide h2{font-size:clamp(23px,6.2vw,30px);font-weight:900;letter-spacing:-.7px;line-height:1.1;margin:9px 0 10px;outline:none}
.guide-lead{font-size:14px;color:#c2d1e1;line-height:1.5;margin:0 0 16px}
.guide-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.guide-examples.guide-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-examples.guide-single{grid-template-columns:1fr}.guide-examples.guide-single canvas{aspect-ratio:2/1;max-height:190px;object-fit:contain}.guide-examples.guide-single figcaption{min-height:0;padding:9px}.guide-examples.guide-single strong{font-size:15px}.guide-examples.guide-single span{font-size:12px}
.guide-examples figure{margin:0;border:1px solid #7894a833;border-radius:12px;overflow:hidden;background:#0a192b;min-width:0}.guide-examples canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;touch-action:pan-y}
.guide-examples figcaption{padding:8px 7px 10px;min-height:59px;text-align:center}.guide-examples strong{display:block;font-size:12px;line-height:1.25;color:#f5dfab}.guide-examples span{display:block;font-size:11px;line-height:1.35;color:#b8cddd;margin-top:4px}
.guide-note{font-size:12px;line-height:1.55;color:#c0d4e4;padding:12px 13px;margin:16px 0 0;border-left:2px solid #80d8d2;background:#18314677;border-radius:0 9px 9px 0}
.guide-footer{padding:10px 20px 13px;border-top:1px solid #698ca12e;background:#0e1d30;flex-shrink:0}.guide-tip-choice{display:flex;align-items:center;gap:9px;min-height:40px;font-size:11px;line-height:1.3;color:#aac4d7;cursor:pointer}.guide-tip-choice input{width:18px;height:18px;accent-color:#ffd16a;flex-shrink:0;margin:0}
.guide-actions{display:flex;gap:8px}.guide-actions button{flex:1}.runner-guide .guide-primary{background:linear-gradient(#ffdf83,#ffc54b);border-color:#ffe2a1;color:#172132;box-shadow:0 3px 0 #986e28}
.guide-extras{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin-top:4px}.runner-guide .guide-extras button{border:0;background:transparent;font-weight:400;color:#bbd0e2;padding:7px 2px;min-height:44px}.runner-guide .guide-extras button[data-guide="training"]{color:#9eede3}.runner-guide .guide-extras button[data-guide="details"]{flex-basis:100%;font-size:12px}
.guide-launch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:8px;padding:8px 12px;margin:0 0 10px;border:1px solid #7ccdd14d;border-radius:9px;background:#16334880;color:#bcece9;font:700 12px Arial;cursor:pointer;touch-action:manipulation}
@media(max-width:420px){.guide-header{padding:12px 14px 10px}.guide-content{padding:16px 14px}.guide-footer{padding:8px 14px 10px}.guide-lead{font-size:13px}.guide-examples{gap:5px}.guide-examples figcaption{padding-inline:4px}.guide-note{margin-top:12px;padding:10px}.guide-examples.guide-two canvas{max-height:86px;object-fit:contain}}
@media(max-height:540px){.guide-header{padding-block:6px}.guide-content{padding-block:12px}.guide-footer{padding-block:6px}.guide-tip-choice{min-height:30px}.guide-extras{margin-top:0}.guide-examples canvas{max-height:75px;object-fit:contain}.guide-examples figcaption{min-height:0}.runner-guide h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.runner-guide *{scroll-behavior:auto!important}}

@media(max-width:420px){.guide-examples.guide-four figure{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;min-height:78px}.guide-examples.guide-four canvas{width:58px;height:auto;max-height:none;object-fit:contain;aspect-ratio:8/5}.guide-examples.guide-four figcaption{text-align:left;padding:8px 6px 8px 0;min-height:0}}

.lobby-start-actions{display:flex;align-items:center;gap:10px}.lobby-start-actions .guide-launch{margin:0;max-width:135px;text-align:center;line-height:1.35}
@media(max-width:700px){.lobby-start-actions{flex-direction:column;align-items:stretch;gap:6px}.lobby-start-actions .guide-launch{max-width:none;width:100%}}