*{box-sizing:border-box}
:root{--lcd:#b9d62b;--ink:#263400;--blue:#176db8}
html,body{margin:0;min-height:100%;background:#050b14}
body{display:grid;place-items:center;min-height:100vh;padding:42px 14px;color:#fff;font-family:monospace;background:radial-gradient(circle at 50% 16%,#194a7d,transparent 42%),#050b14}
.back{position:fixed;top:16px;left:16px;color:#d8ebff;text-decoration:none;font:15px Arial,sans-serif;z-index:5}
.wrap{text-align:center}
.gameboy{width:min(410px,95vw);height:745px;position:relative;padding:27px 26px 21px;border-radius:40px 40px 56px 56px;background:linear-gradient(145deg,#3198eb,#116fba 45%,#075092);border:1px solid #65baff;box-shadow:inset 9px 9px 13px #9bd9ff55,inset -13px -16px 20px #043b72,0 38px 90px #000d,0 7px 0 #032e57}
.brand{text-align:left;font-weight:900;font-style:italic;letter-spacing:.08em;text-shadow:1px 2px #06345d;height:38px;font-size:16px}.brand small{display:block;font-size:8px;letter-spacing:.2em}
.screen-shell{background:#151d28;border:8px solid #080f18;border-radius:25px;padding:7px;box-shadow:inset 0 0 0 2px #667488,0 3px 0 #06335c}
.screen{height:335px;position:relative;overflow:hidden;border-radius:10px;background:var(--lcd);color:var(--ink);box-shadow:inset 0 0 25px #273800,inset 0 0 2px #111}
.screen-inner{height:100%}.scanlines{position:absolute;inset:0;z-index:10;pointer-events:none;background:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 4px)}
.page{height:100%;padding:19px 13px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;position:relative}
.mini{font-size:10px;letter-spacing:.12em}.title{font-size:29px;letter-spacing:.08em;text-shadow:2px 2px #d8ea69}.heart{font-size:58px;line-height:1;margin:8px 0;text-shadow:2px 2px #d8ea69}.press{font-size:10px;margin-top:21px;animation:blink 1s steps(2,end) infinite}@keyframes blink{50%{opacity:0}}
.top{position:absolute;top:8px;left:9px;right:9px;display:flex;justify-content:space-between;font-size:9px;font-weight:bold}.menu{width:100%;margin-top:18px;display:grid;gap:5px;text-align:left}.row{padding:7px 9px;font-size:12px;font-weight:bold}.row.sel{background:var(--ink);color:var(--lcd)}.row b{display:inline-block;width:12px}.hint{position:absolute;bottom:7px;font-size:9px}.grid{width:100%;font-size:10px;line-height:1.9;text-align:left;margin-top:13px}.grid b{float:right}.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%;margin-top:15px}.stat{border:1px solid var(--ink);padding:8px}.stat strong{display:block;font-size:19px}.stat span{font-size:8px}
.memory{width:165px;height:150px;object-fit:cover;border:3px solid var(--ink);margin:12px 0 6px}.message,.story,.quest{font-size:10px;line-height:1.65;max-width:285px}.quest{width:100%;text-align:left;border-top:1px dashed var(--ink);padding:8px 0}.progress{width:87%;height:9px;border:1px solid var(--ink);padding:1px;margin:9px 0}.progress i{display:block;width:100%;height:100%;background:var(--ink)}
/* Player Info */
.player-scene{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:18px}
.character-row{display:flex;align-items:flex-end;justify-content:center;gap:21px;margin:8px auto 7px}
.character{width:91px}.char-name{font-size:9px;font-weight:bold;margin-top:4px}
.pixel-person{width:88px;height:118px;position:relative;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 rgba(39,52,0,.28))}
.pixel-person *{position:absolute;display:block}
.pixel-person .hat{left:12px;top:0;width:63px;height:18px;background:#20242b;border:3px solid #12151a;border-radius:50% 50% 35% 35%}
.pixel-person .hat::after{content:"";left:-12px;top:12px;width:83px;height:7px;background:#171b21;border:2px solid #101319}
.pixel-person .head{left:28px;top:20px;width:36px;height:38px;background:#a96f48;border:3px solid #563921}
.pixel-person .eye1,.pixel-person .eye2{top:34px;width:5px;height:5px;background:#172016}.pixel-person .eye1{left:37px}.pixel-person .eye2{left:51px}
.pixel-person .body{left:19px;top:57px;width:54px;height:39px;background:#c9cdd4;border:3px solid #5a6270;border-radius:7px}
.pixel-person .logo{left:30px;top:69px;width:33px;height:9px;border-top:3px solid #1c2c50;border-bottom:3px solid #1c2c50}
.pixel-person .leg1,.pixel-person .leg2{top:96px;width:16px;height:20px;background:#202632;border:2px solid #11151b}.pixel-person .leg1{left:24px}.pixel-person .leg2{left:52px}
.pixel-person .shoe1,.pixel-person .shoe2{top:112px;width:23px;height:7px;background:#11151b}.pixel-person .shoe1{left:20px}.pixel-person .shoe2{left:49px}
.pixel-person.girl .hat{left:11px;top:1px;width:67px;height:19px;background:#262424;border-radius:45%}
.pixel-person.girl .head{left:27px;top:19px;width:38px;height:39px;background:#b87b55;border-color:#593c2a}
.pixel-person.girl .veil{left:19px;top:18px;width:54px;height:46px;background:#d9cabb;border:3px solid #807368;border-radius:50% 50% 43% 43%}
.pixel-person.girl .eye1,.pixel-person.girl .eye2{top:37px}.pixel-person.girl .eye1{left:37px}.pixel-person.girl .eye2{left:51px}
.pixel-person.girl .body{left:16px;top:59px;width:59px;height:37px;background:#dfe6ef;border-color:#6d7480}
.pixel-person.girl .blue{left:19px;top:66px;width:54px;height:31px;background:#3979c7;border-radius:5px;border:3px solid #1e477d}
.pixel-person.girl .leg1,.pixel-person.girl .leg2{top:96px;background:#3c414d}.pixel-person.girl .leg1{left:24px}.pixel-person.girl .leg2{left:52px}
.player-hud{width:100%;border:1px solid var(--ink);padding:7px 8px;font-size:9px;text-align:left;margin-top:4px}.hp{color:#8b1f1f;letter-spacing:1px;font-size:12px}.player-hud b{float:right}
/* RPG map */
.map-screen{width:100%;height:100%;padding:30px 8px 14px;display:flex;flex-direction:column;align-items:center}.map{width:275px;height:180px;border:3px solid var(--ink);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(6,1fr);background:#a9c729;margin-top:5px;box-shadow:inset 0 0 0 2px #6d8517}
.tile{display:grid;place-items:center;font-size:14px;border:1px solid #8ea91d}.grass{background:#abc92b}.path{background:#c9b35c}.tree{background:#71961b}.water{background:#79a9a1}.house{background:#d0b264}
.map-note{font-size:9px;line-height:1.5;margin-top:8px}.map-quest{font-size:10px;margin-top:4px;font-weight:bold}
.dialog{position:absolute;left:9px;right:9px;bottom:10px;background:var(--lcd);border:3px solid var(--ink);padding:9px;font-size:10px;text-align:left;line-height:1.45;box-shadow:3px 3px 0 #8da721}.dialog b{display:block;font-size:11px;margin-bottom:4px}
.level-badge{font-size:9px;padding:3px 6px;border:1px solid var(--ink);margin:5px 0}
.select-start{display:flex;justify-content:center;gap:25px;margin-top:30px}.select-start button{border:0;background:#343d4a;color:#e1e8ef;border-radius:20px;padding:8px 17px;font:9px monospace;transform:rotate(-12deg);box-shadow:inset 0 -3px 4px #111,0 3px 0 #05315a}.select-start button:active{transform:rotate(-12deg) translateY(2px)}
.controls{display:flex;justify-content:space-between;align-items:center;margin-top:39px}.dpad{position:relative;width:115px;height:115px}.dpad button,.dpad i{position:absolute;width:39px;height:39px;border:0;background:#17212e;color:#e5f2ff;box-shadow:inset 0 -5px 6px #080d13,0 4px 1px #06365f;font:bold 16px monospace}.dpad .up{left:38px;top:0}.dpad .down{left:38px;bottom:0}.dpad .left{left:0;top:38px}.dpad .right{right:0;top:38px}.dpad i{left:38px;top:38px}
.ab{display:flex;gap:16px;transform:rotate(-15deg)}.ab button{width:60px;height:60px;border:0;border-radius:50%;background:#07519d;color:white;font:bold 20px monospace;box-shadow:inset 0 -7px 7px #032f62,0 4px 0 #052d51}.ab button:active,.dpad button:active{transform:translateY(2px)}
.speaker{position:absolute;right:29px;bottom:72px;display:flex;gap:4px;transform:rotate(-28deg)}.speaker i{width:6px;height:39px;background:#063c72;border-radius:5px}.help{font:13px Arial,sans-serif;color:#91a8c2;margin-top:16px}
@media(max-height:780px){.gameboy{height:700px}.screen{height:300px}.controls{margin-top:29px}.memory{height:132px}.map{height:165px}}
@media(max-width:420px){.gameboy{height:690px;padding-left:21px;padding-right:21px}.screen{height:295px}.title{font-size:25px}.character{width:84px}.pixel-person{transform:scale(.9);transform-origin:bottom center}.map{width:255px}.row{font-size:11px}}

/* ================= ANIMATED RPG ENHANCEMENTS ================= */
.screen-inner{animation:screenFade .28s ease both}
@keyframes screenFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}

.boot .heart,.heart{animation:heartBeat 1.15s ease-in-out infinite}
@keyframes heartBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

.boot .title{animation:titleFloat 1.7s ease-in-out infinite}
@keyframes titleFloat{0%,100%{transform:translateY(0);text-shadow:2px 2px #d8ea69}50%{transform:translateY(-3px);text-shadow:3px 3px #d8ea69}}

.character-row .character{animation:characterIdle 1.35s ease-in-out infinite}
.character-row .character:nth-child(3){animation-delay:.25s}
@keyframes characterIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.character-row>div:nth-child(2){animation:heartFloat 1s ease-in-out infinite}
@keyframes heartFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.15)}}

.pixel-person::after{content:"";position:absolute;left:7px;top:2px;width:74px;height:114px;pointer-events:none;background:linear-gradient(120deg,transparent 0 43%,rgba(255,255,255,.12) 49%,transparent 55%);transform:translateX(-26px);animation:spriteShine 4s ease-in-out infinite}
@keyframes spriteShine{0%,72%{opacity:0;transform:translateX(-26px)}82%{opacity:1}96%,100%{opacity:0;transform:translateX(27px)}}

.player-hud{animation:hudAppear .45s ease both}
@keyframes hudAppear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.row.sel{animation:menuGlow 1s ease-in-out infinite alternate}
@keyframes menuGlow{from{filter:brightness(1)}to{filter:brightness(1.18)}}

.memory{animation:memoryIn .4s ease both}
@keyframes memoryIn{from{opacity:0;transform:scale(.92) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.dialog{animation:dialogIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes dialogIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}

.progress i{animation:progressPulse 1.6s ease-in-out infinite}
@keyframes progressPulse{50%{filter:brightness(1.35)}}

.hp{animation:hpPulse 1.2s ease-in-out infinite}
@keyframes hpPulse{50%{opacity:.7}}

.map .player-tile{animation:mapHeart 0.7s ease-in-out infinite;transform-origin:center}
@keyframes mapHeart{50%{transform:scale(1.2);filter:brightness(1.25)}}

.map .tile{transition:transform .12s ease,filter .12s ease}

.ab button,.dpad button,.select-start button{transition:transform .08s ease,filter .08s ease}
.ab button:hover,.dpad button:hover,.select-start button:hover{filter:brightness(1.15)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}