*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{background:#282b30;color:#293039;font:14px ui-monospace,Menlo,monospace;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #c56837;outline-offset:3px}.console{width:min(100%,480px);height:100dvh;max-height:1000px;background-color:#edddbb;background-image:radial-gradient(#ae986d26 .8px,transparent .8px);background-size:5px 5px;border:5px solid #a99979;border-top-color:#fff1d1;border-left-color:#f7eacb;box-shadow:inset 0 0 0 4px #cfba91,0 15px 70px #0008;border-radius:24px 24px 32px 32px;padding:12px 15px max(9px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;overflow:hidden}header{display:flex;align-items:center;gap:12px;min-height:43px;padding:0 6px}header b{font-size:clamp(18px,5vw,25px);letter-spacing:1px;text-shadow:1px 2px #fff3d7;flex:1}header button{border:0;background:none;font-size:25px;color:#303740}.led{width:13px;height:13px;background:#ffca58;border:3px solid #6b5535;box-shadow:2px 2px #c8ad75}.battery{font-size:10px;letter-spacing:-2px;border:2px solid #515d42;color:#515d42;padding:2px 4px}.bezel{flex:1;min-height:220px;display:flex;flex-direction:column;background:#263039;border:6px solid #41484d;border-right-color:#161d23;border-bottom-color:#161d23;box-shadow:0 0 0 3px #b7a17d,3px 5px 0 #9d8c6d;border-radius:13px;padding:9px;overflow:hidden}.screen-title{display:flex;justify-content:space-between;gap:4px;color:#b5c994;font-weight:bold;font-size:14px;letter-spacing:1px;padding:0 0 8px;align-items:center}#number{font-size:10px;white-space:nowrap}.display{flex:1;min-height:0;position:relative;background:#b4c396;display:grid;align-items:center;overflow:hidden;border:2px solid #0e221d}iframe{border:0;width:100%;height:100%;display:block;background:#b4c396}.lcd-footer{color:#adbd8b;display:flex;justify-content:space-between;gap:6px;font-size:10px;padding-top:9px;min-height:23px}.indicator{white-space:nowrap;font-size:9px}#hint{text-align:right}.instruction{text-align:center;font-size:10px;color:#796b53;min-height:14px}.controller{height:clamp(122px,22dvh,190px);display:flex;align-items:center;justify-content:space-between;padding:4px 4px 0;flex-shrink:0;touch-action:none;user-select:none}.dpad{width:clamp(112px,31vw,151px);height:clamp(112px,31vw,151px);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);filter:drop-shadow(3px 5px 0 #b19b75)}.dpad button,.dpad span{background:#303944;color:#65707a;border:0;font-size:21px;text-align:center;display:grid;place-items:center;box-shadow:inset 3px 3px #657078,inset -3px -3px #17202a}.dpad button:active,.dpad button.pressed{background:#52616c;transform:translateY(2px)}.dpad [data-dir=up]{grid-column:2;border-radius:5px 5px 0 0}.dpad [data-dir=left]{grid-row:2;grid-column:1;border-radius:5px 0 0 5px}.dpad span{grid-row:2;grid-column:2;box-shadow:none;font-size:20px}.dpad [data-dir=right]{grid-row:2;grid-column:3;border-radius:0 5px 5px 0}.dpad [data-dir=down]{grid-row:3;grid-column:2;border-radius:0 0 5px 5px}.action-buttons{width:48%;height:100%;position:relative}.action{position:absolute;border:5px solid #582a29;border-radius:50%;color:#ffe5c8;font-weight:900;background:#c9403e;box-shadow:inset 4px 5px #ef7770,inset -5px -7px #8e252c,0 0 0 5px #b9a17b,4px 7px 0 5px #927f64;text-shadow:2px 2px #8d272c}.primary{width:clamp(72px,22vw,105px);height:clamp(72px,22vw,105px);bottom:6px;right:0;font-size:36px}.secondary{width:clamp(50px,15vw,70px);height:clamp(50px,15vw,70px);top:6px;left:0;font-size:24px}.action:active,.action.pressed{transform:translateY(4px);filter:brightness(.9)}.system-buttons{display:flex;justify-content:space-between;align-items:center;height:55px;flex-shrink:0}.system-buttons button{border:0;background:none;font-size:10px;font-weight:bold;color:#35404a;letter-spacing:1px}.system-buttons i{display:block;width:57px;height:20px;background:#343d46;border:4px solid #1f2831;border-top-color:#65717b;box-shadow:0 0 0 3px #bfa780,2px 3px 0 3px #a58e6a;border-radius:10px;margin-bottom:7px}.system-buttons button:active i{transform:translateY(2px)}.speaker{color:#65583f;font-size:15px;line-height:8px;letter-spacing:1px}footer{display:flex;justify-content:space-between;padding:6px 0 0;border-top:2px solid #c7ac7b;flex-shrink:0}footer button{border:0;background:none;font-size:11px;font-weight:bold;color:#4a514c;padding:3px}#paused{position:absolute;inset:0;background:#18231ee6;color:#e5eac8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px}#paused[hidden]{display:none}#paused b{font-size:29px;letter-spacing:4px}#cursor{position:absolute;width:16px;height:16px;border:2px solid #e6422c;box-shadow:0 0 0 1px white;pointer-events:none;transform:translate(-50%,-50%)}dialog{width:min(94vw,460px);max-height:88dvh;border:4px solid #817256;background:#f5ecd8;color:#303b3c;border-radius:12px;padding:18px;box-shadow:8px 9px 0 #0003}dialog::backdrop{background:#162022bf}dialog h2{margin:5px 0;font-size:20px}dialog h3{font-size:14px;margin-bottom:5px}dialog p,dialog small{line-height:1.7}dialog p{font-size:12px}dialog a{color:#8a432d}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head small{font-size:9px;letter-spacing:1px}.dialog-head button{font-size:26px;background:none;border:0;color:#66543e}.tabs{display:flex;gap:5px;margin:12px 0}.tabs button,dialog #restart{border:2px solid #b3a184;background:#e7d7b7;padding:9px 6px;border-radius:5px;font-size:11px}.tabs .active{background:#374a43;color:#f7efd7;border-color:#374a43}#search{width:100%;padding:10px;border:2px solid #b3a184;background:#fffaf0;border-radius:5px}#cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:46dvh;overflow:auto;padding:3px}.cartridge{background:#e0d1af;border:2px solid #af9a70;border-bottom-width:5px;border-radius:7px;padding:8px;text-align:left;color:#2f3f36}.cartridge img{display:block;width:100%;height:78px;object-fit:contain;background:#eff1e9;image-rendering:pixelated}.cartridge b,.cartridge small{display:block;margin-top:5px;font-size:11px}.cartridge small{font-size:9px;color:#71624a}.tip{color:#806e51}@media(max-height:680px){.console{padding:5px 12px;gap:5px}header{min-height:30px}.controller{height:115px}.dpad{width:105px;height:105px}.primary{width:74px;height:74px}.secondary{width:49px;height:49px}.system-buttons{height:43px}.bezel{min-height:170px}.speaker{font-size:12px}}
