@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#fffaf0;--ink:#292822;--muted:#838174;--orange:#f76436;--line:#e5dfd1}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--orange);outline-offset:4px}header{height:98px;margin:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;line-height:1.04;letter-spacing:-.6px}.brand-mark{font-size:25px;letter-spacing:-3px;transform:rotate(-9deg);padding-right:7px}.brand-period{color:var(--orange)}.header-note{font-size:14px;color:var(--muted)}.token{background:var(--orange);border:1px solid var(--ink);border-radius:28px;padding:11px 20px;font-family:'Space Grotesk',sans-serif;font-weight:700;box-shadow:2px 2px 0 var(--ink)}.token span{padding-left:12px}main{padding:0 4%}.intro{display:flex;align-items:center;justify-content:space-between;padding:30px 0 27px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--muted)}h1{position:relative;font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4.2vw,64px);line-height:1.02;letter-spacing:-3px;font-weight:600;margin:13px 0 0}h1 span{color:var(--orange)}h1 sup{position:absolute;right:-75px;top:40px;font-size:21px;font-weight:400;letter-spacing:7px;transform:rotate(-16deg);color:var(--ink)}.census{text-align:right;padding-top:16px}.count{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-2px}.census-label{font-size:16px;margin-top:3px}.sleep-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:6px}.census p{font-size:13px;color:var(--muted);margin:17px 0 0}.world{height:calc(100svh - 361px);min-height:340px;position:relative;border:1px solid #d9d2c3;border-radius:17px;background:#f3eedf;box-shadow:inset 0 0 55px #e9e1cb55}canvas{display:block;width:100%;height:100%;border-radius:17px;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.world-top,.world-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;pointer-events:none;font-size:11px;letter-spacing:1.2px;color:#777466}.world-top{top:21px}.world-bottom{bottom:23px}.live-label{display:flex;gap:8px;align-items:center;font-weight:600}.live-label>span{width:6px;height:6px;background:var(--orange);border-radius:50%}.world-size{letter-spacing:.3px}.drag-hint{font-size:10px}.drag-hint span{padding:0 10px}#coordinates{letter-spacing:.1px;font-size:11px}.toolbar{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:var(--paper);padding:7px;border:1px solid var(--line);border-radius:13px;box-shadow:0 5px 15px #3b301316;white-space:nowrap}.toolbar button{border:0;background:transparent;height:38px;min-width:35px;border-radius:8px;font-size:20px}.toolbar button:hover{background:#eee7d7}.toolbar .random{background:var(--ink);color:var(--paper);font-size:13px;padding:0 15px;display:flex;align-items:center;gap:10px}.toolbar .random:hover{background:#4b493f}.random>span{font-size:23px}.toolbar #overview{font-size:12px;min-width:66px}.divider{width:1px;height:22px;background:var(--line);margin:0 4px}footer{height:70px;display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:16px;font-size:10px;letter-spacing:1px;color:var(--muted)}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f3eedf;border-radius:17px;font-size:14px}.loading[hidden]{display:none}.selected{position:absolute;right:20px;top:52px;background:var(--paper);border:1px solid var(--line);box-shadow:0 7px 20px #2c261514;padding:19px 42px 19px 20px;border-radius:12px;min-width:240px}.selected[hidden]{display:none}.selected strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:22px;margin:8px 0}.selected>span:last-of-type{font-size:13px;color:var(--muted)}#close-selected{position:absolute;top:8px;right:9px;border:0;background:none;font-size:23px}
@media(min-width:1600px){main,header{max-width:1700px;margin-left:auto;margin-right:auto}.world{height:calc(100svh - 390px)}}@media(max-width:700px){header{height:76px}.header-note{display:none}.brand{font-size:14px}.brand-mark{font-size:21px}.token{padding:8px 15px;font-size:14px}.intro{padding:25px 0}.eyebrow{font-size:9px;letter-spacing:1.1px}h1{font-size:40px;letter-spacing:-2px}h1 sup{display:none}.census{padding-top:14px}.count{font-size:27px;letter-spacing:-1px}.census-label{font-size:12px}.census p{display:none}.world{height:calc(100svh - 290px);min-height:340px}.world-top,.world-bottom{left:15px;right:15px}.world-size{display:none}.drag-hint{display:none}.world-bottom{bottom:40px}.toolbar{gap:2px;padding:6px}.toolbar .random{padding:0 10px;font-size:12px}.divider{margin:0 2px}footer>span:first-child{font-size:8px;max-width:110px;line-height:1.6}.selected{right:12px;min-width:220px}.census-label .sleep-dot{width:5px;height:5px;margin-right:3px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,transform .15s}.random:active{transform:scale(.97)}}
.brand-logo{display:block;width:68px;height:68px;flex:none;overflow:hidden;border:1px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
.brand-logo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(3);transform-origin:50% 42%}
@media(max-width:700px){.brand-logo{width:50px;height:50px;border-radius:9px}}

.cat-traits{display:block;font-size:12px;color:var(--muted);margin:0 0 8px}

.claim-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 8px}.claim-intro{display:flex;align-items:baseline;gap:14px}.claim-intro strong{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:500;letter-spacing:-.5px}.claim-intro>span{font-size:13px;color:var(--muted)}.claim-actions{display:flex;gap:10px;flex-shrink:0}.claim-button,.wallet-button{border:1px solid var(--ink);border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;min-height:44px}.claim-button{background:var(--orange);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.claim-button:hover:not(:disabled){background:#ff764c}.claim-button>span{margin-left:14px}.wallet-button{background:transparent;border-color:var(--line)}.wallet-button:hover:not(:disabled){background:#eee7d7}button:disabled{cursor:default;opacity:.5}.claim-status{font-size:13px;line-height:1.4;color:var(--muted);margin:0 0 14px;min-height:19px}.claim-status[data-error="true"]{color:#a33318}.world{height:calc(100svh - 450px);min-height:410px}.selected{width:310px;max-width:calc(100% - 24px);padding:20px}.selected>.eyebrow{padding-right:20px}.cat-ownership{margin-top:17px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.cat-ownership>span:first-child{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.owner-address{font-family:'Space Grotesk',monospace;font-size:13px;overflow-wrap:anywhere;line-height:1.5;user-select:all}.selected .claim-button{position:static;width:100%;font-size:14px;margin-top:15px}.selected .cat-claim-note{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:9px;line-height:1.4}.selected #cat-mood{font-size:13px;color:var(--muted)}dialog{width:380px;max-width:calc(100% - 32px);padding:25px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:17px;box-shadow:0 15px 80px #29282233}dialog::backdrop{background:#29282277;backdrop-filter:blur(3px)}.wallet-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.wallet-dialog-head h2{font-family:'Space Grotesk',sans-serif;font-size:23px;letter-spacing:-.7px;margin:0}.wallet-dialog-head button{border:0;background:none;font-size:25px;padding:4px 8px}dialog p{color:var(--muted);font-size:14px;line-height:1.5}#wallet-list{display:grid;gap:10px;margin:20px 0}.wallet-option{width:100%;text-align:left;padding:15px;border:1px solid var(--line);background:transparent;border-radius:10px;font-weight:600}.wallet-option:hover{background:#eee7d7}.wallet-help:empty{display:none}
@media(min-width:1600px){.world{height:calc(100svh - 480px)}}
@media(max-width:850px){.claim-intro{flex-direction:column;gap:5px}}
@media(max-width:700px){.claim-bar{align-items:flex-start;gap:13px;flex-direction:column}.claim-actions{width:100%}.claim-actions>button{flex:1;padding:10px 12px}.claim-intro{flex-direction:row;flex-wrap:wrap;gap:4px 12px}.claim-intro strong{font-size:16px}.claim-intro>span{font-size:12px}.claim-status{font-size:12px;margin-bottom:12px}.world{height:calc(100svh - 418px);min-height:420px}.selected{top:46px;right:12px;width:275px;padding:17px}.selected strong{font-size:21px}.intro{padding:22px 0}.census{padding-top:0}}
@media(max-width:380px){h1{font-size:34px}.count{font-size:23px}.census-label{font-size:10px}.toolbar .random{font-size:11px;padding:0 7px}.toolbar button{min-width:30px}.toolbar #overview{min-width:58px}}

/* Keep the introduction compact and let the map fill the available viewport. */
main{display:flex;flex-direction:column;min-height:calc(100svh - 98px)}
.intro{flex-shrink:0;gap:24px;padding:17px 0 15px}
.intro h1{font-size:clamp(24px,2.35vw,34px);line-height:1.15;letter-spacing:-1.2px;margin:0}
.census{display:flex;align-items:baseline;gap:9px;padding:0;white-space:nowrap}
.census .count{font-size:22px;letter-spacing:-.8px}
.census-label{font-size:12px;color:var(--muted);margin:0}
.claim-bar,.claim-status,footer{flex-shrink:0}
.world{flex:1;height:auto;min-height:410px}
.world>canvas{position:absolute;inset:0}
@media(max-width:700px){main{min-height:calc(100svh - 76px)}.intro{padding:16px 0 14px;gap:8px}.intro h1{font-size:25px;letter-spacing:-1px}.census{display:none}.world{min-height:420px}}

/* Token details sit in the centre of the existing intro, without a new hero row. */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,560px) minmax(0,1fr);gap:20px;padding:14px 0}
.intro h1{font-size:clamp(22px,1.9vw,29px);line-height:1.15;max-width:300px}
.intro .census{justify-self:end;flex-direction:column;gap:2px;align-items:flex-end}
.token-panel{min-width:0;padding:13px 16px;background:#f8f2e5;border:1px solid var(--line);border-radius:12px}
.token-facts{display:grid;grid-template-columns:minmax(0,1.5fr) .6fr minmax(0,1fr);gap:16px;align-items:start}
.token-facts>div{min-width:0;display:flex;flex-direction:column;gap:4px}.token-field-label{font-size:9px;line-height:1.3;letter-spacing:1.25px;color:var(--muted);font-weight:600}.token-facts strong{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.4px}#token-ticker{color:var(--orange)}#token-network{font-size:12px;line-height:1.6}
.token-details{display:flex;align-items:flex-end;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.token-contract{min-width:0;flex:1}.contract-value{display:flex;align-items:center;gap:6px;min-width:0}#token-contract{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Space Grotesk',monospace;font-size:12px;line-height:1.8;min-width:0;user-select:all}#copy-contract{font-size:11px;flex:none;border:0;border-radius:5px;background:transparent;padding:4px;color:var(--muted)}#copy-contract:hover:not(:disabled){background:#eee7d7;color:var(--ink)}.token-markets{display:flex;gap:6px;flex:none;align-items:center}.token-markets a{font-size:12px;text-decoration:none;color:var(--ink);border:1px solid #d7cebb;border-radius:6px;padding:7px 8px;white-space:nowrap}.token-markets a:hover{background:#eee7d7}.token-markets a[aria-disabled="true"]{color:var(--muted);cursor:default;opacity:.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.intro{grid-template-columns:minmax(0,1fr) minmax(420px,1.8fr)}.intro .census{display:none}.intro h1{font-size:24px}}
@media(max-width:700px){.intro{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:13px 0}.intro h1{max-width:none;font-size:25px}.token-panel{width:100%;max-width:560px;align-self:center;padding:12px}.token-facts{gap:10px;grid-template-columns:1.3fr .6fr 1fr}.token-facts strong{font-size:14px}#token-network{font-size:11px}.token-details{flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:8px}.token-contract{flex-basis:100%}.token-markets{width:100%}.token-markets a{flex:1;text-align:center}.claim-intro strong{display:none}}