:root{color-scheme:light;--ink:#294d43;--paper:#f7f2e6;--muted:#6f7e70;--line:#d7dfc9;--amber:#bb833f;--mint:#5a998e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 20%,#e2ebd4,transparent 50%),var(--paper);color:var(--ink);font:14px/1.5 system-ui,sans-serif}main{max-width:1060px;padding:23px 34px;margin:auto}button,a,select{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;font-size:10px;cursor:pointer;border:1px solid #cbd7be;border-radius:7px;padding:8px 12px;background:#fff8}button:hover{background:#e2ebd5}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #b48442;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line)}header>div{display:flex;gap:8px}.brand{font-size:17px;letter-spacing:.14em;font-weight:800;text-decoration:none;color:var(--ink)}.brand>span{color:var(--amber);font-family:Georgia,serif;font-size:21px}.brand small{font-size:6px;letter-spacing:.2em;display:block;color:var(--amber);margin-top:2px}.intro{display:flex;justify-content:space-between;align-items:end;padding:23px 0 22px;gap:15px}.eyebrow{font-size:8px;letter-spacing:.18em;color:var(--amber);font-weight:750;margin:0 0 9px}h1{font:42px/1.02 Georgia,serif;letter-spacing:-.03em;margin:0}h1 em{color:var(--amber);font-weight:400}.intro>p{font-size:12px;color:var(--muted);margin:0 0 3px;max-width:330px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.table{border:1px solid #cad5bc;border-radius:15px;padding:15px 18px;background:#f5f5e8d9}.table-head,.table-foot{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.07em;padding:1px 0 12px;gap:8px}.table-foot{padding:10px 0 12px}.table-foot>span:last-child{color:var(--muted);font-size:8px;letter-spacing:0}.amber{color:#a66f2c}.mint{color:#4a8d80}#turn{font-size:10px;font-weight:650;letter-spacing:0}#board{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:450px;margin:auto;padding:6px;background:#c7d5b8;border:1px solid #b7c7a6;border-radius:10px;aspect-ratio:7/9;box-shadow:0 10px 25px #56664210}.cell{border:0;border-radius:5px;background:#e9edda;padding:0;position:relative;min-width:0;min-height:0;touch-action:manipulation;isolation:isolate}.cell:nth-child(2n){background-color:#f1f0de}.cell:hover{background-color:#dae7c8}.cell.water{background:#b9d9d4;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 10px,#e0efdf55 11px,transparent 12px)}.cell.den{background:#e6cca3}.cell.trap{background:#dfd8bf}.terrain{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font-size:25px;color:#7f966a55;z-index:-1}.cell.den .terrain{font-size:32px;color:#926f3f90}.cell.trap .terrain{font-size:26px;color:#97794f88}.cell.water .terrain{font-size:20px;color:#5e9c9160}.piece{position:absolute;inset:4px 3px 3px;border:2px solid #c7a26a;border-radius:50% 50% 38% 38%;background:#faf4de;box-shadow:0 2px 4px #47523720;display:flex;justify-content:center;align-items:center}.piece.mint-piece{border-color:#74a99a;background:#edf4e7}.piece img{width:91%;height:91%;object-fit:contain;pointer-events:none}.piece b{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#c89b58;color:#fffdf1;font:bold 10px system-ui;box-shadow:0 1px 3px #283e2620}.mint-piece b{background:#64a394}.team-mark{position:absolute;top:-3px;left:-2px;font-size:7px;font-weight:800;background:#f8f5e7;border-radius:50%;width:12px;height:12px;display:grid;place-items:center;color:#9f743a}.mint-piece .team-mark{color:#4c8f80}.cell .coord{position:absolute;bottom:0;left:2px;font-size:6px;color:#647a5d;opacity:.7}.cell.selected{outline:3px solid #b77f38;outline-offset:-2px;z-index:2}.cell.legal:after{content:'';position:absolute;inset:30%;background:#6b9d6b88;border:1px solid #4f8058;border-radius:50%;pointer-events:none;z-index:2}.cell.legal:has(.piece):after{inset:2px;background:transparent;border:2px solid #a56c3c;border-radius:6px}.cell.last{box-shadow:inset 0 0 0 2px #c4a36c}.cell.hinted{box-shadow:inset 0 0 0 3px #a078b2}.board-tools{display:flex;gap:7px;flex-wrap:wrap}.board-tools button{font-size:9px;padding:7px 10px}.banner{font-size:11px;color:#547247;line-height:1.5;border-top:1px solid var(--line);padding-top:11px;margin-top:12px;min-height:44px}.banner.win{color:#527c4a;font-weight:650}#next{margin-top:9px;background:var(--ink);color:#fff}.panel{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff5;margin-bottom:12px}.panel label{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin:8px 0;gap:8px}select{font:10px system-ui;border:1px solid #cbd6c0;background:#faf9ee;color:var(--ink);border-radius:6px;padding:7px;max-width:195px}.micro{font-size:9px;color:var(--muted);margin:8px 0}#newgame{background:var(--ink);color:#fff;border-color:var(--ink);width:100%}.animal-info{display:flex;align-items:center;gap:10px}.animal-info>img{width:56px;height:64px;object-fit:contain}.animal-info h2{font:23px Georgia,serif;letter-spacing:-.02em;margin:0 0 5px}.animal-info p{font-size:10px;color:var(--muted);margin:0}.panel-head{display:flex;justify-content:space-between;gap:6px}.panel-head>span{font-size:9px;color:var(--amber);white-space:nowrap}.lessons>p{font-size:10px;color:var(--muted);margin:0 0 9px}#lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#lessons button{padding:7px 5px;font-size:9px}#lessons button.active{border-color:var(--amber);background:#e9e2cd}#lessons button.sealed:after{content:' ✿';color:var(--amber)}#lessons button.jade:after{color:var(--mint)}#log{max-height:105px;overflow:auto;margin:0;padding:0 0 0 17px;font-size:9px;color:var(--muted)}#log li{padding:3px 0}.roster{margin-top:22px;border-top:1px solid var(--line);padding-top:17px}#roster{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}#roster figure{margin:0;display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:9px;background:#fff4;padding:7px 5px}#roster img{width:50px;height:53px;object-fit:contain}#roster figcaption{font-size:9px;color:var(--muted);margin-top:3px}footer{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-top:14px;margin-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:9px}footer button{padding:6px 10px;font-size:9px}[hidden]{display:none!important}dialog{border:1px solid #c5d1b9;border-radius:15px;background:var(--paper);color:var(--ink);padding:30px;max-width:570px;width:calc(100% - 28px);box-shadow:0 30px 100px #19332c55}dialog::backdrop{background:#24473c77;backdrop-filter:blur(5px)}dialog h2{font:31px Georgia,serif;margin:10px 0 15px}dialog p,dialog li{font-size:12px;color:var(--muted)}dialog a{color:var(--ink)}#close{float:right;font-size:21px;padding:0 10px}.reward{display:flex;gap:20px;justify-content:center;margin:20px 0}.reward img{width:85px;height:95px;object-fit:contain}#finish{text-align:center}#finish button{margin:5px}@media(max-width:740px){main{padding:16px}.brand{font-size:14px}.brand small{font-size:5px}header button{font-size:8px;padding:6px 8px}header>div{gap:5px}.intro{display:block;padding:20px 0 17px}.intro h1{font-size:35px}.intro>p{font-size:11px;margin-top:12px}.layout{grid-template-columns:1fr;gap:16px}.table{padding:12px 10px}.table-head{font-size:7px}#turn{font-size:9px}#board{gap:3px;padding:4px}.piece{inset:3px 2px 2px;border-width:1.5px}.piece b{width:13px;height:13px;font-size:8px}.team-mark{width:10px;height:10px;font-size:6px}.cell .coord{font-size:5px}.table-foot{font-size:7px}.table-foot>span:last-child{font-size:7px}.board-tools button{font-size:9px;padding:7px 8px}.banner{font-size:11px;min-height:45px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{margin:0;padding:13px}.panel:first-child,.lessons,.log-panel{grid-column:1/-1}.selected-panel{grid-column:1/-1}.animal-info>img{width:49px;height:55px}.animal-info h2{font-size:22px}.animal-info p{font-size:11px}select{font-size:11px;max-width:230px}.panel label{font-size:11px}.micro{font-size:9px}#lessons{grid-template-columns:repeat(6,1fr)}#lessons button{font-size:9px;padding:9px 2px}#roster{grid-template-columns:repeat(4,1fr);gap:7px}#roster img{width:47px;height:48px}#roster figcaption{font-size:9px}.roster>.eyebrow{font-size:7px}footer{font-size:8px}.terrain{font-size:22px}.cell.den .terrain{font-size:27px}}
