*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:#1a1a1f;font-family:Inter,system-ui,-apple-system,sans-serif;color:#eee;overflow:hidden}#root{height:100%;display:flex;flex-direction:column}@font-face{font-family:PixelOperator;src:local("Press Start 2P")}.pixfont{font-family:"Press Start 2P",VT323,PixelOperator,ui-monospace,monospace;letter-spacing:.03em;color:#0f380f;text-transform:uppercase;image-rendering:pixelated}.case-shell{position:relative;width:100%;flex:1;min-height:0;background:#0b0b10;padding-top:env(safe-area-inset-top,0);display:flex;flex-direction:column}.case{position:relative;flex:1;display:flex;flex-direction:column;padding:22px 22px 0;border-top-left-radius:22px;border-top-right-radius:22px;overflow:hidden;transition:background .4s ease;background:linear-gradient(180deg,#ffd86b,#c69a2b);--btn-color: #b58812}.case:before{content:"";position:absolute;top:0;left:0;right:0;height:34%;background:linear-gradient(180deg,#ffffff8c,#ffffff2e 40%,#fff0);pointer-events:none;mix-blend-mode:screen}.case:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,#0000,#0000002e);pointer-events:none}.bezel{position:relative;border-radius:18px;padding:14px 14px 16px;box-shadow:inset 0 3px 6px #00000059,inset 0 -1px 2px #ffffff40,0 1px #ffffff59;background:linear-gradient(180deg,#00000014,#00000038);flex:1;display:flex;flex-direction:column;min-height:0}.lcd{position:relative;flex:1;border-radius:6px;overflow:hidden;background:var(--lcd-bg, #9BBC0F);box-shadow:inset 0 0 0 2px #0f380f59,inset 0 6px 12px #0f380f38,inset 0 -3px 6px #0f380f2e;transition:background .3s ease}.lcd-inner{position:absolute;inset:0;padding:14px 14px 12px;display:flex;flex-direction:column;z-index:2}.lcd:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(15,56,15,.09) 0px,rgba(15,56,15,.09) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:3}.lcd:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0f380f00 55%,#0f380f2e);pointer-events:none;z-index:3}.dead{position:absolute;width:2px;height:2px;background:#0f380f;z-index:4;opacity:.55}.tama-logo{position:absolute;top:6px;right:18px;font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:2px;color:#00000059;text-shadow:0 1px 0 rgba(255,255,255,.35)}.screws{position:absolute;bottom:6px;left:16px;display:flex;gap:6px}.screw{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,#00000059 70%);box-shadow:inset 0 0 0 .5px #0006}.buttons{display:flex;justify-content:space-around;align-items:center;padding:18px 6px 26px;gap:10px}.btn-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.btn{width:64px;height:64px;border-radius:50%;border:none;position:relative;cursor:pointer;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--btn-color, #a04040) 88%,white),var(--btn-color, #a04040) 55%,color-mix(in srgb,var(--btn-color, #a04040) 85%,black) 100%);box-shadow:0 4px 8px #00000040,0 2px 4px #00000026,inset 0 1px #ffffff14,inset 0 -2px 3px #00000038;transition:transform .09s ease,box-shadow .09s ease;outline:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center}.btn:before{content:"";position:absolute;inset:0;border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");background-size:80px 80px;mix-blend-mode:overlay;opacity:.18;pointer-events:none}.btn-engrave{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:1px;color:color-mix(in srgb,var(--btn-color, #a04040) 78%,black);text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 1px rgba(0,0,0,.42);filter:blur(.25px);user-select:none;pointer-events:none}.btn:active{transform:translateY(2px);box-shadow:0 1px 2px #0000004d,inset 0 2px 4px #00000047,inset 0 -1px #ffffff0a}.btn:active .btn-engrave{text-shadow:0 .5px 0 rgba(255,255,255,.1),0 -.5px .5px rgba(0,0,0,.22)}.btn-label{font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#00000061;text-shadow:0 1px 0 rgba(255,255,255,.25);min-height:12px}.meter{display:flex;gap:2px;align-items:center}.meter-seg{width:6px;height:9px;background:#0f380f}.meter-seg.off{background:transparent;box-shadow:inset 0 0 0 1px #0f380f}.blink{animation:blink .9s steps(2) infinite}@keyframes blink{50%{opacity:0}}.flash-bg{animation:flashbg .5s steps(2) infinite}@keyframes flashbg{50%{filter:invert(1)}}.sel-border{box-shadow:0 0 0 2px #0f380f;animation:selpulse .6s steps(2) infinite}@keyframes selpulse{50%{box-shadow:0 0 0 2px transparent}}@keyframes petIdle{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}@keyframes petEat{0%,to{transform:rotate(0) translateY(0)}40%{transform:rotate(8deg) translateY(-2px)}60%{transform:rotate(-4deg) translateY(0)}}@keyframes petPlay{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(6deg)}}@keyframes petStudy{0%,to{transform:rotate(-6deg)}50%{transform:rotate(-10deg) translateY(-1px)}}@keyframes petSleep{0%,to{transform:rotate(-4deg) translateY(2px)}50%{transform:rotate(-4deg) translateY(-1px)}}@keyframes petSick{0%,to{transform:translate(0) translateY(2px)}25%{transform:translate(-2px) translateY(3px)}75%{transform:translate(2px) translateY(3px)}}@keyframes petHappy{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.08)}}@keyframes petDead{0%,to{transform:translateY(-4px);opacity:.5}50%{transform:translateY(-8px);opacity:.7}}@keyframes petOverlay{0%,to{transform:translateY(0) scale(1);opacity:.9}50%{transform:translateY(-3px) scale(1.08);opacity:1}}.list-row{display:flex;justify-content:space-between;padding:3px 2px;border-bottom:1px dashed rgba(15,56,15,.4);font-size:9px}.list-row.me{background:#0f380f2e}
