@font-face{font-family:system;src:local('Segoe UI')}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#071321;color:#eef7ff;font:14px system,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#142b43;border:1px solid #304a64;border-radius:6px;padding:9px 13px;transition:background .15s,transform .15s}button:hover{background:#234461}button:focus-visible,a:focus-visible{outline:3px solid #73c6ff;outline-offset:3px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}header{min-height:82px;padding:15px 28px;display:flex;align-items:center;gap:24px;background:#0c1c2e;border-bottom:2px solid #28445f}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:22px;letter-spacing:-.5px}.brand small{display:block;color:#8ca7bf;margin-top:3px}#logo{width:52px;height:48px;display:block}svg{display:block;width:100%;height:100%;image-rendering:pixelated}nav{display:flex;gap:3px;padding:4px;background:#061321;border-radius:8px}nav button{border:0;background:transparent;min-width:105px}nav .active{background:#2563eb;box-shadow:0 3px 0 #163b8b}.account{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}#connection{font-size:11px;color:#72dbaa;margin-right:7px}#profile{background:#203c58;border-color:#4e7191}.toolbar{display:flex;gap:15px;justify-content:space-between;align-items:center;padding:18px 28px 13px}#crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap}#crumbs button{background:transparent;border-color:transparent;padding:6px}#crumbs button:first-child{background:#173047}.tools{display:flex;gap:7px;align-items:center}input,select{border:1px solid #304a64;background:#0a192b;border-radius:6px;color:#eef7ff;padding:10px;max-width:100%}#search{width:220px}#category-filter{max-width:230px}.progress{padding:0 28px 17px}.progress>div:first-child{display:flex;justify-content:space-between;gap:15px;padding:5px 0 9px}#summary{font-weight:700}#instructions{color:#94b1c9;font-size:12px}.meter{height:5px;background:#1f354b;border-radius:3px;overflow:hidden}.meter i{display:block;height:100%;background:#69cdaa;transition:width .5s}#world{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:110px;min-height:540px;margin:0 20px;border:3px solid #263d4c;background:#172f27;isolation:isolate;overflow:hidden;border-radius:8px}#world:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 48%,#2f472b 48% 52%,transparent 52%),linear-gradient(transparent 48%,#234533 48% 52%,transparent 52%);background-size:48px 48px;opacity:.5}.river{position:absolute;width:150px;left:calc(50% - 75px);inset-block:0;background-color:#237998;background-image:linear-gradient(90deg,transparent 20%,#409daf55 20% 60%,transparent 60%),linear-gradient(0deg,transparent 70%,#a0e0dd55 70% 76%,transparent 76%);background-size:37px 46px,70px 70px;animation:water 12s linear infinite;clip-path:polygon(18% 0,88% 0,88% 12%,78% 12%,78% 25%,94% 25%,94% 39%,84% 39%,84% 60%,95% 60%,95% 76%,85% 76%,85% 100%,12% 100%,12% 86%,22% 86%,22% 70%,8% 70%,8% 55%,20% 55%,20% 35%,8% 35%,8% 19%,18% 19%);z-index:-1;box-shadow:inset 8px 0 #edcb88,inset -8px 0 #edcb88}.river span{position:absolute;left:15px;right:15px;top:46%;font-size:9px;color:#17384c;text-align:center;font-weight:800;letter-spacing:1px;background:#e5bb77;padding:7px;box-shadow:0 4px #8e6139}.bridge{position:absolute;left:5px;right:5px;top:45%;height:46px;background:repeating-linear-gradient(0deg,#946333 0 4px,#c99458 4px 11px);border:4px solid #6b452c}.bank{padding:18px 18px 28px;min-width:0}.bank.right{background:#d6b57a0b}.bank-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 13px;background:#122a28e6;border:2px solid #6e7950;box-shadow:3px 3px #071719;margin-bottom:16px}.bank-heading h1{font-size:17px;margin:0}.bank-heading span{font-size:11px;color:#b4d0b6}.creatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:18px 12px;align-content:start}.creature{position:relative;display:flex;align-items:center;flex-direction:column;border:0;background:transparent!important;padding:0;min-width:0;touch-action:pan-y}.creature .sprite{width:84px;height:80px;filter:drop-shadow(0 5px 0 #0005);animation:bounce 2.1s ease-in-out infinite;animation-delay:var(--delay)}.creature:hover .sprite{filter:drop-shadow(0 0 8px #ccefff77)}.creature .name{font-size:11px;font-weight:650;text-align:center;background:#102321e6;border:1px solid #486149;padding:6px 5px;border-radius:4px;max-width:100%;line-height:1.35;overflow-wrap:anywhere}.creature .count{font-size:11px;color:#c5e5c9;margin:4px 0 0}.creature .mini-meter{width:70px;height:4px;background:#15271e;margin:5px 0 0;border-radius:2px;overflow:hidden}.mini-meter i{display:block;height:100%;background:var(--color)}.creatures.articles{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:16px 8px}.article-monster .sprite{width:37px;height:37px;animation-duration:1.7s}.article-monster .name{background:transparent;border:0;font-size:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:3px 0;width:100%;font-weight:400;color:#d3e8d6}.article-monster{cursor:grab}.article-monster:active{cursor:grabbing}.article-monster.done .count{font-size:9px;overflow-wrap:anywhere}.empty{grid-column:1/-1;text-align:center;padding:40px 15px;color:#aac4b3;line-height:1.8}.empty strong{display:block;color:#e3ecd6;font-size:18px}.bank.drop-ready{background:#59c2a733;outline:3px dashed #90e4b5;outline-offset:-10px}#list{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:0 28px 20px}.lane{background:#0b1d30;border:1px solid #28445f;border-radius:8px;padding:16px;min-width:0}.lane h2{font-size:18px;margin:0 0 18px}.lane h2 span{color:#9ebacf;font-size:12px}.card{display:flex;gap:11px;align-items:center;background:#112a42;border:1px solid #2e4a65;border-radius:6px;padding:12px;margin-bottom:8px;cursor:grab}.card .sprite{width:32px;min-width:32px;height:32px}.card .card-text{flex:1;min-width:0}.card strong{display:block;font-size:13px;line-height:1.45;overflow-wrap:anywhere}.card small{display:block;color:#90aec9;line-height:1.4;margin-top:4px}.card button{padding:6px 9px;white-space:nowrap;font-size:12px}.lane.drop-ready{outline:2px dashed #70d5af}.list-empty{color:#91abc3;text-align:center;padding:35px}footer{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;padding:17px 28px 24px;color:#7897af;font-size:11px}#palette{display:flex;gap:4px;align-items:center}#palette i{width:10px;height:10px;border-radius:2px;display:block}dialog{border:1px solid #355779;border-radius:12px;background:#0e2136;color:#edf6ff;box-shadow:0 24px 90px #0009;max-width:calc(100vw - 24px);width:660px;padding:24px}dialog::backdrop{background:#020b16bb;backdrop-filter:blur(4px)}#login{width:440px;padding:30px}#login form{display:flex;flex-direction:column;gap:15px}#login h2{margin:0;font-size:27px;line-height:1.15;letter-spacing:-.5px}#login p{margin:0;color:#a8c0d5;line-height:1.6}.eyebrow{font-size:10px;letter-spacing:2px;color:#76c6fc!important}.welcome-monster{width:90px;height:80px;margin:0 auto 4px;animation:bounce 2s infinite}label{display:flex;flex-direction:column;gap:7px;color:#aec8dc;font-size:12px}#login input{width:100%;padding:12px}#login small{font-size:10px;color:#6e90ae;line-height:1.6}details summary{cursor:pointer;font-size:12px;color:#91afd0}details label{margin-top:12px}.primary{background:#2563eb;border-color:#5082fb;box-shadow:0 3px #173b84;font-weight:650}.primary:hover{background:#3477f6}#login-error{color:#ff9a9a!important;font-size:12px}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}.modal-head h2{font-size:22px;margin:0;line-height:1.35}.modal-head button{font-size:20px;line-height:1;padding:5px 9px}.modal-body p{color:#a6bfd3;line-height:1.6;overflow-wrap:anywhere}#modal-content a{color:#80c5ff}#modal-content .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #233d56}.row span{overflow-wrap:anywhere}.row small{display:block;color:#91b2cc;margin-top:4px}.row button{font-size:12px;padding:6px 9px}.points{font-weight:750;color:#f8d16d;white-space:nowrap}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#9fb6c9;background:#071727;padding:12px;border-radius:6px;font-size:11px}textarea{width:100%;padding:12px;background:#071729;color:#c6e5ff;border:1px solid #426383;border-radius:6px;font:14px monospace;resize:vertical}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);padding:13px 20px;border:1px solid #47715f;background:#123c30;color:#c4ffe3;z-index:1000;border-radius:6px;max-width:90vw;text-align:center;opacity:0;transition:.2s;pointer-events:none}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}#toast.error{background:#502333;border-color:#92516a;color:#ffd7df}#drag-ghost{position:fixed;width:52px;height:52px;z-index:2000;pointer-events:none;filter:drop-shadow(0 7px 3px #0007)}.arrival{position:fixed;z-index:800;pointer-events:none;font-size:16px;font-weight:800;color:#fbd875;animation:score 1.2s forwards}.runner{position:fixed;width:40px;height:40px;pointer-events:none;z-index:700;transition:transform .9s ease-in,opacity .9s;filter:drop-shadow(0 4px 0 #0004)}.zoom-in{animation:zoom-in .35s ease-out}@keyframes bounce{0%,100%{transform:translateY(0)}48%{transform:translateY(-4px)}54%{transform:translateY(-4px) scale(1.02,.97)}}@keyframes water{to{background-position:0 180px,0 140px}}@keyframes score{0%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}@keyframes zoom-in{from{opacity:.4;transform:scale(.91)}to{opacity:1;transform:scale(1)}}@media(max-width:1100px){header{padding:14px 18px;gap:12px;flex-wrap:wrap}.brand strong{font-size:20px}.account{font-size:12px}.creatures{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}#world{gap:80px}.bank{padding:12px}.river{width:110px;left:calc(50% - 55px)}.bank-heading{flex-direction:column;align-items:start}.bank-heading h1{font-size:15px}.creature .sprite{width:70px;height:67px}.article-monster .sprite{width:35px;height:35px}}@media(max-width:700px){header{gap:12px}.account{margin-left:0;width:100%;gap:6px}.account button{padding:7px;font-size:11px}nav{margin-left:auto}nav button{min-width:75px;padding:8px}.brand strong{font-size:16px}.brand small{font-size:10px}#logo{width:37px;height:38px}.toolbar{padding:13px;flex-direction:column;align-items:stretch}.tools{flex-wrap:wrap}#search{flex:1;min-width:120px;width:auto}#category-filter{flex:1;min-width:120px;max-width:100%}.progress{padding:0 13px 13px}.progress>div:first-child{flex-direction:column;gap:5px}#world{margin:0 7px;gap:42px;min-height:500px}.river{width:65px;left:calc(50% - 32px)}.river span{display:none}.bank{padding:7px 5px}.bank-heading{padding:8px 5px}.bank-heading h1{font-size:12px}.bank-heading span{font-size:9px}.creatures{grid-template-columns:repeat(auto-fit,minmax(61px,1fr));gap:12px 5px}.creature .sprite{width:55px;height:55px}.creature .name{font-size:9px;padding:4px 2px}.creature .count{font-size:9px}.creatures.articles{grid-template-columns:repeat(auto-fit,minmax(46px,1fr))}.article-monster .sprite{width:27px;height:27px}.article-monster .name{font-size:8px}.creature .mini-meter{width:48px}#list{padding:0 10px 15px;gap:10px}.lane{padding:8px}.lane h2{font-size:13px}.card{padding:8px;flex-wrap:wrap;gap:6px}.card strong{font-size:11px}.card small{font-size:9px}.card button{margin-left:auto;font-size:10px}.card .sprite{width:24px;min-width:24px;height:24px}footer{padding:15px 12px;font-size:10px}.empty{font-size:11px;padding:20px 3px}.empty strong{font-size:13px}#login{padding:22px}dialog{padding:18px}.row{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(min-width:1000px){#world{height:calc(100dvh - 273px);min-height:380px}.bank{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#537363 transparent}.bank-heading{position:sticky;top:0;z-index:3}#list{height:calc(100dvh - 273px);min-height:380px}.lane{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
@media(min-width:1000px) and (max-height:820px){header{min-height:70px;padding:10px 20px;gap:15px}.brand strong{font-size:19px}nav button{min-width:85px}.toolbar{padding:12px 20px 10px}.progress{padding:0 20px 12px}#world{height:calc(100dvh - 235px);min-height:350px;gap:85px}.river{width:115px;left:calc(50% - 57px)}.bank{padding:12px}.bank-heading{padding:9px 10px;margin-bottom:10px}.bank-heading h1{font-size:15px}.creatures{grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:9px 8px}.creature .sprite{width:58px;height:55px}.creature .name{font-size:10px;padding:4px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.creature .count{font-size:10px}.article-monster .sprite{width:33px;height:33px}.article-monster .name{font-size:10px}.creatures.articles{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px 8px}.mini-meter{margin-top:3px!important}footer{padding:12px 20px}#list{height:calc(100dvh - 235px);min-height:350px}}

.article-portrait{width:90px;height:90px;margin:0 auto 12px;filter:drop-shadow(0 5px 0 #0004)}