@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#e9e4d6;--ink:#19211d;--red:#dba976;--line:#eee9d330}*{box-sizing:border-box}body{margin:0;background:#101713;color:var(--paper);font-family:'DM Sans',sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#17211dcc;padding:11px 16px;border-radius:2px;backdrop-filter:blur(14px)}button:hover{background:#344039ee;border-color:#e4d9bf80}button:focus-visible,a:focus-visible{outline:2px solid #edb679;outline-offset:4px}button:disabled{opacity:.5;cursor:default}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:none}body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#0d171c99,transparent 20%,transparent 70%,#0d171ccc),linear-gradient(90deg,#10191577,transparent 55%)}header{position:absolute;top:25px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;z-index:3}.brand{color:inherit;text-decoration:none;display:flex;gap:16px;align-items:center;font-size:12px;font-weight:700;letter-spacing:1.7px}.brand img{width:51px;height:40px;object-fit:contain}.brand small{font-size:7px;letter-spacing:1.6px;font-weight:500}.header-tools{display:flex;gap:10px}header button{background:#19221c66;font-size:11px;border:1px solid #ffffff25;padding:10px 15px}header button span{font-size:9px;border-left:1px solid #ffffff35;margin-left:15px;padding-left:12px;color:#dcb387}#intro{position:absolute;left:5vw;bottom:180px;max-width:650px;pointer-events:none;text-shadow:0 2px 35px #001b13a0}#intro button{pointer-events:auto}.kicker{font-size:8px;letter-spacing:2.5px;margin-bottom:22px;color:#d2c9b7}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(40px,4.8vw,76px);font-weight:600;line-height:.95;letter-spacing:-.4px;margin:0}h1 em{font-style:normal;color:#dfb185}#intro p{font-size:13px;line-height:1.8;margin:23px 0;color:#e0dbca}button.primary{background:#e8dfc9;color:#23352c;border:0;padding:16px 20px;min-width:260px;text-align:left;font-size:12px;font-weight:600;backdrop-filter:none}.primary:hover{background:#fff5df}.primary span{float:right}#intro>small{display:block;font-size:8px;letter-spacing:1px;margin-top:16px;line-height:1.5;color:#ccc7b5}#meter{position:absolute;right:32px;top:108px;width:230px;background:#15221edb;border:1px solid var(--line);padding:17px;backdrop-filter:blur(20px)}body:not(.started) #meter{display:none}#meter>div:first-child{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}.track{height:2px;background:#e4dcc13a;margin:13px 0}.track i{display:block;height:100%;width:0;background:#d5a774;transition:width 1s}#meter p{font-size:12px;line-height:1.6;margin:12px 0;color:#d7d2c2}#meter button{width:100%;font-size:10px;background:#34443b99;border-color:#d6ccad44}#meter small{font-size:7px;line-height:1.5;display:block;margin-top:10px;color:#a7af9f}#room-label{position:absolute;left:32px;bottom:150px;pointer-events:none;display:none;text-shadow:0 2px 20px #000}#room-label>span{font-size:8px;letter-spacing:2px;color:#cfbc97}#room-title{font-family:'Barlow Condensed',Impact,sans-serif;font-size:36px;margin:5px 0;font-weight:600}#room-sub{font-size:8px;letter-spacing:2px;margin:0;color:#d4cbb6}nav{position:absolute;bottom:77px;left:32px;right:32px;display:flex;border-top:1px solid var(--line);padding-top:12px;gap:7px}nav button{font-size:8px;display:flex;gap:14px;align-items:center;flex:1;background:#15221e99;padding:12px 15px;text-align:left}nav button span{font-size:10px;letter-spacing:.2px}nav button.active{background:#e7dfc7;color:#25352c;border-color:#e7dfc7}footer{position:absolute;bottom:18px;left:32px;right:32px;display:flex;justify-content:space-between}footer>div{display:flex;gap:7px}footer button{font-size:9px;background:#14221c99;padding:10px 13px}footer button.selected{border-color:#d5c4a0}#count{margin-left:8px;color:#d6ad7e}#toast{position:absolute;left:50%;bottom:158px;transform:translateX(-50%);padding:13px 20px;background:#ece4cc;color:#1c342a;max-width:430px;text-align:center;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}#toast.on{opacity:1}#hint{position:absolute;left:50%;top:57%;transform:translateX(-50%);background:#172c23e6;color:var(--paper);font-size:11px;z-index:2;border-color:#dac6a460}#cross{position:absolute;left:50%;top:50%;pointer-events:none;color:#f2e1c4;font-size:16px;opacity:.6;text-shadow:0 1px 3px black}dialog{border:1px solid #ddd0ad3b;background:#e8e2d3;color:#24382e;border-radius:3px;width:min(850px,92vw);max-height:86vh;padding:38px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#071b14c9;backdrop-filter:blur(12px)}#close{position:sticky;float:right;top:0;border:0;font-size:26px;z-index:3;line-height:1;padding:5px 10px;background:#e8e2d3}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;font-weight:600;margin:12px 0}dialog p{line-height:1.75;font-size:14px}dialog .eyebrow{font-size:9px;letter-spacing:2px;color:#8b5c3e}dialog img.art{max-width:100%;max-height:53vh;display:block;margin:20px auto;object-fit:contain}dialog .list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.list button{text-align:left;padding:18px;font-size:13px;background:#d7d3c6;border-color:#374c3929}.list button:hover{background:#c8cebd}.list button small{display:block;font-size:9px;color:#697761;margin:0 0 8px}dialog a{color:#314c3e}dialog .primary{background:#243c2f;color:#eee8d5}#loading{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#14221c;z-index:10;font-size:10px;letter-spacing:3px;color:#e0cfab}#loading span{margin-top:15px;letter-spacing:0;color:#98a894}#touch{position:absolute;right:20px;bottom:160px;text-align:center}#touch button{width:42px;height:42px;padding:0;background:#14261ccc}body.started #intro{display:none}body.started #room-label{display:block}body.walking #world{cursor:crosshair}
@media(max-width:700px){header{top:16px;left:16px;right:16px}.brand{font-size:9px;gap:9px}.brand img{width:36px}.brand small{font-size:5px;letter-spacing:1px}.header-tools{gap:4px}header button{font-size:8px;padding:9px}header button span{display:none}#intro{left:22px;bottom:175px;right:20px}h1{font-size:46px}#intro p{font-size:12px;margin:16px 0}.kicker{font-size:7px;letter-spacing:1.5px;max-width:220px;line-height:1.7}#intro>small{max-width:250px;font-size:7px}#meter{right:16px;top:86px;width:170px;padding:12px}#meter p{font-size:10px}#meter>div:first-child{font-size:7px}#meter small{font-size:6px}#rooms{bottom:86px;left:16px;right:16px;gap:4px}nav button{padding:8px 5px;gap:4px;flex-direction:column}nav button span{font-size:8px}footer{left:16px;right:16px;bottom:14px;gap:4px}footer>div{gap:3px;flex-wrap:wrap;max-width:52%}footer button{font-size:8px;padding:7px}#room-label{left:20px;bottom:160px}#room-title{font-size:28px}#room-sub{max-width:180px;font-size:7px;line-height:1.5}#toast{bottom:256px;width:80%;font-size:11px}#hint{top:55%}#hint:not([hidden])~#toast{opacity:0}dialog{padding:24px}.list{grid-template-columns:1fr!important}}
@media(min-width:701px) and (max-width:1020px){#toast{left:auto;right:32px;transform:none;bottom:150px;max-width:calc(100% - 320px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
#meter p.rent{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#a7af9f}#meter p.rent b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:19px;letter-spacing:.3px;color:#e9c79c;text-transform:none;font-weight:600}
dialog a.census{display:inline-block;text-decoration:none;padding:13px 18px;background:#23352c;color:#efe6cf;font-size:12px;font-weight:600;letter-spacing:.4px}dialog a.census:hover{background:#344a3e}

/* phones (2026-10-18): the controls were 8px buttons in two half width clusters with a gap between, too small to tap and
   lopsided. Now one even grid of four, 38px tall; the room tabs, title and intro step up to make room. */
@media(max-width:700px){footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}footer>div{display:contents}footer button{font-size:10px;min-height:38px;padding:6px 4px;justify-content:center;text-align:center}#rooms{bottom:104px}#room-label{bottom:178px}#intro{bottom:193px}#toast{bottom:272px}}