@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&display=swap');
:root{font-family:'Golos Text',system-ui,sans-serif;color:#203e34;background:#f5f3eb;font-synthesis:none;--blue:#417d99;--red:#b75d48;--line:#deded1}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #dbad4d;outline-offset:3px}header{max-width:1440px;margin:auto;padding:27px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;font-weight:800;letter-spacing:3px;font-size:20px}.brand-icon{font-size:43px;font-weight:400;line-height:1}.brand small{display:block;letter-spacing:2.8px;font-size:9px;font-weight:500;margin-top:5px}.mode{font-size:12px;color:#657067;display:flex;gap:9px;align-items:center}.mode i{width:7px;height:7px;border-radius:50%;background:#7b8e64}.quiet{border:0;background:none;color:#617067;padding:9px 0;font-size:12px}.quiet:hover{color:#162f25}.quiet span{margin-left:15px}main{max-width:1440px;margin:0 auto;padding:46px 5% 28px;display:grid;grid-template-columns:minmax(225px,1fr) minmax(330px,510px) minmax(170px,.65fr);gap:44px}.intro{padding-top:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#819078}h1{font-size:clamp(28px,2.6vw,40px);line-height:1.2;font-weight:500;letter-spacing:-1.5px;margin:22px 0}h1 em{font-family:Georgia,serif;font-weight:400;font-style:italic;color:#6d8058}.intro>p{font-size:12px;line-height:1.9;color:#7b8375}.intro-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;margin-top:45px;padding-bottom:15px;border-bottom:1px solid var(--line)}.intro-label span{color:#92988a}.turn{margin:22px 0 17px;display:flex;gap:13px;align-items:center;min-height:46px}.turn-orb{width:42px;height:42px;background:var(--blue);border:6px solid #dfE8e7;border-radius:50%;display:grid;place-items:center;color:white;font-size:17px}.turn.red .turn-orb{background:var(--red);border-color:#f0dfd4}.turn b{font-size:16px;font-weight:600}.turn small{display:block;color:#8c9283;font-size:10px;margin-top:7px}.actions{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:17px}.actions button{font-size:10px}.new-game{width:100%;background:#234c3c;color:#fff;border:0;border-radius:5px;padding:15px 17px;text-align:left;margin-top:24px;font-size:12px;display:flex;justify-content:space-between}.new-game:hover{background:#31634f}.intro .saved{font-size:9px;text-align:center;margin-top:10px}.field-key{display:flex;justify-content:space-between;gap:8px;margin-top:43px;color:#8b9180;font-size:10px}.game{min-width:0}.player{display:flex;align-items:center;gap:9px;height:40px;font-size:11px}.player-dot{width:8px;height:8px;border-radius:50%;background:var(--red)}.blue .player-dot{background:var(--blue)}.player .captured{margin-left:auto;letter-spacing:2px;font-size:14px;filter:grayscale(.8);opacity:.7}.player .playing{margin-left:4px;font-size:8px;border:1px solid currentColor;padding:3px 5px;border-radius:3px}.player.red{color:var(--red)}.player.blue{color:var(--blue)}.board-wrap{padding:12px;background:#e8e6d6;border:1px solid #d8d9c5;border-radius:9px;box-shadow:0 12px 28px #33472e0b}#board{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #cbd0b7;border-radius:4px;overflow:hidden;background:#e7ebd7}.cell{position:relative;aspect-ratio:1;border:0;border-right:1px solid #c5cfb46b;border-bottom:1px solid #c5cfb46b;background:#e8ecd9;display:grid;place-items:center;padding:0;min-width:0}.cell.shade{background:#e2e8cf}.cell.water{background:#b7d2d1;color:#81b4b7}.cell.water::before{content:'≈';font-family:Georgia,serif;font-size:30px;opacity:.35}.cell.trap{background:#e4dfc7}.cell.den{background:#d8dec2}.terrain-icon{position:absolute;color:#a7ac8b;font-size:26px}.den .terrain-icon{font-size:33px;color:#8d9d73}.cell[data-owner=red] .terrain-icon{color:#b89478}.piece{position:absolute;width:79%;height:79%;border-radius:50%;border:2px solid #f8f7ed;background:#faf8ef;box-shadow:0 2px 3px #23351e23,0 0 0 1px #c9ceba;display:flex;align-items:center;justify-content:center;font-size:clamp(19px,2.3vw,33px);transition:transform .15s}.piece.blue{background:#e7f1f3;border-color:#92b4c3;box-shadow:0 2px 3px #23351e23,0 0 0 1px #598ba5}.piece.red{background:#fbede0;border-color:#d6a28e;box-shadow:0 2px 3px #23351e23,0 0 0 1px #b87459}.piece small{position:absolute;right:-1px;bottom:-2px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:var(--blue);font-size:8px;font-weight:700;color:white}.piece.red small{background:var(--red)}.selected{box-shadow:inset 0 0 0 3px #c29841!important;background:#e7d7a7!important}.selected .piece{transform:scale(1.08)}.legal::after{content:'';position:absolute;width:22%;height:22%;border-radius:50%;background:#41674766}.legal.capture::after{width:88%;height:88%;background:transparent;border:3px dashed #a35c3a;z-index:1}.last{box-shadow:inset 0 0 0 2px #89995966}.coord{position:absolute;left:3px;top:2px;font-size:7px;color:#8d9a7c;z-index:1}.board-note{font-size:10px;color:#8a927e;text-align:center;margin:10px 0;line-height:1.5}aside{padding-top:40px}.aside-title{font-size:9px;letter-spacing:1.5px;border-bottom:1px solid var(--line);padding-bottom:15px;display:flex;justify-content:space-between}.aside-title span{color:#9da38f}.animal-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:11px}.animal-row .emoji{font-size:22px;width:27px}.animal-row small{display:block;color:#929985;font-size:8px;margin-top:3px}.animal-row>b{margin-left:auto;font-size:11px;font-weight:400;color:#8a9580}.tip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin-top:8px}.tip>span{font-size:8px;letter-spacing:1px;color:#8d967d}.tip p{font-family:Georgia,serif;font-style:italic;font-size:17px;line-height:1.4;margin:12px 0}.tip>div{font-size:23px}.tip>div span{font-size:15px;margin:0 10px;color:#9da88d}.history{margin-top:24px}summary{font-size:10px;cursor:pointer}summary span{float:right;color:#929a86}#history{padding:0;list-style:none;max-height:150px;overflow:auto;font-size:10px;line-height:1.8;color:#7a8770}#history li{padding:4px 0;border-bottom:1px solid #e9e9dd}.empty{font-size:9px;color:#9da38f}.resign{font-size:10px;margin-top:5px}footer{display:flex;justify-content:space-between;max-width:1440px;margin:auto;padding:20px 5%;border-top:1px solid var(--line);color:#9aA18d;font-size:8px;letter-spacing:1.2px}dialog{border:1px solid #d3d8c6;border-radius:12px;padding:35px;max-width:530px;width:calc(100% - 32px);background:#f8f7ef;color:#234737;box-shadow:0 20px 100px #102d2540}dialog::backdrop{background:#18352d70;backdrop-filter:blur(4px)}dialog h2{font-size:25px;font-weight:500;margin:0 0 20px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#67745e}dialog ul{padding-left:20px}dialog .close{position:absolute;top:8px;right:13px;border:0;background:none;font-size:26px;color:#7b8871}.dialog-actions{display:flex;gap:12px;margin-top:20px}.dialog-actions button{padding:12px 18px;border:1px solid #d3d8c6;border-radius:4px;background:#eff0e4;color:#234737}.dialog-actions .primary{background:#234c3c;color:white}.win-emoji{font-size:55px;margin-bottom:15px}@media(min-width:1500px){main{padding-top:65px}.piece{font-size:34px}}@media(max-width:1050px){main{gap:25px;grid-template-columns:minmax(200px,1fr) minmax(320px,440px)}aside{grid-column:1/-1;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.aside-title{display:none}#animals{display:grid;grid-template-columns:repeat(4,1fr);gap:3px 15px}.tip{display:none}.history{margin-top:0}.resign{grid-column:2;justify-self:start}.piece{font-size:29px}}@media(max-width:700px){header{padding:17px 5%}.brand{font-size:16px}.brand-icon{font-size:33px}.mode{font-size:0}.mode i{display:none}header .quiet{font-size:11px}main{padding:18px 4%;display:flex;flex-direction:column;gap:15px}.intro{padding:0;display:contents}.eyebrow,h1,.intro>p,.intro-label,.field-key{display:none}.turn{order:0;margin:0;min-height:40px}.turn-orb{width:35px;height:35px;border-width:5px}.turn b{font-size:14px}.turn small{font-size:9px;margin-top:3px}.game{order:1;width:100%;max-width:480px;margin:auto}.board-wrap{padding:9px}.player{height:30px}.piece{font-size:clamp(23px,6vw,35px)}.actions{order:2;padding:0 4%;border:0;justify-content:center;gap:35px}.actions button{font-size:12px}.new-game{order:3;margin:0 auto;width:100%;max-width:460px}.intro .saved{display:none}aside{order:4;display:block;padding:10px 3%}#animals{grid-template-columns:repeat(4,1fr);gap:0 10px}.animal-row{gap:5px;font-size:9px}.animal-row .emoji{font-size:20px;width:23px}.animal-row small{display:none}.animal-row>b{font-size:9px}.history{margin-top:15px}#history{max-height:120px}.resign{margin-top:10px}.board-note{font-size:9px}footer{font-size:7px;letter-spacing:.5px;padding:17px 5%}}