/* Web edition V2.7. The independently released lite HTML keeps its own palette. */
body[data-edition="web"]{--paper:#f7f7f0;--ink:#294236;--muted:#6b7c70;--line:#dce4d9;--green:#c9ded0;--purple:#e7e2ef;--blue:#e4eceb;--accent:#efb088;--sage:#416c55;--gold:#f1dfae}
body[data-edition="web"] .site-header{background:#fafbf5}
body[data-edition="web"] .header-inner{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,390px);align-items:center;gap:16px 28px;padding-top:20px;padding-bottom:18px}
body[data-edition="web"] .header-inner>.brand{grid-column:1;grid-row:1;justify-self:start}
body[data-edition="web"] .header-inner>nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body[data-edition="web"] .site-header .nav-link{display:flex;min-width:0;min-height:68px;padding:13px 18px;gap:12px;border:1px solid #dce5da;border-radius:14px;background:#f1f5ec;color:#5d7562;white-space:normal;transition:background .18s,border-color .18s}
body[data-edition="web"] .site-header .nav-link:hover{background:#e7efe4}
body[data-edition="web"] .site-header .nav-link.active{background:#dceadb;border-color:#abc6ad;color:#294b37}
body[data-edition="web"] .site-header .nav-link.active:after{display:none}
body[data-edition="web"] .site-header .nav-link .icon{width:22px;height:22px}
body[data-edition="web"] .site-header .nav-copy{display:block;min-width:0}
body[data-edition="web"] .site-header .nav-copy strong{display:block;font-size:13px;line-height:1.5}
body[data-edition="web"] .site-header .nav-copy small{display:block;font-size:9px;line-height:1.6;margin-top:3px;color:#516b53}
body[data-edition="web"] .header-identity{grid-column:2;grid-row:1;width:100%;min-width:0}
body[data-edition="web"] .header-id-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;min-height:18px}
body[data-edition="web"] .header-id-top h2{font-size:11px;line-height:1.6;margin:0;overflow-wrap:anywhere;font-weight:700}
body[data-edition="web"] .header-identity .home-id-tools{margin:0;gap:10px;flex-shrink:0}
body[data-edition="web"] .header-identity .home-id-tools button{color:#3e6c51;font-size:10px;min-height:24px;padding:2px}
body[data-edition="web"] .header-identity .home-id-entry{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
body[data-edition="web"] .header-identity .home-id-entry input{min-width:0;width:100%;background:#fffef9;border:1px solid #bdcebe;border-radius:9px;padding:10px 12px;font-size:13px;height:43px;color:var(--ink)}
body[data-edition="web"] .header-identity .home-id-entry input:focus{outline:2px solid #769b7c;outline-offset:1px}
body[data-edition="web"] .header-identity .home-id-entry input::placeholder{color:#77887c}
body[data-edition="web"] .header-identity .home-id-entry button{min-width:53px;min-height:43px;padding:9px 12px;border:1px solid #b8ccba;border-radius:9px;font-size:12px;line-height:1.5;background:#e7efdf;color:#294b37;white-space:nowrap}
body[data-edition="web"] .header-identity #home-create-player{background:#416c55;border-color:#416c55;color:#fffef8}
body[data-edition="web"] .header-identity .home-sync-note{font-size:10px;line-height:1.7;margin:5px 0 0;min-height:17px;color:#627662}
body[data-edition="web"] .header-identity [data-sync-state="synced"]{color:#356243}
body[data-edition="web"] .header-identity [data-sync-state="offline"]{color:#925832}
body[data-edition="web"] .header-identity .player-error{font-size:10px;margin:4px 0 0;min-height:0}
body[data-edition="web"] .header-identity .player-error:empty{display:none}
body[data-edition="web"] .friends-line{color:#6d816e}
body[data-edition="web"] .hero{position:relative;margin:20px 0 28px;padding:40px 35px 35px;min-height:450px;background:linear-gradient(125deg,#eaf1e2 0%,#f9faef 63%,#eff0e4 100%);border:1px solid #dde6d6;border-radius:26px}
body[data-edition="web"] .hero p{color:#59735e}
body[data-edition="web"] .hero-button{background:var(--accent);border-color:#775842;box-shadow:3px 3px 0 #775842;color:#443b2a;min-height:47px}
body[data-edition="web"] .hero-button:hover{box-shadow:2px 2px 0 #775842}
body[data-edition="web"] .hero-features{color:#5d755d}
body[data-edition="web"] .hero-art{background-image:radial-gradient(#b9cbb5 1px,transparent 1px)}
body[data-edition="web"] .hero-art:before{background:#dce7d3}
body[data-edition="web"] .handheld{background:#bccdc1;box-shadow:7px 9px 0 #8b9e92,11px 13px 0 #334c3333}
body[data-edition="web"] .device-light{background:#9baea1}
body[data-edition="web"] .device-center span{background:#7f9587}
body[data-edition="web"] .float-plane{background:#ebdbc6}
body[data-edition="web"] .art-sticker{background:#f1dfae}
body[data-edition="web"] .home-friends{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 23px;border:1px solid #e2d7b7;border-radius:16px;background:linear-gradient(110deg,#f6edcf,#fcfaf1);margin-bottom:28px}
body[data-edition="web"] .home-friends .section-kicker{font-size:8px;color:#776439}
body[data-edition="web"] .home-friends h2{font-size:18px;line-height:1.5;margin:0}
body[data-edition="web"] .home-friends h2>span{font-size:11px;font-weight:400;color:#6b6546;margin-left:12px}
body[data-edition="web"] .home-friends p{font-size:11px;line-height:1.8;margin:6px 0 0;color:#6d6143}
body[data-edition="web"] .home-rank-actions{display:flex;gap:8px;flex-shrink:0}
body[data-edition="web"] .home-rank-actions button{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:10px 12px;font-size:11px;border:1px solid #d6c8a4;border-radius:9px;background:#fffdf3;white-space:nowrap;color:#6b623f}
body[data-edition="web"] .home-rank-actions .icon{width:14px;height:14px}
body[data-edition="web"] .home-rank-actions #home-all-ranks{background:#e9deb8;color:#504c32}
body[data-edition="web"] .card-friend-record{display:block;width:100%;min-width:0;text-align:left;padding:11px 12px;margin:0 0 14px;background:#f4f1df;border:1px solid #e5dec5;border-radius:10px;line-height:1.6}
body[data-edition="web"] .card-friend-record:hover{border-color:#bca977;background:#f3ecd5}
body[data-edition="web"] .friend-card-label{display:flex;justify-content:space-between;gap:7px;font-size:10px;color:#756a45}
body[data-edition="web"] .friend-card-label small{font-size:8px;font-weight:400;text-align:right;color:#71664b}
body[data-edition="web"] .friend-best{display:block;overflow-wrap:anywhere;font-size:12px;color:#494d35;margin-top:4px}
body[data-edition="web"] .friend-card-bottom{display:flex;justify-content:space-between;gap:6px;font-size:9px;margin-top:5px;color:#606a46}
body[data-edition="web"] .friend-card-bottom>span:last-child{white-space:nowrap}
body[data-edition="web"] .card-friend-record[data-state="loading"] .friend-best,body[data-edition="web"] .card-friend-record[data-state="error"] .friend-best{font-weight:400;color:#72674c}
body[data-edition="web"] .compact-card{display:flex;flex-direction:column;align-items:stretch}
body[data-edition="web"] .compact-card>.compact-game-button{flex:1}
body[data-edition="web"] .compact-card>.card-friend-record{width:calc(100% - 20px);margin:0 10px 10px;padding:9px 10px}
body[data-edition="web"] .compact-card .friend-card-label{font-size:9px;flex-wrap:wrap}
body[data-edition="web"] .compact-card .friend-best{font-size:10px}
body[data-edition="web"] .compact-card .friend-card-bottom{font-size:9px}
body[data-edition="web"] .card-relaxed-note{font-size:10px;color:#557056;padding:10px 12px;background:#edf4e6;border-radius:9px;margin-bottom:10px}
body[data-edition="web"] .compact-card>.card-relaxed-note{margin:0 10px 10px;font-size:9px}
body[data-edition="web"] .game-friends{padding:16px;border:1px solid #ded8bd;border-radius:14px;background:#fcfaef;min-width:0}
body[data-edition="web"] .game-friends-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
body[data-edition="web"] .game-friends h2{display:flex;align-items:center;gap:7px;font-size:13px;margin:0}
body[data-edition="web"] .game-friends h2 .icon{width:16px;height:16px;color:#94804f}
body[data-edition="web"] .game-friends-heading button{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ddd4b5;border-radius:9px;background:#fffdf4}
body[data-edition="web"] .game-friends-heading button .icon{width:15px;height:15px}
body[data-edition="web"] .game-friends-mode{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#6e6548;line-height:1.7;margin:5px 0 11px}
body[data-edition="web"] .game-friends-mode>span:last-child{white-space:nowrap}
body[data-edition="web"] .game-rank-scroll{max-height:280px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid #e7e0c9;border-radius:9px;background:#fffef8}
body[data-edition="web"] .game-rank-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:10px;line-height:1.6}
body[data-edition="web"] .game-rank-table th{background:#f0ecd9;font-weight:500;color:#706a4b;position:sticky;top:0;z-index:1}
body[data-edition="web"] .game-rank-table th:first-child{width:40px}
body[data-edition="web"] .game-rank-table th:last-child{width:82px}
body[data-edition="web"] .game-rank-table th,body[data-edition="web"] .game-rank-table td{padding:9px 6px;text-align:left;border-bottom:1px solid #efebdc;overflow-wrap:anywhere}
body[data-edition="web"] .game-rank-table td:last-child{font-variant-numeric:tabular-nums;font-size:10px;text-align:right}
body[data-edition="web"] .game-rank-table th:last-child{text-align:right}
body[data-edition="web"] .game-rank-table .rank-number{width:25px;height:25px;font-size:10px}
body[data-edition="web"] .game-rank-table .rank-me{margin-left:3px;font-size:7px;padding:1px 3px}
body[data-edition="web"] .game-rank-table .my-rank-row{background:#e8f0db}
body[data-edition="web"] .game-rank-table .game-rank-empty{padding:17px 10px;font-size:10px;text-align:center;line-height:1.8;color:#6e6548}
body[data-edition="web"] #game-my-rank{font-size:11px;line-height:1.8;color:#416143;margin:11px 0 0;min-height:20px}
body[data-edition="web"] .game-rank-rule{font-size:9px;line-height:1.8;color:#71694f;margin:6px 0 0}
body[data-edition="web"] .settings-panel>.primary-button,body[data-edition="web"] .rank-bottom>.primary-button{background:#416c55;border-color:#416c55;color:#fffef8}
body[data-edition="web"] .filter.active,body[data-edition="web"] .difficulty-options button.selected,body[data-edition="web"] .rank-levels button.selected{background:#dcebd7;border-color:#aac1a4;color:#294b37}
body[data-edition="web"] .playing-badge{background:#e4eedc;color:#426644}
body[data-edition="web"] .floating-help-button,body[data-edition="web"] .back-to-top{background:#e8efdf;border-color:#b9cbb0;color:#3c6547}
@media(max-width:1000px){
 body[data-edition="web"] .header-inner{gap:14px 20px;grid-template-columns:minmax(0,1fr) minmax(320px,370px)}
 body[data-edition="web"] .site-header .nav-link{padding:12px 14px;gap:10px}
 body[data-edition="web"] .hero{padding:34px 25px;min-height:400px}
 body[data-edition="web"] .home-friends h2>span{display:block;margin:4px 0 0}
}
@media(max-width:760px){
 body[data-edition="web"] .header-inner{grid-template-columns:minmax(0,1fr);gap:13px;padding-top:16px;padding-bottom:15px}
 body[data-edition="web"] .header-inner>.brand{grid-row:1;grid-column:1}
 body[data-edition="web"] .header-identity{grid-row:2;grid-column:1;max-width:none}
 body[data-edition="web"] .header-inner>nav{grid-row:3;grid-column:1;gap:7px}
 body[data-edition="web"] .site-header .nav-link{padding:10px 6px;min-height:62px;gap:5px;flex-direction:column;justify-content:center;text-align:center;border-radius:11px}
 body[data-edition="web"] .site-header .nav-link .icon{width:18px;height:18px}
 body[data-edition="web"] .site-header .nav-copy strong{font-size:11px}
 body[data-edition="web"] .site-header .nav-copy small{display:none}
 body[data-edition="web"] .header-identity .home-id-entry input{font-size:16px;height:44px}
 body[data-edition="web"] .header-identity .home-id-entry button{min-height:44px;font-size:12px;min-width:56px}
 body[data-edition="web"] .hero{padding:28px 22px;min-height:355px;border-radius:20px}
 body[data-edition="web"] .hero h1{font-size:43px}
 body[data-edition="web"] .hero-features{gap:10px;font-size:9px}
 body[data-edition="web"] .home-friends{align-items:flex-start;flex-direction:column;gap:12px;padding:18px;margin-bottom:24px}
 body[data-edition="web"] .home-friends h2>span{display:inline-block;margin-left:9px;font-size:10px}
 body[data-edition="web"] .home-rank-actions button{min-height:42px}
 body[data-edition="web"] .game-rank-scroll{max-height:240px}
}
@media(max-width:540px){
 body[data-edition="web"] .hero{min-height:300px;padding:24px 17px 27px;margin-top:16px}
 body[data-edition="web"] .hero h1{font-size:clamp(27px,7.4vw,37px)}
 body[data-edition="web"] .hero p{max-width:57%;font-size:10px;line-height:1.9}
 body[data-edition="web"] .hero-button{font-size:11px;gap:15px;padding:11px 14px}
 body[data-edition="web"] .hero-features{flex-wrap:wrap;max-width:64%;gap:8px 11px;margin-top:21px;font-size:8px}
 body[data-edition="web"] .hero-art{right:9px;top:43px;width:40%;height:204px;background-image:none}
 body[data-edition="web"] .hero-art:before{width:140px;height:140px}
 body[data-edition="web"] .handheld{box-shadow:4px 5px 0 #8b9e92,6px 7px 0 #334c3333}
 body[data-edition="web"] .home-friends h2{font-size:17px}
 body[data-edition="web"] .home-friends h2>span{display:block;margin:3px 0 0;font-size:10px}
 body[data-edition="web"] .home-friends p{font-size:10px}
 body[data-edition="web"] .featured-grid .card-friend-record{padding:9px;margin:0 0 11px;border-radius:9px}
 body[data-edition="web"] .featured-grid .friend-card-label{font-size:9px;flex-wrap:wrap;gap:2px}
 body[data-edition="web"] .featured-grid .friend-card-label small{font-size:7px;text-align:left}
 body[data-edition="web"] .featured-grid .friend-best{font-size:10px;line-height:1.8}
 body[data-edition="web"] .featured-grid .friend-card-bottom{font-size:9px;flex-wrap:wrap;gap:4px}
 body[data-edition="web"] .compact-card>.card-friend-record{width:calc(100% - 16px);margin:0 8px 8px;padding:8px}
 body[data-edition="web"] .compact-card .friend-card-bottom{flex-wrap:wrap;gap:4px}
}
@media(prefers-reduced-motion:reduce){body[data-edition="web"] .site-header .nav-link{transition:none}}