.controls.dock{position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:calc(100% - 36px);max-width:680px;margin:16px auto 24px;padding:10px;background:#ffffffb3;border:1px solid #fff;border-radius:24px;box-shadow:0 12px 35px #4249380b,inset 0 1px #fff}
.controls.dock button{--accent:#a65a65;--tint:#f8e8e9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:122px;padding:14px 6px 13px;text-align:center;border:1px solid transparent;border-radius:17px;background:transparent;box-shadow:none;color:#354238;transition:background .2s,box-shadow .2s,transform .2s,border-color .2s}
.controls.dock button[data-action=food]{--accent:#a87936;--tint:#f8eedb}.controls.dock button[data-action=play]{--accent:#4d806b;--tint:#e4f0e8}.controls.dock button[data-action=sleep]{--accent:#73759b;--tint:#eeedf7}
.controls.dock .icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px;background:var(--tint);color:var(--accent);transition:background .2s,color .2s,transform .2s}
.controls.dock .icon svg{display:block;width:23px;height:23px}.controls.dock button>span:not(.icon){font:600 14px/1.3 Arial,sans-serif;white-space:normal}.controls.dock small{font:12px/1.35 Arial,sans-serif;color:#788073;display:block;margin-top:-3px}
.controls.dock button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 30%,white);background:var(--tint);box-shadow:0 3px 10px #37403208}.controls.dock button[aria-pressed=true] .icon{background:var(--accent);color:#fff;box-shadow:0 4px 9px color-mix(in srgb,var(--accent) 20%,transparent)}
@media(hover:hover){.controls.dock button:hover{background:var(--tint);transform:translateY(-3px)}.controls.dock button:hover .icon{transform:rotate(-5deg)}}.controls.dock button:active{transform:scale(.96)}.controls.dock button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.companion:has(.activity:not([hidden])) .controls.dock{margin-top:12px}.activity{max-width:440px;border-radius:18px;border-color:#ffffffd9;padding:14px 18px;box-shadow:0 4px 20px #38463406}.activity button{min-height:44px;border-radius:12px;font-weight:600;background:#49644f;box-shadow:0 3px 7px #344d3212;transition:background .2s,transform .2s}.activity button:not(:disabled):hover{background:#38533f}.activity button:not(:disabled):active{transform:scale(.98)}.activity-top{font-size:13px}.progress-track{height:6px;margin:10px 0 13px}.progress-track span{border-radius:6px;background:#76987c}
@media(max-width:600px){.controls.dock{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 24px);padding:8px;gap:6px;border-radius:21px;margin:12px auto 16px}.controls.dock button{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;row-gap:4px;text-align:left;justify-content:initial;min-height:83px;padding:12px 9px;border-radius:14px}.controls.dock .icon{grid-row:1/3;width:36px;height:36px;border-radius:12px}.controls.dock .icon svg{width:21px;height:21px}.controls.dock button>span:not(.icon){font-size:14px;align-self:end}.controls.dock small{font-size:12px;align-self:start;margin:0}.activity{margin:4px 14px 12px}.response{padding:0 15px}#hint{font-size:12px}}
@media(max-width:350px){.controls.dock button{column-gap:6px;padding:11px 6px}.controls.dock small{font-size:12px}.controls.dock .icon{width:32px;height:32px}.controls.dock button{grid-template-columns:32px minmax(0,1fr)}}
@media(min-width:601px) and (max-height:750px){.world{height:255px}.pet{width:285px;height:285px}.controls.dock{margin:8px auto 16px;padding:7px}.controls.dock button{min-height:107px;padding:10px 6px}.controls.dock .icon{width:36px;height:36px;border-radius:12px}.companion:has(.activity:not([hidden])) .world{height:210px}.companion:has(.activity:not([hidden])) .pet{width:235px;height:235px}.heading{padding-top:18px}.response{min-height:54px}}