:root{--n:#2ef2ff;--p:#ff3df2;--y:#ffe62e;--g:#5dff6b;--hill:#5dff6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#000;color:#e8ffff;font-family:ui-monospace,"Courier New",monospace;height:100%;overflow:hidden;user-select:none}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;background:#000}
/* portrait phones: rotate the whole landscape layout to fill the screen */
@media (orientation:portrait){ #app{inset:auto;top:0;left:0;width:100vh;height:100vw;transform:rotate(90deg) translateY(-100%);transform-origin:top left} }
#world{position:absolute;inset:0}
#bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#pet{position:absolute;bottom:15%;left:40%;width:22vmin;height:22vmin;transition:left 3s ease-in-out}
#sprite{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
#shadow{position:absolute;left:18%;right:18%;bottom:-1.2vmin;height:2.6vmin;border-radius:50%;background:radial-gradient(closest-side,#000d,#0000);}
#pet img{max-width:100%;max-height:100%;image-rendering:pixelated;animation:bob 1.6s ease-in-out infinite;}
#pet.flip img{transform:scaleX(-1)} #pet.sleep img{animation:none;filter:brightness(.55)} #pet.dead img{filter:grayscale(1) brightness(.4);animation:none}
#pet.shake img{animation:shake .4s} #pet.egg img{animation:wobble 2s infinite}
.blob{width:18vmin;height:14vmin;border-radius:50% 50% 40% 40%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:#000;font-weight:bold;animation:bob 1.6s infinite;box-shadow:0 0 18px currentColor}
@keyframes bob{50%{translate:0 -6px}} @keyframes shake{25%{translate:-8px 0}75%{translate:8px 0}}
@keyframes wobble{0%,80%,100%{rotate:0deg}85%{rotate:-8deg}95%{rotate:8deg}}
#poops span{position:absolute;bottom:15%;font-size:6vmin;filter:drop-shadow(0 0 4px #c96)}
#status{position:absolute;bottom:42%;left:0;width:100%;text-align:center;font-size:5vmin;pointer-events:none}
#dark{position:absolute;inset:0;background:#000b;pointer-events:none;opacity:0;transition:opacity 1s} #dark.on{opacity:1}
#hud{left:max(2vw,env(safe-area-inset-left))!important;top:17%!important;position:absolute;top:16%;left:2.5%;font-size:12px;color:var(--n);text-shadow:0 0 6px var(--n);opacity:.8}
#toast{position:absolute;top:30%;width:100%;text-align:center;color:var(--y);text-shadow:0 0 8px var(--y);font-size:15px;pointer-events:none}
.icons{position:absolute;left:0;right:0;display:flex;justify-content:space-evenly;align-items:flex-start;padding:1.2vmin max(2vw,env(safe-area-inset-right)) 1.2vmin max(2vw,env(safe-area-inset-left));z-index:3;pointer-events:none}
.icons.top{top:env(safe-area-inset-top)} .icons.bottom{bottom:env(safe-area-inset-bottom)}
.icons button{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:3px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;transform:none!important}
.icons button em{font:600 10.5px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-style:normal;color:#dfe8ffcc;letter-spacing:.3px;text-shadow:0 1px 2px #000}
.icons button b{display:block;width:8.6vmin;height:8.6vmin;min-width:38px;min-height:38px;padding:1.9vmin;color:var(--c);border-radius:50%;background:linear-gradient(160deg,#ffffff1f,#ffffff05 45%,#0000 60%),#0a0f1cd9;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 #ffffff30;transition:transform .15s,box-shadow .15s}
.icons button:focus-visible b,.icons button:active b,.icons button:hover b{transform:scale(1.08);box-shadow:0 0 14px var(--c),inset 0 1px 0 #ffffff40}
.icons button:focus-visible{outline:none}
.icons button.alert b{border-color:#ffe62e;color:#ffe62e;animation:pulse 1s infinite}
.icons button svg{width:100%;height:100%}
.icons button{width:11vmin;height:11vmin;min-width:44px;min-height:44px;color:var(--c);background:linear-gradient(160deg,#ffffff1f,#ffffff05 45%,#0000 60%),#0a0f1cd9;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:50%;box-shadow:0 0 8px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 #ffffff30;touch-action:manipulation;padding:2.4vmin;transition:transform .15s,box-shadow .15s}
.icons button svg,#call svg,.mbtn i svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px currentColor)}
 box-shadow:0 0 6px var(--n),inset 0 0 6px #0ff4;filter:grayscale(.4);touch-action:manipulation;padding:0;line-height:1}
.icons button:focus-visible,.icons button:active,.icons button:hover{outline:none;transform:scale(1.08);box-shadow:0 0 14px var(--c),inset 0 1px 0 #ffffff40}
.icons button.alert{--c:#ffe62e;opacity:1;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 2px var(--y)}}
#call{position:absolute;right:1.2vw;bottom:9vmin;width:7vmin;height:7vmin;color:#ffe62e;opacity:.12;z-index:3} #call.on{opacity:1;animation:shake .6s infinite}
#modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:9;padding:3vmin}
@media (orientation:portrait){ #modal{inset:auto;top:0;left:0;width:100vh;height:100vw;transform:rotate(90deg) translateY(-100%);transform-origin:top left} }
#modalbox{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;backdrop-filter:none;animation:pop .18s cubic-bezier(.2,1.6,.4,1);max-width:min(560px,92%);max-height:86%;overflow:auto;border:1px solid #ff3df299;border-radius:20px;box-shadow:0 0 18px #ff3df255,inset 0 1px 0 #ffffff22;padding:14px 16px;background:linear-gradient(170deg,#1a1030f2,#070a14f2)}
#modalbox.sub{min-width:240px}
#modalbox h2{margin:0 0 4px;color:#ff8af5;text-shadow:0 0 8px #ff3df288;font-size:17px;font-weight:600;letter-spacing:.3px}
.mbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin-top:8px;padding:6px 14px;background:linear-gradient(180deg,#ffffff14,#ffffff04),#0b0f1ccc;border:1px solid #ffffff26;color:#eef4ff;border-radius:999px;font:500 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;box-shadow:inset 0 1px 0 #ffffff1f;transition:background .12s,border-color .12s}
.mbtn i{width:22px;height:22px;flex:none}.mbtn.back{opacity:.8}
.row4 .mbtn{justify-content:center;padding:6px}
.mbtn:focus-visible,.mbtn:active,.mbtn:hover,.mbtn.on{outline:none;background:#ffffff22;border-color:var(--p)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 8px} .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 6px}
.hearts{display:flex;gap:3px}.hearts svg{filter:drop-shadow(0 0 3px #ff4f8b66)} .hearts .off{opacity:.2;filter:grayscale(1)} .hrow{display:flex;justify-content:space-between;align-items:center;margin:4px 0;gap:14px}
.fight{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}.fight div{flex:1;text-align:center;font-size:12px}
.fight img{height:70px;max-width:100%;image-rendering:pixelated}.hp{height:8px;border:1px solid var(--g);margin-top:3px}.hp b{display:block;height:100%;background:var(--g)}
.blog{font-size:12px;color:#cfc;min-height:40px;max-height:80px;overflow:auto;border-top:1px dashed #444;margin-top:6px;padding-top:4px}
table{width:100%;font-size:13px;border-collapse:collapse} td{padding:3px 2px;border-bottom:1px solid #222}
#track{position:relative;height:40px;border:2px solid var(--y);border-radius:8px;margin:14px 0;overflow:hidden}
#zone{position:absolute;top:0;bottom:0;background:#5dff6b55;border-left:2px solid var(--g);border-right:2px solid var(--g)}
#cursor{position:absolute;top:0;bottom:0;width:6px;background:var(--y);box-shadow:0 0 8px var(--y)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#hud #fps{color:#f66}
#world::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#0000 55%,#000a 100%)}
#app.scan #world::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0004 2px 3px)}
#hud{left:max(2vw,env(safe-area-inset-left))!important;top:17%!important;font:700 11px/1 ui-monospace,"Courier New",monospace;letter-spacing:1.5px;text-transform:uppercase;background:#0a0f1c99;border:1px solid #2ef2ff44;border-radius:999px;padding:5px 10px;top:15.5%}
#toast{font:600 14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#modal{transition:background .2s}
/* v9: no name/level/age on the world screen (see Stats). Only a tiny debug fps tag in non-echo mode. */
#petname,#age{display:none}
#hud{background:none!important;border:0!important;padding:0!important;top:auto!important;bottom:1vmin;left:1vmin!important;font-size:9px!important;opacity:.45!important}
body.echo #hud{display:none}