:root{color-scheme:dark;--ink:#eddfbf;--muted:#b6a68a;--line:#6b4c2c;--accent:#d0ad65;--wood:url('./assets/timber.svg');--paper:url('./assets/parchment.svg');font:13px Arial,Helvetica,sans-serif;color:var(--ink);background:#24170f}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #d9bb7e;outline-offset:2px}
[hidden]{display:none!important}
.masthead{height:28px;display:flex;align-items:center;gap:7px;padding:0 9px;background:#1e1b17 url('./assets/grain.svg');border-bottom:1px solid #a68b55;box-shadow:0 1px 5px #0009;position:relative;z-index:5}
.brand{font:bold 16px Georgia,serif;color:#f0dfb7;text-decoration:none;text-shadow:1px 1px 1px #000;letter-spacing:-.3px}
.header-version{font:10px Georgia,serif;color:#a99c83}
.layout{height:calc(100dvh - 28px);display:grid;grid-template-columns:30% minmax(210px,1fr) clamp(275px,29%,360px);overflow:hidden}
.click-column{isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;min-height:0;padding:20px 17px 22px;background-color:#233540;background-image:url('./assets/grain.svg'),radial-gradient(ellipse at 50% 58%,#647b80 0%,#364d59 48%,#18252e 100%);background-size:160px 160px,100% 100%;border-right:8px ridge #806139;box-shadow:inset 0 0 40px 7px #19130b99}
.click-column::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border:26px solid transparent;border-image:url('./assets/gilded-frame.svg') 48 / 26px stretch}
.balance{width:100%;min-width:0;text-align:center;z-index:2}
.balance-label{font:bold 15px Georgia,serif;color:#fff1d1;margin-bottom:2px;text-shadow:0 1px 2px #1d1209,1px 0 #332110}
.wallet{display:grid;grid-template-rows:1.08em .67em;justify-items:center;min-height:1.75em;white-space:nowrap;font:bold clamp(33px,3.8vw,53px)/1.08 Georgia,serif;color:#f9dda0;letter-spacing:-1px;text-shadow:0 2px 1px #231507,1px 0 1px #231507,-1px 0 1px #231507,0 0 13px #e9c26e44;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}
.wallet-number{display:block;white-space:nowrap}
.wallet-unit{display:block;align-self:center;font-size:.52em;line-height:1.2;letter-spacing:0;white-space:nowrap}
.production-line{font:12px Georgia,serif;color:#f0e3c3;margin-top:5px;text-shadow:0 1px 2px #20170d}
.production-line span{font-weight:bold}
.character-scene{width:100%;flex:1;min-height:160px;max-height:640px;position:relative;display:flex;align-items:center;justify-content:center;margin-top:15px}
.character-scene::before{content:'';position:absolute;inset:8% -4%;background:radial-gradient(ellipse,#ead59730,transparent 67%);pointer-events:none}
.wojak{background:none;border:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:160px;padding:7px 0;user-select:none;-webkit-user-select:none;touch-action:manipulation;position:relative;pointer-events:none;filter:drop-shadow(0 0 0 #ffe3a900);transition:filter 130ms ease-out}
.tap-motion{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;pointer-events:none;transform-origin:50% 55%}
.wojak .portrait-art{--skin-filter:brightness(1);width:100%;height:100%;max-height:510px;position:relative;pointer-events:none;filter:var(--photo-filter,brightness(1)) var(--skin-filter);transition:transform 110ms ease-out,filter 110ms ease-out}
.wojak:hover .portrait-art{transform:scale(1.012);filter:var(--photo-filter,brightness(1)) var(--skin-filter) brightness(1.025)}
.wojak.clicked .tap-motion{animation:tap-response 160ms linear}
.wojak.clicked[data-tap-alternate="1"] .tap-motion{animation-name:tap-response-alt}
.wojak.clicked .tap-motion{will-change:transform}
.wojak.glowing{filter:drop-shadow(0 0 12px #ffe3a9);transition:none}
.wojak:focus,.wojak:focus-visible{outline:none;box-shadow:none}
.wojak:focus-visible .placeholder-code{text-decoration:underline;text-decoration-color:#d9bb7e;text-underline-offset:8px}
.middle-column{position:relative;min-width:0;overflow:auto;background-color:#3c2317;background-image:linear-gradient(90deg,#10090577,transparent 7%,transparent 90%,#10090566),var(--wood);box-shadow:inset 0 0 30px #10090566}
.shop{min-width:0;min-height:0;display:flex;flex-direction:column;background:#382116 var(--wood);border-left:9px ridge #755032;box-shadow:inset 3px 0 8px #160c0877}
.store-title{font:bold 30px/1 Georgia,serif;text-align:center;margin:0;padding:8px 4px 9px;color:#edce8f;text-shadow:0 2px 1px #160c06,1px 0 #160c06;border-bottom:2px ridge #7f6039;background:#1e100955}
.quick-upgrades{padding:5px 6px;background:#1b100b44;border-bottom:2px groove #765333}
#quick-upgrade-list{display:flex;flex-wrap:wrap;gap:4px}
.quick-upgrade{width:46px;height:46px;padding:3px;background:#67543c var(--paper);border:1px ridge #bba170;box-shadow:inset 0 0 5px #36210d99,0 1px 2px #0008}
.quick-upgrade img{width:100%;height:100%;object-fit:contain}
.quick-upgrade:hover:not(:disabled){border-color:#f4d898;filter:brightness(1.15)}
.quick-upgrade:disabled{filter:brightness(.48) saturate(.55);border-color:#8e7957}
.shop-tabs{display:flex;min-height:29px;gap:3px;padding:3px 4px 0;background:#190e0866}
.shop-tabs button{flex:1;background:#29180e99;border:2px ridge #8c704a;border-bottom:0;color:#a99775;font:12px Georgia,serif;padding:4px 3px}
.shop-tabs button[aria-selected=true]{background:#69482b66;color:#f4e3bd;border-color:#c2a478;text-shadow:0 1px #000}
.shop-controls{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:3px 6px;min-height:29px;background:#1b0f0b55;border-bottom:2px ridge #8a6b40}
#trade-controls{display:flex;border-right:1px solid #8b6a3e;padding-right:5px}
#trade-controls button{font-size:12px;padding-inline:5px}
#trade-controls button[data-id=sell].selected{color:#e6bd88}
.shop-controls button{background:none;border:0;color:#aa9575;font:bold 11px Georgia,serif;min-width:29px;padding:3px 6px}
.shop-controls button.selected{color:#ffe7b2;text-decoration:underline;text-underline-offset:3px}
.shop-controls button:hover{color:white}
.shop-controls label{font-size:11px;display:flex;align-items:center;gap:5px;color:#c9b38c}
.shop-controls input{accent-color:#9b7443}
.shop-list{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#876842 #27160d}
.shop-row{width:100%;min-height:67px;display:flex;align-items:center;gap:7px;padding:4px 9px 4px 5px;margin:0;border:0;border-top:1px solid #ead8ad;border-bottom:2px ridge #755934;background-color:#c1b18a;background-image:linear-gradient(90deg,#3a220d33,transparent 18%,transparent 82%,#39230d2b),var(--paper);box-shadow:inset 0 1px 0 #f4e4ba88,inset 0 0 11px #4c321329;text-align:left;position:relative}
.shop-row:hover:not(:disabled){background-color:#dfcfa7;filter:brightness(1.1);box-shadow:inset 0 0 0 1px #f8e8ba,inset 0 0 15px #e6ba5e55}
.shop-row:active:not(:disabled){transform:translateY(1px);filter:brightness(.94);box-shadow:inset 0 2px 6px #3d250988}
.item-icon{display:flex;align-items:center;justify-content:center;width:54px;height:55px;flex-shrink:0;font-size:28px;color:#593b24;text-shadow:0 1px #f4e1b5}
.item-icon img{width:100%;height:100%;object-fit:contain}
.store-entry,.upgrade-entry{position:relative}
.upgrade-entry{display:inline-flex}
.store-entry>.shop-row:disabled,.upgrade-entry>.quick-upgrade:disabled{pointer-events:none}
.item-icon[data-aura=gold],.quick-upgrade[data-aura=gold]{position:relative;isolation:isolate;overflow:visible}
.item-icon[data-aura=gold]::before,.quick-upgrade[data-aura=gold]::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-8px -6px auto;height:66%;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#ffdb6d88,#e9b33a44 43%,#d9a64218 62%,transparent 75%);filter:blur(2px)}
.item-text{flex:1;min-width:0}
.item-text>strong{display:block;font:bold 17px/1.1 Georgia,serif;color:#352310;text-shadow:0 1px #efdfb6;overflow-wrap:break-word}
.price{display:flex;gap:5px;align-items:center;font:bold 12px Georgia,serif;color:#55401f;line-height:1.5;margin-top:3px;font-variant-numeric:tabular-nums;text-shadow:0 1px #ecddb055}
.price-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.milestone-hint{color:#665735;font:10px Georgia,serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.shop.selling .shop-row:not(:disabled) .price{color:#355537}
.milestone-reached::after{content:'';position:absolute;inset:1px;z-index:3;pointer-events:none;border:1px solid #dfc386;animation:milestone-flash .8s ease-out forwards}
@keyframes milestone-flash{0%{opacity:1}100%{opacity:0}}
.tiny-pill{display:inline-block;flex-shrink:0;width:11px;height:6px;border-radius:5px;border:1px solid #856644;background:linear-gradient(90deg,#1f1710 48%,#46372a 49%);transform:rotate(-35deg);box-shadow:0 1px #f6e5b766}
.owned-count{font:normal 35px/1 Georgia,serif;letter-spacing:-2px;color:#fff0c4;text-shadow:0 1px 2px #2a1b0a,1px 0 1px #2a1b0a,-1px 0 1px #2a1b0a;min-width:22px;text-align:right;flex-shrink:0;opacity:.92;transform-origin:75% 50%;font-variant-numeric:tabular-nums}
.shop-row:disabled{background-color:#aa9d7d;background-image:linear-gradient(#3c281533,#3c281533),var(--paper);border-top-color:#d4c298}
.shop-row:disabled .item-text>strong{color:#63513a;text-shadow:0 1px #dfcfaa88}
.shop-row:disabled .price{color:#8b3e2c;text-shadow:0 1px #d8c6a0}
.shop-row:disabled .item-icon{filter:saturate(.65) brightness(.85)}
.shop-row.locked{background-color:#a09477;background-image:linear-gradient(#3b2c2350,#3b2c2350),var(--paper);border-top-color:#c9b68e}
.shop-row.locked .item-icon{filter:none;opacity:1}
.shop-row.locked .item-text>strong{color:#57452f}
.shop-row.locked .price{color:#736044;text-shadow:0 1px #d8c6a066}
.shop-row.locked .owned-count{opacity:.6}
.shop-group-label{font:12px Georgia,serif;padding:8px 10px 6px;color:#deca9d;background:#22130988;border-top:1px solid #80613b}
.mogging-event{position:relative;z-index:6;display:block;width:96px;height:96px;margin:30px auto;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;touch-action:manipulation;animation:event-bob 1.5s ease-in-out infinite}
.mogging-event>img{display:block;width:100%;height:100%;pointer-events:none;transition:transform .12s ease-out,filter .12s ease-out}
.mogging-event:hover>img{transform:scale(1.07);filter:brightness(1.12)}
.mogging-event:active>img{transform:scale(.95)}
.effect-token{position:absolute;left:23px;bottom:25px;z-index:6;width:44px;height:44px;padding:0;border:1px solid #997948;border-radius:0;background:#211b14 url('./assets/grain.svg');color:#f2d28a;box-shadow:inset 1px 1px #c8af7370,inset -1px -1px #080908;touch-action:manipulation}
.effect-token>img{position:absolute;left:2px;top:0;width:38px;height:38px;pointer-events:none}
.effect-token>strong{position:absolute;right:4px;bottom:5px;font:bold 11px/1 Georgia,serif;text-shadow:0 1px 2px #080705,1px 0 #080705;pointer-events:none}
.effect-track{position:absolute;left:1px;right:1px;bottom:1px;height:2px;background:#54442d;pointer-events:none}
.effect-track>i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#a57e39,#f0d28e);transform-origin:left;transition:transform 250ms linear}
.effect-token:hover,.effect-token:focus-visible{border-color:#e2c17e}
#float-layer{position:absolute;inset:0;pointer-events:none;z-index:5;contain:layout style}
.floating{position:absolute;color:#fff1bf;font:bold 25px Georgia,serif;text-shadow:0 2px 3px #26170a,1px 0 #26170a;animation:float-up .85s ease-out forwards}
.toasts{position:fixed;bottom:13px;left:31%;z-index:50;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:9px 13px;max-width:330px;background:#302014 var(--wood);border:1px solid #a18b63;color:#f0dfb6;font-size:11px;box-shadow:0 3px 8px #0007}
.toast small{display:block;color:#bda57a;font-size:9px;margin-bottom:4px}
/* Small, lasting awards on the open wood; only the X dismisses an award. */
.achievement-notices{position:absolute;bottom:18px;left:12px;right:12px;z-index:40;display:flex;flex-direction:column-reverse;align-items:center;gap:7px;max-height:45%;overflow:auto;pointer-events:none;scrollbar-width:thin;scrollbar-color:#856c43 #211a12}
.achievement-notice{position:relative;display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;column-gap:10px;flex-shrink:0;width:min(100%,380px);min-height:74px;padding:9px 30px 9px 10px;border:1px solid #a88d61;background:#1e1b17 url('./assets/grain.svg');box-shadow:inset 0 0 12px #09070599,0 2px 5px #140c08aa;pointer-events:auto}
.achievement-dismiss-all{grid-column:1/-1;justify-self:stretch;text-align:right;border:0;border-top:1px solid #a3844c55;padding:7px 0 2px;margin-top:7px;background:none;color:#d0b581;font:11px Georgia,serif;text-decoration:underline;text-underline-offset:2px}
.achievement-dismiss-all:hover{color:#fff0c9}
.achievement-notice>img{width:45px;height:49px;flex-shrink:0}
.achievement-notice>div{min-width:0}
.achievement-notice small{display:block;font:bold 12px Arial,sans-serif;color:#c5bba6;margin-bottom:4px}
.achievement-notice strong{display:block;font:bold 20px/1.15 Georgia,serif;color:#efd7a3;text-shadow:0 1px #000;overflow-wrap:anywhere}
.achievement-dismiss,.tooltip-close{position:absolute;right:3px;top:2px;border:0;background:none;color:#bcad91;width:25px;height:25px;padding:0;font:bold 22px/1 Arial,sans-serif}
.achievement-dismiss:hover,.tooltip-close:hover{color:#fff0cc}
/* Hover details share the game's ink, grain and brass, without changing tiles. */
.store-tooltip{position:fixed;z-index:65;width:400px;max-height:calc(100dvh - 24px);overflow:auto;padding:13px 12px 10px;background:#201d18 url('./assets/grain.svg');border:2px ridge #a68d65;box-shadow:inset 0 0 22px #09070577,0 3px 12px #10090599;color:#cbbda3;font:12px/1.45 Arial,sans-serif;scrollbar-width:thin}
.tooltip-heading{display:flex;align-items:center;gap:10px;padding:0 16px 9px 0;border-bottom:1px solid #b6985d55}
.tooltip-heading>img{width:50px;height:56px;object-fit:contain;flex-shrink:0}
.tooltip-heading>div{min-width:0;flex:1}
.tooltip-heading strong{display:block;color:#f2dcaf;font:bold 21px/1.08 Georgia,serif;text-shadow:0 1px #000;overflow-wrap:anywhere}
.tooltip-heading small{display:block;margin-top:6px;font:11px Arial,sans-serif;color:#b5a58c}
.tooltip-price{display:flex;gap:5px;align-items:center;flex-shrink:0;font:bold 13px Georgia,serif;font-variant-numeric:tabular-nums}
.can-afford{color:#b9d59a}.cannot-afford{color:#db9a82}
.store-tooltip ul{list-style:none;margin:9px 0 0;padding:0}
.store-tooltip li{padding:4px 7px}.store-tooltip li:nth-child(odd){background:#d9c09212}
.store-tooltip b{color:#ebd9b5;font-weight:normal}
.tooltip-effect{margin:12px 3px 4px;color:#e6cf9f;font:italic 14px/1.5 Georgia,serif}
@media(max-width:950px) and (min-width:721px){.achievement-notices{left:6px;right:6px}.achievement-notice{grid-template-columns:30px minmax(0,1fr);column-gap:6px;padding-left:6px}.achievement-notice>img{width:30px;height:38px}.achievement-notice small{font-size:10px}.achievement-notice strong{font-size:16px}}
@media(max-width:720px){.achievement-notices{position:fixed;bottom:12px;max-height:40dvh}.store-tooltip{max-height:48dvh}.tooltip-heading strong{font-size:19px}.tooltip-heading{gap:7px}}
dialog{padding:0;width:min(720px,calc(100vw - 24px));max-height:88vh;background:#302116 var(--wood);color:#eadcbe;border:3px ridge #a68b60;box-shadow:0 8px 30px #000b;scrollbar-color:#8b7048 #25180f}
dialog::backdrop{background:#120b07c9}
.cheat-dialog{width:min(360px,calc(100vw - 24px))}
#cheat-form{display:grid;gap:10px}
#cheat-form label{font-size:12px;color:#c2b194}
#cheat-code{width:100%;padding:11px;background:#17100b;border:2px inset #9b7c4d;color:#f1dba7;font:17px Consolas,monospace}
#cheat-code:focus-visible{outline:1px solid #ead39b;outline-offset:2px}
#cheat-status{min-height:1em;margin:0;font-size:12px;color:#e1aa86}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:#1c120b88;border-bottom:2px groove #84623a;position:sticky;top:0;z-index:5}
.panel-header h2{font:bold 23px Georgia,serif;margin:0;color:#f1dba7;text-shadow:0 2px #211209}
.close-button{border:1px solid #9c8055;background:#3b2717;color:#f1dba7;width:29px;height:29px;font-size:22px;line-height:20px}
.close-button:hover{background:#674829}
#panel-body{padding:15px 18px}
.panel-intro{font-size:12px;line-height:1.6;color:#c2b194;margin:0 0 15px}
.wojak .portrait-art.skin-dewy{--skin-filter:saturate(1.03)}
.wojak .portrait-art.skin-gold{--skin-filter:sepia(.18) saturate(1.1)}
.wojak .portrait-art.skin-fried{--skin-filter:contrast(1.15) saturate(1.1)}
.wojak .portrait-art.skin-wire{--skin-filter:contrast(1.015)}
.wojak .portrait-art.skin-cosmic,.wojak .portrait-art.skin-ascended{--skin-filter:drop-shadow(0 0 6px #b9a0cb)}
.wojak .portrait-art.skin-grass{--skin-filter:saturate(.85)}
.wojak .portrait-art.skin-holo{--skin-filter:drop-shadow(0 0 6px #9cb7cb)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.stat{border-bottom:1px solid #7a593366;padding:10px 6px}
.stat>span{font-size:9px;color:#b9a381}
.stat>strong{display:block;font:bold 24px Georgia,serif;margin-top:4px;color:#f1d99e}
.section-title{font:bold 17px Georgia,serif;color:#e4c68b;margin:21px 0 10px}
.primary-button,.secondary-button{min-height:35px;padding:8px 13px;background:linear-gradient(#775b36,#4e351f);color:#f6dfad;border:1px solid #b69a70;box-shadow:inset 0 1px #f5d99a44,0 2px 3px #0005;font:bold 11px Georgia,serif;text-shadow:0 1px #2c1a0c}
.secondary-button{background:#3a291a;border-color:#8f7148;color:#d3bd96}
.primary-button:hover,.secondary-button:hover{filter:brightness(1.15)}
.primary-button:disabled,.secondary-button:disabled{background:#2e2117;border-color:#5c482f;color:#857251}
.button-row{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #73513266;font-size:12px;color:#e0cbab}
.settings-row small{display:block;color:#b29b79;font-size:10px;margin-top:4px}
.settings-row input{accent-color:#b18a51;width:17px;height:17px}
.danger{color:#e3a58c}
.page-hidden *{animation-play-state:paused!important}
@keyframes float-up{to{transform:translateY(-80px);opacity:0}}
@keyframes event-bob{50%{transform:translateY(-4px)}}
@keyframes appear{from{opacity:0;transform:translateY(3px)}}
@media(min-width:1500px){.layout{grid-template-columns:30% minmax(300px,1fr) 385px}.wallet{font-size:53px}.shop-row{min-height:73px}.item-icon{width:62px;height:62px}.item-text>strong{font-size:20px}}
@media(max-width:950px){.layout{grid-template-columns:30% minmax(190px,1fr) 280px}.click-column{padding-top:23px}.item-text>strong{font-size:15px}.owned-count{font-size:31px}.item-icon{width:45px;height:50px}.shop-row{gap:5px;min-height:63px}.store-title{font-size:27px}.quick-upgrade{width:42px;height:42px}}


/* Transformation and click feedback. */
@keyframes tap-response{
 0%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.2,.75,.35,1)}
 24%{transform:translateY(1px) scale(.975,.965);animation-timing-function:cubic-bezier(.16,.85,.35,1)}
 67%{transform:translateY(-.5px) scale(1.01,1.014);animation-timing-function:ease-out}
 100%{transform:translateY(0) scale(1)}
}
@keyframes tap-response-alt{
 0%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.2,.75,.35,1)}
 24%{transform:translateY(1px) scale(.975,.965);animation-timing-function:cubic-bezier(.16,.85,.35,1)}
 67%{transform:translateY(-.5px) scale(1.01,1.014);animation-timing-function:ease-out}
 100%{transform:translateY(0) scale(1)}
}

.wojak.evolving .portrait-art{animation:evolve .85s ease-out}
@keyframes evolve{0%{filter:drop-shadow(0 0 22px #fce4a3);transform:scale(.95)}55%{filter:drop-shadow(0 0 14px #f8dc94);transform:scale(1.025)}100%{transform:scale(1)}}
.floating{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;transform:translateX(-50%);font:22px Georgia,serif}
.floating strong{font:inherit;font-weight:bold;line-height:1}
.floating .tiny-pill{width:17px;height:9px;border-color:#c4a16e;box-shadow:none;transform:rotate(-18deg)}
.pill-particle{position:absolute;width:15px;height:8px;border-radius:7px;background:linear-gradient(90deg,#161310 49%,#39302a 50%);border:1px solid #bea16f;animation:pile-burst .7s ease-out forwards}
@keyframes pile-burst{0%{transform:translate(0,0) rotate(-25deg);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
@keyframes float-up{from{transform:translate(-50%,0)}to{transform:translate(-50%,-80px);opacity:0}}
@media(max-width:720px){.floating{font-size:20px}}

/* Timed opportunities and the player name. */
.event-space{margin:24px auto;text-align:center}
.character-name{font:14px Georgia,serif;color:#e7c98a;margin:4px 0;text-shadow:0 1px 2px #271709}

/* Retained appearance layers stay inside the character motion wrapper. */
.portrait-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}


/* Temporary character placeholders: text only, no face assets or silhouettes. */
.wojak .portrait-art{display:flex;align-items:center;justify-content:center}
.wojak .character-placeholder{pointer-events:auto}
.character-placeholder{--placeholder-accent:#a79b80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;width:72%;max-width:235px;height:72%;min-height:150px;max-height:310px;background:#302f2a;border:1px solid #777364;border-bottom:2px solid var(--placeholder-accent);color:#d3ccba;box-shadow:inset 0 0 24px #15151235}
.placeholder-label{font:10px Arial,sans-serif;letter-spacing:1.5px;color:#b5ae9d}
.placeholder-code{font:500 44px/1 Consolas,monospace}

.pile-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;contain:strict}

/* Ink-and-brass sunrays: two original vector plates, moving independently.
   No interactive frames, per-ray DOM, or per-frame JavaScript is involved. */
.portrait-backdrop{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;contain:strict}
.portrait-rays{position:absolute;left:50%;top:60%;width:min(210%,1000px);aspect-ratio:1;background:url('./assets/engraved-rays.svg') center/contain no-repeat;opacity:.32;transform:translate(-50%,-50%);animation:engraved-turn 110s linear infinite;transition:opacity 900ms ease;pointer-events:none}
.portrait-rays-fine{width:min(235%,1120px);opacity:.13;animation:engraved-return 173s linear infinite}
.portrait-backdrop::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#e8be61a6,#ad713a40 51%,#3c251b66);opacity:0;transition:opacity 900ms ease;pointer-events:none}
.golden-active .portrait-rays{opacity:.76}
.golden-active .portrait-rays-fine{opacity:.3}
.golden-active .portrait-backdrop::after{opacity:1}
@keyframes engraved-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes engraved-return{from{transform:translate(-50%,-50%) rotate(13deg)}to{transform:translate(-50%,-50%) rotate(-347deg)}}

/* Loading completes after saved state and the image cache are ready. */
body.loading .masthead,body.loading .layout{visibility:hidden;pointer-events:none}
.game-loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#241a12 var(--wood);color:#ddc69c;font:18px Georgia,serif;text-shadow:0 1px #120b06}
/* The menu is built into the wooden top edge, not a separate ornament. */
.game-menu{display:flex;align-items:flex-end;justify-content:center;gap:3px;min-height:41px;margin:0;padding:7px 8px 0;background:#130c0740;border-bottom:2px ridge #88613b}
.game-menu button{position:relative;min-height:31px;padding:6px 13px 7px;border:0;border-top:1px solid #b78e5780;border-radius:2px 2px 0 0;background:#412a1c var(--wood);background-size:auto 180px;color:#e3cda9;font:bold 14px/1.1 Georgia,serif;text-shadow:0 1px #1a0d06;box-shadow:inset 1px 0 #a77a483d,inset -1px 0 #120a0780;white-space:nowrap}
.game-menu button:nth-child(2){background-position:0 -53px}
.game-menu button:nth-child(3){background-position:0 -106px}
.game-menu button:hover{color:#ecd8b5;background-image:linear-gradient(#ffe2a906,#ffe2a906),var(--wood)}
.game-menu button:active,.game-menu button.current{color:#fff0cd;text-shadow:0 1px #1a0d06,0 0 5px #e7bd715c}
.game-menu button:focus-visible{outline-offset:-3px}
@media(min-width:721px) and (max-width:950px){.game-menu{padding-inline:4px;gap:2px}.game-menu button{font-size:12px;padding-inline:8px}}
.name-tag{min-height:35px;display:flex;align-items:center;justify-content:center;margin:3px 0}
.character-name{display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;margin:0;padding:3px 2px;border:0;background:none;color:#efd6a0;font:bold clamp(20px,2vw,27px)/1.15 Georgia,serif;text-shadow:0 1px 2px #130e08}
.character-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline dotted #c9ad6d70;text-underline-offset:5px;text-decoration-thickness:1px}
.character-name>svg{flex-shrink:0;opacity:.65}
.character-name:hover{color:#fff1cb}.character-name:hover>svg{opacity:1}
.name-editor{width:min(100%,250px);min-height:33px;padding:2px 5px;border:0;border-bottom:1px solid #d9bb7e;background:#13212bbf;color:#fff0c9;font:bold 23px Georgia,serif;text-align:center}
.production-line{font-size:13px}
.effect-token{top:8px;left:12px;bottom:auto;width:38px;height:38px}
.effect-token>img{width:32px;height:32px}.effect-token>strong{font-size:10px;right:3px}
/* Small, anchored details for the timer and achievement badges. */
.store-tooltip[data-kind=buff]{padding:7px 6px;border-width:2px;font-size:11px;overflow:visible}
.buff-detail{display:flex;align-items:center;gap:5px;padding-right:12px}
.buff-detail>img{width:23px;height:27px;flex-shrink:0}
.buff-detail strong{display:block;color:#f1d59b;font:bold 12px Georgia,serif;white-space:normal}
.buff-detail small{display:block;margin-top:3px;font-size:10px;color:#c7b897}
.store-tooltip[data-kind=buff] .tooltip-close{font-size:16px;width:16px;height:16px;right:1px;top:0}
.store-tooltip[data-kind=achievement]{padding:8px;border-width:2px;font-size:11px}
.store-tooltip[data-kind=achievement] .tooltip-heading{gap:7px;padding:0 13px 6px 0}
.store-tooltip[data-kind=achievement] .tooltip-heading>img{width:29px;height:33px}
.store-tooltip[data-kind=achievement] .tooltip-heading strong{font-size:16px}
.store-tooltip[data-kind=achievement] .tooltip-heading small{font-size:10px;margin-top:3px}
.store-tooltip[data-kind=achievement] .tooltip-effect{font:12px/1.4 Georgia,serif;margin:7px 0 0}
.store-tooltip[data-kind=achievement] .tooltip-close{font-size:18px;width:19px;height:19px}
dialog[data-panel=achievements]{width:min(510px,calc(100vw - 24px))}
.achievement-count{font:12px Georgia,serif;color:#c0aa80;border-bottom:1px solid #9c774755;padding-bottom:10px}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,64px);gap:8px;padding:12px 0}
.achievement-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border:2px ridge #8e7348;background:#201b14 url('./assets/grain.svg');cursor:help}
.achievement-tile>img{display:block;width:43px;height:47px}
.achievement-tile>strong{font:12px Georgia,serif;color:#d7c195}
.achievement-tile.locked{opacity:.5;filter:grayscale(1)}
.achievement-tile.earned{border-color:#ddba70;background-color:#49371e}
.achievement-tile:hover,.achievement-tile:focus-visible{opacity:1;border-color:#e4c47f}
.stat-grid{gap:3px 13px}.stat{padding:10px 1px}.stat>span{font-size:11px;color:#c4af8c}.stat>strong{font-size:22px;overflow-wrap:anywhere}
.settings-row{padding:15px 0;gap:16px}.settings-row strong{font:bold 17px Georgia,serif;color:#f1d6a3}.settings-row small{font-size:12px;line-height:1.4;color:#c6b290;margin-top:5px}
.primary-button,.secondary-button{font-size:13px}
/* Reduced motion keeps the cadence, but reduces distance, speed and density. */
.reduced-motion .wojak:hover .portrait-art{transform:scale(1.004)}
.reduced-motion .wojak.clicked .tap-motion{animation-name:tap-gentle}
.reduced-motion .wojak.clicked[data-tap-alternate="1"] .tap-motion{animation-name:tap-gentle-alt}
@keyframes tap-gentle{0%,100%{transform:scale(1)}30%{transform:scale(.992,.989)}70%{transform:scale(1.004)}}
@keyframes tap-gentle-alt{0%,100%{transform:scale(1)}30%{transform:scale(.992,.989)}70%{transform:scale(1.004)}}
.floating.gentle-motion{animation:float-gentle .6s ease-out forwards}
@keyframes float-gentle{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-18px);opacity:0}}
.pill-particle.gentle-motion{animation-duration:.45s}
.reduced-motion .portrait-rays{animation-duration:240s;opacity:.22}
.reduced-motion .portrait-rays-fine{animation-duration:360s;opacity:.09}
.reduced-motion.golden-active .portrait-rays,.reduced-motion .golden-active .portrait-rays{opacity:.45}
.reduced-motion .mogging-event{animation-duration:3s;animation-name:event-gentle}
@keyframes event-gentle{50%{transform:translateY(-1px)}}
.reduced-motion .wojak.evolving .portrait-art{animation:evolve-gentle .65s ease-out}
@keyframes evolve-gentle{0%{opacity:.8}100%{opacity:1}}
@media(max-width:720px){
 .game-menu button{font-size:14px;min-height:34px;padding:7px 13px}
 .name-tag{min-height:30px}.character-name{font-size:23px}
 .panel-header{padding:11px 12px}.panel-header h2{font-size:21px}#panel-body{padding:13px}
 .store-tooltip[data-kind=buff],.store-tooltip[data-kind=achievement]{max-height:calc(100dvh - 24px)}
 .settings-row strong{font-size:16px}.settings-row small{font-size:11px}.stat>strong{font-size:20px}
}

@media(max-width:720px){
 .layout{height:auto;min-height:calc(100dvh - 28px);grid-template-columns:1fr;grid-template-rows:430px auto auto;overflow:visible}
 .click-column{grid-column:1;grid-row:1;min-height:430px;padding:20px 16px 18px;border-right-width:6px}
 .click-column::before{border-width:20px;border-image-width:20px}
 .middle-column{grid-column:1;grid-row:2;min-height:0;overflow:visible;border-right:0}
 .shop{grid-column:1;grid-row:3;border-left:0;border-top:6px ridge #987241;min-height:550px}
 .shop-list{overflow:visible}.store-title{padding:9px 0}.shop-row{min-height:67px;padding-left:10px;padding-right:15px}
 .item-icon{width:54px;height:56px}.item-text>strong{font-size:18px}.owned-count{font-size:34px}.quick-upgrade{width:44px;height:44px}
 .wallet{font-size:31px}.balance-label{font-size:14px}.production-line{font-size:12px}
 .wojak{padding:0;min-height:190px}.wojak .portrait-art{max-height:260px}.wojak .character-placeholder{height:180px;min-height:0}
 .toasts{left:8px;right:8px;bottom:10px}.toast{max-width:none}
}
@media(max-width:390px){.wallet{font-size:28px}}
.quick-upgrade:active:not(:disabled){transform:translateY(1px)}

/* In-game panels share the open middle column; only confirmations are modal. */
.middle-column{display:flex;flex-direction:column}
.game-menu,.event-space{flex-shrink:0}
.middle-column.panel-open{background:#181715 url('./assets/grain.svg');box-shadow:none}
.game-panel{display:flex;flex:1;min-height:0;min-width:0;margin:0;background:none;border:0}
.game-panel>#panel-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.game-panel .panel-header{flex-shrink:0;position:static;padding:12px 18px;background:none;border-bottom:1px solid #a58a5b3b}
.game-panel .panel-header h2{font-size:20px;color:#e8dfce;outline:none}
.game-panel .close-button{width:25px;height:25px;border:0;background:none;color:#c4b9a4}
.game-panel .close-button:hover{color:#fff;background:none}
.game-panel #panel-body{flex:1;min-height:0;overflow:auto;padding:14px 18px 18px;scrollbar-width:thin;scrollbar-color:#776e5f #181715}
.game-panel .settings-row{padding:14px 0;flex-wrap:wrap}
.game-panel .settings-row strong{font-size:16px}
.game-panel .settings-row small{font-size:11px}
.game-panel .stat-grid{gap:0 10px}
.game-panel .stat>span{font-size:10px}
.game-panel .stat>strong{font-size:20px}
.middle-column.panel-open .achievement-notices{position:static;flex-shrink:0;padding:0 12px 12px;max-height:25%;overflow:auto}
.middle-column.panel-open .event-space{margin:4px auto 10px}
.middle-column.panel-open .mogging-event{width:64px;height:64px;margin:0}
/* A purchase nudges its row and owned number, never its neighbours. */
.shop-row.purchased{animation:purchase-press 130ms ease-out}
.shop-row.purchased[data-purchase-alternate="1"]{animation-name:purchase-press-alt}
.owned-count.count-bump{animation:owned-bump 220ms ease-out}
.owned-count.count-bump[data-purchase-alternate="1"]{animation-name:owned-bump-alt}
@keyframes purchase-press{0%,100%{transform:translateY(0)}30%{transform:translateY(1px)}}
@keyframes purchase-press-alt{0%,100%{transform:translateY(0)}30%{transform:translateY(1px)}}
@keyframes owned-bump{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}
@keyframes owned-bump-alt{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}
.reduced-motion .owned-count.count-bump{animation-name:owned-gentle}
.reduced-motion .owned-count.count-bump[data-purchase-alternate="1"]{animation-name:owned-gentle-alt}
@keyframes owned-gentle{0%,100%{transform:scale(1)}35%{transform:scale(1.035)}}
@keyframes owned-gentle-alt{0%,100%{transform:scale(1)}35%{transform:scale(1.035)}}
@media(max-width:950px) and (min-width:721px){.game-panel .stat-grid{grid-template-columns:1fr}}
@media(max-width:720px){.game-panel{flex:none;max-height:65dvh}.middle-column.panel-open .achievement-notices{max-height:35dvh}}

/* Saving comes first; settings use explicit, idempotent On/Off buttons. */
.save-controls{padding-bottom:10px;border-bottom:1px solid #a58a5b3b}
.save-controls .button-row{margin:0;gap:7px}
.save-status{display:block;min-height:15px;margin-top:7px;color:#c7bca8;font:11px/15px Arial,sans-serif}
.option-buttons{display:flex;gap:4px;flex-shrink:0}
.option-buttons button{min-width:44px;min-height:32px;padding:5px 9px;border:1px solid #75634b;background:#28221b;color:#afa38e;font:bold 12px Georgia,serif}
.option-buttons button[aria-pressed=true]{border-color:#b39b72;background:#493922;color:#f0e5ce}
.option-buttons button:hover{border-color:#bda780;color:#f5ead4}
.option-buttons button:active{transform:translateY(1px)}
.reset-controls{margin-top:22px}

/* A record of actual purchases, using the same item details as the store. */
.purchased-upgrades{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 14px}
.purchased-upgrade{display:block;width:44px;height:46px;padding:2px;cursor:help}
.purchased-upgrade img{width:100%;height:100%;object-fit:contain}
.purchased-upgrades>p{font-size:12px;color:var(--muted);margin:0}
.section-title>small{font:12px Arial,sans-serif;color:var(--muted);margin-left:5px}
.stat>span{text-transform:none;letter-spacing:0}