*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#244c38;background:#dcece9 url("/home-two-bridges.webp?v=9dc47bbe1726e616") center/cover fixed}main{max-width:1200px;margin:auto;padding:18px 32px 32px}header{display:flex;align-items:center;justify-content:space-between;background:#fffefaed;border-radius:24px;padding:10px 24px;margin-bottom:20px;box-shadow:0 6px 24px #163f3b12}.brand{display:block;position:relative;width:270px;text-decoration:none}.brand img{display:block;width:100%}.brand small{position:absolute;left:24%;top:72%;font-size:12px;white-space:nowrap}a{color:#315d46;text-underline-offset:4px}header a.login{display:flex;align-items:center;gap:8px;font-size:15px}header svg{width:22px;height:22px;fill:none;stroke:#315d46;stroke-width:1.8}.surface{padding:24px;border-radius:28px;background:linear-gradient(135deg,#fffefae8,#f3faf5dc);box-shadow:0 12px 45px #173e3820}.intro,.guide{background:#fffefaf7;border:1px solid #fff;border-top:4px solid #94613e;border-radius:20px;padding:28px 30px}.intro{margin-bottom:22px}.intro h1,.guide h1{font-size:34px;letter-spacing:-.025em;line-height:1.2;margin:0 0 16px}.intro p,.guide p,.guide li{font-size:16px;line-height:1.65;color:#536b61}.intro p{margin:10px 0;max-width:940px}.links{display:flex;gap:22px;align-items:center;margin-top:18px}.links a{font-weight:600}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{padding:22px;background:#fffefaf7;border-radius:20px;border-top:4px solid #315d46;display:flex;flex-direction:column;gap:16px}.card:nth-child(2){border-color:#94613e}.card h2{font-size:23px;margin:0}.card p{margin:0;color:#536b61;font-size:15px;line-height:1.6}.card svg{width:100%;display:block;border-radius:17px}.primary,.secondary{font:inherit;font-size:16px;font-weight:650;display:inline-block;text-align:center;text-decoration:none;border-radius:10px;padding:12px 18px;cursor:pointer}.primary{background:#315d46;color:#fffefa;border:1px solid #315d46}.secondary{border:1px solid #c4d0c4;background:#fffefa;color:#315d46}.card .primary{margin-top:auto}.date{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#536b61}.date span:last-child{padding:4px 9px;background:#f1f5ef;border-radius:7px}.actions{display:flex;justify-content:center;margin-top:24px}.footer{display:flex;justify-content:center;gap:24px;background:#fffefaee;border-radius:20px;padding:18px;margin-top:20px;font-size:13px}.guide-top{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}.guide-top .secondary{font-size:14px;white-space:nowrap}.guide .lead{font-size:18px;max-width:850px;margin:0 0 24px}.guide h2{font-size:23px;margin:26px 0 12px;letter-spacing:-.02em}.rules{margin:0;padding-left:23px}.rules li{padding:4px 0}.rules strong{color:#244c38}.examples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 26px}.example{margin:0;background:#f1f5ef;border-radius:14px;overflow:hidden}.example svg{width:100%;display:block}.example figcaption{padding:9px 12px 12px;font-size:13px;line-height:1.4}.example strong{display:block;margin-bottom:4px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;border-top:1px solid #dedfd4;padding-top:4px}.note{background:#edf3e9;border-left:3px solid #315d46;border-radius:0 10px 10px 0;padding:12px 16px}.note p{margin:0}.practice{border-top:1px solid #dedfd4;margin-top:24px;padding-top:4px}.practice .primary{margin-right:10px}.guide li{margin:5px 0}.mobile-text{display:none}@media(max-width:700px){main{padding:10px 12px 20px}header{padding:10px 14px}.brand{width:210px}.brand small{font-size:9px}header .login{font-size:12px}.surface{padding:14px}.intro,.guide{padding:22px 18px}.intro h1,.guide h1{font-size:27px}.grid,.two-cols{grid-template-columns:1fr}.examples{grid-template-columns:1fr 1fr}.card{padding:20px}.guide-top .secondary{font-size:12px;padding:8px 10px}.guide-top{gap:8px}.two-cols{gap:0}.footer{gap:18px}.intro p,.guide p,.guide li{font-size:15px}.brand img{max-width:100%}}
.tutorial-unavailable{font-size:14px;color:#536b61}a[aria-disabled="true"]{opacity:.5;pointer-events:none}

.footer{flex-direction:column;align-items:center;gap:12px}.footer .legal-links{display:flex;justify-content:center;gap:24px}.footer .social-links{display:flex;justify-content:center;gap:18px}.footer .social-links a{display:inline-flex;padding:8px;border-radius:8px}.footer .social-links a:hover{background:#eaf0e6}.footer .social-links svg{display:block;width:22px;height:22px}.footer a:focus-visible{outline:2px solid #94613e;outline-offset:4px}

.practice-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.practice .practice-actions .primary{margin-right:0}.practice-close{margin-left:0}.practice-actions .tutorial-unavailable{flex-basis:100%}

.guide-practice-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:22px 0}.guide-practice-links a{font:inherit}.guide-practice-links .tutorial-unavailable{flex-basis:100%;margin:0}.guide-practice-close{margin-top:22px;text-align:center}

/* Header used on both public guides. */
[hidden]{display:none!important}
.guide-site-header{display:block;padding:6px 12px;margin-bottom:12px;background:#fffefae8;border-radius:24px}
.guide-site-header .site-heading{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);grid-template-rows:28px auto;column-gap:12px;align-items:center}
.guide-site-header #site-home{grid-column:1;grid-row:1 / span 2;align-self:start;position:relative;width:100%;max-width:310px;margin:0;line-height:1}
.guide-site-header #brand-home{display:block;text-decoration:none;border-radius:8px}.guide-site-header .brand-logo{display:block;width:100%;height:auto}.guide-site-header .brand-claim{position:absolute;left:24%;top:72%;font-size:12px;line-height:1.3;white-space:nowrap}
.guide-site-header #open-auth{grid-column:2;grid-row:2;justify-self:end;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-size:16px;font-weight:600;margin-top:5px}.guide-site-header #open-auth svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.guide-site-header .header-tools{grid-column:2;grid-row:1;justify-self:end;align-self:end;transform:translateY(5px)}
.guide-site-header button{font:inherit;color:#315d46;cursor:pointer}.guide-site-header button:disabled{opacity:.4;cursor:default}.guide-site-header button:hover{background:#eaf0e6}
.guide-site-header .sound-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;border:0;border-radius:50%;background:transparent;color:#315d46}.guide-site-header .sound-toggle[aria-pressed="false"]{color:#746b61}.guide-site-header .sound-toggle svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guide-site-header #account-menu-root{position:relative;grid-column:2;grid-row:2;justify-self:end;align-self:start;min-width:0;max-width:100%;margin-top:5px}.guide-site-header #account-profile{display:flex;align-items:center;justify-content:flex-end;min-width:0;max-width:100%}.guide-site-header #account-menu-toggle{display:flex;align-items:center;gap:10px;border:0;padding:0;background:transparent;text-align:left;font-size:16px;font-weight:400;max-width:100%}
.guide-site-header #account-avatar,.guide-site-header #account-initials{width:34px;height:34px;border-radius:50%;border:1px solid #c4d0c4;flex-shrink:0}.guide-site-header #account-avatar{object-fit:cover}.guide-site-header .initials-avatar{display:inline-flex;align-items:center;justify-content:center;background:#e8ede5;color:#315d46;font-weight:650;font-size:18px}.guide-site-header .account-identity{display:flex;flex-direction:column;min-width:0;line-height:1.2}.guide-site-header #account-name{font-size:14px;font-weight:650;overflow-wrap:anywhere;padding-right:20px}.guide-site-header .account-progress{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}.guide-site-header #account-level{position:relative;font-size:12px;color:#536b61}.guide-site-header .account-menu-lines{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.guide-site-header #account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:10;min-width:200px;padding:6px;background:#fffefa;border:1px solid #c4d0c4;border-radius:12px;box-shadow:0 8px 24px #244c3820}.guide-site-header #account-menu [role="menuitem"]{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;border-radius:8px;white-space:nowrap;padding:10px 12px;color:#315d46;text-decoration:none;font-size:16px;font-weight:600;background:transparent}.guide-site-header #account-menu [role="menuitem"]:hover{background:#edf3e9}.guide-site-header #account-menu svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}.guide-site-header [role="separator"]{border-top:1px solid #c4d0c4;margin:5px}
.guide-site-header a:focus-visible,.guide-site-header button:focus-visible{outline:3px solid #94613e;outline-offset:3px}
.guide-site-header .player-rank{display:inline-block;padding:2px 7px;border-radius:6px;font-size:12px;line-height:1.4;font-weight:650;max-width:100%;overflow-wrap:anywhere}

.guide-site-header .rank-gray{background:#e6e8e7;color:#3c4542}
.guide-site-header .rank-green{background:#dcefdc;color:#27532e}
.guide-site-header .rank-teal{background:#d3efea;color:#18594f}
.guide-site-header .rank-blue{background:#dceafa;color:#244f7c}
.guide-site-header .rank-indigo{background:#e2e4fa;color:#383e81}
.guide-site-header .rank-violet{background:#ece0fa;color:#603789}
.guide-site-header .rank-fuchsia{background:#f5dff1;color:#842969}
.guide-site-header .rank-orange{background:#ffe5ce;color:#8a410f}
.guide-site-header .rank-red{background:#f9dede;color:#8a2929}
.guide-site-header .rank-amber{background:#ffedbd;color:#795100}
.guide-site-header .rank-gold{background:#f4da80;color:#594000;border:1px solid #b79834}
@media(max-width:700px){.guide-site-header .site-heading{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:8px}.guide-site-header #site-home{max-width:250px}.guide-site-header .brand-claim{font-size:clamp(9px,2.4vw,12px)}.guide-site-header #account-menu-root{grid-column:1 / -1;grid-row:2}.guide-site-header #account-avatar,.guide-site-header #account-initials{width:28px;height:28px}.guide-site-header #account-name{font-size:12px}.guide-site-header .account-identity .player-rank{font-size:11px;padding:2px 5px}}

@media(max-width:700px){body{background-image:url("/home-two-bridges-mobile.webp?v=c68dfb9cf9bb3eb5")}}
.guide-site-header .brand-logo{aspect-ratio:3 / 1}

.guide-faq{border-top:1px solid #d8dfd4;padding-top:24px;margin-top:32px}.guide-faq details{border-bottom:1px solid #d8dfd4;padding:16px 0}.guide-faq summary{font-weight:650;line-height:1.5;cursor:pointer;color:#244c38}.guide-faq details p{margin:12px 0 4px}.guide-faq a{color:#315d46}.guide-faq summary:focus-visible{outline:3px solid #94613e;outline-offset:5px}
.site-heading .header-access{grid-column:2;grid-row:2;justify-self:end;align-self:start;display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:5px}.site-heading .header-access:has(#open-auth[hidden]){display:none}.site-heading .header-access #open-auth{align-self:flex-end;width:auto;margin:0;justify-content:flex-end;text-align:right;font-size:14px}.header-google{display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;color:#315d46;border:1px solid #c2d1c4;border-radius:9px;min-height:29px;padding:5px 8px;font:500 11px Arial,sans-serif;cursor:pointer}.header-google[hidden]{display:none}.header-google img{width:15px;height:15px;flex:none}.header-google:focus-visible{outline:3px solid #94613e;outline-offset:3px}.header-google:disabled{opacity:.6;cursor:wait}
.account-identity #account-name{padding-right:0}.account-identity #account-name .account-menu-lines{position:static;display:inline-block;transform:none;width:14px;height:14px;margin:0 0 0 8px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media (hover:hover){.secondary:not([aria-disabled="true"]):hover{background:#315d46;color:#fffefa;border-color:#315d46}}
