:root {
      --navy:#192b3d; --navy2:#233b53; --ink:#18273b; --muted:#53677c;
      --yellow:#ffdb2c; --yellow2:#ffbe0d; --sky:#83c3f3;
      --card:#ffffff; --line:#d8e3ee; --blue:#3c8ee5; --green:#398b5b;
      --tile:#c9c9c9; --tile-light:#f5f5f5; --tile-dark:#828282;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:#eaf2fb;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
    button,input,select{font:inherit}
    button{cursor:pointer}
    button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #267be2;outline-offset:3px}
    .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .site-wrap{max-width:1510px;margin:0 auto;padding:14px 16px 0}
    .site-shell{overflow:hidden;border-radius:22px;border:2px solid #5a7999;background:#fff;box-shadow:0 8px 30px #22517820}
    .topbar{min-height:80px;background:linear-gradient(110deg,#17293b,#223c55);display:flex;align-items:center;gap:28px;padding:10px clamp(18px,4vw,54px);color:#fff;border-bottom:3px solid #34546f}
    .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-width:0}
    .brand img{height:66px;width:66px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 0 #06101d55)}
    .brand-word{display:block;font-size:clamp(26.4px,3.18vw,45.6px);font-weight:1000;letter-spacing:-1.6px;line-height:1;white-space:nowrap;text-shadow:0 3px 0 #07111e,2px 2px 0 #07111e,-1px -1px 0 #07111e}
    .brand-word span{color:#ffd32a}
    .main-nav{display:flex;align-items:center;gap:clamp(16px,2.7vw,44px);margin-left:auto}
    .main-nav a{color:#eff6ff;text-decoration:none;font-size:20.4px;font-weight:650;white-space:nowrap}
    .main-nav a:hover{color:var(--yellow)}
    .lang-select{display:flex;align-items:center;gap:6px;border:1px solid #4e6680;background:#314b64;border-radius:999px;padding:7px 10px 7px 13px;color:#fff;white-space:nowrap}
    .lang-select span{font-size:21.6px}
    .lang-select select{color:#fff;background:transparent;border:0;outline:none;font-weight:700;max-width:120px;cursor:pointer}
    .lang-select select option{color:#14283b;background:white}
    .hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#82c5f6 0%,#c7eaff 78%,#a6dcf0 100%);padding:22px clamp(16px,3.5vw,52px) 22px}
    .hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
        radial-gradient(ellipse 65px 21px at 10% 26%,#ffffff88 99%,transparent 100%),
        radial-gradient(ellipse 42px 31px at 14% 24%,#ffffff88 99%,transparent 100%),
        radial-gradient(ellipse 78px 23px at 70% 13%,#ffffff99 99%,transparent 100%),
        radial-gradient(ellipse 42px 30px at 73% 10%,#ffffff99 99%,transparent 100%),
        radial-gradient(ellipse 70px 25px at 93% 26%,#ffffff90 99%,transparent 100%),
        radial-gradient(ellipse 45px 35px at 90% 22%,#ffffff90 99%,transparent 100%)}
    .hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:95px;z-index:-1;background:radial-gradient(ellipse 110px 80px at 2% 120%,#83b789 98%,transparent 100%),radial-gradient(ellipse 190px 80px at 23% 145%,#6eab80 98%,transparent 100%),radial-gradient(ellipse 180px 70px at 60% 140%,#80b48a 98%,transparent 100%),radial-gradient(ellipse 185px 95px at 100% 145%,#6ba67b 98%,transparent 100%);pointer-events:none}
    .hero-grid{display:grid;grid-template-columns:minmax(252px,340px) minmax(320px,1fr) minmax(220px,340px);gap:clamp(10px,1.8vw,30px);align-items:start;position:relative}
    .game-settings{border:2px solid #c4d4e1;background:linear-gradient(#fcfdff,#eef5fd);border-radius:19px;padding:18px;box-shadow:0 5px 0 #6c9fbd66,0 12px 22px #255a8722;margin-top:14px}
    .settings-head{font-size:28.8px;font-weight:900;letter-spacing:-.8px;margin:0 0 10px}
    .mode-row{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;padding:11px 9px;border-radius:10px;font-size:19.2px;font-weight:750;user-select:none}
    .mode-row .mode-spec{margin-left:auto;color:#33445d;font-weight:700;white-space:nowrap;font-size:15.6px}
    .mode-row.selected{background:#b9dafd}
    .mode-row:not(.selected):hover{background:#e6f0fa}
    .mode-row input{accent-color:#2787ef;width:19px;height:19px;flex:none;margin:0}
    .custom-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:7px 1px 16px 31px}
    .custom-inputs label{font-size:14.4px;font-weight:800;color:#536075}
    .custom-inputs input{width:100%;height:39px;border-radius:9px;border:1px solid #bac8d6;background:white;padding:4px 10px;font-size:19.2px;font-weight:800;color:#233449;margin-top:4px}
    .custom-inputs .mines-input{grid-column:1 / 2}
    .primary-btn{background:linear-gradient(#ffed69,#ffca05);border:2px solid #e2a600;border-bottom-width:4px;box-shadow:inset 0 2px 1px #fff9a8,0 4px 8px #bc8a1930;color:#142031;font-size:21.6px;font-weight:950;border-radius:13px;min-height:55px;padding:9px 16px;transition:filter .1s,transform .1s}
    .primary-btn:hover{filter:brightness(1.04)}
    .primary-btn:active{transform:translateY(2px);border-bottom-width:2px}
    .new-game-btn{width:100%}
    .play-icon{font-size:22.8px;margin-right:6px}
    .settings-note{font-size:14.4px;margin:9px 2px 0;color:#5d7188;text-align:center}
    .game-area{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:9px}
    .board-shell{background:#c2c2c2;border:4px solid #f6f6f6;border-right-color:#747b81;border-bottom-color:#747b81;outline:2px solid #8599a8;border-radius:11px;padding:10px;max-width:100%;box-shadow:0 8px 15px #20394c33}
    .board-top{min-height:64px;background:#c6c6c6;display:flex;align-items:center;justify-content:space-between;gap:8px;border:4px solid #808080;border-right-color:#fdfdfd;border-bottom-color:#fdfdfd;padding:6px 10px;margin-bottom:10px}
    .counter{display:block;min-width:88px;background:#170303;border:3px inset #737373;border-radius:3px;text-align:center;color:#ff3331;line-height:1;padding:5px 3px 4px;font-family:"Courier New",monospace;font-size:clamp(30px,3.6vw,48px);font-weight:1000;letter-spacing:0;text-shadow:0 0 7px #ed1010aa}
    .face-button{border:3px solid #f9f9f9;border-right-color:#777;border-bottom-color:#777;background:#d0d0d0;min-width:53px;width:53px;height:53px;padding:2px;display:grid;place-items:center;font-size:42px;line-height:1;box-shadow:0 2px 2px #0002}
    .face-button:active{border:3px solid #7d7d7d;border-right-color:#fafafa;border-bottom-color:#fafafa}
    .board-scroller{overflow-x:auto;overflow-y:hidden;max-width:100%;padding:0 1px 3px;scrollbar-color:#89a5bb #d8e5f1;scrollbar-width:thin}
    .grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));width:max-content;touch-action:pan-x;user-select:none;-webkit-user-select:none;outline:3px solid #888;outline-offset:0;margin:3px}
    .cell{width:var(--cell);height:var(--cell);min-width:0;min-height:0;padding:0;border:3px solid #f7f7f7;border-right-color:#888;border-bottom-color:#888;background:#c9c9c9;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * .72);line-height:1;font-weight:1000;font-family:Arial,Helvetica,sans-serif;cursor:pointer;outline-offset:-3px;-webkit-tap-highlight-color:transparent;touch-action:pan-x}
    .cell:not(.opened):active{background:#bababa;border:1px solid #8e8e8e}
    .cell.opened{background:#c5c5c5;border:1px solid #989898;cursor:default}
    .cell.mine-hit{background:#f26465}
    .cell.wrong-flag{background:#ffb8ad}
    .cell.flag{font-size:calc(var(--cell) * .64)}
    .cell.mine{font-size:calc(var(--cell) * .63)}
    .cell.n1{color:#1646dc}.cell.n2{color:#087533}.cell.n3{color:#d11e19}.cell.n4{color:#0b237b}
    .cell.n5{color:#8a1c19}.cell.n6{color:#0a8282}.cell.n7{color:#141414}.cell.n8{color:#757575}
    .mobile-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;background:#ffffffb8;border:1px solid #afcde6;border-radius:13px;padding:7px 9px}
    .tool-button{min-height:43px;padding:7px 13px;background:#fff;border:1px solid #9ab8d1;border-radius:10px;color:#243b50;font-weight:800}
    .tool-button.active{background:#ffdf60;border-color:#dca900;color:#322600;box-shadow:inset 0 0 0 2px #ffec96}
    .board-help{font-size:14.4px;font-weight:700;color:#315272;margin:0;text-align:right;flex:1}
        .mascot-area{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding-top:6px}
    .mascot-slogan{font-family:"Trebuchet MS",system-ui,sans-serif;font-style:italic;font-weight:1000;font-size:clamp(28.8px,3.18vw,51.6px);line-height:1.05;letter-spacing:-1.2px;transform:rotate(-5deg);text-shadow:0 2px 1px #ffffff7e;max-width:330px;margin:6px auto 0}
    .mascot-slogan span{color:#d47d00}
    .mascot-swoosh{width:145px;height:8px;background:#ffca10;border-radius:100%;transform:rotate(-7deg);margin:9px auto 0}
    .mascot-illustration{display:block;max-width:100%;width:380px;margin:0 auto -18px;filter:drop-shadow(0 5px 2px #1d45672b)}
    .mascot-chip{position:relative;z-index:1;display:inline-flex;gap:6px;align-items:center;border-radius:999px;border:1px solid #e6b84d;background:#fff6ce;padding:6px 12px;font-size:14.4px;font-weight:850;color:#674d1e}
    .scorebar{display:flex;gap:12px;align-items:center;justify-content:space-around;padding:17px clamp(15px,4vw,55px);background:linear-gradient(#f9fbfe,#edf2f7);border-top:2px solid #c5d4e2;flex-wrap:wrap}
    .scorebar strong{font-size:20.4px}
    .scoreitem{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:16.8px;font-weight:650}
    .scoreitem .score-icon{font-size:26.4px}
    .scoreitem b{font-size:20.4px}
    .outline-btn{background:#f7f9fc;border:2px solid #c5d0db;border-bottom-width:3px;border-radius:13px;color:#18273b;font-size:18px;font-weight:900;min-height:43px;padding:7px 15px}
    .outline-btn:hover{background:#e8f3ff}
    .content{max-width:1320px;margin:28px auto 0;padding:0 16px 40px}
    .welcome{text-align:center;margin:4px 0 25px}
    .eyebrow{color:#3a7cb2;text-transform:uppercase;letter-spacing:2px;font-size:14.4px;font-weight:900}
    .welcome h1{font-size:clamp(32.4px,3.6vw,45.6px);line-height:1.13;margin:7px auto 8px;letter-spacing:-1px}
    .welcome p{font-size:19.2px;color:#506783;max-width:770px;margin:0 auto}
    .info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start}
    .info-card{background:#fff;border:1px solid #d5e1ed;border-radius:19px;padding:24px;min-height:240px;box-shadow:0 5px 19px #274b7011}
    .info-card h2{font-size:25.2px;line-height:1.2;letter-spacing:-.5px;margin:0 0 13px;display:flex;gap:9px;align-items:center}
    .info-card p,.info-card li{font-size:16.8px;color:#53677e}
    .info-card ol{padding-left:19px;margin:0}
    .info-card li{margin-bottom:9px}
    .record-table{border-collapse:collapse;width:100%;font-size:16.8px}
    .record-table th,.record-table td{padding:9px 0;border-bottom:1px solid #e7edf3;text-align:left}
    .record-table th{color:#516780;font-weight:700}
    .record-table td:last-child,.record-table th:last-child{text-align:right;font-weight:850;color:#21394e}
    .record-empty{color:#7890a5;font-style:italic}
    .small-note{font-size:14.4px!important;color:#7a8da1!important;margin:11px 0 0}
    .pill-row{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
    .pill{font-size:14.4px;font-weight:800;padding:6px 9px;background:#ecf5ff;border:1px solid #d7eafa;border-radius:999px;color:#37678c}
    .bottom-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#dcf1fd;border:1px solid #b7d9f1;border-radius:17px;margin-top:22px;padding:18px 24px;flex-wrap:wrap}
    .bottom-banner p{margin:3px 0 0;color:#4b6b87;font-size:15.6px}
    .bottom-banner b{font-size:20.4px}
    footer{font-size:15.6px;color:#71859a;text-align:center;padding:10px 20px 32px}
    footer a{color:#2a699d}
    dialog{border:2px solid #a8c8e0;border-radius:22px;padding:0;max-width:min(460px,calc(100vw - 32px));width:100%;box-shadow:0 25px 90px #0d1e37a8;color:#203449}
    dialog::backdrop{background:#1023389c;backdrop-filter:blur(3px)}
    .dialog-body{text-align:center;padding:28px 26px 25px;background:linear-gradient(#f5fbff,#fff)}
    .dialog-emoji{display:flex;align-items:center;justify-content:center;margin:0 auto 6px;width:125px;height:125px;background:#ffefa0;border:4px solid #ffd052;border-radius:50%;font-size:78px;box-shadow:0 7px 20px #dcad2d2b}
    .dialog-body h2{font-size:38.4px;margin:8px 0 3px;letter-spacing:-1px}
    .dialog-body p{color:#5b7186;margin:0 auto 16px}
    .dialog-controls{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
    .dialog-controls .primary-btn{min-width:155px}
    .sr-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
    @media(max-width:1250px){
      .hero-grid{grid-template-columns:minmax(240px,290px) minmax(310px,1fr) minmax(170px,250px)}
      .game-settings{padding:14px}.mode-row{font-size:16.8px;gap:8px}.mode-row .mode-spec{font-size:13.2px}.mascot-slogan{font-size:34.8px}
      .brand-word{font-size:32.4px}.topbar{gap:15px}.main-nav{gap:17px}.main-nav a{font-size:18px}
    }
    @media(max-width:980px){
      .site-wrap{padding:0}.site-shell{border-radius:0;border-left:0;border-right:0}.topbar{padding:7px 16px}
      .hero-grid{grid-template-columns:minmax(245px,.8fr) minmax(300px,1.2fr)}
      .mascot-area{display:none}.board-shell{margin:auto}.scorebar{padding:14px 12px;gap:11px}
      .brand img{width:49px;height:49px}.brand-word{font-size:clamp(26.4px,3.6vw,34.8px)}.main-nav a{font-size:15.6px}.lang-select{padding:5px 7px}
      .info-grid{grid-template-columns:1fr 1fr}.info-card:last-child{grid-column:span 2;min-height:0}
    }
    @media(max-width:690px){
      .topbar{min-height:68px;gap:6px;flex-wrap:wrap;padding:8px 12px}.brand{gap:5px}.brand img{width:42px;height:42px}
      .brand-word{font-size:clamp(22.8px,6vw,33.6px);letter-spacing:-1.3px}.main-nav{order:3;width:100%;margin:1px auto 0;justify-content:center;gap:29px}
      .main-nav a{font-size:15.6px}.lang-select{margin-left:auto;font-size:14.4px}.lang-select span{font-size:15.6px}.lang-select select{font-size:14.4px;width:65px}
      .hero{padding:14px 12px 17px}.hero-grid{grid-template-columns:minmax(0,1fr);gap:14px}.game-area{order:1}.game-settings{order:2;margin:0}.mascot-area{display:none}
      .board-shell{width:max-content;max-width:100%;padding:8px}.board-top{min-height:54px;padding:5px 8px;margin-bottom:8px}.counter{min-width:69px;font-size:34.8px}
      .face-button{width:45px;height:45px;min-width:45px;font-size:36px}.board-scroller{width:100%}
      .scorebar{justify-content:space-between}.scoreitem{font-size:14.4px;gap:5px}.scoreitem b,.scorebar strong{font-size:16.8px}.scoreitem .score-icon{font-size:20.4px}
      .settings-head{font-size:24px}.mode-row{font-size:18px}.mode-row .mode-spec{font-size:15.6px}.custom-inputs{max-width:340px}
      .info-grid{grid-template-columns:1fr}.info-card:last-child{grid-column:auto}.info-card{min-height:0}.content{margin-top:23px}
      .bottom-banner{padding:16px}.welcome{margin-bottom:19px}
    }
    @media(max-width:390px){.brand-word{font-size:21.6px}.brand img{width:38px;height:38px}.counter{min-width:63px;font-size:30px}.face-button{width:42px;height:42px;min-width:42px}.mode-row .mode-spec{font-size:13.2px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary-btn{transition:none}}

/* Launch build refinements */
html{scroll-padding-top:18px}
.lang-pill{display:flex;align-items:center;gap:7px;border:1px solid #4e6680;background:#314b64;border-radius:999px;padding:8px 12px;color:#fff;font-size:16.8px;font-weight:750;white-space:nowrap}
.sound-panel{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.sound-panel .tool-button{font-size:14.4px;padding:7px 9px;min-height:42px}
.sound-panel .tool-button[aria-pressed="true"]{background:#e8f4ff;border-color:#81b4dc;color:#164675}
.sound-panel .tool-button[aria-pressed="false"]{color:#465a6d}
.volume-control{display:flex;align-items:center;gap:5px;font-size:14.4px;font-weight:800;color:#425e75;min-height:42px}
.volume-control input{width:72px;accent-color:#3c8ee5;cursor:pointer}
.info-grid.extras{margin-top:16px}
.faq-list details{border-bottom:1px solid #e5edf5;padding:11px 0}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{cursor:pointer;font-weight:800;color:#21394e}
.faq-list details p{margin:7px 0 0;font-size:16.8px;color:#586c82}
.practice-note{background:#f0f8ff;border:1px solid #cfe3f6;border-radius:10px;padding:10px 13px;color:#496980;font-size:15.6px;margin:13px 0 0}
.cell.chord-ready{box-shadow:inset 0 0 0 2px #5a98e588}
.cell:focus-visible{outline:3px solid #247dd0;outline-offset:-3px;z-index:1;position:relative}
@media(max-width:980px){.lang-pill{font-size:14.4px;padding:7px 9px}}
@media(max-width:690px){.lang-pill{margin-left:auto;padding:6px 8px;font-size:14.4px}.mobile-actions{justify-content:center}.board-help{text-align:center;flex-basis:100%}.sound-panel{width:100%}.volume-control input{width:66px}.network-cols{grid-template-columns:1fr 1fr}.network-nav{margin:18px 10px 0}}
@media(max-width:390px){.lang-pill{font-size:13.2px}.network-cols{grid-template-columns:1fr}}

/* Permit regular vertical page scrolling and horizontal Expert board scrolling. */
.grid,.cell{touch-action:pan-x pan-y}

/* v2: independent site header, narrower play area, clean board alignment. */
.site-header{background:linear-gradient(110deg,#17293b,#223c55);box-shadow:0 4px 15px #142a3f26;border-bottom:3px solid #34546f}
.site-header .topbar{max-width:1410px;margin:0 auto;background:transparent;border-bottom:0;min-height:84px}
.site-wrap{max-width:1410px;padding:40px 16px 0}
.site-shell{border-radius:20px}
.hero-grid{grid-template-columns:minmax(255px,325px) minmax(315px,1fr) minmax(205px,315px);gap:clamp(13px,1.6vw,25px)}
.hero{padding-inline:clamp(16px,2.6vw,38px)}
.content{max-width:1220px}
.game-area{align-items:center}
.board-shell{width:max-content;max-width:100%;margin-inline:auto;min-width:0}
.board-scroller{width:auto;max-width:100%;min-width:0}
.mobile-actions{width:100%;justify-content:center}
.board-help{flex:1 1 100%;text-align:center}
.sound-panel .tool-button{font-size:14px}
.sound-panel .volume-control{font-size:14px}
.game-settings .mode-spec{font-size:15px}
.mode-row{flex-wrap:wrap;column-gap:9px;row-gap:3px}
.mode-row .mode-spec{margin-left:auto}
/* The yellow medal artwork has room for both the result and the duck in one row. */
dialog{max-width:min(510px,calc(100vw - 32px))}
.dialog-emoji{width:216px;height:174px;gap:7px;flex-direction:row;margin-bottom:10px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fffbd0,#ffe57b 72%,#f8c849)}
.result-symbol{font-size:74px;line-height:1;filter:drop-shadow(0 4px 2px #a9712555);flex:none}
.result-duck{width:93px;height:93px;object-fit:contain;filter:drop-shadow(0 3px 2px #a9712555);flex:none}
.dialog-emoji.result-lose .result-duck{transform:rotate(13deg);filter:grayscale(.12) drop-shadow(0 3px 2px #a9712555)}
.dialog-body h2{margin-top:0}
/* Standard portable EDT navigation panel is maintained separately under includes/. */
.edt-nav-section{max-width:1220px;margin:24px auto 0;padding:0 16px 28px}
.edt-nav-section .edt-leaderboard-promo{margin:20px 0}
/* Fully separated footer. */
.site-footer{margin:10px auto 0;background:#172b3f;color:#cfdeeb;padding:35px max(22px,calc((100% - 1180px)/2)) 18px;text-align:left;font-size:16px}
.site-footer a{color:#eaf5ff;text-decoration:none}
.site-footer a:hover{color:#ffdd38;text-decoration:underline}
.footer-main{display:grid;grid-template-columns:minmax(280px,2fr) 1fr 1fr;gap:32px;align-items:start}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:950;font-size:24px;letter-spacing:-.7px}
.footer-brand img{width:39px;height:39px}
.footer-brand span{color:#ffd32a}
.footer-about p{max-width:420px;color:#c1d3e1;font-size:16px;line-height:1.6;margin:11px 0 0}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-links h2{font-size:18px;color:#ffdf5c;margin:1px 0 6px}
.footer-links a{font-size:16px}
.footer-bottom{margin-top:28px;padding-top:15px;border-top:1px solid #496075;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;color:#b0c3d5}
@media(max-width:1250px){
 .hero-grid{grid-template-columns:minmax(235px,285px) minmax(310px,1fr) minmax(175px,235px)}
 .mode-row .mode-spec{width:100%;margin-left:30px}
 .site-header .topbar{gap:14px}
 .brand-word{font-size:clamp(26px,2.65vw,35px)}
}
@media(max-width:980px){
 .site-wrap{padding:30px 12px 0}
 .site-shell{border-radius:18px;border:2px solid #5a7999}
 .hero-grid{grid-template-columns:minmax(235px,.82fr) minmax(0,1.18fr)}
 .mascot-area{display:none}
 .site-header .topbar{padding:11px 16px;min-height:73px}
 .info-grid{grid-template-columns:1fr 1fr}
 .footer-main{grid-template-columns:minmax(240px,2fr) 1fr 1fr;gap:17px}
}
@media(max-width:690px){
 .site-wrap{padding:24px 10px 0}
 .site-shell{border-radius:14px;border:2px solid #5a7999}
 .site-header .topbar{padding:8px 10px;gap:7px}
 .hero-grid{grid-template-columns:minmax(0,1fr)}
 .hero{padding:18px 10px 23px}
 .board-shell{max-width:100%}
 .board-top{gap:5px}
 .mode-row .mode-spec{width:auto;margin-left:auto}
 .mode-row{font-size:18px}
 .game-area{width:100%}
 .mobile-actions{gap:8px}
 .board-help{font-size:14px}
 .site-footer{padding:26px 20px 17px}
 .footer-main{grid-template-columns:1fr 1fr;row-gap:25px}
 .footer-about{grid-column:span 2}
 .edt-nav-section{padding:0 10px 18px}
}
@media(max-width:390px){
 .brand-word{font-size:clamp(16px,5.1vw,20px);letter-spacing:-.8px}
 .brand img{width:35px;height:35px}
 .lang-pill{font-size:12px;padding:5px 7px}
 .main-nav{gap:18px}
 .site-wrap{padding:22px 7px 0}
 .hero{padding-inline:7px}
 .board-shell{padding:6px}
 .board-top{padding:5px}
 .counter{min-width:61px}
 .result-symbol{font-size:69px}
 .result-duck{width:88px;height:88px}
}
@media(max-width:690px){
  .info-grid,.info-grid.extras{grid-template-columns:minmax(0,1fr)}
  .info-card,.info-card:last-child{grid-column:auto;min-width:0}
}
@media(max-width:390px){
  .footer-brand{font-size:18px;gap:7px;letter-spacing:-.4px}
  .footer-brand img{width:32px;height:32px}
}
/* Increase the portable network panel typography without modifying its shared source CSS. */
.edt-nav-section .edt-main{font-size:18px}
.edt-nav-section .edt-main::after{font-size:11px}
.edt-nav-section .edt-live h4,.edt-nav-section .edt-col h4{font-size:14.5px}
.edt-nav-section .edt-link{font-size:15.5px}
.edt-nav-section .edt-more-btn{font-size:13px}

/* V3 refinement: give the game the entire header navigation area, and a tidy mobile brand. */
.site-header .topbar{justify-content:space-between}
.site-header .lang-pill{margin-left:auto}
.brand-word{display:flex;align-items:baseline;flex-wrap:nowrap;gap:0}
.brand-word .brand-line{display:inline;white-space:nowrap;color:#fff}
.brand-word .brand-line .brand-highlight{color:#ffd32a}
.brand-word .brand-line:last-child{color:#fff}
.face-button{display:grid;place-items:center;line-height:1;padding:4px}
.face-art{display:block;width:100%;height:100%;max-width:42px;max-height:42px;margin:auto}
.face-won,.face-lost{display:none}
.face-button[data-expression="won"] .face-happy,
.face-button[data-expression="lost"] .face-happy{display:none}
.face-button[data-expression="won"] .face-won{display:block}
.face-button[data-expression="lost"] .face-lost{display:block}
/* Minesweeper remains one-click and concentration-first. Keep the custom modes below. */
.mode-row{justify-content:flex-start}
.mode-row .mode-spec{display:none}
/* Large boards: show a genuine, thick scrollbar in supported browsers. */
.board-scroller{scrollbar-width:auto;scrollbar-color:#285d83 #bdd9ec;padding-bottom:5px}
.board-scroller::-webkit-scrollbar{height:20px}
.board-scroller::-webkit-scrollbar-track{background:#bdd9ec;border-radius:12px;border:2px solid #83a5c1}
.board-scroller::-webkit-scrollbar-thumb{background:#285d83;border:3px solid #bedcf0;border-radius:12px;min-width:52px}
.board-scroller::-webkit-scrollbar-thumb:hover{background:#143e61}
/* Always-visible, touch-friendly overflow navigation independent of overlay scrollbars. */
.board-scroll-controls{width:100%;max-width:100%;background:#ebf7ff;border:2px solid #619ac7;border-radius:12px;padding:9px 10px 10px;box-shadow:0 3px 0 #417db143}
.board-scroll-controls[hidden]{display:none!important}
.board-scroll-label{font-weight:850;text-align:center;color:#17496e;font-size:15px;margin:0 0 6px}
.board-scroll-row{display:flex;align-items:center;gap:10px;width:100%}
.board-scroll-arrow{display:grid;place-items:center;flex:0 0 42px;width:42px;height:43px;border:1px solid #547f9f;border-bottom:3px solid #466e8f;border-radius:9px;background:#fff;color:#124c78;font-size:18px;font-weight:900;cursor:pointer}
.board-scroll-arrow:hover:not(:disabled){background:#d5ebff}
.board-scroll-arrow:disabled{opacity:.4;cursor:default}
#board-scroll-range{flex:1;min-width:0;width:100%;height:30px;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer;background:transparent;touch-action:pan-y}
#board-scroll-range::-webkit-slider-runnable-track{height:18px;background:linear-gradient(to right,#4b94cb var(--board-scroll-progress,0%),#bed7eb var(--board-scroll-progress,0%));border:2px solid #82abc8;border-radius:12px}
#board-scroll-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:52px;height:28px;border:3px solid #fff;border-radius:14px;background:#1c6291;box-shadow:0 1px 4px #17354e88;margin-top:-7px}
#board-scroll-range::-moz-range-track{height:17px;background:#bed7eb;border:2px solid #82abc8;border-radius:12px}
#board-scroll-range::-moz-range-progress{height:17px;background:#4b94cb;border-radius:12px}
#board-scroll-range::-moz-range-thumb{width:52px;height:26px;border:3px solid #fff;border-radius:14px;background:#1c6291;box-shadow:0 1px 4px #17354e88}
#board-scroll-range:focus-visible{outline:3px solid #147fc4;outline-offset:3px}
/* Footer: compact brand with no accidental spacing in the wordmark. */
.footer-main{grid-template-columns:minmax(0,2fr) minmax(150px,1fr)}
.footer-brand{display:inline-flex;white-space:nowrap;gap:8px}
.footer-brand-text{color:#eaf5ff!important;display:inline;white-space:nowrap;letter-spacing:-.7px}
.footer-brand-text span{color:#ffd32a}
@media(max-width:690px){
  .site-header .topbar{flex-wrap:nowrap;min-height:78px;gap:9px;padding:11px 12px}
  .site-header .brand{flex:1 1 auto;gap:7px;min-width:0}
  .brand img{width:43px;height:43px;flex:none}
  .brand-word{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:.98;font-size:clamp(21px,5.4vw,29px);letter-spacing:-1px}
  .lang-pill{flex:0 0 auto;margin-left:auto;font-size:14px;padding:7px 9px}
  .board-scroll-label{font-size:14px}
  .board-scroll-row{gap:7px}
  .board-scroll-arrow{width:40px;flex-basis:40px}
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(130px,.5fr)}
  .footer-about{grid-column:auto}
}
@media(max-width:390px){
  .site-header .topbar{gap:5px;padding:8px 7px}
  .brand img{width:37px;height:37px}
  .brand-word{font-size:clamp(18px,5.6vw,22px);letter-spacing:-.7px}
  .lang-pill{padding:6px 7px;font-size:12.5px}
  .footer-main{grid-template-columns:1fr}
  .footer-about{grid-column:auto}
}


/* V4: same dark navy for the separate header and footer, without header line or shadow. */
.site-header{background:#172b3f;border:0;box-shadow:none}
.site-header .topbar{background:transparent;border:0}
/* Footer brand stays compact on desktop but splits cleanly at mobile widths. */
.footer-brand{min-width:0}
.footer-brand-text{display:inline-flex;align-items:baseline;white-space:nowrap;min-width:0}
.footer-brand-text .footer-brand-line{color:#eaf5ff;white-space:nowrap}
.footer-brand-text .footer-duck-highlight{color:#ffd32a}
@media(max-width:690px){
  /* One content column prevents brand and Information links from colliding. */
  .footer-main{grid-template-columns:minmax(0,1fr);gap:20px}
  .footer-about{grid-column:auto;min-width:0}
  .footer-brand{display:inline-flex;align-items:center;gap:8px;white-space:normal;min-width:0}
  .footer-brand img{flex:none}
  .footer-brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;white-space:normal;font-size:clamp(20px,5.7vw,25px);letter-spacing:-.5px}
  .footer-brand-text .footer-brand-line{display:block;white-space:nowrap}
  .footer-links{margin-left:4px}
  .footer-bottom{margin-top:23px}
}
@media(max-width:390px){
  .footer-brand-text{font-size:clamp(20px,6vw,23px)}
}
/* Standalone About page uses the same header and footer as the game. */
.about-page{width:min(920px,calc(100% - 32px));margin:42px auto 54px}
.about-card{background:#fff;border:1px solid #c9dceb;border-radius:18px;padding:clamp(20px,3vw,38px);box-shadow:0 6px 18px #18446b12}
.about-card h1{font-size:clamp(33px,4.5vw,46px);line-height:1.14;margin:0 0 18px;color:#17324d}
.about-card h2{font-size:clamp(24px,3vw,30px);margin:25px 0 8px;color:#19384f}
.about-card p{font-size:clamp(17px,1.7vw,20px);line-height:1.65;margin:0 0 15px;color:#425a70}
.about-back{display:inline-block;margin-top:10px;border-radius:10px;padding:11px 18px;background:#ffdb2c;color:#1c3246;text-decoration:none;font-weight:850;border-bottom:3px solid #d9a000}
.about-back:hover{background:#ffe659}
@media(max-width:690px){.about-page{margin:25px auto 36px}}
@media(max-width:390px){.about-card h1{font-size:clamp(25px,7.75vw,29px);overflow-wrap:anywhere}}

/* V5: cross-network towers remain completely outside the game layout.
   On 1900px+ viewports their 160px width sits 20px left of the game, and
   the 20px vertical gap separates Cyber Attack Map from Internet Speed Test. */
.site-wrap{position:relative}
.duck-side-promos{display:none}
@media (min-width:1900px){
  .duck-side-promos{
    display:flex;
    flex-direction:column;
    gap:20px;
    position:absolute;
    top:40px;
    left:-164px;
    width:160px;
    z-index:1;
  }
  .duck-side-promo-link{display:block;line-height:0;border-radius:10px;overflow:hidden}
  .duck-side-promo-link img{display:block;width:100%;height:auto}
  .duck-side-promo-link:hover{filter:brightness(1.07)}
}




/* EDT-style header language picker. Only released language editions appear. */
.site-header{position:relative;z-index:70}
.duck-lang-picker{position:relative;margin-left:auto;flex:0 0 auto;color:#fff;font-size:14px;font-weight:750}
.duck-lang-button{display:flex;align-items:center;gap:7px;min-height:37px;padding:7px 11px;list-style:none;cursor:pointer;color:#f8fbff;background:#234963;border:1px solid #59778f;border-radius:10px;user-select:none;white-space:nowrap}
.duck-lang-button::-webkit-details-marker{display:none}
.duck-lang-button::marker{content:''}
.duck-lang-button:hover,.duck-lang-picker[open] .duck-lang-button{background:#2c5c7b;border-color:#7eafc8}
.duck-lang-button:focus-visible{outline:3px solid #f6d84c;outline-offset:3px}
.duck-lang-flag,.duck-lang-choice [aria-hidden="true"]{font-size:18px;line-height:1}
.duck-lang-chevron{display:inline-block;transform:translateY(-2px);font-size:14px;opacity:.9;transition:transform .12s}
.duck-lang-picker[open] .duck-lang-chevron{transform:rotate(180deg) translateY(1px)}
.duck-lang-menu{position:absolute;top:calc(100% + 9px);right:0;width:320px;max-width:calc(100vw - 20px);padding:9px;border:1px solid #4a748d;border-radius:15px;background:#092a40;box-shadow:0 16px 32px #07172577;z-index:500}
.duck-lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:min(56vh,460px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-color:#68899e #17384e;scrollbar-width:thin}
.duck-lang-choice{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;border:1px solid #32566d;border-radius:9px;padding:8px 9px;background:#17394f;color:#fff;text-decoration:none;font-weight:750;font-size:13.5px;line-height:1.15}
.duck-lang-choice:hover,.duck-lang-choice:focus-visible{background:#255e84;border-color:#4e9dcc;color:#fff}
.duck-lang-choice.is-active{background:#075c93;border-color:#37a9e9}
.duck-lang-choice span:last-child{overflow-wrap:anywhere}
.duck-lang-choice:focus-visible{outline:2px solid #f9d94e;outline-offset:0}
/* As more translations are published, switch to EDT's four-column desktop menu. */
.duck-lang-picker--many .duck-lang-menu{width:660px}
.duck-lang-picker--many .duck-lang-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:690px){
 .duck-lang-picker{margin-left:auto}
 .duck-lang-button{min-width:42px;min-height:38px;padding:7px 9px;justify-content:center}
 .duck-lang-current,.duck-lang-chevron{display:none}
 .duck-lang-menu{width:306px;max-width:calc(100vw - 20px);top:calc(100% + 10px);padding:7px;border-radius:13px}
 .duck-lang-grid,.duck-lang-picker--many .duck-lang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .duck-lang-picker--many .duck-lang-menu{width:306px}
 .duck-lang-choice{font-size:12.5px;min-height:35px;padding:7px;gap:6px}
}