:root{--face: #c0c0c0;--light: #ffffff;--shadow: #808080;--dark: #000000;--title: #000080;--title-text: #ffffff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#1a1a1a;overflow:hidden;font-family:"Pixelated MS Sans Serif",Tahoma,"MS Sans Serif",sans-serif;font-size:11px;-webkit-font-smoothing:none}#stage{position:absolute;top:0;left:0;width:640px;height:480px;transform-origin:top left;overflow:hidden;background:#000}#garden,#frogs{position:absolute;top:0;right:0;bottom:0;left:0;width:640px;height:480px;image-rendering:pixelated}#garden{object-fit:cover}#ui{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui>*{pointer-events:auto}.btn{background:var(--face);border:none;box-shadow:inset -1px -1px 0 var(--dark),inset 1px 1px 0 var(--light),inset -2px -2px 0 var(--shadow),inset 2px 2px 0 var(--face);padding:3px 8px;font:inherit;color:#000;min-width:22px;cursor:pointer}.btn:active:not(:disabled){box-shadow:inset 1px 1px 0 var(--dark),inset -1px -1px 0 var(--light),inset 2px 2px 0 var(--shadow),inset -2px -2px 0 var(--face);padding:4px 7px 2px 9px}.btn:disabled{color:var(--shadow);text-shadow:1px 1px 0 var(--light);cursor:default}.btn:focus-visible{outline:1px dotted #000;outline-offset:-4px}.panel{background:var(--face);box-shadow:inset -1px -1px 0 var(--dark),inset 1px 1px 0 var(--light),inset -2px -2px 0 var(--shadow),inset 2px 2px 0 var(--face);padding:4px 6px}.sunken{background:var(--face);box-shadow:inset 1px 1px 0 var(--shadow),inset -1px -1px 0 var(--light),inset 2px 2px 0 var(--dark),inset -2px -2px 0 var(--face);padding:3px 5px}.field{background:#fff;box-shadow:inset 1px 1px 0 var(--shadow),inset 2px 2px 0 var(--dark),inset -1px -1px 0 var(--light);border:none;font:inherit;padding:3px 4px;width:100%}.field:focus{outline:none}#modal-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#00000040}#modal-layer.open{display:flex}.dialog{background:var(--face);box-shadow:inset -1px -1px 0 var(--dark),inset 1px 1px 0 var(--light),inset -2px -2px 0 var(--shadow),inset 2px 2px 0 var(--face);padding:3px;width:300px;max-height:440px;display:flex;flex-direction:column}.titlebar{background:var(--title);color:var(--title-text);font-weight:700;padding:2px 3px;display:flex;align-items:center;justify-content:space-between;flex:none}.close{width:16px;height:14px;line-height:1;padding:0;font-size:10px;font-weight:700;display:grid;place-items:center}.dialog-body{padding:8px;overflow-y:auto;flex:1 1 auto}.row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.row label{flex:0 0 96px}.row .value{flex:1;text-align:right}.spinner{display:flex;gap:2px}.spinner .btn{padding:1px 6px}.legend{font-weight:700;margin:10px 0 4px;border-top:1px solid var(--shadow);border-bottom:1px solid var(--light);padding-top:6px}.preview{display:block;margin:0 auto 8px;image-rendering:pixelated;background:#6a8f4a;box-shadow:inset 1px 1px 0 var(--shadow),inset 2px 2px 0 var(--dark)}#hud{position:absolute;top:6px;left:6px;line-height:1.6}#make-btn{position:absolute;top:6px;right:6px}#gallery-btn{position:absolute;bottom:6px;right:6px}#intro{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;padding:10px 14px}.frames{display:grid;grid-template-columns:1fr 1fr;gap:8px}.frame{background:#d8c8a0;box-shadow:inset -2px -2px #6b5a34,inset 2px 2px #f2e8cc,0 0 0 2px #8b6b3a;padding:6px;text-align:center}.frame canvas{image-rendering:pixelated;display:block;margin:0 auto 4px}.frame .name{font-weight:700;margin-bottom:2px;word-break:break-word}.frame .stat{color:#4a3f22}.memoriam{text-align:center;font-weight:700;font-size:14px;letter-spacing:2px;margin-bottom:8px}.empty{text-align:center;color:var(--shadow);padding:20px 0}