@import url("./assets/game-demo.css");
.pet-shell{min-height:0!important}.pet-shell .scorebar{grid-template-columns:repeat(3,minmax(0,1fr))}.pet-shell .scorebar:has(#time-stat:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}
.pet-stage{position:relative;width:100%;height:max(500px,calc(100svh - 210px));max-height:920px;margin-top:4px;border:1px solid #e1bd7240;border-radius:18px;background:radial-gradient(ellipse at 50% 28%,#27364d 0,#111a2a 48%,#080d15 100%);overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.pet-canvas,.pet-hit-layer{position:absolute;inset:0;width:100%;height:100%}.pet-hit-layer{pointer-events:none}.pet-cube-hit{position:absolute;padding:0;border:0;background:transparent;color:transparent;pointer-events:none;opacity:1!important}.pet-cube-hit:focus-visible{outline:2px solid #ffe7a4;outline-offset:1px}.pet-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.touch-controller{position:absolute;z-index:6;bottom:8px;left:10px;right:10px;display:grid;grid-template-columns:minmax(138px,1fr) minmax(88px,1fr);align-items:end;gap:12px;min-width:0;pointer-events:none}.layer-control,.joystick-control{pointer-events:auto}.arrow-pad{position:relative;display:grid;grid-template:repeat(3,44px)/repeat(3,minmax(44px,1fr));gap:3px}.turn-arrow,.face-turn-button{display:grid;min-width:0;min-height:44px;place-items:center;padding:0;border:1px solid #77622f;border-radius:10px;background:linear-gradient(145deg,#1a2230,#080b11);box-shadow:inset 0 1px #fff1;color:#ffe5a0;font-size:18px;touch-action:none;cursor:pointer}.turn-arrow:active,.face-turn-button:active{background:linear-gradient(145deg,#a77c2c,#e4c878)}.turn-arrow:disabled,.face-turn-button:disabled{opacity:.3}.turn-up{grid-area:1/2}.turn-left{grid-area:2/1}.arrow-centre{display:grid;grid-area:2/2;place-items:center;color:#79642e}.turn-right{grid-area:2/3}.turn-down{grid-area:3/2}.face-turn-row{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:4px;margin-top:0}.face-turn-row span{text-align:center;color:#baad93;font-size:8px;font-weight:700}.face-turn-button{font-size:26px}.view-control-stack{display:grid;align-self:end;justify-self:end;gap:8px;min-width:0;width:100%;max-width:180px;pointer-events:none}.controller-action{width:100%;min-width:0;min-height:44px!important;margin:0!important;padding:6px 3px!important;font-size:11px;line-height:1.2;text-align:center;pointer-events:auto;touch-action:manipulation}.joystick-control{display:grid;min-width:0;width:100%;justify-items:center;gap:5px;color:#c4b591;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.joystick-base{position:relative;width:min(100%,112px);height:auto;aspect-ratio:1;min-width:88px;max-width:112px;border:1px solid #9b7d3b;border-radius:50%;background:radial-gradient(circle,#202a3c 0 16%,#111722 17% 52%,#080b11 53%);box-shadow:inset 0 0 20px #0008,0 5px 14px #0005;touch-action:none;cursor:grab}.joystick-base::before,.joystick-base::after{content:'';position:absolute;background:#8b743c55}.joystick-base::before{left:15%;right:15%;top:50%;height:1px}.joystick-base::after{top:15%;bottom:15%;left:50%;width:1px}.joystick-knob{position:absolute;z-index:2;left:50%;top:50%;width:42px;height:42px;border:1px solid #f3d98f;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff1b1,#c69a3f 45%,#5c3d14 100%);box-shadow:inset 0 2px #fff9,0 6px 13px #000b;transform:translate(-50%,-50%)}
.pet-picture-tray{position:relative;margin-top:8px;z-index:8}.pet-tray-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.pet-tray-actions button{min-height:44px;margin:0}.picture-drawer{position:absolute;left:0;right:0;bottom:calc(100% + 7px);max-height:min(50svh,440px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;border:1px solid #cbb16a;border-radius:15px;padding:0 10px 10px;background:#111c2cf5;box-shadow:0 -8px 24px #0007}.picture-drawer-heading{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:2px 0;background:#111c2c;color:#f4db9f}.picture-drawer-heading button{width:44px;height:44px}.pet-thumbnails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pet-thumb{position:relative;display:block;aspect-ratio:1;min-height:44px;min-width:0;padding:0;border:1px solid #7893a080;border-radius:9px;overflow:hidden;background:#0f1723;cursor:default}.pet-photo-open img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;pointer-events:none}.pet-photo-open>span{position:absolute;left:0;right:0;bottom:0;padding:5px 2px;color:#fff;background:linear-gradient(transparent,#08111fe8);font-size:.7rem;line-height:1.3;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pet-thumb.done{border:2px solid #82cbb4;box-shadow:0 0 0 1px #82cbb44d}.pet-thumb .pet-found{position:absolute;right:4px;top:4px;border-radius:50%;background:#163b2c;color:#fff;padding:0 3px;font-size:12px}.pet-solved{text-align:center;margin-top:10px}.pet-solved h2{margin:0 0 6px;font-size:1.2rem}.pet-solved p{font-size:.83rem;color:#c5c9d2;margin:0 0 12px}.pet-solved>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pet-message{text-align:center;font-size:.8rem;line-height:1.4;color:#ddceaa;margin:8px 0 0;min-height:1.4em}.pet-shell [hidden]{display:none!important}.pet-shell button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pet-stage *,.pet-tray-actions{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.demo-bar small{display:block}.demo-bar[hidden]{display:none}@container gf-page (min-width:600px){.touch-controller{left:16px;right:16px;grid-template-columns:minmax(138px,1fr) minmax(88px,1fr);gap:24px}.joystick-base{width:min(100%,116px);max-width:116px;height:auto;aspect-ratio:1}.joystick-knob{width:46px;height:46px}.controller-action{font-size:14px}.picture-drawer{max-width:560px;margin-inline:auto}.pet-photo-open>span{font-size:.85rem}}

.turn-arrow:focus-visible,.face-turn-button:focus-visible,.joystick-base:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}

.pet-selection-status{display:block;min-height:34px;color:#e5d6b7;font-size:11px;line-height:1.3;text-align:center;pointer-events:none}

.layer-control{display:grid;gap:6px;min-width:0;width:100%;max-width:180px;justify-self:start}.face-turn-row{margin-top:0}.pet-thumbnails{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.pet-photo-open{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:44px;margin:0;padding:0;border:0;border-radius:7px;overflow:hidden;background:transparent;cursor:zoom-in}.pet-photo-open:focus-visible{outline:3px solid #ffe8a6;outline-offset:-4px}.pet-found{pointer-events:none}
.pet-picture-zoom{width:min(94vw,760px);max-width:calc(100vw - 20px);max-height:calc(100svh - 24px);padding:10px;border:1px solid #bda05b;border-radius:16px;background:#101b2b;overflow:hidden}.pet-zoom-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:8px}.pet-zoom-heading h2{margin:0;font-size:1.1rem;color:#f1dba5}.pet-zoom-heading button{flex:0 0 44px;width:44px;height:44px;margin:0}.pet-picture-zoom img{display:block;width:min(100%,calc(100svh - 110px));height:auto;max-height:calc(100svh - 110px);aspect-ratio:1;object-fit:contain;border-radius:9px;margin:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}