@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080c13;--panel:#101722;--text:#eff6ff;--muted:#9aabc2;--cyan:#36e9ef;--purple:#b977ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 8%,#0b303f66,transparent 42%),radial-gradient(ellipse at 90% 15%,#39205055,transparent 42%),var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;line-height:1.65}.bar{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 32px;border-bottom:1px solid #ffffff10}.brand{text-decoration:none;color:var(--cyan);font-weight:800;letter-spacing:2px;font-size:18px}.brand span{color:#e9f5ff;margin-left:8px}.world{font-size:10px;letter-spacing:2px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:0 32px}.hero{text-align:center;padding:65px 0 44px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--cyan);font-weight:800}.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:8px}.logo{width:min(480px,80%);height:auto;max-height:160px;object-fit:contain;margin:20px auto 0}h1{font-size:clamp(32px,4.2vw,53px);letter-spacing:-2px;line-height:1.18;margin:12px 0 20px;font-weight:800}h1 span{background:linear-gradient(95deg,var(--cyan),#b888ff);background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:15px;margin:0}.gem-row{display:flex;justify-content:center;gap:25px;margin:35px auto 7px}.gem-row i{width:23px;height:23px;transform:rotate(45deg);background:linear-gradient(135deg,#ffacb2,#ff254f 45%,#7e0526);border:1px solid #ffffff80;box-shadow:0 0 24px #fb245944,inset 6px 6px 0 #ffffff30}.gem-row i:nth-child(2){background:linear-gradient(135deg,#fff4ab,#ffd630 45%,#997300)}.gem-row i:nth-child(3){background:linear-gradient(135deg,#ffd2a2,#ff8e24 45%,#a84400)}.gem-row i:nth-child(4){background:linear-gradient(135deg,#c6ffd0,#29e86b 45%,#007b35)}.gem-row i:nth-child(5){background:linear-gradient(135deg,#bdeaff,#2394ff 45%,#063f9d)}.gem-row i:nth-child(6){background:linear-gradient(135deg,#d7c9ff,#7050fa 45%,#302179)}.directory{margin-top:16px}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:center}h2{font-size:25px;letter-spacing:-.8px;margin:5px 0 0;line-height:1.4}.count{display:inline-flex;min-width:30px;justify-content:center;font-size:13px;vertical-align:middle;border:1px solid #2cebf034;border-radius:8px;color:var(--cyan);background:#22e8ef0c;padding:2px 8px;margin-left:8px}button,a{touch-action:manipulation}.secondary{background:#ffffff05;border:1px solid #ffffff20;border-radius:9px;padding:10px 16px;color:var(--text);font:inherit;font-size:12px;cursor:pointer}.secondary:hover{border-color:var(--cyan)}button:disabled{opacity:.45;cursor:wait}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:25px 0 14px}.search{display:flex;align-items:center;gap:12px;width:min(430px,100%);border:1px solid #ffffff18;background:#111925;border-radius:10px;padding:11px 15px}.search>span:first-child{font-size:22px;color:var(--muted);line-height:1}.search input{background:none;border:0;outline:none;color:var(--text);width:100%;font:inherit;font-size:12px}.search:focus-within{border-color:var(--cyan)}#updated{font-size:11px;color:var(--muted)}.status{font-size:12px;color:var(--muted);margin:6px 0 18px}.status.error{color:#ffb9b9}.status:empty{display:none}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{position:relative;overflow:hidden;border:1px solid #ffffff16;background:linear-gradient(155deg,#152330,#111620 75%);border-radius:15px;padding:24px}.card:before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,#33e9ef88,#ae66f944)}.badge{display:inline-flex;align-items:center;gap:6px;color:#84eac9;font-size:9px;font-weight:800;letter-spacing:1px}.badge:before{content:'';width:5px;height:5px;border-radius:50%;background:#75e4b6}.card h3{margin:18px 0 2px;font-size:21px;line-height:1.3;overflow-wrap:anywhere;letter-spacing:-.5px}.coords{color:var(--muted);font-size:11px;margin:6px 0}.lastseen{color:#90a3bb;font-size:10px;margin:14px 0 22px}.teleport{display:block;text-decoration:none;text-align:center;color:#08151d;background:linear-gradient(110deg,#48e1eb,#9d9aff);border-radius:8px;padding:10px 14px;font-size:12px;font-weight:800}.teleport:hover{filter:brightness(1.14)}.teleport:focus-visible,.secondary:focus-visible{outline:2px solid white;outline-offset:4px}.empty{grid-column:1/-1;text-align:center;background:#101722;border:1px dashed #ffffff26;border-radius:15px;padding:45px 20px}.empty h3{margin:0 0 8px;font-size:21px}.empty p{max-width:480px;margin:auto;color:var(--muted);font-size:13px}.directory-note{color:#8394aa;font-size:10px;margin:22px 0}.how{border-top:1px solid #ffffff12;margin-top:65px;padding:40px 0 48px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:26px}.steps article>span{font-size:12px;color:var(--purple);font-weight:800}.steps h3{font-size:15px;margin:9px 0}.steps p{font-size:12px;color:var(--muted);margin:0}footer{text-align:center;border-top:1px solid #ffffff10;padding:28px 24px 32px}footer>span{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--cyan)}footer p{font-size:12px;color:var(--muted);margin:9px 0}footer small{font-size:9px;color:#72839c}.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:850px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo{max-width:420px}.world{display:none}}@media(max-width:550px){main{padding:0 20px}.bar{padding:20px}.hero{padding-top:42px}h1{letter-spacing:-1px}.hero p{font-size:13px}.desktop{display:none}.grid,.steps{grid-template-columns:1fr}.section-head{align-items:flex-start}h2{font-size:22px}.toolbar{align-items:flex-start;flex-direction:column;gap:12px}.search{width:100%}.card{padding:22px}.how{margin-top:44px}.steps{gap:24px}.secondary{padding:9px 12px;white-space:nowrap}.gem-row{gap:23px}.eyebrow{font-size:9px}}

.header-actions{display:flex;align-items:center;gap:24px}.withdraw{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border:1px solid #74e6ef55;border-radius:9px;padding:9px 19px;color:#07121c;background:linear-gradient(110deg,#48e1eb,#9d9aff);font-weight:800;font-size:12px;white-space:nowrap;box-shadow:0 0 22px #31dce612}.withdraw:hover{filter:brightness(1.12)}.withdraw:focus-visible{outline:2px solid white;outline-offset:4px}.withdraw[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:550px){.bar{gap:12px}.brand{font-size:14px;letter-spacing:1px}.brand span{margin-left:3px}.withdraw{padding:8px 13px;font-size:11px}.header-actions{gap:0}}

.gem-art{display:block;width:min(590px,100%);height:auto;margin:12px auto 0}@media(max-width:550px){.gem-art{margin-top:14px}}

/* Reuse the exact gem artwork from the existing Gem Collect texture. */
.gem-icons{display:flex;justify-content:center;gap:10px;width:min(420px,100%);margin:30px auto 7px}
.gem-icon{display:block;flex:1;max-width:60px;aspect-ratio:340 / 300;background-image:url('assets/gem-texture.png');background-size:368.8235% 418%;background-repeat:no-repeat;clip-path:polygon(23% 0,77% 0,100% 34%,100% 43%,50% 100%,0 43%,0 34%)}
.gem-red{background-position:12.035% 31.447%}.gem-yellow{background-position:49.781% 31.447%}.gem-orange{background-position:88.074% 31.447%}.gem-green{background-position:12.035% 62.369%}.gem-blue{background-position:49.781% 62.369%}.gem-indigo{background-position:88.074% 62.369%}
@media(max-width:550px){.gem-icons{gap:7px;width:min(350px,100%)}}

.region-name{font-size:12px;color:var(--cyan);margin:7px 0 3px;overflow-wrap:anywhere}

.account-link{color:var(--text);font-size:12px;font-weight:700;text-decoration:none}.account-link:hover{color:var(--cyan)}.account-link:focus-visible{outline:2px solid white;outline-offset:4px}@media(max-width:550px){.header-actions{gap:12px}.account-link{font-size:11px}}

/* The location directory uses one row per parcel. */
.location-list{grid-template-columns:minmax(0,1fr);gap:8px;max-height:360px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-color:#6086a0 #111925;padding:8px;border:1px solid #ffffff18;border-radius:13px;background:#0c121b}
.location-list:empty{display:none}
.location-list:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.location-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,auto) auto;align-items:center;gap:16px;padding:12px 16px;border-radius:10px}
.location-row h3{margin:0;font-size:17px}.location-row .region-name,.location-row .coords,.location-row .lastseen{margin:2px 0}
.location-row .teleport{white-space:nowrap}
@media(max-width:600px){.location-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px}.location-row .location-meta{grid-column:1}.location-row .teleport{grid-column:2;grid-row:1 / span 2;padding:8px;font-size:11px;white-space:normal}.location-row h3{font-size:15px}}

.dust-directory{margin-top:40px}.dust-location-title{display:flex;align-items:center;gap:12px;min-width:0}.location-jar{width:44px;height:44px;object-fit:contain;flex:none}.dust-location{border-color:#36e9ef33}

/* Large cabinet multiplier between location details and activity, as in the owner mockup. */
.dust-location{grid-template-columns:minmax(0,1fr) auto minmax(110px,auto) auto;gap:18px}
.dust-multiplier{display:block;color:var(--cyan);font-size:clamp(32px,3.2vw,44px);font-weight:800;line-height:1;letter-spacing:-1px;white-space:nowrap;text-align:center;min-width:2.3ch;font-variant-numeric:tabular-nums}
@media(max-width:800px){
 .dust-location{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}
 .dust-location .dust-location-title{grid-column:1;grid-row:1}
 .dust-location .dust-multiplier{grid-column:2;grid-row:1;font-size:36px}
 .dust-location .location-meta{grid-column:1;grid-row:2}
 .dust-location .teleport{grid-column:2;grid-row:2;font-size:11px;white-space:normal;max-width:140px}
}

/* Two independent directories, matching the side-by-side mockup. */
body:has(.directory-columns) main{max-width:1600px}
.directory-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.directory-columns>.directory{min-width:0}
.directory-columns .dust-directory{margin-top:0}
.directory-columns .section-head{min-height:64px}
.directory-columns .location-list{max-height:none;overflow-y:visible}
.directory-columns .location-list.is-scrollable{overflow-y:auto;overscroll-behavior-y:contain}
.directory-columns .location-row{gap:10px;padding:12px}
.directory-columns .location-row h3{font-size:15px}
.directory-columns .location-row .teleport{font-size:10px;padding:9px}
.directory-columns .dust-multiplier{font-size:36px}
.directory-columns .toolbar{flex-wrap:wrap;gap:10px}
.directory-columns .search{max-width:100%}
@media(min-width:901px) and (max-width:1250px){
 .directory-columns .location-row{grid-template-columns:minmax(0,1fr) auto}
 .directory-columns .location-row .location-details,.directory-columns .dust-location-title{grid-column:1;grid-row:1}
 .directory-columns .location-row .location-meta{grid-column:1;grid-row:2}
 .directory-columns .location-row .teleport{grid-column:2;grid-row:2;white-space:normal}
 .directory-columns .dust-multiplier{grid-column:2;grid-row:1}
}
@media(max-width:900px){.directory-columns{grid-template-columns:minmax(0,1fr);gap:32px}}

/* One shared control bar; identical top spacing for both directory columns. */
.directory-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:16px 0 24px}
.directory-controls .search{flex:1;max-width:480px}
.directory-controls #updated{margin-left:auto;color:var(--muted);font-size:10px}
.directory-columns>.directory{margin-top:0}
.directory-columns .section-head{margin:0 0 16px;min-height:72px;align-items:center}
.directory-columns .section-head h2{margin:6px 0 0}
@media(max-width:600px){.directory-controls{gap:12px}.directory-controls .search{flex-basis:100%;max-width:none}.directory-controls #updated{margin-left:0;flex:1}}

/* Approved navigation and Rules page. */
.bar{gap:18px;flex-wrap:wrap}.header-actions{gap:12px;flex-wrap:wrap}.header-actions .withdraw{min-height:40px;justify-content:center}.rules-main{max-width:940px;padding-bottom:48px}.rules-back{display:table;margin:30px auto 0;text-decoration:none}.rules-intro{text-align:center;margin:12px 0 36px}.rules-intro .logo{width:min(360px,80%);margin:0 auto}.rules-intro h1{margin:12px 0 4px}.rules-intro h2{font-size:24px;color:var(--cyan)}.rules-copy{max-width:820px;margin:auto}.rules-copy>h3{color:var(--cyan);font-size:18px;line-height:1.5;padding-top:24px;margin:26px 0 10px;border-top:1px solid #ffffff20}.rules-copy>p{color:#c3d0e1;font-size:15px;line-height:1.8}.rules-copy>p:first-child{text-align:center;margin-bottom:32px}.hero{position:relative}.hero .gem-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}@media(max-width:600px){.bar{justify-content:center}.header-actions{justify-content:center;gap:8px}.header-actions .withdraw{min-height:44px}.rules-main{padding-inline:20px}.rules-copy>h3{font-size:16px}.rules-copy>p{font-size:14px}}

.rules-intro h2{background:linear-gradient(95deg,var(--cyan),#b888ff);background-clip:text;color:transparent}

/* Compact ambient player; existing page sections retain their layout. */
.music-player{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 24px;color:var(--muted);font-size:12px}.music-label{color:var(--cyan);margin-right:4px}.music-player button{border:1px solid #74e6ef55;border-radius:8px;padding:8px 13px;min-height:40px;color:#07121c;background:linear-gradient(110deg,#48e1eb,#9d9aff);font:700 12px Manrope,system-ui,sans-serif}.music-player button:disabled{opacity:.6}.music-player button:focus-visible,.music-player input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.music-player input[type=range]{width:110px;max-width:100%;accent-color:var(--cyan);min-height:36px}.music-player output{min-width:36px;color:var(--text);font-variant-numeric:tabular-nums}@media(max-width:550px){.music-player{gap:8px}.music-player button{min-height:44px}.music-label{flex-basis:100%;text-align:center}.music-player input[type=range]{width:100px}}

.music-player .music-hint{flex-basis:100%;text-align:center;color:var(--muted);font-size:12px}.music-player .music-hint[hidden]{display:none}
