*{box-sizing:border-box}
:root{font-family:"Inter",system-ui,"Leelawadee UI",sans-serif;color:#202c27;background:#e9ece4;font-synthesis:none;--ink:#192421;--accent:#f28348;--line:#c2c8bb}body{margin:0}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,select:focus-visible{outline:3px solid #ef8242;outline-offset:2px}button:active{filter:brightness(.93)}[hidden]{display:none!important}
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background-image:linear-gradient(110deg,#f1f2ea,#e1e6dc)}
header{background:var(--ink);color:#f6f5e9;display:flex;align-items:center;justify-content:space-between;padding:calc(11px + env(safe-area-inset-top)) max(5vw,env(safe-area-inset-right)) 11px max(5vw,env(safe-area-inset-left));border-bottom:3px solid #e98048}
.brand,.tools,.topline,.tag,.title,.keylegend,.petname,.growth>div,.sheetbar{display:flex;align-items:center}.brand{gap:10px;font:900 15px/1 Arial,sans-serif;letter-spacing:-.3px}.brand canvas{width:32px;height:32px;image-rendering:pixelated}.tools{gap:7px}.tools button,.sheetbar button{border:1px solid #69716b;border-radius:50%;background:transparent;color:inherit;width:38px;height:38px;font:21px Arial}
main{width:min(1160px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);padding:clamp(20px,4vw,60px);gap:clamp(22px,4vw,56px);align-items:center}.topline,.title,.petname,.growth>div,.sheetbar{justify-content:space-between}.tag,.code,.model,.badge,kbd{font:600 11px/1.25 ui-monospace,monospace;letter-spacing:.1em}.tag{gap:7px}.tag i{width:8px;height:8px;background:#e27c41;border:1px solid #98502c;border-radius:50%}.code,.model{color:#647064}.title{margin-top:8px;align-items:end}.title h1{font:900 clamp(56px,8vw,112px)/.95 Arial,sans-serif;letter-spacing:-.085em;margin:0}.title h1 span{color:#d66532}.model{text-align:right;line-height:1.55;letter-spacing:0}.workbench{display:grid;place-items:center;padding:clamp(24px,4.6vw,62px) 4px 35px;background-image:radial-gradient(#66745b44 .8px,transparent .8px);background-size:8px 8px;background-position:center;margin-top:18px;border-block:1px solid var(--line)}
.device{position:relative;container-type:inline-size;isolation:isolate;width:min(96%,580px);aspect-ratio:1.77;border-radius:12% 13% 13% 12% / 20%;border:3px solid #83401d;background:linear-gradient(135deg,#ffa261,#dc6e37 53%,#b6542c);box-shadow:inset 3px 5px 1px #ffc294,inset -5px -6px 0 #ac512a,0 6px 0 #834229,0 15px 13px #24302649;transform:rotate(-2deg)}
.bricks{position:absolute;inset:2%;z-index:-1;border-radius:inherit;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='98' height='46'%3E%3Cpath d='M0 1h98M0 24h98M21 1v23M70 24v23' stroke='%239b4826' fill='none' stroke-width='2'/%3E%3Cpath d='M0 3h98M0 26h98M23 3v20M72 26v20' stroke='%23ffad79' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-size:19% auto;opacity:.8}
.stamp{position:absolute;left:18%;top:4.7%;width:52%;text-align:center;font:900 italic 3.7cqw/1 Arial,sans-serif;letter-spacing:-.04em;color:#783b24;text-shadow:0 1px #ffc59e}.foot{top:auto;bottom:5.2%;font:800 1.85cqw/1 monospace;letter-spacing:.08em}.bolt{position:absolute;width:3.3%;aspect-ratio:1;border-radius:100%;border:1px solid #754529;background:linear-gradient(130deg,#c4b7a2 37%,#625b50 42% 54%,#e0cbb0 59%);box-shadow:1px 1px 2px #62381c}.tl{top:9%;left:6%}.bl{bottom:9%;left:6%}.br{right:6%;bottom:9%}
.bezel{position:absolute;left:12%;top:15.2%;width:63%;height:69.5%;padding:3.3% 3.6%;background:linear-gradient(145deg,#eee4cb,#9c9785 48%,#c6c1ab 81%,#a9a48f);clip-path:polygon(7% 0,94% 0,100% 11%,100% 88%,93% 100%,7% 100%,0 88%,0 12%);box-shadow:inset 3px 4px #f6eacf,inset -3px -5px #797665}
.glass{height:100%;padding:3% 5%;display:grid;grid-template-rows:19% 1fr 19%;background-color:#acc092;background-image:linear-gradient(#41513210 1px,transparent 1px),linear-gradient(90deg,#41513210 1px,transparent 1px);background-size:4px 4px;color:#2c422a;box-shadow:inset 3px 4px 5px #35493288,inset 0 0 0 2px #657659}.icons{display:flex;align-items:stretch;justify-content:space-between}.icons button{border:0;border-radius:2px;width:18%;padding:0;background:none;color:#41573988;font:bold 3.2cqw/1 monospace}.icons .on{background:#354b31;color:#b1c594}.icons .call{color:#172b17}.screen{position:relative;min-height:0;display:grid;place-items:center}.screen canvas{width:100%;height:100%;image-rendering:pixelated}.screen #overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;white-space:pre-line;background:#adbf94;font:bold clamp(10px,3.1cqw,20px)/1.18 monospace}
.keys{position:absolute;left:77.8%;top:13.7%;height:71%;width:14.3%;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.keys button{border:0;background:none;padding:0;width:100%;height:34%;display:grid;place-items:center;position:relative;isolation:isolate;font:800 2.8cqw/1 monospace;color:#354035}.keys button:before{content:"";z-index:-1;position:absolute;width:67%;height:74%;border-radius:45%;border:2px solid #5c5038;background:linear-gradient(145deg,#d6d5b9,#969780);box-shadow:inset 2px 3px #e9e3c9,2px 3px 1px #764326}.keys button:active:before{transform:translateY(2px)}
.keylegend{justify-content:center;gap:24px;margin-top:13px;font-size:12px}.keylegend kbd{border:1px solid #a5ad9f;border-radius:3px;padding:2px 5px;font-size:10px}
.status{background:#f5f5ec;border:1px solid #adb7a7;box-shadow:4px 5px 0 #d1d7ca;border-radius:16px;padding:24px}.petname{margin:15px 0 20px;gap:8px;flex-wrap:wrap}.petname h2{font:800 clamp(24px,3vw,36px)/1.15 Arial,sans-serif;letter-spacing:-.06em;margin:0}.badge{font-size:9px;padding:5px 7px;background:#e0e7d4;border:1px solid #bec9af;border-radius:3px;letter-spacing:.04em}.meters{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.meters label,.growth span{font-size:12px;color:#596455;display:block}.meters b{font:700 17px/1.35 monospace;letter-spacing:1px;color:#384b39}.growth{margin:18px 0 13px}.growth strong{font-size:12px}.growth progress{width:100%;height:6px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:#dce1d3}.growth progress::-webkit-progress-bar{background:#dce1d3}.growth progress::-webkit-progress-value{background:#cd703d}.growth progress::-moz-progress-bar{background:#cd703d}.start{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid #9e502f;border-radius:7px;padding:11px 15px;color:#291c15;background:#f49a60;font-weight:700}.start span{font-size:18px}.status p{font-size:12px;line-height:1.45;min-height:18px;margin:9px 0 0;color:#485644}
nav{display:flex;justify-content:center;background:#eff1e9;border-top:1px solid #b9c1b2;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px}nav button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:7px;padding:9px clamp(9px,2vw,25px);font-size:13px;background:transparent;color:#505d50}nav button.active{background:#dbe2d2;color:#293b2a;font-weight:700}nav b{font-size:20px;line-height:1}
dialog{width:min(460px,94vw);max-height:85dvh;background:#f4f5eb;color:#253429;border:1px solid #80917a;border-radius:17px;padding:20px;box-shadow:0 26px 65px #17201844}dialog::backdrop{background:#17241cd1}.sheetbar{margin:0 0 14px}.sheetbar h2{font-size:20px;margin:0}.sheetbar button{color:#4c584a;width:36px;height:36px;font-size:15px}#content{font-size:14px;line-height:1.65;white-space:pre-line}#content p{margin:10px 0}#content a{color:#834421}.opt{display:flex;justify-content:space-between;align-items:center;padding:10px 0;gap:12px;border-top:1px solid #d1d8c9}.opt button,.opt select,#content>button{background:#e1e7da;border:1px solid #a6b29e;border-radius:5px;padding:8px 11px;color:#263527}.albumgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.albumgrid div{border:1px solid #c4ceba;padding:8px 4px;text-align:center;border-radius:5px;font:12px monospace}.albumgrid canvas{display:block;margin:auto;width:50px;height:50px;image-rendering:pixelated}
@media(max-width:720px) and (orientation:portrait){header{padding:calc(5px + env(safe-area-inset-top)) 16px 5px}.app{height:100svh;height:100dvh;min-height:0}main{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:safe center;gap:13px;padding:12px 16px}.console,.status{width:min(100%,510px)}.title{margin:4px 0}.title h1{font-size:clamp(38px,7dvh,65px)}.workbench{margin-top:8px;padding:16px 4px 20px}.device{width:min(94%,49dvh)}.keylegend{margin-top:8px}.status{padding:12px 15px}.petname{margin:5px 0 9px}.petname h2{font-size:25px}.meters{gap:4px 14px}.meters>div{display:flex;align-items:center;justify-content:space-between}.meters b{font-size:15px}.growth{margin:6px 0}.start{padding:6px 12px}.status p{margin-top:6px;min-height:0}nav{gap:0;justify-content:space-around}nav button{font-size:11px;flex-direction:column;gap:3px;min-width:22%;padding:5px}nav b{font-size:17px}}
@media(max-height:510px) and (orientation:landscape){.app{height:100dvh;min-height:0}header{padding:3px max(20px,env(safe-area-inset-right)) 3px max(20px,env(safe-area-inset-left))}.tools button{width:30px;height:30px}main{flex:1;min-height:0;overflow:auto;grid-template-columns:1fr .9fr;gap:14px;padding:6px max(20px,env(safe-area-inset-right)) 6px max(20px,env(safe-area-inset-left))}.console>.topline,.title,.model{display:none}.workbench{margin:0;padding:10px 0 16px}.device{width:min(94%,85dvh)}.keylegend{margin-top:3px}.status{padding:9px 12px}.petname{margin:4px 0}.petname h2{font-size:23px}.meters{gap:3px 10px}.meters>div{display:flex;align-items:center;justify-content:space-between}.growth{margin:3px 0}.start{padding:4px 10px}.status p{margin:3px 0}.keylegend{font-size:10px}nav{padding-top:2px;padding-bottom:max(2px,env(safe-area-inset-bottom))}nav button{padding:4px 12px}}
.playkeys{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;margin:9px 0}.playkeys button{min-height:42px;border:1px solid #abb9a4;border-radius:6px;background:#e3e9dc;color:#2d412d;font-weight:750;font-size:14px}.playkeys #evo{background:#263f38;color:#f0f5e0;border-color:#263f38}.playkeys #battle{background:#f29861;border-color:#b46939;color:#392412}.playkeys button:disabled,.formrow button:disabled{opacity:.58;cursor:default}.start{background:#f5f5ec;border-color:#bac5b1;font-size:13px}.glass{background-color:#c4d7bc;background-image:none}.screen #overlay{background:#c8dbc4ed}.combatbar{font:700 12px/1.5 ui-monospace,monospace;background:#283b37;color:#fff1ca;border-radius:4px;padding:6px 8px;margin-top:6px;text-align:center}.formrow{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;border-top:1px solid #c6cfbd;padding:9px 0}.formrow canvas{background:#dce8d9;border-radius:5px;width:48px;height:48px;image-rendering:pixelated}.formrow strong,.formrow small{display:block;overflow-wrap:anywhere}.formrow small{color:#53624e;font-size:12px;line-height:1.5}.formrow button{border:1px solid #99a891;background:#e7eddd;border-radius:5px;padding:7px 9px;white-space:nowrap}#content h3{font-size:15px;margin:16px 0 4px}.screen canvas{object-fit:fill}
@media(max-width:720px) and (orientation:portrait){.playkeys{margin:6px 0}.playkeys button{min-height:36px}main{gap:9px}.workbench{padding:12px 3px 16px}.growth{margin:4px 0}}
@media(max-height:700px) and (orientation:portrait){.title h1{font-size:32px}.keylegend{display:none}.status{padding:8px 12px}.workbench{padding:8px 2px 11px}.device{width:min(92%,46dvh)}}
@media(max-height:510px) and (orientation:landscape){.playkeys{margin:4px 0}.playkeys button{min-height:28px}.combatbar{font-size:10px;padding:2px}.keylegend{display:none}}