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

:root { --ink:#f7f7f7; --dark:#1d271b; --grass:#57a82f; --dirt:#76512f; --gold:#ffd83d; }
* { box-sizing:border-box; }
body {
  min-height:100vh; margin:0; color:var(--ink); font-family:'Roboto Mono',monospace;
  background:#78b8df; overflow-x:hidden;
}
.world { position:fixed; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(#78b8df 0 57%,#609c3d 57% 60%,#3e762e 60%); image-rendering:pixelated; }
.world::before { content:""; position:absolute; inset:auto 0 0; height:40%; background-color:#805837; background-image:linear-gradient(90deg,rgba(58,37,23,.25) 2px,transparent 2px),linear-gradient(rgba(49,31,17,.22) 2px,transparent 2px); background-size:48px 48px; border-top:16px solid #5c9c3a; }
.world::after { content:""; position:absolute; left:0; right:0; bottom:31%; height:90px; opacity:.3; background:linear-gradient(135deg,transparent 0 38%,#315d27 38% 55%,transparent 55%) 0 0/240px 100%; }
.sun { position:absolute; top:7%; right:8%; width:74px; height:74px; background:#fff6b0; box-shadow:0 0 35px #fff8b9; }
.mob,.mob i { position:absolute; display:block; }
.mob { filter:drop-shadow(8px 9px 0 rgba(0,0,0,.25)); }
.steve { left:4%; width:84px; height:190px; }.steve .head { left:15px; width:58px; height:58px; background:linear-gradient(#493326 0 20%,transparent 20%),linear-gradient(90deg,#b87855 0 22%,#e0a47b 22% 78%,#a9684b 78%); border:5px solid #493326; box-shadow:inset 10px -10px #8d5542; }.steve .head::after { content:""; position:absolute; left:9px; top:23px; width:9px; height:7px; background:#fff; box-shadow:29px 0 #fff,3px 0 #416b8a,32px 0 #416b8a,12px 18px #4e2d20,21px 18px #4e2d20; }
.steve .body { left:14px; top:58px; width:60px; height:67px; background:#35a3a1; box-shadow:inset 10px 0 #237d80,inset -10px 0 #57c0b8; }.steve .arm { top:60px; width:16px; height:75px; background:linear-gradient(#35a3a1 0 20%,#c88761 20%); }.steve .arm.left{left:-2px}.steve .arm.right{right:-2px}.steve .leg{top:125px;width:28px;height:65px;background:#314e9d;box-shadow:inset 8px 0 #283b76}.steve .leg.left{left:14px}.steve .leg.right{right:10px}
.creeper { right:7%; width:100px; height:160px; }.creeper .head { left:14px; width:72px; height:72px; background:#59a947; box-shadow:inset 10px 8px #72c75a,inset -9px -8px #3a7e37; }.creeper .head::after { content:""; position:absolute; left:13px; top:20px; width:15px; height:18px; background:#17231a; box-shadow:31px 0 #17231a,15px 17px #17231a,8px 28px #17231a,23px 28px #17231a; }.creeper .body { left:25px; top:72px; width:50px; height:55px; background:#4d9a41; box-shadow:inset 12px 0 #65ba4d; }.creeper .leg { top:125px; width:25px; height:35px; background:#4b963e; }.creeper .one{left:8px}.creeper .two{left:33px}.creeper .three{left:53px}.creeper .four{left:77px}
.enderman { right:22%; width:68px; height:225px; bottom:28%; }.enderman .head { left:9px; width:50px; height:55px; background:#18141c; box-shadow:inset 8px 0 #29232e; }.enderman .head::after { content:""; position:absolute; left:7px; top:24px; width:14px; height:5px; background:#d62cff; box-shadow:22px 0 #d62cff,0 0 9px #e061ff,22px 0 9px #e061ff; }.enderman .body{left:16px;top:55px;width:36px;height:72px;background:#17131a}.enderman .arm{top:57px;width:10px;height:110px;background:#211b25}.enderman .arm.left{left:4px;transform:rotate(4deg)}.enderman .arm.right{right:4px;transform:rotate(-4deg)}.enderman .leg{top:125px;width:12px;height:100px;background:#17131a}.enderman .leg.left{left:17px}.enderman .leg.right{right:15px}
.container { width:min(900px,calc(100% - 28px)); margin:auto; padding:48px 0 40px; }
.hero { text-align:center; text-shadow:4px 4px #263524; }
.eyebrow { display:inline-block; margin:0 0 18px; padding:9px 13px; color:#182515; background:var(--gold); border:4px solid #312713; box-shadow:4px 4px #19160d; font:10px 'Press Start 2P',monospace; text-shadow:none; }
h1 { margin:0; font:clamp(30px,7vw,64px)/1.12 'Press Start 2P',monospace; letter-spacing:-2px; }
h1 span { color:#7cdb42; }.subtitle { margin:18px 0 34px; font-weight:700; line-height:1.55; }
.help-open { margin:-10px 0 32px; padding:15px 20px; cursor:pointer; color:#fff; background:#3f9d32; border:5px solid; border-color:#9ee36e #24591e #24591e #9ee36e; box-shadow:6px 7px rgba(25,32,21,.45); font:11px 'Press Start 2P',monospace; text-shadow:2px 2px #1d4518; transition:transform .15s,filter .15s; }.help-open:hover{transform:translateY(-3px);filter:brightness(1.12)}
.help-panel { position:relative; z-index:5; margin:-12px 0 26px; padding:20px; color:#eee; background:#313131; border:6px solid; border-color:#ddd #151515 #151515 #ddd; box-shadow:9px 10px rgba(25,32,21,.45); }.help-panel[hidden]{display:none}.help-panel-title{display:flex;justify-content:space-between;align-items:center}.help-panel h2{margin:0;color:#f8e56a}.help-panel-title button{width:32px;height:32px;cursor:pointer;color:#ffb0b0;background:#555;border:3px solid;border-color:#aaa #222 #222 #aaa;font-size:20px}.help-panel>p{margin:12px 0 18px;color:#ccc;font-size:12px}.help-panel form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.help-panel label{display:grid;gap:7px;color:#9de57c;font:8px 'Press Start 2P',monospace}.help-panel input,.help-panel select{min-width:0;padding:11px;color:#fff;background:#484848;border:3px solid;border-color:#222 #aaa #aaa #222;font:12px 'Roboto Mono',monospace}.help-panel select option{background:#333}.help-submit{padding:12px 14px;cursor:pointer;color:#261e0a;background:#f3ce42;border:3px solid;border-color:#fff09b #7b651d #7b651d #fff09b;font:bold 9px 'Press Start 2P',monospace}.help-message{min-height:18px!important;margin:12px 0 0!important;color:#9af36d!important}
.character-stage { position:relative; z-index:3; margin:-10px 0 24px; border:6px solid; border-color:#f2f2f2 #454545 #454545 #f2f2f2; box-shadow:9px 10px rgba(25,32,21,.45); background:#222; overflow:hidden; }
.character-stage img { display:block; width:100%; height:330px; object-fit:cover; object-position:center 55%; image-rendering:auto; }
.character-stage figcaption { position:absolute; left:50%; bottom:13px; transform:translateX(-50%); padding:9px 12px; color:#fff; background:rgba(15,18,13,.88); border:3px solid #83c952; font:9px 'Press Start 2P',monospace; white-space:nowrap; text-shadow:2px 2px #000; }
.inventory { padding:10px; color:#342d27; background:#c6c6c6; border:5px solid; border-color:#fff #555 #555 #fff; box-shadow:10px 12px rgba(25,32,21,.5); position:relative; z-index:2; }
.inventory-title { display:flex; justify-content:space-between; padding:9px 10px 15px; font:12px 'Press Start 2P',monospace; }.slots { color:#666; font-size:9px; }
.wishlist { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wish-item { min-height:120px; display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:14px; background:#8b8b8b; border:4px solid; border-color:#444 #ddd #ddd #444; transition:transform .15s,filter .15s; }
.wish-item:hover { transform:translateY(-3px); filter:brightness(1.08); }
.wish-item:last-child { grid-column:1/-1; }
.wish-icon { display:grid; place-items:center; width:58px; height:58px; color:white; font:bold 35px monospace; text-shadow:3px 3px #222; background:#555; border:3px solid; border-color:#252525 #c9c9c9 #c9c9c9 #252525; }
.emerald { color:#42ed88 }.pc { color:#9ceaff }.apple { color:#ef4545 }.sword { color:#dffbff }.camera { color:#ff5252 }
.wish-number { color:#f9df49; font:bold 9px 'Press Start 2P',monospace; text-shadow:1px 1px #3b3229; }
h2 { margin:8px 0 6px; color:#fff; font:12px/1.45 'Press Start 2P',monospace; text-shadow:2px 2px #333; }
.wish-item p { margin:0; color:#eee; font-size:12px; line-height:1.45; }
.xp { align-self:start; color:#9af36d; font-weight:bold; font-size:10px; white-space:nowrap; }
.tasks { grid-column:1/-1; padding-top:12px; border-top:2px solid #666; }
.tasks-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; color:#f8e56a; font:8px 'Press Start 2P',monospace; }
.task-progress { color:#d6d6d6; }
.task-list { display:grid; gap:6px; margin:0 0 9px; padding:0; list-style:none; }
.task-list li { display:grid; grid-template-columns:24px 1fr 25px; align-items:center; gap:7px; min-height:32px; padding:4px 6px; color:#fff; background:#707070; border:2px solid; border-color:#4a4a4a #aaa #aaa #4a4a4a; font-size:11px; }
.task-list li.done .task-text { color:#c7c7c7; text-decoration:line-through; }
.task-check,.task-delete,.task-form button { cursor:pointer; color:#fff; background:#555; border:2px solid; border-color:#bbb #333 #333 #bbb; font-weight:bold; }
.task-check { width:22px; height:22px; }.done .task-check { color:#172b12; background:#71d44b; }
.task-delete { width:23px; height:23px; color:#ffaaaa; }
.task-form { display:grid; grid-template-columns:1fr 38px; gap:6px; }
.task-form input { min-width:0; padding:9px 10px; color:#fff; background:#3d3d3d; border:3px solid; border-color:#202020 #bdbdbd #bdbdbd #202020; outline:none; font:11px 'Roboto Mono',monospace; }
.task-form input:focus { border-color:#222 #8ee765 #8ee765 #222; }.task-form input::placeholder{color:#aaa}.task-form button{font-size:20px;color:#9af36d}
.helpers { margin:28px 0 5px; padding:14px; color:#342d27; background:#d9c39a; border:6px solid; border-color:#f5e6bd #6b5132 #6b5132 #f5e6bd; box-shadow:9px 10px rgba(25,32,21,.45); }.helpers-title{display:flex;justify-content:space-between;align-items:center;padding:5px 7px 14px;border-bottom:3px solid #8d7047}.helpers-title span{font:bold 9px 'Press Start 2P',monospace;color:#7a552d}.helpers-title h2{margin:7px 0 0;color:#332719;text-shadow:none}.helpers-title>b{display:grid;place-items:center;width:42px;height:42px;color:#fff;background:#4c9438;border:3px solid #2b5c22;font:14px 'Press Start 2P',monospace}.helpers-list{display:grid;gap:8px;padding-top:12px}.helper-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:10px;background:#b89b6b;border:3px solid;border-color:#725735 #ead5a5 #ead5a5 #725735}.helper-avatar{display:grid;place-items:center;width:40px;height:40px;color:#fff;background:#4a8737;border:3px solid #2d5225;font:15px 'Press Start 2P',monospace}.helper-card strong{display:block;color:#fff;font:10px 'Press Start 2P',monospace;text-shadow:2px 2px #604a30}.helper-card small{display:block;margin-top:6px;color:#392d20;font-weight:bold}.helper-delete{cursor:pointer;color:#6e2828;background:#d6b987;border:2px solid #785f3d}.helpers-empty{margin:5px;color:#695334;text-align:center;font-size:12px}
@media(max-width:720px){.container{padding-top:36px}.wishlist{grid-template-columns:1fr}.wish-item:last-child{grid-column:auto}.wish-item{grid-template-columns:52px 1fr}.wish-icon{width:48px;height:48px}.xp{display:none}h1{font-size:clamp(27px,9vw,44px)}.inventory-title{font-size:9px}.character-stage img{height:260px}.help-panel form{grid-template-columns:1fr}.help-submit{min-height:42px}}
@media(max-width:430px){.wish-item{padding:11px;gap:10px}h2{font-size:10px}.wish-item p{font-size:11px}.subtitle{font-size:13px}.character-stage img{height:210px}.character-stage figcaption{font-size:6px;bottom:8px}}