@font-face{font-family:pet;src:url(font.woff2)}*{box-sizing:border-box}body{margin:0;background:#181b20;color:#312d25;font:13px pet, sans-serif;display:grid;place-items:center;min-height:100dvh}main{width:min(100%,360px);background:#eee7d5;border:5px solid #777a77;box-shadow:0 0 0 2px #333;overflow:hidden}header{padding:10px;background:linear-gradient(#faf6db,#d2c69c);border-bottom:2px solid #988767;display:flex;justify-content:space-between;align-items:center}small{font:10px sans-serif;color:#625c4f}#screen{position:relative;aspect-ratio:240/280;background:#b7ac81}canvas{width:100%;height:100%;display:block}#overlay:not(:empty){position:absolute;inset:12px;background:#fff9e8f5;border:2px solid #887954;padding:14px;overflow:auto;box-shadow:3px 3px #53473360}h2{font-size:16px;margin:0 0 14px}p{line-height:1.6}button,input{font:inherit}button{border:1px solid #a09677;background:linear-gradient(#fffef0,#ddd3b4);color:#3f3b30;padding:9px 6px;cursor:pointer;min-height:38px}button:hover{background:#f5e2aa}button:focus-visible,input:focus-visible{outline:3px solid #306f98;outline-offset:-3px}button:disabled{opacity:.5;cursor:default}.choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}.chosen{background:#e9c778;border:2px solid #786743}input{width:100%;padding:9px;margin:12px 0;border:1px solid #95835e}#message{min-height:49px;margin:0;padding:8px 12px;background:#fffae9;border-top:2px solid #a58f68}#actions{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:5px}footer{display:flex;border-top:2px solid #998969}footer button{flex:1;border:0;border-right:1px solid #aa9f80;background:#dedbc9;font-size:12px}#save{font:10px sans-serif;margin:0;padding:6px;color:#6b6554;text-align:center}.row{display:flex;justify-content:space-between;margin:10px 0}.bar{width:95px;height:10px;background:#dad0b2;border:1px solid #918364}.bar i{display:block;height:100%;background:#87a363}.hint{font:11px/1.6 sans-serif;color:#766e5e}.sequence{font-size:28px;text-align:center;margin:20px 0;min-height:40px}.directions{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}#overlay button{margin-top:5px}

canvas{image-rendering:pixelated}#scene-label{position:absolute;top:0;left:0;right:0;padding:7px 10px;background:#fff7dcd9;font-size:12px;pointer-events:none}
#overlay.preview{inset:auto 6px 5px;background:#fff9e8ee;padding:8px;max-height:140px}#overlay.preview h2{font-size:12px;margin:0}#overlay.preview p{font-size:10px;margin:4px 0}#overlay.preview button{font-size:10px;padding:5px;min-height:30px}

#actions{position:absolute;inset:35px 5px 30px;display:block;pointer-events:none;padding:0}#actions button{position:absolute;pointer-events:auto;font-size:10px;min-height:35px;max-width:94px;padding:5px;border-radius:3px;background:#eee8d6dd}#actions button:nth-child(1){left:0;top:0}#actions button:nth-child(2){right:0;top:0}#actions button:nth-child(3){left:0;bottom:0}#actions button:nth-child(4){right:0;bottom:0}#actions button:nth-child(5){left:0;bottom:45px}#actions button:nth-child(6){right:0;bottom:45px}#mood{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:12px;padding:4px 8px;background:#eee3b8cf;border-radius:12px;pointer-events:none}#overlay{z-index:2}#overlay .row{align-items:center;font-size:12px;gap:8px}.bar{width:140px;height:12px;background:#eee;border-color:#a8acb7}.bar.good i{background:repeating-linear-gradient(to right,#477ac5 0,#477ac5 12px,transparent 12px,transparent 14px)}.bar.bad i{background:repeating-linear-gradient(to right,#c85555 0,#c85555 12px,transparent 12px,transparent 14px)}#overlay>button{display:block;width:100%;text-align:left;margin:4px 0}#overlay.preview>button{display:inline-block;width:auto;margin:2px}

#overlay.training{inset:auto 6px 5px;padding:8px;background:#fff9e8ee;max-height:180px}#overlay.training h2{margin:0 0 4px;font-size:13px}#overlay.training p{margin:4px 0;font-size:10px}#overlay.training>button{display:inline-block;width:auto;padding:5px 8px;min-height:30px;margin:2px}#overlay.ding-game{inset:0;border:0;background:transparent;box-shadow:none;padding:0;overflow:hidden}#overlay.ding-game h2{background:#e5e1c4ed;text-align:center;margin:0;padding:8px;font-size:14px}.ding-game .sequence{position:absolute;top:38px;left:5px;right:5px;font-size:13px;margin:0;padding:5px;background:#f6f0d5cc;min-height:0}.paw-controls{position:absolute;inset:90px 20px 55px;pointer-events:none}.paw-controls .paw{pointer-events:auto;position:absolute;width:80px;height:75px;border:0;background:none;padding:0;filter:drop-shadow(2px 4px 1px #273426aa);transition:filter .12s,transform .12s}.paw svg{width:100%;height:100%;fill:var(--paw);stroke:#fff5;stroke-width:2}.paw span{position:absolute;top:40px;left:30px;color:white;font-size:22px;text-shadow:2px 2px #3338}.paw-0{--paw:#c84c42;left:calc(50% - 40px);top:0}.paw-1{--paw:#427ac8;right:0;top:80px}.paw-2{--paw:#d4aa39;left:calc(50% - 40px);bottom:0}.paw-3{--paw:#7955b5;left:0;top:80px}.paw-controls .paw:disabled{opacity:.85}.paw-controls .paw.lit{filter:brightness(1.7) drop-shadow(0 0 9px #ffffbd);transform:scale(1.12)}#overlay.ding-game>.ding-exit{position:absolute;bottom:5px;left:6px;width:auto;font-size:11px;min-height:30px;padding:5px 10px}

#screen:has(#overlay.ding-game) #actions,#screen:has(#overlay.ding-game) #mood,#screen:has(#overlay.ding-game) #scene-label,#screen:has(#overlay.stanga-game) #actions,#screen:has(#overlay.stanga-game) #mood{visibility:hidden}#overlay.stanga-game{inset:0;padding:0;border:0;background:#4d913b;overflow:hidden;box-shadow:none}#overlay.stanga-game h2{margin:0;padding:6px;background:#dde8cc;text-align:center;font-size:13px}.stanga-court{height:calc(100% - 70px);width:100%;image-rendering:pixelated;touch-action:none;object-fit:fill}.stanga-score{position:absolute;top:30px;left:0;right:0;margin:0;text-align:center;background:#dde8ccdd;font-size:13px}.stanga-help{position:absolute;bottom:7px;right:5px;margin:0;font-size:10px;color:#eef5df}#overlay.stanga-game>button{position:absolute;bottom:3px;left:4px;width:auto;min-height:28px;font-size:10px;padding:4px}

#overlay.training{left:7px;right:auto;bottom:7px;width:190px;max-height:245px;padding:3px;border:2px solid #6b849a;border-radius:5px;background:#f3f4eee8;box-shadow:1px 2px #32465477}#overlay.training h2{font-size:12px;color:#36556b;margin:0;padding:4px 6px;border-bottom:1px solid #bac4ca}#overlay.training>button{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;margin:0;padding:3px 5px;text-align:left;background:transparent;border:0;border-radius:0;color:#173046;font-size:13px}#overlay.training>button::before{content:attr(data-number);display:inline-grid;place-items:center;width:19px;height:21px;background:linear-gradient(#ddeaf1,#88a8c1);border:1px solid #b5c4d0;color:#24445e;font-size:12px}#overlay.training>button.selected,#overlay.training>button:hover,#overlay.training>button:focus{background:linear-gradient(#f6b348,#ee9624);color:white;outline:none}#overlay.training p{padding:3px 6px;margin:0;font-size:10px}#screen:has(#overlay.training) #actions{visibility:hidden}.paw-controls .paw{width:68px;height:65px}.paw-controls .paw span{top:33px;left:25px;font-size:20px}.paw-0,.paw-2{left:calc(50% - 34px)}

.stanga-score{display:none}

/* Preserve the court and pet aspect ratio instead of stretching the canvas. */
.stanga-court{width:auto;height:calc(100% - 70px);max-width:100%;aspect-ratio:3/4;object-fit:contain;margin:0 auto;display:block}