:root{
  --paper:#f3e9d2; --ink:#2b2118; --brass:#c9a227; --brass2:#8c6d1f; --wine:#5b1f2b; --panel:rgba(31,24,20,.92);
}
*{box-sizing:border-box}
/* slim, quiet scrollbars in the panel colours (dark panels get brass, paper pages get wine) */
*{scrollbar-width:thin;scrollbar-color:rgba(140,109,31,.55) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,109,31,.55);border-radius:3px;border:1px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.8);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.paper,.paper *{scrollbar-color:rgba(91,31,43,.45) transparent}
.paper ::-webkit-scrollbar-thumb,.paper::-webkit-scrollbar-thumb{background:rgba(91,31,43,.45);background-clip:padding-box}
.paper ::-webkit-scrollbar-thumb:hover,.paper::-webkit-scrollbar-thumb:hover{background:rgba(91,31,43,.75);background-clip:padding-box}
html,body{margin:0;height:100%;overflow:hidden;background:#141114;font-family:'Nunito',system-ui,sans-serif;color:var(--ink)}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
button{font-family:inherit;cursor:pointer}

#topbar{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;gap:7px;padding:0 10px;overflow:hidden;
  background:linear-gradient(#3a2a22,#241a15);border-bottom:3px solid var(--brass);box-shadow:0 4px 18px rgba(0,0,0,.5);color:var(--paper);z-index:5;user-select:none}
.brand{font-family:'Playfair Display',serif;font-weight:900;font-size:20px;color:var(--brass);letter-spacing:.3px;margin-right:4px;text-shadow:0 2px 0 #000;white-space:nowrap}
.crown{font-size:20px}
.stat{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.35);border:1px solid rgba(201,162,39,.35);border-radius:20px;padding:4px 9px;font-size:14px;white-space:nowrap}
.stat b{font-weight:800}
.stat.bar i{display:inline-block;width:54px;height:10px;background:#1a1410;border-radius:6px;overflow:hidden;border:1px solid #000}
.stat.bar u{display:block;height:100%;width:50%;background:linear-gradient(90deg,#c9a227,#f1d675);transition:width .5s}
.speed{margin-left:auto;display:flex;gap:3px}
.speed button,#btn-help,#btn-new,#btn-mute,#btn-music,#btn-undo,#btn-almanac,#btn-postcard,#btn-save,#btn-load,#btn-mood,#btn-maker{background:#1a1410;border:1px solid var(--brass2);color:var(--paper);border-radius:8px;padding:4px 10px;font-size:15px}
.speed button.on{background:var(--brass);color:#1a1410;font-weight:800}
#btn-help{font-weight:800;font-size:18px;width:36px}
#btn-new{font-weight:800;font-size:13px;white-space:nowrap}

#sidebar{position:absolute;left:0;top:54px;bottom:0;width:250px;background:var(--panel);border-right:3px solid var(--brass2);display:flex;flex-direction:column;z-index:4;color:var(--paper);backdrop-filter:blur(4px)}
#tabs{display:flex;flex-wrap:wrap;gap:3px;padding:8px 8px 4px}
#tabs button{flex:1 1 22%;background:#2d221c;border:1px solid #000;color:var(--paper);border-radius:8px;padding:5px 2px;font-size:12px;font-weight:800}
#tabs button.on{background:var(--brass);color:#1a1410}
#palette{flex:1;overflow-y:auto;padding:6px 8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.pal{background:#2d221c;border:2px solid #14100d;border-radius:10px;padding:5px 4px 4px;text-align:center;cursor:pointer;position:relative;transition:transform .08s}
.pal:hover{transform:scale(1.04);border-color:var(--brass2)}
.pal.on{border-color:var(--brass);background:#3d2f26;box-shadow:0 0 0 2px rgba(201,162,39,.4)}
.pal canvas{width:72px;height:72px;image-rendering:pixelated;display:block;margin:0 auto}
.pal .nm{font-size:11.5px;font-weight:800;line-height:1.1;margin-top:3px}
.pal .cs{font-size:11px;color:var(--brass)}
.pal.locked{opacity:.45;filter:grayscale(.7)}
.pal.locked::after{content:"🔒";position:absolute;right:4px;top:2px;font-size:14px}
.pal.wide{grid-column:1/3}
.pal.wide canvas{width:150px}
#infocard{border-top:2px solid var(--brass2);padding:8px 10px 10px;background:rgba(0,0,0,.35);font-size:12.5px;line-height:1.35;max-height:42%;overflow:auto}
.ic-title{font-family:'Playfair Display',serif;font-size:17px;color:var(--brass)}
.ic-cost{font-weight:800;margin:2px 0}
.ic-fx{color:#e6d7b3;margin-bottom:5px}
.ic-fact{color:#f3e9d2;font-style:italic;border-left:3px solid var(--brass2);padding-left:7px}
.ic-fact::before{content:"Did you know? ";font-weight:800;font-style:normal;color:var(--brass)}

#quests{position:absolute;right:12px;top:66px;width:260px;background:var(--panel);border:2px solid var(--brass2);border-radius:12px;padding:8px 12px 10px;color:var(--paper);z-index:4;font-size:13px}
#quests h3{margin:0 0 6px;font-family:'Playfair Display',serif;color:var(--brass);font-size:16px}
.q{padding:5px 0;border-top:1px dashed rgba(201,162,39,.3);display:flex;gap:6px;align-items:flex-start}
.q .chk{width:18px;flex:none}
.q.done{opacity:.55;text-decoration:line-through}
.q .rw{color:var(--brass);white-space:nowrap;margin-left:auto}

#toast{position:absolute;left:50%;top:70px;transform:translateX(-50%);background:rgba(20,15,12,.9);color:var(--paper);border:2px solid var(--brass);border-radius:30px;padding:8px 18px;font-weight:800;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6;font-size:15px}
#toast.show{opacity:1}

#newspaper,#help,#ask,#almanac,#slots,#maker,#season{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(2px)}
.paper{width:min(560px,92vw);max-height:88vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);padding:22px 30px 26px;border:2px solid #7a6a4a;box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 60px rgba(120,90,40,.2);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.02) 0 2px,transparent 2px 4px);transform:rotate(-.6deg);animation:drop .4s ease-out}
@keyframes drop{from{transform:scale(.8) rotate(4deg);opacity:0}to{transform:scale(1) rotate(-.6deg);opacity:1}}
.masthead{font-family:'Playfair Display',serif;font-weight:900;font-size:26px;text-align:center;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:6px 0;letter-spacing:1px}
.dateline{text-align:center;font-size:12px;margin:6px 0 8px;text-transform:uppercase;letter-spacing:2px}
.dateline .dl-date{display:inline-block;font-family:'Playfair Display',serif;font-weight:900;font-size:22px;letter-spacing:.5px;text-transform:none;color:var(--wine);margin-right:4px}
.headline{font-family:'Playfair Display',serif;font-size:24px;margin:8px 0 8px;line-height:1.15}
.story{font-size:15px;line-height:1.5;overflow:auto;min-height:0}
.story .keys{font-size:12.5px;color:#5a4a3a;border-top:1px dashed #8c7a5b;padding-top:8px}
#help .story ul{margin:6px 0}
.story ul{padding-left:20px}
.unlock{margin-top:10px;font-weight:800;color:var(--wine)}
.unlock:empty{display:none}
.paper .ok{display:block;margin:14px auto 0;flex:none;background:var(--wine);color:var(--paper);border:0;border-radius:24px;padding:10px 26px;font-size:16px;font-weight:800;box-shadow:0 3px 0 #2a0d13}
.paper .ok:active{transform:translateY(2px);box-shadow:none}
[hidden]{display:none!important}
@media (max-width:1250px){.brand{display:none}}
@media (max-width:1050px){.stat.bar i{display:none}}
@media (max-width:900px){#quests{display:none}}

.stat .pct{font-size:12px;font-weight:800;min-width:30px;color:#f1d675}
#s-money{position:relative}
.float{position:absolute;left:50%;top:-4px;transform:translateX(-50%);color:#8ef58a;font-weight:800;font-size:15px;pointer-events:none;animation:floatup 1.4s ease-out forwards;text-shadow:0 1px 0 #000}
@keyframes floatup{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-34px)}}
.q .pr{color:#f1d675;font-style:normal;font-weight:800}
.ic-sell{margin-top:8px;width:100%;background:#5b1f2b;color:var(--paper);border:1px solid #2a0d13;border-radius:8px;padding:6px;font-weight:800}
.ic-sell:hover{background:#7a2a3a}
.quiz:empty{display:none}
.quiz{margin-top:14px;border:2px dashed var(--brass2);border-radius:8px;padding:10px 12px;background:rgba(255,255,255,.35)}
.quiz .qt{font-weight:800;color:var(--wine);letter-spacing:.5px;font-size:13px;text-transform:uppercase}
.quiz .qq{font-family:'Playfair Display',serif;font-size:18px;margin:4px 0 8px}
.quiz .qa{display:flex;gap:8px;flex-wrap:wrap}
.quiz .qa button{flex:1 1 30%;background:#fff;border:2px solid var(--brass2);border-radius:10px;padding:8px 6px;font-weight:800;font-size:14px}
.quiz .qa button:hover:not(:disabled){background:#fff7dd}
.quiz .qa button.good{background:#c8f3c0;border-color:#3f9a3a}
.quiz .qa button.bad{background:#f7c9c9;border-color:#b03a3a}
.quiz .qr{margin-top:8px;font-weight:800;min-height:1.2em}
.paper .ok:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
#btn-mute{font-size:15px}

.paper.small{width:min(440px,92vw)}
.ask-input{display:block;width:100%;margin:12px 0 0;padding:10px 12px;font:800 20px 'Playfair Display',serif;color:var(--ink);background:#fffdf5;border:2px solid var(--brass2);border-radius:8px;text-align:center}
.ask-input:focus{outline:3px solid rgba(201,162,39,.5)}
.ask-buttons{display:flex;gap:10px;justify-content:center;margin-top:16px}
.ask-buttons .ok{margin:0}
.ask-buttons .cancel{background:#8c7a5b}

#btn-music{font-size:15px}#btn-music.off{opacity:.45;text-decoration:line-through}
#hint{position:absolute;left:262px;right:320px;bottom:10px;text-align:center;pointer-events:none;z-index:3;color:var(--paper);font-size:13px;font-weight:600;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}
#hint kbd{background:#2d221c;border:1px solid var(--brass2);border-radius:4px;padding:0 5px;font-family:inherit;font-size:12px}
@media (max-width:900px){#hint{display:none}}

#btn-undo,#btn-almanac,#btn-postcard{font-size:15px}
#zoombox{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:4px;z-index:4}
#zoombox button{width:38px;height:38px;border-radius:8px;background:var(--panel);border:1px solid var(--brass2);color:var(--paper);font-size:20px;font-weight:800}
#zoombox button:hover{background:#3d2f26}
.paper.wide{width:min(720px,94vw)}
.al-tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.al-tab{flex:1;background:#fff;border:2px solid var(--brass2);border-radius:10px;padding:6px;font-weight:800;font-size:13px}
.al-tab.on{background:var(--wine);color:var(--paper);border-color:var(--wine)}
.al-body{max-height:52vh;overflow:auto;padding-right:6px}
.al-item{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px dashed rgba(43,33,24,.3)}
.al-year{font-family:'Playfair Display',serif;font-weight:900;font-size:20px;min-width:58px;color:var(--wine)}
.al-text{font-size:13.5px;line-height:1.4;margin-top:2px}
.al-thumb{width:56px;height:56px;image-rendering:pixelated;flex:none;background:#e8dcc0;border-radius:6px}
.al-icon{font-size:26px;min-width:40px;text-align:center}
.al-item.todo{opacity:.6}
.al-r{color:var(--brass2);font-weight:800;font-size:12px}
#al-chart{width:100%;height:auto;border:1px solid var(--brass2);border-radius:6px}

#minimap{position:absolute;right:58px;bottom:12px;width:240px;height:168px;border:2px solid var(--brass2);border-radius:8px;background:#2f8136;z-index:4;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5);image-rendering:pixelated}
@media (max-width:1100px){#minimap{display:none}}

.paper .ok.minor{background:#8c7a5b;font-size:14px;padding:8px 18px;margin-top:6px}


#loading{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#3a2a22 0%,#141114 75%);transition:opacity .5s}
#loading.done{opacity:0;pointer-events:none}
.ld-card{text-align:center;color:var(--paper);width:min(420px,88vw)}
.ld-crown{font-size:56px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ld-title{font-family:'Playfair Display',serif;font-weight:900;font-size:44px;color:var(--brass);text-shadow:0 3px 0 #000;margin-top:4px}
.ld-sub{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#e6d7b3;margin:6px 0 22px}
.ld-bar{height:14px;background:#1a1410;border:2px solid var(--brass2);border-radius:8px;overflow:hidden}
.ld-fill{height:100%;width:5%;background:linear-gradient(90deg,#c9a227,#f1d675);transition:width .35s}
.ld-msg{margin-top:10px;font-size:14px;color:#e6d7b3;min-height:1.2em}
@media (prefers-reduced-motion:reduce){.ld-crown{animation:none}}

#btn-cursor{flex:1;margin:0;background:#2d221c;border:2px solid #14100d;color:var(--paper);border-radius:10px;padding:7px 6px;font-size:13px;font-weight:800;text-align:center}
#btn-cursor.on{background:var(--brass);color:#1a1410;border-color:var(--brass)}
#btn-cursor:not(.on){animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}50%{box-shadow:0 0 0 3px rgba(201,162,39,.45)}}
@media (prefers-reduced-motion:reduce){#btn-cursor:not(.on){animation:none}}

#btn-save,#btn-load{font-size:15px}
.sl-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed rgba(43,33,24,.3)}
.sl-row.empty{opacity:.7}
.sl-icon{font-size:28px;min-width:40px;text-align:center}
.sl-body{flex:1}
.paper .ok.small{margin:0;padding:8px 16px;font-size:14px;white-space:nowrap}
.paper .ok:disabled{opacity:.4}

.help-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;flex:none}
.help-actions .ok{margin:0}

#help.fresh #btn-new{display:none}

#stattip{position:absolute;top:60px;z-index:7;width:330px;background:var(--paper);color:var(--ink);border:2px solid var(--brass2);border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none;font-size:13.5px;line-height:1.45;transform:rotate(-.4deg)}
#stattip::before{content:"";position:absolute;top:-9px;left:var(--arrow,40px);border:8px solid transparent;border-top:0;border-bottom:9px solid var(--brass2)}
#stattip h4{margin:0 0 4px;font-family:'Playfair Display',serif;font-size:17px;color:var(--wine)}
#stattip .big{font-size:22px;font-weight:800;color:var(--brass2);margin-bottom:4px}
#stattip ul{margin:6px 0 0;padding-left:18px}
#stattip li{margin:2px 0}
#stattip .good{color:#2e7d32}#stattip .bad{color:#b03a3a}

#btn-mood{font-size:15px}#btn-mood.on{background:var(--brass);color:#1a1410}
.ic-home{margin-top:8px;border-top:1px dashed var(--brass2);padding-top:8px;font-size:12.5px;line-height:1.4}
.ic-home .hb{display:block;margin:4px 0 2px;color:#e6d7b3}
.ic-home i{font-style:normal;font-weight:800;padding:0 3px;border-radius:4px;background:rgba(0,0,0,.3)}
.ic-home .good{color:#8ef58a}.ic-home .bad{color:#ff9f9f}
.ic-home ul{margin:4px 0 0;padding-left:16px}
.ic-home li{margin:3px 0}

#stattip .fx{opacity:.55;display:block}#stattip .fx.on{opacity:1}#stattip .fxd{font-size:12px;color:#5a4a3a}
#stattip{width:360px}

.sb-row{display:flex;gap:6px;margin:8px 8px 0}
#btn-mirror{width:44px;background:#2d221c;border:2px solid #14100d;color:var(--paper);border-radius:10px;font-size:20px;font-weight:800}
#btn-mirror.on{background:var(--brass);color:#1a1410;border-color:var(--brass)}

#btn-maker{font-size:15px}
.ic-person{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ic-person canvas{image-rendering:pixelated;background:rgba(0,0,0,.25);border-radius:8px}
.ic-follow{background:#2d221c;border:1px solid var(--brass2);color:var(--paper);border-radius:8px;padding:5px 8px;font-weight:800;font-size:12px}
.thennow{margin-top:6px;color:#e6d7b3;font-style:normal;border-top:1px dashed var(--brass2);padding-top:4px}
.mk-body{max-height:62vh}
.mk-preview{width:100%;max-width:640px;height:auto;image-rendering:pixelated;background:#cfe6c5;border:2px solid var(--brass2);border-radius:8px;display:block;margin:0 auto 8px}
.mk-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.mk-grid label{flex:1;font-weight:800;font-size:13px;display:flex;flex-direction:column;gap:3px}
.mk-grid input[type=text],.mk-grid input:not([type]){padding:6px 8px;border:2px solid var(--brass2);border-radius:8px;font:800 15px 'Nunito',sans-serif}
.mk-row{display:flex;gap:8px;align-items:center;margin:4px 0;flex-wrap:wrap}
.mk-row>span{min-width:88px;font-weight:800;font-size:13px}
.mk-opts{display:flex;gap:4px;flex-wrap:wrap}
.mk-opt{background:#fff;border:2px solid var(--brass2);border-radius:8px;padding:3px 8px;font-weight:800;font-size:12px;text-transform:capitalize}
.mk-opt.on{background:var(--wine);color:var(--paper);border-color:var(--wine)}
.mk-opt.locked{opacity:.4}
.mk-opt.sw{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid #8c7a5b}
.mk-opt.sw.on{border:3px solid var(--wine)}
.mk-story{font-size:14px;margin-top:8px}

.report:empty{display:none}
.report{margin-top:12px;background:rgba(255,255,255,.4);border:2px solid var(--brass2);border-radius:8px;padding:8px 12px}
.report .rt{font-weight:800;color:var(--wine);text-transform:uppercase;letter-spacing:.5px;font-size:13px}
.report ul{margin:4px 0 0;padding-left:4px;list-style:none;font-size:14px;line-height:1.5}
.vfact{font-style:italic;color:#5a4a3a}
.scrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scrap figure{margin:0;background:#fff;padding:6px 6px 8px;border:1px solid #c9b993;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(-1deg)}
.scrap figure:nth-child(even){transform:rotate(1.2deg)}
.scrap img{width:100%;display:block}
.scrap figcaption{font-size:12.5px;margin-top:4px;font-family:'Playfair Display',serif}
.al-tabs .al-tab{flex:1 1 22%}

.challenge:empty{display:none}
.challenge{margin-top:12px;border:2px solid var(--wine);border-radius:8px;padding:8px 12px;background:rgba(91,31,43,.08);font-size:14px}
.challenge .qt{font-weight:800;color:var(--wine);letter-spacing:.5px;font-size:13px;text-transform:uppercase;margin-bottom:2px}
.q.chal{background:rgba(201,162,39,.08)}
#ask{z-index:12}


#season{z-index:11}
.season-icon{font-size:52px;text-align:center;line-height:1.1;margin-bottom:6px}
.season-card .story{font-size:16px}

/* A long fact (the Sewer's runs to 430 characters) used to swell the info card to its
   42% cap, shrinking the palette out from under the cursor so the button beneath the
   pointer slid away and could not be clicked. Give the fact box one fixed height so
   every building makes the same size card and the palette never resizes at all. */
.ic-fact{height:8em;overflow:auto}