@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --ink: #241426; --cream: #fff1bf; --gold: #f7bd4a; --sun: #ffdb65;
  --sky1: #df755f; --sky2: #f5b66e; --wine: #762f45; --plum: #46233e;
  --wood1: #6f3d2c; --wood2: #9f6040; --stone1: #655060; --stone2: #8c6d6b;
  --green: #54734d; --red: #b83e4b;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--cream); background: #170f1c;
  font-family: "Press Start 2P", ui-monospace, monospace;
  image-rendering: pixelated; overflow-x: hidden;
}
button { font: inherit; }
#game { min-height: 100vh; display: grid; grid-template-rows: auto minmax(430px, 1fr) auto auto; background: linear-gradient(#2b1930, #170f1c); }
.masthead { position: relative; z-index: 5; text-align: center; padding: 18px 16px 12px; background: #241426; border-bottom: 6px solid #0f0a13; box-shadow: 0 6px 0 #4f2947; }
.eyebrow { color: #d69268; font-size: clamp(7px, 1vw, 10px); margin: 0 0 9px; letter-spacing: 1px; text-transform: uppercase; }
h1 { margin: 0; color: var(--gold); font-size: clamp(22px, 5vw, 48px); line-height: 1.15; text-shadow: 4px 4px 0 var(--wine), 8px 8px 0 #100b13; }
h1 span { color: var(--cream); font-size: .54em; }
.instruction { margin: 12px 0 0; color: #e8cda2; font-size: clamp(8px, 1.2vw, 11px); line-height: 1.6; }
.scene { position: relative; overflow: hidden; min-height: 430px; background: #3b83dd url('assets/images/marketplace.png') center center / cover no-repeat; isolation: isolate; }
.scene::after { content:""; position:absolute; inset:0; z-index:20; pointer-events:none; opacity:.15; background-image: repeating-linear-gradient(0deg,transparent 0 3px,#160f1c 3px 4px); mix-blend-mode:multiply; }
.sun { position:absolute; width:82px; height:82px; left:12%; top:10%; background:var(--sun); box-shadow: 0 0 0 8px #f4a75f, 0 0 0 14px rgba(246,169,91,.28); }
.cloud { position:absolute; height:16px; background:#ffd99b; box-shadow:16px -8px #ffd99b,32px 0 #ffd99b,48px 0 #ffd99b; opacity:.72; animation: drift 25s linear infinite; }
.cloud-a { top:16%; left:25%; } .cloud-b { top:8%; left:72%; transform:scale(.7); animation-duration:34s; }
@keyframes drift { 50% { translate: 45px 0; } }
.hills { position:absolute; left:0; right:0; bottom:33%; height:31%; background:#936252; clip-path:polygon(0 68%,12% 20%,25% 72%,39% 6%,55% 68%,72% 17%,88% 60%,100% 32%,100% 100%,0 100%); opacity:.55; }
.building { position:absolute; bottom:19%; width:27%; height:48%; background:#b87856; border:6px solid #4f3040; z-index:2; box-shadow: inset -12px 0 #915447; }
.building-left { left:-2%; } .building-right { right:-2%; background:#a86a56; transform:scaleX(-1); }
.roof { position:absolute; left:-8%; top:-20%; width:116%; height:25%; background:#642d3b; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); border-bottom:8px solid #3c2333; }
.window { position:absolute; width:42px; height:56px; background:#34273b; top:15%; left:20%; border:7px solid #714537; box-shadow:inset 18px 0 #564055, inset 0 24px #765365; }
.awning { position:absolute; left:7%; right:7%; bottom:37%; height:34px; background:repeating-linear-gradient(90deg,#f0c47b 0 22px,#923e4a 22px 44px); border:5px solid #4c2d37; clip-path:polygon(0 0,100% 0,94% 100%,6% 100%); }
.wares { position:absolute; left:12%; right:12%; bottom:17%; display:flex; gap:8%; align-items:end; }
.wares i { width:19%; height:22px; background:#7a924e; border:4px solid #45333d; } .wares i:nth-child(2){height:34px;background:#cf714a}.wares i:nth-child(3){height:28px;background:#d6a14c}.wares i:nth-child(4){background:#664d74}
.barrels { position:absolute; bottom:11%; left:17%; display:flex; gap:8px; }.barrels i{width:34px;height:45px;border:5px solid #4c2d37;background:#98603f;box-shadow:inset 0 9px #c5814f,inset 0 -9px #6e4337}
.bunting { position:absolute; left:13%; right:13%; top:8%; height:40px; border-top:4px solid #56343f; z-index:4; display:flex; justify-content:space-around; transform:rotate(-2deg); }
.bunting i { width:22px; height:28px; background:#7e3a4a; clip-path:polygon(0 0,100% 0,50% 100%); }.bunting i:nth-child(2n){background:#e0aa55}.bunting i:nth-child(3n){background:#527254}
.cobbles { position:absolute; inset:auto 0 0; height:28%; z-index:3; background-color:#66535b; background-image:linear-gradient(135deg,#7d6767 25%,transparent 25%),linear-gradient(225deg,#7d6767 25%,transparent 25%),linear-gradient(45deg,#544451 25%,transparent 25%),linear-gradient(315deg,#544451 25%,#65535b 25%); background-position:16px 0,16px 0,0 0,0 0;background-size:32px 22px; border-top:8px solid #4d3b49; }
.crowd { position:absolute; bottom:22%; z-index:5; display:flex; gap:13px; }.crowd-left{left:20%}.crowd-right{right:18%}.crowd i{display:block;width:18px;height:42px;background:#4b5962;border:4px solid #342433;box-shadow:0 -13px 0 -3px #b97658}.crowd i:nth-child(2){background:#7d3e4c;transform:translateY(6px)}.crowd i:nth-child(3){background:#647448;}
.market-people{position:absolute;inset:0;z-index:6;pointer-events:none}.market-people>.shopper{position:absolute;bottom:14%;width:25px;height:48px;border:4px solid #332433;background:#557263;box-shadow:inset -6px 0 #3d504d;animation:market-mill 2.8s steps(2) infinite}.market-people>.shopper::before{content:"";position:absolute;left:3px;top:-19px;width:15px;height:17px;background:#bd7b5d;border:4px solid #332433;box-shadow:inset 5px 0 #e1a073}.market-people>.shopper::after{content:"";position:absolute;left:-5px;top:-24px;width:23px;height:8px;background:#714052;border:4px solid #332433}.market-people>.shopper i{position:absolute;right:-15px;bottom:3px;width:18px;height:17px;border:4px solid #4b2f36;background:#c4944e;box-shadow:inset 0 5px #e2bc6a}.shopper-a{left:8%;transform:scale(.82)}.shopper-b{left:15%;background:#81505a!important;animation-delay:.4s!important}.shopper-c{left:29%;transform:scale(.72);animation-delay:1.1s!important}.shopper-d{left:38%;background:#6d537a!important;transform:scale(.88);animation-delay:.7s!important}.shopper-e{right:37%;background:#8a6047!important;transform:scale(.75);animation-delay:1.4s!important}.shopper-f{right:27%;background:#465f72!important;animation-delay:.2s!important}.shopper-g{right:13%;background:#785044!important;transform:scale(.84);animation-delay:1.8s!important}.shopper-h{right:6%;background:#667848!important;transform:scale(.7);animation-delay:.9s!important}@keyframes market-mill{50%{translate:2px -2px}}
.sun,.cloud,.hills,.building,.bunting,.crowd,.market-people,.chicken,.cobbles{display:none}
.chicken { position:absolute; z-index:7; left:31%; bottom:15%; width:22px; height:18px; background:#ead6ad; border:4px solid #49333c; animation:peck 1.8s steps(2) infinite; }.chicken::before{content:"";position:absolute;right:-9px;top:-9px;width:11px;height:12px;background:#ead6ad;border:4px solid #49333c}.chicken::after{content:"";position:absolute;right:-13px;top:-7px;border-left:7px solid #d77d43;border-top:4px solid transparent;border-bottom:4px solid transparent}@keyframes peck{50%{transform:rotate(8deg) translateY(3px)}}
.pole-rig { position:absolute; z-index:9; bottom:8%; left:50%; width:96px; height:83%; margin-left:-48px; transform-origin:50% 100%; transition:filter .15s; }
.pole-rig.wobble { animation:wobble .62s cubic-bezier(.36,.07,.19,.97); }
#game[data-mood="swear"] .pole-rig.wobble { animation-duration:.78s; }
#game[data-mood="rebuke"] .pole-rig.wobble { animation:rage .82s steps(7); filter:drop-shadow(0 0 8px #ef5d42); }
@keyframes wobble {0%,100%{transform:rotate(0)}15%{transform:rotate(-3deg)}32%{transform:rotate(4deg)}50%{transform:rotate(-2.4deg)}68%{transform:rotate(1.5deg)}84%{transform:rotate(-.7deg)}}
@keyframes rage {0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)}30%{transform:rotate(7deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
.pole { position:absolute; left:40px; top:106px; bottom:0; width:16px; background:linear-gradient(90deg,#3d251c 0 22%,#9c5a2c 22% 54%,#c47a3e 54% 68%,#6b351f 68%); border:3px solid #241713; box-shadow:3px 0 0 rgba(22,13,15,.45); }.pole i{position:absolute;left:1px;width:8px;height:3px;background:#4d291c}.pole i:nth-child(1){top:25%}.pole i:nth-child(2){top:52%}.pole i:nth-child(3){top:77%}
.monk-sprite{position:absolute;z-index:3;left:3px;top:-2px;width:90px;height:auto;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 rgba(25,14,18,.5));animation:breathe 2.4s steps(2) infinite}
.monk { position:absolute; left:9px; top:0; width:66px; height:78px; z-index:3; transform-origin:50% 90%; animation:breathe 2.4s steps(2) infinite; }.halo{position:absolute;left:13px;top:-11px;width:40px;height:12px;border:5px solid #f4c74c;box-shadow:0 0 7px #f4c74c}.hood{position:absolute;left:14px;top:4px;width:39px;height:36px;background:#5b3042;border:5px solid #2f1f2c;clip-path:polygon(20% 0,80% 0,100% 35%,90% 100%,10% 100%,0 35%)}.face{position:absolute;left:7px;top:9px;width:17px;height:15px;background:#d5966c;border:4px solid #39242f;box-shadow:inset 5px 0 #efbb84}.body{position:absolute;left:10px;top:34px;width:47px;height:39px;background:#6b3848;border:5px solid #2f1f2c;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.rope{position:absolute;left:4px;right:4px;top:16px;height:5px;background:#d6a755}.arm{position:absolute;top:39px;width:12px;height:30px;background:#653443;border:4px solid #2f1f2c}.arm-left{left:2px;transform:rotate(9deg)}.arm-right{right:2px;transform:rotate(-9deg)}.feet{position:absolute;left:14px;bottom:0;width:14px;height:7px;background:#2e202b;box-shadow:24px 0 #2e202b}
@keyframes breathe{50%{transform:translateY(-2px)}}
#game[data-mood="rebuke"] .monk-sprite { animation:monk-rage .18s steps(2) 5; } @keyframes monk-rage{50%{transform:translateY(-5px) rotate(4deg)}}
.pole-hitbox { position:absolute; z-index:15; left:calc(50% - 58px); bottom:10%; width:116px; height:65%; border:0; background:transparent; cursor:pointer; color:transparent; touch-action:manipulation; }.pole-hitbox:focus-visible{outline:5px dashed var(--cream);outline-offset:5px}.pole-hitbox span{position:absolute;bottom:-3px;left:50%;translate:-50% 0;color:var(--cream);white-space:nowrap;font-size:8px;background:#4d293c;border:4px solid #241426;padding:8px 10px;box-shadow:4px 4px 0 #1b1120}.pole-hitbox:hover span,.pole-hitbox:focus-visible span{background:#783649;translate:-50% -2px}.pole-hitbox:active span{translate:-50% 2px;box-shadow:2px 2px 0 #1b1120}
.speech { position:absolute; z-index:12; left:calc(50% + 76px); top:16%; width:min(360px,31vw); min-height:100px; padding:17px 17px 14px; color:#332231; background:var(--cream); border:6px solid #332231; box-shadow:7px 7px 0 rgba(44,28,39,.55); transform-origin:bottom left; transition:transform .18s,background .18s; }.speech::before{content:"";position:absolute;left:-25px;bottom:16px;border-right:22px solid #332231;border-top:16px solid transparent;border-bottom:16px solid transparent}.speech::after{content:"";position:absolute;left:-14px;bottom:21px;border-right:16px solid var(--cream);border-top:11px solid transparent;border-bottom:11px solid transparent}.speech.pop{animation:pop .3s steps(3)}@keyframes pop{0%{transform:scale(.8)}65%{transform:scale(1.06)}100%{transform:scale(1)}}
#game[data-mood="swear"] .speech{background:#ffd274}#game[data-mood="swear"] .speech::after{border-right-color:#ffd274}#game[data-mood="rebuke"] .speech{background:#e95a4a;color:#fff4cb}#game[data-mood="rebuke"] .speech::after{border-right-color:#e95a4a}
.speech p{font-size:clamp(8px,1vw,11px);line-height:1.75;margin:0 0 10px}.speech span{font-size:7px;color:#79414a;line-height:1.5}#game[data-mood="rebuke"] .speech span{color:#391c28}
.dust{position:absolute;z-index:14;left:50%;bottom:13%;width:8px;height:8px;pointer-events:none}.dust.burst{animation:dust 650ms steps(5)}@keyframes dust{0%{box-shadow:0 0 #dfb273}35%{box-shadow:-35px -9px #dfb273,25px -16px #dfb273,-18px -27px #b88460,42px -4px #b88460}100%{box-shadow:-62px -16px transparent,51px -29px transparent,-38px -50px transparent,73px -9px transparent}}
.hud { display:flex; align-items:center; justify-content:center; gap:clamp(15px,4vw,55px); padding:15px 18px; background:#2b1930; border-top:6px solid #130c17; color:#e8cda2; font-size:8px; min-height:74px; }.hud p{margin:0;white-space:nowrap}.meter{display:flex;gap:10px;align-items:center}.meter-track{width:120px;height:18px;border:4px solid #140d18;background:#493244;padding:2px}.meter-track i{display:block;width:100%;height:100%;background:var(--green);transition:width .16s,background .16s}.music-controls{display:flex;align-items:center;gap:9px}.music-controls span{min-width:66px;text-align:center;color:#d6a86d;font-size:7px;white-space:nowrap}.pixel-button{color:var(--cream);background:#563047;border:4px solid #130c17;padding:9px 10px;box-shadow:4px 4px 0 #130c17;cursor:pointer;font-size:8px}.pixel-button:hover{background:#733b52}.pixel-button:active{translate:2px 2px;box-shadow:2px 2px 0 #130c17}.track-next{padding-inline:8px;font-size:7px}
.prototype-note{text-align:center;margin:0;padding:9px 12px 12px;background:#170f1c;color:#997f86;font-size:6px;line-height:1.8}.prototype-note a{color:#d6a86d;text-underline-offset:3px}.prototype-note a:hover{color:var(--cream)}
@media (max-width:760px){#game{grid-template-rows:auto minmax(510px,1fr) auto auto}.scene{min-height:510px}.building{width:38%;height:36%;bottom:20%}.speech{left:5%;top:8%;width:90%;min-height:92px}.speech::before,.speech::after{display:none}.pole-rig{height:57%;top:34%;bottom:auto}.pole-hitbox{height:55%;bottom:10%}.bunting{top:31%}.sun{top:25%}.cloud{top:32%}.crowd-left{left:8%}.crowd-right{right:7%}.hud{flex-wrap:wrap;gap:12px 20px}.meter-track{width:90px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}