.pi-island,.pi-work{color:#29443e;font-family:system-ui,sans-serif}.pi-island{padding:14px;border-radius:16px;background:linear-gradient(145deg,#e0f5ef,#f7f2da)}.pi-hero{display:flex;gap:18px;align-items:center}.pi-hero>div{flex:1}.pi-hero>svg{width:32%;min-width:130px}.pi-hero h2{font-size:clamp(26px,5vw,40px);margin:4px 0;color:#235e53}.pi-eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:800}.pi-guide{font-size:14px;line-height:1.5}.pi-levels,.pi-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}.pi-levels [aria-pressed=true]{background:#bfe6d4;outline:3px solid #38796b}.pi-stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pi-station{border:2px solid #abc7b7;border-radius:15px;padding:14px;background:#fffdf5;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 0 #a0c4b033}.pi-station.complete{border-color:#48885d;background:#edf6df}.pi-station h3,.pi-station p{margin:0}.pi-station h3{font-size:18px}.pi-station p{font-size:14px}.pi-station .btn{margin-top:auto}.pi-station progress{width:100%;accent-color:#42836d}.pi-station-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;color:#658c7a}.pi-token{display:inline-flex;align-items:center;justify-content:center;width:48px;height:52px;flex-shrink:0}.pi-token svg,.pi-piece svg{width:100%;height:100%;pointer-events:none}.pi-sequence{display:flex;flex-wrap:wrap;gap:6px;padding:16px 10px;background:#fff9e8;border-radius:14px;margin:12px 0}.pi-piece{width:58px;height:64px;border:2px solid #acc4b8;border-radius:10px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:6px;touch-action:none;color:#304b41;font:700 25px system-ui}.pi-piece:disabled{opacity:1;background:#eef2e9;cursor:default}.pi-piece.active,.pi-piece[aria-pressed=true],.pi-sort-card[aria-pressed=true]{outline:3px solid #cd813b;background:#fff0cb}.pi-piece:focus-visible,.pi-sort-card:focus-visible{outline:4px solid #345ed1}.pi-palette{display:flex;flex-wrap:wrap;gap:8px;border-top:2px dashed #bac9ba;padding-top:16px;margin-top:12px}.pi-feedback{min-height:42px;padding:12px;border-radius:12px;background:#eaf1e4;font-weight:600;line-height:1.5;margin:12px 0}.pi-number{font:800 28px system-ui}.pi-sort-cards{display:grid;gap:12px}.pi-sort-card{text-align:left;border:2px solid #adc6b8;background:white;border-radius:12px;padding:12px;color:inherit;cursor:grab;font:inherit;touch-action:none}.pi-sort-card .pi-token{width:35px;height:40px}.pi-bins{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.pi-basket{border-style:dashed;min-height:65px}.pi-work h2{font-size:22px;line-height:1.4}.pi-toolbar>span{font-size:14px}.pi-toolbar #pi-read{margin-left:auto}
@media(max-width:700px){.pi-stations{grid-template-columns:repeat(2,minmax(0,1fr))}.pi-hero{display:block}.pi-hero>svg{width:170px;float:right;margin-top:-40px}.pi-guide{clear:both}}
@media(max-width:460px){.pi-island{padding:8px}.pi-stations{grid-template-columns:1fr}.pi-hero>svg{float:none;margin:0}.pi-piece{width:49px;height:55px}.pi-token{width:38px;height:44px}.pi-sequence{gap:4px;padding:12px 6px}.pi-sort-card .pi-token{width:27px;height:33px}.pi-work h2{font-size:19px}}
#pi-world{position:fixed;inset:0;z-index:1000;overflow:auto;background:repeating-linear-gradient(175deg,#99d7e1 0 38px,#afe5e9 39px 42px,#99d7e1 43px 80px);color:#24483d;font-family:system-ui,sans-serif;padding:18px}.pi-world-head{display:flex;align-items:center;gap:18px;max-width:1100px;margin:auto}.pi-world-head h1{margin:0;font-size:clamp(25px,4vw,40px)}.pi-world-head .pi-eyebrow{margin:0 0 6px}.pi-purse{margin-left:auto;background:#fff1b9;border:2px solid #bf9344;border-radius:15px;padding:10px 18px;font-size:23px;font-weight:800}.pi-purse small{display:block;font-size:12px}.pi-mission{text-align:center;max-width:900px;margin:16px auto;background:#ffffffb8;padding:10px;border-radius:12px}.pi-land{position:relative;width:min(100%,1050px);height:610px;margin:0 auto;background:radial-gradient(ellipse at 48% 43%,#b8d291 0 49%,#8eba81 50% 62%,#f4d49a 63% 68%,transparent 69%);border-radius:44%}.pi-trail{position:absolute;left:24%;top:19%;width:47%;height:60%;border:18px dotted #f1e5b1;transform:rotate(-14deg);border-radius:45%;opacity:.8}.pi-object{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;cursor:pointer;color:#274a38;display:grid;justify-items:center;min-width:100px;padding:6px;transition:transform .15s}.pi-object:hover:not(:disabled){transform:translate(-50%,-55%)}.pi-mini-pattern{display:flex;flex-wrap:wrap;justify-content:center;max-width:155px;filter:drop-shadow(0 4px 1px #45652e55)}.pi-mini-pattern .pi-token{width:27px;height:31px}.pi-chest{font-size:32px;color:#795020;background:#ffd16a;border:3px solid #795020;border-radius:10px;margin-top:4px;padding:0 13px;box-shadow:0 4px #825326}.pi-object small{background:#fff7dc;border-radius:8px;padding:3px 7px;margin-top:8px;font-weight:700}.pi-object.found{opacity:.7}.pi-king{position:absolute;right:3%;bottom:12%;display:grid;justify-items:center;background:#493968;color:#fff3bc;border:4px solid #edcb73;border-radius:20px;padding:12px;cursor:pointer;max-width:180px}.pi-king>span{font-size:55px}.pi-king small{margin-top:6px}.pi-king:disabled{cursor:default;background:#666079}.pi-boat{position:absolute;left:9%;bottom:0}.pi-world-foot{max-width:1000px;margin:14px auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 25px;background:#fff8dc;padding:14px;border-radius:15px;font-size:14px}#pi-world button:focus-visible{outline:4px solid #345ed1;outline-offset:4px}@media(max-width:600px){#pi-world{padding:10px}.pi-world-head{flex-wrap:wrap;gap:10px}.pi-world-head .pi-eyebrow{font-size:9px}.pi-purse{font-size:18px;padding:8px}.pi-world-head #pi-pause{margin-left:auto}.pi-land{height:690px;background:radial-gradient(ellipse,#b8d291 0 57%,#f4d49a 58% 68%,transparent 69%)}.pi-mini-pattern{max-width:100px}.pi-mini-pattern .pi-token{width:22px;height:26px}.pi-object{min-width:80px}.pi-king{right:0;bottom:2%;max-width:135px;padding:8px}.pi-king>span{font-size:36px}.pi-boat{left:0;bottom:0;max-width:165px;font-size:12px}.pi-mission{font-size:14px}}
/* Match the pixel sprites, sea palette and RPG windows used throughout RagnoMath. */
#pi-world{background:var(--sea);color:var(--ink);font-family:var(--font-kid)}.pi-world-head{background:var(--window);border:3px solid var(--ink);border-radius:8px;padding:12px;box-shadow:0 4px #2a1e2e66}.pi-world-head h1{font-family:var(--font-pixel);color:var(--gold);text-shadow:2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink)}.pi-purse{border:3px solid var(--ink);border-radius:6px;background:#fff2a8}.pi-mission,.pi-world-foot{background:var(--window);border:3px solid var(--ink);border-radius:8px;box-shadow:0 4px #2a1e2e66}.pi-land{background:none;border-radius:0;height:640px}.pi-terrain{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.pi-decor{position:absolute;inset:0;pointer-events:none;--s:4px}.pi-decor>img{position:absolute;transform:translate(-50%,-70%)}.pi-object{color:var(--ink);z-index:2}.pi-mini-pattern{filter:drop-shadow(0 3px 0 #2a1e2e44)}.pi-chest{display:block;width:70px;height:50px;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-top:3px;filter:drop-shadow(0 5px 0 #2a1e2e55)}.pi-chest svg{width:100%;height:100%;image-rendering:pixelated}.pi-object small{font-family:var(--font-pixel);font-size:15px;color:var(--ink);background:var(--window);border:2px solid var(--ink);border-radius:4px;box-shadow:0 2px #2a1e2e66}.pi-object.found{opacity:1}.pi-king,.pi-king:disabled{background:none;border:0;padding:0;color:var(--ink);bottom:8%;right:2%;width:165px;z-index:3;max-width:22%;border-radius:0}.pi-king b,.pi-king small{background:var(--window);border:2px solid var(--ink);padding:3px 8px;border-radius:4px;font-family:var(--font-pixel)}.pi-king small{font-size:13px}.pi-royal-figure{display:block;position:relative;--s:5px;width:80px;height:90px;filter:drop-shadow(0 5px #2a1e2e66)}.pi-royal-figure .pi-crown{position:absolute;left:0;top:-10px}.pi-visiting-hero{position:absolute;left:28%;top:87%;--s:4px}.pi-visiting-hero .fig{position:relative;display:block}.pi-boat{z-index:4;bottom:0;left:9%}.pi-work{color:var(--ink);font-family:var(--font-kid)}.pi-work h2{font-family:var(--font-pixel)}.pi-sequence,.pi-feedback{border:2px solid var(--ink);border-radius:6px;background:var(--window-2)}.pi-piece,.pi-sort-card{border-color:var(--ink);border-radius:5px}.pi-basket{border-style:solid}.pi-work svg{image-rendering:pixelated}
@media(max-width:600px){.pi-land{height:740px;background:none}.pi-world-head{padding:10px}.pi-world-head h1{font-size:28px}.pi-decor{--s:2px}.pi-chest{width:56px;height:40px}.pi-king,.pi-king:disabled{max-width:32%;right:0;bottom:4%;width:125px}.pi-royal-figure{--s:4px;width:64px;height:72px}.pi-king b{font-size:15px}.pi-object small{font-size:13px}.pi-visiting-hero{--s:3px;left:29%;top:89%}.pi-boat{left:0;max-width:175px}.pi-world-foot{font-size:14px}}

.pi-reference{padding:12px;border:3px solid var(--ink);background:#fff7d6;border-radius:6px}.pi-reference h3{margin:0;font-family:var(--font-pixel)}.pi-reference p{margin:6px 0;font-size:14px}.pi-reference-groups{display:flex;gap:12px;flex-wrap:wrap}.pi-reference-groups>div{max-width:100%;border-bottom:3px solid var(--gold-d)}.pi-reference-groups .pi-sequence{margin:4px 0;background:white}.pi-reference-groups b{font-size:13px}

.pi-sort-layout{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:18px;align-items:start}.pi-sort-layout .pi-bins{position:sticky;top:0;display:grid;gap:10px;margin:0;align-self:start}.pi-sort-card{width:100%;touch-action:pan-y;cursor:pointer;padding:10px}.pi-sort-card .pi-sequence{pointer-events:none;padding:8px 4px;gap:3px}.pi-sort-card[aria-pressed=true]{outline:3px solid var(--blue);outline-offset:-3px;background:#e3edff}.pi-basket{display:grid;justify-items:center;gap:2px;padding:8px;min-height:92px;background:#fff2cc;touch-action:pan-y}.pi-basket strong{font-family:var(--font-pixel);font-size:20px}.pi-basket small{font-size:11px;line-height:1.2}.pi-basket-drawing{font-size:26px;line-height:1;color:#8a5a2b}.pi-sort-help{font-size:14px}.pi-sort-card>span{display:block;font-size:13px;font-weight:bold}@media(max-width:600px){.pi-sort-layout{grid-template-columns:minmax(0,1fr) 102px;gap:8px}.pi-sort-card{padding:8px 5px}.pi-sort-card .pi-token{width:23px;height:27px}.pi-sort-card .pi-sequence{gap:2px;padding:5px 2px}.pi-sort-layout .pi-bins{gap:8px}.pi-basket{min-height:88px;padding:6px 3px}.pi-basket strong{font-size:17px}}